fix: workflow for dev (#29)

* ci: lint, prettier and typo check

* fix: eslint code changes

* format: prettier format code

* ci: peer dependency yarn error and rebuild yarn.lock

Author: Emmanuel-Develops

.github/workflows/check-code.yml

@@ -0,0 +1,31 @@
+name: Check Code
+
+on:
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Run lint
+        run: yarn lint
+      
+      - name: Check formatting
+        run: yarn format:check
+
+      - name: Run typecheck
+        run: yarn typecheck
+

.github/workflows/spellings.yml

@@ -0,0 +1,16 @@
+name: Spelling
+
+on:
+  pull_request:
+
+jobs:
+  spelling:
+    name: Spell Check with Typos
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Actions Repository
+        uses: actions/checkout@v3
+      - name: Spell Check Repo
+        uses: crate-ci/typos@master
+        with:
+          config: typos.toml

eslint.config.js

@@ -0,0 +1,29 @@
+const typescript = require('@typescript-eslint/eslint-plugin');
+const typescriptParser = require('@typescript-eslint/parser');
+const react = require('eslint-plugin-react');
+
+module.exports = [
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    plugins: {
+      '@typescript-eslint': typescript,
+      'react': react,
+    },
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    rules: {
+      ...typescript.configs['recommended'].rules,
+      ...react.configs['recommended'].rules,
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+];

package.json

@@ -39,7 +39,12 @@
     "test": "jest",
     "prepublishOnly": "npm run build",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
+    "typecheck": "tsc --noEmit",
+    "format:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "check-code": "yarn lint && yarn typecheck"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
@@ -61,15 +66,22 @@
     "@storybook/react": "^8.1.10",
     "@storybook/react-webpack5": "^8.1.10",
     "@storybook/test": "^8.1.10",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@types/eslint": "^9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react": "^7.35.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.38",
+    "prettier": "^3.3.3",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "semantic-release": "^24.0.0",

src/components/button/Button.stories.tsx

@@ -1,33 +1,33 @@
 // src/components/Button/Button.stories.tsx
 
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import { Button, ButtonProps } from "./Button";
 
 export default {
-  title: 'Components/Button',
+  title: "Components/Button",
   component: Button,
   argTypes: {
     variant: {
-      control: { type: 'select', options: ['primary', 'secondary'] }
+      control: { type: "select", options: ["primary", "secondary"] },
     },
     disabled: {
-      control: 'boolean'
+      control: "boolean",
     },
-    onClick: { action: 'clicked' }
+    onClick: { action: "clicked" },
   },
 } as Meta;
 
 const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {
-  label: 'Primary Button',
-  variant: 'primary',
+  label: "Primary Button",
+  variant: "primary",
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  label: 'Disabled Button',
+  label: "Disabled Button",
   disabled: true,
-};
+};

src/components/button/Button.tsx

@@ -1,48 +1,44 @@
 // src/components/Button/Button.tsx
 
-import React from 'react';
-import '../../styles/tailwind.output.css';
+import React from "react";
+import "../../styles/tailwind.output.css";
 
 export interface ButtonProps {
   label: string;
   onClick?: () => void;
-  variant?: 'primary' | 'secondary';
-  size?: 'small' | 'medium' | 'large';
+  variant?: "primary" | "secondary";
+  size?: "small" | "medium" | "large";
   disabled?: boolean;
 }
 
 export const Button: React.FC<ButtonProps> = ({
   label,
   onClick,
-  variant = 'primary',
-  size = 'medium',
+  variant = "primary",
+  size = "medium",
   disabled = false,
 }) => {
-  const baseStyles = 'font-bold py-2 px-4 rounded';
+  const baseStyles = "font-bold py-2 px-4 rounded";
   const variantStyles = {
-    primary: 'bg-blue-500 hover:bg-blue-700 text-white',
-    secondary: 'bg-gray-300 hover:bg-gray-400 text-gray-800',
+    primary: "bg-blue-500 hover:bg-blue-700 text-white",
+    secondary: "bg-gray-300 hover:bg-gray-400 text-gray-800",
   };
   const sizeStyles = {
-    small: 'text-sm',
-    medium: 'text-base',
-    large: 'text-lg',
+    small: "text-sm",
+    medium: "text-base",
+    large: "text-lg",
   };
 
   const className = `
     ${baseStyles}
     ${variantStyles[variant]}
     ${sizeStyles[size]}
-    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+    ${disabled ? "opacity-50 cursor-not-allowed" : ""}
   `.trim();
 
   return (
-    <button
-      className={className}
-      onClick={onClick}
-      disabled={disabled}
-    >
+    <button className={className} onClick={onClick} disabled={disabled}>
       {label}
     </button>
   );
-};
+};

src/components/button/index.tsx

@@ -1 +1 @@
-export * from './Button';
+export * from "./Button";

src/components/carousel/Carousel.stories.tsx

@@ -7,30 +7,39 @@ import { ArrowLeft, ArrowRight } from "../../icons";
 export default {
   title: "Components/Carousel",
   argTypes: {
-    colorMode: { control: { type: "radio" }, options: ["light", "dark"], defaultValue: "light" }
-  }
+    colorMode: {
+      control: { type: "radio" },
+      options: ["light", "dark"],
+      defaultValue: "light",
+    },
+  },
 } as Meta;
 
 const PlaceholderCarouselItem = () => {
   return (
-    <div className={`w-[300px] rounded-md p-2 border border-gray-200 shadow-sm`}>
-     <h2 className="text-2xl font-bold mb-4 text-gray-600">
-      Lorem ipsum dolor sit amet
-     </h2>
-     <p className="text-sm text-gray-800">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatibus illum quae officia hic, provident aliquam? Quos nemo asperiores, consequuntur molestiae culpa rem ea corporis ratione voluptatibus pariatur tenetur perspiciatis.
-     </p>
+    <div
+      className={`w-[300px] rounded-md p-2 border border-gray-200 shadow-sm`}
+    >
+      <h2 className="text-2xl font-bold mb-4 text-gray-600">
+        Lorem ipsum dolor sit amet
+      </h2>
+      <p className="text-sm text-gray-800">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos
+        voluptatibus illum quae officia hic, provident aliquam? Quos nemo
+        asperiores, consequuntur molestiae culpa rem ea corporis ratione
+        voluptatibus pariatur tenetur perspiciatis.
+      </p>
     </div>
-  )
-}
+  );
+};
 
-export const CarouselSample = (args: any) => {
+export const CarouselSample = (args: { colorMode: "light" | "dark" }) => {
   const { colorMode } = args;
   const isDark = colorMode === "dark";
 
   return (
     <div className={isDark ? "dark" : ""}>
-      <Carousel config={{stepWidthInPercent: 40}}>
+      <Carousel config={{ stepWidthInPercent: 40 }}>
         <Carousel.Container>
           <Carousel.Item>
             <PlaceholderCarouselItem />