Merge pull request #23836 from storybookjs/version-prerelease-from-7.…

…3.0-alpha.0

Release: Minor 7.3.0

.circleci/config.yml

@@ -489,11 +489,11 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 11
+          parallelism: 12
           requires:
             - build
       - build-sandboxes:
-          parallelism: 11
+          parallelism: 12
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -513,7 +513,7 @@ workflows:
           requires:
             - build-sandboxes
       - bench:
-          parallelism: 2
+          parallelism: 3
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
@@ -545,11 +545,11 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 20
+          parallelism: 21
           requires:
             - build
       - build-sandboxes:
-          parallelism: 20
+          parallelism: 21
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -569,7 +569,7 @@ workflows:
           requires:
             - build-sandboxes
       - bench:
-          parallelism: 2
+          parallelism: 3
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
@@ -599,14 +599,14 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 34
+          parallelism: 35
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 34
+          parallelism: 35
           requires:
             - create-sandboxes
       - chromatic-sandboxes:

.github/workflows/publish.yml

@@ -176,30 +176,9 @@ jobs:
           git commit -m "Update $VERSION_FILE for v${{ steps.version.outputs.current-version }}"
           git push origin main
 
-      # TODO: this is currently disabled, because we may have a better strategy that we want to try out manually first before comitting to it:
-      #     - create a branch "release-<VERSION>" from HEAD of main
-      #     - git push --force origin ${{ steps.target.outputs.target }}:main
-      #     - ... this will keep the "main" history in the new release branch, and then overwrite main's history with next's
-
-      # Sync next-release to main if it is not a prerelease, and this release is from next-release
-      # This happens when eg. next has been tracking 7.1.0-alpha.X, and now we want to release 7.1.0
-      # This will keep next-release, next and main all tracking v7.1.0
-      # See "Alternative merge strategies" in https://stackoverflow.com/a/36321787
-      # - name: Sync next-release to main
-      #   if: steps.publish-needed.outputs.published == 'false' && steps.target.outputs.target == 'next' && !steps.is-prerelease.outputs.prerelease
-      #   working-directory: .
-      #   run: |
-      #     git fetch origin next-release
-      #     git checkout next-release
-      #     git pull
-      #     git fetch origin main
-      #     git checkout main
-      #     git pull
-      #     git merge --no-commit -s ours next-release
-      #     git rm -rf .
-      #     git checkout next-release -- .
-      #     git commit -m "Sync next-release to main"
-      #     git push origin main
+      - name: Overwrite main with next
+        if: steps.target.outputs.target == 'next' && steps.is-prerelease.outputs.prerelease == 'false'
+        run: git push --force origin next:main
 
       - name: Report job failure to Discord
         if: failure()

CHANGELOG.md

@@ -1,3 +1,22 @@
+## 7.3.0
+
+- ✨ Indexer: Introduce new experimental `indexer` API - #23691, thanks [@JReinhold](https://github.com/jreinhold)!
+- ✨ CLI: Update postinstall to look for addon script - [#23791](https://github.com/storybookjs/storybook/pull/23791), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- ✨ Server: Add support for tags - #23660, thanks [@JReinhold](https://github.com/jreinhold)!
+- 🐛 CSF-Tools: Remove prettier from printConfig - [#23766](https://github.com/storybookjs/storybook/pull/23766), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- 🐛 Build: Support Chrome 100, Safari 15 and Firefox 91 - [#23800](https://github.com/storybookjs/storybook/pull/23800), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- 🐛 Vue3: Don't automatically assign values to all slots - [#23697](https://github.com/storybookjs/storybook/pull/23697), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- 🐛 Core: Fix `composeStories` typings - [#23577](https://github.com/storybookjs/storybook/pull/23577), thanks [@yannbf](https://github.com/yannbf)!
+- 🐛 WebpackBuilder: Remove need for `react` as peerDependency - [#23496](https://github.com/storybookjs/storybook/pull/23496), thanks [@ndelangen](https://github.com/ndelangen)!
+- 🔧 Addon-docs, Core, Server: Use new `indexer` API - #23660, thanks [@JReinhold](https://github.com/jreinhold)!
+- 🔧 Core-server: Improve internal types - #23632, thanks [@JReinhold](https://github.com/jreinhold)!
+- 🔧 UI: Improve Link component - [#23767](https://github.com/storybookjs/storybook/pull/23767), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- 🔧 UI: Improve new `Button` component - [#23765](https://github.com/storybookjs/storybook/pull/23765), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- 🔧 UI: Update Button types to allow for no children on iconOnly buttons - [#23735](https://github.com/storybookjs/storybook/pull/23735), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- 🔧 UI: Upgrade Icon component - [#23680](https://github.com/storybookjs/storybook/pull/23680), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- 🔧 Addons: Deprecate key in addon render function as it is not available anymore - [#23792](https://github.com/storybookjs/storybook/pull/23792), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- 🔧 UI: Update IconButton and add new Toolbar component - [#23795](https://github.com/storybookjs/storybook/pull/23795), thanks [@cdedreuille](https://github.com/cdedreuille)!
+
 ## 7.2.3
 
 - Build: Support Chrome 100, Safari 15 and Firefox 91 - [#23800](https://github.com/storybookjs/storybook/pull/23800), thanks [@kasperpeulen](https://github.com/kasperpeulen)!

MIGRATION.md

@@ -1669,7 +1669,7 @@ If you're using `storiesOf` and want to restore the previous behavior, you can a
 ```js
 module.exports = {
   webpackFinal: (config) => {
-    config.modules.rules.push({
+    config.module.rules.push({
       test: /\.stories\.[tj]sx?$/,
       use: [
         {

code/frameworks/sveltekit/README.md

@@ -26,10 +26,10 @@ However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/mo
 | **Module**                                                                         | **Status**             | **Note**                                                                                                                            |
 | ---------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | ✅ Supported           | `version` is always empty in Storybook.                                                                                             |
-| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Planned for 7.1     | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999)                                          |
-| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⏳ Planned for 7.1     | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999)                                          |
+| [`$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 for 7.1, 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.                                |

code/lib/cli/src/sandbox-templates.ts

@@ -62,6 +62,7 @@ export type Template = {
   modifications?: {
     skipTemplateStories?: boolean;
     mainConfig?: Partial<StorybookConfig>;
+    disableDocs?: boolean;
   };
   /**
    * Flag to indicate that this template is a secondary template, which is used mainly to test rather specific features.
@@ -526,6 +527,16 @@ const benchTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
   },
+  'bench/react-vite-default-ts-nodocs': {
+    ...baseTemplates['react-vite/default-ts'],
+    name: 'Bench (react-vite/default-ts, no docs)',
+    isInternal: true,
+    modifications: {
+      skipTemplateStories: true,
+      disableDocs: true,
+    },
+    skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
+  },
 } satisfies Record<`bench/${string}`, Template & { isInternal: true }>;
 
 export const allTemplates: Record<TemplateKey, Template> = {
@@ -546,6 +557,7 @@ export const normal: TemplateKey[] = [
   'nextjs/default-ts',
   'bench/react-vite-default-ts',
   'bench/react-webpack-18-ts',
+  'bench/react-vite-default-ts-nodocs',
 ];
 export const merged: TemplateKey[] = [
   ...normal,

code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts

@@ -10,7 +10,7 @@ import type {
   Store_CSFExports,
   StoryContext,
   Parameters,
-  PreparedStoryFn,
+  ComposedStoryFn,
 } from '@storybook/types';
 
 import { HooksContext } from '../../../addons';
@@ -36,7 +36,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
   projectAnnotations: ProjectAnnotations<TRenderer> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS as ProjectAnnotations<TRenderer>,
   defaultConfig: ProjectAnnotations<TRenderer> = {},
   exportsName?: string
-): PreparedStoryFn<TRenderer, Partial<TArgs>> {
+): ComposedStoryFn<TRenderer, Partial<TArgs>> {
   if (storyAnnotations === undefined) {
     throw new Error('Expected a story but received undefined.');
   }
@@ -73,22 +73,25 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
 
   const defaultGlobals = getValuesFromArgTypes(projectAnnotations.globalTypes);
 
-  const composedStory = (extraArgs: Partial<TArgs>) => {
-    const context: Partial<StoryContext> = {
-      ...story,
-      hooks: new HooksContext(),
-      globals: defaultGlobals,
-      args: { ...story.initialArgs, ...extraArgs },
-    };
-
-    return story.unboundStoryFn(prepareContext(context as StoryContext));
-  };
-
-  composedStory.storyName = storyName;
-  composedStory.args = story.initialArgs as Partial<TArgs>;
-  composedStory.play = story.playFunction as ComposedStoryPlayFn<TRenderer, Partial<TArgs>>;
-  composedStory.parameters = story.parameters as Parameters;
-  composedStory.id = story.id;
+  const composedStory: ComposedStoryFn<TRenderer, Partial<TArgs>> = Object.assign(
+    (extraArgs?: Partial<TArgs>) => {
+      const context: Partial<StoryContext> = {
+        ...story,
+        hooks: new HooksContext(),
+        globals: defaultGlobals,
+        args: { ...story.initialArgs, ...extraArgs },
+      };
+
+      return story.unboundStoryFn(prepareContext(context as StoryContext));
+    },
+    {
+      storyName,
+      args: story.initialArgs as Partial<TArgs>,
+      play: story.playFunction as ComposedStoryPlayFn<TRenderer, Partial<TArgs>>,
+      parameters: story.parameters as Parameters,
+      id: story.id,
+    }
+  );
 
   return composedStory;
 }

code/lib/types/src/modules/composedStory.ts

@@ -8,8 +8,8 @@ import type {
   ComponentAnnotations,
   Parameters,
   StoryAnnotations,
+  StoryAnnotationsOrFn,
   StoryContext,
-  StoryFn,
 } from './csf';
 
 import type { ProjectAnnotations } from './story';
@@ -22,6 +22,15 @@ export type Store_CSFExports<TRenderer extends Renderer = Renderer, TArgs extend
   __namedExportsOrder?: string[];
 };
 
+/**
+ * Type for the play function returned by a composed story, which will contain everything needed in the context,
+ * except the canvasElement, which should be passed by the user.
+ * It's useful for scenarios where the user wants to execute the play function in test environments, e.g.
+ *
+ * const { PrimaryButton } = composeStories(stories)
+ * const { container } = render(<PrimaryButton />) // or PrimaryButton()
+ * PrimaryButton.play({ canvasElement: container })
+ */
 export type ComposedStoryPlayContext<TRenderer extends Renderer = Renderer, TArgs = Args> = Partial<
   StoryContext<TRenderer, TArgs> & Pick<StoryContext<TRenderer, TArgs>, 'canvasElement'>
 >;
@@ -30,40 +39,52 @@ export type ComposedStoryPlayFn<TRenderer extends Renderer = Renderer, TArgs = A
   context: ComposedStoryPlayContext<TRenderer, TArgs>
 ) => Promise<void> | void;
 
-export type PreparedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = AnnotatedStoryFn<
-  TRenderer,
-  TArgs
-> & { play: ComposedStoryPlayFn<TRenderer, TArgs>; args: TArgs; id: StoryId };
-
-export type ComposedStory<TRenderer extends Renderer = Renderer, TArgs = Args> =
-  | StoryFn<TRenderer, TArgs>
-  | StoryAnnotations<TRenderer, TArgs>;
+/**
+ * A story function with partial args, used internally by composeStory
+ */
+export type PartialArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (
+  args?: TArgs
+) => (TRenderer & {
+  T: TArgs;
+})['storyResult'];
 
 /**
- * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type)
- * 1. pick the keys K of T that have properties that are Story<AnyProps>
- * 2. infer the actual prop type for each Story
- * 3. reconstruct Story with Partial. Story<Props> -> Story<Partial<Props>>
+ * A story that got recomposed for portable stories, containing all the necessary data to be rendered in external environments
+ */
+export type ComposedStoryFn<
+  TRenderer extends Renderer = Renderer,
+  TArgs = Args
+> = PartialArgsStoryFn<TRenderer, TArgs> & {
+  play: ComposedStoryPlayFn<TRenderer, TArgs>;
+  args: TArgs;
+  id: StoryId;
+  storyName: string;
+  parameters: Parameters;
+};
+/**
+ * Based on a module of stories, it returns all stories within it, filtering non-stories
+ * Each story will have partial props, as their props should be handled when composing stories
  */
 export type StoriesWithPartialProps<TRenderer extends Renderer, TModule> = {
-  // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports:
-  // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends ComposedStory<any> ? K : never]
-  [K in keyof TModule]: TModule[K] extends ComposedStory<infer _, infer TProps>
-    ? PreparedStoryFn<TRenderer, Partial<TProps>>
+  // T represents the whole ES module of a stories file. K of T means named exports (basically the Story type)
+  // 1. pick the keys K of T that have properties that are Story<AnyProps>
+  // 2. infer the actual prop type for each Story
+  // 3. reconstruct Story with Partial. Story<Props> -> Story<Partial<Props>>
+  [K in keyof TModule as TModule[K] extends StoryAnnotationsOrFn<infer _, infer _TProps>
+    ? K
+    : never]: TModule[K] extends StoryAnnotationsOrFn<infer _, infer TProps>
+    ? ComposedStoryFn<TRenderer, Partial<TProps>>
     : unknown;
 };
 
+/**
+ * Type used for integrators of portable stories, as reference when creating their own composeStory function
+ */
 export interface ComposeStoryFn<TRenderer extends Renderer = Renderer, TArgs extends Args = Args> {
   (
     storyAnnotations: AnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>,
     componentAnnotations: ComponentAnnotations<TRenderer, TArgs>,
     projectAnnotations: ProjectAnnotations<TRenderer>,
     exportsName?: string
-  ): {
-    (extraArgs: Partial<TArgs>): TRenderer['storyResult'];
-    storyName: string;
-    args: Args;
-    play: ComposedStoryPlayFn<TRenderer, TArgs>;
-    parameters: Parameters;
-  };
+  ): ComposedStoryFn;
 }

code/package.json

@@ -326,5 +326,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.3.0"
 }

code/renderers/react/src/testing-api.ts

@@ -6,7 +6,7 @@ import {
 import type {
   Args,
   ProjectAnnotations,
-  ComposedStory,
+  StoryAnnotationsOrFn,
   Store_CSFExports,
   StoriesWithPartialProps,
 } from '@storybook/types';
@@ -81,13 +81,13 @@ const defaultProjectAnnotations: ProjectAnnotations<ReactRenderer> = {
  * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
  */
 export function composeStory<TArgs extends Args = Args>(
-  story: ComposedStory<ReactRenderer, TArgs>,
+  story: StoryAnnotationsOrFn<ReactRenderer, TArgs>,
   componentAnnotations: Meta<TArgs | any>,
   projectAnnotations?: ProjectAnnotations<ReactRenderer>,
   exportsName?: string
 ) {
   return originalComposeStory<ReactRenderer, TArgs>(
-    story as ComposedStory<ReactRenderer, Args>,
+    story as StoryAnnotationsOrFn<ReactRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
     defaultProjectAnnotations,

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"7.2.1","info":{"plain":"- Addon docs: Add safe check in Webpack preset - [#23687](https://github.com/storybookjs/storybook/pull/23687), thanks [@yannbf](https://github.com/yannbf)!\n- Autodocs: Fix docs pages ignoring `meta.id` when calculating their ID - [#23520](https://github.com/storybookjs/storybook/pull/23520), thanks [@sookmax](https://github.com/sookmax)!\n- CLI: Fix error logging being swallowed from dev/build failures - [#23689](https://github.com/storybookjs/storybook/pull/23689), thanks [@yannbf](https://github.com/yannbf)!\n- Channels: Remove self-referencing in `package.json` - [#23681](https://github.com/storybookjs/storybook/pull/23681), thanks [@stof](https://github.com/stof)!\n- UI: Fix ArgsTable empty state on docs - [#23688](https://github.com/storybookjs/storybook/pull/23688), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Improve controls addon - [#23635](https://github.com/storybookjs/storybook/pull/23635), thanks [@cdedreuille](https://github.com/cdedreuille)!"}}
+{"version":"7.3.0","info":{"plain":"- Core: Improve `composeStories` typings - [#23577](https://github.com/storybookjs/storybook/pull/23577), thanks [@yannbf](https://github.com/yannbf)!"}}