Merge pull request #4 from chingu-x/CICD

Initial CICD settings 
add theme colors to DaisyUI 
add font
add ESlint rules

.eslintrc.json

@@ -38,6 +38,37 @@
     "react/destructuring-assignment": [2, "always"],
     "react/button-has-type": 2,
     "react/no-array-index-key": 2,
-    "import/order": 2
+    "import/order": 2,
+    "semi": [2, "always"],
+    "quotes": [2, "double"],
+    "prefer-destructuring": [
+      2,
+      {
+        "VariableDeclarator": {
+          "array": false,
+          "object": true
+        },
+        "AssignmentExpression": {
+          "array": true,
+          "object": false
+        }
+      },
+      {
+        "enforceForRenamedProperties": false
+      }
+    ],
+    "object-curly-spacing": [2, "always"],
+    "arrow-body-style": [2, "as-needed"],
+    "arrow-parens": [2, "always"],
+    "space-infix-ops": 2,
+    "arrow-spacing": [2, { "before": true, "after": true }],
+    "no-unused-vars": [2, { "args": "all", "argsIgnorePattern": "_" }],
+    "guard-for-in": 2,
+    "no-await-in-loop": 2,
+    "indent": [2, 2],
+    "object-curly-newline": [2, { "minProperties": 4, "consistent": true }],
+    "brace-style": 2,
+    "no-multiple-empty-lines": 2,
+    "eol-last": [2, "always"]
   }
 }

.github/workflows/preview.yml

@@ -0,0 +1,29 @@
+name: Deploy PR to Preview
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  pull_request:
+    branches:
+        [main, dev]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - 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 preview
+        id: preview-deploy
+        run: echo "URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} | tail -n 1)" >> $GITHUB_OUTPUT
+      - name: Comment PR
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            Preview URL ${{ steps.preview-deploy.outputs.URL }}
+          comment_tag: execution

.github/workflows/test.yml

@@ -0,0 +1,30 @@
+name: Lint & Test Workflow
+
+on:
+  pull_request:
+    branches: [main, dev]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "18" # current LTS (we have 16 in Docker)
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run Eslint
+        run: yarn lint --strict
+
+      - name: Run Jest tests
+        run: yarn test
+
+      - name: Run Cypress tests
+        run: yarn cypress

.prettierignore

@@ -8,4 +8,5 @@ coverage
 **/out/*
 next-env.d.ts
 next.config.js
-*.md
+*.md
+.github/**

cypress.config.ts

@@ -6,4 +6,6 @@ export default defineConfig({
       // implement node event listeners here
     },
   },
+  video: false,
+  screenshotOnRunFailure: false,
 });

package.json

@@ -9,8 +9,8 @@
     "lint": "next lint",
     "prettier": "prettier . --write",
     "prepare": "husky install",
-    "test": "jest --watch",
-    "cypress": "cypress open"
+    "test": "jest",
+    "cypress": "cypress run"
   },
   "dependencies": {
     "@prisma/client": "5.1.1",

src/app/counter/counter.test.tsx

@@ -1,6 +1,10 @@
 import { render } from "@testing-library/react";
 import CounterPage from "./page";
-
+import { StoreProvider } from "@/components";
 it("should render the component", () => {
-  render(<CounterPage />);
+  render(
+    <StoreProvider>
+      <CounterPage />
+    </StoreProvider>,
+  );
 });

src/app/counter/page.tsx

@@ -34,7 +34,7 @@ function CounterPage() {
         </button>
         <button
           type="button"
-          className="btn btn-primary w-1/2"
+          className="btn btn-secondary w-1/2"
           onClick={handleDecrement}
         >
           -

src/app/layout.tsx

@@ -1,19 +1,27 @@
 import "./globals.css";
 import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 import { StoreProvider } from "@/components";
 
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
 };
 
+// If loading a variable font, you don't need to specify the font weight
+const inter = Inter({
+  weight: ["400", "500", "600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" className={inter.className}>
       <body>
         <StoreProvider>{children}</StoreProvider>
       </body>

tailwind.config.js

@@ -4,8 +4,20 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {
-    extend: {},
+  theme: {},
+  daisyui: {
+    themes: [
+      {
+        chingu: {
+          primary: "#40936d",
+          secondary: "#E6624B",
+          warning: "#f6d860",
+          accent: "#37cdbe",
+          neutral: "#757575",
+          "base-100": "#ffffff",
+        },
+      },
+    ],
   },
   plugins: [require("daisyui")],
 };