Merge branch 'main' into datepicker-autocomplete

Author: yihuiliao

.circleci/comment.js

@@ -60,7 +60,7 @@ 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?path=/story/accordion--default)
       [S2 Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)`
         });
       }
@@ -79,9 +79,10 @@ async function run() {
         issue_number: pr,
         body: `Build successful! 🎉
 
-  * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
+  * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
   * [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)`
+  * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)
+  * [View the S2 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/s2-docs/index.html)`
       });
     } catch (err) {
       console.error(err)

.circleci/config.yml

@@ -470,6 +470,21 @@ jobs:
           paths:
             - '*/docs/'
 
+  s2-docs:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build s2 docs
+          command: make s2-docs
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/s2-docs/'
+
   verdaccio:
     executor: rsp-xlarge
     steps:
@@ -874,6 +889,9 @@ workflows:
       - docs:
           requires:
             - install
+      - s2-docs:
+          requires:
+            - install
       - verdaccio:
           filters:
             branches:
@@ -928,6 +946,7 @@ workflows:
             - storybook
             - storybook-s2
             - docs
+            - s2-docs
       - deploy-verdaccio:
           requires:
             - v-docs

.gitignore

@@ -17,3 +17,5 @@ test-reports.xml
 storage
 packages/dev/storybook-builder-parcel/iframe.html
 packages/dev/storybook-builder-parcel/preview.js
+starters/docs/registry
+starters/tailwind/registry

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

@@ -1,23 +1,17 @@
 import React, {useEffect, useState} from 'react';
 import {addons} from '@storybook/preview-api';
 import {makeDecorator} from '@storybook/preview-api';
-import {getQueryParams} from '@storybook/preview-api';
 // Importing from src so that HMR works.
-// Without this, all HMR updates will bubble through the index.ts and up 
+// Without this, all HMR updates will bubble through the index.ts and up
 // to the root instead of stopping at the story files.
 import {Provider} from '../../../packages/@react-spectrum/s2/src/Provider';
 
 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 params = new URLSearchParams(document.location.search);
+  let localeParam = params.get('providerSwitcher-locale') || undefined;
+  let [localeValue, setLocale] = useState(localeParam);
 
   useEffect(() => {
     let channel = addons.getChannel();

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

@@ -1,18 +1,11 @@
 
 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;
-}, {});
-
 function ProviderFieldSetter({api}) {
-  let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined});
+  let localeParam = api.getQueryParam('providerSwitcher-locale') || undefined;
+  let [values, setValues] = useState({locale: localeParam});
   let channel = addons.getChannel();
   let onLocaleChange = (e) => {
     let newValue = e.target.value || undefined;

.storybook-s2/docs/Icons.jsx

@@ -1,4 +1,4 @@
-import icons from '@react-spectrum/s2/s2wf-icons/*.svg';
+import icons from '../../packages/@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 {H2, H3, P, Code, Pre, Link} from './typography';

.storybook-s2/docs/StyleMacro.jsx

@@ -205,7 +205,7 @@ function MyComponent({variant}) {
   display: 'flex',
   alignItems: 'center',
   columnGap: 8
-};
+} as const;
 
 const styles = style({
   ...horizontalStack,
@@ -218,7 +218,7 @@ export function horizontalStack(gap: number) {
     display: 'flex',
     alignItems: 'center',
     columnGap: gap
-  };
+  } as const;
 }`)}</Pre>
         <P>Then, import your macro and use it in a component.</P>
         <Pre>{highlight(`// component.tsx

.storybook-s2/main.ts

@@ -31,6 +31,9 @@ const config: StorybookConfig = {
   framework: {
     name: "storybook-react-parcel",
     options: {},
+  },
+  core: {
+    disableWhatsNewNotifications: true
   }
   // typescript: {
   //   reactDocgen: 'react-docgen-typescript',

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

@@ -1,8 +1,6 @@
-
-import {addons, types} from '@storybook/manager-api';
+import {addons, types, useParameter} 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`;
@@ -19,10 +17,10 @@ addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Description',
-    render: ({ active }) => (
+    render: ({active}) => (
       <AddonPanel active={active}>
         <MyPanel />
       </AddonPanel>
-    ),
+    )
   });
 });

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

@@ -1,24 +1,21 @@
 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 params = new URLSearchParams(document.location.search);
+  let localeParam = params.get("providerSwitcher-locale") || undefined;
+  let [localeValue, setLocale] = useState(localeParam);
+  let themeParam = params.get("providerSwitcher-theme") || undefined;
+  let [themeValue, setTheme] = useState(themeParam);
+  let scaleParam = params.get("providerSwitcher-scale") || undefined;
+  let [scaleValue, setScale] = useState(scaleParam);
+  let expressParam = params.get("providerSwitcher-express") || undefined;
+  let [expressValue, setExpress] = useState(expressParam === '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.