Release: Prerelease 10.1.0-alpha.12

.github/workflows/danger-js.yml

@@ -22,12 +22,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: ".nvmrc"
       - name: Danger JS
-        uses: danger/danger-js@11.2.6
+        uses: docker://ghcr.io/danger/danger-js:13.0.5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          args: --dangerfile scripts/dangerfile.ts
+          args: --dangerfile scripts/dangerfile.js

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 10.0.8
+
+- React Native Web: Fix react native resuables and nativewind - [#33056](https://github.com/storybookjs/storybook/pull/33056), thanks @dannyhw!
+- React Native Web: Update vite-plugin-rnw for overall improvements - [#32991](https://github.com/storybookjs/storybook/pull/32991), thanks @dannyhw!
+- WebComponents: Fix `custom-elements.json` not being loaded - [#33045](https://github.com/storybookjs/storybook/pull/33045), thanks @ndelangen!
+
 ## 10.0.7
 
 - ESLint: Only apply csf-strict rules on stories files - [#31963](https://github.com/storybookjs/storybook/pull/31963), thanks @cylewaitforit!

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 10.1.0-alpha.12
+
+- Build: Update dependencies in yarn.lock and clean up comments - [#33089](https://github.com/storybookjs/storybook/pull/33089), thanks @ndelangen!
+- CLI: In csf-factories codemod only remove types which are unused - [#33020](https://github.com/storybookjs/storybook/pull/33020), thanks @yannbf!
+- React: Improve import rewriting when tsconfig paths are used - [#33072](https://github.com/storybookjs/storybook/pull/33072), thanks @kasperpeulen!
+
 ## 10.1.0-alpha.11
 
 - Maintenance: Enable syntax minification for dead code elimination - [#33001](https://github.com/storybookjs/storybook/pull/33001), thanks @mrginglymus!

README.md

@@ -171,7 +171,7 @@ Contributions to Storybook are always welcome!
 Looking for a first issue to tackle?
 
 - We tag issues with [![Good First Issue](https://img.shields.io/github/issues/storybookjs/storybook/good%20first%20issue.svg)](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) when we think they are well suited for people who are new to the codebase or OSS in general.
-- [Talk to us](https://discord.gg/storybook), we'll find something that suits your skills and learning interest.
+- [Talk to us](https://discord.gg/storybook), we'll find something that suits your skills and learning interests.
 
 ### Development scripts
 

code/addons/docs/src/blocks/blocks/Stories.stories.tsx

@@ -7,6 +7,9 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
     docsStyles: true,
+    chromatic: {
+      delay: 2000,
+    },
   },
 } satisfies Meta<typeof Stories>;
 

code/addons/docs/template/stories/docspage/error.stories.ts

@@ -1,3 +1,4 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
 export default {
   component: globalThis.__TEMPLATE_COMPONENTS__.Button,
   tags: ['autodocs', '!test', '!vitest'],
@@ -9,7 +10,16 @@ export default {
 export const ErrorStory = {
   decorators: [
     () => {
-      throw new Error('Story did something wrong');
+      const err = new Error('Story did something wrong');
+      err.stack = `
+        at errorStory (/sb-preview/file.js:000:0001)
+        at hookified (/sb-preview/file.js:000:0001)
+        at defaultDecorateStory (/sb-preview/file.js:000:0001)
+        at jsxDecorator (/assets/file.js:000:0001)
+        at hookified (/sb-preview/file.js:000:0001)
+        at decorateStory (/sb-preview/file.js:000:0001)
+      `;
+      throw err;
     },
   ],
 };

code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts

@@ -53,7 +53,7 @@ describe('remove-mdx-stories', () => {
     await expect(() => removeMDXEntries(Object.keys(list), { configDir })).rejects
       .toThrowErrorMatchingInlineSnapshot(`
     [SB_CORE-COMMON_0004 (InvalidStoriesEntryError): Storybook could not index your stories.
-Your main configuration somehow does not contain a 'stories' field, or it resolved to an empty array.
+Your main configuration does not contain a 'stories' field, or it resolved to an empty array.
 
 Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array.
 

code/core/src/manager/components/sidebar/Refs.stories.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
 import React from 'react';
 
-import type { StoryAnnotations } from 'storybook/internal/csf';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ManagerContext } from 'storybook/manager-api';
 import { fn, userEvent, within } from 'storybook/test';
+import { dedent } from 'ts-dedent';
 
 import { standardData as standardHeaderData } from './Heading.stories';
 import { IconSymbols } from './IconSymbols';
@@ -22,22 +24,24 @@ const managerContext = {
   },
 } as any;
 
-export default {
+const meta = {
   component: Ref,
   title: 'Sidebar/Refs',
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
   globals: { sb_theme: 'side-by-side' },
   decorators: [
-    (storyFn: any) => (
+    (storyFn) => (
       <ManagerContext.Provider value={managerContext}>
         <IconSymbols />
         {storyFn()}
       </ManagerContext.Provider>
     ),
-    (storyFn: any) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
+    (storyFn) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
-};
+} satisfies Meta<typeof Ref>;
+
+export default meta;
 
 const { menu } = standardHeaderData;
 const filteredIndex = mockDataset.withRoot;
@@ -49,7 +53,16 @@ export const loadingData = { menu, filteredIndex: {} };
 // @ts-expect-error (non strict)
 const indexError: Error = (() => {
   try {
-    throw new Error('There was a severe problem');
+    const err = new Error('There was a severe problem');
+    err.stack = dedent`
+      at errorStory (/sb-preview/file.js:000:0001)
+      at hookified (/sb-preview/file.js:000:0001)
+      at defaultDecorateStory (/sb-preview/file.js:000:0001)
+      at jsxDecorator (/assets/file.js:000:0001)
+      at hookified (/sb-preview/file.js:000:0001)
+      at decorateStory (/sb-preview/file.js:000:0001)
+    `;
+    throw err;
   } catch (e) {
     return e;
   }
@@ -282,15 +295,15 @@ export const ErroredMobile = () => (
   />
 );
 ErroredMobile.globals = { sb_theme: 'stacked', viewport: { value: 'mobile1' } };
-export const ErroredWithErrorOpen: StoryAnnotations = {
+export const ErroredWithErrorOpen: StoryObj = {
   render: () => Errored(),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const button = await canvas.findByText('View error');
     await userEvent.click(button);
   },
 };
-export const ErroredMobileWithErrorOpen: StoryAnnotations = {
+export const ErroredMobileWithErrorOpen: StoryObj = {
   render: () => ErroredMobile(),
   globals: { sb_theme: 'stacked', viewport: { value: 'mobile1' } },
   play: async ({ canvasElement }) => {
@@ -299,15 +312,15 @@ export const ErroredMobileWithErrorOpen: StoryAnnotations = {
     await userEvent.click(button);
   },
 };
-export const ErroredWithIndicatorOpen: StoryAnnotations = {
+export const ErroredWithIndicatorOpen: StoryObj = {
   render: () => Errored(),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const button = await canvas.findByRole('button', { name: 'Extra actions' });
     await userEvent.click(button);
   },
 };
-export const ErroredMobileWithIndicatorOpen: StoryAnnotations = {
+export const ErroredMobileWithIndicatorOpen: StoryObj = {
   render: () => ErroredMobile(),
   globals: { sb_theme: 'stacked', viewport: { value: 'mobile1' } },
   play: async ({ canvasElement }) => {

code/core/src/server-errors.ts

@@ -143,7 +143,7 @@ export class InvalidStoriesEntryError extends StorybookError {
         'https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories',
       message: dedent`
         Storybook could not index your stories.
-        Your main configuration somehow does not contain a 'stories' field, or it resolved to an empty array.
+        Your main configuration does not contain a 'stories' field, or it resolved to an empty array.
 
         Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array.`,
     });

code/frameworks/vue3-vite/template/cli/ts/Button.stories.ts

@@ -23,11 +23,7 @@ const meta = {
 
 export default meta;
 type Story = StoryObj<typeof meta>;
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
+
 export const Primary: Story = {
   args: {
     primary: true,

code/lib/cli-storybook/src/codemod/helpers/remove-unused-types.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest';
+
+import { loadCsf, printCsf } from 'storybook/internal/csf-tools';
+
+import { dedent } from 'ts-dedent';
+
+import { getDiff } from '../../../../../core/src/core-server/utils/save-story/getDiff';
+import { removeUnusedTypes } from './remove-unused-types';
+
+expect.addSnapshotSerializer({
+  serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
+  test: () => true,
+});
+
+const unescape = (str: string) => str.replace(/\r\n/g, '\n');
+
+describe('removeUnusedTypes', () => {
+  const getTransformed = (source: string) => {
+    const csf = loadCsf(source, { makeTitle: () => 'FIXME' }).parse();
+    removeUnusedTypes(csf._ast.program, csf._ast);
+    return printCsf(csf).code;
+  };
+
+  it('should remove unused Storybook types', async () => {
+    const source = dedent`
+      import { Button } from './Button';
+      import { StoryFn, StoryObj } from '@storybook/react';
+      import type { Meta, MetaObj } from '@storybook/react';
+      import { type ComponentStory, type ComponentMeta } from '@storybook/react';
+
+      // unused types that should be removed
+      type UnusedAlias = Meta<typeof Button>;
+      type UnusedAlias2 = StoryObj<typeof Button>;
+      type UnusedAlias3 = ComponentStory<typeof Button>;
+      type UnusedAlias4 = ComponentMeta<typeof Button>;
+      type UnusedDeepType = {
+        foo: {
+          bar: {
+            story: StoryObj<typeof Button>;
+          }
+        }
+      };
+      interface UnusedInterface extends Meta {}
+      interface UnusedDeepInterface {
+        baz: {
+          qux: {
+            meta: Meta<typeof Button>;
+          }
+        }
+      };
+
+      export default { component: Button };
+    `;
+
+    const transformed = getTransformed(source);
+    expect(getDiff(unescape(source), unescape(transformed))).toMatchInlineSnapshot(`
+      import { Button } from './Button';
+
+      - import { StoryFn, StoryObj } from '@storybook/react';
+      - import type { Meta, MetaObj } from '@storybook/react';
+      - import { type ComponentStory, type ComponentMeta } from '@storybook/react';
+      - 
+
+
+      - // unused types that should be removed
+      - type UnusedAlias = Meta<typeof Button>;
+      - type UnusedAlias2 = StoryObj<typeof Button>;
+      - type UnusedAlias3 = ComponentStory<typeof Button>;
+      - type UnusedAlias4 = ComponentMeta<typeof Button>;
+      - type UnusedDeepType = {
+      -   foo: {
+      -     bar: {
+      -       story: StoryObj<typeof Button>;
+      -     }
+      -   }
+      - };
+      - interface UnusedInterface extends Meta {}
+      - interface UnusedDeepInterface {
+      -   baz: {
+      -     qux: {
+      -       meta: Meta<typeof Button>;
+      -     }
+      -   }
+      - };
+      - 
+      - 
+        export default { component: Button };
+    `);
+  });
+
+  it('should not remove used Storybook types', async () => {
+    const source = dedent`
+      // Nothing in this file should be removed or modified
+      import { StoryFn, StoryObj, ComponentStory, Meta, MetaObj, ComponentMeta } from '@storybook/react';
+      import { Button } from './Button';
+
+      type Alias = StoryFn<typeof Button>;
+      type Alias2 = Alias & { b: string };
+      type Story = StoryObj & { a: string };
+      type DeepType = {
+        foo: {
+          bar: {
+            story: ComponentStory<typeof Button>;
+          }
+        }
+      };
+      interface Interface extends Meta {}
+      interface DeepInterface {
+        baz: {
+          qux: {
+            meta: MetaObj<typeof Button>;
+          }
+        }
+      };
+      const X: ComponentMeta = {}
+
+      function foo(a: Story, c: DeepType, d: Interface, e: DeepInterface){}
+
+      export default {};
+    `;
+
+    const transformed = getTransformed(source);
+
+    expect(unescape(transformed)).toEqual(unescape(source));
+  });
+});