From 74c2dfa827c895b801927595ced467785868594a Mon Sep 17 00:00:00 2001 From: fakz9 Date: Sun, 25 Feb 2024 06:06:21 +0300 Subject: [PATCH] inital commit --- .eslintrc.cjs | 18 +++++++++ .gitignore | 26 ++++++++++++ .yarnrc.yml | 3 ++ README.md | 30 ++++++++++++++ index.html | 13 ++++++ package.json | 50 +++++++++++++++++++++++ postcss.config.cjs | 14 +++++++ public/vite.svg | 1 + src/App.css | 42 ++++++++++++++++++++ src/App.tsx | 3 ++ src/assets/react.svg | 1 + src/index.css | 0 src/main.scss | 13 ++++++ src/main.tsx | 40 +++++++++++++++++++ src/pages/MainPage/MainPage.module.scss | 3 ++ src/pages/MainPage/MainPage.tsx | 15 +++++++ src/redux/store.ts | 10 +++++ src/routeTree.gen.ts | 53 +++++++++++++++++++++++++ src/routes/__root.tsx | 20 ++++++++++ src/routes/index.lazy.tsx | 6 +++ src/routes/test.lazy.tsx | 18 +++++++++ src/vite-env.d.ts | 1 + tsconfig.json | 25 ++++++++++++ tsconfig.node.json | 11 +++++ vite.config.ts | 11 +++++ 25 files changed, 427 insertions(+) create mode 100644 .eslintrc.cjs create mode 100644 .gitignore create mode 100644 .yarnrc.yml create mode 100644 README.md create mode 100644 index.html create mode 100644 package.json create mode 100644 postcss.config.cjs create mode 100644 public/vite.svg create mode 100644 src/App.css create mode 100644 src/App.tsx create mode 100644 src/assets/react.svg create mode 100644 src/index.css create mode 100644 src/main.scss create mode 100644 src/main.tsx create mode 100644 src/pages/MainPage/MainPage.module.scss create mode 100644 src/pages/MainPage/MainPage.tsx create mode 100644 src/redux/store.ts create mode 100644 src/routeTree.gen.ts create mode 100644 src/routes/__root.tsx create mode 100644 src/routes/index.lazy.tsx create mode 100644 src/routes/test.lazy.tsx create mode 100644 src/vite-env.d.ts create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts 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() + ], +})