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

…1.0-rc.2

Release: 7.1.0

.github/PULL_REQUEST_TEMPLATE.md

@@ -30,7 +30,7 @@ Closes #
 - [ ] When this PR is ready for testing, make sure to add `ci:normal`, `ci:merged` or `ci:daily` GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in `code/lib/cli/src/sandbox-templates.ts`
 - [ ] Make sure this PR contains **one** of the labels below.
 
-`["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`
+`["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]`
 
 <!--
 

CHANGELOG.md

@@ -1,3 +1,28 @@
+## 7.1.0 (July 18, 2023)
+
+Storybook 7.1 is here! 🎉
+
+- 🏄‍♀️ [**In-app onboarding**](https://storybook.js.org/blog/in-app-tour-for-new-users/) to help you set up new projects
+- 💅 [**Zero-config styling support**](https://storybook.js.org/blog/zero-config-support-for-tailwind-mui-styled-components-and-emotion/) for major libraries
+- 🗃️ [**API reference documentation**](https://storybook.js.org/blog/docs-updates/) and TypeScript-first snippets
+- 📇 [**Table of Contents for docs**](https://storybook.js.org/docs/7.1/react/writing-docs/autodocs#generate-a-table-of-contents)
+- 🎨 [**Figma** **Design addon**](https://github.com/storybookjs/addon-designs) official support
+- 📗 **Vue3 source snippets** and reactivity improvements
+- 💯 **Hundreds more** fixes and improvements
+
+7.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `7.1.0-alpha.*`, `7.1.0-beta.*`, and `7.1.0-rc.*` for the full list of changes.
+
+For a better upgrade experience, please use one of the following commands:
+
+npm or yarn 1:
+`npx storybook@latest upgrade`
+
+pnpm:
+`pnpm dlx storybook@latest upgrade`
+
+yarn berry:
+`yarn dlx storybook@latest upgrade`
+
 ## 7.0.27
 
 - Angular: Enable prod mode when Storybook is built - [#23404](https://github.com/storybookjs/storybook/pull/23404), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

code/frameworks/svelte-vite/src/utils.ts

@@ -1,7 +1,6 @@
 import type { PluginOption } from 'vite';
 import type { Options } from '@storybook/types';
 import dedent from 'ts-dedent';
-import { logger } from '@storybook/node-logger';
 import { hasVitePlugins } from '@storybook/builder-vite';
 
 /**
@@ -25,17 +24,14 @@ export async function handleSvelteKit(plugins: PluginOption[], options: Options)
   ]);
 
   if (hasSvelteKitPlugins && framework !== '@storybook/sveltekit') {
-    logger.error(
-      dedent`
+    throw new Error(dedent`
       We've detected a SvelteKit project using the @storybook/svelte-vite framework, which is not supported in Storybook 7.0
       Please use the @storybook/sveltekit framework instead.
       You can migrate automatically by running
       
       npx storybook@latest automigrate
 
       See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework
-      `
-    );
-    throw new Error();
+    `);
   }
 }

code/package.json

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

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

@@ -24,12 +24,12 @@ import type { ReactRenderer } from './types';
  *```jsx
  * // setup.js (for jest)
  * import { setProjectAnnotations } from '@storybook/react';
- * import * as projectAnnotations from './.storybook/preview';
+ * import projectAnnotations from './.storybook/preview';
  *
  * setProjectAnnotations(projectAnnotations);
  *```
  *
- * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
  */
 export function setProjectAnnotations(
   projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]

docs/snippets/angular/my-component-disable-toc.ts.mdx

@@ -0,0 +1,21 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { MyComponent } from './MyComponent.component';
+
+const meta: Meta<MyComponent> = {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+
+export default meta;
+```

docs/snippets/common/my-component-disable-toc.js.mdx

@@ -0,0 +1,17 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+```

docs/snippets/common/my-component-disable-toc.ts-4-9.mdx

@@ -0,0 +1,22 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+```

docs/snippets/common/my-component-disable-toc.ts.mdx

@@ -0,0 +1,22 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+
+export default meta;
+```

docs/snippets/common/storybook-preview-custom-toc.js.mdx

@@ -0,0 +1,20 @@
+```js
+// .storybook/preview.js
+
+export default {
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+};
+```

docs/snippets/common/storybook-preview-custom-toc.ts.mdx

@@ -0,0 +1,25 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      toc: {
+        contentsSelector: '.sbdocs-content',
+        headingSelector: 'h1, h2, h3',
+        ignoreSelector: '#primary',
+        title: 'Table of Contents',
+        disable: false,
+        unsafeTocbotOptions: {
+          orderedList: false,
+        },
+      },
+    },
+  },
+};
+
+export default preview;
+```

docs/snippets/common/storybook-preview-enable-toc.js.mdx

@@ -0,0 +1,11 @@
+```js
+// .storybook/preview.js
+
+export default {
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+};
+```

docs/snippets/common/storybook-preview-enable-toc.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
+  },
+};
+
+export default preview;
+```

docs/snippets/web-components/button-story-auto-docs.js.mdx

@@ -4,7 +4,7 @@
 export default {
   component: 'custom-button',
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },

docs/snippets/web-components/button-story-auto-docs.ts.mdx

@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const Meta: Meta = {
   component: 'custom-button',
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },

docs/snippets/web-components/my-component-disable-toc.js.mdx

@@ -0,0 +1,15 @@
+```js
+// MyComponent.stories.js
+
+export default {
+  component: 'my-component',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+```

docs/snippets/web-components/my-component-disable-toc.ts.mdx

@@ -0,0 +1,18 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'my-component',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+export default meta;
+```

docs/versions/latest.json

@@ -1,6 +1 @@
-{
-  "version": "6.3.0",
-  "info": {
-    "plain": "**[Optimized for UI development](https://github.com/storybookjs/storybook/issues/14397)**\n\nSB6.3 adds new UI development and testing features, while evolving with the JS ecosystem:\n\n- 📐 Layout debugging with Measure and Outline addons\n- 🔌 Reuse your stories in unit tests: Jest, Cypress & more\n- 🚀 Frameworks: Angular 12 Ivy, Lit2 web components\n- 🛠 Builders: Webpack5 stable, Vite community\n- 📦 Packaging: Modern ESM\n\nIt also contains hundreds more fixes, features, and tweaks. Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) matching `6.3.0-alpha.*`, `6.3.0-beta.*`, and `6.3.0-rc.*` for the full list of changes. See [Storybook 6 migration guide](https://storybook.js.org/blog/storybook-6-migration-guide/) to upgrade from `5.x` or [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) for detailed migration instructions."
-  }
-}
+{"version":"7.1.0","info":{"plain":"- Svelte-vite: Improve error when sveltekit plugins found in non-sveltekit projects - [#23472](https://github.com/storybookjs/storybook/pull/23472), thanks [@yannbf](https://github.com/yannbf)!\n- Svelte-vite: Remove unused import - [#23475](https://github.com/storybookjs/storybook/pull/23475), thanks [@yannbf](https://github.com/yannbf)!"}}