Angular-cli: Add addon-docs example (#7257)

Angular-cli: Add addon-docs example

addons/docs/angular/index.js

@@ -0,0 +1 @@
+module.exports = require('../common/index');

addons/docs/angular/preset.js

@@ -0,0 +1 @@
+module.exports = require('../common/preset');

examples/angular-cli/.storybook/config.ts

@@ -1,6 +1,6 @@
-/* eslint-disable global-require */
-import { configure, addParameters, addDecorator } from '@storybook/angular';
+import { load, addParameters, addDecorator } from '@storybook/angular';
 import { withA11y } from '@storybook/addon-a11y';
+import { DocsPage } from '@storybook/addon-docs/blocks';
 import addCssWarning from '../src/cssWarning';
 
 addDecorator(withA11y);
@@ -9,16 +9,12 @@ addCssWarning();
 addParameters({
   options: {
     hierarchyRootSeparator: /\|/,
+    docs: {
+      iframeHeight: '60px',
+    },
   },
+  docs: DocsPage,
 });
 
-function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  require('../src/stories');
-
-  // automatically import all story ts files that end with *.stories.ts
-  const req = require.context('../src/stories', true, /\.stories\.ts$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.ts$/), module);
+load(require.context('../src/stories', true, /\.stories\.mdx$/), module);

examples/angular-cli/.storybook/presets.js

@@ -0,0 +1,8 @@
+module.exports = [
+  {
+    name: '@storybook/addon-docs/angular/preset',
+    options: {
+      configureJSX: true,
+    },
+  },
+];

examples/angular-cli/package.json

@@ -41,12 +41,14 @@
     "@storybook/addon-jest": "5.2.0-alpha.36",
     "@storybook/addon-knobs": "5.2.0-alpha.36",
     "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-docs": "5.2.0-alpha.36",
     "@storybook/addon-notes": "5.2.0-alpha.36",
     "@storybook/addon-options": "5.2.0-alpha.36",
     "@storybook/addon-storyshots": "5.2.0-alpha.36",
     "@storybook/addon-storysource": "5.2.0-alpha.36",
     "@storybook/addons": "5.2.0-alpha.36",
     "@storybook/angular": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "@types/core-js": "^2.5.0",
     "@types/jest": "^24.0.11",
     "@types/node": "~12.0.2",

examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot

@@ -7,10 +7,10 @@ exports[`Storyshots Addon|Actions Action and method 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c4=""
+    _nghost-a-c1=""
   >
     <button
-      _ngcontent-a-c4=""
+      _ngcontent-a-c1=""
     >
       Action and Method
     </button>
@@ -25,10 +25,10 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c3=""
+    _nghost-a-c0=""
   >
     <button
-      _ngcontent-a-c3=""
+      _ngcontent-a-c0=""
     >
       Action only
     </button>

examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot

@@ -72,11 +72,11 @@ exports[`Storyshots Addon|Background background template 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c5=""
+      _nghost-a-c2=""
       ng-reflect-text="Hello Button"
     >
       <button
-        _ngcontent-a-c5=""
+        _ngcontent-a-c2=""
       >
         Hello Button
       </button>

examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot

@@ -92,11 +92,11 @@ exports[`Storyshots Addon|Centered centered template 1`] = `
         style="margin: auto; max-height: 100%;"
       >
         <storybook-button-component
-          _nghost-a-c6=""
+          _nghost-a-c3=""
           ng-reflect-text="Hello Button"
         >
           <button
-            _ngcontent-a-c6=""
+            _ngcontent-a-c3=""
           >
             Hello Button
           </button>

examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot

@@ -7,10 +7,10 @@ exports[`Storyshots Addon|Links button with link to another story 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c7=""
+    _nghost-a-c4=""
   >
     <button
-      _ngcontent-a-c7=""
+      _ngcontent-a-c4=""
     >
       Go to Welcome Story
     </button>

examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot

@@ -7,10 +7,10 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c9=""
+    _nghost-a-c6=""
   >
     <button
-      _ngcontent-a-c9=""
+      _ngcontent-a-c6=""
     >
       Notes with HTML
     </button>
@@ -25,10 +25,10 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c8=""
+    _nghost-a-c5=""
   >
     <button
-      _ngcontent-a-c8=""
+      _ngcontent-a-c5=""
     >
       Notes on some Button
     </button>

examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot

@@ -7,12 +7,12 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c10=""
+    _nghost-a-c7=""
   >
     <button
-      _ngcontent-a-c10=""
+      _ngcontent-a-c7=""
     >
-      Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+      Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
     </button>
   </storybook-button-component>
 </storybook-dynamic-app-root>

examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot

@@ -8,11 +8,11 @@ exports[`Storyshots Custom|Style Default 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c11=""
+      _nghost-a-c8=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c11=""
+        _ngcontent-a-c8=""
       >
         Button with custom styles
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Custom|Style With Knobs 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c12=""
+      _nghost-a-c9=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c12=""
+        _ngcontent-a-c9=""
       >
         Button with custom styles
       </button>

examples/angular-cli/src/stories/__snapshots__/index.storyshot → examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot

@@ -8,11 +8,11 @@ exports[`Storyshots Button with some emoji 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c2=""
+      _nghost-a-c12=""
       ng-reflect-text="😀 😎 👍 💯"
     >
       <button
-        _ngcontent-a-c2=""
+        _ngcontent-a-c12=""
       >
         😀 😎 👍 💯
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Button with text 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c1=""
+      _nghost-a-c11=""
       ng-reflect-text="Hello Button"
     >
       <button
-        _ngcontent-a-c1=""
+        _ngcontent-a-c11=""
       >
         Hello Button
       </button>
@@ -50,98 +50,98 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 >
   <ng-component>
     <storybook-welcome-component
-      _nghost-a-c0=""
+      _nghost-a-c10=""
     >
       <main
-        _ngcontent-a-c0=""
+        _ngcontent-a-c10=""
       >
         <h1
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
           Welcome to storybook
         </h1>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
           This is a UI component dev environment for your app.
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
            We've added some basic stories inside the 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             src/stories
           </span>
            directory. 
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            A story is a single state of one or more UI components. You can have as many stories as you want. 
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            (Basically a story is like a visual test case.) 
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
            See these sample 
           <a
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             role="button"
             tabindex="0"
           >
             stories
           </a>
            for a component called 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             Button
           </span>
            . 
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
            Just like that, you can add your own components as stories. 
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            You can also edit those components and see changes right away. 
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            (Try editing the 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             Button
           </span>
            stories located at 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             src/stories/index.js
           </span>
           .) 
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
            Usually we create stories with smaller UI components in the app.
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            Have a look at the 
           <a
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             href="https://storybook.js.org/basics/writing-stories"
             rel="noopener noreferrer"
             target="_blank"
@@ -151,20 +151,20 @@ exports[`Storyshots Welcome to Storybook 1`] = `
            section in our documentation. 
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
           class="note"
         >
           <b
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           >
             NOTE:
           </b>
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            Have a look at the 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             .storybook/webpack.config.js