Vite + React + TS

commit 74c2dfa827c895b801927595ced467785868594a Author: fakz9 Date: Sun Feb 25 06:06:21 2024 +0300 inital commit diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..d6c9537 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,18 @@ +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'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5fe45d8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +# 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? +.yarn +yarn.lock diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 0000000..615af18 --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1,3 @@ +nodeLinker: node-modules + +yarnPath: .yarn/releases/yarn-4.1.0.cjs diff --git a/README.md b/README.md new file mode 100644 index 0000000..0d6babe --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js +export default { + // other rules... + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json', './tsconfig.node.json'], + tsconfigRootDir: __dirname, + }, +} +``` + +- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` +- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list diff --git a/index.html b/index.html new file mode 100644 index 0000000..e4b78ea --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +

+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..4282144 --- /dev/null +++ b/package.json @@ -0,0 +1,50 @@ +{ + "name": "fulfillment-frontend", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "@mantine/core": "^7.5.3", + "@mantine/dates": "^7.5.3", + "@mantine/dropzone": "^7.5.3", + "@mantine/hooks": "^7.5.3", + "@mantine/modals": "^7.5.3", + "@mantine/notifications": "^7.5.3", + "@reduxjs/toolkit": "^2.2.1", + "@tabler/icons-react": "^2.47.0", + "@tanstack/react-query": "^5.22.2", + "@tanstack/react-router": "^1.16.6", + "@tanstack/router-devtools": "^1.16.6", + "@tanstack/router-vite-plugin": "^1.16.5", + "axios": "^1.6.7", + "clsx": "^2.1.0", + "dayjs": "^1.11.10", + "mantine-react-table": "^2.0.0-beta.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-redux": "^9.1.0" + }, + "devDependencies": { + "@types/react": "^18.2.56", + "@types/react-dom": "^18.2.19", + "@typescript-eslint/eslint-plugin": "^7.0.2", + "@typescript-eslint/parser": "^7.0.2", + "@vitejs/plugin-react-swc": "^3.5.0", + "eslint": "^8.56.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "postcss": "^8.4.35", + "postcss-preset-mantine": "^1.13.0", + "postcss-simple-vars": "^7.0.1", + "sass": "^1.71.1", + "typescript": "^5.2.2", + "vite": "^5.1.4" + }, + "packageManager": "yarn@4.1.0" +} diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..13ed8b0 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,14 @@ +module.exports = { + plugins: { + 'postcss-preset-mantine': {}, + 'postcss-simple-vars': { + variables: { + 'mantine-breakpoint-xs': '36em', + 'mantine-breakpoint-sm': '48em', + 'mantine-breakpoint-md': '62em', + 'mantine-breakpoint-lg': '75em', + 'mantine-breakpoint-xl': '88em', + }, + }, + }, +}; \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..b9d355d --- /dev/null +++ b/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..7cc8a86 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,3 @@ +import '@mantine/core/styles.css'; + + diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/main.scss b/src/main.scss new file mode 100644 index 0000000..c532a98 --- /dev/null +++ b/src/main.scss @@ -0,0 +1,13 @@ +body { + position: relative; + height: 100vh; + display: flex; + flex-direction: column; +} + +#root { + position: relative; + flex-grow: 1; + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..f761169 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import {RouterProvider, createRouter} from '@tanstack/react-router' +import {routeTree} from './routeTree.gen' +import {MantineProvider} from "@mantine/core"; +import {QueryClient, QueryClientProvider} from "@tanstack/react-query"; +import {Provider} from "react-redux"; +import {store} from "./redux/store.ts"; + +import '@mantine/core/styles.css'; +import '@mantine/notifications/styles.css'; +import './main.scss'; +import {Notifications} from "@mantine/notifications"; +import {ModalsProvider} from "@mantine/modals"; + +// Configuring router +const router = createRouter({routeTree}) +declare module '@tanstack/react-router' { + interface Register { + router: typeof router + } +} + +// Configuring query +const queryClient = new QueryClient(); + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + + + + + + + + + + , +) diff --git a/src/pages/MainPage/MainPage.module.scss b/src/pages/MainPage/MainPage.module.scss new file mode 100644 index 0000000..81b52b6 --- /dev/null +++ b/src/pages/MainPage/MainPage.module.scss @@ -0,0 +1,3 @@ +.container { + background-color: rebeccapurple; +} \ No newline at end of file diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx new file mode 100644 index 0000000..e32a8e5 --- /dev/null +++ b/src/pages/MainPage/MainPage.tsx @@ -0,0 +1,15 @@ +import {FC} from "react"; + +import {Flex, Text} from "@mantine/core"; + +const MainPage: FC = () => { + + return ( + + авфыв + + + ) +} + +export default MainPage; \ No newline at end of file diff --git a/src/redux/store.ts b/src/redux/store.ts new file mode 100644 index 0000000..d3f25fc --- /dev/null +++ b/src/redux/store.ts @@ -0,0 +1,10 @@ +import {configureStore} from "@reduxjs/toolkit"; +import {useDispatch} from "react-redux"; + +export const store = configureStore({ + reducer: {} +}); + +export type RootState = ReturnType; +type AppDispatch = typeof store.dispatch; +export const useAppDispatch = () => useDispatch(); \ No newline at end of file diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts new file mode 100644 index 0000000..40c5e4b --- /dev/null +++ b/src/routeTree.gen.ts @@ -0,0 +1,53 @@ +/* prettier-ignore-start */ + +/* eslint-disable */ + +// @ts-nocheck + +// noinspection JSUnusedGlobalSymbols + +// This file is auto-generated by TanStack Router + +import { createFileRoute } from '@tanstack/react-router' + +// Import Routes + +import { Route as rootRoute } from './routes/__root' + +// Create Virtual Routes + +const TestLazyImport = createFileRoute('/test')() +const IndexLazyImport = createFileRoute('/')() + +// Create/Update Routes + +const TestLazyRoute = TestLazyImport.update({ + path: '/test', + getParentRoute: () => rootRoute, +} as any).lazy(() => import('./routes/test.lazy').then((d) => d.Route)) + +const IndexLazyRoute = IndexLazyImport.update({ + path: '/', + getParentRoute: () => rootRoute, +} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route)) + +// Populate the FileRoutesByPath interface + +declare module '@tanstack/react-router' { + interface FileRoutesByPath { + '/': { + preLoaderRoute: typeof IndexLazyImport + parentRoute: typeof rootRoute + } + '/test': { + preLoaderRoute: typeof TestLazyImport + parentRoute: typeof rootRoute + } + } +} + +// Create and export the route tree + +export const routeTree = rootRoute.addChildren([IndexLazyRoute, TestLazyRoute]) + +/* prettier-ignore-end */ diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx new file mode 100644 index 0000000..cd05cfc --- /dev/null +++ b/src/routes/__root.tsx @@ -0,0 +1,20 @@ +import {createRootRoute, Link, Outlet} from "@tanstack/react-router"; +import {TanStackRouterDevtools} from '@tanstack/router-devtools' + +export const Route = createRootRoute({ + component: () => ( + <> +

+ + Home + {' '} + + Test + {' '} +

+ + + + + ), +}) \ No newline at end of file diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx new file mode 100644 index 0000000..a113bb1 --- /dev/null +++ b/src/routes/index.lazy.tsx @@ -0,0 +1,6 @@ +import {createLazyFileRoute} from "@tanstack/react-router"; +import MainPage from "../pages/MainPage/MainPage.tsx"; + +export const Route = createLazyFileRoute('/')({ + component: MainPage, +}) diff --git a/src/routes/test.lazy.tsx b/src/routes/test.lazy.tsx new file mode 100644 index 0000000..7b84dca --- /dev/null +++ b/src/routes/test.lazy.tsx @@ -0,0 +1,18 @@ +import {createLazyFileRoute} from "@tanstack/react-router"; +import {Button} from "@mantine/core"; +import {notifications} from "@mantine/notifications"; + +export const Route = createLazyFileRoute('/test')({ + component: TestPage +}) + +function TestPage() { + return ( + <> + + + + ) +} \ No newline at end of file diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a7fc6fb --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..97ede7e --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "strict": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..fb14228 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,11 @@ +import {defineConfig} from 'vite' +import react from '@vitejs/plugin-react-swc' +import {TanStackRouterVite} from '@tanstack/router-vite-plugin' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + react(), + TanStackRouterVite() + ], +})