Additional configuration for lint-staged + prettier + typescript-eslint.

BanklessDAO · Feb 13, 2022 · 8520435 · 8520435
1 parent 475bffd
commit 8520435
Show file tree

Hide file tree

Showing 11 changed files with 478 additions and 159 deletions.
diff --git a/.eslintcache b/.eslintcache
@@ -0,0 +1 @@
+[{"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\components\\TodoForm.tsx":"1","C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\config\\theme.ts":"2","C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\_app.tsx":"3","C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\_document.tsx":"4","C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\index.tsx":"5"},{"size":4849,"mtime":1644730339929,"results":"6","hashOfConfig":"7"},{"size":578,"mtime":1644730339955,"results":"8","hashOfConfig":"7"},{"size":309,"mtime":1644730339973,"results":"9","hashOfConfig":"7"},{"size":826,"mtime":1644730339994,"results":"10","hashOfConfig":"7"},{"size":1321,"mtime":1644730340024,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","suppressedMessages":"14","errorCount":2,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"2kmxir",{"filePath":"15","messages":"16","suppressedMessages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\components\\TodoForm.tsx",["27","28","29"],[],"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\config\\theme.ts",[],[],"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\_app.tsx",[],[],"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\_document.tsx",[],[],"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\index.tsx",[],[],{"ruleId":"30","severity":1,"message":"31","line":46,"column":35,"nodeType":"32","messageId":"33","endLine":46,"endColumn":51},{"ruleId":"34","severity":2,"message":"35","line":97,"column":16,"nodeType":"36","messageId":"37"},{"ruleId":"34","severity":2,"message":"35","line":97,"column":40,"nodeType":"36","messageId":"37"},"@typescript-eslint/no-non-null-assertion","Forbidden non-null assertion.","TSNonNullExpression","noNonNull","react/no-unescaped-entities","`'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`.","JSXText","unescapedEntityAlts"]
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
@@ -1,6 +1,6 @@
 module.exports = {
-    '**/*.ts?(x)': filenames =>
-        `next lint --fix --file ${filenames
-            .map(file => file.split(process.cwd())[1])
-            .join(' --file ')}`,
-};
+  '**/*.ts?(x)': filenames =>
+    `next lint --fix --file ${filenames
+      .map(file => file.split(process.cwd())[1])
+      .join(' --file ')}`,
+}
diff --git a/.prettierrc b/.prettierrc
@@ -1,8 +1,8 @@
 {
-  "arrowParens": "avoid",
-  "singleQuote": true,
-  "tabWidth": 4,
-  "jsxSingleQuote": true,
-  "jsxBracketSameLine": true,
-  "semi": false
+    "arrowParens": "avoid",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "jsxSingleQuote": true,
+    "jsxBracketSameLine": true,
+    "semi": false
 }
diff --git a/components/TodoForm.tsx b/components/TodoForm.tsx
@@ -6,167 +6,174 @@ import {
   Box,
   Input,
   Checkbox,
-} from "@chakra-ui/react";
-import { FormEventHandler, useRef, useState } from "react";
-import { FiPlus } from "react-icons/fi";
-import { uniqueId } from "lodash";
+} from '@chakra-ui/react'
+import { FormEventHandler, useRef, useState } from 'react'
+import { FiPlus } from 'react-icons/fi'
+import { uniqueId } from 'lodash'
 
 interface Todo {
-  id: string;
-  title: string;
-  description: string;
+  id: string
+  title: string
+  description: string
 }
 
 interface FormError {
-  [field: string]: { message: string };
+  [field: string]: { message: string }
 }
 
 const TodoForm: React.FC = () => {
-  const [isTextareaShown, setTextareaShown] = useState(false);
-  const [isSubmitting, setSubmitting] = useState(false);
-  const [todoList, setTodoList] = useState<Todo[]>([]);
-  const formRef = useRef<HTMLFormElement>(null);
-  const [errors, setErrors] = useState<FormError>({});
+  const [isTextareaShown, setTextareaShown] = useState(false)
+  const [isSubmitting, setSubmitting] = useState(false)
+  const [todoList, setTodoList] = useState<Todo[]>([])
+  const formRef = useRef<HTMLFormElement>(null)
+  const [errors, setErrors] = useState<FormError>({})
 
   const simulateNetworkRequest = (ms: number) =>
-    new Promise((res) => {
+    new Promise(res => {
       setTimeout(() => {
-        res(true);
-      }, ms);
-    });
+        res(true)
+      }, ms)
+    })
 
   const reset = () => {
-    formRef.current?.reset();
-  };
+    formRef.current?.reset()
+  }
 
-  const onSubmit: FormEventHandler<HTMLFormElement> | undefined = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
+  const onSubmit: FormEventHandler<HTMLFormElement> | undefined = async e => {
+    e.preventDefault()
+    setSubmitting(true)
 
-    const formData = new FormData(formRef.current!);
+    const formData = new FormData(formRef.current as HTMLFormElement)
 
-    if (!formData.get("title")) {
-      setSubmitting(false);
-      return setErrors({ title: { message: "Please provide a title" } });
+    if (!formData.get('title')) {
+      setSubmitting(false)
+      return setErrors({ title: { message: 'Please provide a title' } })
     }
 
-    await simulateNetworkRequest(3000);
-    setSubmitting(false);
-    setErrors({});
-    setTodoList((todos) => [
+    await simulateNetworkRequest(3000)
+    setSubmitting(false)
+    setErrors({})
+    setTodoList(todos => [
       ...todos,
       {
         id: uniqueId(),
-        title: formData.get("title") as string,
-        description: formData.get("description") as string,
+        title: formData.get('title') as string,
+        description: formData.get('description') as string,
       },
-    ]);
-    reset();
-    setTextareaShown(false);
-  };
+    ])
+    reset()
+    setTextareaShown(false)
+  }
 
   return (
-    <Box ml="4rem" mt="3.75rem">
-      <Flex justifyItems="center">
+    <Box ml='4rem' mt='3.75rem'>
+      <Flex justifyItems='center'>
         <Text
-          as="span"
-          fontWeight="600"
-          color="gray.100"
-          display="block"
-          fontSize="2xl"
-          mr="2rem"
+          as='span'
+          fontWeight='600'
+          color='gray.100'
+          display='block'
+          fontSize='2xl'
+          mr='2rem'
         >
           Today
         </Text>
         <Button
-          variant="outline"
-          color="gray.200"
-          _hover={{ color: "gray.700", backgroundColor: "white" }}
+          variant='outline'
+          color='gray.200'
+          _hover={{ color: 'gray.700', backgroundColor: 'white' }}
           leftIcon={<FiPlus />}
-          display={isTextareaShown ? "none" : "block"}
+          display={isTextareaShown ? 'none' : 'block'}
           onClick={() => {
-            setTextareaShown(true);
+            setTextareaShown(true)
           }}
         >
           Add task
         </Button>
       </Flex>
-      <Box mt="2rem">
+      <Box mt='2rem'>
         {!todoList.length && !isTextareaShown && (
-          <Text as="span" color="gray.200">
-            You're all cleared! You don't have to do anything for today.
+          <Text as='span' color='gray.200'>
+            You&apos;re all cleared! You don&apos;t have to do anything for
+            today.
           </Text>
         )}
-        {todoList.map((todo) => (
+        {todoList.map(todo => (
           <Flex
             key={todo.id}
-            border="1px solid white"
-            borderRadius="6px"
-            minW="md"
-            p="16px 20px"
-            color="white"
-            justifyItems="start"
+            border='1px solid white'
+            borderRadius='6px'
+            minW='md'
+            p='16px 20px'
+            color='white'
+            justifyItems='start'
           >
-            <Box mt="4px" mr="16px">
+            <Box mt='4px' mr='16px'>
               <Checkbox
-                onChange={(e) => {
+                onChange={e => {
                   if (e.target.checked) {
-                    setTodoList((existingTodos) =>
-                      existingTodos.filter((e) => e.id !== todo.id)
-                    );
+                    setTodoList(existingTodos =>
+                      existingTodos.filter(e => e.id !== todo.id)
+                    )
                   }
                 }}
               />
             </Box>
             <Box>
-              <Text as="span" display="block">
+              <Text as='span' display='block'>
                 {todo.title}
               </Text>
-              <Text as="p" fontSize="xs" color="gray.200" mt="4px">
+              <Text as='p' fontSize='xs' color='gray.200' mt='4px'>
                 {todo.description}
               </Text>
             </Box>
           </Flex>
         ))}
       </Box>
-      <Box display={isTextareaShown ? "block" : "none"} minW="400px">
+      <Box display={isTextareaShown ? 'block' : 'none'} minW='400px'>
         <form onSubmit={onSubmit} ref={formRef}>
           <Input
-            type="text"
-            placeholder="Title"
+            type='text'
+            placeholder='Title'
             isInvalid={!!errors?.title}
-            color="gray.200"
-            name="title"
+            color='gray.200'
+            name='title'
           />
-          <Text as="span" display="block" color="red.400" fontSize="sm">
+          <Text as='span' display='block' color='red.400' fontSize='sm'>
             {errors?.title?.message}
           </Text>
           <Textarea
-            color="gray.200"
-            placeholder="Describe what you will do..."
-            mt="0.5rem"
-            name="description"
+            color='gray.200'
+            placeholder='Describe what you will do...'
+            mt='0.5rem'
+            name='description'
           />
-          <Flex mt="2rem">
+          <Flex mt='2rem'>
             <Button
-              type="submit"
-              colorScheme="blackAlpha"
-              color="gray.200"
-              _hover={{ color: "gray.700", backgroundColor: "white" }}
-              mr="0.5rem"
+              type='submit'
+              colorScheme='blackAlpha'
+              color='gray.200'
+              _hover={{
+                color: 'gray.700',
+                backgroundColor: 'white',
+              }}
+              mr='0.5rem'
               isLoading={isSubmitting}
               isDisabled={isSubmitting}
             >
               Add task
             </Button>
             <Button
-              type="button"
-              variant="outline"
-              color="gray.200"
-              _hover={{ color: "gray.700", backgroundColor: "white" }}
+              type='button'
+              variant='outline'
+              color='gray.200'
+              _hover={{
+                color: 'gray.700',
+                backgroundColor: 'white',
+              }}
               onClick={() => {
-                setTextareaShown(false);
-                reset();
+                setTextareaShown(false)
+                reset()
               }}
               isDisabled={isSubmitting}
             >
@@ -176,7 +183,7 @@ const TodoForm: React.FC = () => {
         </form>
       </Box>
     </Box>
-  );
-};
+  )
+}
 
-export default TodoForm;
+export default TodoForm
diff --git a/config/theme.ts b/config/theme.ts
@@ -1,29 +1,29 @@
-import { extendTheme } from "@chakra-ui/react";
+import { extendTheme } from '@chakra-ui/react'
 
 const theme = extendTheme({
   colors: {
-    "dark-1": "#1A1C20",
-    "dark-2": "#2B2D33",
-    "dark-3": "#33363D",
+    'dark-1': '#1A1C20',
+    'dark-2': '#2B2D33',
+    'dark-3': '#33363D',
   },
   fonts: {
     body: "'Inter', sans-serif",
   },
   fontSizes: {
-    xs: "0.75rem", // 12px
-    sm: "0.875rem", // 14px
-    base: "1rem", // 16px
-    lg: "1.125rem", // 18px
-    xl: "1.25rem", // 20px
-    "2xl": "1.5rem", // 24px
-    "3xl": "1.875rem", // 30px
-    "4xl": "2.25rem", // 36px
-    "5xl": "3rem", // 48px
-    "6xl": "3.75rem", // 60px
+    xs: '0.75rem', // 12px
+    sm: '0.875rem', // 14px
+    base: '1rem', // 16px
+    lg: '1.125rem', // 18px
+    xl: '1.25rem', // 20px
+    '2xl': '1.5rem', // 24px
+    '3xl': '1.875rem', // 30px
+    '4xl': '2.25rem', // 36px
+    '5xl': '3rem', // 48px
+    '6xl': '3.75rem', // 60px
   },
   styles: {
     global: {},
   },
-});
+})
 
-export default theme;
+export default theme
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\components\\TodoForm.tsx":"1","C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\config\\theme.ts":"2","C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\_app.tsx":"3","C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\_document.tsx":"4","C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\index.tsx":"5"},{"size":4849,"mtime":1644730339929,"results":"6","hashOfConfig":"7"},{"size":578,"mtime":1644730339955,"results":"8","hashOfConfig":"7"},{"size":309,"mtime":1644730339973,"results":"9","hashOfConfig":"7"},{"size":826,"mtime":1644730339994,"results":"10","hashOfConfig":"7"},{"size":1321,"mtime":1644730340024,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","suppressedMessages":"14","errorCount":2,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"2kmxir",{"filePath":"15","messages":"16","suppressedMessages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\components\\TodoForm.tsx",["27","28","29"],[],"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\config\\theme.ts",[],[],"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\_app.tsx",[],[],"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\_document.tsx",[],[],"C:\\Users\\Rhaidzsal Ali\\Desktop\\code-5\\nextjs-template\\pages\\index.tsx",[],[],{"ruleId":"30","severity":1,"message":"31","line":46,"column":35,"nodeType":"32","messageId":"33","endLine":46,"endColumn":51},{"ruleId":"34","severity":2,"message":"35","line":97,"column":16,"nodeType":"36","messageId":"37"},{"ruleId":"34","severity":2,"message":"35","line":97,"column":40,"nodeType":"36","messageId":"37"},"@typescript-eslint/no-non-null-assertion","Forbidden non-null assertion.","TSNonNullExpression","noNonNull","react/no-unescaped-entities","`'` can be escaped with `'`, `‘`, `'`, `’`.","JSXText","unescapedEntityAlts"]