⚡ ad storybook

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.ts'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-notes'],
+};

.storybook/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": [
+      "node"
+    ]
+  },
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "../projects/**/*"
+  ],
+  "files": [
+    "./typings.d.ts"
+  ]
+}

.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

package.json

@@ -13,7 +13,9 @@
     "test": "ng test --code-coverage --single-run",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "trans": "ng xi18n --output-path=src/locale --i18n-locale=fr"
+    "trans": "ng xi18n --output-path=src/locale --i18n-locale=fr",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "private": false,
   "dependencies": {
@@ -53,9 +55,16 @@
     "@angular/cli": "~9.0.1",
     "@angular/compiler-cli": "^9.0.0",
     "@angular/language-service": "~9.0.0",
+    "@babel/core": "^7.8.4",
+    "@storybook/addon-actions": "^5.3.13",
+    "@storybook/addon-links": "^5.3.13",
+    "@storybook/addon-notes": "^5.3.13",
+    "@storybook/addons": "^5.3.13",
+    "@storybook/angular": "^5.3.13",
     "@types/jasmine": "~3.5.3",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^12.11.1",
+    "babel-loader": "^8.0.6",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",

src/stories/0-Welcome.stories.ts

@@ -0,0 +1,15 @@
+import { Welcome } from '@storybook/angular/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  component: Welcome,
+  props: {},
+});
+
+ToStorybook.story = {
+  name: 'to Storybook',
+};

src/stories/1-Button.stories.ts

@@ -0,0 +1,52 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button } from '@storybook/angular/demo';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => ({
+  component: Button,
+  props: {
+    text: 'Hello Button',
+  },
+});
+
+export const Emoji = () => ({
+  component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+  },
+});
+
+Emoji.story = {
+  parameters: { notes: 'My notes on a button with emojis' },
+};
+
+export const WithSomeEmojiAndAction = () => ({
+  component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+    onClick: action('This was clicked OMG'),
+  },
+});
+
+WithSomeEmojiAndAction.story = {
+  name: 'with some emoji and action',
+  parameters: { notes: 'My notes on a button with emojis' },
+};
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+    onClick: linkTo('Welcome'),
+  },
+});
+
+ButtonWithLinkToAnotherStory.story = {
+  name: 'button with link to another story',
+};

tsconfig.app.json

@@ -1,23 +1,24 @@
 {
-    "extends": "./tsconfig.json",
+  "extends": "./tsconfig.json",
-    "compilerOptions": {
+  "compilerOptions": {
-        "outDir": "./out-tsc/app",
+    "outDir": "./out-tsc/app",
-        "types": [
+    "types": [
-            "node"
+      "node"
-        ],
-        "typeRoots": [
-            "./node_modules/@types"
-        ]
-    },
-    "files": [
-        "src/main.ts",
-        "src/polyfills.ts"
     ],
-    "include": [
+    "typeRoots": [
-        "src/**/*.d.ts"
+      "./node_modules/@types"
-    ],
-    "exclude": [
-        "src/test.ts",
-        "src/**/*.spec.ts"
     ]
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "exclude": [
+    "src/test.ts",
+    "src/**/*.spec.ts",
+    "**/*.stories.ts"
+  ]
 }