diff --git a/.gitignore b/.gitignore index f2656f4..a5d9286 100644 --- a/.gitignore +++ b/.gitignore @@ -26,4 +26,5 @@ storybook-static/ /formatNodeToJsxString.mjs /formatValueToString.mjs /getValueType.mjs +/storybookConfig.mjs /styles.css diff --git a/.storybook/main.mjs b/.storybook/main.mjs index 38ac063..5d555af 100644 --- a/.storybook/main.mjs +++ b/.storybook/main.mjs @@ -1,4 +1,5 @@ -import * as packageJson from '../package.json'; +import packageJson from '../package.json'; +import { webpackFinal } from '../src/storybookConfig.mjs'; export default { addons: [ @@ -43,14 +44,5 @@ export default { return indexer; }); }, - webpackFinal: async (config) => { - config.module.rules.map((rule) => { - if (!rule.type || rule.type !== 'asset/source') { - // ? Ensure any loaders are not run on any 'raw' file imports - rule.resourceQuery = { not: [/raw/] }; - } - return rule; - }); - return config; - }, + webpackFinal, }; diff --git a/README.md b/README.md index 4ea2116..43831bd 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ npm i @idesigncode/storybook-tools --save - ✏️ Write functional "example components" for actual use cases of a component. - 📑 [PropsTable](https://idesigncode-storybook-tools.netlify.app/?path=/docs/components-propstable--docs): automatically document static & "live-updating" props details. -- 🖥️ [Source](https://idesigncode-storybook-tools.netlify.app/?path=/docs/components-source--docs) & [Raw Imports](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-raw-imports--docs): output production-ready source code. +- 🖥️ [Source](https://idesigncode-storybook-tools.netlify.app/?path=/docs/components-source--docs): output production-ready source code with [Raw Imports](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-webpack--docs#raw-imports) & [Import Path Replacements](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-import-path-replacements--docs). - 🌙 [DocsContainer](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-docscontainer--docs): dark mode support for Storybook Docs with [storybook-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode). - 📸 Image snapshot testing compatible. - 🎉 Compatible with `MDX` and `CSF` stories. @@ -25,6 +25,5 @@ npm i @idesigncode/storybook-tools --save ## Requirements - See [peer dependencies](package.json) -- The [Raw Imports](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-raw-imports--docs) feature requires the default [Webpack builder](https://storybook.js.org/docs/react/builders/webpack) for Storybook. -- A small amount of [configuration](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-css--docs) for default styles. -- Optional global configuration for using [Import Path Replacements](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-import-path-replacements--docs) with [Source](https://idesigncode-storybook-tools.netlify.app/?path=/docs/components-source--docs). +- The default [Webpack builder](https://storybook.js.org/docs/react/builders/webpack) for Storybook. +- A small amount of configuration for [Webpack](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-webpack--docs) & the [default CSS styles](https://idesigncode-storybook-tools.netlify.app/?path=/docs/configuration-css--docs). diff --git a/__snapshots__/components-source.test.js.snap b/__snapshots__/components-source.test.js.snap index d56e916..e9912e4 100644 --- a/__snapshots__/components-source.test.js.snap +++ b/__snapshots__/components-source.test.js.snap @@ -159,16 +159,6 @@ exports[`Components/Source Component With Props Raw test 1`] = ` import - - - - * - - - - - as - packageJson diff --git a/__snapshots__/configuration-import-path-replacements--env.png b/__snapshots__/configuration-import-path-replacements--env.png index 88ac30b..d1f670a 100644 Binary files a/__snapshots__/configuration-import-path-replacements--env.png and b/__snapshots__/configuration-import-path-replacements--env.png differ diff --git a/__snapshots__/configuration-import-path-replacements.test.js.snap b/__snapshots__/configuration-import-path-replacements.test.js.snap index e6eab6c..b445fdf 100644 --- a/__snapshots__/configuration-import-path-replacements.test.js.snap +++ b/__snapshots__/configuration-import-path-replacements.test.js.snap @@ -16,16 +16,6 @@ exports[`Configuration/Import Path Replacements Env test 1`] = ` import - - - - * - - - - - as - packageJson diff --git a/__snapshots__/configuration-raw-imports--example.png b/__snapshots__/configuration-raw-imports--example.png deleted file mode 100644 index c39ac9f..0000000 Binary files a/__snapshots__/configuration-raw-imports--example.png and /dev/null differ diff --git a/__snapshots__/configuration-raw-imports--webpack-final-rules-config.png b/__snapshots__/configuration-raw-imports--webpack-final-rules-config.png deleted file mode 100644 index 6c6903c..0000000 Binary files a/__snapshots__/configuration-raw-imports--webpack-final-rules-config.png and /dev/null differ diff --git a/__snapshots__/configuration-raw-imports.test.js.snap b/__snapshots__/configuration-raw-imports.test.js.snap deleted file mode 100644 index b1007e7..0000000 --- a/__snapshots__/configuration-raw-imports.test.js.snap +++ /dev/null @@ -1,348 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Configuration/Raw Imports Example test 1`] = ` -
- 
-    
-      
-        // Stories of Component.mjs
-      
-      
-      
-      
-      
-      
-        import
-      
-      
-        ComponentWithPropsRaw
-      
-      
-        from
-      
-      
-      
-      
-        './ComponentWithProps.mjs?raw'
-      
-      
-        ;
-      
-    
-
- -
-`; - -exports[`Configuration/Raw Imports Webpack Final Rules Config test 1`] = ` -
- 
-    
-      
-        // .storybook/main.mjs
-      
-      
-      
-      
-      
-      
-        export
-      
-      
-      
-      
-        default
-      
-      
-      
-      
-        {
-      
-      
-      
-      
-      
-      
-        webpackFinal
-      
-      
-        :
-      
-      
-      
-      
-        async
-      
-      
-      
-      
-        (
-      
-      
-        config
-      
-      
-        )
-      
-      
-      
-      
-        =>
-      
-      
-      
-      
-        {
-      
-      
-      
-      
-        config
-      
-      
-        .
-      
-      
-        module
-      
-      
-        .
-      
-      
-        rules
-      
-      
-        .
-      
-      
-        map
-      
-      
-        (
-      
-      
-        (
-      
-      
-        rule
-      
-      
-        )
-      
-      
-      
-      
-        =>
-      
-      
-      
-      
-        {
-      
-      
-      
-      
-      
-      
-        if
-      
-      
-      
-      
-        (
-      
-      
-        !
-      
-      
-        rule
-      
-      
-        .
-      
-      
-        type
-      
-      
-        ||
-      
-      
-        rule
-      
-      
-        .
-      
-      
-        type
-      
-      
-        !==
-      
-      
-      
-      
-        'asset/source'
-      
-      
-        )
-      
-      
-      
-      
-        {
-      
-      
-      
-      
-      
-      
-        // ? Ensure any loaders are not run on any 'raw' file imports
-      
-      
-      
-      
-        rule
-      
-      
-        .
-      
-      
-        resourceQuery
-      
-      
-        =
-      
-      
-      
-      
-        {
-      
-      
-      
-      
-        not
-      
-      
-        :
-      
-      
-      
-      
-        [
-      
-      
-        /
-      
-      
-        raw
-      
-      
-        /
-      
-      
-        ]
-      
-      
-      
-      
-        }
-      
-      
-        ;
-      
-      
-      
-      
-      
-      
-        }
-      
-      
-        ,
-      
-      
-      
-      
-      
-      
-        return
-      
-      
-        rule
-      
-      
-        ;
-      
-      
-      
-      
-      
-      
-        }
-      
-      
-        )
-      
-      
-        ;
-      
-      
-      
-      
-      
-      
-        // ...config settings
-      
-      
-      
-      
-      
-      
-        return
-      
-      
-        config
-      
-      
-        ;
-      
-      
-      
-      
-      
-      
-        }
-      
-      
-        ,
-      
-      
-      
-      
-      
-      
-        // ...main.mjs configuration
-      
-      
-      
-      
-      
-      
-        }
-      
-      
-        ;
-      
-    
-
- -
-`; diff --git a/__snapshots__/configuration-webpack--implementation-custom-settings.png b/__snapshots__/configuration-webpack--implementation-custom-settings.png new file mode 100644 index 0000000..e3fd408 Binary files /dev/null and b/__snapshots__/configuration-webpack--implementation-custom-settings.png differ diff --git a/__snapshots__/configuration-webpack--implementation.png b/__snapshots__/configuration-webpack--implementation.png new file mode 100644 index 0000000..244ce49 Binary files /dev/null and b/__snapshots__/configuration-webpack--implementation.png differ diff --git a/__snapshots__/configuration-webpack--raw-import.png b/__snapshots__/configuration-webpack--raw-import.png new file mode 100644 index 0000000..5a10f40 Binary files /dev/null and b/__snapshots__/configuration-webpack--raw-import.png differ diff --git a/__snapshots__/configuration-webpack--webpack-final-config.png b/__snapshots__/configuration-webpack--webpack-final-config.png new file mode 100644 index 0000000..eebba6e Binary files /dev/null and b/__snapshots__/configuration-webpack--webpack-final-config.png differ diff --git a/__snapshots__/configuration-webpack--webpack-final.png b/__snapshots__/configuration-webpack--webpack-final.png new file mode 100644 index 0000000..57143f5 Binary files /dev/null and b/__snapshots__/configuration-webpack--webpack-final.png differ diff --git a/__snapshots__/configuration-webpack.test.js.snap b/__snapshots__/configuration-webpack.test.js.snap new file mode 100644 index 0000000..d3889ab --- /dev/null +++ b/__snapshots__/configuration-webpack.test.js.snap @@ -0,0 +1,769 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Configuration/Webpack Implementation Custom Settings test 1`] = ` +
+ 
+    
+      
+        // .storybook/main.mjs
+      
+      
+      
+      
+      
+      
+        import
+      
+      
+      
+      
+        {
+      
+      
+        webpackFinal
+      
+      
+        }
+      
+      
+      
+      
+        from
+      
+      
+      
+      
+        "@idesigncode/storybook-tools/storybookConfig.mjs"
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        export
+      
+      
+      
+      
+        default
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+      
+      
+        webpackFinal
+      
+      
+        :
+      
+      
+      
+      
+        async
+      
+      
+      
+      
+        (
+      
+      
+        config
+      
+      
+        )
+      
+      
+      
+      
+        =>
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+      
+      
+        const
+      
+      
+        updatedConfig
+      
+      
+        =
+      
+      
+      
+      
+        await
+      
+      
+      
+      
+        webpackFinal
+      
+      
+        (
+      
+      
+        config
+      
+      
+        )
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        // ...Apply your custom configuration settings here to \`updatedConfig\`
+      
+      
+      
+      
+      
+      
+        return
+      
+      
+        updatedConfig
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        }
+      
+      
+        ,
+      
+      
+      
+      
+      
+      
+        // ...main.mjs configuration
+      
+      
+      
+      
+      
+      
+        }
+      
+      
+        ;
+      
+    
+
+ +
+`; + +exports[`Configuration/Webpack Implementation test 1`] = ` +
+ 
+    
+      
+        // .storybook/main.mjs
+      
+      
+      
+      
+      
+      
+        import
+      
+      
+      
+      
+        {
+      
+      
+        webpackFinal
+      
+      
+        }
+      
+      
+      
+      
+        from
+      
+      
+      
+      
+        "@idesigncode/storybook-tools/storybookConfig.mjs"
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        export
+      
+      
+      
+      
+        default
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+        webpackFinal
+      
+      
+        ,
+      
+      
+      
+      
+      
+      
+        // ...main.mjs configuration
+      
+      
+      
+      
+      
+      
+        }
+      
+      
+        ;
+      
+    
+
+ +
+`; + +exports[`Configuration/Webpack Raw Import test 1`] = ` +
+ 
+    
+      
+        // Stories of Component.mjs
+      
+      
+      
+      
+      
+      
+        import
+      
+      
+        ComponentWithPropsRaw
+      
+      
+        from
+      
+      
+      
+      
+        './ComponentWithProps.mjs?raw'
+      
+      
+        ;
+      
+    
+
+ +
+`; + +exports[`Configuration/Webpack Webpack Final Config test 1`] = ` +
+ 
+    
+      
+        // @idesigncode/storybook-tools/storybookConfig.mjs
+      
+      
+      
+      
+      
+      
+        export
+      
+      
+      
+      
+        const
+      
+      
+      
+      
+        webpackFinal
+      
+      
+      
+      
+        =
+      
+      
+      
+      
+        async
+      
+      
+      
+      
+        (
+      
+      
+        config
+      
+      
+        )
+      
+      
+      
+      
+        =>
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+      
+      
+        // ? Enable 'raw imports' for all files
+      
+      
+      
+      
+        config
+      
+      
+        .
+      
+      
+        module
+      
+      
+        .
+      
+      
+        rules
+      
+      
+        .
+      
+      
+        map
+      
+      
+        (
+      
+      
+        (
+      
+      
+        rule
+      
+      
+        )
+      
+      
+      
+      
+        =>
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+      
+      
+        if
+      
+      
+      
+      
+        (
+      
+      
+        !
+      
+      
+        rule
+      
+      
+        .
+      
+      
+        type
+      
+      
+        ||
+      
+      
+        rule
+      
+      
+        .
+      
+      
+        type
+      
+      
+        !==
+      
+      
+      
+      
+        'asset/source'
+      
+      
+        )
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+        rule
+      
+      
+        .
+      
+      
+        resourceQuery
+      
+      
+        =
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+        not
+      
+      
+        :
+      
+      
+      
+      
+        [
+      
+      
+        /
+      
+      
+        raw
+      
+      
+        /
+      
+      
+        ]
+      
+      
+      
+      
+        }
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        }
+      
+      
+      
+      
+      
+      
+        return
+      
+      
+        rule
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        }
+      
+      
+        )
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        // ? Enable correct display of dynamic source code in production
+      
+      
+      
+      
+        config
+      
+      
+        .
+      
+      
+        optimization
+      
+      
+        .
+      
+      
+        minimizer
+      
+      
+        .
+      
+      
+        map
+      
+      
+        (
+      
+      
+        (
+      
+      
+        minimizer
+      
+      
+        )
+      
+      
+      
+      
+        =>
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+        minimizer
+      
+      
+        .
+      
+      
+        options
+      
+      
+        .
+      
+      
+        minimizer
+      
+      
+        .
+      
+      
+        options
+      
+      
+        .
+      
+      
+        compress
+      
+      
+        =
+      
+      
+      
+      
+        false
+      
+      
+        ;
+      
+      
+      
+      
+        minimizer
+      
+      
+        .
+      
+      
+        options
+      
+      
+        .
+      
+      
+        minimizer
+      
+      
+        .
+      
+      
+        options
+      
+      
+        .
+      
+      
+        format
+      
+      
+        =
+      
+      
+      
+      
+        {
+      
+      
+      
+      
+        comments
+      
+      
+        :
+      
+      
+      
+      
+        true
+      
+      
+      
+      
+        }
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        return
+      
+      
+        minimizer
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        }
+      
+      
+        )
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        return
+      
+      
+        config
+      
+      
+        ;
+      
+      
+      
+      
+      
+      
+        }
+      
+      
+        ;
+      
+      
+      
+    
+
+ +
+`; + +exports[`Configuration/Webpack Webpack Final test 1`] = `""`; diff --git a/package.json b/package.json index 5e5c370..0a49aa1 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "formatNodeToJsxString.mjs", "formatValueToString.mjs", "getValueType.mjs", + "storybookConfig.mjs", "styles.css" ], "exports": { @@ -56,6 +57,7 @@ "./formatValueToString.mjs": "./formatValueToString.mjs", "./getValueType.mjs": "./getValueType.mjs", "./package.json": "./package.json", + "./storybookConfig.mjs": "./storybookConfig.mjs", "./styles.css": "./styles.css" }, "dependencies": { diff --git a/src/getValueType.mjs b/src/getValueType.mjs index 2e4f7a0..d5d4de6 100644 --- a/src/getValueType.mjs +++ b/src/getValueType.mjs @@ -1,6 +1,6 @@ /** * Get the type of value - * @param value + * @param {*} value * @returns {string} "array"|"bigint"|"boolean"|"elementType"|"function"|"node"|"number"|"object"|"ref object"|"string"|"symbol"|"undefined" */ const getValueType = (value) => { diff --git a/src/storybookConfig.mjs b/src/storybookConfig.mjs new file mode 100644 index 0000000..b9bd02d --- /dev/null +++ b/src/storybookConfig.mjs @@ -0,0 +1,23 @@ +/** + * Set the necessary webpackFinal config settings + * @param {Object} config + * @returns {Promise<*>} + */ +export const webpackFinal = async (config) => { + // ? Enable 'raw imports' for all files + config.module.rules.map((rule) => { + if (!rule.type || rule.type !== 'asset/source') { + rule.resourceQuery = { not: [/raw/] }; + } + return rule; + }); + + // ? Enable correct display of dynamic source code in production + config.optimization.minimizer.map((minimizer) => { + minimizer.options.minimizer.options.compress = false; + minimizer.options.minimizer.options.format = { comments: true }; + return minimizer; + }); + + return config; +}; 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 c7e167f..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-raw-imports--docs) - 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/ImportPathReplacements.stories.mjs b/stories/ImportPathReplacements.stories.mjs index 9d406bd..d3d62eb 100644 --- a/stories/ImportPathReplacements.stories.mjs +++ b/stories/ImportPathReplacements.stories.mjs @@ -9,7 +9,7 @@ export const Env = { args: { code: [ `// .storybook/main.mjs`, - `import * as packageJson from '../package.json';`, + `import packageJson from '../package.json';`, ``, `export default {`, ` env: (config) => ({`, diff --git a/stories/PropsTable.mdx b/stories/PropsTable.mdx index f6302a1..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: @@ -36,7 +38,7 @@ The prop `values` displayed in the `PropsTable` will update if the child compone > > #### See also: > -> - [Raw Imports](/docs/configuration-raw-imports--docs) - get the source code of an imported file. +> - [Raw Imports](/docs/configuration-webpack--docs#raw-imports) - get the source code of an imported file. Use the boolean `hideChildren` to only show the `PropsTable` and disable rendering of the "example component". diff --git a/stories/RawImports.mdx b/stories/RawImports.mdx deleted file mode 100644 index a846443..0000000 --- a/stories/RawImports.mdx +++ /dev/null @@ -1,18 +0,0 @@ -import { Meta, Story } from '@storybook/addon-docs'; -import * as RawImportsStories from './RawImports.stories.mjs'; - - - -# Raw Imports - -To document the source code of any file you can use the `?raw` import suffix (a.k.a. "webpack resource query"): - - - -To use the `?raw` import suffix, the following configuration must be added to `./storybook/main.mjs`: - - - -> #### See also: -> -> - [Source](/docs/components-source--docs) - a component to display a block of source code. diff --git a/stories/RawImports.stories.mjs b/stories/RawImports.stories.mjs deleted file mode 100644 index ac11814..0000000 --- a/stories/RawImports.stories.mjs +++ /dev/null @@ -1,38 +0,0 @@ -import Source from '../src/Source.mjs'; - -export default { - title: 'Configuration/Raw Imports', - component: Source, -}; - -export const Example = { - args: { - code: [ - `// Stories of Component.mjs`, - `import ComponentWithPropsRaw from './ComponentWithProps.mjs?raw';`, - ].join('\n'), - importPathReplacements: false, - }, -}; - -export const WebpackFinalRulesConfig = { - args: { - code: [ - `// .storybook/main.mjs`, - `export default {`, - ` webpackFinal: async (config) => {`, - ` config.module.rules.map((rule) => {`, - ` if (!rule.type || rule.type !== 'asset/source') {`, - ` // ? Ensure any loaders are not run on any 'raw' file imports`, - ` rule.resourceQuery = { not: [/raw/] };`, - ` },`, - ` return rule;`, - ` });`, - ` // ...config settings`, - ` return config;`, - ` },`, - ` // ...main.mjs configuration`, - `};`, - ].join('\n'), - }, -}; diff --git a/stories/Source.mdx b/stories/Source.mdx index b5c28f3..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`. @@ -72,4 +76,4 @@ You can also disable import path replacements on each instance of `Source` by se > #### See also: > > - [Import Path Replacements](/docs/configuration-import-path-replacements--docs) - global (default) import path replacements configuration of all instances of `Source`. -> - [Raw Imports](/docs/configuration-raw-imports--docs) - get the source code of an imported file. +> - [Raw Imports](/docs/configuration-webpack--docs#raw-imports) - get the source code of an imported file. diff --git a/stories/Source.stories.mjs b/stories/Source.stories.mjs index 8aca665..9c3a15b 100644 --- a/stories/Source.stories.mjs +++ b/stories/Source.stories.mjs @@ -2,7 +2,7 @@ import React from 'react'; import { expect, jest } from '@storybook/jest'; import { userEvent, within } from '@storybook/testing-library'; import { useDarkMode } from 'storybook-dark-mode'; -import * as packageJson from '../package.json'; +import packageJson from '../package.json'; import PropsTable from '../src/PropsTable.mjs'; import Source from '../src/Source.mjs'; @@ -80,7 +80,7 @@ export const ComponentWithPropsRaw = { code: [ `// Stories of Component.mjs`, `import ComponentWithPropsRaw from './ComponentWithProps.mjs?raw';`, - `import * as packageJson from '../package.json';`, + `import packageJson from '../package.json';`, ``, ` + +# Webpack + +Certain Webpack configuration settings are required for correct functionality of some components and features. + +These can be easily added to `.storybook/main.mjs` with the named export `webpackFinal`: + + + +
+ +

+ 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"): + + + +> #### See also: +> +> - [PropsTable](/docs/components-propstable--docs) - a component to automatically document static & "live-updating" props details. +> - [Source](/docs/components-source--docs) - a component to display a block of source code. diff --git a/stories/Webpack.stories.mjs b/stories/Webpack.stories.mjs new file mode 100644 index 0000000..7b01220 --- /dev/null +++ b/stories/Webpack.stories.mjs @@ -0,0 +1,114 @@ +import { expect } from '@storybook/jest'; +import Source from '../src/Source.mjs'; +import { webpackFinal } from '../src/storybookConfig.mjs'; +import storybookConfigRaw from '../src/storybookConfig.mjs?raw'; + +export default { + title: 'Configuration/Webpack', + component: Source, +}; + +export const Implementation = { + args: { + code: [ + `// .storybook/main.mjs`, + `import { webpackFinal } from "../src/storybookConfig.mjs";`, + ``, + `export default {`, + ` webpackFinal,`, + ` // ...main.mjs configuration`, + `};`, + ].join('\n'), + }, +}; + +export const ImplementationCustomSettings = { + args: { + code: [ + `// .storybook/main.mjs`, + `import { webpackFinal } from "../src/storybookConfig.mjs";`, + ``, + `export default {`, + ` webpackFinal: async (config) => {`, + ` const updatedConfig = await webpackFinal(config);`, + ` // ...Apply your custom configuration settings here to \`updatedConfig\``, + ` return updatedConfig;`, + ` },`, + ` // ...main.mjs configuration`, + `};`, + ].join('\n'), + }, +}; + +export const WebpackFinalConfig = { + args: { + code: [ + `// @idesigncode/storybook-tools/storybookConfig.mjs`, + ...storybookConfigRaw.replace(/^\/?\*.*[^]*\*\/\n?/gm, ''), + ].join('\n'), + }, +}; + +const configInitial = { + module: { + rules: [{}, { type: 'asset/source' }, { type: 'javascript/auto' }], + }, + optimization: { + minimizer: [ + { + options: { + minimizer: { + options: {}, + }, + }, + }, + ], + }, +}; + +export const WebpackFinal = { + args: { + config: JSON.parse(JSON.stringify(configInitial)), + }, + play: async ({ args, step }) => { + expect(args.config).toMatchObject(configInitial); + + await step(`Config is updated if given to webpackFinal`, async () => { + const result = await webpackFinal(args.config); + expect(result).toMatchObject({ + module: { + rules: [ + { resourceQuery: { not: [/raw/] } }, + { type: 'asset/source' }, + { resourceQuery: { not: [/raw/] }, type: 'javascript/auto' }, + ], + }, + optimization: { + minimizer: [ + { + options: { + minimizer: { + options: { + compress: false, + format: { comments: true }, + }, + }, + }, + }, + ], + }, + }); + }); + }, + render: () => '', +}; + +export const RawImport = { + args: { + code: [ + `// Stories of Component.mjs`, + `import ComponentWithPropsRaw from './ComponentWithProps.mjs?raw';`, + ].join('\n'), + importPathReplacements: false, + }, +};