init create-fias
This commit is contained in:
Samandar Turgunboyev
1
.example.env
Normal file
1
.example.env
Normal file
@@ -0,0 +1 @@
|
|||||||
|
VITE_API_URL=string
|
||||||
22
.gitignore
vendored
Normal file
22
.gitignore
vendored
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
# 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
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
1
.husky/pre-commit
Normal file
1
.husky/pre-commit
Normal file
@@ -0,0 +1 @@
|
|||||||
|
npx lint-staged
|
||||||
1
.husky/pre-push
Normal file
1
.husky/pre-push
Normal file
@@ -0,0 +1 @@
|
|||||||
|
npm run build
|
||||||
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"semi": true,
|
||||||
|
"singleQuote": false,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"tabWidth": 2,
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"arrowParens": "always"
|
||||||
|
}
|
||||||
5
.vscode/extensions.json
vendored
Normal file
5
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"azizziy.oklch-as"
|
||||||
|
]
|
||||||
|
}
|
||||||
7
.vscode/settings.json
vendored
Normal file
7
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"typescript.preferences.importModuleSpecifier": "non-relative",
|
||||||
|
"javascript.preferences.importModuleSpecifier": "non-relative",
|
||||||
|
"typescript.updateImportsOnFileMove.enabled": "always",
|
||||||
|
"editor.tabSize": 2,
|
||||||
|
"editor.insertSpaces": true
|
||||||
|
}
|
||||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
21
components.json
Normal file
21
components.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/index.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/widgets",
|
||||||
|
"utils": "@/shared/lib/utils",
|
||||||
|
"ui": "@/shared/ui",
|
||||||
|
"lib": "@/shared/lib",
|
||||||
|
"hooks": "@/shared/hooks"
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide"
|
||||||
|
}
|
||||||
40
eslint.config.js
Normal file
40
eslint.config.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
'max-len': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
code: 200,
|
||||||
|
ignoreUrls: true,
|
||||||
|
ignoreComments: true,
|
||||||
|
ignoreStrings: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-console': ['warn', { allow: ['error'] }],
|
||||||
|
eqeqeq: 'warn',
|
||||||
|
'no-duplicate-imports': 'error',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/fias.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>FIAS - React Js app</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5403
package-lock.json
generated
Normal file
5403
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
59
package.json
Normal file
59
package.json
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
{
|
||||||
|
"name": "meridyn-bot-react",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint src --fix",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"prettier": "prettier src --write",
|
||||||
|
"prepare": "husky"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.15",
|
||||||
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
|
"@tailwindcss/vite": "^4.1.7",
|
||||||
|
"@tanstack/react-query": "^5.77.1",
|
||||||
|
"axios": "^1.9.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"dayjs": "^1.11.18",
|
||||||
|
"i18next": "^25.5.2",
|
||||||
|
"i18next-browser-languagedetector": "^8.2.0",
|
||||||
|
"lucide-react": "^0.544.0",
|
||||||
|
"react": "^19.1.1",
|
||||||
|
"react-dom": "^19.1.1",
|
||||||
|
"react-github-btn": "^1.4.0",
|
||||||
|
"react-i18next": "^15.7.3",
|
||||||
|
"react-router-dom": "^7.9.6",
|
||||||
|
"tailwind-merge": "^3.3.1",
|
||||||
|
"tailwindcss": "^4.1.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.25.0",
|
||||||
|
"@types/node": "^22.15.21",
|
||||||
|
"@types/react": "^19.1.2",
|
||||||
|
"@types/react-dom": "^19.1.2",
|
||||||
|
"@vitejs/plugin-react": "^4.4.1",
|
||||||
|
"eslint": "^9.25.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
|
"globals": "^16.0.0",
|
||||||
|
"husky": "^9.1.7",
|
||||||
|
"lint-staged": "^16.2.1",
|
||||||
|
"prettier": "^3.6.2",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
|
"typescript": "~5.9.2",
|
||||||
|
"typescript-eslint": "^8.44.1",
|
||||||
|
"vite": "^7.1.7",
|
||||||
|
"vite-tsconfig-paths": "^5.1.4"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{js,ts,jsx,tsx}": [
|
||||||
|
"prettier --write",
|
||||||
|
"eslint src --fix"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
3
public/fias.svg
Normal file
3
public/fias.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
13
src/App.tsx
Normal file
13
src/App.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import MainProvider from "@/providers/main";
|
||||||
|
import AppRouter from "@/providers/routing/AppRoutes";
|
||||||
|
import "@/shared/config/i18n";
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<MainProvider>
|
||||||
|
<AppRouter />
|
||||||
|
</MainProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
0
src/features/auth/lib/.gitkeep
Normal file
0
src/features/auth/lib/.gitkeep
Normal file
0
src/features/auth/model/.gitkeep
Normal file
0
src/features/auth/model/.gitkeep
Normal file
0
src/features/auth/ui/.gitkeep
Normal file
0
src/features/auth/ui/.gitkeep
Normal file
0
src/features/home/lib/.gitkeep
Normal file
0
src/features/home/lib/.gitkeep
Normal file
0
src/features/home/model/.gitkeep
Normal file
0
src/features/home/model/.gitkeep
Normal file
0
src/features/home/ui/.gitkeep
Normal file
0
src/features/home/ui/.gitkeep
Normal file
120
src/index.css
Normal file
120
src/index.css
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
|
@import 'tw-animate-css';
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0.145 0 0);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.145 0 0);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
|
--primary: oklch(0.205 0 0);
|
||||||
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
--secondary: oklch(0.97 0 0);
|
||||||
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
|
--muted: oklch(0.97 0 0);
|
||||||
|
--muted-foreground: oklch(0.556 0 0);
|
||||||
|
--accent: oklch(0.97 0 0);
|
||||||
|
--accent-foreground: oklch(0.205 0 0);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.922 0 0);
|
||||||
|
--input: oklch(0.922 0 0);
|
||||||
|
--ring: oklch(0.708 0 0);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
|
--sidebar-primary: oklch(0.205 0 0);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.145 0 0);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.205 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.205 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.922 0 0);
|
||||||
|
--primary-foreground: oklch(0.205 0 0);
|
||||||
|
--secondary: oklch(0.269 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.269 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: oklch(0.269 0 0);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: oklch(0.556 0 0);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.205 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.556 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App.tsx';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
5
src/pages/Home.tsx
Normal file
5
src/pages/Home.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import Welcome from "@/widgets/welcome/ui/welcome";
|
||||||
|
|
||||||
|
export function Home() {
|
||||||
|
return <Welcome />;
|
||||||
|
}
|
||||||
20
src/providers/main.tsx
Normal file
20
src/providers/main.tsx
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import type { ReactNode } from "react";
|
||||||
|
import QueryProvider from "./react-query/QueryProvider";
|
||||||
|
import { ThemeProvider } from "@/providers/theme/ThemeProvider";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MainProvider = ({ children }: Props) => {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<QueryProvider>
|
||||||
|
<ThemeProvider defaultTheme="light">{children}</ThemeProvider>
|
||||||
|
</QueryProvider>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainProvider;
|
||||||
25
src/providers/react-query/QueryProvider.tsx
Normal file
25
src/providers/react-query/QueryProvider.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import { useState, type ReactNode } from 'react';
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
const QueryProvider = ({ children }: { children: ReactNode }) => {
|
||||||
|
const [queryClient] = useState(
|
||||||
|
() =>
|
||||||
|
new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
retry: 1,
|
||||||
|
staleTime: 1000 * 60 * 5,
|
||||||
|
refetchOnReconnect: false,
|
||||||
|
refetchOnMount: false,
|
||||||
|
refetchInterval: 1000 * 60 * 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default QueryProvider;
|
||||||
16
src/providers/routing/AppRoutes.tsx
Normal file
16
src/providers/routing/AppRoutes.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import routesConfig from "@/providers/routing/config";
|
||||||
|
import { Navigate, useRoutes } from "react-router-dom";
|
||||||
|
|
||||||
|
const AppRouter = () => {
|
||||||
|
const routes = useRoutes([
|
||||||
|
routesConfig,
|
||||||
|
{
|
||||||
|
path: "*",
|
||||||
|
element: <Navigate to="/" />,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
return routes;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AppRouter;
|
||||||
17
src/providers/routing/config.tsx
Normal file
17
src/providers/routing/config.tsx
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { Home } from "@/pages/Home";
|
||||||
|
import { Outlet, type RouteObject } from "react-router-dom";
|
||||||
|
|
||||||
|
const routesConfig: RouteObject = {
|
||||||
|
element: <Outlet />,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
element: <Home />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
export default routesConfig;
|
||||||
73
src/providers/theme/ThemeProvider.tsx
Normal file
73
src/providers/theme/ThemeProvider.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import { createContext, useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
type Theme = 'dark' | 'light' | 'system';
|
||||||
|
|
||||||
|
type ThemeProviderProps = {
|
||||||
|
children: React.ReactNode;
|
||||||
|
defaultTheme?: Theme;
|
||||||
|
storageKey?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ThemeProviderState = {
|
||||||
|
theme: Theme;
|
||||||
|
setTheme: (theme: Theme) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialState: ThemeProviderState = {
|
||||||
|
theme: 'system',
|
||||||
|
setTheme: () => null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
|
||||||
|
|
||||||
|
export function ThemeProvider({
|
||||||
|
children,
|
||||||
|
defaultTheme = 'system',
|
||||||
|
storageKey = 'vite-ui-theme',
|
||||||
|
...props
|
||||||
|
}: ThemeProviderProps) {
|
||||||
|
const [theme, setTheme] = useState<Theme>(
|
||||||
|
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const root = window.document.documentElement;
|
||||||
|
|
||||||
|
root.classList.remove('light', 'dark');
|
||||||
|
|
||||||
|
if (theme === 'system') {
|
||||||
|
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
|
||||||
|
.matches
|
||||||
|
? 'dark'
|
||||||
|
: 'light';
|
||||||
|
|
||||||
|
root.classList.add(systemTheme);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
root.classList.add(theme);
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
const value = {
|
||||||
|
theme,
|
||||||
|
setTheme: (theme: Theme) => {
|
||||||
|
localStorage.setItem(storageKey, theme);
|
||||||
|
setTheme(theme);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProviderContext.Provider {...props} value={value}>
|
||||||
|
{children}
|
||||||
|
</ThemeProviderContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useTheme = () => {
|
||||||
|
const context = useContext(ThemeProviderContext);
|
||||||
|
|
||||||
|
if (context === undefined)
|
||||||
|
throw new Error('useTheme must be used within a ThemeProvider');
|
||||||
|
|
||||||
|
return context;
|
||||||
|
};
|
||||||
6
src/shared/config/api/URLs.ts
Normal file
6
src/shared/config/api/URLs.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
const BASE_URL =
|
||||||
|
import.meta.env.VITE_API_URL || 'https://jsonplaceholder.typicode.com';
|
||||||
|
|
||||||
|
const ENDP_POSTS = '/posts/';
|
||||||
|
|
||||||
|
export { BASE_URL, ENDP_POSTS };
|
||||||
35
src/shared/config/api/httpClient.ts
Normal file
35
src/shared/config/api/httpClient.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import { BASE_URL } from './URLs';
|
||||||
|
import i18n from '@/shared/config/i18n';
|
||||||
|
|
||||||
|
const httpClient = axios.create({
|
||||||
|
baseURL: BASE_URL,
|
||||||
|
timeout: 10000,
|
||||||
|
});
|
||||||
|
|
||||||
|
httpClient.interceptors.request.use(
|
||||||
|
async (config) => {
|
||||||
|
console.log(`API REQUEST to ${config.url}`, config);
|
||||||
|
|
||||||
|
// Language configs
|
||||||
|
const language = i18n.language;
|
||||||
|
config.headers['Accept-Language'] = language;
|
||||||
|
// const accessToken = localStorage.getItem('accessToken');
|
||||||
|
// if (accessToken) {
|
||||||
|
// config.headers['Authorization'] = `Bearer ${accessToken}`;
|
||||||
|
// }
|
||||||
|
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error) => Promise.reject(error),
|
||||||
|
);
|
||||||
|
|
||||||
|
httpClient.interceptors.response.use(
|
||||||
|
(response) => response,
|
||||||
|
(error) => {
|
||||||
|
console.error('API error:', error);
|
||||||
|
return Promise.reject(error);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export default httpClient;
|
||||||
6
src/shared/config/api/test/test.model.ts
Normal file
6
src/shared/config/api/test/test.model.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export interface TestApiType {
|
||||||
|
userId: number;
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
body: string;
|
||||||
|
}
|
||||||
14
src/shared/config/api/test/test.request.ts
Normal file
14
src/shared/config/api/test/test.request.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import httpClient from '@/shared/config/api/httpClient';
|
||||||
|
import type { TestApiType } from '@/shared/config/api/test/test.model';
|
||||||
|
import type { ReqWithPagination } from '@/shared/config/api/types';
|
||||||
|
import { ENDP_POSTS } from '@/shared/config/api/URLs';
|
||||||
|
import type { AxiosResponse } from 'axios';
|
||||||
|
|
||||||
|
const getPosts = async (
|
||||||
|
pagination?: ReqWithPagination,
|
||||||
|
): Promise<AxiosResponse<TestApiType>> => {
|
||||||
|
const response = await httpClient.get(ENDP_POSTS, { params: pagination });
|
||||||
|
return response;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { getPosts };
|
||||||
20
src/shared/config/api/types.ts
Normal file
20
src/shared/config/api/types.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
export interface ResWithPagination<T> {
|
||||||
|
success: boolean;
|
||||||
|
message: string;
|
||||||
|
links: Links;
|
||||||
|
total_items: number;
|
||||||
|
total_pages: number;
|
||||||
|
page_size: number;
|
||||||
|
current_page: number;
|
||||||
|
data: T[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Links {
|
||||||
|
next: number | null;
|
||||||
|
previous: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReqWithPagination {
|
||||||
|
_start?: number;
|
||||||
|
_limit?: number;
|
||||||
|
}
|
||||||
28
src/shared/config/i18n/index.ts
Normal file
28
src/shared/config/i18n/index.ts
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import i18n from 'i18next';
|
||||||
|
import { initReactI18next } from 'react-i18next';
|
||||||
|
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||||
|
|
||||||
|
import uz from './locales/uz/translation.json';
|
||||||
|
import ki from './locales/ki/translation.json';
|
||||||
|
import ru from './locales/ru/translation.json';
|
||||||
|
|
||||||
|
i18n
|
||||||
|
.use(LanguageDetector)
|
||||||
|
.use(initReactI18next)
|
||||||
|
.init({
|
||||||
|
resources: {
|
||||||
|
uz: { translation: uz },
|
||||||
|
ru: { translation: ru },
|
||||||
|
ki: { translation: ki },
|
||||||
|
},
|
||||||
|
fallbackLng: 'uz',
|
||||||
|
interpolation: {
|
||||||
|
escapeValue: false,
|
||||||
|
},
|
||||||
|
detection: {
|
||||||
|
order: ['localStorage', 'navigator'],
|
||||||
|
caches: ['localStorage'],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default i18n;
|
||||||
4
src/shared/config/i18n/locales/ki/translation.json
Normal file
4
src/shared/config/i18n/locales/ki/translation.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"welcome": "Kiril. Bizning saytga xush kelibsiz",
|
||||||
|
"language": "Til"
|
||||||
|
}
|
||||||
4
src/shared/config/i18n/locales/ru/translation.json
Normal file
4
src/shared/config/i18n/locales/ru/translation.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"welcome": "Rus. Bizning saytga xush kelibsiz",
|
||||||
|
"language": "Til"
|
||||||
|
}
|
||||||
4
src/shared/config/i18n/locales/uz/translation.json
Normal file
4
src/shared/config/i18n/locales/uz/translation.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"welcome": "Uzbek. Bizning saytga xush kelibsiz",
|
||||||
|
"language": "Til"
|
||||||
|
}
|
||||||
5
src/shared/config/i18n/type.ts
Normal file
5
src/shared/config/i18n/type.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export enum LanguageRoutes {
|
||||||
|
UZ = 'uz', // o'zbekcha
|
||||||
|
RU = 'ru', // ruscha
|
||||||
|
KI = 'ki', // kirilcha
|
||||||
|
}
|
||||||
21
src/shared/constants/data.ts
Normal file
21
src/shared/constants/data.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
const PRODUCT_INFO = {
|
||||||
|
name: 'FIAS App',
|
||||||
|
description: 'Generated by create next app',
|
||||||
|
logo: '/favicon.png',
|
||||||
|
favicon: '/favicon.svg',
|
||||||
|
url: 'https://www.shadcnblocks.com',
|
||||||
|
socials: {
|
||||||
|
telegram: 'https://t.me/usmanov_dev',
|
||||||
|
instagram: 'https://t.me/usmanov_dev',
|
||||||
|
youtube: 'https://t.me/usmanov_dev',
|
||||||
|
linkedin: 'https://www.linkedin.com/in/usmonov-azizbek/',
|
||||||
|
},
|
||||||
|
contact: {
|
||||||
|
phone: '+998901234567',
|
||||||
|
email: 'contact@fias.uz',
|
||||||
|
},
|
||||||
|
terms_of_use: '',
|
||||||
|
creator: 'FIAS App',
|
||||||
|
};
|
||||||
|
|
||||||
|
export { PRODUCT_INFO };
|
||||||
39
src/shared/hooks/use-closer.ts
Normal file
39
src/shared/hooks/use-closer.ts
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook for closing some items when they are unnecessary to the user
|
||||||
|
* @param ref For an item that needs to be closed when the outer part is pressed
|
||||||
|
* @param closeFunction Closing function
|
||||||
|
* @param scrollClose If it shouldn't close when scrolling, false will be sent. Default true
|
||||||
|
*/
|
||||||
|
|
||||||
|
const useCloser = (
|
||||||
|
ref: React.RefObject<HTMLElement>,
|
||||||
|
closeFunction: () => void,
|
||||||
|
scrollClose: boolean = true,
|
||||||
|
) => {
|
||||||
|
useEffect(() => {
|
||||||
|
// call function when click outside is ref element
|
||||||
|
function handleClickOutside(event: MouseEvent) {
|
||||||
|
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||||||
|
closeFunction();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// call function when page is scrolling
|
||||||
|
function handleScroll() {
|
||||||
|
if (scrollClose) {
|
||||||
|
closeFunction();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
document.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
document.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
}, [ref, closeFunction]);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useCloser;
|
||||||
27
src/shared/hooks/use-mobile.ts
Normal file
27
src/shared/hooks/use-mobile.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
const MOBILE_BREAKPOINT = 768;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Determine if it's on the current mobile screen (768px)
|
||||||
|
* @returns boolean
|
||||||
|
*/
|
||||||
|
const useIsMobile = () => {
|
||||||
|
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
|
||||||
|
undefined,
|
||||||
|
);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
||||||
|
const onChange = () => {
|
||||||
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||||
|
};
|
||||||
|
mql.addEventListener('change', onChange);
|
||||||
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||||
|
return () => mql.removeEventListener('change', onChange);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return !!isMobile;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useIsMobile;
|
||||||
38
src/shared/hooks/use-window-size.ts
Normal file
38
src/shared/hooks/use-window-size.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface ISize {
|
||||||
|
width: number | undefined;
|
||||||
|
height: number | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Screen size determination
|
||||||
|
* @returns number
|
||||||
|
*/
|
||||||
|
const useWindowSize = () => {
|
||||||
|
const [size, setSize] = useState<ISize>({
|
||||||
|
width: undefined,
|
||||||
|
height: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const getScreenSize = () => {
|
||||||
|
setSize({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getScreenSize();
|
||||||
|
|
||||||
|
window.addEventListener('resize', getScreenSize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', getScreenSize);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return size;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useWindowSize;
|
||||||
10
src/shared/lib/addBaseUrl.ts
Normal file
10
src/shared/lib/addBaseUrl.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* Add base url to url
|
||||||
|
* @param url Current url
|
||||||
|
* @returns string
|
||||||
|
*/
|
||||||
|
const addBaseUrl = (url: string) => {
|
||||||
|
return import.meta.env.VITE_API_URL + url;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default addBaseUrl;
|
||||||
70
src/shared/lib/formatDate.ts
Normal file
70
src/shared/lib/formatDate.ts
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import dayjs from 'dayjs';
|
||||||
|
import 'dayjs/locale/uz-latn';
|
||||||
|
import 'dayjs/locale/uz';
|
||||||
|
import 'dayjs/locale/ru';
|
||||||
|
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||||
|
import i18n from '@/shared/config/i18n';
|
||||||
|
|
||||||
|
// Install Dayjs plugins
|
||||||
|
dayjs.extend(localizedFormat);
|
||||||
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
|
const formatDate = {
|
||||||
|
/**
|
||||||
|
* Show date in specified format
|
||||||
|
* @param time Date object or string or number
|
||||||
|
* @param format type
|
||||||
|
* @param locale Language (optional)
|
||||||
|
* @returns string
|
||||||
|
*/
|
||||||
|
to: (
|
||||||
|
time: Date | string | number,
|
||||||
|
format: string,
|
||||||
|
locale?: string,
|
||||||
|
): string => {
|
||||||
|
const currentLocale = locale || i18n.language;
|
||||||
|
return dayjs(time).locale(currentLocale).format(format);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sync date in specified format (for client-side)
|
||||||
|
* @param time Date object or string or number
|
||||||
|
* @param format type
|
||||||
|
* @param locale Language (optional, standard Uzbek)
|
||||||
|
* @returns string
|
||||||
|
*/
|
||||||
|
format: (
|
||||||
|
time: Date | string | number,
|
||||||
|
format: string,
|
||||||
|
locale: string = 'uz',
|
||||||
|
): string => {
|
||||||
|
return dayjs(time).locale(locale).format(format);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show date in relative time format (today, yesterday, 2 days ago,...)
|
||||||
|
* @param time Date object or string or number
|
||||||
|
* @param locale Language (optional, standard Uzbek)
|
||||||
|
* @returns string
|
||||||
|
*/
|
||||||
|
relative: (time: Date | string | number, locale?: string): string => {
|
||||||
|
const currentLocale = locale || i18n.language;
|
||||||
|
return dayjs(time).locale(currentLocale).fromNow();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show relative time synchronously (for client-side)
|
||||||
|
* @param time Date object or string or number
|
||||||
|
* @param locale Language (optional, standard Uzbek)
|
||||||
|
* @returns string
|
||||||
|
*/
|
||||||
|
relativeFormat: (
|
||||||
|
time: Date | string | number,
|
||||||
|
locale: string = 'uz',
|
||||||
|
): string => {
|
||||||
|
return dayjs(time).locale(locale).fromNow();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default formatDate;
|
||||||
38
src/shared/lib/formatPhone.ts
Normal file
38
src/shared/lib/formatPhone.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* Format the number (+998 00 111-22-33)
|
||||||
|
* @param value Number to be formatted (XXXYYZZZAABB)
|
||||||
|
* @returns string +998 00 111-22-33
|
||||||
|
*/
|
||||||
|
const formatPhone = (value: string) => {
|
||||||
|
// Keep only numbers
|
||||||
|
const digits = value.replace(/\D/g, '');
|
||||||
|
|
||||||
|
// Return empty string if data is not available
|
||||||
|
if (digits.length === 0) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const prefix = digits.startsWith('998') ? '+998 ' : '+998 ';
|
||||||
|
|
||||||
|
let formattedNumber = prefix;
|
||||||
|
|
||||||
|
if (digits.length > 3) {
|
||||||
|
formattedNumber += digits.slice(3, 5);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (digits.length > 5) {
|
||||||
|
formattedNumber += ' ' + digits.slice(5, 8);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (digits.length > 8) {
|
||||||
|
formattedNumber += '-' + digits.slice(8, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (digits.length > 10) {
|
||||||
|
formattedNumber += '-' + digits.slice(10, 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
return formattedNumber.trim();
|
||||||
|
};
|
||||||
|
|
||||||
|
export default formatPhone;
|
||||||
32
src/shared/lib/formatPrice.ts
Normal file
32
src/shared/lib/formatPrice.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import i18n from '@/shared/config/i18n';
|
||||||
|
import { LanguageRoutes } from '@/shared/config/i18n/type';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format price. With label.
|
||||||
|
* @param amount Price
|
||||||
|
* @param withLabel Show label. Default false
|
||||||
|
* @returns string. Ex. X XXX XXX sum
|
||||||
|
*/
|
||||||
|
const formatPrice = (amount: number | string, withLabel?: boolean) => {
|
||||||
|
const locale = i18n.language;
|
||||||
|
const label = withLabel
|
||||||
|
? locale == LanguageRoutes.RU
|
||||||
|
? ' сум'
|
||||||
|
: locale == LanguageRoutes.KI
|
||||||
|
? ' сўм'
|
||||||
|
: ' so‘m'
|
||||||
|
: '';
|
||||||
|
const parts = String(amount).split('.');
|
||||||
|
const dollars = parts[0];
|
||||||
|
const cents = parts.length > 1 ? parts[1] : '00';
|
||||||
|
|
||||||
|
const formattedDollars = dollars.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
||||||
|
|
||||||
|
if (String(amount).length == 0) {
|
||||||
|
return formattedDollars + '.' + cents + label;
|
||||||
|
} else {
|
||||||
|
return formattedDollars + label;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default formatPrice;
|
||||||
6
src/shared/lib/utils.ts
Normal file
6
src/shared/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from 'clsx';
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
59
src/shared/ui/button.tsx
Normal file
59
src/shared/ui/button.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { Slot } from '@radix-ui/react-slot';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
|
||||||
|
import { cn } from '@/shared/lib/utils';
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||||
|
outline:
|
||||||
|
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
||||||
|
ghost:
|
||||||
|
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||||
|
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
||||||
|
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||||
|
icon: 'size-9',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'button'> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : 'button';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
255
src/shared/ui/dropdown-menu.tsx
Normal file
255
src/shared/ui/dropdown-menu.tsx
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
||||||
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
import { cn } from '@/shared/lib/utils';
|
||||||
|
|
||||||
|
function DropdownMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||||
|
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Trigger
|
||||||
|
data-slot="dropdown-menu-trigger"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuContent({
|
||||||
|
className,
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
data-slot="dropdown-menu-content"
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuItem({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
variant = 'default',
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
variant?: 'default' | 'destructive';
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
data-slot="dropdown-menu-item"
|
||||||
|
data-inset={inset}
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuCheckboxItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
checked,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
data-slot="dropdown-menu-checkbox-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.RadioGroup
|
||||||
|
data-slot="dropdown-menu-radio-group"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuRadioItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
data-slot="dropdown-menu-radio-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<CircleIcon className="size-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuLabel({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
data-slot="dropdown-menu-label"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
data-slot="dropdown-menu-separator"
|
||||||
|
className={cn('bg-border -mx-1 my-1 h-px', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'span'>) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="dropdown-menu-shortcut"
|
||||||
|
className={cn(
|
||||||
|
'text-muted-foreground ml-auto text-xs tracking-widest',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||||
|
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSubTrigger({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
data-slot="dropdown-menu-sub-trigger"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRightIcon className="ml-auto size-4" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSubContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
data-slot="dropdown-menu-sub-content"
|
||||||
|
className={cn(
|
||||||
|
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
};
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
18
src/widgets/lang-toggle/lib/data.ts
Normal file
18
src/widgets/lang-toggle/lib/data.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { LanguageRoutes } from '@/shared/config/i18n/type';
|
||||||
|
|
||||||
|
const languages: { name: string; key: LanguageRoutes }[] = [
|
||||||
|
{
|
||||||
|
name: "O'zbekcha",
|
||||||
|
key: LanguageRoutes.UZ,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Ўзбекча',
|
||||||
|
key: LanguageRoutes.KI,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Русский',
|
||||||
|
key: LanguageRoutes.RU,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export { languages };
|
||||||
38
src/widgets/lang-toggle/ui/lang-toggle.tsx
Normal file
38
src/widgets/lang-toggle/ui/lang-toggle.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import { LanguageRoutes } from '@/shared/config/i18n/type';
|
||||||
|
import { Button } from '@/shared/ui/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/shared/ui/dropdown-menu';
|
||||||
|
import { languages } from '@/widgets/lang-toggle/lib/data';
|
||||||
|
import { GlobeIcon } from 'lucide-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
const LangToggle = () => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
const changeLanguage = (lng: LanguageRoutes) => {
|
||||||
|
i18n.changeLanguage(lng);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline">
|
||||||
|
<GlobeIcon />
|
||||||
|
<span>{languages.find((e) => e.key == i18n.language)?.name}</span>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
{languages.map((e) => (
|
||||||
|
<DropdownMenuItem key={e.key} onClick={() => changeLanguage(e.key)}>
|
||||||
|
{e.name}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LangToggle;
|
||||||
39
src/widgets/theme-toggle/ui/theme-toggle.tsx
Normal file
39
src/widgets/theme-toggle/ui/theme-toggle.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import { Moon, Sun } from 'lucide-react';
|
||||||
|
|
||||||
|
import { Button } from '@/shared/ui/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/shared/ui/dropdown-menu';
|
||||||
|
import { useTheme } from '@/providers/theme/ThemeProvider';
|
||||||
|
|
||||||
|
const ModeToggle = () => {
|
||||||
|
const { setTheme } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" size="icon">
|
||||||
|
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||||
|
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||||
|
<span className="sr-only">Toggle theme</span>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem onClick={() => setTheme('light')}>
|
||||||
|
Light
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme('dark')}>
|
||||||
|
Dark
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme('system')}>
|
||||||
|
System
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModeToggle;
|
||||||
36
src/widgets/welcome/ui/welcome.tsx
Normal file
36
src/widgets/welcome/ui/welcome.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import { getPosts } from '@/shared/config/api/test/test.request';
|
||||||
|
import LangToggle from '@/widgets/lang-toggle/ui/lang-toggle';
|
||||||
|
import ModeToggle from '@/widgets/theme-toggle/ui/theme-toggle';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import GitHubButton from 'react-github-btn';
|
||||||
|
|
||||||
|
const Welcome = () => {
|
||||||
|
const { data } = useQuery({
|
||||||
|
queryKey: ['posts'],
|
||||||
|
queryFn: () => getPosts(),
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('data', data);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="custom-container h-screen rounded-2xl flex items-center justify-center">
|
||||||
|
<div className="flex flex-col gap-2 items-center">
|
||||||
|
<GitHubButton
|
||||||
|
href="https://github.com/fiasuz/fias-ui"
|
||||||
|
data-color-scheme="no-preference: light; light: light; dark: dark;"
|
||||||
|
data-size="large"
|
||||||
|
data-show-count="true"
|
||||||
|
aria-label="Star fiasuz/fias-ui on GitHub"
|
||||||
|
>
|
||||||
|
Star
|
||||||
|
</GitHubButton>
|
||||||
|
<div className="flex flex-row gap-2">
|
||||||
|
<ModeToggle />
|
||||||
|
<LangToggle />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Welcome;
|
||||||
27
tsconfig.app.json
Normal file
27
tsconfig.app.json
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"incremental": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
13
tsconfig.json
Normal file
13
tsconfig.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"incremental": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
13
vite.config.ts
Normal file
13
vite.config.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
import path from "path";
|
||||||
|
import tsconfigPaths from "vite-tsconfig-paths";
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tailwindcss(), tsconfigPaths()],
|
||||||
|
resolve: {
|
||||||
|
alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user