Merge branch 'new-layout' into charles-mobile-2

storybookjs · Sep 19, 2023 · b8f57dc · b8f57dc
2 parents 294b1b5 + 5743131
commit b8f57dc
Show file tree

Hide file tree

Showing 32 changed files with 183 additions and 209 deletions.
diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml
@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main

diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next

diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -18,10 +18,10 @@ import { getBackgroundColorByName } from '../helpers';
 
 const createBackgroundSelectorItem = memoize(1000)(
   (
-    id: string,
+    id: string | null,
     name: string,
     value: string,
-    hasSwatch: boolean,
+    hasSwatch: boolean | null,
     change: (arg: { selected: string; name: string }) => void,
     active: boolean
   ): BackgroundSelectorItem => ({
@@ -102,7 +102,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
   }
 
   const onBackgroundChange = useCallback(
-    (value: string) => {
+    (value: string | undefined) => {
       updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } });
     },
     [backgroundsConfig, globals, updateGlobals]

diff --git a/code/addons/backgrounds/src/helpers/index.ts b/code/addons/backgrounds/src/helpers/index.ts
@@ -15,7 +15,7 @@ export const isReduceMotionEnabled = () => {
 export const getBackgroundColorByName = (
   currentSelectedValue: string,
   backgrounds: Background[] = [],
-  defaultName: string
+  defaultName: string | null | undefined
 ): string => {
   if (currentSelectedValue === 'transparent') {
     return 'transparent';
@@ -52,7 +52,7 @@ export const clearStyles = (selector: string | string[]) => {
 const clearStyle = (selector: string) => {
   const element = document.getElementById(selector) as HTMLElement;
   if (element) {
-    element.parentElement.removeChild(element);
+    element.parentElement?.removeChild(element);
   }
 };
 
@@ -70,7 +70,7 @@ export const addGridStyle = (selector: string, css: string) => {
   }
 };
 
-export const addBackgroundStyle = (selector: string, css: string, storyId: string) => {
+export const addBackgroundStyle = (selector: string, css: string, storyId: string | null) => {
   const existingStyle = document.getElementById(selector) as HTMLElement;
   if (existingStyle) {
     if (existingStyle.innerHTML !== css) {
@@ -85,7 +85,7 @@ export const addBackgroundStyle = (selector: string, css: string, storyId: strin
     // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
     const existingGridStyle = document.getElementById(gridStyleSelector) as HTMLElement;
     if (existingGridStyle) {
-      existingGridStyle.parentElement.insertBefore(style, existingGridStyle);
+      existingGridStyle.parentElement?.insertBefore(style, existingGridStyle);
     } else {
       document.head.appendChild(style);
     }

diff --git a/code/addons/backgrounds/src/types/index.ts b/code/addons/backgrounds/src/types/index.ts
@@ -20,7 +20,7 @@ export interface Background {
 }
 
 export interface BackgroundsParameter {
-  default?: string;
+  default?: string | null;
   disable?: boolean;
   values: Background[];
 }

diff --git a/code/addons/backgrounds/tsconfig.json b/code/addons/backgrounds/tsconfig.json
@@ -2,6 +2,6 @@
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
   "compilerOptions": {
-    "strict": false
+    "strict": true
   }
 }
diff --git a/code/chromatic.config.json b/code/chromatic.config.json
@@ -0,0 +1,8 @@
+{
+  "projectId": "Project:635781f3500dd2c49e189caf",
+  "projectToken": "80b312430ec4",
+  "buildScriptName": "storybook:ui:build",
+  "onlyChanged": true,
+  "storybookConfigDir": "./ui/.storybook",
+  "storybookBaseDir": "./code"
+}
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
@@ -17,6 +17,8 @@ export const configureConfig = async ({
   const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
 
   addScopedAlias(baseConfig, 'next/config');
+  addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
+  addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
   setupRuntimeConfig(baseConfig, nextConfig);
 
   return nextConfig;

diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md
@@ -29,7 +29,7 @@ However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/mo
 | [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Future              | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999)                                          |
 | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⏳ Future              | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999)                                          |
 | [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ✅ Supported           | Requires SvelteKit 1.4.0 or newer                                                                                                   |
-| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported           | Mocks planned, so you can set different store values per story.                                                             |
+| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported           | Mocks planned, so you can set different store values per story.                                                                     |
 | [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported       | They are meant to only be available server-side, and Storybook renders all components on the client.                                |
 | [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. |
 | [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private)   | ⛔ Not supported       | They are meant to only be available server-side, and Storybook renders all components on the client.                                |

diff --git a/code/lib/cli/src/generators/configure.test.ts b/code/lib/cli/src/generators/configure.test.ts
@@ -131,7 +131,7 @@ describe('configurePreview', () => {
           controls: {
             matchers: {
               color: /(background|color)$/i,
-              date: /Date$/,
+              date: /Date$/i,
             },
           },
         },
@@ -162,7 +162,7 @@ describe('configurePreview', () => {
           controls: {
             matchers: {
               color: /(background|color)$/i,
-              date: /Date$/,
+              date: /Date$/i,
             },
           },
         },
@@ -213,7 +213,7 @@ describe('configurePreview', () => {
           controls: {
             matchers: {
               color: /(background|color)$/i,
-              date: /Date$/,
+              date: /Date$/i,
             },
           },
         },

diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts
@@ -152,7 +152,7 @@ export async function configurePreview(options: ConfigurePreviewOptions) {
         controls: {
           matchers: {
            color: /(background|color)$/i,
-           date: /Date$/,
+           date: /Date$/i,
           },
         },
       },

diff --git a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts
@@ -213,9 +213,14 @@ describe('PNPM Proxy', () => {
         .spyOn(pnpmProxy, 'writePackageJson')
         .mockImplementation(jest.fn());
 
+      const basePackageAttributes = {
+        dependencies: {},
+        devDependencies: {},
+      };
+
       jest.spyOn(pnpmProxy, 'retrievePackageJson').mockImplementation(
-        // @ts-expect-error (not strict)
-        jest.fn(() => ({
+        jest.fn(async () => ({
+          ...basePackageAttributes,
           overrides: {
             bar: 'x.x.x',
           },
@@ -228,6 +233,7 @@ describe('PNPM Proxy', () => {
       await pnpmProxy.addPackageResolutions(versions);
 
       expect(writePackageSpy).toHaveBeenCalledWith({
+        ...basePackageAttributes,
         overrides: {
           ...versions,
           bar: 'x.x.x',

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
@@ -296,7 +296,7 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
-    // TODO: Can be enabled once we re-revert this PR: https://github.com/storybookjs/storybook/pull/24033
+    // TODO: Should be removed after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
     inDevelopment: true,
   },
   'angular-cli/default-ts': {
@@ -586,7 +586,8 @@ export const merged: TemplateKey[] = [
 ];
 export const daily: TemplateKey[] = [
   ...merged,
-  'angular-cli/prerelease',
+  // TODO: Should be re-added after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
+  // 'angular-cli/prerelease',
   'cra/default-js',
   'react-vite/default-js',
   'vue3-vite/default-js',

diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
@@ -54,7 +54,7 @@
     "chalk": "^4.1.0",
     "esbuild": "^0.18.0",
     "esbuild-register": "^3.5.0",
-    "file-system-cache": "2.3.0",
+    "file-system-cache": "^2.4.4",
     "find-cache-dir": "^3.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",
@@ -69,6 +69,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@types/fs-extra": "^11.0.1",
     "@types/mock-fs": "^4.13.1",
     "@types/picomatch": "^2.3.0",
     "mock-fs": "^5.2.0",

diff --git a/code/lib/types/package.json b/code/lib/types/package.json
@@ -47,10 +47,11 @@
     "@storybook/channels": "workspace:*",
     "@types/babel__core": "^7.0.0",
     "@types/express": "^4.7.0",
-    "file-system-cache": "2.3.0"
+    "file-system-cache": "^2.4.4"
   },
   "devDependencies": {
     "@storybook/csf": "^0.1.0",
+    "@types/fs-extra": "^11.0.1",
     "@types/node": "^16.0.0",
     "typescript": "~4.9.3"
   },