feat: same same but different

.storybook/.parcelrc

@@ -0,0 +1,8 @@
+{
+  "extends": "@parcel/config-storybook",
+  "resolvers": ["@parcel/resolver-glob", "..."],
+  "transformers": {
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    "raw:*": ["@parcel/transformer-raw"]
+  }
+}

.storybook/constants.js

@@ -0,0 +1,108 @@
+import themeGlobal from '../packages/@fds/fds-css/vars/spectrum-global.css';
+import themeLight from '../packages/@fds/fds-css/vars/spectrum-light.css';
+import themeLightest from '../packages/@fds/fds-css/vars/spectrum-lightest.css';
+import themeDark from '../packages/@fds/fds-css/vars/spectrum-dark.css';
+import themeDarkest from '../packages/@fds/fds-css/vars/spectrum-darkest.css';
+import scaleMedium from '../packages/@fds/fds-css/vars/spectrum-medium.css';
+import scaleLarge from '../packages/@fds/fds-css/vars/spectrum-large.css';
+import express from '../packages/@fds/fds-css/vars/express.css';
+
+const THEME = {
+  global: themeGlobal,
+  light: themeLight,
+  lightest: themeLightest,
+  dark: themeDark,
+  darkest: themeDarkest
+};
+
+export const scales = {
+  medium: scaleMedium,
+  large: scaleLarge
+};
+
+export let defaultTheme = {
+  global: THEME.global,
+  light: THEME.light,
+  dark: THEME.darkest,
+  medium: scales.medium,
+  large: scales.large
+};
+
+export let altTheme = {
+  global: THEME.global,
+  light: THEME.lightest,
+  dark: THEME.dark,
+  medium: scales.medium,
+  large: scales.large
+};
+
+export let themes = {
+  light: defaultTheme,
+  dark: altTheme,
+  lightest: altTheme,
+  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: ''},
+  // Tier 1
+  {label: 'French (France)', value: 'fr-FR'},
+  {label: 'French (Canada)', value: 'fr-CA'},
+  {label: 'German (Germany)', value: 'de-DE'},
+  {label: 'English (Great Britain)', value: 'en-GB'},
+  {label: 'English (United States)', value: 'en-US'},
+  {label: 'Japanese (Japan)', value: 'ja-JP'},
+  // // Tier 2
+  {label: 'Danish (Denmark)', value: 'da-DK'},
+  {label: 'Dutch (Netherlands)', value: 'nl-NL'},
+  {label: 'Finnish (Finland)', value: 'fi-FI'},
+  {label: 'Italian (Italy)', value: 'it-IT'},
+  {label: 'Norwegian (Norway)', value: 'nb-NO'},
+  {label: 'Spanish (Spain)', value: 'es-ES'},
+  {label: 'Swedish (Sweden)', value: 'sv-SE'},
+  {label: 'Portuguese (Brazil)', value: 'pt-BR'},
+  // // Tier 3
+  {label: 'Chinese (Simplified)', value: 'zh-CN'},
+  {label: 'Chinese (Traditional)', value: 'zh-TW'},
+  {label: 'Korean (Korea)', value: 'ko-KR'},
+  // // Tier 4
+  {label: 'Bulgarian (Bulgaria)', value: 'bg-BG'},
+  {label: 'Croatian (Croatia)', value: 'hr-HR'},
+  {label: 'Czech (Czech Republic)', value: 'cs-CZ'},
+  {label: 'Estonian (Estonia)', value: 'et-EE'},
+  {label: 'Hungarian (Hungary)', value: 'hu-HU'},
+  {label: 'Latvian (Latvia)', value: 'lv-LV'},
+  {label: 'Lithuanian (Lithuania)', value: 'lt-LT'},
+  {label: 'Polish (Poland)', value: 'pl-PL'},
+  {label: 'Romanian (Romania)', value: 'ro-RO'},
+  {label: 'Russian (Russia)', value: 'ru-RU'},
+  {label: 'Serbian (Serbia)', value: 'sr-SP'},
+  {label: 'Slovakian (Slovakia)', value: 'sk-SK'},
+  {label: 'Slovenian (Slovenia)', value: 'sl-SI'},
+  {label: 'Turkish (Turkey)', value: 'tr-TR'},
+  {label: 'Ukrainian (Ukraine)', value: 'uk-UA'},
+  // // Tier 5
+  {label: 'Arabic (United Arab Emirates)', value: 'ar-AE'}, // ar-SA??
+  {label: 'Greek (Greece)', value: 'el-GR'},
+  {label: 'Hebrew (Israel)', value: 'he-IL'}
+];

.storybook/custom-addons/descriptions/register.js

@@ -0,0 +1,28 @@
+
+import {addons, types} from '@storybook/manager-api';
+import { AddonPanel } from '@storybook/components';
+import React from 'react';
+import { useParameter } from '@storybook/api';
+
+const ADDON_ID = 'descriptionAddon';
+const PANEL_ID = `${ADDON_ID}/panel`;
+
+const PARAM_KEY = 'description';
+
+const MyPanel = () => {
+  const value = useParameter(PARAM_KEY, null);
+  const item = value ? value.data : 'No description for this story.';
+  return <div style={{margin: '15px'}}>{item}</div>;
+};
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Description',
+    render: ({ active }) => (
+      <AddonPanel active={active}>
+        <MyPanel />
+      </AddonPanel>
+    ),
+  });
+});

.storybook/custom-addons/provider/index.js

@@ -0,0 +1,72 @@
+import React, {useEffect, useState} from 'react';
+import {addons} from '@storybook/preview-api';
+import {makeDecorator} from '@storybook/preview-api';
+import {getQueryParams} from '@storybook/preview-api';
+import {Provider} from '@react-spectrum/provider';
+import {expressThemes, themes, defaultTheme} from '../../constants';
+
+document.body.style.margin = '0';
+
+const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
+  if (k.includes('providerSwitcher-')) {
+    return { ...acc, [k.replace('providerSwitcher-', '')]: v };
+  }
+  return acc;
+}, {});
+
+function ProviderUpdater(props) {
+  let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
+  let [themeValue, setTheme] = useState(providerValuesFromUrl.theme || undefined);
+  let [scaleValue, setScale] = useState(providerValuesFromUrl.scale || undefined);
+  let [expressValue, setExpress] = useState(providerValuesFromUrl.express === 'true');
+  let [storyReady, setStoryReady] = useState(window.parent === window || window.parent !== window.top); // reduce content flash because it takes a moment to get the provider details
+  // Typically themes are provided with both light + dark, and both scales.
+  // To build our selector to see all themes, we need to hack it a bit.
+  let theme = (expressValue ? expressThemes : themes)[themeValue || 'light'] || defaultTheme;
+  let colorScheme = themeValue && themeValue.replace(/est$/, '');
+  useEffect(() => {
+    let channel = addons.getChannel();
+    let providerUpdate = (event) => {
+      setLocale(event.locale);
+      setTheme(event.theme === 'Auto' ? undefined : event.theme);
+      setScale(event.scale === 'Auto' ? undefined : event.scale);
+      setExpress(event.express);
+      setStoryReady(true);
+    };
+
+    channel.on('provider/updated', providerUpdate);
+    channel.emit('rsp/ready-for-update');
+    return () => {
+      channel.removeListener('provider/updated', providerUpdate);
+    };
+  }, []);
+
+  if (props.options.mainElement == null) {
+    return (
+      <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
+        <main>
+          {storyReady && props.children}
+        </main>
+      </Provider>
+    );
+  } else {
+    return (
+      <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
+        {storyReady && props.children}
+      </Provider>
+    );
+  }
+}
+
+export const withProviderSwitcher = makeDecorator({
+  name: 'withProviderSwitcher',
+  parameterName: 'providerSwitcher',
+  wrapper: (getStory, context, {options, parameters}) => {
+    options = {...options, ...parameters};
+    return (
+      <ProviderUpdater options={options} context={context}>
+        {getStory(context)}
+      </ProviderUpdater>
+    );
+  }
+});

.storybook/custom-addons/provider/register.js

@@ -0,0 +1,128 @@
+
+import {addons, types} from '@storybook/manager-api';
+import {getQueryParams} from '@storybook/preview-api';
+import {locales} from '../../constants';
+import React, {useEffect, useState} from 'react';
+
+const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
+  if (k.includes('providerSwitcher-')) {
+    return { ...acc, [k.replace('providerSwitcher-', '')]: v };
+  }
+  return acc;
+}, {});
+
+let THEMES = [
+  {label: 'Auto', value: ''},
+  {label: "Light", value: "light"},
+  {label: "Lightest", value: "lightest"},
+  {label: "Dark", value: "dark"},
+  {label: "Darkest", value: "darkest"}
+];
+
+let SCALES = [
+  {label: 'Auto', value: ''},
+  {label: "Medium", value: "medium"},
+  {label: "Large", value: "large"}
+];
+
+let TOAST_POSITIONS = [
+  {label: 'top', value: 'top'},
+  {label: 'top left', value: 'top left'},
+  {label: 'top center', value: 'top center'},
+  {label: 'top right', value: 'top right'},
+  {label: 'bottom', value: 'bottom'},
+  {label: 'bottom left', value: 'bottom left'},
+  {label: 'bottom center', value: 'bottom center'},
+  {label: 'bottom right', value: 'bottom right'}
+];
+
+function ProviderFieldSetter({api}) {
+  let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, express: providerValuesFromUrl.express === 'true'});
+  let channel = addons.getChannel();
+  let onLocaleChange = (e) => {
+    let newValue = e.target.value || undefined;
+    setValues((old) => {
+      let next = {...old, locale: newValue};
+      channel.emit('provider/updated', next);
+      return next;
+    });
+  };
+  let onThemeChange = (e) => {
+    let newValue = e.target.value || undefined;
+    setValues((old) => {
+      let next = {...old, theme: newValue};
+      channel.emit('provider/updated', next);
+      return next;
+    });
+  };
+  let onScaleChange = (e) => {
+    let newValue = e.target.value || undefined;
+    setValues((old) => {
+      let next = {...old, scale: newValue};
+      channel.emit('provider/updated', next);
+      return next;
+    });
+  };
+  let onExpressChange = (e) => {
+    let newValue = e.target.checked;
+    setValues((old) => {
+      let next = {...old, express: newValue};
+      channel.emit('provider/updated', next);
+      return next;
+    });
+  };
+  useEffect(() => {
+    let storySwapped = () => {
+      channel.emit('provider/updated', values);
+    };
+    channel.on('rsp/ready-for-update', storySwapped);
+    return () => {
+      channel.removeListener('rsp/ready-for-update', storySwapped);
+    };
+  });
+
+  useEffect(() => {
+    api.setQueryParams({
+      'providerSwitcher-locale': values.locale || '',
+      'providerSwitcher-theme': values.theme || '',
+      'providerSwitcher-scale': values.scale || '',
+      'providerSwitcher-express': String(values.express),
+    });
+  });
+
+  return (
+    <div style={{display: 'flex', alignItems: 'center', fontSize: '12px'}}>
+      <div style={{marginRight: '10px'}}>
+        <label htmlFor="locale">Locale: </label>
+        <select id="locale" name="locale" onChange={onLocaleChange} value={values.locale}>
+          {locales.map(locale => <option key={locale.label} value={locale.value}>{locale.label}</option>)}
+        </select>
+      </div>
+      <div style={{marginRight: '10px'}}>
+        <label htmlFor="theme">Theme: </label>
+        <select id="theme" name="theme" onChange={onThemeChange} value={values.theme}>
+          {THEMES.map(theme => <option key={theme.label} value={theme.value}>{theme.label}</option>)}
+        </select>
+      </div>
+      <div style={{marginRight: '10px'}}>
+        <label htmlFor="scale">Scale: </label>
+        <select id="scale" name="scale" onChange={onScaleChange} value={values.scale}>
+          {SCALES.map(scale => <option key={scale.label} value={scale.value}>{scale.label}</option>)}
+        </select>
+      </div>
+      <div style={{marginRight: '10px'}}>
+        <label htmlFor="express">Express: </label>
+        <input type="checkbox" id="express" name="express" onChange={onExpressChange} checked={values.express} />
+      </div>
+    </div>
+  )
+}
+
+addons.register('ProviderSwitcher', (api) => {
+  addons.add('ProviderSwitcher', {
+    title: 'viewport',
+    type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: () => <ProviderFieldSetter api={api} />,
+  });
+});