Merge pull request #19 from idesigncode/storybook

Storybook improvements
idesigncode · Jun 9, 2023 · 2d72076 · 2d72076
2 parents 7d7e8ce + c18fccb
commit 2d72076
Show file tree

Hide file tree

Showing 23 changed files with 163 additions and 114 deletions.
diff --git a/.storybook/main.mjs b/.storybook/main.mjs
@@ -31,7 +31,7 @@ export default {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  stories: ['../**/*.mdx', '../**/*.stories.*'],
+  stories: ['../**/Introduction.mdx', '../**/*.mdx', '../**/*.stories.*'],
   storyIndexers: (indexers) => {
     // ? Extend js story indexer for mjs
     return indexers.map((indexer) => {

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # @idesigncode/storybook-tools
 
-A collection of tools & React components for use with Storybook.
+A collection of ESM tools to document component implementation examples in Storybook.
 
 ## Documentation [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://idesigncode-storybook-tools.netlify.app)
 
@@ -9,7 +9,7 @@ Check out the [documentation](https://idesigncode-storybook-tools.netlify.app/)
 ## Installation
 
 ```shell
-npm i @idesigncode/storybook-tools --save
+npm i @idesigncode/storybook-tools --save-dev
 ```
 
 ## Features

diff --git a/__snapshots__/components-defaultvalue.test.js.snap b/__snapshots__/components-defaultvalue.test.js.snap
@@ -7,7 +7,7 @@ exports[`Components/DefaultValue Automatic Type Source test 1`] = `
           style="white-space: pre;"
     >
       <span class="token comment">
-        // Stories of Component.mjs
+        // Component.stories.mjs
       </span>
       <span class>
       </span>
@@ -112,7 +112,7 @@ exports[`Components/DefaultValue Manual Type With Link Source test 1`] = `
           style="white-space: pre;"
     >
       <span class="token comment">
-        // Stories of Component.mjs
+        // Component.stories.mjs
       </span>
       <span class>
       </span>
@@ -346,7 +346,7 @@ exports[`Components/DefaultValue Ref Type Source test 1`] = `
           style="white-space: pre;"
     >
       <span class="token comment">
-        // Stories of Component.mjs
+        // Component.stories.mjs
       </span>
       <span class>
       </span>

diff --git a/__snapshots__/components-propstable.test.js.snap b/__snapshots__/components-propstable.test.js.snap
@@ -818,7 +818,7 @@ exports[`Components/PropsTable Automatic Props Source test 1`] = `
           style="white-space: pre;"
     >
       <span class="token comment">
-        // InputWithProps.mjs (the "example component")
+        // Input.example.mjs (the "example component")
       </span>
       <span class>
       </span>
@@ -893,7 +893,7 @@ exports[`Components/PropsTable Automatic Props Source test 1`] = `
       <span class>
       </span>
       <span class="token function-variable function">
-        InputWithProps
+        InputExample
       </span>
       <span class>
       </span>
@@ -1145,7 +1145,7 @@ exports[`Components/PropsTable Automatic Props Source test 1`] = `
         default
       </span>
       <span class>
-        InputWithProps
+        InputExample
       </span>
       <span class="token punctuation">
         ;
@@ -1314,7 +1314,7 @@ exports[`Components/PropsTable Manual Type With Required Source test 1`] = `
           style="white-space: pre;"
     >
       <span class="token comment">
-        // InputWithProps.mjs (the "example component")
+        // Input.example.mjs (the "example component")
       </span>
       <span class>
       </span>
@@ -1389,7 +1389,7 @@ exports[`Components/PropsTable Manual Type With Required Source test 1`] = `
       <span class>
       </span>
       <span class="token function-variable function">
-        InputWithProps
+        InputExample
       </span>
       <span class>
       </span>
@@ -1806,7 +1806,7 @@ exports[`Components/PropsTable Manual Type With Required Source test 1`] = `
         default
       </span>
       <span class>
-        InputWithProps
+        InputExample
       </span>
       <span class="token punctuation">
         ;
@@ -2090,7 +2090,7 @@ exports[`Components/PropsTable Raw Import Displayed Source test 1`] = `
           style="white-space: pre;"
     >
       <span class="token comment">
-        // Source code displayed by &lt;Source code={InputWithPropsRaw} /&gt;
+        // Source code displayed by &lt;Source code={InputExampleRaw} /&gt;
       </span>
       <span class>
       </span>
@@ -2144,7 +2144,7 @@ exports[`Components/PropsTable Raw Import Displayed Source test 1`] = `
       <span class>
       </span>
       <span class="token function-variable function">
-        InputWithProps
+        InputExample
       </span>
       <span class>
       </span>
@@ -2350,7 +2350,7 @@ exports[`Components/PropsTable Raw Import Displayed Source test 1`] = `
         default
       </span>
       <span class>
-        InputWithProps
+        InputExample
       </span>
       <span class="token punctuation">
         ;
@@ -2372,7 +2372,7 @@ exports[`Components/PropsTable Raw Import test 1`] = `
           style="white-space: pre;"
     >
       <span class="token comment">
-        // Stories of Input.mjs
+        // Input.stories.mjs
       </span>
       <span class>
       </span>
@@ -2382,15 +2382,15 @@ exports[`Components/PropsTable Raw Import test 1`] = `
         import
       </span>
       <span class>
-        InputWithPropsRaw
+        InputExampleRaw
       </span>
       <span class="token keyword">
         from
       </span>
       <span class>
       </span>
       <span class="token string">
-        './InputWithProps.mjs?raw'
+        './Input.example.mjs?raw'
       </span>
       <span class="token punctuation">
         ;
@@ -2417,7 +2417,7 @@ exports[`Components/PropsTable Raw Import test 1`] = `
         {
       </span>
       <span class="token tag script language-javascript">
-        InputWithPropsRaw
+        InputExampleRaw
       </span>
       <span class="token tag script language-javascript punctuation">
         }

diff --git a/__snapshots__/components-source--component-example-raw-displayed-source.png b/__snapshots__/components-source--component-example-raw-displayed-source.png
diff --git a/__snapshots__/components-source--component-example-raw.png b/__snapshots__/components-source--component-example-raw.png
diff --git a/__snapshots__/components-source--component-example.png b/__snapshots__/components-source--component-example.png
diff --git a/__snapshots__/components-source.test.js.snap b/__snapshots__/components-source.test.js.snap
@@ -42,7 +42,7 @@ exports[`Components/Source Code test 1`] = `
 </div>
 `;
 
-exports[`Components/Source Component With Props Raw Displayed Source test 1`] = `
+exports[`Components/Source Component Example Raw Displayed Source test 1`] = `
 <div class="Source sb-unstyled ">
   <pre class="prismjs">
     <code class="language-jsx"
@@ -122,14 +122,14 @@ exports[`Components/Source Component With Props Raw Displayed Source test 1`] =
 </div>
 `;
 
-exports[`Components/Source Component With Props Raw test 1`] = `
+exports[`Components/Source Component Example Raw test 1`] = `
 <div class="Source sb-unstyled ">
   <pre class="prismjs">
     <code class="language-jsx"
           style="white-space: pre;"
     >
       <span class="token comment">
-        // Stories of Component.mjs
+        // Component.stories.mjs
       </span>
       <span class>
       </span>
@@ -139,15 +139,15 @@ exports[`Components/Source Component With Props Raw test 1`] = `
         import
       </span>
       <span class>
-        ComponentWithPropsRaw
+        ComponentExampleRaw
       </span>
       <span class="token keyword">
         from
       </span>
       <span class>
       </span>
       <span class="token string">
-        './ComponentWithProps.mjs?raw'
+        './Component.example.mjs?raw'
       </span>
       <span class="token punctuation">
         ;
@@ -197,7 +197,7 @@ exports[`Components/Source Component With Props Raw test 1`] = `
         {
       </span>
       <span class="token tag script language-javascript">
-        ComponentWithPropsRaw
+        ComponentExampleRaw
       </span>
       <span class="token tag script language-javascript punctuation">
         }
@@ -371,14 +371,14 @@ exports[`Components/Source Component With Props Raw test 1`] = `
 </div>
 `;
 
-exports[`Components/Source Component With Props test 1`] = `
+exports[`Components/Source Component Example test 1`] = `
 <div class="Source sb-unstyled ">
   <pre class="prismjs">
     <code class="language-jsx"
           style="white-space: pre;"
     >
       <span class="token comment">
-        // ComponentWithProps.mjs (the "example component")
+        // Component.example.mjs (the "example component")
       </span>
       <span class>
       </span>

diff --git a/__snapshots__/configuration-webpack.test.js.snap b/__snapshots__/configuration-webpack.test.js.snap
@@ -280,7 +280,7 @@ exports[`Configuration/Webpack Raw Import test 1`] = `
           style="white-space: pre;"
     >
       <span class="token comment">
-        // Stories of Component.mjs
+        // Component.stories.mjs
       </span>
       <span class>
       </span>
@@ -290,15 +290,15 @@ exports[`Configuration/Webpack Raw Import test 1`] = `
         import
       </span>
       <span class>
-        ComponentWithPropsRaw
+        ComponentExampleRaw
       </span>
       <span class="token keyword">
         from
       </span>
       <span class>
       </span>
       <span class="token string">
-        './ComponentWithProps.mjs?raw'
+        './Component.example.mjs?raw'
       </span>
       <span class="token punctuation">
         ;
@@ -562,7 +562,7 @@ exports[`Configuration/Webpack Webpack Final Config test 1`] = `
       <span class>
       </span>
       <span class="token comment">
-        // ? Enable correct display of dynamic source code in production
+        // ? Enable unminified display of props in production
       </span>
       <span class>
       </span>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@idesigncode/storybook-tools",
   "version": "2.1.0",
-  "description": "A collection of tools & React components for use with Storybook.",
+  "description": "A collection of ESM tools to document component implementation examples in Storybook.",
   "keywords": [
     "react",
     "css",

diff --git a/src/storybookConfig.mjs b/src/storybookConfig.mjs
@@ -12,7 +12,7 @@ export const webpackFinal = async (config) => {
     return rule;
   });
 
-  // ? Enable correct display of dynamic source code in production
+  // ? Enable unminified display of props in production
   config.optimization.minimizer.map((minimizer) => {
     minimizer.options.minimizer.options.compress = false;
     minimizer.options.minimizer.options.format = { comments: true };

diff --git a/stories/ComponentWithProps.mjs → stories/Component.example.mjs b/stories/ComponentWithProps.mjs → stories/Component.example.mjs
@@ -7,7 +7,7 @@ export const Input = React.forwardRef((props, ref) => (
 ));
 Input.displayName = 'Input';
 
-const ComponentWithProps = () => {
+const ComponentExample = () => {
   const ref = React.useRef();
 
   return (
@@ -56,4 +56,4 @@ const ComponentWithProps = () => {
   );
 };
 
-export default ComponentWithProps;
+export default ComponentExample;
diff --git a/stories/DefaultValue.mdx b/stories/DefaultValue.mdx
@@ -5,7 +5,7 @@ import * as DefaultValueStories from './DefaultValue.stories.mjs';
 
 # DefaultValue
 
-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.
+A simple component that adds a table with details of a single prop's default value.
 
 <Story of={DefaultValueStories.Props} />
 

diff --git a/stories/DefaultValue.stories.mjs b/stories/DefaultValue.stories.mjs
@@ -34,7 +34,7 @@ export const AutomaticTypeSource = {
     return (
       <Source
         code={[
-          `// Stories of Component.mjs`,
+          `// Component.stories.mjs`,
           `import DefaultValue from '@idesigncode/storybook-tools/DefaultValue.mjs';`,
           ``,
           formatNodeToJsxString(<DefaultValue {...args} />),

diff --git a/stories/ImportPathReplacements.mdx b/stories/ImportPathReplacements.mdx
@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/addon-docs';
+import ImportPathReplacementsObject from './ImportPathReplacementsObject.mjs';
 import * as ImportPathReplacementsStories from './ImportPathReplacements.stories.mjs';
 
 <Meta of={ImportPathReplacementsStories} />
@@ -9,31 +10,17 @@ The [Source](/docs/components-source--docs) component can automatically display
 
 By default, this functionality is disabled unless `process.env.IMPORT_PATH_REPLACEMENTS` has a value - a stringified `{ key: value }` object:
 
-<table style={{ width: '100%' }}>
-  <tbody>
-    <tr>
-      <td>`key`</td>
-      <td>
-        A string to match within an import path. Also accepts `^` to prepend
-        relative paths.
-      </td>
-    </tr>
-    <tr>
-      <td>`value`</td>
-      <td>A string to replace the matched `key` string.</td>
-    </tr>
-  </tbody>
-</table>
-
-> #### Note:
->
-> - Import path replacements are performed in the order specified.
-> - Matches may occur more than once within an import path.
+<ImportPathReplacementsObject />
 
 To use import path replacements globally, you can add the configuration to an `.env` file or with [Storybook environment variables](https://storybook.js.org/docs/react/configure/environment-variables#using-storybook-configuration):
 
 <Story of={ImportPathReplacementsStories.Env} />
 
+> #### Note:
+>
+> - Import path replacements are performed in the order specified.
+> - Matches may occur more than once within an import path.
+>
 > #### See also:
 >
 > - [Source](/docs/components-source--docs) - further information and examples of using import path replacements.