From 4106eead02fda8481ec6e8c4d38e5636ecea70b4 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Thu, 16 Jun 2022 20:41:22 +0200 Subject: [PATCH] Migrate Chromatic (#2906) --- .../workflows/chromatic.yml | 2 - .gitignore | 2 + .../.storybook => .storybook}/main.js | 5 +- .../.storybook => .storybook}/preview.js | 0 .../.storybook => .storybook}/tsconfig.json | 2 +- .../.storybook => .storybook}/typings.d.ts | 0 angular.json | 81 +++++++++++++ libs/.github/workflows/build.yml | 107 ------------------ libs/components/tailwind.config.js | 2 +- package-lock.json | 96 ++++------------ package.json | 9 +- tsconfig.json | 2 +- 12 files changed, 118 insertions(+), 190 deletions(-) rename {libs/.github => .github}/workflows/chromatic.yml (93%) rename {libs/components/.storybook => .storybook}/main.js (65%) rename {libs/components/.storybook => .storybook}/preview.js (100%) rename {libs/components/.storybook => .storybook}/tsconfig.json (87%) rename {libs/components/.storybook => .storybook}/typings.d.ts (100%) create mode 100644 angular.json delete mode 100644 libs/.github/workflows/build.yml diff --git a/libs/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml similarity index 93% rename from libs/.github/workflows/chromatic.yml rename to .github/workflows/chromatic.yml index f149df6a2b..1cc1d45293 100644 --- a/libs/.github/workflows/chromatic.yml +++ b/.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\"]" diff --git a/.gitignore b/.gitignore index 793d0925c8..e6ea62d816 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ node_modules/ **/coverage/ .github/workflows/act .DS_Store +documentation.json +dist diff --git a/libs/components/.storybook/main.js b/.storybook/main.js similarity index 65% rename from libs/components/.storybook/main.js rename to .storybook/main.js index bcc8fad8b8..02b7f1aa59 100644 --- a/libs/components/.storybook/main.js +++ b/.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", diff --git a/libs/components/.storybook/preview.js b/.storybook/preview.js similarity index 100% rename from libs/components/.storybook/preview.js rename to .storybook/preview.js diff --git a/libs/components/.storybook/tsconfig.json b/.storybook/tsconfig.json similarity index 87% rename from libs/components/.storybook/tsconfig.json rename to .storybook/tsconfig.json index 330b58615a..89c8f20b35 100644 --- a/libs/components/.storybook/tsconfig.json +++ b/.storybook/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../tsconfig.app.json", + "extends": "../tsconfig", "compilerOptions": { "types": ["node"], "allowSyntheticDefaultImports": true diff --git a/libs/components/.storybook/typings.d.ts b/.storybook/typings.d.ts similarity index 100% rename from libs/components/.storybook/typings.d.ts rename to .storybook/typings.d.ts diff --git a/angular.json b/angular.json new file mode 100644 index 0000000000..4697fb7423 --- /dev/null +++ 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" +} diff --git a/libs/.github/workflows/build.yml b/libs/.github/workflows/build.yml deleted file mode 100644 index 6ee5ce6275..0000000000 --- a/libs/.github/workflows/build.yml +++ /dev/null @@ -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 }} diff --git a/libs/components/tailwind.config.js b/libs/components/tailwind.config.js index 5f7eb29829..795361438a 100644 --- 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-(.*)/, diff --git a/package-lock.json b/package-lock.json index 7697f19534..9a3739783f 100644 --- 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" - } } } }, diff --git a/package.json b/package.json index ca5e4722d2..ac70e52938 100644 --- 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", diff --git a/tsconfig.json b/tsconfig.json index e1c4414687..3bf1e15ebc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,5 +26,5 @@ } ] }, - "exclude": ["node_modules", "dist"] + "include": ["apps/*/src/*", "libs/*/src/*"] }