Keep/GitHub action (#109)

* Added: Eslint Setup for keep React.

* Fixed: Fixed all the eslint warning.

* Removed: Removed un-wanted console log.

.eslintrc.json

@@ -1,8 +1,8 @@
 {
-  "extends": "next",
+  "extends": ["eslint:recommended", "next", "next/core-web-vitals", "prettier"],
+  "plugins": ["prettier"],
   "rules": {
-    "react/no-unescaped-entities": "off",
-    "@next/next/no-page-custom-font": "off",
+    "prettier/prettier": "error",
     "@next/next/no-img-element": "off"
   }
 }

.github/workflows/ci.yaml

@@ -0,0 +1,32 @@
+name: Continuous Integration
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Fetch all history for all branches and tags
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20.9.0'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run lint
+        run: npm run lint
+
+      - name: Run format check
+        run: npm run format
+
+      - name: Check commit messages
+        uses: wagoid/commitlint-github-action@v3
+        with:
+          configFile: commitlint.config.cjs

.github/workflows/preview.yaml

@@ -0,0 +1,21 @@
+name: GitHub Actions Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Vercel CLI
+        run: npm install --global vercel@canary
+      - 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 }}

.github/workflows/production.yaml

@@ -0,0 +1,21 @@
+name: GitHub Actions Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@canary
+      - 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 }}

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -1,4 +1,5 @@
-*.md
-.gitignore
-build/
-coverage/
+# Ignore artifacts:
+.next/
+
+# Ignore specific files:
+package-lock.json

.prettierrc

@@ -15,4 +15,4 @@
   "printWidth": 120,
   "htmlWhitespaceSensitivity": "ignore",
   "singleAttributePerLine": false
-}
+}

.storybook/main.ts

@@ -1,31 +1,31 @@
-import type { StorybookConfig } from "@storybook/nextjs";
-import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import type { StorybookConfig } from '@storybook/nextjs'
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ['../app/src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
     {
-      name: "@storybook/addon-styling",
+      name: '@storybook/addon-styling',
       options: {
         postCss: true,
       },
     },
   ],
   framework: {
-    name: "@storybook/nextjs",
+    name: '@storybook/nextjs',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
   webpackFinal: (config) => {
-    config.resolve!.plugins = [new TsconfigPathsPlugin()];
-    return config;
+    config.resolve!.plugins = [new TsconfigPathsPlugin()]
+    return config
   },
-  staticDirs: ["../public"],
-};
+  staticDirs: ['../public'],
+}
 
-export default config;
+export default config

.storybook/preview.ts

@@ -1,16 +1,16 @@
-import type { Preview } from "@storybook/react";
-import "./style.css";
+import type { Preview } from '@storybook/react'
+import './style.css'
 
 const preview: 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,5 +1,3 @@
 {
-  "css.customData": [".vscode/tailwind.json"],
-  "css.lint.unknownAtRules": "ignore",
-  "cSpell.words": ["datepicker"]
+  "css.lint.unknownAtRules": "ignore"
 }

components/CodePreview.tsx → app/components/CodePreview.tsx

@@ -1,13 +1,13 @@
 'use client'
 import Image from 'next/image'
 import { Check, Clipboard } from 'phosphor-react'
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import useCopy from '~/hooks/useCopy'
+import useCopy from '../../hooks/useCopy'
 
 interface CodePreviewProps {
-  children: React.ReactNode
+  children: ReactNode
   code: string
   github?: string
 }
@@ -18,12 +18,12 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
   const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/src/components/${github}`
 
   return (
-    <div className="border-metal-200 my-10 w-full overflow-hidden rounded-md border shadow-small">
-      <div className="border-metal-200 -mb-px flex flex-wrap border-b bg-white px-5 text-center">
+    <div className="my-10 w-full overflow-hidden rounded-md border border-metal-200 shadow-small">
+      <div className="-mb-px flex flex-wrap border-b border-metal-200 bg-white px-5 text-center">
         <button
           type="button"
           onClick={() => setActive(0)}
-          className={`text-metal-400 -mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium first:ml-0 ${
+          className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
             active === 0 ? '!border-b-metal-900 text-metal-900' : ''
           }`}
           id="preview-btn">
@@ -32,7 +32,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
         <button
           id="code-btn"
           onClick={() => setActive(1)}
-          className={` text-metal-400 flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5  font-medium first:ml-0 ${
+          className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium  text-metal-400 first:ml-0 ${
             active === 1 ? '!border-b-metal-900 text-metal-900' : ''
           }`}>
           Code
@@ -47,11 +47,11 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
                 id="github-page-link"
                 target="_blank"
                 href={githubUrl}
-                className=" bg-metal-800 hover:bg-metal-700 flex h-8 w-8 items-center justify-center rounded-md transition-all duration-300 md:h-9 md:w-9">
+                className=" flex h-8 w-8 items-center justify-center rounded-md bg-metal-800 transition-all duration-300 hover:bg-metal-700 md:h-9 md:w-9">
                 <Image src="/images/icon/github-white.svg" height={20} width={20} alt="github" />
               </a>
               <button
-                className="border-metal-800 bg-metal-900 hover:bg-metal-700 flex h-8 w-8 items-center justify-center rounded-md border-2 transition-all duration-300 hover:border-transparent md:h-9 md:w-9"
+                className="flex h-8 w-8 items-center justify-center rounded-md border-2 border-metal-800 bg-metal-900 transition-all duration-300 hover:border-transparent hover:bg-metal-700 md:h-9 md:w-9"
                 onClick={() => copyToClipboard(code)}>
                 {copy ? (
                   <span className="flex items-center text-body-6">

components/ComponentApi.tsx → app/components/ComponentApi.tsx

@@ -18,15 +18,15 @@ const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400'] })
 const ComponentApi: FC<ComponentProps> = ({ data }) => {
   return (
     <div className={spaceMono.className + ' mx-auto w-full overflow-auto '}>
-      <table className="whitespace-no-wrap border-metal-100 z-50 mt-10 min-w-max table-auto border bg-white text-left md:w-full lg:min-w-min">
+      <table className="whitespace-no-wrap z-50 mt-10 min-w-max table-auto border border-metal-100 bg-white text-left md:w-full lg:min-w-min">
         <thead>
           <tr>
-            <th className="bg-metal-50 text-metal-900 rounded-bl rounded-tl px-4 py-3 text-body-5 font-medium">
+            <th className="rounded-bl rounded-tl bg-metal-50 px-4 py-3 text-body-5 font-medium text-metal-900">
               Property
             </th>
-            <th className="bg-metal-50 text-metal-900 px-4 py-3 text-body-5 font-medium">Description</th>
-            <th className="bg-metal-50 text-metal-900 rounded-br rounded-tr px-4 py-3 text-body-5 font-medium">Type</th>
-            <th className="bg-metal-50 text-metal-900 rounded-br rounded-tr px-4 py-3 text-body-5 font-medium">
+            <th className="bg-metal-50 px-4 py-3 text-body-5 font-medium text-metal-900">Description</th>
+            <th className="rounded-br rounded-tr bg-metal-50 px-4 py-3 text-body-5 font-medium text-metal-900">Type</th>
+            <th className="rounded-br rounded-tr bg-metal-50 px-4 py-3 text-body-5 font-medium text-metal-900">
               Default
             </th>
           </tr>
@@ -35,22 +35,22 @@ const ComponentApi: FC<ComponentProps> = ({ data }) => {
           {data?.map((item) => {
             return (
               <tr key={item.id}>
-                <td className="border-metal-100 border-t px-4 py-3 text-body-5 !font-medium text-black">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-5 !font-medium text-black">
                   {item.propsName}
                 </td>
-                <td className="border-metal-100 text-metal-500 border-t px-4 py-3 text-body-5">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-5 text-metal-500">
                   {item.propsDescription}
                 </td>
-                <td className="border-metal-100 border-t px-4 py-3 text-body-5 text-pink-400">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-5 text-pink-400">
                   {typeof item.propsType === 'string'
                     ? item.propsType
                     : item.propsType.map((prop) => (
-                        <pre key={prop} className="bg-metal-100 m-0.5 inline-block rounded px-2 py-0.5 ">
+                        <pre key={prop} className="m-0.5 inline-block rounded bg-metal-100 px-2 py-0.5 ">
                           {prop}
                         </pre>
                       ))}
                 </td>
-                <td className="border-metal-100 text-metal-500 border-t px-4 py-3 text-body-5">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-5 text-metal-500">
                   {item.default ? item.default : 'None'}
                 </td>
               </tr>

components/ComponentsList.tsx → app/components/ComponentsList.tsx

@@ -1,10 +1,9 @@
 'use client'
 import { CloudArrowUp, GridFour, Phone, User } from 'phosphor-react'
-import { useState } from 'react'
-import { CustomizedBarSizeWithAxisData } from '~/app/docs/components/barChart/variant/CustomizedBarSizeWithAxisData'
-import { DefaultRadio } from '~/app/docs/components/radio/variant/DefaultRadio'
-
-import { Button, CheckboxGroup, Modal, Pagination, Slider, Tooltip, Tabs, DatePicker } from '~/src'
+import { ChangeEvent, useState } from 'react'
+import { Button, CheckboxGroup, Modal, Pagination, Slider, Tooltip, Tabs, DatePicker } from '../src'
+import { CustomizedBarSizeWithAxisData } from '../docs/components/barChart/variant/CustomizedBarSizeWithAxisData'
+import { DefaultRadio } from '../docs/components/radio/variant/DefaultRadio'
 
 export const SliderComponent = () => {
   return (
@@ -58,7 +57,7 @@ export const BarChartComponent = () => {
 }
 export const CheckboxGroupComponent = () => {
   const [selected, setSelected] = useState('')
-  const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleOptionChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSelected(e.target.value)
   }
   return (
@@ -99,10 +98,9 @@ export const CheckboxGroupComponent = () => {
   )
 }
 export const DatePickerComponent = () => {
-  const [_, setDate] = useState<Date | null>(null)
   return (
     <div className="mx-auto flex w-3/5 scale-75">
-      <DatePicker singleDate={setDate} placeholder="Select date">
+      <DatePicker placeholder="Select date">
         <DatePicker.SingleDate />
       </DatePicker>
     </div>