Storybook Init (#349)

* Storybook POC

* fix lint

* Add script and boilerplate stories

* fix lint

* Setup storybook for all components

* fix lint

* Build and deploy storybook to github page

* add temp label

* branding

* setup env

* rm hack

* rm documentation

* gitignore docs

* update readme

.github/workflows/storybook.yml

@@ -0,0 +1,30 @@
+name: Build and Deploy Storybook to Github Page
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy-storybook:
+    runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.13
+      - name: Install dependency
+        run: npm i
+      - name: Build storybook
+        run: npm run build-storybook
+      - name: Deploy to github page
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: storybook-static

.gitignore

@@ -67,3 +67,5 @@ cypress/screenshots
 .nyc_output/
 cypress/coverage/*
 !cypress/coverage/coverage-summary.json
+storybook-static/
+documentation.json

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/angular";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ['../src/assets']
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,26 @@
+import { type Preview } from "@storybook/angular";
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+import '!style-loader!css-loader!sass-loader!../src/styles.scss';
+
+
+const preview: Preview = {
+  decorators: [
+    (Story: any, context: any) => {
+      document.documentElement.setAttribute('data-theme', 'fyle');
+      return Story(context);
+    },
+  ],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/tsconfig.json

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

.storybook/typings.d.ts

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

README.md

@@ -8,8 +8,8 @@ required for running Integration setting app
 required based on the your needs
 [qbd-api](https://github.com/fylein/fyle-qbd-api) while working in QBD
 
-## Documentation
-Please refer this link to find the [documentation](https://fylein.github.io/fyle-integrations-app) of the project.
+## Storybook
+Please refer this link to find the [storybook](https://fylein.github.io/fyle-integrations-app/) of the project.
 
 ## Local development setup
 ### Setup - 1 (Recommended)

angular.json

@@ -110,6 +110,52 @@
               "src/**/*.html"
             ]
           }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "fyle-integrations-app:build",
+            "compodoc": true,
+            "styles": [
+              "src/styles.scss",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css"
+            ],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "styles": [
+              "src/styles.scss",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css"
+            ],
+            "configDir": ".storybook",
+            "browserTarget": "fyle-integrations-app:build",
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "outputDir": "storybook-static"
+          }
         }
       }
     }
@@ -120,4 +166,4 @@
     ],
     "analytics": false
   }
-}
+}