Controls: Add UI to create new story files

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 8.0.9
+
+- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
+- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
+- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
+- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+- Nextjs: Support next 14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
+- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
+- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
+
 ## 8.0.8
 
 - Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!

MIGRATION.md

@@ -1,5 +1,8 @@
 <h1>Migration</h1>
 
+- [From version 8.0 to 8.1.0](#from-version-80-to-810)
+  - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
+      - [Title block](#title-block)
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Portable stories](#portable-stories)
     - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
@@ -90,17 +93,17 @@
     - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
     - [Removed `config` preset](#removed-config-preset-1)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
-  - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
-  - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
-  - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
-  - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
-  - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
+    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
+    - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
+    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
+    - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
+    - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
-  - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
-  - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
+    - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+    - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
-  - [Addon API is more type-strict](#addon-api-is-more-type-strict)
-  - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
+    - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+    - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [7.0 breaking changes](#70-breaking-changes)
     - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@@ -126,7 +129,7 @@
     - [Deploying build artifacts](#deploying-build-artifacts)
       - [Dropped support for file URLs](#dropped-support-for-file-urls)
       - [Serving with nginx](#serving-with-nginx)
-      - [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
+      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -140,7 +143,7 @@
     - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
   - [7.0 Vite changes](#70-vite-changes)
     - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
   - [7.0 Webpack changes](#70-webpack-changes)
     - [Webpack4 support discontinued](#webpack4-support-discontinued)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -190,7 +193,7 @@
     - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
-    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
     - [`Story` type deprecated](#story-type-deprecated)
@@ -403,6 +406,20 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 8.0 to 8.1.0
+
+### Subtitle block and `parameters.componentSubtitle`
+
+The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
+
+`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
+
+##### Title block
+
+The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
+
+It still accepts being passed `children`.
+
 ## From version 7.x to 8.0.0
 
 ### Portable stories

code/addons/controls/src/manager.tsx

@@ -47,22 +47,20 @@ addons.register(ADDON_ID, (api) => {
     if (data.type !== 'story') throw new Error('Not a story');
 
     try {
-      const response = await experimental_requestResponse<SaveStoryResponsePayload>(
-        channel,
-        SAVE_STORY_REQUEST,
-        SAVE_STORY_RESPONSE,
-        {
-          // Only send updated args
-          args: stringifyArgs(
-            Object.entries(data.args || {}).reduce<Args>((acc, [key, value]) => {
-              if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value;
-              return acc;
-            }, {})
-          ),
-          csfId: data.id,
-          importPath: data.importPath,
-        } satisfies SaveStoryRequestPayload
-      );
+      const response = await experimental_requestResponse<
+        SaveStoryRequestPayload,
+        SaveStoryResponsePayload
+      >(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, {
+        // Only send updated args
+        args: stringifyArgs(
+          Object.entries(data.args || {}).reduce<Args>((acc, [key, value]) => {
+            if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value;
+            return acc;
+          }, {})
+        ),
+        csfId: data.id,
+        importPath: data.importPath,
+      });
 
       api.addNotification({
         id: 'save-story-success',
@@ -96,17 +94,15 @@ addons.register(ADDON_ID, (api) => {
     const data = api.getCurrentStoryData();
     if (data.type !== 'story') throw new Error('Not a story');
 
-    const response = await experimental_requestResponse<SaveStoryResponsePayload>(
-      channel,
-      SAVE_STORY_REQUEST,
-      SAVE_STORY_RESPONSE,
-      {
-        args: data.args && stringifyArgs(data.args),
-        csfId: data.id,
-        importPath: data.importPath,
-        name,
-      } satisfies SaveStoryRequestPayload
-    );
+    const response = await experimental_requestResponse<
+      SaveStoryRequestPayload,
+      SaveStoryResponsePayload
+    >(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, {
+      args: data.args && stringifyArgs(data.args),
+      csfId: data.id,
+      importPath: data.importPath,
+      name,
+    });
 
     api.addNotification({
       id: 'save-story-success',

code/addons/docs/package.json

@@ -98,7 +98,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.12.3",
+    "@babel/core": "^7.24.4",
     "@mdx-js/react": "^3.0.0",
     "@storybook/blocks": "workspace:*",
     "@storybook/client-logger": "workspace:*",

code/addons/links/template/stories/decorator.stories.ts

@@ -9,29 +9,44 @@ export default {
   decorators: [withLinks],
 };
 
-export const Basic = {
+export const Target = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="other">go to other</a>
+      This is just a story to target with the links
       </div>
     `,
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
-export const Other = {
+
+export const KindAndStory = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="third">go to third</a>
+        <a class="link" href="#" data-sb-kind="addons-links-decorator" data-sb-story="story-only">go to story only</a>
       </div>
     `,
   },
 };
-export const Third = {
+
+export const StoryOnly = {
+  args: {
+    content: `
+      <div>
+        <a class="link" href="#" data-sb-story="target">go to target</a>
+      </div>
+    `,
+  },
+};
+
+export const KindOnly = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+        <a class="link" href="#" data-sb-kind="addons-links-decorator">go to target</a>
       </div>
     `,
   },

code/addons/links/template/stories/hrefto.stories.ts

@@ -0,0 +1,22 @@
+import { hrefTo } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Html,
+  title: 'hrefTo',
+  parameters: {
+    chromatic: { disable: true },
+  },
+  args: {
+    content: '<div><code id="content">Waiting for hrefTo to resolve...</code></div>',
+  },
+};
+
+export const Default = {
+  play: async () => {
+    const href = await hrefTo('addons-links-hrefto', 'target');
+    const content = document.querySelector('#content');
+    if (content) {
+      content.textContent = href;
+    }
+  },
+};

code/addons/links/template/stories/linkto.stories.ts

@@ -3,6 +3,7 @@ import { linkTo } from '@storybook/addon-links';
 
 export default {
   component: globalThis.Components.Button,
+  title: 'linkTo',
   args: {
     label: 'Click Me!',
   },
@@ -11,34 +12,69 @@ export default {
   },
 };
 
-export const ID = {
+export const Target = {
   args: {
-    onClick: linkTo('addons-links-parameters--basic'),
+    label: 'This is just a story to target with the links',
+  },
+  parameters: {
+    chromatic: { disable: true },
   },
 };
-export const Title = {
+
+export const Id = {
   args: {
-    onClick: linkTo('addons-links-parameters'),
+    onClick: linkTo('addons-links-linkto--target'),
+    label: 'addons-links-linkto--target',
   },
 };
-export const Basic = {
+
+export const TitleOnly = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'basic'),
+    onClick: linkTo('addons/links/linkTo'),
+    label: 'addons/links/linkTo',
   },
 };
-export const Other = {
+
+export const NormalizedTitleOnly = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'basic'),
+    onClick: linkTo('addons-links-linkto'),
+    label: 'addons-links-linkto',
   },
 };
-export const Third = {
+
+export const TitleAndName = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'other'),
+    onClick: linkTo('addons/links/linkTo', 'Target'),
+    label: 'addons/links/linkTo, Target',
+  },
+};
+
+export const NormalizedTitleAndName = {
+  args: {
+    onClick: linkTo('addons-links-linkto', 'target'),
+    label: 'addons-links-linkto, target',
   },
 };
 
 export const Callback = {
   args: {
-    onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'),
+    onClick: linkTo(
+      (event: Event) => 'addons-links-linkto',
+      (event: Event) => 'target'
+    ),
+  },
+};
+
+export const ToMDXDocs = {
+  args: {
+    onClick: linkTo('Configure Your Project'),
+    label: 'Configure Your Project',
+  },
+};
+
+export const ToAutodocs = {
+  args: {
+    onClick: linkTo('Example Button', 'Docs'),
+    label: 'Example Button, Docs',
   },
 };