fix(#1999): refactor to use SearchAutocomplete and v3 of AlgoliaSearch API

.chromatic/constants.js

@@ -5,6 +5,7 @@ import themeDark from '@adobe/spectrum-css-temp/vars/spectrum-dark.css';
 import themeDarkest from '@adobe/spectrum-css-temp/vars/spectrum-darkest.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
+import express from '@adobe/spectrum-css-temp/vars/express.css';
 
 const THEME = {
   global: themeGlobal,
@@ -20,15 +21,15 @@ export const scales = {
 };
 
 export let defaultTheme = {
-  global: themeGlobal,
+  global: THEME.global,
   light: THEME.light,
   dark: THEME.darkest,
   medium: scales.medium,
   large: scales.large
 };
 
 export let altTheme = {
-  global: themeGlobal,
+  global: THEME.global,
   light: THEME.lightest,
   dark: THEME.dark,
   medium: scales.medium,
@@ -42,6 +43,25 @@ export let themes = {
   darkest: defaultTheme
 };
 
+export let expressThemes = {};
+for (let key in themes) {
+  expressThemes[key] = {
+    ...themes[key],
+    global: {
+      ...themes[key].global,
+      express: express.express
+    },
+    medium: {
+      ...themes[key].medium,
+      express: express.medium
+    },
+    large: {
+      ...themes[key].large,
+      express: express.large
+    }
+  };
+}
+
 // Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
 export let locales = [
   {label: 'Auto', value: ''},

.chromatic/custom-addons/chromatic/disableAnimations.css

@@ -0,0 +1,3 @@
+.disableAnimations * {
+  transition: none !important;
+}

.chromatic/custom-addons/chromatic/index.js

@@ -1,7 +1,8 @@
-import {locales, scales, themes} from '../../constants';
+import {expressThemes, locales, scales, themes} from '../../constants';
 import {makeDecorator} from '@storybook/addons';
 import {Provider, View} from '@adobe/react-spectrum';
 import React, {useEffect} from 'react';
+import './disableAnimations.css';
 
 export const withChromaticProvider = makeDecorator({
   name: 'withChromaticProvider',
@@ -14,6 +15,8 @@ export const withChromaticProvider = makeDecorator({
     } else {
       selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US', 'ar-AE'];
     }
+    let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
+    let scalesToRender = options.scales || Object.keys(scales);
     let height;
     let minHeight;
     if(isNaN(options.height)) {
@@ -22,12 +25,17 @@ export const withChromaticProvider = makeDecorator({
       height = options.height;
     }
 
+    let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
+    let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
+    let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
+    let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
+
     // do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
     return (
       <DisableAnimations disableAnimations={options.disableAnimations}>
         <div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
-            {(options.colorSchemes || Object.keys(themes)).map(colorScheme =>
-              (options.scales || Object.keys(scales)).map(scale =>
+            {colorSchemes.map(colorScheme =>
+              scalesToRender.map(scale =>
                 (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
                   <Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
                     <View margin="size-100">
@@ -38,6 +46,14 @@ export const withChromaticProvider = makeDecorator({
                 )
               )
             )}
+            {options.express !== false &&
+              <Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
+                <View margin="size-100">
+                  <h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
+                  {getStory(context)}
+                </View>
+              </Provider>
+            }
         </div>
       </DisableAnimations>
     )

.chromatic/main.js

@@ -1,36 +1,15 @@
 
-const webpackconfig = require('./webpack-chromatic.config.js');
-
 module.exports = {
-  stories: ['../packages/**/chromatic/**/*.chromatic.@(js|jsx|ts|tsx)'],
-  addons: [
+  core: {
+    builder: "storybook-builder-parcel",
+  },
+  stories: ['../packages/**/chromatic/**/*.chromatic.{js,jsx,ts,tsx}'],
+  addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addon-a11y',
-    '@storybook/addon-knobs'
+    '@storybook/addon-a11y'
   ],
   typescript: {
     check: false,
     reactDocgen: false
-  },
-  webpackFinal: async (config) => {
-    let custom = webpackconfig();
-
-    let resultConfig = {
-      ...config,
-      plugins: config.plugins.concat(custom.plugins),
-      parallelism: 1,
-      module: {
-        ...config.module,
-        rules: custom.module.rules
-      }
-    };
-
-    if (resultConfig.mode === 'production') {
-      // see https://github.com/storybooks/storybook/issues/1570
-      resultConfig.plugins = resultConfig.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
-    }
-
-    return resultConfig;
   }
 };