Install storybook package and make stories.ts file for button and button2

Author: Annie-Huang

.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';

.storybook/config.js

@@ -0,0 +1,10 @@
+import { configure } from '@storybook/angular';
+
+// automatically import all files ending in *.stories.ts
+// const req = require.context('../src/stories', true, /.stories.ts$/);
+const req = require.context('../src/app/stories', true, /.stories.ts$/);
+function loadStories() {
+    req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

Note.txt

@@ -5,6 +5,10 @@ https://stackoverflow.com/questions/46087105/angular-aot-compilation-ng-vs-ngc
 https://stackoverflow.com/questions/44642696/whats-the-relationship-and-difference-between-ng-build-and-ngc
 http://www.gistia.com/angular-performance-two-strategies/
 https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
+https://www.learnstorybook.com/
+https://github.com/storybooks/storybook/issues/125
+https://github.com/storybooks/storybook/issues/4481
+D:\Temp\Test\car-show>npx -p @storybook/cli sb init
 
 
 How to create a component:

package-lock.json

@@ -9,6 +9,10 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
+    "storybook1": "start-storybook -p 9001 -c .storybook",
+    "storybook": "start-storybook -p 6006",
+    "storybook2": "start-storybook -s ./public,./static -p 6006",
+    "build-storybook": "build-storybook",
     "build-components": "ngc -p tsconfig-release.json",
     "build-assets": "gulp build-assets",
     "build-exports": "gulp build-exports",
@@ -30,9 +34,16 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
+    "@babel/core": "^7.2.0",
+    "@storybook/addon-actions": "^4.0.12",
+    "@storybook/addon-links": "^4.0.12",
+    "@storybook/addon-notes": "^4.0.12",
+    "@storybook/addons": "^4.0.12",
+    "@storybook/angular": "^4.0.12",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
+    "@types/node": "^8.9.5",
+    "babel-loader": "^8.0.4",
     "chart.js": "2.7.3",
     "codelyzer": "~4.5.0",
     "core-js": "^2.5.4",

package.json

@@ -0,0 +1,46 @@
+import { storiesOf } from '@storybook/angular';
+import { withNotes } from '@storybook/addon-notes';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Welcome, Button } from '@storybook/angular/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => ({
+  component: Welcome,
+  props: {},
+}));
+
+// storiesOf('Button', module)
+//   .add('with text', () => ({
+//     component: Button,
+//     props: {
+//       text: 'Hello Button',
+//     },
+//   }))
+//   .add(
+//     'with some emoji',
+//     withNotes({ text: 'My notes on a button with emojis' })(() => ({
+//       component: Button,
+//       props: {
+//         text: '😀 😎 👍 💯',
+//       },
+//     }))
+//   )
+//   .add(
+//     'with some emoji and action',
+//     withNotes({ text: 'My notes on a button with emojis' })(() => ({
+//       component: Button,
+//       props: {
+//         text: '😀 😎 👍 💯',
+//         onClick: action('This was clicked OMG'),
+//       },
+//     }))
+//   );
+//
+// storiesOf('Another Button', module).add('button with link to another story', () => ({
+//   component: Button,
+//   props: {
+//     text: 'Go to Welcome Story',
+//     onClick: linkTo('Welcome'),
+//   },
+// }));

src/app/stories/_storybook.welcome.stories.ts

@@ -0,0 +1,20 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { withNotes } from '@storybook/addon-notes';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import {Button} from '../components/button2/button';
+
+storiesOf('Button', module)
+    .add('Button', () => {
+        return {
+            template: `
+                <button class="ea-button">Annie Test</button>
+            `,
+            props: {
+                // task,
+                // onPinTask: actions.onPinTask,
+                // onArchiveTask: actions.onArchiveTask,
+            },
+        };
+    });

src/app/stories/button.stories.ts

@@ -0,0 +1,33 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { withNotes } from '@storybook/addon-notes';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import {Button} from '../components/button2/button';
+// import '../../assets/components/themes/nova-light/theme.css';
+// import '../src/assets/components/themes/nova-light/theme.css';
+// import '../src/assets/components/themes/nova-light/fonts/open-sans-v15-latin-regular.woff2';
+
+storiesOf('Button2', module)
+    .addDecorator(
+        moduleMetadata({
+            declarations: [Button],
+        }),
+    )
+    .add('Button2', () => {
+        return {
+            template: `
+                <link id="theme-css" rel="stylesheet" type="text/css" href="assets/components/themes/nova-light/theme.css">
+                <p-button label="Click"></p-button>
+                <p-button icon="pi pi-check" label="Click"></p-button>
+                <p-button icon="pi pi-check" iconPos="right" label="Click"></p-button>
+                <p-button icon="pi pi-check"></p-button>
+                <p-button icon="pi pi-check" [disabled]="true" label="Disabled"></p-button>
+            `,
+            props: {
+                // task,
+                // onPinTask: actions.onPinTask,
+                // onArchiveTask: actions.onArchiveTask,
+            },
+        };
+    });

src/app/stories/button2.stories.ts

@@ -6,6 +6,7 @@
     },
     "exclude": [
         "src/test.ts",
-        "**/*.spec.ts"
+        "**/*.spec.ts",
+        "**/*.stories.ts"
     ]
 }