Merge branch 'next' into addon-docs-without-react

storybookjs · Dec 15, 2023 · 28051ed · 28051ed
2 parents 00f031b + 70da7da
commit 28051ed
Show file tree

Hide file tree

Showing 60 changed files with 1,019 additions and 472 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -652,27 +652,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 20
+          parallelism: 19
           requires:
             - build
       - build-sandboxes:
-          parallelism: 20
+          parallelism: 19
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 17
+          parallelism: 16
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - bench:
@@ -706,30 +706,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 33
+          parallelism: 31
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 33
+          parallelism: 31
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 30
+          parallelism: 28
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 28
+          parallelism: 26
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 28
+          parallelism: 26
           requires:
             - build-sandboxes
 

diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
@@ -7,7 +7,9 @@ export function mockSveltekitStores() {
     config: () => ({
       resolve: {
         alias: {
-          $app: resolve(__dirname, '../src/mocks/app/'),
+          '$app/forms': resolve(__dirname, '../src/mocks/app/forms.ts'),
+          '$app/navigation': resolve(__dirname, '../src/mocks/app/navigation.ts'),
+          '$app/stores': resolve(__dirname, '../src/mocks/app/stores.ts'),
         },
       },
     }),

diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Environment.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Environment.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { browser, dev, building, version } from '$app/environment';
+</script>
+
+<div data-testid="browser">{browser}</div>
+<div data-testid="dev">{dev}</div>
+<div data-testid="building">{building}</div>
+<div data-testid="version">{version}</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Paths.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Paths.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { assets, base } from "$app/paths";
+</script>
+
+<div data-testid="assets">{assets}</div>
+<div data-testid="base">{base}</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/environment.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/environment.stories.js
@@ -0,0 +1,10 @@
+import { expect, fn, within } from '@storybook/test';
+import Environment from './Environment.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/environment',
+  component: Environment,
+  tags: ['autodocs'],
+};
+
+export const Default = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/paths.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/paths.stories.js
@@ -0,0 +1,10 @@
+import { expect, fn, within } from '@storybook/test';
+import Paths from './Paths.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/paths',
+  component: Paths,
+  tags: ['autodocs'],
+};
+
+export const Default = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Environment.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Environment.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { browser, dev, building, version } from '$app/environment';
+</script>
+
+<div data-testid="browser">{browser}</div>
+<div data-testid="dev">{dev}</div>
+<div data-testid="building">{building}</div>
+<div data-testid="version">{version}</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Paths.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Paths.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { assets, base } from "$app/paths";
+</script>
+
+<div data-testid="assets">{assets}</div>
+<div data-testid="base">{base}</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/environment.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/environment.stories.js
@@ -0,0 +1,10 @@
+import { expect, fn, within } from '@storybook/test';
+import Environment from './Environment.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/environment',
+  component: Environment,
+  tags: ['autodocs'],
+};
+
+export const Default = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/paths.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/paths.stories.js
@@ -0,0 +1,10 @@
+import { expect, fn, within } from '@storybook/test';
+import Paths from './Paths.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/paths',
+  component: Paths,
+  tags: ['autodocs'],
+};
+
+export const Default = {};
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
@@ -416,28 +416,6 @@ const baseTemplates = {
     // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
-  'preact-webpack5/default-js': {
-    name: 'Preact CLI Latest (Webpack | JavaScript)',
-    script:
-      'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
-    expected: {
-      framework: '@storybook/preact-webpack5',
-      renderer: '@storybook/preact',
-      builder: '@storybook/builder-webpack5',
-    },
-    skipTasks: ['e2e-tests-dev', 'bench'],
-  },
-  'preact-webpack5/default-ts': {
-    name: 'Preact CLI Latest (Webpack | TypeScript)',
-    script:
-      'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
-    expected: {
-      framework: '@storybook/preact-webpack5',
-      renderer: '@storybook/preact',
-      builder: '@storybook/builder-webpack5',
-    },
-    skipTasks: ['e2e-tests-dev', 'bench'],
-  },
   'preact-vite/default-js': {
     name: 'Preact Latest (Vite | JavaScript)',
     script: 'npm create vite --yes {{beforeDir}} -- --template preact',
@@ -618,7 +596,6 @@ export const merged: TemplateKey[] = [
   'react-webpack/18-ts',
   'react-webpack/17-ts',
   'angular-cli/15-ts',
-  'preact-webpack5/default-ts',
   'preact-vite/default-ts',
   'html-webpack/default',
   'html-vite/default-ts',
@@ -638,7 +615,6 @@ export const daily: TemplateKey[] = [
   'nextjs/default-js',
   'nextjs/prerelease',
   'qwik-vite/default-ts',
-  'preact-webpack5/default-js',
   'preact-vite/default-js',
   'html-vite/default-js',
 ];

diff --git a/code/renderers/react/src/docs/jsxDecorator.test.tsx b/code/renderers/react/src/docs/jsxDecorator.test.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 import type { FC, PropsWithChildren } from 'react';
-import React, { createElement, Profiler } from 'react';
+import React, { StrictMode, createElement, Profiler } from 'react';
 import PropTypes from 'prop-types';
 import { addons, useEffect } from '@storybook/preview-api';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
@@ -155,6 +155,40 @@ describe('renderJsx', () => {
     `);
   });
 
+  it('StrictMode', () => {
+    function StrictModeComponent(props: any) {
+      return (
+        <StrictMode>
+          <div>{props.children}</div>
+        </StrictMode>
+      );
+    }
+
+    expect(renderJsx(createElement(StrictModeComponent, {}, 'I am StrictMode'), {}))
+      .toMatchInlineSnapshot(`
+        <StrictModeComponent>
+          I am StrictMode
+        </StrictModeComponent>
+      `);
+  });
+
+  it('Suspense', () => {
+    function SuspenseComponent(props: any) {
+      return (
+        <React.Suspense fallback={null}>
+          <div>{props.children}</div>
+        </React.Suspense>
+      );
+    }
+
+    expect(renderJsx(createElement(SuspenseComponent, {}, 'I am Suspense'), {}))
+      .toMatchInlineSnapshot(`
+      <SuspenseComponent>
+        I am Suspense
+      </SuspenseComponent>
+    `);
+  });
+
   it('should not add default props to string if the prop value has not changed', () => {
     const Container = ({ className, children }: { className: string; children: string }) => {
       return <div className={className}>{children}</div>;

diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx
@@ -11,8 +11,6 @@ import { logger } from '@storybook/client-logger';
 
 import type { ReactRenderer } from '../types';
 
-import { isMemo, isForwardRef } from './lib';
-
 // Recursively remove "_owner" property from elements to avoid crash on docs page when passing components as an array prop (#17482)
 // Note: It may be better to use this function only in development environment.
 function simplifyNodeForStringify(node: ReactNode): ReactNode {
@@ -56,7 +54,7 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
   const Type = renderedJSX.type;
 
   // @ts-expect-error (Converted from ts-ignore)
-  for (let i = 0; i < options.skip; i += 1) {
+  for (let i = 0; i < options?.skip; i += 1) {
     if (typeof renderedJSX === 'undefined') {
       logger.warn('Cannot skip undefined element');
       return null;
@@ -80,21 +78,25 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
     }
   }
 
-  const displayNameDefaults =
-    typeof options.displayName === 'string'
-      ? { showFunctions: true, displayName: () => options.displayName }
-      : {
-          // To get exotic component names resolving properly
-          displayName: (el: any): string =>
-            el.type.displayName ||
-            (el.type === Symbol.for('react.profiler') ? 'Profiler' : null) ||
-            getDocgenSection(el.type, 'displayName') ||
-            (el.type.name !== '_default' ? el.type.name : null) ||
-            (typeof el.type === 'function' ? 'No Display Name' : null) ||
-            (isForwardRef(el.type) ? el.type.render.name : null) ||
-            (isMemo(el.type) ? el.type.type.name : null) ||
-            el.type,
-        };
+  let displayNameDefaults;
+
+  if (typeof options?.displayName === 'string') {
+    displayNameDefaults = { showFunctions: true, displayName: () => options.displayName };
+    /**
+     * add `renderedJSX?.type`to handle this case:
+     *
+     * https://github.com/zhyd1997/storybook/blob/20863a75ba4026d7eba6b288991a2cf091d4dfff/code/renderers/react/template/stories/errors.stories.tsx#L14
+     *
+     * or it show the error message when run `yarn build-storybook --quiet`:
+     *
+     * Cannot read properties of undefined (reading '__docgenInfo').
+     */
+  } else if (renderedJSX?.type && getDocgenSection(renderedJSX.type, 'displayName')) {
+    displayNameDefaults = {
+      // To get exotic component names resolving properly
+      displayName: (el: any): string => getDocgenSection(el.type, 'displayName'),
+    };
+  }
 
   const filterDefaults = {
     filterProps: (value: any, key: string): boolean => value !== undefined,