, newValue: number | null) => {
+ setValue(newValue);
+ onChange?.(event, newValue);
+ };
+
+ return (
+
+ }
+ icon={}
+ {...rest}
+ />
+ {showLabel && (
+
+ {value !== null ? value.toFixed(precision) : '—'}
+
+ )}
+
+ );
+};
+
+export default MuiRating;
diff --git a/src/components/tabs/config.tsx b/src/components/tabs/config.tsx
new file mode 100644
index 0000000..95e3bd7
--- /dev/null
+++ b/src/components/tabs/config.tsx
@@ -0,0 +1,35 @@
+import Calendar from '@/components/calendar/calendar';
+import Rating from '@/components/rating/rating';
+import Button from '@/components/button/button';
+import { Content, TabList } from './types';
+import { Modal } from '../modal/modal';
+
+const lists: TabList[] = [
+ { value: 'calendar', list: 'Календарь' },
+ { value: 'modal', list: 'Модалка' },
+ { value: 'rating', list: 'Рэйтинг' },
+];
+
+const content: Content[] = [
+ {
+ value: 'calendar',
+ content: ,
+ },
+ {
+ value: 'modal',
+ content: (
+ Открыть модалку}
+ title="Пример модального окна"
+ >
+ Содержимое модалки. Можно вставить что угодно!
+
+ ),
+ },
+ {
+ value: 'rating',
+ content: ,
+ },
+];
+
+export { lists, content };
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
new file mode 100644
index 0000000..56f4e7e
--- /dev/null
+++ b/src/components/tabs/tabs.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box, Tabs } from '@chakra-ui/react';
+import { Content, TabList, Variant } from './types';
+
+interface IProps {
+ variant: Variant;
+ lists: Array;
+ content: Array;
+}
+
+const MyTabs: React.FC = (props) => {
+ const { variant, lists, content } = props;
+
+ return (
+
+
+
+ {lists.map(({ value, list }) => (
+
+ {list}
+
+
+ ))}
+
+ {content.map(({ value, content }) => (
+
+ {content}
+
+ ))}
+
+
+ );
+};
+
+export default MyTabs;
diff --git a/src/components/tabs/types.ts b/src/components/tabs/types.ts
new file mode 100644
index 0000000..091ba96
--- /dev/null
+++ b/src/components/tabs/types.ts
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export type TabList = {
+ value: string;
+ list: string;
+};
+
+export type Content = {
+ value: string;
+ content: React.ReactNode;
+};
+
+export type Variant = 'line' | 'subtle' | 'enclosed' | 'outline' | 'plain';
diff --git a/src/components/ui/color-mode.tsx b/src/components/ui/color-mode.tsx
new file mode 100644
index 0000000..9a26389
--- /dev/null
+++ b/src/components/ui/color-mode.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import type { IconButtonProps, SpanProps } from '@chakra-ui/react';
+import { ClientOnly, IconButton, Skeleton, Span } from '@chakra-ui/react';
+import { ThemeProvider, useTheme } from 'next-themes';
+import type { ThemeProviderProps } from 'next-themes';
+import * as React from 'react';
+import { LuMoon, LuSun } from 'react-icons/lu';
+
+export interface ColorModeProviderProps extends ThemeProviderProps {}
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+ return ;
+}
+
+export type ColorMode = 'light' | 'dark';
+
+export interface UseColorModeReturn {
+ colorMode: ColorMode;
+ setColorMode: (colorMode: ColorMode) => void;
+ toggleColorMode: () => void;
+}
+
+export function useColorMode(): UseColorModeReturn {
+ const { resolvedTheme, setTheme } = useTheme();
+ const toggleColorMode = () => {
+ setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+ };
+ return {
+ colorMode: resolvedTheme as ColorMode,
+ setColorMode: setTheme,
+ toggleColorMode,
+ };
+}
+
+export function useColorModeValue(light: T, dark: T) {
+ const { colorMode } = useColorMode();
+ return colorMode === 'dark' ? dark : light;
+}
+
+export function ColorModeIcon() {
+ const { colorMode } = useColorMode();
+ return colorMode === 'dark' ? : ;
+}
+
+interface ColorModeButtonProps extends Omit {}
+
+export const ColorModeButton = React.forwardRef(
+ function ColorModeButton(props, ref) {
+ const { toggleColorMode } = useColorMode();
+ return (
+ }>
+
+
+
+
+ );
+ },
+);
+
+export const LightMode = React.forwardRef(
+ function LightMode(props, ref) {
+ return (
+
+ );
+ },
+);
+
+export const DarkMode = React.forwardRef(function DarkMode(props, ref) {
+ return (
+
+ );
+});
diff --git a/src/components/ui/provider.tsx b/src/components/ui/provider.tsx
new file mode 100644
index 0000000..1ca22df
--- /dev/null
+++ b/src/components/ui/provider.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';
+
+export function Provider(props: ColorModeProviderProps) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..6a49fd7
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import {
+ Toaster as ChakraToaster,
+ Portal,
+ Spinner,
+ Stack,
+ Toast,
+ createToaster,
+} from '@chakra-ui/react';
+
+export const toaster = createToaster({
+ placement: 'bottom-end',
+ pauseOnPageIdle: true,
+});
+
+export const Toaster = () => {
+ return (
+
+
+ {(toast) => (
+
+ {toast.type === 'loading' ? (
+
+ ) : (
+
+ )}
+
+ {toast.title && {toast.title}}
+ {toast.description && {toast.description}}
+
+ {toast.action && {toast.action.label}}
+ {toast.meta?.closable && }
+
+ )}
+
+
+ );
+};
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..9f3b8ba
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,44 @@
+import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+ showArrow?: boolean;
+ portalled?: boolean;
+ portalRef?: React.RefObject;
+ content: React.ReactNode;
+ contentProps?: ChakraTooltip.ContentProps;
+ disabled?: boolean;
+}
+
+export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+ const {
+ showArrow,
+ children,
+ disabled,
+ portalled = true,
+ content,
+ contentProps,
+ portalRef,
+ ...rest
+ } = props;
+
+ if (disabled) return children;
+
+ return (
+
+ {children}
+
+
+
+ {showArrow && (
+
+
+
+ )}
+ {content}
+
+
+
+
+ );
+});
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..2560f79
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from '@/app';
+import '@mantine/dates/styles.css';
+import 'antd/dist/reset.css';
+import '@radix-ui/themes/styles.css';
+import './main.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+
+
+ ,
+);
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 0000000..6da0d02
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,23 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 20px;
+ text-align: center;
+}
+
+.app {
+ color: #2c3e50;
+}
+
+img {
+ animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/tailwind-global.css b/src/tailwind-global.css
new file mode 100644
index 0000000..04b35af
--- /dev/null
+++ b/src/tailwind-global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/types/declarations.d.ts b/src/types/declarations.d.ts
new file mode 100644
index 0000000..e732f39
--- /dev/null
+++ b/src/types/declarations.d.ts
@@ -0,0 +1,2 @@
+declare module '*.svg';
+declare module '@assets/*';
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..c567459
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+ corePlugins: {
+ preflight: false, // Отключает сброс стилей Tailwind
+ },
+ prefix: 'tw-', // Все классы Tailwind теперь требуют префикса tw-
+ content: [
+ './src/**/*.{js,jsx,ts,tsx}',
+ './public/index.html',
+ './node_modules/@mantine/**/*.{js,ts,jsx,tsx}',
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
index 082869f..ba476bc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,10 +2,10 @@
"compilerOptions": {
"target": "ESNext", // Современный ECMAScript
"module": "ESNext", // Использовать ES-модули
- "lib": ["DOM", "ESNext"], // Библиотеки для типов
+ "lib": ["DOM", "DOM.Iterable", "ESNext"], // Библиотеки для типов
"jsx": "react-jsx", // JSX-трансформация (React 17+)
"strict": true, // Включить все strict-опции
- "moduleResolution": "node", // Для работы с node_modules
+ "moduleResolution": "Bundler", // Для работы с node_modules
"esModuleInterop": true, // Упрощённый импорт CommonJS
"skipLibCheck": true, // Пропускать проверку типов библиотек
"forceConsistentCasingInFileNames": true, // Чувствительность к регистру в именах файлов
@@ -25,12 +25,19 @@
"@services/*": ["services/*"] // Алиас для API-сервисов
},
"allowJs": true, // Разрешить .js-файлы
- "outDir": "./dist", // Папка для скомпилированных файлов (если нужно)
+ "outDir": "./distWebpack", // Папка для скомпилированных файлов (если нужно)
"isolatedModules": true, // Важно для работы с Babel/ESLint
"allowSyntheticDefaultImports": true, // Для совместимости с CommonJS
"resolveJsonModule": true, // Импорт JSON файлов
"strictNullChecks": true, // Явная проверка null/undefined
- "noFallthroughCasesInSwitch": true // Предупреждение о break в switch
+ "noFallthroughCasesInSwitch": true, // Предупреждение о break в switch
+ "incremental": true, // Ускорение последующих сборок
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "noEmit": true
},
"include": [
// Какие файлы проверять
@@ -38,7 +45,9 @@
"src/**/*.tsx",
"src/**/*.js",
"src/**/*.jsx",
- "vite.config.ts" // Если используете Vite
+ "vite.config.ts", // Если используете Vite
+ "next-env.d.ts",
+ ".next/types/**/*.ts"
],
"exclude": [
// Игнорируемые файлы
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..38b14b4
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,142 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+// Получаем __dirname в ES модулях
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default (env, argv) => {
+ const isProduction = argv.mode === 'production';
+
+ return {
+ entry: './src/index.tsx',
+ output: {
+ path: path.resolve(__dirname, 'distWebpack'),
+ filename: 'bundle.[contenthash].js',
+ publicPath: '/',
+ },
+ resolve: {
+ extensions: ['.tsx', '.ts', '.js', '.jsx'],
+ plugins: [
+ new TsconfigPathsPlugin(), // Автоматически подтянет алиасы из tsconfig.json
+ ],
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(ts|tsx)$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: 'ts-loader',
+ options: {
+ transpileOnly: true, // Ускоряет сборку
+ compilerOptions: {
+ noEmit: false, // Важно для генерации вывода
+ },
+ },
+ },
+ ],
+ },
+ {
+ test: /\.css$/i,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: {
+ config: path.resolve(__dirname, 'postcss.config.cjs'),
+ },
+ },
+ },
+ ],
+ },
+
+ // Обработка CSS модулей (только ваши модульные стили)
+ {
+ test: /\.module\.css$/,
+ exclude: path.resolve(__dirname, 'node_modules'),
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ modules: {
+ auto: true,
+ localIdentName: isProduction
+ ? '[hash:base64]'
+ : '[path][name]__[local]--[hash:base64:5]',
+ },
+ },
+ },
+ 'postcss-loader',
+ ],
+ },
+
+ // Обработка SCSS (глобальные стили)
+ {
+ test: /\.scss$/,
+ include: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'src/styles')],
+ use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+ },
+
+ // Обработка SCSS модулей
+ {
+ test: /\.module\.scss$/,
+ exclude: path.resolve(__dirname, 'node_modules'),
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ modules: {
+ auto: true,
+ localIdentName: isProduction
+ ? '[hash:base64]'
+ : '[path][name]__[local]--[hash:base64:5]',
+ },
+ },
+ },
+ 'postcss-loader',
+ 'sass-loader',
+ ],
+ },
+ {
+ test: /\.(png|svg|jpg|jpeg|gif)$/i,
+ type: 'asset/resource',
+ },
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/i,
+ type: 'asset/resource',
+ },
+ {
+ test: /\.svg$/,
+ use: ['@svgr/webpack', 'file-loader'],
+ },
+ ],
+ },
+ plugins: [
+ new CleanWebpackPlugin(),
+ new HtmlWebpackPlugin({
+ template: './index.html',
+ favicon: './src/assets/favicon.ico',
+ }),
+ ],
+ devServer: {
+ static: {
+ directory: path.join(__dirname, 'distWebpack'),
+ },
+ historyApiFallback: true,
+ compress: true,
+ port: 3000,
+ hot: true,
+ open: true,
+ },
+ devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
+ };
+};