diff --git a/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md b/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md index 2243d8abdf..06f8ba79be 100644 --- a/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md +++ b/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! diff --git a/docs/generated/packages/storybook/documents/overview.md b/docs/generated/packages/storybook/documents/overview.md index a0fd0f2e8c..276ccdf7d3 100644 --- a/docs/generated/packages/storybook/documents/overview.md +++ b/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: diff --git a/docs/shared/packages/storybook/angular-storybook-compodoc.md b/docs/shared/packages/storybook/angular-storybook-compodoc.md index 2243d8abdf..06f8ba79be 100644 --- a/docs/shared/packages/storybook/angular-storybook-compodoc.md +++ b/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! diff --git a/docs/shared/packages/storybook/button-docs.png b/docs/shared/packages/storybook/button-docs.png index c992b58aee..2aa81bc189 100644 Binary files a/docs/shared/packages/storybook/button-docs.png and b/docs/shared/packages/storybook/button-docs.png differ diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index a0fd0f2e8c..276ccdf7d3 100644 --- a/docs/shared/packages/storybook/plugin-overview.md +++ b/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: