From 038c559ec14a6a46317e60bef21803d2be554165 Mon Sep 17 00:00:00 2001 From: gimnathperera Date: Fri, 29 Sep 2023 23:44:36 +0530 Subject: [PATCH] config: configure lint and pre-commit hooks --- .eslintignore | 1 + .eslintrc.json | 53 +- .husky/pre-commit | 41 + .prettierrc.js | 17 + app/layout.tsx | 36 +- app/page.tsx | 24 +- components/color-list/index.tsx | 42 +- components/colorbox/active.tsx | 12 +- components/colorbox/disabled.tsx | 14 +- components/colorbox/index.tsx | 4 +- components/footer/index.tsx | 6 +- components/header/index.tsx | 19 +- components/hero/index.tsx | 36 +- components/icons/github.tsx | 17 +- components/icons/prohibit.tsx | 16 +- components/icons/upload.tsx | 28 +- components/uploader/index.tsx | 50 +- config/site.ts | 16 +- constants/index.ts | 14 +- next.config.js | 4 +- package.json | 16 +- pnpm-lock.yaml | 2578 +++++++++++++++++++++++------- postcss.config.js | 2 +- tailwind.config.ts | 17 +- types/colorthief/index.d.ts | 2 +- 25 files changed, 2244 insertions(+), 821 deletions(-) create mode 100644 .eslintignore create mode 100755 .husky/pre-commit create mode 100644 .prettierrc.js diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..07e6e47 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +/node_modules diff --git a/.eslintrc.json b/.eslintrc.json index bffb357..ac99ecd 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,54 @@ { - "extends": "next/core-web-vitals" + "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"], + "rules": { + "react/display-name": "off", + "@next/next/no-img-element": "off", + "react/no-unescaped-entities": "off", + "import/no-anonymous-default-export": "off", + "@typescript-eslint/no-unused-vars": "error", + "@typescript-eslint/ban-ts-comment": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/explicit-function-return-type": "error", + "comma-dangle": ["error", "always-multiline"], + + // add new line above return + "newline-before-return": "error", + // add new line below import + "import/newline-after-import": [ + "error", + { + "count": 1 + } + ], + "@typescript-eslint/ban-types": [ + "error", + { + "extendDefaults": true, + "types": { + "{}": false + } + } + ] + }, + "plugins": ["import"], + "settings": { + "import/parsers": { + "@typescript-eslint/parser": [".ts", ".tsx"] + }, + "import/resolver": { + "typescript": { + "alwaysTryTypes": true, + "project": ["./tsconfig.json"] + } + } + }, + "overrides": [ + { + "files": ["src/iconify-bundle/*"], + "rules": { + "@typescript-eslint/no-var-requires": "off" + } + } + ] } diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..5b75cd5 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,41 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +echo '🔍 Preparing to commit: Running code analysis and build process...' + +# Check code formatting using Prettier +pnpm check-format || +( + echo '🔴 Prettier Check Failed: Your code styling does not meet the standards. + Please run "pnpm format", add the changes, and then reattempt the commit.'; + false; +) + +# Check code quality using ESLint +pnpm check-lint || +( + echo '🔴 ESLint Check Failed: Your code contains quality issues that need to be addressed. + Review the listed problems, make the necessary changes, and try committing again.' + false; +) + +# Validate TypeScript type correctness +pnpm check-types || +( + echo '🔴 Type Check Failed: There are issues with the TypeScript type correctness. + Please resolve the indicated problems before proceeding.' + false; +) + +# If all checks pass, proceed to build +echo '📦 Building the project...' + +pnpm build || +( + echo '🔴 Build Failed: The project failed to build properly. + Examine the error messages above for insights into the issues.' + false; +) + +# If all checks and build pass, proceed to commit +echo '✅ All checks passed. Committing changes...' diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..64c9110 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,17 @@ +module.exports = { + arrowParens: 'avoid', + bracketSpacing: true, + htmlWhitespaceSensitivity: 'css', + insertPragma: false, + bracketSameLine: false, + jsxSingleQuote: true, + printWidth: 100, + proseWrap: 'preserve', + quoteProps: 'as-needed', + requirePragma: false, + semi: true, + singleQuote: true, + tabWidth: 2, + trailingComma: 'all', + useTabs: false, +}; diff --git a/app/layout.tsx b/app/layout.tsx index 49f74cf..34695d5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,11 +1,12 @@ -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import Header from "@/components/header"; -import Footer from "@/components/footer"; -import { siteConfig } from "@/config/site"; -import "@/styles/globals.css"; +import type { Metadata } from 'next'; +import { Inter } from 'next/font/google'; +import Header from '@/components/header'; +import Footer from '@/components/footer'; +import { siteConfig } from '@/config/site'; +import '@/styles/globals.css'; +import { FC } from 'react'; -const inter = Inter({ subsets: ["latin"] }); +const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: { @@ -14,26 +15,23 @@ export const metadata: Metadata = { }, description: siteConfig.description, icons: { - icon: "/favicon.ico", - shortcut: "/favicon.ico", - apple: "/favicon.ico", + icon: '/favicon.ico', + shortcut: '/favicon.ico', + apple: '/favicon.ico', }, }; -export default function RootLayout({ - children, -}: { - children: React.ReactNode; -}) { +const RootLayout: FC<{ children: React.ReactNode }> = ({ children }) => { return ( - + -
+
-
{children}
+
{children}
); -} +}; +export default RootLayout; diff --git a/app/page.tsx b/app/page.tsx index 907f7da..d07d44f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,15 +1,15 @@ -"use client"; -import { Toaster } from "react-hot-toast"; -import Hero from "@/components/hero"; -import { useState } from "react"; -import Uploader from "@/components/uploader"; -import { ColorInfo } from "@/types/uploader"; -import ColorList from "@/components/color-list"; +'use client'; +import { Toaster } from 'react-hot-toast'; +import Hero from '@/components/hero'; +import { FC, useState } from 'react'; +import Uploader from '@/components/uploader'; +import { ColorInfo } from '@/types/uploader'; +import ColorList from '@/components/color-list'; -const Home = () => { +const Home: FC = () => { const [colorPalette, setColorPalette] = useState(null); - const onImageSelect = (colors: ColorInfo[]) => { + const onImageSelect = (colors: ColorInfo[]): void => { setColorPalette(colors); }; @@ -17,14 +17,14 @@ const Home = () => {
-
-
+
+
- +
); }; diff --git a/components/color-list/index.tsx b/components/color-list/index.tsx index 14f9c16..d9f55b9 100644 --- a/components/color-list/index.tsx +++ b/components/color-list/index.tsx @@ -1,34 +1,28 @@ -import toast from "react-hot-toast"; -import { - ActiveColorBox as ColorBox, - InactiveColorBox, -} from "@/components/colorbox"; -import { ColorInfo } from "@/types/uploader"; -import { MaxPaletteSize } from "@/constants"; +import toast from 'react-hot-toast'; +import { ActiveColorBox as ColorBox, InactiveColorBox } from '@/components/colorbox'; +import { ColorInfo } from '@/types/uploader'; +import { MaxPaletteSize } from '@/constants'; +import { FC } from 'react'; type Props = { colorPalette: ColorInfo[] | null; }; -const ColorList = ({ colorPalette }: Props) => { +const ColorList: FC = ({ colorPalette }) => { const handleOnCopyToClipboard = (selectedColor: string): void => { - navigator.clipboard.writeText(selectedColor ?? ""); - toast.success("Copied to clipboard"); + navigator.clipboard.writeText(selectedColor ?? ''); + toast.success('Copied to clipboard'); }; - const InactivePanel = () => { + const InactivePanel: FC = () => { const boxes = Array.from({ length: MaxPaletteSize }, (_, index) => ( )); - return ( -
- {boxes} -
- ); + return
{boxes}
; }; - const ActivePanel = () => { + const ActivePanel: FC = () => { const boxes = (colorPalette || []) .slice(0, MaxPaletteSize) .map((colorInfo, index) => ( @@ -39,20 +33,12 @@ const ColorList = ({ colorPalette }: Props) => { /> )); - return ( -
- {boxes} -
- ); + return
{boxes}
; }; return ( -
- {colorPalette && colorPalette?.length > 0 ? ( - - ) : ( - - )} +
+ {colorPalette && colorPalette?.length > 0 ? : }
); }; diff --git a/components/colorbox/active.tsx b/components/colorbox/active.tsx index 1d05673..d7ba198 100644 --- a/components/colorbox/active.tsx +++ b/components/colorbox/active.tsx @@ -1,25 +1,25 @@ -import ProhibitIcon from "../icons/prohibit"; +import { FC } from 'react'; type Props = { color: string; handleOnCopyToClipboard: (color: string) => void; }; -const ColorBox = ({ color, handleOnCopyToClipboard }: Props) => { +const ColorBox: FC = ({ color, handleOnCopyToClipboard }) => { return (
{ + className='bg-transparent p-1 w-12 h-12 md:w-28 md:h-28 lg:w-28 lg:h-28 rounded-lg shadow-xl border-2 border-gray-300 border-dashed' + onClick={(): void => { handleOnCopyToClipboard(color); }} >
-

+

{color}

diff --git a/components/colorbox/disabled.tsx b/components/colorbox/disabled.tsx index 48ccfcb..5a9f7e2 100644 --- a/components/colorbox/disabled.tsx +++ b/components/colorbox/disabled.tsx @@ -1,16 +1,18 @@ -import ProhibitIcon from "../icons/prohibit"; +import { FC } from 'react'; +import ProhibitIcon from '../icons/prohibit'; type Props = { color?: string; }; -const Disabled = ({ color = "#E5E5E5" }: Props) => { - const backgroundColor = `bg-[${color}]`; - +const Disabled: FC = ({ color = '#E5E5E5' }) => { return ( -
+
diff --git a/components/colorbox/index.tsx b/components/colorbox/index.tsx index a56788c..29dae8e 100644 --- a/components/colorbox/index.tsx +++ b/components/colorbox/index.tsx @@ -1,2 +1,2 @@ -export { default as ActiveColorBox } from "./active"; -export { default as InactiveColorBox } from "./disabled"; +export { default as ActiveColorBox } from './active'; +export { default as InactiveColorBox } from './disabled'; diff --git a/components/footer/index.tsx b/components/footer/index.tsx index 509b557..432e5e6 100644 --- a/components/footer/index.tsx +++ b/components/footer/index.tsx @@ -1,8 +1,10 @@ +import { FC } from 'react'; + type Props = {}; -const Footer = (props: Props) => { +const Footer: FC = () => { return ( -