Merge branch 'next' into text_slot

storybookjs · Aug 21, 2023 · af6442b · af6442b
2 parents 97f4d01 + d7291c7
commit af6442b
Show file tree

Hide file tree

Showing 41 changed files with 417 additions and 781 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 7.3.2
+
+- Maintenance: Revert "WebpackBuilder: Remove need for `react` as peerDependency" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!
+
 ## 7.3.1
 
 - Index: Fix `*.story.*` CSF indexing - [#23852](https://github.com/storybookjs/storybook/pull/23852), thanks [@shilman](https://github.com/shilman)!

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -56,15 +56,23 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.0",
+    "@babel/core": "^7.22.9",
+    "@storybook/addons": "workspace:*",
     "@storybook/channels": "workspace:*",
+    "@storybook/client-api": "workspace:*",
     "@storybook/client-logger": "workspace:*",
+    "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
+    "@storybook/router": "workspace:*",
+    "@storybook/store": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "@swc/core": "^1.3.49",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
@@ -102,6 +110,10 @@
     "slash": "^5.0.0",
     "typescript": "~4.9.3"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -36,29 +36,19 @@ const storybookPaths: Record<string, string> = {
     `@storybook/components`
   )}/dist/experimental`,
   ...[
-    // these packages are not pre-bundled because of react dependencies.
-    // these are not dependencies of the builder anymore, thus resolving them can fail.
-    // we should remove the aliases in 8.0, I'm not sure why they are here in the first place.
+    // these packages are not pre-bundled because of react dependencies
     'components',
     'global',
     'manager-api',
     'router',
     'theming',
-  ].reduce((acc, sbPackage) => {
-    let packagePath;
-    try {
-      packagePath = getAbsolutePath(`@storybook/${sbPackage}`);
-    } catch (e) {
-      // ignore
-    }
-    if (packagePath) {
-      return {
-        ...acc,
-        [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
-      };
-    }
-    return acc;
-  }, {}),
+  ].reduce(
+    (acc, sbPackage) => ({
+      ...acc,
+      [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
+    }),
+    {}
+  ),
   // deprecated, remove in 8.0
   [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`),
 };

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -453,7 +453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.0, @babel/core@npm:^7.22.1, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
   version: 7.22.9
   resolution: "@babel/core@npm:7.22.9"
   dependencies:
@@ -6466,15 +6466,23 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack5@workspace:builders/builder-webpack5"
   dependencies:
-    "@babel/core": ^7.22.0
+    "@babel/core": ^7.22.9
+    "@storybook/addons": "workspace:*"
     "@storybook/channels": "workspace:*"
+    "@storybook/client-api": "workspace:*"
     "@storybook/client-logger": "workspace:*"
+    "@storybook/components": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/core-webpack": "workspace:*"
+    "@storybook/global": ^5.0.0
+    "@storybook/manager-api": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview": "workspace:*"
     "@storybook/preview-api": "workspace:*"
+    "@storybook/router": "workspace:*"
+    "@storybook/store": "workspace:*"
+    "@storybook/theming": "workspace:*"
     "@swc/core": ^1.3.49
     "@types/node": ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
@@ -6509,6 +6517,9 @@ __metadata:
     webpack-dev-middleware: ^6.1.1
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true

diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
@@ -123,26 +123,26 @@ If you haven't used the CLI to setup the configuration, or if you want to define
 
 ## Fully custom args
 
-Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component.
+Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component. For example, here's how you could use a `footer` arg to populate a child component:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/table-story-fully-customize-controls.js.mdx',
-    'react/table-story-fully-customize-controls.ts.mdx',
-    'vue/table-story-fully-customize-controls.2.js.mdx',
-    'vue/table-story-fully-customize-controls.2.ts.mdx',
-    'vue/table-story-fully-customize-controls.3.js.mdx',
-    'vue/table-story-fully-customize-controls.3.ts.mdx',
-    'angular/table-story-fully-customize-controls.ts.mdx',
-    'web-components/table-story-fully-customize-controls.js.mdx',
-    'web-components/table-story-fully-customize-controls.ts.mdx',
-    'solid/table-story-fully-customize-controls.js.mdx',
-    'solid/table-story-fully-customize-controls.ts.mdx',
+    'react/page-story-slots.js.mdx',
+    'react/page-story-slots.ts.mdx',
+    'vue/page-story-slots.2.js.mdx',
+    'vue/page-story-slots.2.ts.mdx',
+    'vue/page-story-slots.3.js.mdx',
+    'vue/page-story-slots.3.ts.mdx',
+    'angular/page-story-slots.ts.mdx',
+    'web-components/page-story-slots.js.mdx',
+    'web-components/page-story-slots.ts.mdx',
+    'solid/page-story-slots.js.mdx',
+    'solid/page-story-slots.ts.mdx',
   ]}
   usesCsf3
-  csf2Path="essentials/controls#snippet-table-story-fully-customize-controls"
+  csf2Path="writing-stories/args#snippet-page-story-slots"
 />
 
 <!-- prettier-ignore-end -->

diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -5,26 +5,23 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Page } from './page.component';
 
-const meta: Meta<Page> = {
-  component: Page,
-};
-
-export default meta;
-type Story = StoryObj<Page>;
+type PagePropsAndCustomArgs = Page & { footer?: string };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/angular/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter: Story = {
-  render: (args) => ({
+const meta: Meta<PagePropsAndCustomArgs> = {
+  component: Page,
+  render: ({ footer, ...args }) => ({
     props: args,
     template: `
       <storybook-page>
-        <ng-container footer>${args.footer}</ng-container>
+        <ng-container footer>${footer}</ng-container>
       </storybook-page>`,
   }),
+};
+export default meta;
+
+type Story = StoryObj<PagePropsAndCustomArgs>;
+
+export const CustomFooter: Story = {
   args: {
     footer: 'Built with Storybook',
   },

diff --git a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
diff --git a/docs/snippets/angular/typed-csf-file.ts.mdx b/docs/snippets/angular/typed-csf-file.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const Basic: Story = {};
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};
+```
diff --git a/docs/snippets/common/typed-csf-file.ts-4-9.mdx b/docs/snippets/common/typed-csf-file.ts-4-9.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {} satisfies Story;
+
+export const Primary = {
+  args: {
+    primary: true,
+  },
+} satisfies Story;
+```
diff --git a/docs/snippets/common/typed-csf-file.ts.mdx b/docs/snippets/common/typed-csf-file.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {};
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};
+```
diff --git a/docs/snippets/react/page-story-slots.js.mdx b/docs/snippets/react/page-story-slots.js.mdx
@@ -5,19 +5,14 @@ import { Page } from './Page';
 
 export default {
   component: Page,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter = {
-  render: (args) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
-      <footer>{args.footer}</footer>
+      <footer>{footer}</footer>
     </Page>
   ),
+};
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },

diff --git a/docs/snippets/react/page-story-slots.ts-4-9.mdx b/docs/snippets/react/page-story-slots.ts-4-9.mdx
@@ -5,26 +5,23 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
 
+type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & { footer?: string };
+
 const meta = {
   component: Page,
-} satisfies Meta<typeof Page>;
-
-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/react/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter: Story = {
-  render: (args) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
-      <footer>{args.footer}</footer>
+      <footer>{footer}</footer>
     </Page>
   ),
+} satisfies Meta<PagePropsAndCustomArgs>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },
-};
+} satisfies Story;
 ```