@storybook/addon-docs 5.3.14 → 5.3.19

package/README.md

@@ -92,7 +92,15 @@ Storybook Docs supports all view layers that Storybook supports except for React
 
 Want to add enhanced features to your favorite framework? Check out this [dev guide](./docs/multiframework.md)
 
-## Installation
+## Framework specific installation needs
+
+- [React](./react) (covered below)
+- [Vue](./vue)
+- [Angular](./angular)
+- [Ember](./ember)
+- [Web Components](./web-components)
+
+## Installation in React
 
 First add the package. Make sure that the versions for your `@storybook/*` packages match:
 
@@ -129,14 +137,6 @@ Add the following to your Jest configuration:
 }
 ```
 
-### Be sure to check framework specific installation needs
-
-- [React](./react) (covered here)
-- [Vue](./vue)
-- [Angular](./angular)
-- [Ember](./ember)
-- [Web Components](./web-components)
-
 ## Preset options
 
 The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
@@ -162,7 +162,7 @@ The `configureJSX` option is useful when you're writing your docs in MDX and you
 
 ## Manual configuration
 
-If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
+We recommend using the preset, which should work out of the box. If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
 
 ```js
 const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
@@ -206,7 +206,7 @@ module.exports = {
 };
 ```
 
-Finally, you'll need to set up DocsPage in `.storybook/preview.js`:
+You'll also need to set up the docs parameter in `.storybook/preview.js`. This includes the `DocsPage` for rendering the page, a container, and various configuration options, such as `extractComponentDescription` for manually extracting a component description:
 
 ```js
 import { addParameters } from '@storybook/react';

package/angular/README.md

@@ -101,7 +101,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```ts
 module.exports = {
-  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+  stories: ['../src/stories/**/*.stories.(js|ts|mdx)'],
 };
 ```
 
@@ -131,6 +131,49 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
 
 Also, to use the `Props` doc block, you need to set up Compodoc, [as described above](#docspage).
 
+When you are using `template`, `moduleMetadata` and/or `addDecorators` with `storiesOf` then you can easily translate your story to MDX, too:
+
+```md
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { CheckboxComponent, RadioButtonComponent } from './my-components';
+import { moduleMetadata } from '@storybook/angular';
+
+<Meta title='Checkbox' decorators={[
+  moduleMetadata({
+    declarations: [CheckboxComponent]
+  })
+]} />
+
+# Basic Checkbox
+
+<Story name='basic check' height='400px'>{{
+  template: `
+    <div class="some-wrapper-with-padding">
+      <my-checkbox [checked]="checked">Some Checkbox</my-checkbox>
+    </div>
+  `,
+  props: {
+    checked: true
+  }
+}}</Story>
+
+# Basic Radiobutton
+
+<Story name='basic radio' height='400px'>{{
+  moduleMetadata: {
+    declarations: [RadioButtonComponent]
+  }
+  template: `
+    <div class="some-wrapper-with-padding">
+      <my-radio-btn [checked]="checked">Some Checkbox</my-radio-btn>
+    </div>
+  `,
+  props: {
+    checked: true
+  }
+}}</Story>
+```
+
 ## IFrame height
 
 Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`.

package/dist/frameworks/common/preset.js

@@ -20,6 +20,10 @@ require("core-js/modules/es.object.assign");
 
 require("core-js/modules/es.object.to-string");
 
+require("core-js/modules/es.regexp.constructor");
+
+require("core-js/modules/es.regexp.exec");
+
 require("core-js/modules/es.regexp.to-string");
 
 require("core-js/modules/es.string.iterator");
@@ -35,6 +39,8 @@ exports.config = config;
 
 var _mdxCompilerPlugin = _interopRequireDefault(require("@storybook/addon-docs/mdx-compiler-plugin"));
 
+var _path = _interopRequireDefault(require("path"));
+
 var _remarkSlug = _interopRequireDefault(require("remark-slug"));
 
 var _remarkExternalLinks = _interopRequireDefault(require("remark-external-links"));
@@ -91,7 +97,7 @@ function webpack() {
     module: Object.assign({}, module, {
       rules: [].concat(_toConsumableArray(module.rules || []), [{
         test: /\.js$/,
-        include: /node_modules\/acorn-jsx/,
+        include: new RegExp("node_modules\\".concat(_path["default"].sep, "acorn-jsx")),
         use: [{
           loader: 'babel-loader',
           options: {

package/jest-transform-mdx.js

@@ -7,20 +7,6 @@ const createCompiler = require('./mdx-compiler-plugin');
 
 const compilers = [createCompiler({})];
 
-const getNextTransformer = (filename, config) => {
-  const extension = path.extname(filename);
-  const jsFileName = `${filename.slice(0, -extension.length)}.js`;
-  const self = config.transform.find(([pattern]) => new RegExp(pattern).test(filename));
-  const jsTransforms = config.transform.filter(([pattern]) => new RegExp(pattern).test(jsFileName));
-  return new ScriptTransformer({
-    ...config,
-    transform: [
-      ...config.transform.filter(entry => entry !== self),
-      ...jsTransforms.map(([pattern, ...rest]) => [self[0], ...rest]),
-    ],
-  });
-};
-
 module.exports = {
   process(src, filename, config, { instrument }) {
     const result = dedent`
@@ -29,6 +15,10 @@ module.exports = {
       import { mdx } from '@mdx-js/react'
       ${mdx.sync(src, { compilers, filepath: filename })}
     `;
-    return getNextTransformer(filename, config).transformSource(filename, result, instrument);
+
+    const extension = path.extname(filename);
+    const jsFileName = `${filename.slice(0, -extension.length)}.js`;
+
+    return new ScriptTransformer(config).transformSource(jsFileName, result, instrument);
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "5.3.14",
+  "version": "5.3.19",
   "description": "Superior documentation for your components",
   "keywords": [
     "addon",
@@ -46,14 +46,14 @@
     "@mdx-js/loader": "^1.5.1",
     "@mdx-js/mdx": "^1.5.1",
     "@mdx-js/react": "^1.5.1",
-    "@storybook/addons": "5.3.14",
-    "@storybook/api": "5.3.14",
-    "@storybook/components": "5.3.14",
-    "@storybook/core-events": "5.3.14",
+    "@storybook/addons": "5.3.19",
+    "@storybook/api": "5.3.19",
+    "@storybook/components": "5.3.19",
+    "@storybook/core-events": "5.3.19",
     "@storybook/csf": "0.0.1",
-    "@storybook/postinstall": "5.3.14",
-    "@storybook/source-loader": "5.3.14",
-    "@storybook/theming": "5.3.14",
+    "@storybook/postinstall": "5.3.19",
+    "@storybook/source-loader": "5.3.19",
+    "@storybook/theming": "5.3.19",
     "acorn": "^7.1.0",
     "acorn-jsx": "^5.1.0",
     "acorn-walk": "^7.0.0",
@@ -89,7 +89,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "91d9c0c4e0afd7e494b23ec8076b21e45b7a8906",
+  "gitHead": "e26136f29d99fdcec82a25689f0f7a10ef418fe1",
   "typesVersions": {
     "<=3.5": {
       "*": [