From d1ce421e18c5522a282834d3624a3c76f9a82ff4 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 31 Jan 2024 12:27:55 +0000 Subject: [PATCH] address feedback --- docs/configure/typescript.md | 2 +- docs/essentials/controls.md | 12 ++++++------ .../snippets/react/storybook-main-prop-filter.ts.mdx | 4 +++- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md index 61bc30d7eeb3..cbbfccd4833d 100644 --- a/docs/configure/typescript.md +++ b/docs/configure/typescript.md @@ -134,7 +134,7 @@ If you're using Vue single file components and TypeScript, you can add both [Vol ### Storybook doesn't create the required types for external packages -If you're working with a project relying on a third-party library and you're running into an issue where you notice that the required types are not being generated, preventing you from accurately documenting your components, you can adjust the `reactDocgen` configuration option in your Storybook configuration file to use `react-docgen-typescript` instead and include the required options. For example: +If your project relies on a third-party library and the expected types are not being generated, preventing you from accurately documenting your components, you can adjust the `reactDocgen` configuration option in your Storybook configuration file to use `react-docgen-typescript` instead and include the required options. For example: diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 962009c6f96d..60c950c34d29 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -73,7 +73,7 @@ Finally, update your `.storybook/preview.ts` file to include the following confi -When you set the `component` annotation to the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.md) for your component. +When you set the `component` annotation of the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.md) for your component. @@ -89,9 +89,9 @@ When you set the `component` annotation to the default export of your story file -By default, Storybook will try to infer the required argTypes and associated controls for your stories based on the metadata provided by the [`@storybook/ember-cli-storybook`](https://github.com/storybookjs/ember-cli-storybook) addon. You'll need to take some additional steps to set it up properly. +By default, Storybook will try to infer the required argTypes and associated controls for your stories based on the metadata provided by the [`@storybook/ember-cli-storybook`](https://github.com/storybookjs/ember-cli-storybook) adapter. You'll need to take some additional steps to set it up properly. -Update your `ember-cli-build.js` configuration file to include the addon. +Update your `ember-cli-build.js` configuration file to include the adapter. @@ -121,7 +121,7 @@ Enabling this feature will generate a `storybook-docgen/index.json` automaticall -When you set the `component` annotation to the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.md) for your component. +When you set the `component` annotation of the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.md) for your component. @@ -171,7 +171,7 @@ By default, Storybook will choose a control for each arg based on its initial va -By default, Storybook will try to infer the required argTypes and associated controls for your stories based on the component's definition and the initial value of the args. You'll need to take some additional steps to set it up properly. You can opt to generate a [`custom-elements.json`](https://github.com/webcomponents/custom-elements-json) file with [`@custom-elements-manifest/analyzer`](https://github.com/open-wc/custom-elements-manifest) if you're using the `pre-v1.0.0` version of the elements file or [`@custom-elements-manifest/analyzer`](https://github.com/open-wc/custom-elements-manifest) for newer versions and configure it in your Storybook UI configuration file (i.e., `.storybook/preview.js|ts`) to enable it. +By default, Storybook will try to infer the required argTypes and associated controls for your stories based on the component's definition and the initial value of the args. You'll need to take some additional steps to set it up properly. You can opt to generate a [`custom-elements.json`](https://github.com/webcomponents/custom-elements-json) file with [`@custom-elements-manifest/analyzer`](https://github.com/open-wc/custom-elements-manifest) if you're using the `pre-v1.0.0` version of the elements file or [`@custom-elements-manifest/analyzer`](https://github.com/open-wc/custom-elements-manifest/tree/master/packages/analyzer) for newer versions and configure it in your Storybook UI configuration file (i.e., `.storybook/preview.js|ts`) to enable it. @@ -185,7 +185,7 @@ By default, Storybook will try to infer the required argTypes and associated con -When you set the `component` annotation to the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.md) for your component. +When you set the `component` annotation of the default export of your story file, it will be used to infer the controls and auto-generate the matching [`argTypes`](../api/arg-types.md) for your component. diff --git a/docs/snippets/react/storybook-main-prop-filter.ts.mdx b/docs/snippets/react/storybook-main-prop-filter.ts.mdx index 7d4f2763ac7e..4dd6b9d649e5 100644 --- a/docs/snippets/react/storybook-main-prop-filter.ts.mdx +++ b/docs/snippets/react/storybook-main-prop-filter.ts.mdx @@ -14,7 +14,9 @@ const config: StorybookConfig = { allowSyntheticDefaultImports: false, esModuleInterop: false, }, - propFilter: () => true, + // Filter out third-party props from node_modules except @mui packages. + propFilter: (prop) => + prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true, }, }, };