Merge pull request #15 from idesigncode/storybook

Added webpackFinal function for easier setup of required Storybook configuration

.gitignore

@@ -26,4 +26,5 @@ storybook-static/
 /formatNodeToJsxString.mjs
 /formatValueToString.mjs
 /getValueType.mjs
+/storybookConfig.mjs
 /styles.css

.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,
 };

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).

__snapshots__/components-source.test.js.snap

@@ -159,16 +159,6 @@ exports[`Components/Source Component With Props Raw test 1`] = `
       <span class="token keyword">
         import
       </span>
-      <span class>
-      </span>
-      <span class="token operator">
-        *
-      </span>
-      <span class>
-      </span>
-      <span class="token keyword">
-        as
-      </span>
       <span class>
         packageJson
       </span>

__snapshots__/configuration-import-path-replacements.test.js.snap

@@ -16,16 +16,6 @@ exports[`Configuration/Import Path Replacements Env test 1`] = `
       <span class="token keyword">
         import
       </span>
-      <span class>
-      </span>
-      <span class="token operator">
-        *
-      </span>
-      <span class>
-      </span>
-      <span class="token keyword">
-        as
-      </span>
       <span class>
         packageJson
       </span>