Spectrum 2 (#6777)

.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

@@ -288,7 +288,6 @@ jobs:
           name: test
           command: |
             make build
-            yarn workspaces foreach --all -pt run prepublishOnly
             node --loader ./scripts/esm-support/loader.mjs ./scripts/esm-support/testESM.mjs
 
   lint:
@@ -423,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:
@@ -609,6 +623,9 @@ workflows:
       - storybook-19:
           requires:
             - install-19
+      - storybook-s2:
+          requires:
+            - install
       - docs:
           requires:
             - install
@@ -632,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,

.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>
+  );
+}