feat(theme): prepare Autocomplete Classic Theme (#361)

Author: francoischalifour

.browserslistrc

@@ -0,0 +1 @@
+defaults

.circleci/config.yml

@@ -99,6 +99,17 @@ jobs:
       - run:
           name: Linting
           command: yarn run lint
+  test_lint_css:
+    <<: *defaults
+    steps:
+      - checkout
+      - run: *install_yarn_version
+      - restore_cache: *restore_yarn_cache
+      - run: *run_yarn_install
+      - save_cache: *save_yarn_cache
+      - run:
+          name: Linting CSS
+          command: yarn run lint:css
   test_types:
     <<: *defaults
     steps:
@@ -158,6 +169,7 @@ workflows:
       - test_lint:
           requires:
             - build
+      - test_lint_css
       - test_types
       - test_unit:
           requires:

.codesandbox/ci.json

@@ -2,5 +2,6 @@
   "packages": ["packages/autocomplete-*"],
   "buildCommand": false,
   "^": "buildCommand is false because `yarn prepare` is going to build packages anyway.",
-  "sandboxes": ["/examples/js", "/examples/react-renderer"]
+  "sandboxes": ["/examples/js", "/examples/react-renderer"],
+  "node": "14"
 }

.stylelintrc.json

@@ -11,15 +11,16 @@
     "stylelint-prettier/recommended"
   ],
   "rules": {
-    "selector-class-pattern": ["^Autocomplete-[A-Za-z0-9-]*$"],
+    "selector-class-pattern": ["^aa-[A-Za-z0-9-]*$"],
     "prettier/prettier": true,
     "max-nesting-depth": [
-      2,
+      1,
       {
         "ignore": ["pseudo-classes"],
         "ignoreAtRules": ["media"]
       }
     ],
+    "rule-empty-line-before": "always",
     "plugin/no-unsupported-browser-features": [
       null,
       {

examples/js/app.ts

@@ -5,6 +5,8 @@ import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-pl
 import algoliasearch from 'algoliasearch';
 import insightsClient from 'search-insights';
 
+import '@algolia/autocomplete-theme-classic';
+
 const appId = 'latency';
 const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
 const searchClient = algoliasearch(appId, apiKey);

examples/js/index.html

@@ -4,7 +4,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="autocomplete.css" />
 
     <title>Autocomplete JavaScript</title>
   </head>

examples/js/package.json

@@ -15,6 +15,7 @@
     "@algolia/autocomplete-plugin-query-suggestions": "1.0.0-alpha.35",
     "@algolia/autocomplete-plugin-recent-searches": "1.0.0-alpha.35",
     "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.35",
+    "@algolia/autocomplete-theme-classic": "1.0.0-alpha.35",
     "algoliasearch": "4.7.0",
     "search-insights": "1.6.2"
   },

examples/react-renderer/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@algolia/autocomplete-core": "1.0.0-alpha.35",
     "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.35",
+    "@algolia/autocomplete-theme-classic": "1.0.0-alpha.35",
     "algoliasearch": "4.8.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",

examples/react-renderer/src/autocomplete.css

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import '@algolia/autocomplete-theme-classic';
+
 import './reset.css';
 import './index.css';
-import './autocomplete.css';
 import { App } from './App';
 
 ReactDOM.render(

examples/react-renderer/src/index.tsx

@@ -7,10 +7,12 @@
   ],
   "scripts": {
     "build:clean": "lerna run build:clean --no-private",
+    "build:css": "lerna run build:css --no-private",
     "build:esm": "lerna run build:esm --no-private",
     "build:types": "lerna run build:types --no-private",
     "build:umd": "lerna run build:umd --no-private",
     "build": "lerna run build --no-private",
+    "lint:css": "stylelint packages/*/src/**/*.scss",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "playground:start": "yarn workspace @algolia/js-example start",
     "prepare": "lerna run prepare --no-private",
@@ -41,6 +43,7 @@
     "@typescript-eslint/eslint-plugin": "2.19.0",
     "@typescript-eslint/parser": "2.19.0",
     "algoliasearch": "4.6.0",
+    "autoprefixer": "10.0.1",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.1",
     "babel-plugin-inline-json": "1.2.2",
@@ -65,6 +68,8 @@
     "jest-diff": "26.6.2",
     "jest-watch-typeahead": "0.6.1",
     "lerna": "3.22.1",
+    "postcss": "8.1.6",
+    "postcss-node-sass": "2.1.8",
     "prettier": "2.1.2",
     "rollup": "2.33.2",
     "rollup-plugin-babel": "4.4.0",

package.json

@@ -0,0 +1,30 @@
+import { Component } from '../types/Component';
+
+export const LoadingIcon: Component<{}, SVGSVGElement> = () => {
+  const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  element.setAttribute('class', 'aa-LoadingIcon');
+  element.setAttribute('viewBox', '0 0 100 100');
+  element.setAttribute('width', '20');
+  element.setAttribute('height', '20');
+
+  element.innerHTML = `<circle
+  cx="50"
+  cy="50"
+  fill="none"
+  r="35"
+  stroke="currentColor"
+  stroke-dasharray="164.93361431346415 56.97787143782138"
+  stroke-width="4"
+>
+  <animateTransform
+    attributeName="transform"
+    type="rotate"
+    repeatCount="indefinite"
+    dur="1s"
+    values="0 50 50;90 50 50;180 50 50;360 50 50"
+    keyTimes="0;0.40;0.65;1"
+  />
+</circle>`;
+
+  return element;
+};

packages/autocomplete-js/src/components/LoadingIcon.ts

@@ -0,0 +1,15 @@
+# @algolia/autocomplete-theme-classic
+
+Classic theme for Algolia Autocomplete.
+
+## Installation
+
+```sh
+yarn add @algolia/autocomplete-theme-classic@alpha
+# or
+npm install @algolia/autocomplete-theme-classic@alpha
+```
+
+## Documentation
+
+[Read documentation →](https://algolia-autocomplete.netlify.app)

packages/autocomplete-theme-classic/README.md

@@ -0,0 +1,27 @@
+{
+  "name": "@algolia/autocomplete-theme-classic",
+  "description": "Classic theme for Algolia Autocomplete.",
+  "version": "1.0.0-alpha.35",
+  "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete.js",
+  "repository": "algolia/autocomplete.js",
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist/"
+  ],
+  "main": "dist/theme.css",
+  "unpkg": "dist/theme.css",
+  "jsdelivr": "dist/theme.css",
+  "scripts": {
+    "build:clean": "rm -rf ./dist",
+    "build:css": "node ../../scripts/buildCss.mjs src/theme.scss dist/theme.css",
+    "build": "yarn build:clean && yarn build:css",
+    "on:change": "yarn build:css",
+    "prepare": "yarn build:css",
+    "watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\""
+  }
+}