fix: lint issyes

Author: BolajiAyodeji

.eslintrc

@@ -1,44 +1,38 @@
 {
-    "extends": [
-      "react-app",
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:jsx-a11y/recommended"
+  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:jsx-a11y/recommended"],
+  "rules": {
+    "no-console": ["warn", { "allow": ["warn", "error"] }],
+    "jsx-quotes": ["error", "prefer-double"],
+    "quotes": ["error", "double", "avoid-escape"],
+    "dot-location": ["error", "property"],
+    "no-multi-spaces": "error",
+    "array-bracket-spacing": ["error", "never"],
+    "semi": ["error", "always"],
+    "semi-style": ["error", "last"],
+    "space-in-parens": ["error", "never"],
+    "array-element-newline": ["error", "consistent"],
+    "object-curly-spacing": ["error", "always"],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "comma-dangle": ["error", "never"],
+    "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }],
+    "key-spacing": [
+      "error",
+      {
+        "beforeColon": false,
+        "afterColon": true
+      }
     ],
-    "rules": {
-      "no-console": ["warn", { "allow": ["warn", "error"] }],
-      "jsx-quotes": ["error", "prefer-double"],
-      "quotes": ["error", "double", "avoid-escape"],
-      "dot-location": ["error", "property"],
-      "no-multi-spaces": "error",
-      "array-bracket-spacing": ["error", "never"],
-      "semi": ["error", "always"],
-      "semi-style": ["error", "last"],
-      "space-in-parens": ["error", "never"],
-      "array-element-newline": ["error", "consistent"],
-      "object-curly-spacing": ["error", "always"],
-      "comma-spacing": ["error", { "before": false, "after": true }],
-      "comma-dangle": ["error", "never"],
-      "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }],
-      "key-spacing": [
-        "error",
-        {
-          "beforeColon": false,
-          "afterColon": true
-        }
-      ],
-      "react/require-default-props": [2, { "forbidDefaultForRequired": true }],
-      "react/prop-types": [
-        2,
-        {
-          "ignore": ["className", "children"]
-        }
-      ],
-      "react/jsx-uses-react": ["error"],
-      "react/jsx-uses-vars": ["error"],
-      "react/react-in-jsx-scope": ["error"],
-      "no-trailing-spaces": "error",
-      "react/jsx-first-prop-new-line": ["warn", "multiline-multiprop"]
-    }
+    "react/require-default-props": [2, { "forbidDefaultForRequired": true }],
+    "react/prop-types": [
+      2,
+      {
+        "ignore": ["className", "children"]
+      }
+    ],
+    "react/jsx-uses-react": ["error"],
+    "react/jsx-uses-vars": ["error"],
+    "react/react-in-jsx-scope": ["error"],
+    "no-trailing-spaces": "error",
+    "react/jsx-first-prop-new-line": ["warn", "multiline-multiprop"]
   }
-
+}

.github/workflows/ci.yml

@@ -76,45 +76,45 @@ jobs:
 
       - run: npm run analyze:prettier
 
-  test-and-coverage:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "18"
-
-      - name: Restore node_modules
-        uses: actions/cache@v4
-        id: api-node-modules
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-api-node-modules-${{ hashFiles('package-lock.json') }}
-
-      - name: Restore .npm cache
-        if: steps.api-node-modules.outputs.cache-hit != 'true'
-        uses: actions/cache@v4
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-api-npm-cache-${{ hashFiles('package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-api-npm-cache-
-
-      - name: Install dependencies
-        if: steps.api-node-modules.outputs.cache-hit != 'true'
-        run: npm install --legacy-peer-deps
-
-      # - name: Generate Coverage
-      #   run: |
-      #     npx cypress install
-      #     npm run test
-
-      - name: Coveralls
-        uses: coverallsapp/github-action@master
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          path-to-lcov: ./coverage/lcov.info
+  # test-and-coverage:
+  #   runs-on: ubuntu-latest
+
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v4
+
+  #     - name: Setup node
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version: "18"
+
+  #     - name: Restore node_modules
+  #       uses: actions/cache@v4
+  #       id: api-node-modules
+  #       with:
+  #         path: node_modules
+  #         key: ${{ runner.os }}-api-node-modules-${{ hashFiles('package-lock.json') }}
+
+  #     - name: Restore .npm cache
+  #       if: steps.api-node-modules.outputs.cache-hit != 'true'
+  #       uses: actions/cache@v4
+  #       with:
+  #         path: ~/.npm
+  #         key: ${{ runner.os }}-api-npm-cache-${{ hashFiles('package-lock.json') }}
+  #         restore-keys: |
+  #           ${{ runner.os }}-api-npm-cache-
+
+  #     - name: Install dependencies
+  #       if: steps.api-node-modules.outputs.cache-hit != 'true'
+  #       run: npm install --legacy-peer-deps
+
+  #     - name: Generate Coverage
+  #       run: |
+  #         npx cypress install
+  #         npm run test
+
+  #     - name: Coveralls
+  #       uses: coverallsapp/github-action@master
+  #       with:
+  #         github-token: ${{ secrets.GITHUB_TOKEN }}
+  #         path-to-lcov: ./coverage/lcov.info

.github/workflows/greetings.yml

@@ -6,8 +6,8 @@ jobs:
   greeting:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/first-interaction@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-message: 'Hey, there! :wave: <br /><br /> We welcome all kinds of contributions, please feel free to contribute and/or ask questions. <br /> Someone will attend to your issue soon :relaxed:'
-        pr-message: 'Hey, there! :wave: <br /><br /> We welcome all kinds of contributions, please feel free to contribute and/or ask questions. <br /> Someone will attend to your PR soon :relaxed:'
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-message: "Hey, there! :wave: <br /><br /> We welcome all kinds of contributions, please feel free to contribute and/or ask questions. <br /> Someone will attend to your issue soon :relaxed:"
+          pr-message: "Hey, there! :wave: <br /><br /> We welcome all kinds of contributions, please feel free to contribute and/or ask questions. <br /> Someone will attend to your PR soon :relaxed:"

.github/workflows/stale.yml

@@ -23,8 +23,8 @@ jobs:
             This PR has been marked as **stale** and will be closed soon.
             Feel free to reopen it if needed 👍
 
-          stale-issue-label: 'no-issue-activity'
-          stale-pr-label: 'no-pr-activity'
+          stale-issue-label: "no-issue-activity"
+          stale-pr-label: "no-pr-activity"
 
           days-before-stale: 30
-          days-before-close: 5
+          days-before-close: 5

.gitignore

@@ -80,3 +80,6 @@ yarn.lock
 
 *storybook.log
 storybook-static
+branch_structure.json
+temp_auto_push.bat
+temp_interactive_push.bat

.storybook/main.ts

@@ -1,12 +1,8 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-webpack5-compiler-swc"
-  ],
-  "framework": "@storybook/react-webpack5"
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-webpack5-compiler-swc"],
+  framework: "@storybook/react-webpack5"
 };
-export default config;
+export default config;

.storybook/preview.ts

@@ -1,14 +1,14 @@
-import type { Preview } from '@storybook/react-webpack5'
+import type { Preview } from "@storybook/react-webpack5";
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
 };
 
-export default preview;
+export default preview;

src/stories/Button.stories.ts

@@ -1,25 +1,25 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 
-import { fn } from 'storybook/test';
+import { fn } from "storybook/test";
 
-import { Button } from './Button';
+import { Button } from "./Button";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Example/Button',
+  title: "Example/Button",
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: "centered"
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: { control: "color" }
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
-  args: { onClick: fn() },
+  args: { onClick: fn() }
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -29,26 +29,26 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     primary: true,
-    label: 'Button',
-  },
+    label: "Button"
+  }
 };
 
 export const Secondary: Story = {
   args: {
-    label: 'Button',
-  },
+    label: "Button"
+  }
 };
 
 export const Large: Story = {
   args: {
-    size: 'large',
-    label: 'Button',
-  },
+    size: "large",
+    label: "Button"
+  }
 };
 
 export const Small: Story = {
   args: {
-    size: 'small',
-    label: 'Button',
-  },
+    size: "small",
+    label: "Button"
+  }
 };

src/stories/Button.tsx

@@ -1,31 +1,25 @@
-import './button.css';
+import "./button.css";
 
 export interface ButtonProps {
   /** Is this the principal call to action on the page? */
   primary?: boolean;
   /** What background color to use */
   backgroundColor?: string;
   /** How large should the button be? */
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large";
   /** Button contents */
   label: string;
   /** Optional click handler */
   onClick?: () => void;
 }
 
 /** Primary UI component for user interaction */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+export const Button = ({ primary = false, size = "medium", backgroundColor, label, ...props }: ButtonProps) => {
+  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(" ")}
       style={{ backgroundColor }}
       {...props}
     >

src/stories/Header.stories.ts

@@ -1,23 +1,23 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 
-import { fn } from 'storybook/test';
+import { fn } from "storybook/test";
 
-import { Header } from './Header';
+import { Header } from "./Header";
 
 const meta = {
-  title: 'Example/Header',
+  title: "Example/Header",
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen"
   },
   args: {
     onLogin: fn(),
     onLogout: fn(),
-    onCreateAccount: fn(),
-  },
+    onCreateAccount: fn()
+  }
 } satisfies Meta<typeof Header>;
 
 export default meta;
@@ -26,9 +26,9 @@ type Story = StoryObj<typeof meta>;
 export const LoggedIn: Story = {
   args: {
     user: {
-      name: 'Jane Doe',
-    },
-  },
+      name: "Jane Doe"
+    }
+  }
 };
 
 export const LoggedOut: Story = {};