Initial commit

utkarshsiddharth · Jan 2, 2023 · aecf40a · aecf40a
commit aecf40a
Show file tree

Hide file tree

Showing 33 changed files with 5,400 additions and 0 deletions.
diff --git a/.Prettierignore b/.Prettierignore
@@ -0,0 +1,7 @@
+node_modules
+package.json
+package-lock.json
+yarn.lock
+dist
+build
+public
diff --git a/.Prettierrc.json b/.Prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80
+}
diff --git a/.commitlintrc.json b/.commitlintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,4 @@
+*.css
+*.svg
+src/*.test.ts
+vite.config.ts
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,78 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["airbnb-base", "plugin:prettier/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/no-unescaped-entities": 0,
+    "no-console": "error",
+    "prettier/prettier": [
+      "warn",
+      {
+        "singleQuote": true,
+        "endOfLine": "auto"
+      }
+    ]
+  },
+  "overrides": [
+    // Configuration for TypeScript files
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "plugins": [
+        "@typescript-eslint",
+        "unused-imports",
+        "tailwindcss",
+        "simple-import-sort"
+      ],
+      "extends": [
+        "plugin:tailwindcss/recommended",
+        "airbnb-typescript",
+        "plugin:prettier/recommended"
+      ],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      },
+      "rules": {
+        "prettier/prettier": [
+          "error",
+          {
+            "singleQuote": true,
+            "endOfLine": "auto"
+          }
+        ],
+        "import/extensions": [
+          "off",
+          "ignorePackages",
+          {
+            "": "never"
+          }
+        ],
+        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
+        "react/require-default-props": "off", // Allow non-defined react props as undefined
+        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
+        "react-hooks/exhaustive-deps": "off", // Incorrectly report needed dependency with Next.js router
+        "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
+        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
+        "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
+        "import/prefer-default-export": "off", // Named export is easier to refactor automatically
+        "simple-import-sort/imports": "error", // Import configuration for `eslint-plugin-simple-import-sort`
+        "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`
+        "@typescript-eslint/no-unused-vars": "off",
+        "unused-imports/no-unused-imports": "error",
+        "unused-imports/no-unused-vars": [
+          "error",
+          {
+            "argsIgnorePattern": "^_"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx pretty-quick --staged ng lint ng test
+npx lint-staged
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "mantine-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "prepare": "husky install",
+    "lint": "npx eslint src/*",
+    "lint:fix": "npx eslint src/* --fix",
+    "prettier": "npx prettier --write src/*",
+    "format": "yarn prettier && yarn lint:fix",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@material-tailwind/react": "^1.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.5.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "@vitejs/plugin-react": "^3.0.0",
+    "autoprefixer": "^10.4.13",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.30.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-tailwindcss": "^3.7.1",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "husky": "^8.0.2",
+    "jsdom": "^20.0.3",
+    "lint-staged": "^13.1.0",
+    "postcss": "^8.4.20",
+    "prettier": "^2.8.1",
+    "pretty-quick": "^3.1.3",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vitest": "^0.25.8"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npx pretty-quick --staged ng lint ng test",
+      "pre-push": "ng build --aot true"
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npx prettier --write",
+      "npx eslint --fix"
+    ]
+  }
+}
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
+
+import { About, Home, NotFound } from '@/screens'
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </Router>
+  )
+}
+
+export default App
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Header = () => {
+  return <div>Header</div>
+}
+
+export default Header
diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts
@@ -0,0 +1 @@
+export { default as Header } from './Header'
diff --git a/src/components/common/Counter/Counter.test.tsx b/src/components/common/Counter/Counter.test.tsx
@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, it } from 'vitest'
+
+import Counter from './Counter'
+
+describe('Testing Counter Component', () => {
+  const incrementBy = 1
+  const decrementBy = 2
+  // Arrange
+  beforeEach(() => {
+    render(
+      <Counter
+        incrementBy={incrementBy}
+        decrementBy={decrementBy}
+        title="Counter"
+      />
+    )
+  })
+  it('Title should be correct', () => {
+    // Expect
+    expect(screen.getByLabelText('counter title')).toHaveTextContent('Counter')
+  })
+  it('Should start with 0', () => {
+    // Expect
+    expect(
+      screen.getByRole('heading', {
+        level: 3
+      })
+    ).toHaveTextContent('0')
+  })
+  it('should have a button with content: +', () => {
+    // Expect
+    expect(
+      screen.getByRole('button', {
+        name: /increment/i
+      })
+    ).toHaveTextContent('+')
+  })
+  it('should have a button with content: -', () => {
+    // Expect
+    expect(screen.getByLabelText(/decrement/i)).toHaveTextContent('-')
+  })
+  it('should decrement the count on - click', () => {
+    const countEl = screen.getByRole('heading', {
+      level: 3
+    })
+    const count = Number(countEl.textContent)
+    const decrementButton = screen.getByRole('button', {
+      name: /decrement/i
+    })
+    fireEvent.click(decrementButton)
+    expect(countEl).toHaveTextContent(`${count - decrementBy}`)
+    expect(countEl).toHaveClass('text-red-500')
+  })
+  it('should increment the count on + click', () => {
+    const countEl = screen.getByRole('heading', {
+      level: 3
+    })
+    const count = Number(countEl.textContent)
+    const incrementButton = screen.getByRole('button', {
+      name: /increment/i
+    })
+    fireEvent.click(incrementButton)
+    expect(countEl).toHaveTextContent(`${count + incrementBy}`)
+    expect(countEl).toHaveClass('text-blue-500')
+  })
+})
diff --git a/src/components/common/Counter/Counter.tsx b/src/components/common/Counter/Counter.tsx
@@ -0,0 +1,51 @@
+import { Button, Typography } from '@material-tailwind/react'
+import type { FC } from 'react'
+import React from 'react'
+
+type CounterType = {
+  title: string
+  incrementBy: number
+  decrementBy: number
+}
+
+const Counter: FC<CounterType> = ({ title, incrementBy, decrementBy }) => {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <div className="h-[300px] w-[300px] shadow-lg">
+      <Typography
+        aria-label="counter title"
+        variant="h1"
+        className="my-10 text-center text-indigo-700"
+      >
+        {title}
+      </Typography>
+
+      <div className="flex items-center justify-center gap-6 ">
+        <Button
+          aria-label="decrement"
+          color="red"
+          onClick={() => setCount(count - decrementBy)}
+        >
+          -
+        </Button>
+        <Typography
+          aria-label="count"
+          className="w-20 text-center"
+          variant="h3"
+          color={count <= 0 ? 'red' : 'blue'}
+        >
+          {count}
+        </Typography>
+        <Button
+          aria-label="increment"
+          onClick={() => setCount(count + incrementBy)}
+        >
+          +
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default Counter
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
@@ -0,0 +1 @@
+export { default as Counter } from './Counter/Counter'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Counter } from './Counter/Counter'