Test

.eslintrc.json

@@ -1,8 +1,8 @@
 {
-    // ...
-    "extends": [
-      "next/core-web-vitals",
-      "prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code.
-    ]
-    // ...
-  }
+  // ...
+  "extends": [
+    "next/core-web-vitals",
+    "prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code.
+  ]
+  // ...
+}

.github/workflows/actions.yml

@@ -0,0 +1,60 @@
+name: Workflow
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  build-project: #First Job is to check the code formatting, linting and build the project.
+    if: github.event.pull_request.draft == false
+    name: Run Prettier, Lint and Build Checks
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Code Formatting Check #Runs Prettier Script
+        run: npm run prettier
+
+      - name: Linting Check #Runs ESLint Script
+        run: npm run lint
+
+      - name: Build #Build the project
+        run: npm run build
+
+      - name: Check Build Status
+        run: |
+          if [ $? -eq 0 ]; then
+            echo "Build successful!🎉"
+          else
+            echo "Build failed!"
+            exit 1
+          fi
+
+  chromatic-deployment: #Second Job is to deploy the project to Chromatic
+    if: github.event.pull_request.draft == false
+    name: Deploy Storybook to Chromatic
+    runs-on: ubuntu-latest # Operating System
+    # Job steps
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+      - name: Install dependencies
+        run: npm install
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.prettierrc.json

@@ -1,7 +1,7 @@
 {
-    "semi": false,
-    "trailingComma": "es5",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "useTabs": false
-}
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

.storybook/main.js

@@ -1,19 +1,19 @@
 /** @type { import('@storybook/nextjs').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../public'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
   ],
   framework: {
-    name: "@storybook/nextjs",
+    name: '@storybook/nextjs',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
-};
-export default config;
+}
+export default config

.storybook/preview.js

@@ -1,15 +1,15 @@
 /** @type { import('@storybook/react').Preview } */
-import '../src/app/globals.css';
+import '../src/app/globals.css'
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
   },
-};
+}
 
-export default preview;
+export default preview

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
-    },
-    // Add those two lines:
-    "editor.formatOnSave": true, // Tell VSCode to format files on save
-    "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
-}
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  // Add those two lines:
+  "editor.formatOnSave": true, // Tell VSCode to format files on save
+  "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
+}

package.json

@@ -9,7 +9,8 @@
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_1a0522d85a68f99"
+    "prettier": "npx prettier . --check",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "autoprefixer": "10.4.16",

src/app/page.js

@@ -1,7 +1,7 @@
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center p-24">
-        <h1 className="text-5xl font-bold z-20">BacPac</h1>
+      <h1 className="text-5xl font-bold z-20">BacPac</h1>
     </main>
   )
 }

src/stories/Button.jsx

@@ -1,16 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
+import React from 'react'
+import PropTypes from 'prop-types'
+import './button.css'
 
 /**
  * Primary UI component for user interaction
  */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary'
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' '
+      )}
       {...props}
     >
       {label}
@@ -20,8 +24,8 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
         }
       `}</style>
     </button>
-  );
-};
+  )
+}
 
 Button.propTypes = {
   /**
@@ -44,11 +48,11 @@ Button.propTypes = {
    * Optional click handler
    */
   onClick: PropTypes.func,
-};
+}
 
 Button.defaultProps = {
   backgroundColor: null,
   primary: false,
   size: 'medium',
   onClick: undefined,
-};
+}

src/stories/Button.stories.js

@@ -1,4 +1,4 @@
-import { Button } from './Button';
+import { Button } from './Button'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const ButtonStories = {
@@ -14,43 +14,42 @@ const ButtonStories = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-};
+}
 
-export default ButtonStories;
+export default ButtonStories
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
     label: 'Button',
   },
-};
+}
 
 export const Secondary = {
   args: {
     label: 'Button',
   },
-};
+}
 
 export const Large = {
   args: {
     size: 'large',
     label: 'Button',
   },
-};
+}
 
 export const Small = {
   args: {
     size: 'small',
     label: 'Button',
   },
-};
-
+}
 
 export const Warning = {
   args: {
     primary: true,
     label: 'Delete now',
     backgroundColor: 'red',
-  }
-};
+  },
+}