Initial commit

2024-09-05 11:46:25 +05:30
commit 3b59ca0aa8
40 changed files with 20201 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependencies
+node_modules
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+# Swap the comments on the following lines if you don't wish to use zero-installs
+# Documentation here: https://yarnpkg.com/features/zero-installs
+!.yarn/cache
+#.pnp.*
+
+# Testing
+coverage
+
+# Production
+build
+
+# Miscellaneous
+*.local
+.DS_Store
--- a/README.md
+++ b/README.md
@@ -0,0 +1 @@
+# Armco Template for the tech stack: React, TS, Dart Sass, Redux Tookkit, react-redux, react browser routing, TS based plop generator
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
+<!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>React Redux App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,81 @@
+{
+  "name": "@armco/react-vite-rtk-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "generate": "plop",
+    "atom": "plop atom",
+    "molecule": "plop molecule",
+    "component": "plop component",
+    "page": "plop page",
+    "preview": "vite preview",
+    "test": "vitest",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "type-check": "tsc"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.1",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.1",
+    "react-router-dom": "^6.13.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.2.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.0.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jsdom": "^21.1.0",
+    "plop": "^3.1.2",
+    "prettier": "^2.7.1",
+    "prettier-config-nick": "^1.0.2",
+    "sass": "^1.63.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.0.0",
+    "vitest": "^0.30.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "plugins": [
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": "error",
+      "react/jsx-no-target-blank": "off"
+    }
+  },
+  "prettier": "prettier-config-nick",
+  "main": "index.tsx",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ReStruct-Corporate-Advantage/.git"
+  },
+  "keywords": [
+    "components",
+    "atomic",
+    "building-blocks",
+    "foundation"
+  ],
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ReStruct-Corporate-Advantage/react-vite-rtk-template/issues"
+  },
+  "homepage": "https://github.com/ReStruct-Corporate-Advantage/react-vite-rtk-template#readme"
+}
--- a/plop-templates/Component/Component.component.scss.hbs
+++ b/plop-templates/Component/Component.component.scss.hbs
@@ -0,0 +1,3 @@
+.c-{{pascalCase name}} {
+  
+}
--- a/plop-templates/Component/Component.test.ts.hbs
+++ b/plop-templates/Component/Component.test.ts.hbs
@@ -0,0 +1,8 @@
+import React from "react"
+import {{pascalCase name}} from "./{{pascalCase name}}"
+
+describe("{{pascalCase name}}", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/plop-templates/Component/Component.tsx.hbs
+++ b/plop-templates/Component/Component.tsx.hbs
@@ -0,0 +1,10 @@
+import React from "react"
+import "./{{pascalCase name}}.component.scss"
+
+interface {{pascalCase name}}Props {}
+
+const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => {
+  return <div className="c-{{pascalCase name}}">In Component {{pascalCase name}}</div>
+}
+
+export default {{pascalCase name}}
--- a/plop-templates/Component/index.ts.hbs
+++ b/plop-templates/Component/index.ts.hbs
@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "./{{pascalCase name}}.jsx"
+
+export default {{pascalCase name}}
--- a/plop-templates/Page/Page.module.scss.hbs
+++ b/plop-templates/Page/Page.module.scss.hbs
@@ -0,0 +1,3 @@
+.c-{{pascalCase name}} {
+  
+}
--- a/plop-templates/Page/Page.slice.ts.hbs
+++ b/plop-templates/Page/Page.slice.ts.hbs
@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+export interface {{pascalCase name}}State {}
+
+const initialState: {{pascalCase name}}State = {}
+
+export const {{snakeCase name}}Slice = createSlice({
+  name: "{{snakeCase name}}",
+  initialState,
+  reducers: {
+    increment: (state) => {},
+  },
+  extraReducers: (builder) => {},
+})
+
+export const { increment } = {{snakeCase name}}Slice.actions
+
+export default {{snakeCase name}}Slice.reducer
--- a/plop-templates/Page/Page.test.ts.hbs
+++ b/plop-templates/Page/Page.test.ts.hbs
@@ -0,0 +1,8 @@
+import React from "react"
+import {{pascalCase name}} from "./{{pascalCase name}}"
+
+describe("{{pascalCase name}}", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/plop-templates/Page/Page.tsx.hbs
+++ b/plop-templates/Page/Page.tsx.hbs
@@ -0,0 +1,10 @@
+import React from "react"
+import "./{{pascalCase name}}.module.scss"
+
+interface {{pascalCase name}}Props {}
+
+const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => {
+  return <div className="c-{{pascalCase name}}">In Page {{pascalCase name}}</div>
+}
+
+export default {{pascalCase name}}
--- a/plop-templates/Page/index.ts.hbs
+++ b/plop-templates/Page/index.ts.hbs
@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "./{{pascalCase name}}.jsx"
+
+export default {{pascalCase name}}
--- a/plop-templates/injectable-index.ts.hbs
+++ b/plop-templates/injectable-index.ts.hbs
@@ -0,0 +1,5 @@
+/* PLOP_INJECT_IMPORT */
+
+export {
+  /* PLOP_INJECT_EXPORT */
+}
--- a/plopfile.cjs
+++ b/plopfile.cjs
@@ -0,0 +1,207 @@
+module.exports = (plop) => {
+  plop.setGenerator("component", {
+    description: "Create a component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your component name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Component/Component.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.test.ts",
+        templateFile: "plop-templates/Component/Component.test.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/{{pascalCase name}}/{{pascalCase name}}.component.scss",
+        templateFile: "plop-templates/Component/Component.component.scss.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/{{pascalCase name}}/index.ts",
+        templateFile: "plop-templates/Component/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/index.ts",
+        templateFile: "plop-templates/injectable-index.ts.hbs",
+        skipIfExists: true,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_IMPORT */`,
+        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_EXPORT */`,
+        template: `\t{{pascalCase name}},`,
+      },
+    ],
+  })
+  plop.setGenerator("atom", {
+    description: "Create a component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your component name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Component/Component.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.test.ts",
+        templateFile: "plop-templates/Component/Component.test.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/atoms/{{pascalCase name}}/{{pascalCase name}}.component.scss",
+        templateFile: "plop-templates/Component/Component.component.scss.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/atoms/{{pascalCase name}}/index.ts",
+        templateFile: "plop-templates/Component/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/index.ts",
+        templateFile: "plop-templates/injectable-index.ts.hbs",
+        skipIfExists: true,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_IMPORT */`,
+        template: `import {{pascalCase name}} from "./atoms/{{pascalCase name}}"`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_EXPORT */`,
+        template: `\t{{pascalCase name}},`,
+      },
+    ],
+  })
+  plop.setGenerator("molecule", {
+    description: "Create a rich component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your component name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Component/Component.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.test.ts",
+        templateFile: "plop-templates/Component/Component.test.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.component.scss",
+        templateFile: "plop-templates/Component/Component.component.scss.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/molecules/{{pascalCase name}}/index.ts",
+        templateFile: "plop-templates/Component/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/components/index.ts",
+        templateFile: "plop-templates/injectable-index.ts.hbs",
+        skipIfExists: true,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_IMPORT */`,
+        template: `import {{pascalCase name}} from "./molecules/{{pascalCase name}}"`,
+      },
+      {
+        type: "append",
+        path: "src/app/components/index.ts",
+        pattern: `/* PLOP_INJECT_EXPORT */`,
+        template: `\t{{pascalCase name}},`,
+      },
+    ],
+  })
+  plop.setGenerator("page", {
+    description: "Create a page",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your page name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Page/Page.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.test.ts",
+        templateFile: "plop-templates/Page/Page.test.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.module.scss",
+        templateFile: "plop-templates/Page/Page.module.scss.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/index.ts",
+        templateFile: "plop-templates/Page/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/{{pascalCase name}}/{{pascalCase name}}.slice.ts",
+        templateFile: "plop-templates/Page/Page.slice.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/app/pages/index.ts",
+        templateFile: "plop-templates/injectable-index.ts.hbs",
+        skipIfExists: true,
+      },
+      {
+        type: "append",
+        path: "src/app/pages/index.ts",
+        pattern: `/* PLOP_INJECT_IMPORT */`,
+        template: `import {{pascalCase name}} from "./{{pascalCase name}}"`,
+      },
+      {
+        type: "append",
+        path: "src/app/pages/index.ts",
+        pattern: `/* PLOP_INJECT_EXPORT */`,
+        template: `\t{{pascalCase name}},`,
+      },
+    ],
+  })
+}
--- a/src/app/Router.tsx
+++ b/src/app/Router.tsx
@@ -0,0 +1,12 @@
+import { useRoutes } from "react-router-dom"
+import * as pages from "./pages"
+import Helper from "./utils/helper"
+import ROUTES from "./routes"
+
+Helper.populateComponentsInRoutes(ROUTES, pages)
+
+interface RouterProps {}
+
+const Router = (props: RouterProps): JSX.Element | null => useRoutes(ROUTES)
+
+export default Router
--- a/src/app/config/constants.ts
+++ b/src/app/config/constants.ts
--- a/src/app/hooks.ts
+++ b/src/app/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import type { RootState, AppDispatch } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
--- a/src/app/pages/Home/Home.module.scss
+++ b/src/app/pages/Home/Home.module.scss
@@ -0,0 +1,3 @@
+.c-Home {
+  
+}
--- a/src/app/pages/Home/Home.slice.ts
+++ b/src/app/pages/Home/Home.slice.ts
@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+export interface HomeState {}
+
+const initialState: HomeState = {}
+
+export const homeSlice = createSlice({
+  name: "home",
+  initialState,
+  reducers: {
+    increment: (state) => {},
+  },
+  extraReducers: (builder) => {},
+})
+
+export const { increment } = homeSlice.actions
+
+export default homeSlice.reducer
--- a/src/app/pages/Home/Home.test.ts
+++ b/src/app/pages/Home/Home.test.ts
@@ -0,0 +1,8 @@
+import React from "react"
+import Home from "./Home"
+
+describe("Home", () => {
+   it("renders without error", () => {
+
+   })
+})
--- a/src/app/pages/Home/Home.tsx
+++ b/src/app/pages/Home/Home.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import "./Home.module.scss"
+
+interface HomeProps {}
+
+const Home = props => {
+  return (
+    <div className="c-Home">
+      In Page Home
+    </div>
+  )
+}
+
+export default Home
--- a/src/app/pages/Home/index.ts
+++ b/src/app/pages/Home/index.ts
@@ -0,0 +1,3 @@
+import Home from "./Home.jsx"
+
+export default Home
--- a/src/app/pages/index.ts
+++ b/src/app/pages/index.ts
@@ -0,0 +1,7 @@
+/* PLOP_INJECT_IMPORT */
+import Home from "./Home"
+
+export {
+  /* PLOP_INJECT_EXPORT */
+	Home,
+}
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -0,0 +1,9 @@
+const ROUTES = [
+  {
+    path: "/",
+    class: "landing",
+    element: "Home",
+  },
+]
+
+export default ROUTES
--- a/src/app/static/styles/global.scss
+++ b/src/app/static/styles/global.scss
@@ -0,0 +1,18 @@
+html, body, #root {
+	height: 100%;
+	width: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -0,0 +1,17 @@
+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit"
+import counterReducer from "../features/counter/counterSlice"
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+})
+
+export type AppDispatch = typeof store.dispatch
+export type RootState = ReturnType<typeof store.getState>
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>
--- a/src/app/types/route.d.ts
+++ b/src/app/types/route.d.ts
@@ -0,0 +1,6 @@
+interface RouteConfig {
+  path: String
+  class?: String
+  element: String | JSX.Element | null
+  children?: Array<RouteConfig>
+}
--- a/src/app/utils/helper.tsx
+++ b/src/app/utils/helper.tsx
@@ -0,0 +1,15 @@
+class Helper {
+  static populateComponentsInRoutes(routes: RouteConfig[], components: any) {
+    routes &&
+      routes.forEach((route) => {
+        const Component: JSX.ElementType =
+          components[route.element as keyof object]
+        route.element = <Component />
+        if (route.children) {
+          Helper.populateComponentsInRoutes(route.children, components)
+        }
+      })
+  }
+}
+
+export default Helper
--- a/src/features/counter/Counter.tsx
+++ b/src/features/counter/Counter.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react"
+
+import { useAppSelector, useAppDispatch } from "../../app/hooks"
+import {
+  decrement,
+  increment,
+  incrementByAmount,
+  incrementAsync,
+  incrementIfOdd,
+  selectCount,
+} from "./counterSlice"
+
+export function Counter() {
+  const count = useAppSelector(selectCount)
+  const dispatch = useAppDispatch()
+  const [incrementAmount, setIncrementAmount] = useState("2")
+
+  const incrementValue = Number(incrementAmount) || 0
+
+  return (
+    <div>
+      <div className="row">
+        <button
+          className="button"
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          -
+        </button>
+        <span className="value">{count}</span>
+        <button
+          className="button"
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          +
+        </button>
+      </div>
+      <div className="row">
+        <input
+          className="textbox"
+          aria-label="Set increment amount"
+          value={incrementAmount}
+          onChange={(e) => setIncrementAmount(e.target.value)}
+        />
+        <button
+          className="button"
+          onClick={() => dispatch(incrementByAmount(incrementValue))}
+        >
+          Add Amount
+        </button>
+        <button
+          className="asyncButton"
+          onClick={() => dispatch(incrementAsync(incrementValue))}
+        >
+          Add Async
+        </button>
+        <button
+          className="button"
+          onClick={() => dispatch(incrementIfOdd(incrementValue))}
+        >
+          Add If Odd
+        </button>
+      </div>
+    </div>
+  )
+}
--- a/src/features/counter/counterAPI.ts
+++ b/src/features/counter/counterAPI.ts
@@ -0,0 +1,6 @@
+// A mock function to mimic making an async request for data
+export function fetchCount(amount = 1) {
+  return new Promise<{ data: number }>((resolve) =>
+    setTimeout(() => resolve({ data: amount }), 500),
+  )
+}
--- a/src/features/counter/counterSlice.spec.ts
+++ b/src/features/counter/counterSlice.spec.ts
@@ -0,0 +1,34 @@
+import counterReducer, {
+  CounterState,
+  increment,
+  decrement,
+  incrementByAmount,
+} from "./counterSlice"
+
+describe("counter reducer", () => {
+  const initialState: CounterState = {
+    value: 3,
+    status: "idle",
+  }
+  it("should handle initial state", () => {
+    expect(counterReducer(undefined, { type: "unknown" })).toEqual({
+      value: 0,
+      status: "idle",
+    })
+  })
+
+  it("should handle increment", () => {
+    const actual = counterReducer(initialState, increment())
+    expect(actual.value).toEqual(4)
+  })
+
+  it("should handle decrement", () => {
+    const actual = counterReducer(initialState, decrement())
+    expect(actual.value).toEqual(2)
+  })
+
+  it("should handle incrementByAmount", () => {
+    const actual = counterReducer(initialState, incrementByAmount(2))
+    expect(actual.value).toEqual(5)
+  })
+})
--- a/src/features/counter/counterSlice.ts
+++ b/src/features/counter/counterSlice.ts
@@ -0,0 +1,84 @@
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { RootState, AppThunk } from "../../app/store"
+import { fetchCount } from "./counterAPI"
+
+export interface CounterState {
+  value: number
+  status: "idle" | "loading" | "failed"
+}
+
+const initialState: CounterState = {
+  value: 0,
+  status: "idle",
+}
+
+// The function below is called a thunk and allows us to perform async logic. It
+// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
+// will call the thunk with the `dispatch` function as the first argument. Async
+// code can then be executed and other actions can be dispatched. Thunks are
+// typically used to make async requests.
+export const incrementAsync = createAsyncThunk(
+  "counter/fetchCount",
+  async (amount: number) => {
+    const response = await fetchCount(amount)
+    // The value we return becomes the `fulfilled` action payload
+    return response.data
+  },
+)
+
+export const counterSlice = createSlice({
+  name: "counter",
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn"t actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload
+    },
+  },
+  // The `extraReducers` field lets the slice handle actions defined elsewhere,
+  // including actions generated by createAsyncThunk or in other slices.
+  extraReducers: (builder) => {
+    builder
+      .addCase(incrementAsync.pending, (state) => {
+        state.status = "loading"
+      })
+      .addCase(incrementAsync.fulfilled, (state, action) => {
+        state.status = "idle"
+        state.value += action.payload
+      })
+      .addCase(incrementAsync.rejected, (state) => {
+        state.status = "failed"
+      })
+  },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+// The function below is called a selector and allows us to select a value from
+// the state. Selectors can also be defined inline where they"re used instead of
+// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
+export const selectCount = (state: RootState) => state.counter.value
+
+// We can also write thunks by hand, which may contain both sync and async logic.
+// Here"s an example of conditionally dispatching actions based on current state.
+export const incrementIfOdd =
+  (amount: number): AppThunk =>
+  (dispatch, getState) => {
+    const currentValue = selectCount(getState())
+    if (currentValue % 2 === 1) {
+      dispatch(incrementByAmount(amount))
+    }
+  }
+
+export default counterSlice.reducer
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -0,0 +1,19 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
+import { Provider } from "react-redux"
+import { store } from "./app/store"
+import Router from "./app/Router"
+import "./app/static/styles/global.scss"
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
+
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <Provider store={store}>
+        <Router />
+      </Provider>
+    </BrowserRouter>
+  </React.StrictMode>,
+)
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -0,0 +1,71 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: "development" | "production" | "test"
+    readonly PUBLIC_URL: string
+  }
+}
+
+declare module "*.avif" {
+  const src: string
+  export default src
+}
+
+declare module "*.bmp" {
+  const src: string
+  export default src
+}
+
+declare module "*.gif" {
+  const src: string
+  export default src
+}
+
+declare module "*.jpg" {
+  const src: string
+  export default src
+}
+
+declare module "*.jpeg" {
+  const src: string
+  export default src
+}
+
+declare module "*.png" {
+  const src: string
+  export default src
+}
+
+declare module "*.webp" {
+    const src: string
+    export default src
+}
+
+declare module "*.svg" {
+  import * as React from "react"
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>
+
+  const src: string
+  export default src
+}
+
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module "*.module.scss" {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module "*.module.sass" {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom"
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    open: true,
+  },
+  build: {
+    outDir: "build",
+    sourcemap: true,
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "src/setupTests",
+    mockReset: true,
+  },
+})
				`@@ -0,0 +1 @@`
				`# Armco Template for the tech stack: React, TS, Dart Sass, Redux Tookkit, react-redux, react browser routing, TS based plop generator`