Dialog pinch zoom

.circleci/comment.js

@@ -57,7 +57,8 @@ async function run() {
       [Publish stats](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/publish.json)
       [Size diff since last release](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/size-diff.txt)
       [Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)
-      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)`
+      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
+      [S2 Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)`
         });
       }
     } catch (error) {
@@ -79,6 +80,7 @@ async function run() {
   * [View the storybook-19](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-19/index.html)
   * [View the storybook-17](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-17/index.html)
   * [View the storybook-16](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-16/index.html)
+  * [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
   * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`
       });
     } catch (err) {

.circleci/config.yml

@@ -53,11 +53,6 @@ jobs:
     executor: rsp-large
     steps:
       - checkout
-      - restore_cache:
-          keys:
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-
 
       - run:
           name: Write npmrc
@@ -69,12 +64,7 @@ jobs:
       - run:
           name: build
           command: |
-            yarn --pure-lockfile --cache-folder ~/.cache/yarn
-
-      - save_cache:
-         paths:
-           - ~/.cache/yarn
-         key: rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            yarn --immutable
 
       - save_cache:
           paths:
@@ -85,16 +75,18 @@ jobs:
     executor: rsp-large
     steps:
       - checkout
-      - restore_cache:
-          keys:
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-
+
+      - run:
+          name: Write npmrc
+          command: |
+            if [ $NPM_PASSWORD ]; then
+              cp .circleci/.npmrc .npmrc
+            fi
 
       - run:
           name: build
           command: |
-            yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-16 --cache-folder ~/.cache/yarn
+            yarn install --immutable && yarn install-16
 
       - save_cache:
           paths:
@@ -105,16 +97,18 @@ jobs:
     executor: rsp-large
     steps:
       - checkout
-      - restore_cache:
-          keys:
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-
+
+      - run:
+          name: Write npmrc
+          command: |
+            if [ $NPM_PASSWORD ]; then
+              cp .circleci/.npmrc .npmrc
+            fi
 
       - run:
           name: build
           command: |
-            yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-17 --cache-folder ~/.cache/yarn
+            yarn install --immutable && yarn install-17
 
       - save_cache:
           paths:
@@ -125,16 +119,18 @@ jobs:
     executor: rsp-large
     steps:
       - checkout
-      - restore_cache:
-          keys:
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-{{ .Branch }}-
-            - rsp-yarn-{{ .Environment.CACHE_VERSION }}-
+
+      - run:
+          name: Write npmrc
+          command: |
+            if [ $NPM_PASSWORD ]; then
+              cp .circleci/.npmrc .npmrc
+            fi
 
       - run:
           name: build
           command: |
-            yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-19 --cache-folder ~/.cache/yarn
+            yarn install --immutable && yarn install-19
 
       - save_cache:
           paths:
@@ -292,11 +288,10 @@ jobs:
           name: test
           command: |
             make build
-            yarn lerna run prepublishOnly
             node --loader ./scripts/esm-support/loader.mjs ./scripts/esm-support/testESM.mjs
 
   lint:
-    executor: rsp
+    executor: rsp-xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
@@ -350,7 +345,7 @@ jobs:
           command: |
             yarn test:parcel
             mkdir -p dist
-            yarn --silent compare:apis --isCI --branch-api-dir="/tmp/dist/branch-api" --base-api-dir="/tmp/dist/base-api" | tee dist/ts-diff.txt
+            yarn compare:apis --isCI --branch-api-dir="/tmp/dist/branch-api" --base-api-dir="/tmp/dist/base-api" | tee dist/ts-diff.txt
 
       - persist_to_workspace:
           root: dist
@@ -427,6 +422,21 @@ jobs:
           paths:
             - '*/storybook-19/'
 
+  storybook-s2:
+    executor: rsp-large
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build s2 storybook
+          command: yarn build:storybook-s2
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/storybook-s2/'
+
   docs:
     executor: rsp-xlarge
     steps:
@@ -479,6 +489,7 @@ jobs:
     steps:
       - attach_workspace:
           at: /tmp/dist
+
       - run:
           name: deploy
           command: |
@@ -612,6 +623,9 @@ workflows:
       - storybook-19:
           requires:
             - install-19
+      - storybook-s2:
+          requires:
+            - install
       - docs:
           requires:
             - install
@@ -635,6 +649,7 @@ workflows:
             - storybook-16
             - storybook-17
             - storybook-19
+            - storybook-s2
             - docs
       - deploy-verdaccio:
           requires:
@@ -685,3 +700,12 @@ workflows:
     jobs:
       - install
       - publish-nightly
+
+  nightly-manual:
+    when:
+      and:
+        - equal: [ "nightly", << pipeline.parameters.GHA_Action >> ]
+        - equal: [ "workflow_dispatch", << pipeline.parameters.GHA_Event >>]
+    jobs:
+      - install
+      - publish-nightly

.eslintignore

@@ -16,3 +16,4 @@ packages/dev/storybook-builder-parcel/preview.js
 packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts
 examples/**
 starters/**
+packages/@react-spectrum/s2/icon.d.ts

.eslintrc.js

@@ -97,6 +97,12 @@ module.exports = {
         }
       ]
     }
+  },
+  {
+    files: ['packages/@react-spectrum/s2/**'],
+    rules: {
+      'react/react-in-jsx-scope': OFF
+    }
   }],
   env: {
     'browser': true,

.github/workflows/nightly.yaml

@@ -0,0 +1,12 @@
+name: Manual nightly deploy
+on: workflow_dispatch
+
+jobs:
+  trigger-circleci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Run CircleCI
+        id: nightly
+        uses: CircleCI-Public/[email protected]
+        env:
+          CCI_TOKEN: ${{ secrets.CCI_TOKEN }}

.gitignore

@@ -8,10 +8,12 @@ build-storybook.log
 coverage
 dist
 junit.xml
+.yarn/install-state.gz
 node_modules
 npm-debug.log
 public
 storybook-static
 test-reports.xml
+storage
 packages/dev/storybook-builder-parcel/iframe.html
 packages/dev/storybook-builder-parcel/preview.js

.parcelrc-build

@@ -3,13 +3,18 @@
   "resolvers": ["@parcel/resolver-glob", "parcel-resolver-build", "..."],
   "bundler": "@parcel/bundler-library",
   "transformers": {
+    "style-types:*.ts": ["@parcel/transformer-typescript-types"],
     "packages/**/intl/*.json": ["parcel-transformer-intl"],
     "bundle-text:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"],
+    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    "packages/@react-spectrum/s2/{s2wf-icons,spectrum-illustrations}/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    // Disable PostCSS from running over style macro output
+    "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
     "*.svg": ["@parcel/transformer-svg-react"],
     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
       "@parcel/transformer-js",
       "@parcel/transformer-react-refresh-wrap"
     ]
   },
-  "namers": ["parcel-namer-intl", "..."]
+  "namers": ["parcel-namer-s2", "parcel-namer-intl", "..."]
 }

.storybook-s2/.parcelrc

@@ -0,0 +1,19 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "transformers": {
+    "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
+    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    // Disable PostCSS from running over style macro output
+    "*.css": ["@parcel/transformer-css"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ],
+    "*.svg": ["@parcel/transformer-svg-react"],
+    "*.{mdx,md}": ["parcel-transformer-mdx-storybook"],
+    "raw:*": ["@parcel/transformer-raw"]
+  }
+}

.storybook-s2/constants.js

@@ -0,0 +1,44 @@
+// 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-s2/custom-addons/provider/index.js

@@ -0,0 +1,50 @@
+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/s2';
+
+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);
+
+  useEffect(() => {
+    let channel = addons.getChannel();
+    let providerUpdate = (event) => {
+      setLocale(event.locale);
+    };
+
+    channel.on('provider/updated', providerUpdate);
+    channel.emit('rsp/ready-for-update');
+    return () => {
+      channel.removeListener('provider/updated', providerUpdate);
+    };
+  }, []);
+
+  return (
+    <Provider locale={localeValue}>
+      {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>
+    );
+  }
+});