Migrate Chromatic (#2906)

.github/workflows/chromatic.yml

@@ -28,14 +28,12 @@ jobs:
 
       - name: Install Node dependencies
         run: npm ci
-        working-directory: ./components
 
       - name: Publish to Chromatic
         uses: chromaui/action@c72f0b48c8887c0ef0abe18ad865a6c1e01e73c6
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: ./components
           exitOnceUploaded: true
           onlyChanged: true
           externals: "[\"components/**/*.scss\", \"components/tailwind.config*.js\"]"

.gitignore

@@ -2,3 +2,5 @@ node_modules/
 **/coverage/
 .github/workflows/act
 .DS_Store
+documentation.json
+dist

.storybook/main.js

@@ -1,5 +1,8 @@
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../libs/components/src/**/*.stories.mdx",
+    "../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

.storybook/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.app.json",
+  "extends": "../tsconfig",
   "compilerOptions": {
     "types": ["node"],
     "allowSyntheticDefaultImports": true

angular.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "apps",
+  "projects": {
+    "components": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "./libs/components",
+      "sourceRoot": "libs/components/src",
+      "prefix": "components",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/components",
+            "index": "libs/components/src/index.html",
+            "main": "libs/components/src/main.ts",
+            "polyfills": "libs/components/src/polyfills.ts",
+            "tsConfig": "libs/components/tsconfig.app.json",
+            "assets": ["libs/components/src/favicon.ico", "libs/components/src/assets"],
+            "styles": ["libs/components/src/styles.scss", "libs/components/src/styles.css"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["libs/components/src/styles"]
+            },
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "components:build:production"
+            },
+            "development": {
+              "browserTarget": "components:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "components:build"
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "components"
+}

libs/.github/workflows/build.yml

@@ -1,107 +0,0 @@
----
-name: Build
-
-on: push
-
-jobs:
-  cloc:
-    name: CLOC
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Set up cloc
-        run: |
-          sudo apt-get update
-          sudo apt-get -y install cloc
-
-      - name: Print lines of code
-        run: cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
-
-  build:
-    name: Build jslib
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [windows-2019, macos-10.15, ubuntu-20.04]
-
-    steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
-        with:
-          node-version: "16"
-
-      - name: Install node-gyp
-        run: |
-          npm install -g node-gyp
-          node-gyp install $(node -v)
-
-      - name: Print environment
-        run: |
-          node --version
-          npm --version
-
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Install Node dependencies
-        run: npm install
-
-      - name: Run linter
-        run: npm run lint
-
-      - name: Run tests
-        if: runner.os != 'Linux'
-        run: npm run test
-
-      - name: Upload test coverage artifact
-        if: runner.os != 'Linux'
-        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700
-        with:
-          name: test-coverage
-          path: coverage/
-
-  check-failures:
-    name: Check for failures
-    if: always()
-    runs-on: ubuntu-20.04
-    needs:
-      - cloc
-      - build
-    steps:
-      - name: Check if any job failed
-        if: ${{ (github.ref == 'refs/heads/master') || (github.ref == 'refs/heads/rc') }}
-        env:
-          CLOC_STATUS: ${{ needs.cloc.result }}
-          BUILD_STATUS: ${{ needs.build.result }}
-        run: |
-          if [ "$CLOC_STATUS" = "failure" ]; then
-              exit 1
-          elif [ "$BUILD_STATUS" = "failure" ]; then
-              exit 1
-          fi
-
-      - name: Login to Azure - Prod Subscription
-        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
-        if: failure()
-        with:
-          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
-
-      - name: Retrieve secrets
-        id: retrieve-secrets
-        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
-        if: failure()
-        with:
-          keyvault: "bitwarden-prod-kv"
-          secrets: "devops-alerts-slack-webhook-url"
-
-      - name: Notify Slack on failure
-        uses: act10ns/slack@e4e71685b9b239384b0f676a63c32367f59c2522 # v1.2.2
-        if: failure()
-        env:
-          SLACK_WEBHOOK_URL: ${{ steps.retrieve-secrets.outputs.devops-alerts-slack-webhook-url }}
-        with:
-          status: ${{ job.status }}

libs/components/tailwind.config.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 const config = require("./tailwind.config.base");
 
-config.content = ["./src/**/*.{html,ts,mdx}", "./.storybook/preview.js"];
+config.content = ["./libs/components/src/**/*.{html,ts,mdx}", "./.storybook/preview.js"];
 config.safelist = [
   {
     pattern: /tw-bg-(.*)/,

package-lock.json

@@ -7116,6 +7116,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@mdx-js/react": {
+      "version": "1.6.22",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
+      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0"
+      }
+    },
     "node_modules/@mdx-js/util": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz",
@@ -7653,19 +7666,6 @@
         }
       }
     },
-    "node_modules/@storybook/addon-docs/node_modules/@mdx-js/react": {
-      "version": "1.6.22",
-      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
-      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      },
-      "peerDependencies": {
-        "react": "^16.13.1 || ^17.0.0"
-      }
-    },
     "node_modules/@storybook/addon-essentials": {
       "version": "6.5.8",
       "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.8.tgz",
@@ -8140,20 +8140,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/@storybook/angular/node_modules/react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-      "dev": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/@storybook/angular/node_modules/react-dom": {
       "version": "16.14.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
@@ -38568,7 +38554,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
       "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -41872,20 +41857,6 @@
         "react": "^16.14.0 || ^17.0.0"
       }
     },
-    "node_modules/storybook-addon-designs/node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -51108,6 +51079,13 @@
         }
       }
     },
+    "@mdx-js/react": {
+      "version": "1.6.22",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
+      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
+      "dev": true,
+      "requires": {}
+    },
     "@mdx-js/util": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz",
@@ -51498,15 +51476,6 @@
         "remark-slug": "^6.0.0",
         "ts-dedent": "^2.0.0",
         "util-deprecate": "^1.0.2"
-      },
-      "dependencies": {
-        "@mdx-js/react": {
-          "version": "1.6.22",
-          "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
-          "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-          "dev": true,
-          "requires": {}
-        }
       }
     },
     "@storybook/addon-essentials": {
@@ -51670,7 +51639,7 @@
         "postcss": "^7.0.36",
         "postcss-loader": "^4.2.0",
         "raw-loader": "^4.0.2",
-        "react": "^16.14.0",
+        "react": "^18.0.0",
         "react-dom": "^16.14.0",
         "read-pkg-up": "^7.0.1",
         "regenerator-runtime": "^0.13.7",
@@ -51763,17 +51732,6 @@
             "semver": "^7.3.4"
           }
         },
-        "react": {
-          "version": "16.14.0",
-          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-          "dev": true,
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2"
-          }
-        },
         "react-dom": {
           "version": "16.14.0",
           "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
@@ -75668,7 +75626,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
       "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -78327,17 +78284,6 @@
             "@figspec/components": "^1.0.0",
             "@lit-labs/react": "^1.0.2"
           }
-        },
-        "react": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-          "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
-          "dev": true,
-          "peer": true,
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1"
-          }
         }
       }
     },

package.json

@@ -19,7 +19,11 @@
     "prettier": "prettier --write .",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:watch:all": "jest --watchAll"
+    "test:watch:all": "jest --watchAll",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+    "storybook": "npm run docs:json && start-storybook -p 6006",
+    "build-storybook": "npm run docs:json && build-storybook",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "workspaces": [
     "apps/*",
@@ -189,7 +193,8 @@
     "zxcvbn": "^4.4.2"
   },
   "overrides": {
-    "tailwindcss": "$tailwindcss"
+    "tailwindcss": "$tailwindcss",
+    "react": "^18.0.0"
   },
   "lint-staged": {
     "*": "prettier --ignore-unknown --write",

tsconfig.json

@@ -26,5 +26,5 @@
       }
     ]
   },
-  "exclude": ["node_modules", "dist"]
+  "include": ["apps/*/src/*", "libs/*/src/*"]
 }