@storybook/addon-docs 5.3.17 → 5.3.21

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:

package/angular/README.md

@@ -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"));
@@ -55,11 +61,15 @@ function createBabelOptions(babelOptions, configureJSX) {
   }
 
   var babelPlugins = babelOptions && babelOptions.plugins || [];
+  var jsxPlugin = ['@babel/plugin-transform-react-jsx', {
+    pragma: 'React.createElement',
+    pragmaFrag: 'React.Fragment'
+  }];
   return Object.assign({}, babelOptions, {
     // for frameworks that are not working with react, we need to configure
     // the jsx to transpile mdx, for now there will be a flag for that
     // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
-    plugins: [].concat(_toConsumableArray(babelPlugins), ['@babel/plugin-transform-react-jsx'])
+    plugins: [].concat(_toConsumableArray(babelPlugins), [jsxPlugin])
   });
 }
 
@@ -72,7 +82,7 @@ function webpack() {
 
   var babelOptions = options.babelOptions,
       _options$configureJSX = options.configureJSX,
-      configureJSX = _options$configureJSX === void 0 ? options.framework !== 'react' : _options$configureJSX,
+      configureJSX = _options$configureJSX === void 0 ? true : _options$configureJSX,
       _options$sourceLoader = options.sourceLoaderOptions,
       sourceLoaderOptions = _options$sourceLoader === void 0 ? {} : _options$sourceLoader;
   var mdxLoaderOptions = {
@@ -91,7 +101,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.17",
+  "version": "5.3.21",
   "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.17",
-    "@storybook/api": "5.3.17",
-    "@storybook/components": "5.3.17",
-    "@storybook/core-events": "5.3.17",
+    "@storybook/addons": "5.3.21",
+    "@storybook/api": "5.3.21",
+    "@storybook/components": "5.3.21",
+    "@storybook/core-events": "5.3.21",
     "@storybook/csf": "0.0.1",
-    "@storybook/postinstall": "5.3.17",
-    "@storybook/source-loader": "5.3.17",
-    "@storybook/theming": "5.3.17",
+    "@storybook/postinstall": "5.3.21",
+    "@storybook/source-loader": "5.3.21",
+    "@storybook/theming": "5.3.21",
     "acorn": "^7.1.0",
     "acorn-jsx": "^5.1.0",
     "acorn-walk": "^7.0.0",
@@ -89,7 +89,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44e01ff253bb6c7de588d49659392f7bbdf4ad95",
+  "gitHead": "a939e7204a448e9d24e5431f1c9dba8dd7ec05e9",
   "typesVersions": {
     "<=3.5": {
       "*": [

package/vue/README.md

@@ -19,7 +19,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 First add the package. Make sure that the versions for your `@storybook/*` packages match:
 
 ```sh
-yarn add -D @storybook/addon-docs@next
+yarn add -D @storybook/addon-docs
 ```
 
 Then add the following to your `.storybook/main.js` addons: