[feature/floating-ui] Merge remote-tracking branch 'origin/main' into feature/floating-ui

Author: Juan Andrade

.changeset/curvy-penguins-grin.md

@@ -90,32 +90,23 @@ jobs:
     - name: Publish to Chromatic for visual testing (review PRs only)
       id: chromatic_publish
       if: ${{ inputs.target == 'review' }}
-      uses: chromaui/action@v11
+      uses: chromaui/action@latest
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
         projectToken: ${{ secrets.projectToken }}
         storybookBuildDir: storybook-static
         autoAcceptChanges: "main"
+        # Exit with status 0 (OK) once the built version has been published to
+        # Chromatic.
+        exitOnceUploaded: true
         # Generate snapshots for only changed stories
         # See: https://www.chromatic.com/docs/turbosnap
         onlyChanged: true
 
-    # TODO(WB-1936): Re-enable this check once the issue with Chromatic
-    # is resolved.
-    # Install Playwright browsers so Vitest browser mode can run story tests
-    # - name: Install playwright dependencies
-    #   if: ${{ inputs.target == 'review' }}
-    #   run: pnpm exec playwright install chromium --with-deps
-    # - name: Run Storybook tests
-    #   if: ${{ inputs.target == 'review' }}
-    #   run: pnpm test:storybook
-    #   env:
-    #     SB_URL: '${{ steps.chromatic_publish.outputs.storybookUrl }}'
-
     # (if) Run this step on dependabot or changesets PRs.
     - name: Skip Chromatic builds (dependabot or changesets PRs)
       if: ${{ inputs.target == 'bot' }}
-      uses: chromaui/action@v11
+      uses: chromaui/action@latest
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
         projectToken: ${{ secrets.projectToken }}
@@ -128,7 +119,7 @@ jobs:
     # (if) Run this step on the main branch.
     - name: Auto-accept Chromatic build on main branch.
       if: ${{ inputs.target == 'main' }}
-      uses: chromaui/action@v11
+      uses: chromaui/action@latest
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
         projectToken: ${{ secrets.projectToken }}

.changeset/green-kings-hug.md

@@ -27,7 +27,7 @@ jobs:
     if: |
       github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' &&
       !startsWith(github.head_ref, 'changeset-release/')
-    name: Chromatic - Build and test on regular PRs
+    name: Build on regular PRs
     uses: ./.github/workflows/chromatic-build.yml
     with:
       target: 'review'
@@ -39,7 +39,7 @@ jobs:
     if: |
       github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' &&
       !startsWith(github.head_ref, 'changeset-release/')
-    name: Chromatic - Get results on regular PRs
+    name: Get results on regular PRs
     needs: chromatic_review
     runs-on: ${{ matrix.os }}
     strategy:
@@ -76,3 +76,44 @@ jobs:
             | Total stories | ${{ needs.chromatic_review.outputs.specCount }} |
             | Inherited (not captured) snapshots [TurboSnap] | ${{ needs.chromatic_review.outputs.inheritedCaptureCount }} |
             | Tests on the build | ${{ needs.chromatic_review.outputs.testCount }} |
+
+  storybook_tests:
+    # (if) Run this step on regular PRs.
+    if: |
+      github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' &&
+      !startsWith(github.head_ref, 'changeset-release/')
+    name: Run Storybook tests
+    needs: chromatic_review
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [20.x]
+    steps:
+      - name: Checking out latest commit
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # Cache and install dependencies
+      - name: Install & cache node_modules
+        uses: ./.github/actions/shared-node-cache
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # Install Playwright browsers so Vitest browser mode can run story tests
+      - name: Install playwright dependencies
+        run: pnpm exec playwright install chromium --with-deps
+
+      # Build the project
+      - name: Generate WB build artifacts
+        run: pnpm build
+
+      - name: Run Storybook tests
+        run: pnpm test:storybook
+        env:
+          SB_URL: '${{ needs.chromatic_review.outputs.storybookUrl }}'

.changeset/three-jobs-knock.md

@@ -156,13 +156,10 @@ jobs:
   # PR code in a host applicaiton without doing a release.
   publish_snapshot:
     name: Publish npm snapshot
-    # [FEI-7341] DISABLED: Snapshots temporarily disabled due to security concerns (shai-halud worm)
-    # To re-enable, replace the condition below with the original multi-line condition
-    if: false
-    # Original condition (commented out):
-    # if: |
-    #   (github.event_name == 'workflow_dispatch' && inputs.run_type == 'snapshot') ||
-    #   (github.event_name == 'pull_request' && !startsWith(github.head_ref, 'changeset-release/'))
+    # We don't publish snapshots on Changeset "Version Packages" PRs
+    if: |
+      (github.event_name == 'workflow_dispatch' && inputs.run_type == 'snapshot') ||
+      (github.event_name == 'pull_request' && !startsWith(github.head_ref, 'changeset-release/'))
     runs-on: ${{ matrix.os }}
     permissions:
       id-token: write # required for publishing to npm with provenance

.changeset/tidy-lamps-beg.md

@@ -1,36 +1,32 @@
-import { createRequire } from "node:module";
-import { dirname, join } from "node:path";
 import remarkGfm from "remark-gfm";
 import type {StorybookConfig} from "@storybook/react-vite";
 
-const require = createRequire(import.meta.url);
-
 const config: StorybookConfig = {
     stories: [
         "../__docs__/**/*.@(mdx|stories.@(ts|tsx))",
         "../__docs__/**/*.mdx",
     ],
     addons: [
-        getAbsolutePath("@storybook/addon-a11y"),
-        getAbsolutePath("storybook-addon-pseudo-states"),
-        getAbsolutePath("@storybook/addon-vitest"),
+        "@storybook/addon-a11y",
+        "storybook-addon-pseudo-states",
+        "@storybook/addon-vitest",
         {
-            name: getAbsolutePath("@storybook/addon-docs"),
+            name: "@storybook/addon-docs",
             options: {
                 mdxPluginOptions: {
                     mdxCompileOptions: {
                         remarkPlugins: [remarkGfm],
                     },
                 },
             },
-        }
+        },
     ],
     staticDirs: ["../static"],
     core: {
-        builder: getAbsolutePath("@storybook/builder-vite"),
+        builder: "@storybook/builder-vite",
         disableTelemetry: true,
     },
-    framework: getAbsolutePath("@storybook/react-vite"),
+    framework: "@storybook/react-vite",
     async viteFinal(config) {
         // Merge custom configuration into the default config
         const {mergeConfig} = await import("vite");
@@ -45,7 +41,3 @@ const config: StorybookConfig = {
 };
 
 export default config;
-
-function getAbsolutePath(value: string): any {
-    return dirname(require.resolve(join(value, "package.json")));
-}

.github/workflows/chromatic-build.yml

@@ -2,7 +2,6 @@ import * as React from "react";
 import wonderBlocksTheme from "./wonder-blocks-theme";
 import {Decorator} from "@storybook/react-vite";
 import {DocsContainer} from "@storybook/addon-docs/blocks";
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {initAnnouncer} from "@khanacademy/wonder-blocks-announcer";
 import Link from "@khanacademy/wonder-blocks-link";
@@ -11,7 +10,7 @@ import {
     ThemeSwitcher,
     THEME_DATA_ATTRIBUTE,
 } from "@khanacademy/wonder-blocks-theming";
-import {Preview} from "@storybook/react-vite";
+import type {Preview} from "@storybook/react-vite";
 
 // Import the Wonder Blocks CSS variables
 import "@khanacademy/wonder-blocks-tokens/styles.css";
@@ -75,8 +74,26 @@ function DocsContainerWithTheme({children, context, ...props}) {
 }
 
 const parameters: Preview["parameters"] = {
-    // Enable the RenderStateRoot decorator by default.
-    enableRenderStateRootDecorator: true,
+    // Accessibility testing configuration
+    a11y: {
+        /*
+         * Configure test behavior. Error means that any a11y violations will fail the tests in CI.
+         * See: https://storybook.js.org/docs/next/writing-tests/accessibility-testing#test-behavior
+         */
+        test: "error",
+        /*
+         * Axe's configuration
+         * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+         * to learn more about the available properties.
+         */
+        config: {},
+        /*
+         * Axe's options parameter
+         * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+         * to learn more about the available options.
+         */
+        options: {},
+    },
     backgrounds: {
         default: "baseDefault",
         options: {
@@ -109,6 +126,7 @@ const parameters: Preview["parameters"] = {
         },
     },
     docs: {
+        codePanel: true,
         // Customize the DocsContainer to use the WB theme in MDX pages.
         container: DocsContainerWithTheme,
         toc: {
@@ -129,10 +147,7 @@ const parameters: Preview["parameters"] = {
     },
 };
 
-const withThemeSwitcher: Decorator = (
-    Story,
-    {globals: {theme}, parameters: {enableRenderStateRootDecorator}},
-) => {
+const withThemeSwitcher: Decorator = (Story, {globals: {theme}}) => {
     // Keep track of the theme locally so we can re-render the story after the
     // attribute is updated.
     const [localTheme, setLocalTheme] = React.useState(null);
@@ -144,18 +159,6 @@ const withThemeSwitcher: Decorator = (
         }
     }, [theme]);
 
-    if (enableRenderStateRootDecorator) {
-        return (
-            <RenderStateRoot key={localTheme}>
-                <ThemeSwitcherContext.Provider value={theme}>
-                    <ThemeSwitcher theme={theme}>
-                        <Story />
-                    </ThemeSwitcher>
-                </ThemeSwitcherContext.Provider>
-            </RenderStateRoot>
-        );
-    }
-
     return (
         <ThemeSwitcherContext.Provider value={theme} key={localTheme}>
             <ThemeSwitcher theme={theme}>

.github/workflows/chromatic-pr.yml

@@ -1,9 +1,14 @@
-import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './preview';
+import {beforeAll} from "vitest";
+import {setProjectAnnotations} from "@storybook/react-vite";
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+
+import * as previewAnnotations from "./preview";
 
 // This is an important step to apply the right configuration when testing your stories.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const project = setProjectAnnotations([projectAnnotations]);
+const annotations = setProjectAnnotations([
+    a11yAddonAnnotations,
+    previewAnnotations,
+]);
 
-beforeAll(project.beforeAll);
+beforeAll(annotations.beforeAll);