Integrating Storybook with an initial dummy ICP component setup (#1)

.eslintrc.json

@@ -8,7 +8,8 @@
     "plugin:react/recommended",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier"
+    "prettier",
+    "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

.github/workflows/ci-cd.yaml

@@ -73,167 +73,30 @@ jobs:
         run: yarn install
       - name: Code style check
         run: yarn prettier --ignore-path .gitignore . --check
-      - name: ESLint
-        run: yarn eslint .
 
-  lighthouse:
-    if: github.ref != 'refs/heads/master'
+  documentation-ci-cd:
+    name: Test and Deploy Storybook to GitHub Pages
     needs: [yaml-lint, markdown-lint, linkChecker, code-style]
-    permissions:
-      pull-requests: write
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - run: cp .env.test .env && yarn
-
-      - name: Audit URLs using Lighthouse
-        id: lighthouse_audit
-        uses: treosh/lighthouse-ci-action@v10
-        with:
-          urls: |
-            http://localhost:3000
-          uploadArtifacts: true
-          temporaryPublicStorage: true
-          budgetPath: ./.github/lighthouse/lighthouse-budget.json
-          configPath: ./.github/lighthouse/lighthouserc.json
-
-      - name: Format lighthouse score
-        id: format_lighthouse_score
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea #  7.0.1
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const results = ${{ steps.lighthouse_audit.outputs.manifest }}
-            const links = ${{ steps.lighthouse_audit.outputs.links }}
-            const createLighthouseReport = (await import(`${process.env.GITHUB_WORKSPACE}/.github/lighthouse/formatLighthouseReport.js`)).default;
-            const comment = createLighthouseReport({ results, links });
-            core.setOutput("comment", comment);
-
-      - name: Add Lighthouse stats as comment
-        id: comment_to_pr
-        uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd #  2.8.0
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ github.event.pull_request.number }}
-          header: lighthouse
-          message: ${{ steps.format_lighthouse_score.outputs.comment }}
-
-  unit-tests:
-    name: Unit Tests
-    needs: [yaml-lint, markdown-lint, linkChecker, code-style]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Set node version to ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-      - name: Install dependencies
-        run: yarn install
-      - name: Run unit tests
-        run: yarn test
-
-  list-e2e-specs:
-    needs: unit-tests
-    name: Enumerate E2E tests and prepare to run them in parallel
-    runs-on: ubuntu-latest
-    outputs:
-      paths: ${{ steps.list-e2e-specs.outputs.paths }}
-    steps:
-      - name: List Files
-        id: list-e2e-specs
-        uses: mirko-felice/[email protected]
-        with:
-          repo: ${{ github.repository }}
-          ref: ${{ github.ref }}
-          path: "cypress/e2e"
-          ext: ".ts"
-
-  e2e-tests:
-    name: E2E Tests
-    needs: list-e2e-specs
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        test_spec: ${{ fromJson(needs.list-e2e-specs.outputs.paths) }}
-        mode: ["dev", "prod"]
-        node_version: [18]
-    steps:
-      - uses: actions/checkout@v3
-      - name: Set node version to ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: Install dependencies
-        run: npm install -g [email protected] && yarn
-      - name: Load test .env file
-        run: mv .env.test .env
-      - name: Start app in ${{ matrix.mode }} mode
-        run: |
-          npm install -g wait-on
-
-          if [[ ${{ matrix.mode }} == 'dev' ]]; then
-              yarn start &
-          else
-              yarn build
-              npm install -g serve
-              serve -s dist -l 3000 &
-          fi
-      - name: Wait until app is up and running
-        run: wait-on http://127.0.0.1:3000
-      - name: Run E2E tests
-        run: yarn e2e --spec "${{ matrix.test_spec }}"
-        env:
-          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-      - id: extract-spec-filename
-        if: failure()
-        run: |
-          id=$(echo "${{ matrix.test_spec }}" | sed s:/:_:g)
-          echo "::set-output name=id::$id"
-      - name: Upload test videos and screenshots on test failure
-        if: failure()
-        uses: actions/upload-artifact@v3
-        with:
-          name: ${{ matrix.mode }}-${{steps.extract-spec-filename.outputs.id}}-${{ env.NODE_VERSION }}
-          path: |
-            ./cypress/videos
-            ./cypress/screenshots
-
-  documentation-ci-cd:
-    name: Test and Deploy Documentation to GitHub Pages
-    needs: e2e-tests
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: docs
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-      - name: Install nexusgraph dependencies so that TypeDoc process source files properly
-        run: cd ../ && yarn install
-        env:
-          YARN_ENABLE_IMMUTABLE_INSTALLS: false
-      - name: Install doc dependencies
         run: yarn install
         env:
           YARN_ENABLE_IMMUTABLE_INSTALLS: false
-      - name: Build documentation
-        run: yarn build
+      - name: Build Storybook
+        run: yarn build-storybook
       - name: Load CNAME
-        run: echo fastui.qubitpi.org > build/CNAME
+        run: echo ui.paion-data.com > storybook-static/CNAME
       - name: Deploy to GitHub Pages
         if: github.ref == 'refs/heads/master'
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./docs/build
+          publish_dir: ./storybook-static
           enable_jekyll: false
           user_name: ${{ env.USER }}
           user_email: ${{ env.EMAIL }}

.gitignore

@@ -41,3 +41,6 @@ docs/.yarn/
 /cypress/downloads/
 
 /cypress/screenshots
+
+*storybook.log
+storybook-static/

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -1,51 +1,36 @@
-# FastUI
+# Paion Data React Components
 
+[![Storybook][Storybook Badge]](https://ui.paion-data.com/)
 ![Node Version Badge]
 [![GitHub Workflow Status]][GitHub Workflow URL]
 [![Apache License Badge]][Apache License, Version 2.0]
 
-**FastUI** is a TypeScript React+Webpack web app template that lets us spin up frontend project quickly through
-[GitHub templates]. One can think of it as the monorepo version of Facebooks's [Create React App] but with intense focus
-and improvements on software CI/CD, such as automated testing. At the end of the day, FastUI helps organization
-to improve the velocity and quality of their teams' work.
+This project is a [Storybook](https://storybook.js.org/) containing a library of react components that are shared between multiple Paion Data web
+properties.
 
-> [!NOTE]
->
-> Unlike Create React App's [eject mechanism](https://create-react-app.dev/docs/available-scripts#npm-run-eject), FastUI gives developer **total control of every aspect of frontend
-> development**; all configs are surfaced and directly tunable, such as Jest Babel configs, without "ejecting" or
-> dependence on external config library.
+## Development
 
-## ✨ Features
+### Getting Source Code
 
-- Start of the art project manager [![Yarn 2](https://img.shields.io/badge/Yarn%202-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white)](https://yarnpkg.com/)
-- Fully automated CI/CD [![GH Action](https://img.shields.io/badge/GitHub%20Action-2088FF?style=for-the-badge&logo=githubactions&logoColor=white)](https://github.com/features/actions)
+```console
+git clone [email protected]:paion-data/react-components.git
+cd react-components
+```
 
-  - Code style checks
+### Available Scripts
 
-    - React & TypeScript [![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/) [![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=white)](https://prettier.io/)
-    - YAML & Markdown
-
-  - Fully automated tests coming out of the box
-
-    - Unit & End-to-End Tests [![Jest](https://img.shields.io/badge/Jest%20Unit%20Tests-C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jest.qubitpi.org/) [![Cypress](https://img.shields.io/badge/Cypress%20E2E-69D3A7?style=for-the-badge&logo=cypress&logoColor=white)](https://cypress.qubitpi.org)
-    - Performance Tests [![Lighthouse](https://img.shields.io/badge/Lighthouse-F44B21?style=for-the-badge&logo=lighthouse&logoColor=white)](https://developer.chrome.com/docs/lighthouse/overview)
-
-      ![](https://github.com/QubitPi/fast-ui/blob/master/docs/docs/img/lighthouse-report-example.png?raw=true)
-
-    - UI Snapshot Tests [![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://app.argos-ci.com/qubitpi/fast-ui/reference)
-
-      ![](https://github.com/QubitPi/fast-ui/blob/master/docs/docs/img/argos-example.png?raw=true)
-
-- Auto-generated documentations [![TypeDoc](https://img.shields.io/badge/TypeDoc-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://fastui.qubitpi.org/api/)
+- Starting Storybook locally: `yarn storybook`
+- Building Storybook: `yarn build-storybook`. The production deployable will be generated in `./storybook-static`
 
 ## License
 
-The use and distribution terms for [FastUI]() are covered by the [Apache License, Version 2.0]
+The use and distribution terms for [react-components]() are covered by the [Apache License, Version 2.0]
 
 [Apache License Badge]: https://img.shields.io/badge/Apache%202.0-F25910.svg?style=for-the-badge&logo=Apache&logoColor=white
 [Apache License, Version 2.0]: https://www.apache.org/licenses/LICENSE-2.0
 [Create React App]: https://create-react-app.dev/
 [GitHub templates]: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository#about-template-repositories
-[GitHub Workflow Status]: https://img.shields.io/github/actions/workflow/status/QubitPi/fast-ui/ci-cd.yaml?branch=master&logo=github&style=for-the-badge
-[GitHub Workflow URL]: https://github.com/QubitPi/fast-ui/actions/workflows/ci-cd.yaml
+[GitHub Workflow Status]: https://img.shields.io/github/actions/workflow/status/paion-data/react-components/ci-cd.yaml?branch=master&logo=github&style=for-the-badge
+[GitHub Workflow URL]: https://github.com/paion-data/react-components/actions/workflows/ci-cd.yaml
 [Node Version Badge]: https://img.shields.io/badge/NODE-18-339933?logo=Node.js&logoColor=white&labelColor=66cc33&style=for-the-badge
+[Storybook Badge]: https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white&style=for-the-badge