feat: 🎸 add press events to Tab

.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,7 +288,6 @@ jobs:
           name: test
           command: |
             make build
-            yarn lerna run prepublishOnly
             node --loader ./scripts/esm-support/loader.mjs ./scripts/esm-support/testESM.mjs
 
   lint:
@@ -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:

.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,

.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,17 @@
   "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"],
+    "packages/@react-spectrum/s2/s2wf-icons/*.svg": ["parcel-transformer-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-icon", "parcel-namer-intl", "..."]
 }

.storybook-s2/.parcelrc

@@ -0,0 +1,18 @@
+{
+  "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", "..."],
+    "packages/@react-spectrum/s2/s2wf-icons/*.svg": ["parcel-transformer-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/docs/Icons.jsx

@@ -0,0 +1,35 @@
+import icons from '@react-spectrum/s2/s2wf-icons/*.svg';
+import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
+import {ActionButton, Text} from '@react-spectrum/s2';
+import {P, Code, Pre} from './typography';
+import {highlight} from './highlight' with {type: 'macro'};
+
+export function Icons() {
+  return (
+    <div className={style({maxWidth: 'lg', marginX: 'auto', fontFamily: 'sans'})}>
+      <div className={style({marginX: 48})}>
+        <h1 className={style({fontSize: 'heading-2xl', color: 'heading', marginBottom: 48})}>
+          Workflow icons
+        </h1>
+        <P>Spectrum 2 offers a subset of the icons currently available in React Spectrum v3. These icons can be imported from <Code>@react-spectrum/s2/icons</Code>.</P>
+        <Pre>{highlight("import Add from '@react-spectrum/s2/icons/Add';")}</Pre>
+        <P>See below for a full list of available icons. Click to copy import statement.</P>
+        <div className={style({display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 48})}>
+          {Object.keys(icons).map(icon => {
+            let Icon = icons[icon].default;
+            let name = icon.replace(/^S2_Icon_(.*?)_2.*/, '$1');
+            let importName = name.replace(/^(\d)/, '_$1');
+            return (
+              <ActionButton
+                key={icon}
+                onPress={() => navigator.clipboard.writeText(`import ${importName} from '@react-spectrum/s2/icons/${name}';`)}>
+                <Icon />
+                <Text>{name}</Text>
+              </ActionButton>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}