Migrate Chromatic (#2906)

This commit is contained in:
Oscar Hinton 2022-06-16 20:41:22 +02:00 committed by GitHub
parent ba0e33881f
commit 4106eead02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 118 additions and 190 deletions

View File

@ -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\"]"

2
.gitignore vendored
View File

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

View File

@ -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",

View File

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

81
angular.json Normal file
View File

@ -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"
}

View File

@ -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 }}

View File

@ -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-(.*)/,

96
package-lock.json generated
View File

@ -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"
}
}
}
},

View File

@ -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",

View File

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