From 518863cd4af32f8efba2b204c021728672dd5f1a Mon Sep 17 00:00:00 2001 From: Bart Stefanski Date: Fri, 21 Apr 2023 12:02:52 +0200 Subject: [PATCH] chore: setup CI/CD pipelines: check, playwright, bundle analyzer --- .eslintignore | 2 + .github/nodejs.version | 1 + .github/workflows/bundle.yml | 117 +++++++++++++++++++++++++++++++ .github/workflows/check.yml | 21 ++++++ .github/workflows/playwright.yml | 16 +++-- .prettierignore | 2 + package.json | 4 +- pages/index.tsx | 15 ++-- tailwind.config.js | 3 + yarn.lock | 13 +++- 10 files changed, 173 insertions(+), 21 deletions(-) create mode 100644 .eslintignore create mode 100644 .github/nodejs.version create mode 100644 .github/workflows/bundle.yml create mode 100644 .github/workflows/check.yml create mode 100644 .prettierignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..db5ddae --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +.next +node_modules \ No newline at end of file diff --git a/.github/nodejs.version b/.github/nodejs.version new file mode 100644 index 0000000..5dbac1e --- /dev/null +++ b/.github/nodejs.version @@ -0,0 +1 @@ +v16.13.0 \ No newline at end of file diff --git a/.github/workflows/bundle.yml b/.github/workflows/bundle.yml new file mode 100644 index 0000000..08b7f33 --- /dev/null +++ b/.github/workflows/bundle.yml @@ -0,0 +1,117 @@ +name: "Next.js Bundle Analysis" + +on: + pull_request: + branches: + - main + - staging + workflow_dispatch: + +defaults: + run: + # change this if your nextjs app does not live at the root of the repo + working-directory: ./ + +jobs: + analyze: + runs-on: ubuntu-latest + permissions: + pull-requests: write + contents: read + steps: + - uses: actions/checkout@v3 + - run: echo "node_version=$(cat .github/nodejs.version)" >> $GITHUB_ENV + - name: use node ${{ env.node_version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ env.node_version }} + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Restore next build + uses: actions/cache@v3 + id: restore-build-cache + env: + cache-name: cache-next-build + with: + path: .next/cache + # change this if you prefer a more strict cache + key: ${{ runner.os }}-build-${{ env.cache-name }} + + - name: Build next.js app + env: + SKIP_BUILD_PRODUCT_REDIRECTS: 1 + # change this if your site requires a custom build command + run: yarn build + + # Here's the first place where next-bundle-analysis' own script is used + # This step pulls the raw bundle stats for the current bundle + - name: Analyze bundle + run: npx -p nextjs-bundle-analysis report + + - name: Upload bundle + uses: actions/upload-artifact@v3 + with: + name: bundle + path: .next/analyze/__bundle_analysis.json + + - name: Download base branch bundle stats + uses: dawidd6/action-download-artifact@v2 + if: success() && github.event.number + with: + workflow: nextjs_bundle_analysis.yml + branch: ${{ github.event.pull_request.base.ref }} + path: .next/analyze/base + + # And here's the second place - this runs after we have both the current and + # base branch bundle stats, and will compare them to determine what changed. + # There are two configurable arguments that come from package.json: + # + # - budget: optional, set a budget (bytes) against which size changes are measured + # it's set to 350kb here by default, as informed by the following piece: + # https://infrequently.org/2021/03/the-performance-inequality-gap/ + # + # - red-status-percentage: sets the percent size increase where you get a red + # status indicator, defaults to 20% + # + # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis` + # entry in your package.json file. + - name: Compare with base branch bundle + if: success() && github.event.number + run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare + + - name: Get comment body + id: get-comment-body + if: success() && github.event.number + uses: actions/github-script@v6 + with: + result-encoding: string + script: | + const fs = require('fs') + const comment = fs.readFileSync('.next/analyze/__bundle_analysis_comment.txt', 'utf8') + core.setOutput('body', comment) + + - name: Find Comment + uses: peter-evans/find-comment@v2 + if: success() && github.event.number + id: fc + with: + issue-number: ${{ github.event.number }} + body-includes: "" + + - name: Create Comment + uses: peter-evans/create-or-update-comment@v2 + if: success() && github.event.number && steps.fc.outputs.comment-id == 0 + with: + issue-number: ${{ github.event.number }} + body: ${{ steps.get-comment-body.outputs.body }} + + - name: Update Comment + uses: peter-evans/create-or-update-comment@v2 + if: success() && github.event.number && steps.fc.outputs.comment-id != 0 + with: + issue-number: ${{ github.event.number }} + body: ${{ steps.get-comment-body.outputs.body }} + comment-id: ${{ steps.fc.outputs.comment-id }} + edit-mode: replace \ No newline at end of file diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml new file mode 100644 index 0000000..f30b9fa --- /dev/null +++ b/.github/workflows/check.yml @@ -0,0 +1,21 @@ +name: Check + +on: + pull_request: + workflow_dispatch: + +jobs: + check: + name: Check + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - run: echo "node_version=$(cat .github/nodejs.version)" >> $GITHUB_ENV + - name: use node ${{ env.node_version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ env.node_version }} + - run: yarn install --frozen-lockfile + - run: yarn lint + - run: yarn prettier + - run: yarn test \ No newline at end of file diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 49a6737..1e10599 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -1,20 +1,24 @@ name: Playwright Tests + on: push: branches: [ main, master ] pull_request: - branches: [ main, master ] + workflow_dispatch: + jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 + - uses: actions/checkout@v3 + - run: echo "node_version=$(cat .github/nodejs.version)" >> $GITHUB_ENV + - name: use node ${{ env.node_version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ env.node_version }} - name: Install dependencies - run: yarn + run: yarn install --frozen-lockfile - name: Install Playwright Browsers run: yarn playwright install --with-deps - name: Run Playwright tests diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..db5ddae --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +.next +node_modules \ No newline at end of file diff --git a/package.json b/package.json index c65ecdc..ec3a9cf 100644 --- a/package.json +++ b/package.json @@ -56,8 +56,8 @@ "@testing-library/react": "^14.0.0", "@total-typescript/ts-reset": "^0.4.2", "@types/node": "^17.0.12", - "@types/react": "^18.0.22", - "@types/react-dom": "^18.0.7", + "@types/react": "^18.0.37", + "@types/react-dom": "^18.0.11", "@typescript-eslint/eslint-plugin": "^5.57.1", "@typescript-eslint/parser": "^5.54.1", "autoprefixer": "^10.4.14", diff --git a/pages/index.tsx b/pages/index.tsx index 202de49..d0bbdb6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,5 @@ import Head from "next/head" +import { Button } from "components/Button/Button" export default function Web() { return ( @@ -16,10 +17,7 @@ export default function Web() { From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.

- + + diff --git a/tailwind.config.js b/tailwind.config.js index c8cde97..7bb282a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -84,4 +84,7 @@ module.exports = { }, }, plugins: [], + future: { + hoverOnlyWhenSupported: true, + } } diff --git a/yarn.lock b/yarn.lock index f5e7b4f..7efc5e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3597,14 +3597,14 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== -"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.7": +"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.11": version "18.0.11" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33" integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw== dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.0.22": +"@types/react@*": version "18.0.29" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.29.tgz#4cead505172c0020c5b51940199e31fc6ff2f63a" integrity sha512-wXHktgUABxplw1+UnljseDq4+uztQyp2tlWZRIxHlpchsCFqiYkvaDS8JR7eKOQm8wziTH/el5qL7D6gYNkYcw== @@ -3622,6 +3622,15 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/react@^18.0.37": + version "18.0.37" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.37.tgz#7a784e2a8b8f83abb04dc6b9ed9c9b4c0aee9be7" + integrity sha512-4yaZZtkRN3ZIQD3KSEwkfcik8s0SWV+82dlJot1AbGYHCzJkWP3ENBY6wYeDRmKZ6HkrgoGAmR2HqdwYGp6OEw== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/scheduler@*": version "0.16.3" resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"