[TL-DYS-27] [TL-DYS-28] Added pre-commit and added/fix linting and prettier format

.husky/pre-commit

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

client/.eslintrc.cjs

@@ -1,18 +1,17 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", "plugin:prettier/recommended"],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto",
+      },
     ],
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
   },
-}
+};

client/.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "src/**/*.{ts,tsx,js,jsx,json,css,scss,md}": ["eslint --quiet --fix", "prettier --write"]
+}

client/package.json

@@ -7,6 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --quiet --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -36,10 +38,21 @@
     "@typescript-eslint/parser": "^6.7.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.0.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   },
+  "prettier": {
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": false,
+    "printWidth": 200,
+    "tabWidth": 2,
+    "endOfLine": "auto"
+  },
   "homepage": "https://www.diyspire.online"
 }

client/src/components/CustomMarkdown.tsx

@@ -51,9 +51,15 @@ const CustomMarkdown: React.FC<CustomMarkdownrProps> = ({ content }) => {
           h6: { component: Heading, props: { as: "h6", size: "xs", mb: 3 } },
           p: { component: Text, props: { mb: 5 } },
           ul: { component: List, props: { styleType: "disc", ml: 4, mb: 4 } },
-          ol: { component: List, props: { styleType: "decimal", ml: 4, mb: 4 } },
+          ol: {
+            component: List,
+            props: { styleType: "decimal", ml: 4, mb: 4 },
+          },
           li: { component: ListItem, props: { mb: 3 } },
-          a: { component: Link, props: { mb: 2, textDecorationLine: "underline" } },
+          a: {
+            component: Link,
+            props: { mb: 2, textDecorationLine: "underline" },
+          },
           img: { component: Image, props: { mb: 4, loading: "lazy" } },
           pre: {
             component: MarkdownPre,

client/src/components/generate/BudgetFilter.tsx

@@ -10,7 +10,7 @@ const BudgetFilter: React.FC<BudgetFilterProps> = ({ onBudgetChange, ...props })
     (value: string | number) => {
       onBudgetChange(Number(value));
     },
-    [onBudgetChange]
+    [onBudgetChange],
   );
 
   return (

client/src/components/generate/MaterialInput.tsx

@@ -16,7 +16,7 @@ const MaterialInput: FC<MaterialInputProps> = ({ materials, setMaterials, onlySp
       updatedMaterials[index] = value;
       setMaterials(updatedMaterials);
     },
-    [materials, setMaterials]
+    [materials, setMaterials],
   );
 
   const handleDeleteInput = useCallback(
@@ -25,7 +25,7 @@ const MaterialInput: FC<MaterialInputProps> = ({ materials, setMaterials, onlySp
       updatedMaterials.splice(index, 1);
       setMaterials(updatedMaterials);
     },
-    [materials, setMaterials]
+    [materials, setMaterials],
   );
 
   const handleAddMore = useCallback(() => {

client/src/components/generate/ProjectTabs.tsx

@@ -20,7 +20,10 @@ interface ProjectTabsProps {
 type OmittedProject = Omit<Project, "steps">;
 
 const ProjectTabs: React.FC<ProjectTabsProps> = ({ projects }) => {
-  const tabOrientation = useBreakpointValue({ base: "vertical", md: "horizontal" }) as "vertical" | "horizontal" | undefined;
+  const tabOrientation = useBreakpointValue({
+    base: "vertical",
+    md: "horizontal",
+  }) as "vertical" | "horizontal" | undefined;
   const toast = useToast();
 
   const handleShare = async (project: Project) => {

client/src/components/generate/TimeAvailabilityFilter.tsx

@@ -13,7 +13,7 @@ const TimeAvailabilityFilter: React.FC<TimeAvailabilityFilterProps> = ({ onTimeC
       setTimeValue(value);
       onTimeChange(value);
     },
-    [onTimeChange]
+    [onTimeChange],
   );
 
   return (

client/src/components/generate/ToolsAvailableInput.tsx

@@ -14,7 +14,7 @@ const ToolsAvailableInput: React.FC<ToolsAvailableInputProps> = ({ tools, setToo
       newTools[index] = value;
       setTools(newTools);
     },
-    [tools, setTools]
+    [tools, setTools],
   );
 
   const handleDeleteTool = useCallback(
@@ -23,7 +23,7 @@ const ToolsAvailableInput: React.FC<ToolsAvailableInputProps> = ({ tools, setToo
       newTools.splice(index, 1);
       setTools(newTools);
     },
-    [tools, setTools]
+    [tools, setTools],
   );
 
   return (

client/src/components/project-details/ProjectImage.tsx

@@ -8,7 +8,6 @@ import { RelatedImages } from "../../types";
 
 interface ProjectImageProps {
   isLoading: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   relatedImages: RelatedImages | null;
   projectTitle: string;
   onOpen: () => void;

client/src/components/project-details/ProjectInfo.tsx

@@ -5,7 +5,6 @@ import { ProjectLocationState } from "../../types";
 
 interface ProjectInfoProps {
   isLoading: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   project: ProjectLocationState;
 }
 
@@ -14,6 +13,7 @@ const ProjectInfo: React.FC<ProjectInfoProps> = ({ isLoading, project }) => {
   const description = useColorModeValue("gray.500", "gray.400");
   const toolsAndMaterials = useColorModeValue("yellow.500", "yellow.300");
   const ellipsisBreakpoint = useBreakpointValue({ base: undefined, lg: 3 });
+
   if (isLoading) {
     return (
       <>

client/src/constants/index.ts

@@ -52,7 +52,11 @@ export const footerData: Footer[] = [
     links: [
       { label: "Getting Started", path: "/faq", hash: "#getting-started" },
       { label: "Usage Guidelines", path: "/faq", hash: "#usage-guidelines" },
-      { label: "Security and Privacy", path: "/faq", hash: "#security-privacy" },
+      {
+        label: "Security and Privacy",
+        path: "/faq",
+        hash: "#security-privacy",
+      },
       { label: "Feedback and Suggestions", path: "/faq", hash: "#feedback" },
     ],
   },

client/src/main.tsx

@@ -12,5 +12,5 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
         <App />
       </ChakraProvider>
     </Router>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

client/src/pages/Home.tsx

@@ -102,7 +102,7 @@ const Home = () => {
         <PurposeFilter onPurposeChange={setPurpose} mt={4} />
       </Box>
     ),
-    [tools]
+    [tools],
   );
 
   return (