@storybook/addon-docs 7.0.0-beta.29 → 7.0.0-beta.30

package/angular/README.md

@@ -13,6 +13,8 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 - [Installation](#installation)
 - [DocsPage](#docspage)
 - [Props tables](#props-tables)
+  - [Automatic Compodoc setup](#automatic-compodoc-setup)
+- [Manual Compodoc setup](#manual-compodoc-setup)
 - [MDX](#mdx)
 - [IFrame height](#iframe-height)
 - [Inline Stories](#inline-stories)
@@ -42,35 +44,63 @@ When you [install docs](#installation) you should get basic [DocsPage](../docs/d
 
 Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
 
-To get this, you'll first need to install Compodoc:
+### Automatic Compodoc setup
+
+During `sb init`, you will be asked, whether you want to setup Compodoc for your project. Just answer the question with Yes. Compodoc is then ready to use!
+
+## Manual Compodoc setup
+
+You'll need to register Compodoc's `documentation.json` file in `.storybook/preview.ts`:
+
+```js
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
+
+setCompodocJson(docJson);
+```
+
+Finally, to set up compodoc, you'll first need to install Compodoc:
 
 ```sh
 yarn add -D @compodoc/compodoc
 ```
 
-Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `package.json` creates a metadata file `./documentation.json` each time you run storybook:
+Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `projects.<project>.architect.<storybook|build-storybook>` in the `angular.json` creates a metadata file `./documentation.json` each time you run storybook:
 
-```json
+```jsonc
+// angular.json
 {
-  ...
-  "scripts": {
-    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
-    "storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
-    ...
-  },
+  "projects": {
+    "your-project": {
+      "architect": {
+        "storybook": {
+          ...,
+          "compodoc": true,
+          "compodocArgs": [
+            "-e",
+            "json",
+            "-d",
+            "." // the root folder of your project
+          ],
+        },
+        "build-storybook": {
+          ...,
+          "compodoc": true,
+          "compodocArgs": [
+            "-e",
+            "json",
+            "-d",
+            "." // the root folder of your project
+          ],
+        }
+      }
+    }
+  }
 }
 ```
 
 Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc.
 
-Next, add the following to `.storybook/preview.ts` to load the Compodoc-generated file:
-
-```js
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from '../documentation.json';
-setCompodocJson(docJson);
-```
-
 Finally, be sure to fill in the `component` field in your story metadata:
 
 ```ts
@@ -187,7 +217,7 @@ Storybook Docs renders all Angular stories inside IFrames, with a default height
 To update the global default, modify `.storybook/preview.ts`:
 
 ```ts
-export const parameters = { docs: { iframeHeight: 400 } };
+export const parameters = { docs: { story: { iframeHeight: '400px' } } };
 ```
 
 For `DocsPage`, you need to update the parameter locally in a story:
@@ -195,7 +225,7 @@ For `DocsPage`, you need to update the parameter locally in a story:
 ```ts
 export const basic = () => ...
 basic.parameters = {
-  docs: { iframeHeight: 400 }
+  docs: { story: { iframeHeight: '400px' } },
 }
 ```
 
@@ -209,12 +239,12 @@ And for `MDX` you can modify it as an attribute on the `Story` element:
 
 Storybook Docs renders all Angular stories inline by default.
 
-However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
+However, you can render stories in an iframe, with a default height of `100px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.story.inline` parameter.
 
 To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-export const parameters = { docs: { inlineStories: false } };
+export const parameters = { docs: { story: { inline: false } } };
 ```
 
 ## More resources

package/common/README.md

@@ -71,9 +71,7 @@ In the "common" setup, Storybook Docs renders stories inside `iframe`s, with a d
 To update the global default, modify `.storybook/preview.js`:
 
 ```ts
-import { addParameters } from '@storybook/ember';
-
-addParameters({ docs: { iframeHeight: 400 } });
+export const parameters = { docs: { story: { iframeHeight: '400px' } } };
 ```
 
 For `DocsPage`, you need to update the parameter locally in a story:
@@ -81,7 +79,7 @@ For `DocsPage`, you need to update the parameter locally in a story:
 ```ts
 export const basic = () => ...
 basic.parameters = {
-  docs: { iframeHeight: 400 }
+  docs: { story: { iframeHeight: '400px' } }
 }
 ```
 

package/ember/README.md

@@ -125,7 +125,7 @@ Storybook Docs renders all Ember stories inside `iframe`s, with a default height
 To update the global default, modify `.storybook/preview.js`:
 
 ```ts
-export const parameters = { docs: { iframeHeight: 400 } };
+export const parameters = { docs: { story: { iframeHeight: '400px' } } };
 ```
 
 For `DocsPage`, you need to update the parameter locally in a story:
@@ -133,7 +133,7 @@ For `DocsPage`, you need to update the parameter locally in a story:
 ```ts
 export const basic = () => ...
 basic.parameters = {
-  docs: { iframeHeight: 400 }
+  docs: { story: { iframeHeight: '400px' } }
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-beta.29",
+  "version": "7.0.0-beta.30",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -103,18 +103,18 @@
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/blocks": "7.0.0-beta.29",
-    "@storybook/client-logger": "7.0.0-beta.29",
-    "@storybook/components": "7.0.0-beta.29",
-    "@storybook/csf-plugin": "7.0.0-beta.29",
-    "@storybook/csf-tools": "7.0.0-beta.29",
+    "@storybook/blocks": "7.0.0-beta.30",
+    "@storybook/client-logger": "7.0.0-beta.30",
+    "@storybook/components": "7.0.0-beta.30",
+    "@storybook/csf-plugin": "7.0.0-beta.30",
+    "@storybook/csf-tools": "7.0.0-beta.30",
     "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "next",
-    "@storybook/node-logger": "7.0.0-beta.29",
-    "@storybook/postinstall": "7.0.0-beta.29",
-    "@storybook/preview-api": "7.0.0-beta.29",
-    "@storybook/theming": "7.0.0-beta.29",
-    "@storybook/types": "7.0.0-beta.29",
+    "@storybook/node-logger": "7.0.0-beta.30",
+    "@storybook/postinstall": "7.0.0-beta.30",
+    "@storybook/preview-api": "7.0.0-beta.30",
+    "@storybook/theming": "7.0.0-beta.30",
+    "@storybook/types": "7.0.0-beta.30",
     "fs-extra": "^9.0.1",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
@@ -141,7 +141,7 @@
       "./src/shims/mdx-react-shim.ts"
     ]
   },
-  "gitHead": "c6b2e1a65b1a0f65c52819929344602708212a59",
+  "gitHead": "633f95bec79fb65524a7bcae867448b351920831",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

package/react/README.md

@@ -100,12 +100,12 @@ Some **markdown** description, or whatever you want.
 
 Storybook Docs renders all React stories inline by default.
 
-However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
+However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
 
 To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-export const parameters = { docs: { inlineStories: false } };
+export const parameters = { docs: { story: { inline: false } } };
 ```
 
 ## TypeScript props with `react-docgen`

package/vue/README.md

@@ -135,12 +135,12 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
 
 Storybook Docs renders all Vue stories inline by default.
 
-However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
+However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
 
 To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-export const parameters = { docs: { inlineStories: false } };
+export const parameters = { docs: { story: { inline: false } } };
 ```
 
 ## More resources

package/web-components/README.md

@@ -114,12 +114,12 @@ For a full example see the [web-components-kitchen-sink/custom-elements.json](..
 
 Storybook Docs renders all web components stories inline by default.
 
-However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
+However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
 
 To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-export const parameters = { docs: { inlineStories: false } };
+export const parameters = { docs: { story: { inline: false } } };
 ```
 
 ## More resources