Merge branch 'next' into fix-docs-blank-canvases

storybookjs · Mar 8, 2023 · 1e0cb5e · 1e0cb5e
2 parents 951473b + a7d76d4
commit 1e0cb5e
Show file tree

Hide file tree

Showing 18 changed files with 72 additions and 52 deletions.
diff --git a/code/addons/docs/src/DocsRenderer.tsx b/code/addons/docs/src/DocsRenderer.tsx
@@ -51,8 +51,9 @@ export class DocsRenderer<TRenderer extends Renderer> {
       return new Promise((resolve, reject) => {
         import('@mdx-js/react')
           .then(({ MDXProvider }) =>
+            // We use a `key={}` here to reset the `hasError` state each time we render ErrorBoundary
             renderElement(
-              <ErrorBoundary showException={reject}>
+              <ErrorBoundary showException={reject} key={Math.random()}>
                 <MDXProvider components={components}>
                   <Docs context={context} docsParameter={docsParameter} />
                 </MDXProvider>

diff --git a/code/lib/cli/src/automigrate/fixes/add-react.ts b/code/lib/cli/src/automigrate/fixes/add-react.ts
@@ -49,11 +49,11 @@ export const addReact: Fix<AddReactOptions> = {
     return dedent`
       We've detected that you're using ${dependentsFormatted}.
       
-      Starting in Storybook 7 we now require the following peer dependencies:
+      Starting in Storybook 7, we now require these peer dependencies to render docs:
 
       ${additionalDependenciesFormatted}
 
-      We can add these for you automatically.
+      We can add these for you automatically as dev dependencies.
       
       More info: ${chalk.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required'

diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-true.ts b/code/lib/cli/src/automigrate/fixes/autodocs-true.ts
@@ -64,7 +64,7 @@ export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
       ${autodocsFormatted}
       ${value === 'tag' ? tagWarning : ''}
       More info: ${chalk.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs'
+        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
       )}
     `;
     }
@@ -77,7 +77,7 @@ export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
       ${autodocsFormatted}
 
       More info: ${chalk.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs'
+        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
       )}
     `;
   },

diff --git a/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts b/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
@@ -138,6 +138,30 @@ test('convert correct story nodes', () => {
   `);
 });
 
+test('convert addon-docs imports', () => {
+  const input = dedent`
+      import { Meta } from '@storybook/addon-docs';
+      import { Story } from '@storybook/addon-docs/blocks';
+
+      <Meta title="Foobar" />
+      
+      <Story name="Primary">Story</Story>
+    `;
+
+  const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
+
+  expect(mdx).toMatchInlineSnapshot(`
+    import { Meta } from '@storybook/blocks';
+    import { Story } from '@storybook/blocks';
+    import * as FoobarStories from './Foobar.stories';
+
+    <Meta of={FoobarStories} />
+
+    <Story of={FoobarStories.Primary} />
+
+  `);
+});
+
 test('convert story nodes with spaces', () => {
   const input = dedent`
       import { Meta, Story } from '@storybook/addon-docs';

diff --git a/code/lib/codemod/src/transforms/mdx-to-csf.ts b/code/lib/codemod/src/transforms/mdx-to-csf.ts
@@ -75,8 +75,8 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
   // rewrite addon docs import
   visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
     node.value = node.value
-      .replaceAll('@storybook/addon-docs', '@storybook/blocks')
-      .replaceAll('@storybook/addon-docs/blocks', '@storybook/blocks');
+      .replaceAll('@storybook/addon-docs/blocks', '@storybook/blocks')
+      .replaceAll('@storybook/addon-docs', '@storybook/blocks');
   });
 
   const file = getEsmAst(root);

diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -11,7 +11,7 @@ import { normalizeStoriesEntry } from '@storybook/core-common';
 import type { NormalizedStoriesSpecifier, StoryIndexer, StoryIndexEntry } from '@storybook/types';
 import { loadCsf, getStorySortParameter } from '@storybook/csf-tools';
 import { toId } from '@storybook/csf';
-import { logger } from '@storybook/node-logger';
+import { logger, once } from '@storybook/node-logger';
 
 import { StoryIndexGenerator } from './StoryIndexGenerator';
 
@@ -61,6 +61,7 @@ describe('StoryIndexGenerator', () => {
     const actual = jest.requireActual('@storybook/csf-tools');
     loadCsfMock.mockImplementation(actual.loadCsf);
     jest.mocked(logger.warn).mockClear();
+    jest.mocked(once.warn).mockClear();
   });
   describe('extraction', () => {
     const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
@@ -925,6 +926,21 @@ describe('StoryIndexGenerator', () => {
       });
     });
 
+    describe('warnings', () => {
+      it('when entries do not match any files', async () => {
+        const generator = new StoryIndexGenerator(
+          [normalizeStoriesEntry('./src/docs2/wrong.js', options)],
+          options
+        );
+        await generator.initialize();
+        await generator.getIndex();
+
+        expect(once.warn).toHaveBeenCalledTimes(1);
+        const logMessage = jest.mocked(once.warn).mock.calls[0][0];
+        expect(logMessage).toContain(`No story files found for the specified pattern`);
+      });
+    });
+
     describe('duplicates', () => {
       it('warns when two MDX entries reference the same CSF file without a name', async () => {
         const docsErrorSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(

diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -21,7 +21,7 @@ import type {
 } from '@storybook/types';
 import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
 import { normalizeStoryPath } from '@storybook/core-common';
-import { logger } from '@storybook/node-logger';
+import { logger, once } from '@storybook/node-logger';
 import { getStorySortParameter } from '@storybook/csf-tools';
 import { toId } from '@storybook/csf';
 import { analyze } from '@storybook/docs-mdx';
@@ -122,6 +122,15 @@ export class StoryIndexGenerator {
           path.join(this.options.workingDir, specifier.directory, specifier.files)
         );
         const files = await glob(fullGlob);
+
+        if (files.length === 0) {
+          once.warn(
+            `No story files found for the specified pattern: ${chalk.blue(
+              path.join(specifier.directory, specifier.files)
+            )}`
+          );
+        }
+
         files.sort().forEach((absolutePath: Path) => {
           const ext = path.extname(absolutePath);
           if (ext === '.storyshot') {

diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@storybook/csf-tools",
   "version": "7.0.0-beta.62",
-  "description": "",
+  "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"
   ],

diff --git a/code/lib/csf-tools/src/CsfFile.test.ts b/code/lib/csf-tools/src/CsfFile.test.ts
@@ -556,7 +556,7 @@ describe('CsfFile', () => {
         `,
           true
         )
-      ).toThrow('CSF: unexpected storiesOf call');
+      ).toThrow('Unexpected `storiesOf` usage:');
     });
 
     it('function exports', () => {

diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts
@@ -414,9 +414,10 @@ export class CsfFile {
           const { callee } = node;
           if (t.isIdentifier(callee) && callee.name === 'storiesOf') {
             throw new Error(dedent`
-              CSF: unexpected storiesOf call ${formatLocation(node, self._fileName)}
+              Unexpected \`storiesOf\` usage: ${formatLocation(node, self._fileName)}.
 
-              More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-v7
+              In SB7, we use the next-generation \`storyStoreV7\` by default, which does not support \`storiesOf\`. 
+              More info, with details about how to opt-out here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev7-enabled-by-default
             `);
           }
         },

diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@storybook/manager-api",
   "version": "7.0.0-beta.62",
-  "description": "Core Storybook API & Context",
+  "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"
   ],

diff --git a/code/lib/telemetry/src/telemetry.ts b/code/lib/telemetry/src/telemetry.ts
@@ -31,6 +31,7 @@ export async function sendTelemetry(
     : {
         anonymousId: getAnonymousProjectId(),
         inCI: Boolean(process.env.CI),
+        isTTY: process.stdout.isTTY,
       };
   const eventId = nanoid();
   const body = { ...rest, eventType, eventId, sessionId, metadata, payload, context };

diff --git a/code/lib/types/package.json b/code/lib/types/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@storybook/types",
   "version": "7.0.0-beta.62",
-  "description": "Core Storybook Types",
+  "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"
   ],

diff --git a/code/ui/blocks/src/blocks/useOf.ts b/code/ui/blocks/src/blocks/useOf.ts
@@ -1,6 +1,5 @@
 import type {
   DocsContextProps,
-  ModuleExport,
   ResolvedModuleExportType,
   ResolvedModuleExportFromType,
 } from '@storybook/types';
@@ -16,7 +15,7 @@ export type Of = Parameters<DocsContextProps['resolveOf']>[0];
  * if the resolved module is a component it will include the project annotations
  */
 export const useOf = <TType extends ResolvedModuleExportType>(
-  moduleExportOrType: ModuleExport | TType,
+  moduleExportOrType: Of,
   validTypes?: TType[]
 ): ResolvedModuleExportFromType<TType> => {
   const context = useContext(DocsContext);

diff --git a/docs/get-started/introduction.md b/docs/get-started/introduction.md
diff --git a/docs/get-started/storybook-hero-video-optimized-lg.mp4 b/docs/get-started/storybook-hero-video-optimized-lg.mp4
diff --git a/docs/get-started/storybook-relationship.png b/docs/get-started/storybook-relationship.png
diff --git a/docs/toc.js b/docs/toc.js
@@ -1,19 +1,16 @@
 module.exports = {
   toc: [
-    {
-      title: '📕 Why Storybook?',
-      pathSegment: 'why-storybook',
-      type: 'link',
-    },
+
     {
       title: '🚀 Get started',
       pathSegment: 'get-started',
       type: 'menu',
       children: [
         {
-          pathSegment: 'introduction',
-          title: 'Introduction',
+          pathSegment: 'why-storybook',
+          title: 'Why Storybook?',
           type: 'bullet-link',
+          description: 'Learn why Storybook can help you build better UIs',
         },
         {
           pathSegment: 'install',