Merge branch 'main' of https://github.com/boutahlilsoufiane/react-spectrum into constrain-date

Author: boutahlilsoufiane

.chromatic/preview-head.html

@@ -138,8 +138,7 @@
 <!--
   Load S2 adobe clean VF
 -->
-<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
-<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">
+<link rel="preload" href="https://use.typekit.net/af/b1226a/0000000000000000775c0485/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
 
 <!--
   This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,

.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

@@ -37,6 +37,14 @@ executors:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
+  rsp-2xlarge:
+    docker:
+      - image: cimg/node:22.13.1
+    resource_class: 2xlarge
+    environment:
+      CACHE_VERSION: v1
+    working_directory: ~/react-spectrum
+
 jobs:
   install:
     executor: rsp-large
@@ -325,7 +333,7 @@ jobs:
           path: ~/junit
 
   test-esm:
-    executor: rsp-xlarge
+    executor: rsp-2xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
@@ -470,6 +478,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:
@@ -493,7 +516,7 @@ jobs:
             - storage
 
   v-docs:
-    executor: rsp-xlarge
+    executor: rsp-2xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
@@ -509,6 +532,15 @@ jobs:
           environment:
             VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
 
+      - run:
+          name: build docs off verdaccio retry
+          command: |
+            ./scripts/verdaccio-ci.sh
+            ./scripts/verdaccio-build.sh
+          environment:
+            VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
+          when: on_fail
+
       - persist_to_workspace:
           root: verdaccio_dist
           paths:
@@ -874,6 +906,9 @@ workflows:
       - docs:
           requires:
             - install
+      - s2-docs:
+          requires:
+            - install
       - verdaccio:
           filters:
             branches:
@@ -928,6 +963,7 @@ workflows:
             - storybook
             - storybook-s2
             - docs
+            - s2-docs
       - deploy-verdaccio:
           requires:
             - v-docs

.github/labeler.yml

@@ -0,0 +1,3 @@
+needs translations:
+- changed-files:
+  - any-glob-to-any-file: ['**/intl/*.json']

.github/workflows/labeler.yml

@@ -0,0 +1,14 @@
+name: "Pull Request Labeler"
+on:
+- pull_request_target
+
+jobs:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/labeler@v5
+      with:
+        sync-labels: true

.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/Intro.jsx

@@ -140,41 +140,64 @@ export function Docs() {
         <P>You may also need to configure other tools such as TypeScript, Babel, ESLint, and Jest to support parsing import attributes. See <Link href="https://parceljs.org/features/macros/#usage-with-other-tools" target="_blank">these docs</Link> for details.</P>
         <P>See the <Link href="https://github.com/adobe/react-spectrum/tree/main/examples" target="_blank">examples folder</Link> in our repo for working setups with various build tools. For details on optimizing the output CSS, see the <Link href="?path=/docs/style-macro--docs#css-optimization" target="_top">style macro docs</Link>.</P>
         <H2>Setting up your app</H2>
-        <P>Unlike React Spectrum v3, a <Code>Provider</Code> is not required. Instead, import <Code>@react-spectrum/s2/page.css</Code> in the entry component of your app to apply the background color and color scheme to the <Code>{'<html>'}</Code> element. This ensures that the entire page has the proper styles even before your JavaScript runs.</P>
-        <Pre>{highlight(`import '@react-spectrum/s2/page.css';
-import {Button} from '@react-spectrum/s2';
+        <P>Wrap your app in an S2 <Code>{'<Provider>'}</Code> component to load Spectrum 2 fonts for the user's locale and apply the appropriate Spectrum background layer for your app. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.</P>
+        <Pre>{highlight(`import {Provider, Button} from '@react-spectrum/s2';
 
 function App() {
   return (
-    <Button
-      variant="accent"
-      onPress={() => alert('Hey there!')}>
-      Hello Spectrum 2!
-    </Button>
+    // Wrap app in a <Provider> to load fonts, set background, set locale, etc.
+    <Provider background="base">
+      <Button
+        variant="accent"
+        onPress={() => alert('Hey there!')}>
+        Hello Spectrum 2!
+      </Button>
+    </Provider>
   );
 }`)}</Pre>
         <Example>
           <Button variant="accent" onPress={() => alert('Hey there!')}>Hello Spectrum 2!</Button>
         </Example>
-        <P><Strong>Note</Strong>: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the <Link href="#embedded-sections" target="_self">directions below</Link> instead of using <Code>page.css</Code>.</P>
+        <H3>Optimizing full-page apps</H3>
+        <P>When building a full page S2 app that's not embedded within a larger page, import <Code>@react-spectrum/s2/page.css</Code> to apply the background color and color scheme to the <Code>{'<html>'}</Code> element instead of the <Code>{'<Provider>'}</Code>. This ensures that the page has styles even before your JavaScript loads. A <Code>{'<Provider>'}</Code> is still necessary in addition to <Code>page.css</Code> in order to include the fonts, set the locale, etc.</P>
+        <Pre>{highlight(`// Apply S2 background to the <html> element
+import '@react-spectrum/s2/page.css';
+
+function App() {
+  return (
+    <Provider>
+      {/* ... */}
+    </Provider>
+  );
+}`)}</Pre>
+        <P>By default, this uses the <Code>base</Code> background layer. This can be customized by setting the <Code>data-background</Code> attribute on the <Code>{'<html>'}</Code> element.</P>
+        <Pre>{highlight(`<html data-background="layer-1">
+  <!-- ... -->
+</html>`)}</Pre>
         <H3>Overriding the color scheme</H3>
-        <P>By default, the page follows the user’s operating system color scheme setting, supporting both light and dark mode. The page background is set to the <Code>base</Code> Spectrum background layer by default. This can be configured by setting the <Code>data-color-scheme</Code> and <Code>data-background</Code> attributes on the <Code>{'<html>'}</Code> element. For example, to force the application to only render in light mode, set <Code>data-color-scheme="light"</Code>.</P>
+        <P>By default, React Spectrum follows the operating system color scheme setting, supporting both light and dark mode. The <Code>colorScheme</Code> prop can be set on <Code>{'<Provider>'}</Code> to force the app to always render in a certain color scheme.</P>
+        <Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
+
+<Provider colorScheme="light">
+  {/* your app */}
+</Provider>`)}</Pre>
+        <P>When using <Code>page.css</Code>, set the <Code>data-color-scheme</Code> attribute on the <Code>{'<html>'}</Code> element.</P>
         <Pre>{highlight(`<html data-color-scheme="light">
   <!-- ... -->
 </html>`)}</Pre>
         <H3>Overriding the locale</H3>
-        <P>By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by rendering a <Code>{'<Provider>'}</Code> component at the root of your app, and setting the <Code>locale</Code> prop.</P>
+        <P>By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by rendering setting the <Code>locale</Code> prop on the <Code>{'<Provider>'}</Code>.</P>
         <Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
 
 <Provider locale="en-US">
   {/* your app */}
 </Provider>`)}</Pre>
-        <H3>Embedded sections</H3>
-        <P>If you’re building an embedded section of a larger page using Spectrum 2, use the <Code>{'<Provider>'}</Code> component to set the background instead of importing <Code>page.css</Code>. The <Code>background</Code> prop should be set to the Spectrum background layer appropriate for your app, and the <Code>colorScheme</Code> can be overridden as well.</P>
-        <Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
-
-<Provider background="base">
-  {/* your app */}
+        <H3>Server-side rendering</H3>
+        <P>When using SSR, the <Code>{'<Provider>'}</Code> component can be rendered as the root <Code>{'<html>'}</Code> element. The <Code>locale</Code> prop should always be specified to avoid hydration errors. <Code>page.css</Code> is not needed in this case.</P>
+        <Pre>{highlight(`<Provider elementType="html" locale="en-US">
+  <body>
+    {/* ... */}
+  </body>
 </Provider>`)}</Pre>
         <H3>Usage with older React Spectrum versions</H3>
         <P>See Adobe internal documentation.</P>