diff --git a/stories/CSS.mdx b/stories/CSS.mdx index dfef89c..3dbf519 100644 --- a/stories/CSS.mdx +++ b/stories/CSS.mdx @@ -5,6 +5,10 @@ import * as CSSStories from './CSS.stories.mjs'; # CSS -The component styles can be imported into `.storybook/preview.mjs` with a single css file: +The default themes and component styles can be imported into `.storybook/preview.mjs` with a single css file: + +> #### See also: +> +> - [DocsContainer](/docs/configuration-docscontainer--docs) - light and dark mode functionality for Storybook Docs. diff --git a/stories/DefaultValue.mdx b/stories/DefaultValue.mdx index 333d4af..84a8ff8 100644 --- a/stories/DefaultValue.mdx +++ b/stories/DefaultValue.mdx @@ -5,7 +5,7 @@ import * as DefaultValueStories from './DefaultValue.stories.mjs'; # DefaultValue -Adds a table with details of a single prop's default value. +A simple [MDX component](https://storybook.js.org/docs/react/writing-docs/mdx) that adds a table with details of a single prop's default value. @@ -13,18 +13,18 @@ Adds a table with details of a single prop's default value. The `type` is automatically detected from the required `value`: - - -For further control, you can optionally override `type` or add a `link` as needed: + - +For further control, you can optionally override `type` or add a `link` as needed: -Specifying a `ref object` either by `type` or `value` will automatically generate text and a link to the React Docs: + - +Specifying a `ref object` either by `type` or `value` will automatically generate text and a link to the React Docs: + + diff --git a/stories/DocsContainer.mdx b/stories/DocsContainer.mdx index 91c8c6b..bd8012c 100644 --- a/stories/DocsContainer.mdx +++ b/stories/DocsContainer.mdx @@ -5,6 +5,12 @@ import * as DocsContainerStories from './DocsContainer.stories.mjs'; # DocsContainer -The `DocsContainer` applies the light and dark theme functionality and should be used in `.storybook/preview.mjs`: +Applies the light and dark mode theme functionality for ["Docs mode"](https://storybook.js.org/docs/react/writing-docs/introduction) with [storybook-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode). + +This component should be added to `.storybook/preview.mjs`: + +> #### See also: +> +> - [CSS](/docs/components-css--docs) - use the default themes and component styles. diff --git a/stories/ImportPathReplacements.mdx b/stories/ImportPathReplacements.mdx index d1d6947..fe1f486 100644 --- a/stories/ImportPathReplacements.mdx +++ b/stories/ImportPathReplacements.mdx @@ -36,5 +36,4 @@ To use import path replacements globally, you can add the configuration to an `. > #### See also: > -> - [Source](/docs/components-source--docs) - further information and examples of using import path replacements to display source code. -> - [Raw Imports](/docs/configuration-webpack--docs#raw-imports) - get the source code of an imported file. +> - [Source](/docs/components-source--docs) - further information and examples of using import path replacements. diff --git a/stories/PropsTable.mdx b/stories/PropsTable.mdx index 75321d5..c9abaf5 100644 --- a/stories/PropsTable.mdx +++ b/stories/PropsTable.mdx @@ -7,6 +7,8 @@ import * as PropsTableStories from './PropsTable.stories.mjs'; Adds a table of props details automatically generated from the props given to a single child component. +Can be used within [stories](https://storybook.js.org/docs/react/writing-stories/introduction) or directly in [MDX pages](https://storybook.js.org/docs/react/writing-docs/mdx). + > #### Note: diff --git a/stories/Source.mdx b/stories/Source.mdx index a28c261..278b517 100644 --- a/stories/Source.mdx +++ b/stories/Source.mdx @@ -9,6 +9,8 @@ Adds a block of source code with "copy" functionality to the page. Similar to [Storybook's Source block](https://storybook.js.org/docs/react/api/doc-block-source) but with code replacement functionality for production-ready source code and image snapshot testing compatibility. +Can be used within [stories](https://storybook.js.org/docs/react/writing-stories/introduction) or directly in [MDX pages](https://storybook.js.org/docs/react/writing-docs/mdx). + ### Implementation: @@ -26,9 +28,11 @@ The default theme is set with the `useDarkMode` hook from [storybook-dark-mode]( > - As `Source` is designed to show production-ready source code, it will automatically remove any use of [PropsTable](/docs/components-propstable--docs). > - This can be disabled by setting `removePropsTable` to `false`. +
+ ### Import Path Replacements (optional): -The `Source` component can also display all [file import paths](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) as they would be used by a consumer of your code. +The `Source` component can automatically display all [file import paths](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) as they would be used by a consumer of your code. Please see [Import Path Replacements](/docs/configuration-import-path-replacements--docs) for setting global (default) configuration of all instances of `Source`. diff --git a/stories/Webpack.mdx b/stories/Webpack.mdx index 53c2de7..46aa9c8 100644 --- a/stories/Webpack.mdx +++ b/stories/Webpack.mdx @@ -11,14 +11,25 @@ These can be easily added to `.storybook/main.mjs` with the named export `webpac +
+ +

+ Using `webpackFinal` with custom configuration settings +

+
+ You can alternatively use the imported `webpackFinal` async function with your own custom configuration settings: +
+ The imported `webpackFinal` async function will set the following configurations: +
+ ### Raw Imports Once Webpack is configured, you can import the raw source code of any file with the `?raw` import suffix (a.k.a. "Webpack resource query"):