docs(storybook): link storybook autodocs guide (#16860)

docs/generated/packages/storybook/documents/angular-storybook-compodoc.md

@@ -43,9 +43,11 @@ When you run Compodoc, it will generate a `documentation.json` file. Storybook w
 
 The main things that you need to do are:
 
-1. Include the component files in the TypeScript compilation for Compodoc (or any other files that contain your Compodoc documentation).
-2. Use `compodoc` to generate a `documentation.json` file.
-3. Tell Storybook to use the `documentation.json` file to display the documentation.
+1. Install the necessary packages for `compodoc`.
+2. Include the component files in the TypeScript compilation for Compodoc (or any other files that contain your Compodoc documentation).
+3. Use `compodoc` to generate a `documentation.json` file.
+4. Tell Storybook to use the `documentation.json` file to display the documentation.
+5. Do not forget to enable [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs) in your Storybook configuration.
 
 Let's see how you can do that.
 
@@ -154,6 +156,27 @@ import docJson from '../documentation.json';
 setCompodocJson(docJson);
 ```
 
+### 5. Set up Autodocs
+
+In your project's `.storybook/main.js` file you have to enable autodocs:
+
+```js {% fileName="apps/web/.storybook/main.js" %}
+const config = {
+  stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+    defaultName: 'Docs',
+  },
+};
+
+export default config;
+```
+
 ### Now run Storybook and see the results!
 
 Now you can run Storybook or build Storybook, and documentation will be included. Just check the Docs tab!

docs/generated/packages/storybook/documents/overview.md

@@ -176,6 +176,12 @@ To register a [Storybook addon](https://storybook.js.org/addons/) for all Storyb
    export const decorators = [someDecorator];
    ```
 
+### Setting up documentation
+
+To set up documentation, you can use [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs). For Angular, [you can use `compodoc`](/packages/storybook/documents/angular-storybook-compodoc) to infer `argTypes`. You can read more about `argTypes` in the [official Storybook `argTypes` documentation](https://storybook.js.org/docs/angular/api/argtypes#automatic-argtype-inference).
+
+You can read more about how to best set up documentation using Storybook for your project in the [official Storybook documentation](https://storybook.js.org/docs/react/writing-docs/introduction).
+
 ## More Documentation
 
 You can find dedicated information for React and Angular:

docs/shared/packages/storybook/angular-storybook-compodoc.md

@@ -43,9 +43,11 @@ When you run Compodoc, it will generate a `documentation.json` file. Storybook w
 
 The main things that you need to do are:
 
-1. Include the component files in the TypeScript compilation for Compodoc (or any other files that contain your Compodoc documentation).
-2. Use `compodoc` to generate a `documentation.json` file.
-3. Tell Storybook to use the `documentation.json` file to display the documentation.
+1. Install the necessary packages for `compodoc`.
+2. Include the component files in the TypeScript compilation for Compodoc (or any other files that contain your Compodoc documentation).
+3. Use `compodoc` to generate a `documentation.json` file.
+4. Tell Storybook to use the `documentation.json` file to display the documentation.
+5. Do not forget to enable [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs) in your Storybook configuration.
 
 Let's see how you can do that.
 
@@ -154,6 +156,27 @@ import docJson from '../documentation.json';
 setCompodocJson(docJson);
 ```
 
+### 5. Set up Autodocs
+
+In your project's `.storybook/main.js` file you have to enable autodocs:
+
+```js {% fileName="apps/web/.storybook/main.js" %}
+const config = {
+  stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+    defaultName: 'Docs',
+  },
+};
+
+export default config;
+```
+
 ### Now run Storybook and see the results!
 
 Now you can run Storybook or build Storybook, and documentation will be included. Just check the Docs tab!

docs/shared/packages/storybook/plugin-overview.md

@@ -176,6 +176,12 @@ To register a [Storybook addon](https://storybook.js.org/addons/) for all Storyb
    export const decorators = [someDecorator];
    ```
 
+### Setting up documentation
+
+To set up documentation, you can use [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs). For Angular, [you can use `compodoc`](/packages/storybook/documents/angular-storybook-compodoc) to infer `argTypes`. You can read more about `argTypes` in the [official Storybook `argTypes` documentation](https://storybook.js.org/docs/angular/api/argtypes#automatic-argtype-inference).
+
+You can read more about how to best set up documentation using Storybook for your project in the [official Storybook documentation](https://storybook.js.org/docs/react/writing-docs/introduction).
+
 ## More Documentation
 
 You can find dedicated information for React and Angular: