From 662e931e8b6bca560864c0b7c5a57a27bd67306c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Calcagno=20Lo=C3=AFc?= <98493858+CalcagnoLoic@users.noreply.github.com> Date: Thu, 8 Feb 2024 17:05:31 +0100 Subject: [PATCH 1/6] adding workflows to hosting on chromatic --- .github/workflows/chromatic.yaml | 24 ++++++++++++++++++++++++ package-lock.json | 31 +++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 56 insertions(+) create mode 100644 .github/workflows/chromatic.yaml diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml new file mode 100644 index 0000000..6eb0627 --- /dev/null +++ b/.github/workflows/chromatic.yaml @@ -0,0 +1,24 @@ +name: Deploy storybook on Chromatic + +on: + push: + branches: + - feature/chromatic + +jobs: + chromatic: + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Install dependencies + run: npm ci + + - name: Publish to Chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + exitZeroOnChanges: true \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c29f6ce..551f953 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "@typescript-eslint/parser": "^6.14.0", "@vitejs/plugin-react-swc": "^3.5.0", "autoprefixer": "^10.4.17", + "chromatic": "^10.9.1", "eslint": "^8.55.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", @@ -7781,6 +7782,29 @@ "node": ">=10" } }, + "node_modules/chromatic": { + "version": "10.9.1", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-10.9.1.tgz", + "integrity": "sha512-6Ypho74fQu45ns48KaBuIMKqlzik0fJo//dLB3lkiphz8vCiMm75uU3xhkfZh4NbOS51MbWZKjPfefM53bIHpg==", + "dev": true, + "bin": { + "chroma": "dist/bin.js", + "chromatic": "dist/bin.js", + "chromatic-cli": "dist/bin.js" + }, + "peerDependencies": { + "@chromatic-com/cypress": "^0.5.2 || ^1.0.0", + "@chromatic-com/playwright": "^0.5.2 || ^1.0.0" + }, + "peerDependenciesMeta": { + "@chromatic-com/cypress": { + "optional": true + }, + "@chromatic-com/playwright": { + "optional": true + } + } + }, "node_modules/ci-info": { "version": "3.9.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz", @@ -20275,6 +20299,13 @@ "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", "dev": true }, + "chromatic": { + "version": "10.9.1", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-10.9.1.tgz", + "integrity": "sha512-6Ypho74fQu45ns48KaBuIMKqlzik0fJo//dLB3lkiphz8vCiMm75uU3xhkfZh4NbOS51MbWZKjPfefM53bIHpg==", + "dev": true, + "requires": {} + }, "ci-info": { "version": "3.9.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz", diff --git a/package.json b/package.json index fa9104b..a03a7aa 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@typescript-eslint/parser": "^6.14.0", "@vitejs/plugin-react-swc": "^3.5.0", "autoprefixer": "^10.4.17", + "chromatic": "^10.9.1", "eslint": "^8.55.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", From b033f4f126bdcec73555a2300c3e4893a0438dde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Calcagno=20Lo=C3=AFc?= <98493858+CalcagnoLoic@users.noreply.github.com> Date: Thu, 8 Feb 2024 17:56:00 +0100 Subject: [PATCH 2/6] deploy gh page --- .github/workflows/deploy.yaml | 67 +++++++++++++++++++++++++++++++++++ README.md | 2 ++ 2 files changed, 69 insertions(+) create mode 100644 .github/workflows/deploy.yaml diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml new file mode 100644 index 0000000..4f84423 --- /dev/null +++ b/.github/workflows/deploy.yaml @@ -0,0 +1,67 @@ +name: "Deploy dictionary app into GH pages" + +on: + pull_request: + branches: + - master + +permissions: + contents: read + pages: write + id-token: write + +jobs: + linter_and_build: + runs-on: ubuntu-latest + + steps: + - name: "Checkout branch" + uses: actions/checkout@v4 + + - name: "Install Node Version" + uses: actions/setup-node@v4 + with: + node-version: "20" + cache: "npm" + + - name: "Install dependencies" + run: npm run install + + - name: "Linter" + run: npm run lint + + - name: "Build" + run: npm run build + + deploy: + runs-on: ubuntu-latest + needs: linter_and_build + + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + + steps: + - name: "Checkout branch" + uses: actions/checkout@v4 + + - name: "Install Node Version" + uses: actions/setup-node@v4 + with: + node-version: "20" + cache: "npm" + + - name: "Install dependencies" + run: npm run install + + - name: "Configure GH page" + uses: actions/configure-pages@v3 + + - name: "Upload artifact" + uses: actions/upload-artifact@v2 + with: + path: ./dist/ + + - name: "Deploy GH page" + uses: actions/deploy-pages@v1 + id: deployment diff --git a/README.md b/README.md index 152ffd0..b489176 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ This dictionary provides definitions and examples by lexical field. Two contexts - One for darkMode (this adapts to the user's system preferences) - One for changing the font (serif, sans-serif and mono) +The stories are hosted on Chromatic at this [URL](https://65c4faea26944c656f6474a3-hvxcsqaonk.chromatic.com/). +

From 31b6e603feab5bf2ff1a3f5a79d8e24a005050c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Calcagno=20Lo=C3=AFc?= <98493858+CalcagnoLoic@users.noreply.github.com> Date: Thu, 8 Feb 2024 17:59:08 +0100 Subject: [PATCH 3/6] modification of workflow --- .github/workflows/deploy.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index 4f84423..2f33f4e 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -25,7 +25,7 @@ jobs: cache: "npm" - name: "Install dependencies" - run: npm run install + run: npm i - name: "Linter" run: npm run lint @@ -52,7 +52,7 @@ jobs: cache: "npm" - name: "Install dependencies" - run: npm run install + run: npm i - name: "Configure GH page" uses: actions/configure-pages@v3 From b951e4c8c1ade1d4c1d5ae52817870ef2e18c759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Calcagno=20Lo=C3=AFc?= <98493858+CalcagnoLoic@users.noreply.github.com> Date: Thu, 8 Feb 2024 18:02:31 +0100 Subject: [PATCH 4/6] modification of workflow --- .github/workflows/deploy.yaml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index 2f33f4e..21d5b96 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -11,7 +11,7 @@ permissions: id-token: write jobs: - linter_and_build: + linter: runs-on: ubuntu-latest steps: @@ -30,12 +30,9 @@ jobs: - name: "Linter" run: npm run lint - - name: "Build" - run: npm run build - - deploy: + build_and_deploy: runs-on: ubuntu-latest - needs: linter_and_build + needs: linter environment: name: github-pages @@ -57,6 +54,9 @@ jobs: - name: "Configure GH page" uses: actions/configure-pages@v3 + - name: "Build" + run: npm run build + - name: "Upload artifact" uses: actions/upload-artifact@v2 with: From c44f5d044318814648852e63893fbf0cf0987734 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Calcagno=20Lo=C3=AFc?= <98493858+CalcagnoLoic@users.noreply.github.com> Date: Thu, 8 Feb 2024 18:06:39 +0100 Subject: [PATCH 5/6] update workflows --- .github/workflows/deploy.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index 21d5b96..3d195d3 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -58,10 +58,10 @@ jobs: run: npm run build - name: "Upload artifact" - uses: actions/upload-artifact@v2 + uses: actions/upload-pages-artifact@v2 with: path: ./dist/ - name: "Deploy GH page" - uses: actions/deploy-pages@v1 id: deployment + uses: actions/deploy-pages@v1 From 3cb9db8716d79cd60bd6b2f7763c3c6d3e33c1c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Calcagno=20Lo=C3=AFc?= <98493858+CalcagnoLoic@users.noreply.github.com> Date: Thu, 8 Feb 2024 18:10:18 +0100 Subject: [PATCH 6/6] update vite config with base url --- vite.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/vite.config.ts b/vite.config.ts index d366e8c..d3d91b0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,4 +4,5 @@ import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + base: "/dictionary-webapp/", });