From 3d1c5dc13c37fbe9ae0280cea665a1eda9e3e9d9 Mon Sep 17 00:00:00 2001 From: Michael Barton Date: Mon, 11 Nov 2024 16:11:27 +0000 Subject: [PATCH 1/4] Test Chromatic --- .gitignore | 4 +++- package-lock.json | 29 +++++++++++++++++++++++++++-- package.json | 1 + 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 47a322f..7384f14 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,6 @@ storybook-static/ .vscode src/chartdata/fenton/*.* -src/testParameters/measurements/fenton/*.* \ No newline at end of file +src/testParameters/measurements/fenton/*.* + +build-storybook.log \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2e7d823..b30f1ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@rcpch/digital-growth-charts-react-component-library", - "version": "7.1.4", + "version": "7.2.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@rcpch/digital-growth-charts-react-component-library", - "version": "7.1.4", + "version": "7.2.2", "license": "AGPL-3.0-or-later", "dependencies": { "sass": "1.70.0", @@ -43,6 +43,7 @@ "@types/react": "18.2.55", "@types/styled-components": "5.1.34", "autoprefixer": "10.4.20", + "chromatic": "11.18.0", "eslint-config-prettier": "9.1.0", "eslint-plugin-prettier": "5.2.1", "eslint-plugin-storybook": "^0.6.15", @@ -7182,6 +7183,30 @@ "fsevents": "~2.3.2" } }, + "node_modules/chromatic": { + "version": "11.18.0", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.18.0.tgz", + "integrity": "sha512-3o9Frn1oIS1hFLsJxVH9yVJ1O7+TCYoyL7OZzUorL/DCYduhXr5LDSBfpUsp7EdCPb64ufkbyFzSRNbt/xy9kg==", + "dev": true, + "license": "MIT", + "bin": { + "chroma": "dist/bin.js", + "chromatic": "dist/bin.js", + "chromatic-cli": "dist/bin.js" + }, + "peerDependencies": { + "@chromatic-com/cypress": "^0.*.* || ^1.0.0", + "@chromatic-com/playwright": "^0.*.* || ^1.0.0" + }, + "peerDependenciesMeta": { + "@chromatic-com/cypress": { + "optional": true + }, + "@chromatic-com/playwright": { + "optional": true + } + } + }, "node_modules/chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", diff --git a/package.json b/package.json index d538732..085dd6a 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "@types/react": "18.2.55", "@types/styled-components": "5.1.34", "autoprefixer": "10.4.20", + "chromatic": "11.18.0", "eslint-config-prettier": "9.1.0", "eslint-plugin-prettier": "5.2.1", "eslint-plugin-storybook": "^0.6.15", From 7bb42045a8ff8b6a370df3e21652d2cc28a8ba94 Mon Sep 17 00:00:00 2001 From: Michael Barton Date: Tue, 12 Nov 2024 10:37:02 +0000 Subject: [PATCH 2/4] Copy paste missing test styles from makeAllStyles --- src/testParameters/styles/tanner1Styles.ts | 16 ++++++++++++++++ src/testParameters/styles/tanner2Styles.ts | 16 ++++++++++++++++ src/testParameters/styles/tanner3Styles.ts | 16 ++++++++++++++++ .../styles/traditionalBoysStyles.ts | 16 ++++++++++++++++ .../styles/traditionalGirlsStyles.ts | 16 ++++++++++++++++ 5 files changed, 80 insertions(+) diff --git a/src/testParameters/styles/tanner1Styles.ts b/src/testParameters/styles/tanner1Styles.ts index ac658c3..b8fc02a 100644 --- a/src/testParameters/styles/tanner1Styles.ts +++ b/src/testParameters/styles/tanner1Styles.ts @@ -322,4 +322,20 @@ export const Tanner1Styles = { size: 14, style: 'normal', }, + toggleTooltipStyle: { + backgroundColor: '#333', + color: '#fff', + fontSize: 14, + fontFamily: 'Montserrat', + fontWeight: 400, + fontStyle: 'regular', + borderRadius: 4 + }, + referenceTextStyle: { + fontSize: 8, + fontFamily: 'Arial', + color: '#000000', + fontWeight: 200, + fontStyle: 'normal', + } }; diff --git a/src/testParameters/styles/tanner2Styles.ts b/src/testParameters/styles/tanner2Styles.ts index 7e4943e..da9abc8 100644 --- a/src/testParameters/styles/tanner2Styles.ts +++ b/src/testParameters/styles/tanner2Styles.ts @@ -322,4 +322,20 @@ export const Tanner2Styles = { size: 14, style: 'normal', }, + toggleTooltipStyle: { + backgroundColor: '#333', + color: '#fff', + fontSize: 14, + fontFamily: 'Montserrat', + fontWeight: 400, + fontStyle: 'regular', + borderRadius: 4 + }, + referenceTextStyle: { + fontSize: 8, + fontFamily: 'Arial', + color: '#000000', + fontWeight: 200, + fontStyle: 'normal', + } }; diff --git a/src/testParameters/styles/tanner3Styles.ts b/src/testParameters/styles/tanner3Styles.ts index f117fc4..1ab0ec6 100644 --- a/src/testParameters/styles/tanner3Styles.ts +++ b/src/testParameters/styles/tanner3Styles.ts @@ -322,4 +322,20 @@ export const Tanner3Styles = { size: 14, style: 'normal', }, + toggleTooltipStyle: { + backgroundColor: '#333', + color: '#fff', + fontSize: 14, + fontFamily: 'Montserrat', + fontWeight: 400, + fontStyle: 'regular', + borderRadius: 4 + }, + referenceTextStyle: { + fontSize: 8, + fontFamily: 'Arial', + color: '#000000', + fontWeight: 200, + fontStyle: 'normal', + } }; diff --git a/src/testParameters/styles/traditionalBoysStyles.ts b/src/testParameters/styles/traditionalBoysStyles.ts index 256a876..b876965 100644 --- a/src/testParameters/styles/traditionalBoysStyles.ts +++ b/src/testParameters/styles/traditionalBoysStyles.ts @@ -321,4 +321,20 @@ export const traditionalBoysStyles = { size: 14, style: 'normal', }, + toggleTooltipStyle: { + backgroundColor: '#333', + color: '#fff', + fontSize: 14, + fontFamily: 'Montserrat', + fontWeight: 400, + fontStyle: 'regular', + borderRadius: 4 + }, + referenceTextStyle: { + fontSize: 8, + fontFamily: 'Arial', + color: '#000000', + fontWeight: 200, + fontStyle: 'normal', + } }; diff --git a/src/testParameters/styles/traditionalGirlsStyles.ts b/src/testParameters/styles/traditionalGirlsStyles.ts index baf0462..4a18e27 100644 --- a/src/testParameters/styles/traditionalGirlsStyles.ts +++ b/src/testParameters/styles/traditionalGirlsStyles.ts @@ -321,4 +321,20 @@ export const traditionalGirlsStyles = { size: 14, weight: 'normal', }, + toggleTooltipStyle: { + backgroundColor: '#333', + color: '#fff', + fontSize: 14, + fontFamily: 'Montserrat', + fontWeight: 400, + fontStyle: 'regular', + borderRadius: 4 + }, + referenceTextStyle: { + fontSize: 8, + fontFamily: 'Arial', + color: '#000000', + fontWeight: 200, + fontStyle: 'normal', + } }; From f627d5db532ffe38c00a3bae1251c8a2e7549112 Mon Sep 17 00:00:00 2001 From: Michael Barton Date: Tue, 12 Nov 2024 10:56:00 +0000 Subject: [PATCH 3/4] Add Chromatic workflow --- .github/workflows/chromatic.yml | 25 +++++++++++++++++++++++++ package.json | 1 + 2 files changed, 26 insertions(+) create mode 100644 .github/workflows/chromatic.yml diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 0000000..3e5e7ca --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,25 @@ +# Chromatic recommend having this on "push" so we have it as a separate workflow +# https://www.chromatic.com/docs/github-actions/#recommended-configuration-for-build-events + +name: "Chromatic" + +on: push + +jobs: + chromatic: + name: Run Chromatic + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + - uses: actions/setup-node@v4 + with: + node-version: 20 + - name: Install dependencies + run: npm ci + - name: Run Chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} \ No newline at end of file diff --git a/package.json b/package.json index 085dd6a..dfcd323 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "test": "jest --env=jsdom", "build": "ROLLUP_WATCH=false rollup -c --bundleConfigAsCjs", "storybook": "storybook dev -p 6006", + "chromatic": "chromatic --exit-zero-on-changes", "build-storybook": "storybook build", "prettier:check": "prettier --check .", "prettier:write": "prettier --write ." From b47469a852cd9202f9a10f7dbe2bd807af895da0 Mon Sep 17 00:00:00 2001 From: Michael Barton Date: Tue, 12 Nov 2024 11:00:18 +0000 Subject: [PATCH 4/4] tidy up --- .github/workflows/chromatic.yml | 4 +++- package.json | 1 - 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 3e5e7ca..fa93076 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -22,4 +22,6 @@ jobs: - name: Run Chromatic uses: chromaui/action@latest with: - projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} \ No newline at end of file + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + exitZeroOnChanges: true + exitOnceUploaded: true \ No newline at end of file diff --git a/package.json b/package.json index dfcd323..085dd6a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ "test": "jest --env=jsdom", "build": "ROLLUP_WATCH=false rollup -c --bundleConfigAsCjs", "storybook": "storybook dev -p 6006", - "chromatic": "chromatic --exit-zero-on-changes", "build-storybook": "storybook build", "prettier:check": "prettier --check .", "prettier:write": "prettier --write ."