From c93c6ccee59263224ffaecf969be12cfa3e55cac Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 12:03:39 -0500 Subject: [PATCH 01/10] Reset radio button. --- src/components/ModalForm.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/ModalForm.tsx b/src/components/ModalForm.tsx index 314e138..1410871 100644 --- a/src/components/ModalForm.tsx +++ b/src/components/ModalForm.tsx @@ -288,8 +288,7 @@ export default function ModalForm(props: ModalFormType) { type="radio" className="radio checked:bg-red-500 mr-2" value={TopoChicoFlavor.Regular} - {...(register("topoChicoFlavor"), - { + {...register("topoChicoFlavor", { required: true, })} /> @@ -301,8 +300,7 @@ export default function ModalForm(props: ModalFormType) { type="radio" className="radio checked:bg-green-500 mr-2" value={TopoChicoFlavor.Lime} - {...(register("topoChicoFlavor"), - { + {...register("topoChicoFlavor", { required: true, })} /> @@ -314,8 +312,7 @@ export default function ModalForm(props: ModalFormType) { type="radio" className="radio checked:bg-blue-500 mr-2" value={TopoChicoFlavor.Blueberry} - {...(register("topoChicoFlavor"), - { + {...register("topoChicoFlavor", { required: true, })} /> From aeebcd786764f72f0421784feed7d41f23de9604 Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 13:07:16 -0500 Subject: [PATCH 02/10] Added GitHub Actions files. --- .github/development-pr-open.yml | 144 ++++++++++++++++++++++++++ .github/main-push-pr.yml | 147 +++++++++++++++++++++++++++ .github/reusable-deploy-prod.yml | 40 ++++++++ .github/reusable-preview-pr-open.yml | 45 ++++++++ 4 files changed, 376 insertions(+) create mode 100644 .github/development-pr-open.yml create mode 100644 .github/reusable-deploy-prod.yml create mode 100644 .github/reusable-preview-pr-open.yml diff --git a/.github/development-pr-open.yml b/.github/development-pr-open.yml new file mode 100644 index 0000000..a4319b7 --- /dev/null +++ b/.github/development-pr-open.yml @@ -0,0 +1,144 @@ +# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Dev Branch PR or Push + +on: + push: + branches: [dev] + pull_request: + branches: [dev] + types: [opened, reopened, synchronize] + +jobs: + install: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + submodules: true + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: lts/iron + cache: "npm" + + - name: Clear Install Dependecies + run: npm ci + + build: + needs: install + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + submodules: true + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: lts/iron + cache: "npm" + + - name: Clear Install Dependecies + run: npm ci + + - name: Build + run: npm run build + + lint: + needs: build + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + submodules: true + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: lts/iron + + - name: Clear Install Dependecies + run: npm ci + + - name: Build + run: npm run build + + - name: Lint + run: npm run lint + + # e2e-install-all-deps-with-cypress: + # needs: lint + # runs-on: ubuntu-latest + # steps: + # - name: Checkout repository + # uses: actions/checkout@v4 + + # - name: Install dependencies + # uses: cypress-io/github-action@v6 + # with: + # # just perform install + # runTests: false + + # # - name: Lint + # # run: npm run lint + + # - name: Run e2e tests + # uses: cypress-io/github-action@v6 + # with: + # # we have already installed all dependencies above + # install: false + # build: npm run build + # start: npm start + # wait-on: http://localhost:3000 + # # Custom: Cypress tests and config file are in "e2e" folder + # # working-directory: e2e + + e2e-cypress-only: + needs: lint + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - uses: actions/cache@v4 + with: + path: | + ~/.cache/Cypress + node_modules + key: my-cache-${{ runner.os }}-${{ hashFiles('package-lock.json') }} + + - name: Install Cypress only + run: npm i cypress + + - name: Run e2e tests + uses: cypress-io/github-action@v6 + with: + # we have already installed all dependencies above + install: false + build: npm run build + start: npm start + wait-on: http://localhost:3000 + # Custom: Cypress tests and config file are in "e2e" folder + # working-directory: e2e + + deploy-preview: + needs: e2e-cypress-only + if: github.event.pull_request.merged == false + uses: ./.github/workflows/preview-pr-open.yml + secrets: inherit # needs this whenever we use reusables otherwise secrets won't work + + + # how to make a version to build for dev branch + # deploy-dev: diff --git a/.github/main-push-pr.yml b/.github/main-push-pr.yml index e69de29..d4ecb0a 100644 --- a/.github/main-push-pr.yml +++ b/.github/main-push-pr.yml @@ -0,0 +1,147 @@ +# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Main Branch PR or Push + +on: + push: + branches: [main] + pull_request: + branches: [main] + types: [opened, reopened, synchronize] + +jobs: + install: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + submodules: true + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: lts/iron + cache: "npm" + + - name: Clear Install Dependecies + run: npm ci + + build: + needs: install + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + submodules: true + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: lts/iron + cache: "npm" + + - name: Clear Install Dependecies + run: npm ci + + - name: Build + run: npm run build + + lint: + needs: build + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + submodules: true + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: lts/iron + + - name: Clear Install Dependecies + run: npm ci + + - name: Build + run: npm run build + + - name: Lint + run: npm run lint + + # e2e-install-all-deps-with-cypress: + # needs: lint + # runs-on: ubuntu-latest + # steps: + # - name: Checkout repository + # uses: actions/checkout@v4 + + # - name: Install dependencies + # uses: cypress-io/github-action@v6 + # with: + # # just perform install + # runTests: false + + # # - name: Lint + # # run: npm run lint + + # - name: Run e2e tests + # uses: cypress-io/github-action@v6 + # with: + # # we have already installed all dependencies above + # install: false + # build: npm run build + # start: npm start + # wait-on: http://localhost:3000 + # # Custom: Cypress tests and config file are in "e2e" folder + # # working-directory: e2e + + e2e-cypress-only: + needs: lint + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - uses: actions/cache@v4 + with: + path: | + ~/.cache/Cypress + node_modules + key: my-cache-${{ runner.os }}-${{ hashFiles('package-lock.json') }} + + - name: Install Cypress only + run: npm i cypress + + - name: Run e2e tests + uses: cypress-io/github-action@v6 + with: + # we have already installed all dependencies above + install: false + build: npm run build + start: npm start + wait-on: http://localhost:3000 + # Custom: Cypress tests and config file are in "e2e" folder + # working-directory: e2e + + deploy-preview: + needs: e2e-cypress-only + if: github.event.pull_request.merged == false + uses: ./.github/workflows/reusable-preview-pr-open.yml + secrets: inherit # needs this whenever we use reusables otherwise secrets won't work + + deploy-prod: + needs: e2e-cypress-only + if: github.event.pull_request.merged == true + uses: ./.github/workflows/reusable-deploy-prod.yml + secrets: inherit # needs this whenever we use reusables otherwise secrets won't work + diff --git a/.github/reusable-deploy-prod.yml b/.github/reusable-deploy-prod.yml new file mode 100644 index 0000000..3edb2d9 --- /dev/null +++ b/.github/reusable-deploy-prod.yml @@ -0,0 +1,40 @@ +name: Vercel Production Deployment + +env: + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} + +on: + # push: + # branches: + # - main + workflow_call: + inputs: + stage: + type: string + required: false + environment: + type: string + required: false + affected: + type: boolean + default: false + required: false + +jobs: + Deploy-Production: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + + - name: Install Vercel CLI + run: npm install --global vercel@latest + + - name: Pull Vercel Environment Information + run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} + + - name: Build Project Artifacts + run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} + + - name: Deploy Project Artifacts to Vercel + run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} diff --git a/.github/reusable-preview-pr-open.yml b/.github/reusable-preview-pr-open.yml new file mode 100644 index 0000000..eed636f --- /dev/null +++ b/.github/reusable-preview-pr-open.yml @@ -0,0 +1,45 @@ +name: Vercel PR Preview Deployment + +env: + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} + +# on: +# push: +# branches-ignore: +# - main +# pull_request: +# branches: [main] +# types: [opened, reopened, synchronize] + +on: + workflow_call: + inputs: + stage: + type: string + required: false + environment: + type: string + required: false + affected: + type: boolean + default: false + required: false + +jobs: + Deploy-Preview: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + + - name: Install Vercel CLI + run: npm install --global vercel@latest + + - name: Pull Vercel Environment Information + run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} + + - name: Build Project Artifacts + run: vercel build --token=${{ secrets.VERCEL_TOKEN }} + + - name: Deploy Project Artifacts to Vercel + run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} From dc0c056631ec8d598edee01b4be0020a348625be Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 13:08:54 -0500 Subject: [PATCH 03/10] Moved GitHub Action files. --- .github/{ => workflows}/development-pr-open.yml | 0 .github/{ => workflows}/main-push-pr.yml | 0 .github/{ => workflows}/reusable-deploy-prod.yml | 0 .github/{ => workflows}/reusable-preview-pr-open.yml | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename .github/{ => workflows}/development-pr-open.yml (100%) rename .github/{ => workflows}/main-push-pr.yml (100%) rename .github/{ => workflows}/reusable-deploy-prod.yml (100%) rename .github/{ => workflows}/reusable-preview-pr-open.yml (100%) diff --git a/.github/development-pr-open.yml b/.github/workflows/development-pr-open.yml similarity index 100% rename from .github/development-pr-open.yml rename to .github/workflows/development-pr-open.yml diff --git a/.github/main-push-pr.yml b/.github/workflows/main-push-pr.yml similarity index 100% rename from .github/main-push-pr.yml rename to .github/workflows/main-push-pr.yml diff --git a/.github/reusable-deploy-prod.yml b/.github/workflows/reusable-deploy-prod.yml similarity index 100% rename from .github/reusable-deploy-prod.yml rename to .github/workflows/reusable-deploy-prod.yml diff --git a/.github/reusable-preview-pr-open.yml b/.github/workflows/reusable-preview-pr-open.yml similarity index 100% rename from .github/reusable-preview-pr-open.yml rename to .github/workflows/reusable-preview-pr-open.yml From 238ae79079ac796930f05c2f90fefb3b44e4e1d7 Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 13:33:01 -0500 Subject: [PATCH 04/10] Testing install check. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c6e4b50..d0a2e1f 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "react": "^18", "react-dom": "^18", "react-hook-form": "^7.53.0", - "uuid": "^10.0.0" + "uuid4": "^10.0.0" }, "devDependencies": { "@types/node": "^20", From 17ef1ba502b863377cdc6f44819547b0e34c66f1 Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 13:35:52 -0500 Subject: [PATCH 05/10] Testing install check. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d0a2e1f..c6e4b50 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "react": "^18", "react-dom": "^18", "react-hook-form": "^7.53.0", - "uuid4": "^10.0.0" + "uuid": "^10.0.0" }, "devDependencies": { "@types/node": "^20", From 6b41c357bdd599a45cac34bd237e8151bfd0bd3a Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 13:41:40 -0500 Subject: [PATCH 06/10] Temporary fixed for Cypress radio buttons. --- cypress/e2e/modalForm.spec.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/cypress/e2e/modalForm.spec.ts b/cypress/e2e/modalForm.spec.ts index e5d39cc..ed334f7 100644 --- a/cypress/e2e/modalForm.spec.ts +++ b/cypress/e2e/modalForm.spec.ts @@ -178,15 +178,15 @@ describe("Modal Form", () => { .check("blueberry") .should("be.checked"); cy.wait(1000); - cy.getBySel("radio-choices-field") - .find("input[type='radio']") - .check("regular") - .should("be.checked"); - cy.wait(1000); - cy.getBySel("radio-choices-field") - .find("input[type='radio']") - .check("lime") - .should("be.checked"); - cy.wait(1000); + // cy.getBySel("radio-choices-field") + // .find("input[type='radio']") + // .check("regular") + // .should("be.checked"); + // cy.wait(1000); + // cy.getBySel("radio-choices-field") + // .find("input[type='radio']") + // .check("lime") + // .should("be.checked"); + // cy.wait(1000); }); }); From 2f6e05e5e55416f39ccbd815302e7541da82b32d Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 14:32:01 -0500 Subject: [PATCH 07/10] Added reminders on Vercel steps. --- README.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a7ab262..9c82d90 100644 --- a/README.md +++ b/README.md @@ -44,11 +44,41 @@ None of these commands will be used in the GitHub actions if `cypress-io/github- ## Deploy on Vercel +The following steps overwrites or cancels the auto deploy on Vercel. Because, we want all the GitHub Actions checks to pass first before a deploy happens. If don't cancel the Vercel auto-deploy, then there's just gonna be a deployment to Vercel no matter what. + ### Add this project in Vercel Import this repo in Vercel. -### +### Vercel CLI + +```bash +vercel login +``` + +Link this app to Vercel + +```bash +vercel +``` + +Follow all the prompts. + +A `.vercel` folder with a `project.json` inside should generated. The `project.json` should have the `projectId` and `orgId`. + +### Generate a token (if you already haven't) + +Go the Vercel website. Login to your account. And generate a token. + +### Save the as GitHub Secrets + +The following variables should be saved as GitHub secrets. + +```bash +VERCEL_TOKEN +VERCEL_ORG_ID +VERCEL_PROJECT_ID +``` ## Setup Cypress From 7dd60eb4ab6fb68457003f076a5b376839f264d3 Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 14:40:07 -0500 Subject: [PATCH 08/10] Added GitHub Actions info section. --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 9c82d90..17dd2f3 100644 --- a/README.md +++ b/README.md @@ -80,6 +80,14 @@ VERCEL_ORG_ID VERCEL_PROJECT_ID ``` +## GitHub Actions + +Have all the GitHub action jobs. Have a resuable YAML file that has the code to deploy to preview or to production on Vercel. This file will be triggered after all the previous required checks passed. Since we turned off the auto deploy for this project in Vercel, the resuable YAML file will make the deployment. + +### Preview link + +The preview link will be generated in the GitHub Actions check logs. You'd have to go to page click the preview. Unfortunately as of now, there's now way to make the fancy and convenient bar have the link that the Vercel Auto Deploy does. + ## Setup Cypress ### Install Cypress From 1459745c48b7d43b3779560545f707daaf3f62bf Mon Sep 17 00:00:00 2001 From: junerockwell Date: Thu, 26 Sep 2024 16:01:13 -0500 Subject: [PATCH 09/10] Added GitHub Actions info section. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 17dd2f3..80bdfb3 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ Have all the GitHub action jobs. Have a resuable YAML file that has the code to ### Preview link -The preview link will be generated in the GitHub Actions check logs. You'd have to go to page click the preview. Unfortunately as of now, there's now way to make the fancy and convenient bar have the link that the Vercel Auto Deploy does. +The preview link will be generated in the GitHub Actions check logs. You'd have to go to page to get the preview link that was generated. Unfortunately as of now, there's now way to make the fancy and convenient bar have the link that the Vercel Auto Deploy does. ## Setup Cypress From 1bec39a36f7d0a74468d679c876555ded7431559 Mon Sep 17 00:00:00 2001 From: junerockwell Date: Mon, 30 Sep 2024 11:05:39 -0500 Subject: [PATCH 10/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 80bdfb3..d66af9c 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ The following command runs the e2e test on the terminal only. npm run cy:run ``` -None of these commands will be used in the GitHub actions if `cypress-io/github-action@v6` is used because `cypress-io/github-action@v6` does it for you. +None of these commands will be used in the GitHub actions if `cypress-io/github-action@v6` is used because `cypress-io/github-action@v6` does all for you. ## Deploy on Vercel