From f185f7403009e09a9f2d699919bf179ee8c05aa1 Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Fri, 2 Jun 2023 15:14:45 +1000
Subject: [PATCH] Updated documentation text
---
stories/CSS.mdx | 6 +++++-
stories/DefaultValue.mdx | 14 +++++++-------
stories/DocsContainer.mdx | 8 +++++++-
stories/ImportPathReplacements.mdx | 3 +--
stories/PropsTable.mdx | 2 ++
stories/Source.mdx | 6 +++++-
stories/Webpack.mdx | 11 +++++++++++
7 files changed, 38 insertions(+), 12 deletions(-)
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"):