storybook is added

.storybook/main.js

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

.storybook/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.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

@@ -98,7 +98,9 @@
     "publish:ui-skin-default": "cd ./dist/ui-skin-default && npm publish",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "tslib": "^1.10.0"
@@ -121,11 +123,17 @@
     "@angular/platform-browser": "^9.0.6",
     "@angular/platform-browser-dynamic": "^9.0.6",
     "@angular/router": "^9.0.6",
+    "@babel/core": "^7.9.0",
     "@ngrx/effects": "^9.0.0",
     "@ngrx/entity": "^9.0.0",
     "@ngrx/router-store": "^9.0.0",
     "@ngrx/store": "^9.0.0",
     "@ngrx/store-devtools": "^9.0.0",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addon-notes": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/angular": "^5.3.18",
     "@types/jasmine": "^3.5.9",
     "@types/jasminewd2": "~2.0.3",
     "@types/moment-timezone": "^0.5.12",
@@ -198,6 +206,7 @@
     "@ucap/web-storage": "~0.0.5",
     "autolinker": "^3.13.0",
     "axios": "^0.19.2",
+    "babel-loader": "^8.1.0",
     "codelyzer": "^5.2.1",
     "concurrently": "^5.1.0",
     "fs-extra": "^9.0.0",

projects/ui/src/lib/components/inline-edit-input.component.stories.ts

@@ -0,0 +1,16 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { InlineEditInputComponent } from './inline-edit-input.component';
+
+export default {
+  title: 'InlineEditInputComponent',
+  component: InlineEditInputComponent
+};
+
+export const Text = () => ({
+  component: InlineEditInputComponent,
+  props: {
+    text: 'Hello InlineEditInputComponent'
+  }
+});

projects/ui/src/lib/components/pick-time.component.stories.ts

@@ -0,0 +1,16 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { PickTimeComponent } from './pick-time.component';
+
+export default {
+  title: 'PickTimeComponent',
+  component: PickTimeComponent
+};
+
+export const Text = () => ({
+  component: PickTimeComponent,
+  props: {
+    text: 'Hello PickTimeComponent'
+  }
+});

projects/ui/src/lib/components/step-input.component.stories.ts

@@ -0,0 +1,16 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { StepInputComponent } from './step-input.component';
+
+export default {
+  title: 'StepInputComponent',
+  component: StepInputComponent
+};
+
+export const Text = () => ({
+  component: StepInputComponent,
+  props: {
+    text: 'Hello StepInputComponent'
+  }
+});

projects/ui/src/lib/components/title-bar.component.stories.ts

@@ -0,0 +1,16 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { TitleBarComponent } from './title-bar.component';
+
+export default {
+  title: 'TitleBarComponent',
+  component: TitleBarComponent
+};
+
+export const Text = () => ({
+  component: TitleBarComponent,
+  props: {
+    text: 'Hello TitleBarComponent'
+  }
+});

tsconfig.json

@@ -22,6 +22,7 @@
       "logger": ["dist/logger/logger", "dist/logger"]
     }
   },
+  "exclude": ["**/*.stories.ts"],
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true