Merge branch 'main' into s2

Author: devongovett

.browserslistrc

@@ -0,0 +1,4 @@
+chrome >= 79
+firefox >= 85
+safari >= 13
+edge >= 88

.chromatic-fc/.parcelrc

@@ -0,0 +1,11 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "transformers": {
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

.chromatic-fc/constants.js

@@ -0,0 +1,108 @@
+import themeGlobal from '@adobe/spectrum-css-temp/vars/spectrum-global.css';
+import themeLight from '@adobe/spectrum-css-temp/vars/spectrum-light.css';
+import themeLightest from '@adobe/spectrum-css-temp/vars/spectrum-lightest.css';
+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,
+  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'}
+];

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

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

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

@@ -0,0 +1,72 @@
+import {expressThemes, locales, scales, themes} from '../../constants';
+import {makeDecorator} from '@storybook/preview-api';
+import {Provider, View} from '@adobe/react-spectrum';
+import React, {useEffect} from 'react';
+import './disableAnimations.css';
+
+export const withChromaticProvider = makeDecorator({
+  name: 'withChromaticProvider',
+  parameterName: 'chromaticProvider',
+  wrapper: (getStory, context, {options, parameters}) => {
+    options = {express: false, ...options, ...parameters};
+    let selectedLocales
+    if (options.locales && options.locales.length) {
+      selectedLocales = options.locales;
+    } else {
+      selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US'];
+    }
+    let colorSchemes = options.express ? [] : (options.colorSchemes || ['light']);
+    let scalesToRender = options.scales || ['medium'];
+    let height;
+    let minHeight;
+    if(isNaN(options.height)) {
+      minHeight = 1000;
+    } else {
+      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}}>
+            {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">
+                      <h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
+                      {getStory(context)}
+                    </View>
+                  </Provider>
+                )
+              )
+            )}
+            {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>
+    )
+  }
+});
+
+function DisableAnimations({children, disableAnimations}) {
+  useEffect(() => {
+    if (disableAnimations) {
+      document.body.classList.add('disableAnimations');
+    } else {
+      document.body.classList.remove('disableAnimations');
+    }
+  }, [disableAnimations]);
+  return children;
+}

.chromatic-fc/layout.js

@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export function VerticalCenter({children, className, style}) {
+  return (
+    <div
+      className={ clsx('react-spectrum-story', className) }
+      style={style}
+    >
+      { children }
+    </div>
+  );
+}

.chromatic-fc/main.js

@@ -0,0 +1,16 @@
+
+module.exports = {
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
+  },
+  stories: ['../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}'],
+  addons: process.env.NODE_ENV === 'production' ? [] : [
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y'
+  ],
+  typescript: {
+    check: false,
+    reactDocgen: false
+  }
+};

.chromatic-fc/manager.js

@@ -0,0 +1,8 @@
+import {addons} from '@storybook/manager-api';
+
+addons.setConfig({
+  enableShortcuts: false,
+  sidebar: {
+    showRoots: false,
+  }
+});