Migrate Chromatic (#2906)

2024-11-21 11:35:34 +01:00 · 2022-06-16 20:41:22 +02:00 · 2022-06-16 20:41:22 +02:00 · 4106eead02
commit 4106eead02
parent ba0e33881f
12 changed files with 118 additions and 190 deletions
--- a/libs/.github/workflows/chromatic.yml
+++ b/libs/.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\"]"
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,5 @@ node_modules/
 **/coverage/
 .github/workflows/act
 .DS_Store
+documentation.json
+dist
--- a/libs/components/.storybook/main.js
+++ b/libs/components/.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",
--- a/libs/components/.storybook/preview.js
+++ b/libs/components/.storybook/preview.js
--- a/libs/components/.storybook/tsconfig.json
+++ b/libs/components/.storybook/tsconfig.json
@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.app.json",
+  "extends": "../tsconfig",
  "compilerOptions": {
    "types": ["node"],
    "allowSyntheticDefaultImports": true
--- a/libs/components/.storybook/typings.d.ts
+++ b/libs/components/.storybook/typings.d.ts
--- a/angular.json
+++ b/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"
+}
--- a/libs/.github/workflows/build.yml
+++ b/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 }}
--- a/libs/components/tailwind.config.js
+++ b/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-(.*)/,
--- a/package-lock.json
+++ b/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"
-          }
        }
      }
    },
--- a/package.json
+++ b/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",
--- a/tsconfig.json
+++ b/tsconfig.json
@ -26,5 +26,5 @@
      }
    ]
  },
-  "exclude": ["node_modules", "dist"]
+  "include": ["apps/*/src/*", "libs/*/src/*"]
 }