Merge pull request #14097 from storybookjs/docs_random_issues_fixes

Chore: (Docs) Small adjustments to the documentation

docs/api/cli-options.md

@@ -30,6 +30,11 @@ Usage: start-storybook [options]
 | --no-dll                       | Do not use dll reference (no-op)                                                                                                               | `start-storybook --no-dll`                      |
 | --debug-webpack                | Display final webpack configurations for debugging purposes                                                                                    | `start-storybook --debug-webpack`               |
 | --docs                         | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation) | `start-storybook --docs`                        |
+| --no-manager-cache             | Disables Storybook's manager caching mechanism. See note below.                                                                                 | `start-storybook --no-manager-cache`            |
+
+<div class="aside">
+💡 <strong>NOTE</strong>: Use the <code>--no-manager-cache</code> flag with caution. As it disables the internal caching mechanism and can severely impact your Storybook's loading time.
+</div>
 
 ## build-storybook
 
@@ -60,3 +65,7 @@ Usage: build-storybook [options]
 | --no-dll                       | Do not use dll reference (no-op)                                                                                                                | `build-storybook --no-dll`                  |
 | --debug-webpack                | Display final webpack configurations for debugging purposes                                                                                     | `build-storybook --debug-webpack`           |
 | --docs                         | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs`                    |
+
+<div class="aside">
+💡 <strong>NOTE</strong>: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.
+</div>

docs/configure/images-and-assets.md

@@ -31,9 +31,19 @@ Configure a directory (or a list of directories) where your assets live when sta
 
 ```json
 {
-    "scripts": {
-        "start-storybook": "start-storybook -s ./public -p 9001"
-    }
+  "scripts": {
+    "start-storybook": "start-storybook -s ./public -p 9001"
+  }
+}
+```
+
+Or when building your Storybook with `build-storybook`:
+
+```json
+{
+  "scripts": {
+    "build-storybook": "build-storybook -s public"
+  }
 }
 ```
 
@@ -55,9 +65,18 @@ You can also pass a list of directories separated by commas without spaces inste
 
 ```json
 {
-    "scripts": {
-        "start-storybook": "start-storybook -s ./public,./static -p 9001"
-    }
+  "scripts": {
+    "start-storybook": "start-storybook -s ./public,./static -p 9001"
+  }
+}
+```
+The same can be applied when you're building your Storybook.
+
+```json
+{
+  "scripts": {
+    "build-storybook": "build-storybook -s ./public,./static -p 9001"
+  }
 }
 ```
 
@@ -85,4 +104,4 @@ In this case, you need to have all your images and media files with relative pat
 
 If you load static content via importing, this is automatic and you do not have to do anything.
 
-If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.
+If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.

docs/configure/theming.md

@@ -98,9 +98,16 @@ Finally we'll need to import the theme into Storybook. Create a new file called
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-If the theme is not shown when Storybook starts, update your <code>storybook</code> scripts to include the <code>--no-manager-cache</code> flag.
-</div>
+
+Adjust your `storybook` script in your package.json and include the [`--no-manager-cache`](../api/cli-options.md#start-storybook) flag. For instance:
+
+```json
+{
+  "scripts":{
+    "storybook": "start-storybook -p 6006 --no-manager-cache",
+  },
+}
+```
 
 Now your custom theme will replace Storybook's default theme and you'll see a similar set of changes in the UI.
 
@@ -232,4 +239,4 @@ Or with template literals:
   ]}
 />
 
-<!-- prettier-ignore-end -->
+<!-- prettier-ignore-end -->

docs/workflows/publish-storybook.md

@@ -6,12 +6,22 @@ Storybook is more than a UI component development tool. Teams also publish Story
 
 ## Build Storybook as a static web application
 
-First, we’ll need to build Storybook as a static web application using `build-storybook`, a command that’s installed by default.
+First, we’ll need to build Storybook as a static web application using `build-storybook`, a command that’s installed by default. If you're using Yarn run the following command:
 
 ```shell
 yarn build-storybook -o ./path/to/build
 ```
 
+If you're using npm run the following command:
+
+```shell
+npm run build-storybook -- -o ./path/to/build
+```
+
+<div class="aside">
+💡 <strong>Note</strong>: Be careful when running the  <code>build-storybook</code> in with the <code>-o</code> flag as you might unknowingly overwrite essential files and folders. For instance <strong>avoid</strong> running <code>build-storybook -o ./</code> as this will replace the root project contents with the output of the command. 
+</div>
+
 Storybook will create a static web application at the path you specify. This can be served by any web server. Try it out locally by running:
 
 ```shell
@@ -67,4 +77,4 @@ Storybook allows you to browse components from any [Storybook published online](
 
 Toggle between multiple versions of Storybook to see how components change between versions. This is useful for design system package authors who maintain many versions at once.
 
-**Requires** a [CHP level 1](./package-composition.md#chp-level-1) server (such as [chromatic.com](https://www.chromatic.com/)),
+**Requires** a [CHP level 1](./package-composition.md#chp-level-1) server (such as [chromatic.com](https://www.chromatic.com/)),