├── .prettierrc.json
├── src
    ├── features
    │   ├── auth
    │   │   ├── index.tsx
    │   │   ├── login.page.tsx
    │   │   ├── register.page.tsx
    │   │   ├── model
    │   │   │   ├── use-login.ts
    │   │   │   └── use-register.ts
    │   │   └── ui
    │   │   │   ├── auth-layout.tsx
    │   │   │   ├── login-form.tsx
    │   │   │   └── register-form.tsx
    │   ├── board-templates
    │   │   ├── index.ts
    │   │   ├── use-templates-modal.ts
    │   │   ├── templates-modal.tsx
    │   │   ├── templates-gallery.tsx
    │   │   └── template-card.tsx
    │   ├── board
    │   │   └── board.page.tsx
    │   ├── boards-list
    │   │   ├── ui
    │   │   │   ├── boards-search-input.tsx
    │   │   │   ├── view-mode-toggle.tsx
    │   │   │   ├── boards-favorite-toggle.tsx
    │   │   │   ├── boards-sort-select.tsx
    │   │   │   ├── boards-sidebar.tsx
    │   │   │   ├── boards-list-card.tsx
    │   │   │   ├── boards-list-item.tsx
    │   │   │   └── boards-list-layout.tsx
    │   │   ├── model
    │   │   │   ├── use-boards-filters.ts
    │   │   │   ├── use-delete-board.tsx
    │   │   │   ├── use-create-board.ts
    │   │   │   ├── use-update-favorite.ts
    │   │   │   ├── use-recent-groups.ts
    │   │   │   └── use-boards-list.tsx
    │   │   ├── compose
    │   │   │   ├── board-card.tsx
    │   │   │   └── board-item.tsx
    │   │   ├── boards-list-favorite.page.tsx
    │   │   ├── boards-list-recent.page.tsx
    │   │   └── boards-list.page.tsx
    │   └── header
    │   │   └── index.tsx
    ├── shared
    │   ├── model
    │   │   ├── config.ts
    │   │   ├── routes.ts
    │   │   └── session.ts
    │   ├── api
    │   │   ├── query-client.ts
    │   │   ├── schema
    │   │   │   ├── index.ts
    │   │   │   ├── shared
    │   │   │   │   └── responses.yaml
    │   │   │   ├── main.yaml
    │   │   │   ├── endpoints
    │   │   │   │   ├── auth.yaml
    │   │   │   │   └── boards.yaml
    │   │   │   └── generated.ts
    │   │   ├── mocks
    │   │   │   ├── index.ts
    │   │   │   ├── browser.ts
    │   │   │   ├── http.ts
    │   │   │   ├── session.ts
    │   │   │   └── handlers
    │   │   │   │   ├── auth.ts
    │   │   │   │   └── boards.ts
    │   │   └── instance.ts
    │   ├── lib
    │   │   ├── css.ts
    │   │   └── react.ts
    │   ├── env.d.ts
    │   └── ui
    │   │   └── kit
    │   │       ├── skeleton.tsx
    │   │       ├── label.tsx
    │   │       ├── input.tsx
    │   │       ├── switch.tsx
    │   │       ├── scroll-area.tsx
    │   │       ├── tabs.tsx
    │   │       ├── button.tsx
    │   │       ├── card.tsx
    │   │       ├── dialog.tsx
    │   │       ├── form.tsx
    │   │       ├── select.tsx
    │   │       └── dropdown-menu.tsx
    └── app
    │   ├── app.tsx
    │   ├── providers.tsx
    │   ├── main.tsx
    │   ├── protected-route.tsx
    │   ├── router.tsx
    │   └── index.css
├── .env.development
├── tsconfig.json
├── vite.config.ts
├── .gitignore
├── index.html
├── components.json
├── tsconfig.node.json
├── tsconfig.app.json
├── eslint.config.js
├── public
    ├── vite.svg
    └── mockServiceWorker.js
├── eslint.boundaries.js
├── README.md
├── package.json
└── bundle.yaml


/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/src/features/auth/index.tsx:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.env.development:
--------------------------------------------------------------------------------
1 | VITE_API_BASE_URL=/api


--------------------------------------------------------------------------------
/src/shared/model/config.ts:
--------------------------------------------------------------------------------
1 | export const CONFIG = {
2 |   API_BASE_URL: import.meta.env.VITE_API_BASE_URL,
3 | };
4 | 


--------------------------------------------------------------------------------
/src/shared/api/query-client.ts:
--------------------------------------------------------------------------------
1 | import { QueryClient } from "@tanstack/react-query";
2 | 
3 | export const queryClient = new QueryClient();
4 | 


--------------------------------------------------------------------------------
/src/shared/api/schema/index.ts:
--------------------------------------------------------------------------------
1 | import { paths, components } from "./generated";
2 | 
3 | export type ApiPaths = paths;
4 | export type ApiSchemas = components["schemas"];
5 | 


--------------------------------------------------------------------------------
/src/shared/lib/css.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/features/board-templates/index.ts:
--------------------------------------------------------------------------------
1 | export { TemplatesGallery } from "./templates-gallery";
2 | export { TemplatesModal } from "./templates-modal";
3 | export { useTemplatesModal } from "./use-templates-modal";
4 | 


--------------------------------------------------------------------------------
/src/app/app.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from "react-router-dom";
 2 | 
 3 | export function App() {
 4 |   return (
 5 |     <div className="min-h-screen flex flex-col">
 6 |       <Outlet />
 7 |     </div>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/shared/env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vite/client" />
 2 | 
 3 | interface ImportMetaEnv {
 4 |   readonly VITE_API_BASE_URL: string;
 5 | }
 6 | 
 7 | interface ImportMeta {
 8 |   readonly env: ImportMetaEnv;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/shared/api/mocks/index.ts:
--------------------------------------------------------------------------------
1 | export async function enableMocking() {
2 |   if (import.meta.env.PROD) {
3 |     return;
4 |   }
5 | 
6 |   const { worker } = await import("@/shared/api/mocks/browser");
7 |   return worker.start();
8 | }
9 | 


--------------------------------------------------------------------------------
/src/shared/api/mocks/browser.ts:
--------------------------------------------------------------------------------
1 | import { setupWorker } from "msw/browser";
2 | import { boardsHandlers } from "./handlers/boards";
3 | import { authHandlers } from "./handlers/auth";
4 | 
5 | export const worker = setupWorker(...authHandlers, ...boardsHandlers);
6 | 


--------------------------------------------------------------------------------
/src/shared/api/mocks/http.ts:
--------------------------------------------------------------------------------
1 | import { createOpenApiHttp } from "openapi-msw";
2 | import { CONFIG } from "@/shared/model/config";
3 | import { ApiPaths } from "../schema";
4 | 
5 | export const http = createOpenApiHttp<ApiPaths>({
6 |   baseUrl: CONFIG.API_BASE_URL,
7 | });
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     { "path": "./tsconfig.app.json" },
 5 |     { "path": "./tsconfig.node.json" }
 6 |   ],
 7 |   "compilerOptions": {
 8 |     "baseUrl": ".",
 9 |     "paths": {
10 |       "@/*": ["src/*"]
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/providers.tsx:
--------------------------------------------------------------------------------
1 | import { queryClient } from "@/shared/api/query-client";
2 | import { QueryClientProvider } from "@tanstack/react-query";
3 | 
4 | export function Providers({ children }: { children: React.ReactNode }) {
5 |   return (
6 |     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | import tsconfigPaths from "vite-tsconfig-paths";
 4 | import tailwindcss from "@tailwindcss/vite";
 5 | 
 6 | // https://vite.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [react(), tsconfigPaths(), tailwindcss()],
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/features/board/board.page.tsx:
--------------------------------------------------------------------------------
 1 | import { PathParams, ROUTES } from "@/shared/model/routes";
 2 | import { useParams } from "react-router-dom";
 3 | 
 4 | function BoardPage() {
 5 |   const params = useParams<PathParams[typeof ROUTES.BOARD]>();
 6 |   return <div>Board page {params.boardId}</div>;
 7 | }
 8 | 
 9 | export const Component = BoardPage;
10 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/shared/lib/css"
 2 | 
 3 | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
 4 |   return (
 5 |     <div
 6 |       data-slot="skeleton"
 7 |       className={cn("bg-accent animate-pulse rounded-md", className)}
 8 |       {...props}
 9 |     />
10 |   )
11 | }
12 | 
13 | export { Skeleton }
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/features/board-templates/use-templates-modal.ts:
--------------------------------------------------------------------------------
 1 | import { createGStore } from "create-gstore";
 2 | import { useState } from "react";
 3 | 
 4 | export const useTemplatesModal = createGStore(() => {
 5 |   const [isOpen, setIsOpen] = useState(false);
 6 | 
 7 |   const open = () => setIsOpen(true);
 8 |   const close = () => setIsOpen(false);
 9 | 
10 |   return {
11 |     isOpen,
12 |     open,
13 |     close,
14 |   };
15 | });
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/app/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/shared/lib/react.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { useEffect } from "react";
 3 | 
 4 | export function useDebouncedValue<T>(value: T, delay: number) {
 5 |   const [debouncedValue, setDebouncedValue] = useState(value);
 6 | 
 7 |   useEffect(() => {
 8 |     const timer = setTimeout(() => setDebouncedValue(value), delay);
 9 | 
10 |     return () => clearTimeout(timer);
11 |   }, [value, delay]);
12 | 
13 |   return debouncedValue;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/main.tsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import { RouterProvider } from "react-router-dom";
 5 | import { router } from "./router";
 6 | import { enableMocking } from "@/shared/api/mocks";
 7 | 
 8 | enableMocking().then(() => {
 9 |   createRoot(document.getElementById("root")!).render(
10 |     <StrictMode>
11 |       <RouterProvider router={router} />
12 |     </StrictMode>,
13 |   );
14 | });
15 | 


--------------------------------------------------------------------------------
/src/features/boards-list/ui/boards-search-input.tsx:
--------------------------------------------------------------------------------
 1 | import { Input } from "@/shared/ui/kit/input";
 2 | 
 3 | interface BoardsSearchInputProps {
 4 |   value: string;
 5 |   onChange: (value: string) => void;
 6 | }
 7 | 
 8 | export function BoardsSearchInput({ value, onChange }: BoardsSearchInputProps) {
 9 |   return (
10 |     <Input
11 |       id="search"
12 |       placeholder="Введите название доски..."
13 |       value={value}
14 |       onChange={(e) => onChange(e.target.value)}
15 |       className="w-full"
16 |     />
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/shared/model/routes.ts:
--------------------------------------------------------------------------------
 1 | import "react-router-dom";
 2 | 
 3 | export const ROUTES = {
 4 |   HOME: "/",
 5 |   LOGIN: "/login",
 6 |   REGISTER: "/register",
 7 |   BOARDS: "/boards",
 8 |   BOARD: "/boards/:boardId",
 9 |   FAVORITE_BOARDS: "/boards/favorite",
10 |   RECENT_BOARDS: "/boards/recent",
11 | } as const;
12 | 
13 | export type PathParams = {
14 |   [ROUTES.BOARD]: {
15 |     boardId: string;
16 |   };
17 | };
18 | 
19 | declare module "react-router-dom" {
20 |   interface Register {
21 |     params: PathParams;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "src/app/index.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/shared/ui",
15 |     "utils": "@/shared/lib/css",
16 |     "ui": "@/shared/ui/kit",
17 |     "lib": "@/shared/lib",
18 |     "hooks": "@/shared/lib/react"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }
22 | 


--------------------------------------------------------------------------------
/src/features/boards-list/model/use-boards-filters.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | export type BoardsSortOption =
 4 |   | "createdAt"
 5 |   | "updatedAt"
 6 |   | "lastOpenedAt"
 7 |   | "name";
 8 | 
 9 | export type BoardsFilters = {
10 |   search: string;
11 |   sort: BoardsSortOption;
12 | };
13 | 
14 | export function useBoardsFilters() {
15 |   const [search, setSearch] = useState("");
16 |   const [sort, setSort] = useState<BoardsSortOption>("lastOpenedAt");
17 | 
18 |   return {
19 |     search,
20 |     sort,
21 |     setSearch,
22 |     setSort,
23 |   };
24 | }
25 | 


--------------------------------------------------------------------------------
/src/features/auth/login.page.tsx:
--------------------------------------------------------------------------------
 1 | import { ROUTES } from "@/shared/model/routes";
 2 | import { Link } from "react-router-dom";
 3 | import { AuthLayout } from "./ui/auth-layout";
 4 | import { LoginForm } from "./ui/login-form";
 5 | 
 6 | function LoginPage() {
 7 |   return (
 8 |     <AuthLayout
 9 |       title="Вход в систему"
10 |       description="Введите ваш email и пароль для входа в систему"
11 |       form={<LoginForm />}
12 |       footerText={
13 |         <>
14 |           Нет аккаунта? <Link to={ROUTES.REGISTER}>Зарегистрироваться</Link>
15 |         </>
16 |       }
17 |     />
18 |   );
19 | }
20 | 
21 | export const Component = LoginPage;
22 | 


--------------------------------------------------------------------------------
/src/features/auth/register.page.tsx:
--------------------------------------------------------------------------------
 1 | import { ROUTES } from "@/shared/model/routes";
 2 | import { Link } from "react-router-dom";
 3 | import { AuthLayout } from "./ui/auth-layout";
 4 | import { RegisterForm } from "./ui/register-form";
 5 | 
 6 | function RegisterPage() {
 7 |   return (
 8 |     <AuthLayout
 9 |       title="Регистрация"
10 |       description="Введите ваш email и пароль для регистрации в системе"
11 |       form={<RegisterForm />}
12 |       footerText={
13 |         <>
14 |           Уже есть аккаунт? <Link to={ROUTES.LOGIN}>Войти</Link>
15 |         </>
16 |       }
17 |     />
18 |   );
19 | }
20 | 
21 | export const Component = RegisterPage;
22 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 4 |     "target": "ES2022",
 5 |     "lib": ["ES2023"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 | 
16 |     /* Linting */
17 |     "strict": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "noUncheckedSideEffectImports": true
22 |   },
23 |   "include": ["vite.config.ts"]
24 | }
25 | 


--------------------------------------------------------------------------------
/src/shared/api/schema/shared/responses.yaml:
--------------------------------------------------------------------------------
 1 | UnauthorizedError:
 2 |   description: Unauthorized
 3 |   content:
 4 |     application/json:
 5 |       schema:
 6 |         $ref: "#/schemas/Error"
 7 | 
 8 | NotFoundError:
 9 |   description: Resource not found
10 |   content:
11 |     application/json:
12 |       schema:
13 |         $ref: "#/schemas/Error"
14 | 
15 | BadRequestError:
16 |   description: Bad request
17 |   content:
18 |     application/json:
19 |       schema:
20 |         $ref: "#/schemas/Error"
21 | 
22 | schemas:
23 |   Error:
24 |     type: object
25 |     required:
26 |       - message
27 |       - code
28 |     properties:
29 |       message:
30 |         type: string
31 |       code:
32 |         type: string
33 | 


--------------------------------------------------------------------------------
/src/features/boards-list/ui/view-mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | import { Tabs, TabsList, TabsTrigger } from "@/shared/ui/kit/tabs";
 2 | import { ImagesIcon, ListIcon } from "lucide-react";
 3 | 
 4 | export type ViewMode = "list" | "cards";
 5 | export function ViewModeToggle({
 6 |   value,
 7 |   onChange,
 8 | }: {
 9 |   value: ViewMode;
10 |   onChange: (value: ViewMode) => void;
11 | }) {
12 |   return (
13 |     <Tabs defaultValue={value} onValueChange={(e) => onChange(e as ViewMode)}>
14 |       <TabsList>
15 |         <TabsTrigger value="list">
16 |           <ListIcon />
17 |         </TabsTrigger>
18 |         <TabsTrigger value="cards">
19 |           <ImagesIcon />
20 |         </TabsTrigger>
21 |       </TabsList>
22 |     </Tabs>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | 
 6 | import { cn } from "@/shared/lib/css"
 7 | 
 8 | function Label({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
12 |   return (
13 |     <LabelPrimitive.Root
14 |       data-slot="label"
15 |       className={cn(
16 |         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/src/app/protected-route.tsx:
--------------------------------------------------------------------------------
 1 | import { ROUTES } from "@/shared/model/routes";
 2 | import { Outlet, redirect } from "react-router-dom";
 3 | import { useSession } from "@/shared/model/session";
 4 | import { Navigate } from "react-router-dom";
 5 | import { enableMocking } from "@/shared/api/mocks";
 6 | 
 7 | export function ProtectedRoute() {
 8 |   const { session } = useSession();
 9 | 
10 |   if (!session) {
11 |     return <Navigate to={ROUTES.LOGIN} />;
12 |   }
13 | 
14 |   return <Outlet />;
15 | }
16 | 
17 | export async function protectedLoader() {
18 |   await enableMocking();
19 | 
20 |   const token = await useSession.getState().refreshToken();
21 | 
22 |   if (!token) {
23 |     return redirect(ROUTES.LOGIN);
24 |   }
25 | 
26 |   return null;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/features/boards-list/ui/boards-favorite-toggle.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/shared/lib/css";
 2 | import { StarIcon } from "lucide-react";
 3 | 
 4 | interface BoardsFavoriteToggleProps {
 5 |   isFavorite: boolean;
 6 |   onToggle: () => void;
 7 |   className?: string;
 8 | }
 9 | 
10 | export function BoardsFavoriteToggle({
11 |   isFavorite,
12 |   onToggle,
13 |   className,
14 | }: BoardsFavoriteToggleProps) {
15 |   return (
16 |     <button
17 |       onClick={onToggle}
18 |       className={cn(
19 |         "p-1 rounded-full hover:bg-gray-100 transition-colors",
20 |         className,
21 |       )}
22 |     >
23 |       <StarIcon
24 |         className={cn(
25 |           "w-5 h-5",
26 |           isFavorite ? "fill-yellow-400 text-yellow-400" : "text-gray-400",
27 |         )}
28 |       />
29 |     </button>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 4 |     "target": "ES2020",
 5 |     "useDefineForClassFields": true,
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "module": "ESNext",
 8 |     "skipLibCheck": true,
 9 | 
10 |     /* Bundler mode */
11 |     "moduleResolution": "bundler",
12 |     "allowImportingTsExtensions": true,
13 |     "isolatedModules": true,
14 |     "moduleDetection": "force",
15 |     "noEmit": true,
16 |     "jsx": "react-jsx",
17 | 
18 |     /* Linting */
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "noFallthroughCasesInSwitch": true,
23 |     "noUncheckedSideEffectImports": true,
24 |     "baseUrl": ".",
25 |     "paths": {
26 |       "@/*": ["src/*"]
27 |     }
28 |   },
29 |   "include": ["src"]
30 | }
31 | 


--------------------------------------------------------------------------------
/src/features/boards-list/model/use-delete-board.tsx:
--------------------------------------------------------------------------------
 1 | import { rqClient } from "@/shared/api/instance";
 2 | import { useQueryClient } from "@tanstack/react-query";
 3 | 
 4 | export function useDeleteBoard() {
 5 |   const queryClient = useQueryClient();
 6 |   const deleteBoardMutation = rqClient.useMutation(
 7 |     "delete",
 8 |     "/boards/{boardId}",
 9 |     {
10 |       onSettled: async () => {
11 |         await queryClient.invalidateQueries(
12 |           rqClient.queryOptions("get", "/boards"),
13 |         );
14 |       },
15 |     },
16 |   );
17 | 
18 |   return {
19 |     deleteBoard: (boardId: string) =>
20 |       deleteBoardMutation.mutate({
21 |         params: { path: { boardId } },
22 |       }),
23 |     getIsPending: (boardId: string) =>
24 |       deleteBoardMutation.isPending &&
25 |       deleteBoardMutation.variables?.params?.path?.boardId === boardId,
26 |   };
27 | }
28 | 


--------------------------------------------------------------------------------
/src/features/board-templates/templates-modal.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Dialog,
 3 |   DialogContent,
 4 |   DialogDescription,
 5 |   DialogHeader,
 6 |   DialogTitle,
 7 | } from "@/shared/ui/kit/dialog";
 8 | import { TemplatesGallery } from "./templates-gallery";
 9 | import { useTemplatesModal } from "./use-templates-modal";
10 | 
11 | export function TemplatesModal() {
12 |   const { isOpen, close } = useTemplatesModal();
13 | 
14 |   return (
15 |     <Dialog open={isOpen} onOpenChange={close}>
16 |       <DialogContent className="max-w-3xl">
17 |         <DialogHeader>
18 |           <DialogTitle>Выберите шаблон</DialogTitle>
19 |           <DialogDescription>
20 |             Выберите шаблон для создания новой доски
21 |           </DialogDescription>
22 |         </DialogHeader>
23 | 
24 |         <TemplatesGallery className="h-[60vh] pr-4" />
25 |       </DialogContent>
26 |     </Dialog>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/src/features/boards-list/model/use-create-board.ts:
--------------------------------------------------------------------------------
 1 | import { rqClient } from "@/shared/api/instance";
 2 | import { ROUTES } from "@/shared/model/routes";
 3 | 
 4 | import { useQueryClient } from "@tanstack/react-query";
 5 | import { href, useNavigate } from "react-router-dom";
 6 | 
 7 | export function useCreateBoard() {
 8 |   const navigate = useNavigate();
 9 |   const queryClient = useQueryClient();
10 | 
11 |   const createBoardMutation = rqClient.useMutation("post", "/boards", {
12 |     onSettled: async () => {
13 |       await queryClient.invalidateQueries(
14 |         rqClient.queryOptions("get", "/boards"),
15 |       );
16 |     },
17 |     onSuccess: (data) => {
18 |       navigate(href(ROUTES.BOARD, { boardId: data.id }));
19 |     },
20 |   });
21 | 
22 |   return {
23 |     isPending: createBoardMutation.isPending,
24 |     createBoard: () => createBoardMutation.mutate({}),
25 |   };
26 | }
27 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js";
 2 | import globals from "globals";
 3 | import reactHooks from "eslint-plugin-react-hooks";
 4 | import reactRefresh from "eslint-plugin-react-refresh";
 5 | import tseslint from "typescript-eslint";
 6 | import { eslintBoundariesConfig } from "./eslint.boundaries.js";
 7 | 
 8 | export default tseslint.config(
 9 |   { ignores: ["dist"] },
10 |   {
11 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
12 |     files: ["**/*.{ts,tsx}"],
13 |     languageOptions: {
14 |       ecmaVersion: 2020,
15 |       globals: globals.browser,
16 |     },
17 |     plugins: {
18 |       "react-hooks": reactHooks,
19 |       "react-refresh": reactRefresh,
20 |     },
21 |     rules: {
22 |       ...reactHooks.configs.recommended.rules,
23 |       "react-refresh/only-export-components": [
24 |         "warn",
25 |         { allowConstantExport: true },
26 |       ],
27 |     },
28 |   },
29 |   eslintBoundariesConfig,
30 | );
31 | 


--------------------------------------------------------------------------------
/src/features/auth/model/use-login.ts:
--------------------------------------------------------------------------------
 1 | import { publicRqClient } from "@/shared/api/instance";
 2 | import { ApiSchemas } from "@/shared/api/schema";
 3 | import { ROUTES } from "@/shared/model/routes";
 4 | import { useSession } from "@/shared/model/session";
 5 | import { useNavigate } from "react-router-dom";
 6 | 
 7 | export function useLogin() {
 8 |   const navigate = useNavigate();
 9 | 
10 |   const session = useSession();
11 |   const loginMutation = publicRqClient.useMutation("post", "/auth/login", {
12 |     onSuccess(data) {
13 |       session.login(data.accessToken);
14 |       navigate(ROUTES.HOME);
15 |     },
16 |   });
17 | 
18 |   const login = (data: ApiSchemas["LoginRequest"]) => {
19 |     loginMutation.mutate({ body: data });
20 |   };
21 | 
22 |   const errorMessage = loginMutation.isError
23 |     ? loginMutation.error.message
24 |     : undefined;
25 | 
26 |   return {
27 |     login,
28 |     isPending: loginMutation.isPending,
29 |     errorMessage,
30 |   };
31 | }
32 | 


--------------------------------------------------------------------------------
/src/features/header/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useSession } from "@/shared/model/session";
 2 | import { Button } from "@/shared/ui/kit/button";
 3 | 
 4 | export function AppHeader() {
 5 |   const { session, logout } = useSession();
 6 | 
 7 |   if (!session) {
 8 |     return null;
 9 |   }
10 | 
11 |   return (
12 |     <header className="bg-background border-b border-border/40 shadow-sm py-3 px-4 mb-6">
13 |       <div className="max-w-7xl mx-auto flex items-center justify-between">
14 |         <div className="text-xl font-semibold">Miro Copy</div>
15 | 
16 |         <div className="flex items-center gap-4">
17 |           <span className="text-sm text-muted-foreground">{session.email}</span>
18 |           <Button
19 |             variant="outline"
20 |             size="sm"
21 |             onClick={() => logout()}
22 |             className="hover:bg-destructive/10"
23 |           >
24 |             Выйти
25 |           </Button>
26 |         </div>
27 |       </div>
28 |     </header>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/src/features/auth/model/use-register.ts:
--------------------------------------------------------------------------------
 1 | import { publicRqClient } from "@/shared/api/instance";
 2 | import { ApiSchemas } from "@/shared/api/schema";
 3 | import { ROUTES } from "@/shared/model/routes";
 4 | import { useSession } from "@/shared/model/session";
 5 | import { useNavigate } from "react-router-dom";
 6 | 
 7 | export function useRegister() {
 8 |   const navigate = useNavigate();
 9 | 
10 |   const session = useSession();
11 |   const registerMutation = publicRqClient.useMutation(
12 |     "post",
13 |     "/auth/register",
14 |     {
15 |       onSuccess(data) {
16 |         session.login(data.accessToken);
17 |         navigate(ROUTES.HOME);
18 |       },
19 |     },
20 |   );
21 | 
22 |   const register = (data: ApiSchemas["RegisterRequest"]) => {
23 |     registerMutation.mutate({ body: data });
24 |   };
25 | 
26 |   const errorMessage = registerMutation.isError
27 |     ? registerMutation.error.message
28 |     : undefined;
29 | 
30 |   return {
31 |     register,
32 |     isPending: registerMutation.isPending,
33 |     errorMessage,
34 |   };
35 | }
36 | 


--------------------------------------------------------------------------------
/src/features/auth/ui/auth-layout.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Card,
 3 |   CardHeader,
 4 |   CardTitle,
 5 |   CardDescription,
 6 |   CardContent,
 7 |   CardFooter,
 8 | } from "@/shared/ui/kit/card";
 9 | import React from "react";
10 | 
11 | export function AuthLayout({
12 |   form,
13 |   title,
14 |   description,
15 |   footerText,
16 | }: {
17 |   form: React.ReactNode;
18 |   title: React.ReactNode;
19 |   description: React.ReactNode;
20 |   footerText: React.ReactNode;
21 | }) {
22 |   return (
23 |     <main className="grow flex flex-col pt-[200px] items-center">
24 |       <Card className="w-full max-w-[400px]">
25 |         <CardHeader>
26 |           <CardTitle>{title}</CardTitle>
27 |           <CardDescription>{description}</CardDescription>
28 |         </CardHeader>
29 |         <CardContent>{form}</CardContent>
30 |         <CardFooter>
31 |           <p className="text-sm text-muted-foreground [&_a]:underline [&_a]:text-primary">
32 |             {footerText}
33 |           </p>
34 |         </CardFooter>
35 |       </Card>
36 |     </main>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/shared/lib/css"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 | 


--------------------------------------------------------------------------------
/src/features/boards-list/ui/boards-sort-select.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Select,
 3 |   SelectContent,
 4 |   SelectItem,
 5 |   SelectTrigger,
 6 |   SelectValue,
 7 | } from "@/shared/ui/kit/select";
 8 | 
 9 | export type BoardsSortOption =
10 |   | "createdAt"
11 |   | "updatedAt"
12 |   | "lastOpenedAt"
13 |   | "name";
14 | 
15 | interface BoardsSortSelectProps {
16 |   value: BoardsSortOption;
17 |   onValueChange: (value: BoardsSortOption) => void;
18 | }
19 | 
20 | export function BoardsSortSelect({
21 |   value,
22 |   onValueChange,
23 | }: BoardsSortSelectProps) {
24 |   return (
25 |     <Select value={value} onValueChange={onValueChange}>
26 |       <SelectTrigger id="sort" className="w-full">
27 |         <SelectValue placeholder="Сортировка" />
28 |       </SelectTrigger>
29 |       <SelectContent>
30 |         <SelectItem value="lastOpenedAt">По дате открытия</SelectItem>
31 |         <SelectItem value="createdAt">По дате создания</SelectItem>
32 |         <SelectItem value="updatedAt">По дате обновления</SelectItem>
33 |         <SelectItem value="name">По имени</SelectItem>
34 |       </SelectContent>
35 |     </Select>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/src/features/boards-list/compose/board-card.tsx:
--------------------------------------------------------------------------------
 1 | import { ApiSchemas } from "@/shared/api/schema";
 2 | import { BoardsFavoriteToggle } from "../ui/boards-favorite-toggle";
 3 | import { BoardsListCard } from "../ui/boards-list-card";
 4 | import { Button } from "@/shared/ui/kit/button";
 5 | import { useUpdateFavorite } from "../model/use-update-favorite";
 6 | import { useDeleteBoard } from "../model/use-delete-board";
 7 | 
 8 | export function BoardCard({ board }: { board: ApiSchemas["Board"] }) {
 9 |   const deleteBoard = useDeleteBoard();
10 |   const updateFavorite = useUpdateFavorite();
11 | 
12 |   return (
13 |     <BoardsListCard
14 |       key={board.id}
15 |       board={board}
16 |       rightTopActions={
17 |         <BoardsFavoriteToggle
18 |           isFavorite={updateFavorite.isOptimisticFavorite(board)}
19 |           onToggle={() => updateFavorite.toggle(board)}
20 |         />
21 |       }
22 |       bottomActions={
23 |         <Button
24 |           variant="destructive"
25 |           disabled={deleteBoard.getIsPending(board.id)}
26 |           onClick={() => deleteBoard.deleteBoard(board.id)}
27 |         >
28 |           Удалить
29 |         </Button>
30 |       }
31 |     />
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/shared/api/schema/main.yaml:
--------------------------------------------------------------------------------
 1 | openapi: 3.0.0
 2 | info:
 3 |   title: Miro-like Collaborative Whiteboard API
 4 |   description: API for a collaborative whiteboard application similar to Miro
 5 |   version: 1.0.0
 6 | 
 7 | components:
 8 |   securitySchemes:
 9 |     bearerAuth:
10 |       type: http
11 |       scheme: bearer
12 |       bearerFormat: JWT
13 | 
14 | 
15 | paths:
16 | 
17 |   /auth/login:
18 |     post:
19 |       $ref: "./endpoints/auth.yaml#/login"
20 | 
21 |   /auth/register:
22 |     post:
23 |       $ref: "./endpoints/auth.yaml#/register"
24 | 
25 |   /auth/refresh:
26 |     post:
27 |       $ref: "./endpoints/auth.yaml#/refresh"
28 | 
29 |   /boards:
30 |     get:
31 |       $ref: "./endpoints/boards.yaml#/getAllBoards"
32 | 
33 |     post:
34 |       $ref: "./endpoints/boards.yaml#/createBoard"
35 | 
36 |   /boards/{boardId}:
37 |     get:
38 |       $ref: "./endpoints/boards.yaml#/getBoardById"
39 | 
40 |     delete:
41 |       $ref: "./endpoints/boards.yaml#/deleteBoard"
42 | 
43 |   /boards/{boardId}/favorite:
44 |     put:
45 |       $ref: "./endpoints/boards.yaml#/updateBoardFavorite"
46 | 
47 |   /boards/{boardId}/rename:
48 |     put:
49 |       $ref: "./endpoints/boards.yaml#/renameBoard"
50 | 
51 |       
52 | 


--------------------------------------------------------------------------------
/src/features/boards-list/compose/board-item.tsx:
--------------------------------------------------------------------------------
 1 | import { ApiSchemas } from "@/shared/api/schema";
 2 | import { BoardsFavoriteToggle } from "../ui/boards-favorite-toggle";
 3 | import { BoardsListItem } from "../ui/boards-list-item";
 4 | import { DropdownMenuItem } from "@/shared/ui/kit/dropdown-menu";
 5 | import { useDeleteBoard } from "../model/use-delete-board";
 6 | import { useUpdateFavorite } from "../model/use-update-favorite";
 7 | 
 8 | export function BoardItem({ board }: { board: ApiSchemas["Board"] }) {
 9 |   const deleteBoard = useDeleteBoard();
10 |   const updateFavorite = useUpdateFavorite();
11 | 
12 |   return (
13 |     <BoardsListItem
14 |       key={board.id}
15 |       board={board}
16 |       rightActions={
17 |         <BoardsFavoriteToggle
18 |           isFavorite={updateFavorite.isOptimisticFavorite(board)}
19 |           onToggle={() => updateFavorite.toggle(board)}
20 |         />
21 |       }
22 |       menuActions={
23 |         <DropdownMenuItem
24 |           variant="destructive"
25 |           disabled={deleteBoard.getIsPending(board.id)}
26 |           onClick={() => deleteBoard.deleteBoard(board.id)}
27 |         >
28 |           Удалить
29 |         </DropdownMenuItem>
30 |       }
31 |     />
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/features/board-templates/templates-gallery.tsx:
--------------------------------------------------------------------------------
 1 | import { ScrollArea } from "@/shared/ui/kit/scroll-area";
 2 | import { TemplateCard } from "./template-card";
 3 | 
 4 | const templates = [
 5 |   {
 6 |     id: "1",
 7 |     name: "Template 1",
 8 |     description: "Template 1 description",
 9 |     thumbnail: "https://via.placeholder.com/150",
10 |   },
11 |   {
12 |     id: "2",
13 |     name: "Template 2",
14 |     description: "Template 2 description",
15 |     thumbnail: "https://via.placeholder.com/150",
16 |   },
17 |   {
18 |     id: "3",
19 |     name: "Template 3",
20 |     description: "Template 3 description",
21 |     thumbnail: "https://via.placeholder.com/150",
22 |   },
23 |   {
24 |     id: "4",
25 |     name: "Template 4",
26 |     description: "Template 4 description",
27 |     thumbnail: "https://via.placeholder.com/150",
28 |   },
29 | ];
30 | 
31 | export function TemplatesGallery({ className }: { className?: string }) {
32 |   return (
33 |     <ScrollArea className={className}>
34 |       <div className="flex gap-4">
35 |         {templates.map((template) => (
36 |           <TemplateCard
37 |             key={template.id}
38 |             template={template}
39 |             onSelect={() => {}}
40 |           />
41 |         ))}
42 |       </div>
43 |     </ScrollArea>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitive from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/shared/lib/css"
 7 | 
 8 | function Switch({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
12 |   return (
13 |     <SwitchPrimitive.Root
14 |       data-slot="switch"
15 |       className={cn(
16 |         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     >
21 |       <SwitchPrimitive.Thumb
22 |         data-slot="switch-thumb"
23 |         className={cn(
24 |           "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
25 |         )}
26 |       />
27 |     </SwitchPrimitive.Root>
28 |   )
29 | }
30 | 
31 | export { Switch }
32 | 


--------------------------------------------------------------------------------
/src/shared/api/instance.ts:
--------------------------------------------------------------------------------
 1 | import createFetchClient from "openapi-fetch";
 2 | import createClient from "openapi-react-query"; // generated by openapi-typescript
 3 | import { CONFIG } from "@/shared/model/config";
 4 | import { ApiPaths, ApiSchemas } from "./schema";
 5 | import { useSession } from "../model/session";
 6 | 
 7 | export const fetchClient = createFetchClient<ApiPaths>({
 8 |   baseUrl: CONFIG.API_BASE_URL,
 9 | });
10 | export const rqClient = createClient(fetchClient);
11 | 
12 | export const publicFetchClient = createFetchClient<ApiPaths>({
13 |   baseUrl: CONFIG.API_BASE_URL,
14 | });
15 | export const publicRqClient = createClient(publicFetchClient);
16 | 
17 | fetchClient.use({
18 |   async onRequest({ request }) {
19 |     const token = await useSession.getState().refreshToken();
20 | 
21 |     if (token) {
22 |       request.headers.set("Authorization", `Bearer ${token}`);
23 |     } else {
24 |       return new Response(
25 |         JSON.stringify({
26 |           code: "NOT_AUTHOIZED",
27 |           message: "You are not authorized to access this resource",
28 |         } as ApiSchemas["Error"]),
29 |         {
30 |           status: 401,
31 |           headers: {
32 |             "Content-Type": "application/json",
33 |           },
34 |         },
35 |       );
36 |     }
37 |   },
38 | });
39 | 


--------------------------------------------------------------------------------
/src/features/boards-list/model/use-update-favorite.ts:
--------------------------------------------------------------------------------
 1 | import { rqClient } from "@/shared/api/instance";
 2 | import { useQueryClient } from "@tanstack/react-query";
 3 | import { startTransition, useOptimistic } from "react";
 4 | 
 5 | export function useUpdateFavorite() {
 6 |   const queryClient = useQueryClient();
 7 | 
 8 |   const [favorite, setFavorite] = useOptimistic<Record<string, boolean>>({});
 9 | 
10 |   const updateFavoriteMutation = rqClient.useMutation(
11 |     "put",
12 |     "/boards/{boardId}/favorite",
13 |     {
14 |       onSettled: async () => {
15 |         await queryClient.invalidateQueries(
16 |           rqClient.queryOptions("get", "/boards"),
17 |         );
18 |       },
19 |     },
20 |   );
21 | 
22 |   const toggle = (board: { id: string; isFavorite: boolean }) => {
23 |     startTransition(async () => {
24 |       setFavorite((prev) => ({
25 |         ...prev,
26 |         [board.id]: !board.isFavorite,
27 |       }));
28 |       await updateFavoriteMutation.mutateAsync({
29 |         params: { path: { boardId: board.id } },
30 |         body: { isFavorite: !board.isFavorite },
31 |       });
32 |     });
33 |   };
34 | 
35 |   const isOptimisticFavorite = (board: { id: string; isFavorite: boolean }) =>
36 |     favorite[board.id] ?? board.isFavorite;
37 | 
38 |   return {
39 |     toggle,
40 |     isOptimisticFavorite,
41 |   };
42 | }
43 | 


--------------------------------------------------------------------------------
/src/features/boards-list/ui/boards-sidebar.tsx:
--------------------------------------------------------------------------------
 1 | import { ROUTES } from "@/shared/model/routes";
 2 | import { Button } from "@/shared/ui/kit/button";
 3 | import { Link } from "react-router-dom";
 4 | import { LayoutGridIcon, StarIcon, ClockIcon } from "lucide-react";
 5 | import { cn } from "@/shared/lib/css";
 6 | 
 7 | interface BoardsSidebarProps {
 8 |   className?: string;
 9 | }
10 | 
11 | export function BoardsSidebar({ className }: BoardsSidebarProps) {
12 |   return (
13 |     <div className={cn("w-64 border-r p-4 space-y-4", className)}>
14 |       <div className="space-y-2">
15 |         <div className="text-sm font-medium text-gray-500 px-2">Навигация</div>
16 |         <Button variant="ghost" className="w-full justify-start" asChild>
17 |           <Link to={ROUTES.BOARDS}>
18 |             <LayoutGridIcon className="mr-2 h-4 w-4" />
19 |             Все доски
20 |           </Link>
21 |         </Button>
22 |         <Button variant="ghost" className="w-full justify-start" asChild>
23 |           <Link to={ROUTES.FAVORITE_BOARDS}>
24 |             <StarIcon className="mr-2 h-4 w-4" />
25 |             Избранное
26 |           </Link>
27 |         </Button>
28 |         <Button variant="ghost" className="w-full justify-start" asChild>
29 |           <Link to={ROUTES.RECENT_BOARDS}>
30 |             <ClockIcon className="mr-2 h-4 w-4" />
31 |             Недавние
32 |           </Link>
33 |         </Button>
34 |       </div>
35 |     </div>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/features/board-templates/template-card.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/shared/ui/kit/button";
 2 | import { PlusIcon } from "lucide-react";
 3 | import { cn } from "@/shared/lib/css";
 4 | 
 5 | interface Template {
 6 |   id: string;
 7 |   name: string;
 8 |   description: string;
 9 |   thumbnail: string;
10 | }
11 | 
12 | interface TemplateCardProps {
13 |   template: Template;
14 |   onSelect: (template: Template) => void;
15 |   className?: string;
16 | }
17 | 
18 | export function TemplateCard({
19 |   template,
20 |   onSelect,
21 |   className,
22 | }: TemplateCardProps) {
23 |   return (
24 |     <div
25 |       className={cn(
26 |         "group relative rounded-lg border p-4 hover:border-primary transition-colors cursor-pointer",
27 |         className,
28 |       )}
29 |       onClick={() => onSelect(template)}
30 |     >
31 |       <div className="aspect-video rounded-md bg-gray-100 mb-4 overflow-hidden">
32 |         <img
33 |           src={template.thumbnail}
34 |           alt={template.name}
35 |           className="w-full h-full object-cover"
36 |         />
37 |       </div>
38 |       <h3 className="font-medium mb-1">{template.name}</h3>
39 |       <p className="text-sm text-gray-500">{template.description}</p>
40 |       <Button
41 |         size="sm"
42 |         className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity"
43 |       >
44 |         <PlusIcon className="h-4 w-4 mr-2" />
45 |         Использовать
46 |       </Button>
47 |     </div>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/src/features/boards-list/model/use-recent-groups.ts:
--------------------------------------------------------------------------------
 1 | import { ApiSchemas } from "@/shared/api/schema";
 2 | 
 3 | type BoardsGroup = {
 4 |   title: string;
 5 |   items: ApiSchemas["Board"][];
 6 | };
 7 | 
 8 | export function useRecentGroups(boards: ApiSchemas["Board"][]): BoardsGroup[] {
 9 |   const today = new Date();
10 |   today.setHours(0, 0, 0, 0);
11 | 
12 |   const yesterday = new Date(today);
13 |   yesterday.setDate(yesterday.getDate() - 1);
14 | 
15 |   const lastMonth = new Date(today);
16 |   lastMonth.setMonth(lastMonth.getMonth() - 1);
17 | 
18 |   const groups = boards.reduce<BoardsGroup[]>((acc, board) => {
19 |     const lastOpenedAt = new Date(board.lastOpenedAt);
20 |     lastOpenedAt.setHours(0, 0, 0, 0);
21 | 
22 |     let groupTitle: string;
23 |     if (lastOpenedAt.getTime() === today.getTime()) {
24 |       groupTitle = "Сегодня";
25 |     } else if (lastOpenedAt.getTime() === yesterday.getTime()) {
26 |       groupTitle = "Вчера";
27 |     } else if (lastOpenedAt >= lastMonth) {
28 |       groupTitle = "Прошлый месяц";
29 |     } else {
30 |       groupTitle = "Другое";
31 |     }
32 | 
33 |     const group = acc.find((g) => g.title === groupTitle);
34 |     if (group) {
35 |       group.items.push(board);
36 |     } else {
37 |       acc.push({ title: groupTitle, items: [board] });
38 |     }
39 | 
40 |     return acc;
41 |   }, []);
42 | 
43 |   // Сортируем группы в нужном порядке
44 |   const groupOrder = ["Сегодня", "Вчера", "Прошлый месяц", "Другое"];
45 |   return groupOrder
46 |     .map((title) => groups.find((g) => g.title === title))
47 |     .filter((group): group is BoardsGroup => group !== undefined);
48 | }
49 | 


--------------------------------------------------------------------------------
/src/shared/api/mocks/session.ts:
--------------------------------------------------------------------------------
 1 | import { SignJWT, jwtVerify } from "jose";
 2 | import { HttpResponse } from "msw";
 3 | 
 4 | type Session = {
 5 |   userId: string;
 6 |   email: string;
 7 | };
 8 | 
 9 | const JWT_SECRET = new TextEncoder().encode("your-secret-key");
10 | const ACCESS_TOKEN_EXPIRY = "3s";
11 | const REFRESH_TOKEN_EXPIRY = "7d";
12 | 
13 | export function createRefreshTokenCookie(refreshToken: string) {
14 |   return `refreshToken=${refreshToken}; Max-Age=604800`;
15 | }
16 | 
17 | export async function generateTokens(session: Session) {
18 |   const accessToken = await new SignJWT(session)
19 |     .setProtectedHeader({ alg: "HS256" })
20 |     .setIssuedAt()
21 |     .setExpirationTime(ACCESS_TOKEN_EXPIRY)
22 |     .sign(JWT_SECRET);
23 | 
24 |   const refreshToken = await new SignJWT(session)
25 |     .setProtectedHeader({ alg: "HS256" })
26 |     .setIssuedAt()
27 |     .setExpirationTime(REFRESH_TOKEN_EXPIRY)
28 |     .sign(JWT_SECRET);
29 | 
30 |   return { accessToken, refreshToken };
31 | }
32 | 
33 | export async function verifyToken(token: string): Promise<Session> {
34 |   const { payload } = await jwtVerify(token, JWT_SECRET);
35 |   return payload as Session;
36 | }
37 | 
38 | export async function verifyTokenOrThrow(request: Request): Promise<Session> {
39 |   const token = request.headers.get("Authorization")?.split(" ")[1];
40 |   const session = token ? await verifyToken(token).catch(() => null) : null;
41 |   if (!session) {
42 |     throw HttpResponse.json(
43 |       {
44 |         message: "Invalid token",
45 |         code: "INVALID_TOKEN",
46 |       },
47 |       { status: 401 },
48 |     );
49 |   }
50 |   return session;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/features/boards-list/ui/boards-list-card.tsx:
--------------------------------------------------------------------------------
 1 | import { ROUTES } from "@/shared/model/routes";
 2 | import { Button } from "@/shared/ui/kit/button";
 3 | import { Card, CardFooter, CardHeader } from "@/shared/ui/kit/card";
 4 | import { Link, href } from "react-router-dom";
 5 | 
 6 | interface BoardsListCardProps {
 7 |   board: {
 8 |     id: string;
 9 |     name: string;
10 |     createdAt: string;
11 |     lastOpenedAt: string;
12 |   };
13 |   rightTopActions?: React.ReactNode;
14 |   bottomActions?: React.ReactNode;
15 | }
16 | 
17 | export function BoardsListCard({
18 |   board,
19 |   bottomActions,
20 |   rightTopActions,
21 | }: BoardsListCardProps) {
22 |   return (
23 |     <Card className="relative">
24 |       {<div className="absolute top-2 right-2">{rightTopActions}</div>}
25 |       <CardHeader>
26 |         <div className="flex flex-col gap-2">
27 |           <Button
28 |             asChild
29 |             variant="link"
30 |             className="text-left justify-start h-auto p-0"
31 |           >
32 |             <Link to={href(ROUTES.BOARD, { boardId: board.id })}>
33 |               <span className="text-xl font-medium">{board.name}</span>
34 |             </Link>
35 |           </Button>
36 |           <div className="text-sm text-gray-500">
37 |             Создано: {new Date(board.createdAt).toLocaleDateString()}
38 |           </div>
39 |           <div className="text-sm text-gray-500">
40 |             Последнее открытие:{" "}
41 |             {new Date(board.lastOpenedAt).toLocaleDateString()}
42 |           </div>
43 |         </div>
44 |       </CardHeader>
45 |       {bottomActions && <CardFooter>{bottomActions}</CardFooter>}
46 |     </Card>
47 |   );
48 | }
49 | 


--------------------------------------------------------------------------------
/src/app/router.tsx:
--------------------------------------------------------------------------------
 1 | import { ROUTES } from "../shared/model/routes";
 2 | import { createBrowserRouter, redirect } from "react-router-dom";
 3 | import { App } from "./app";
 4 | import { Providers } from "./providers";
 5 | import { protectedLoader, ProtectedRoute } from "./protected-route";
 6 | import { AppHeader } from "@/features/header";
 7 | 
 8 | export const router = createBrowserRouter([
 9 |   {
10 |     element: (
11 |       <Providers>
12 |         <App />
13 |       </Providers>
14 |     ),
15 |     children: [
16 |       {
17 |         loader: protectedLoader,
18 |         element: (
19 |           <>
20 |             <AppHeader />
21 |             <ProtectedRoute />
22 |           </>
23 |         ),
24 |         children: [
25 |           {
26 |             path: ROUTES.BOARDS,
27 |             lazy: () => import("@/features/boards-list/boards-list.page"),
28 |           },
29 |           {
30 |             path: ROUTES.FAVORITE_BOARDS,
31 |             lazy: () =>
32 |               import("@/features/boards-list/boards-list-favorite.page"),
33 |           },
34 |           {
35 |             path: ROUTES.RECENT_BOARDS,
36 |             lazy: () =>
37 |               import("@/features/boards-list/boards-list-recent.page"),
38 |           },
39 |           {
40 |             path: ROUTES.BOARD,
41 |             lazy: () => import("@/features/board/board.page"),
42 |           },
43 |         ],
44 |       },
45 | 
46 |       {
47 |         path: ROUTES.LOGIN,
48 |         lazy: () => import("@/features/auth/login.page"),
49 |       },
50 |       {
51 |         path: ROUTES.REGISTER,
52 |         lazy: () => import("@/features/auth/register.page"),
53 |       },
54 |       {
55 |         path: ROUTES.HOME,
56 |         loader: () => redirect(ROUTES.BOARDS),
57 |       },
58 |     ],
59 |   },
60 | ]);
61 | 


--------------------------------------------------------------------------------
/eslint.boundaries.js:
--------------------------------------------------------------------------------
 1 | import boundaries from "eslint-plugin-boundaries";
 2 | 
 3 | export const eslintBoundariesConfig = {
 4 |   plugins: {
 5 |     boundaries,
 6 |   },
 7 |   settings: {
 8 |     "import/resolver": {
 9 |       typescript: {
10 |         alwaysTryTypes: true,
11 |       },
12 |     },
13 | 
14 |     "boundaries/elements": [
15 |       {
16 |         type: "app",
17 |         pattern: "./src/app",
18 |       },
19 |       {
20 |         type: "features",
21 |         pattern: "./src/features/*",
22 |       },
23 |       {
24 |         type: "shared",
25 |         pattern: "./src/shared",
26 |       },
27 |     ],
28 |   },
29 |   rules: {
30 |     "boundaries/element-types": [
31 |       2,
32 |       {
33 |         default: "allow",
34 |         rules: [
35 |           {
36 |             from: "shared",
37 |             disallow: ["app", "features"],
38 |             message:
39 |               "Модуль нижележащего слоя (${file.type}) не может импортировать модуль вышележащего слоя (${dependency.type})",
40 |           },
41 |           {
42 |             from: "features",
43 |             disallow: ["app"],
44 |             message:
45 |               "Модуль нижележащего слоя (${file.type}) не может импортировать модуль вышележащего слоя (${dependency.type})",
46 |           },
47 |         ],
48 |       },
49 |     ],
50 |     "boundaries/entry-point": [
51 |       2,
52 |       {
53 |         default: "disallow",
54 |         message:
55 |           "Модуль (${file.type}) должен импортироваться через public API. Прямой импорт из ${dependency.source} запрещен",
56 | 
57 |         rules: [
58 |           {
59 |             target: ["shared", "app"],
60 |             allow: "**",
61 |           },
62 |           {
63 |             target: ["features"],
64 |             allow: ["index.(ts|tsx)", "*.page.tsx"],
65 |           },
66 |         ],
67 |       },
68 |     ],
69 |   },
70 | };
71 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3 | 
 4 | import { cn } from "@/shared/lib/css"
 5 | 
 6 | function ScrollArea({
 7 |   className,
 8 |   children,
 9 |   ...props
10 | }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
11 |   return (
12 |     <ScrollAreaPrimitive.Root
13 |       data-slot="scroll-area"
14 |       className={cn("relative", className)}
15 |       {...props}
16 |     >
17 |       <ScrollAreaPrimitive.Viewport
18 |         data-slot="scroll-area-viewport"
19 |         className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
20 |       >
21 |         {children}
22 |       </ScrollAreaPrimitive.Viewport>
23 |       <ScrollBar />
24 |       <ScrollAreaPrimitive.Corner />
25 |     </ScrollAreaPrimitive.Root>
26 |   )
27 | }
28 | 
29 | function ScrollBar({
30 |   className,
31 |   orientation = "vertical",
32 |   ...props
33 | }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
34 |   return (
35 |     <ScrollAreaPrimitive.ScrollAreaScrollbar
36 |       data-slot="scroll-area-scrollbar"
37 |       orientation={orientation}
38 |       className={cn(
39 |         "flex touch-none p-px transition-colors select-none",
40 |         orientation === "vertical" &&
41 |           "h-full w-2.5 border-l border-l-transparent",
42 |         orientation === "horizontal" &&
43 |           "h-2.5 flex-col border-t border-t-transparent",
44 |         className
45 |       )}
46 |       {...props}
47 |     >
48 |       <ScrollAreaPrimitive.ScrollAreaThumb
49 |         data-slot="scroll-area-thumb"
50 |         className="bg-border relative flex-1 rounded-full"
51 |       />
52 |     </ScrollAreaPrimitive.ScrollAreaScrollbar>
53 |   )
54 | }
55 | 
56 | export { ScrollArea, ScrollBar }
57 | 


--------------------------------------------------------------------------------
/src/shared/model/session.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { jwtDecode } from "jwt-decode";
 3 | import { createGStore } from "create-gstore";
 4 | import { publicFetchClient } from "../api/instance";
 5 | 
 6 | type Session = {
 7 |   userId: string;
 8 |   email: string;
 9 |   exp: number;
10 |   iat: number;
11 | };
12 | 
13 | const TOKEN_KEY = "token";
14 | 
15 | let refreshTokenPromise: Promise<string | null> | null = null;
16 | 
17 | export const useSession = createGStore(() => {
18 |   const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY));
19 | 
20 |   const login = (token: string) => {
21 |     localStorage.setItem(TOKEN_KEY, token);
22 |     setToken(token);
23 |   };
24 | 
25 |   const logout = () => {
26 |     localStorage.removeItem(TOKEN_KEY);
27 |     setToken(null);
28 |   };
29 | 
30 |   const session = token ? jwtDecode<Session>(token) : null;
31 | 
32 |   const refreshToken = async () => {
33 |     if (!token) {
34 |       return null;
35 |     }
36 | 
37 |     const session = jwtDecode<Session>(token);
38 | 
39 |     if (session.exp < Date.now() / 1000) {
40 |       if (!refreshTokenPromise) {
41 |         refreshTokenPromise = publicFetchClient
42 |           .POST("/auth/refresh")
43 |           .then((r) => r.data?.accessToken ?? null)
44 |           .then((newToken) => {
45 |             if (newToken) {
46 |               login(newToken);
47 |               return newToken;
48 |             } else {
49 |               logout();
50 |               return null;
51 |             }
52 |           })
53 |           .finally(() => {
54 |             refreshTokenPromise = null;
55 |           });
56 |       }
57 | 
58 |       const newToken = await refreshTokenPromise;
59 | 
60 |       if (newToken) {
61 |         return newToken;
62 |       } else {
63 |         return null;
64 |       }
65 |     }
66 | 
67 |     return token;
68 |   };
69 | 
70 |   return { refreshToken, login, logout, session };
71 | });
72 | 


--------------------------------------------------------------------------------
/src/features/boards-list/model/use-boards-list.tsx:
--------------------------------------------------------------------------------
 1 | import { rqClient } from "@/shared/api/instance";
 2 | import { keepPreviousData } from "@tanstack/query-core";
 3 | import { RefCallback, useCallback } from "react";
 4 | 
 5 | type UseBoardsListParams = {
 6 |   limit?: number;
 7 |   isFavorite?: boolean;
 8 |   search?: string;
 9 |   sort?: "createdAt" | "updatedAt" | "lastOpenedAt" | "name";
10 | };
11 | 
12 | export function useBoardsList({
13 |   limit = 20,
14 |   isFavorite,
15 |   search,
16 |   sort,
17 | }: UseBoardsListParams) {
18 |   const { fetchNextPage, data, isFetchingNextPage, isPending, hasNextPage } =
19 |     rqClient.useInfiniteQuery(
20 |       "get",
21 |       "/boards",
22 |       {
23 |         params: {
24 |           query: {
25 |             page: 1,
26 |             limit,
27 |             isFavorite,
28 |             search,
29 |             sort,
30 |           },
31 |         },
32 |       },
33 |       {
34 |         initialPageParam: 1,
35 |         pageParamName: "page",
36 |         getNextPageParam: (lastPage, _, lastPageParams) =>
37 |           Number(lastPageParams) < lastPage.totalPages
38 |             ? Number(lastPageParams) + 1
39 |             : null,
40 | 
41 |         placeholderData: keepPreviousData,
42 |       },
43 |     );
44 | 
45 |   const cursorRef: RefCallback<HTMLDivElement> = useCallback(
46 |     (el) => {
47 |       const observer = new IntersectionObserver(
48 |         (entries) => {
49 |           if (entries[0].isIntersecting) {
50 |             fetchNextPage();
51 |           }
52 |         },
53 |         { threshold: 0.5 },
54 |       );
55 | 
56 |       if (el) {
57 |         observer.observe(el);
58 | 
59 |         return () => {
60 |           observer.disconnect();
61 |         };
62 |       }
63 |     },
64 |     [fetchNextPage],
65 |   );
66 | 
67 |   const boards = data?.pages.flatMap((page) => page.list) ?? [];
68 | 
69 |   return {
70 |     boards,
71 |     isFetchingNextPage,
72 |     isPending,
73 |     hasNextPage,
74 |     cursorRef,
75 |   };
76 | }
77 | 


--------------------------------------------------------------------------------
/src/features/boards-list/boards-list-favorite.page.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { useBoardsList } from "./model/use-boards-list";
 3 | 
 4 | import {
 5 |   BoardsListLayout,
 6 |   BoardsListLayoutContent,
 7 |   BoardsListLayoutHeader,
 8 | } from "./ui/boards-list-layout";
 9 | import { ViewMode, ViewModeToggle } from "./ui/view-mode-toggle";
10 | 
11 | import { BoardItem } from "./compose/board-item";
12 | import { BoardCard } from "./compose/board-card";
13 | import { BoardsSidebar } from "./ui/boards-sidebar";
14 | 
15 | function BoardsListPage() {
16 |   const boardsQuery = useBoardsList({
17 |     isFavorite: true,
18 |   });
19 | 
20 |   const [viewMode, setViewMode] = useState<ViewMode>("list");
21 | 
22 |   return (
23 |     <BoardsListLayout
24 |       sidebar={<BoardsSidebar />}
25 |       header={
26 |         <BoardsListLayoutHeader
27 |           title="Избранные доски"
28 |           description="Здесь вы можете просматривать и управлять своими избранными досками"
29 |           actions={
30 |             <ViewModeToggle
31 |               value={viewMode}
32 |               onChange={(value) => setViewMode(value)}
33 |             />
34 |           }
35 |         />
36 |       }
37 |     >
38 |       <BoardsListLayoutContent
39 |         isEmpty={boardsQuery.boards.length === 0}
40 |         isPending={boardsQuery.isPending}
41 |         isPendingNext={boardsQuery.isFetchingNextPage}
42 |         cursorRef={boardsQuery.cursorRef}
43 |         hasCursor={boardsQuery.hasNextPage}
44 |         mode={viewMode}
45 |         renderList={() =>
46 |           boardsQuery.boards.map((board) => (
47 |             <BoardItem key={board.id} board={board} />
48 |           ))
49 |         }
50 |         renderGrid={() =>
51 |           boardsQuery.boards.map((board) => (
52 |             <BoardCard key={board.id} board={board} />
53 |           ))
54 |         }
55 |       />
56 |     </BoardsListLayout>
57 |   );
58 | }
59 | 
60 | export const Component = BoardsListPage;
61 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React + TypeScript + Vite
 2 | 
 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 4 | 
 5 | Currently, two official plugins are available:
 6 | 
 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 9 | 
10 | ## Expanding the ESLint configuration
11 | 
12 | If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13 | 
14 | ```js
15 | export default tseslint.config({
16 |   extends: [
17 |     // Remove ...tseslint.configs.recommended and replace with this
18 |     ...tseslint.configs.recommendedTypeChecked,
19 |     // Alternatively, use this for stricter rules
20 |     ...tseslint.configs.strictTypeChecked,
21 |     // Optionally, add this for stylistic rules
22 |     ...tseslint.configs.stylisticTypeChecked,
23 |   ],
24 |   languageOptions: {
25 |     // other options...
26 |     parserOptions: {
27 |       project: ["./tsconfig.node.json", "./tsconfig.app.json"],
28 |       tsconfigRootDir: import.meta.dirname,
29 |     },
30 |   },
31 | });
32 | ```
33 | 
34 | You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35 | 
36 | ```js
37 | // eslint.config.js
38 | import reactX from "eslint-plugin-react-x";
39 | import reactDom from "eslint-plugin-react-dom";
40 | 
41 | export default tseslint.config({
42 |   plugins: {
43 |     // Add the react-x and react-dom plugins
44 |     "react-x": reactX,
45 |     "react-dom": reactDom,
46 |   },
47 |   rules: {
48 |     // other rules...
49 |     // Enable its recommended typescript rules
50 |     ...reactX.configs["recommended-typescript"].rules,
51 |     ...reactDom.configs.recommended.rules,
52 |   },
53 | });
54 | ```
55 | 


--------------------------------------------------------------------------------
/src/features/boards-list/ui/boards-list-item.tsx:
--------------------------------------------------------------------------------
 1 | import { ROUTES } from "@/shared/model/routes";
 2 | import { Button } from "@/shared/ui/kit/button";
 3 | import { Link, href } from "react-router-dom";
 4 | import {
 5 |   DropdownMenu,
 6 |   DropdownMenuContent,
 7 |   DropdownMenuTrigger,
 8 | } from "@/shared/ui/kit/dropdown-menu";
 9 | import { MoreHorizontalIcon } from "lucide-react";
10 | 
11 | interface BoardsListItemProps {
12 |   board: {
13 |     id: string;
14 |     name: string;
15 |     createdAt: string;
16 |     lastOpenedAt: string;
17 |   };
18 |   rightActions?: React.ReactNode;
19 |   menuActions?: React.ReactNode;
20 | }
21 | 
22 | export function BoardsListItem({
23 |   board,
24 |   rightActions,
25 |   menuActions,
26 | }: BoardsListItemProps) {
27 |   return (
28 |     <div className="flex items-center gap-4 p-4 border-b last:border-b-0">
29 |       <div className="flex-grow min-w-0">
30 |         <Button
31 |           asChild
32 |           variant="link"
33 |           className="text-left justify-start h-auto p-0"
34 |         >
35 |           <Link to={href(ROUTES.BOARD, { boardId: board.id })}>
36 |             <span className="text-lg font-medium truncate block">
37 |               {board.name}
38 |             </span>
39 |           </Link>
40 |         </Button>
41 |         <div className="flex gap-4 text-sm text-gray-500 mt-1">
42 |           <div>Создано: {new Date(board.createdAt).toLocaleDateString()}</div>
43 |           <div>
44 |             Последнее открытие:{" "}
45 |             {new Date(board.lastOpenedAt).toLocaleDateString()}
46 |           </div>
47 |         </div>
48 |       </div>
49 |       <div className="flex items-center gap-2">
50 |         {rightActions}
51 |         {menuActions && (
52 |           <DropdownMenu>
53 |             <DropdownMenuTrigger asChild>
54 |               <Button variant="ghost" size="icon">
55 |                 <MoreHorizontalIcon className="h-4 w-4" />
56 |               </Button>
57 |             </DropdownMenuTrigger>
58 |             <DropdownMenuContent align="end">{menuActions}</DropdownMenuContent>
59 |           </DropdownMenu>
60 |         )}
61 |       </div>
62 |     </div>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/tabs.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 3 | 
 4 | import { cn } from "@/shared/lib/css"
 5 | 
 6 | function Tabs({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof TabsPrimitive.Root>) {
10 |   return (
11 |     <TabsPrimitive.Root
12 |       data-slot="tabs"
13 |       className={cn("flex flex-col gap-2", className)}
14 |       {...props}
15 |     />
16 |   )
17 | }
18 | 
19 | function TabsList({
20 |   className,
21 |   ...props
22 | }: React.ComponentProps<typeof TabsPrimitive.List>) {
23 |   return (
24 |     <TabsPrimitive.List
25 |       data-slot="tabs-list"
26 |       className={cn(
27 |         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
28 |         className
29 |       )}
30 |       {...props}
31 |     />
32 |   )
33 | }
34 | 
35 | function TabsTrigger({
36 |   className,
37 |   ...props
38 | }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
39 |   return (
40 |     <TabsPrimitive.Trigger
41 |       data-slot="tabs-trigger"
42 |       className={cn(
43 |         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
44 |         className
45 |       )}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function TabsContent({
52 |   className,
53 |   ...props
54 | }: React.ComponentProps<typeof TabsPrimitive.Content>) {
55 |   return (
56 |     <TabsPrimitive.Content
57 |       data-slot="tabs-content"
58 |       className={cn("flex-1 outline-none", className)}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | export { Tabs, TabsList, TabsTrigger, TabsContent }
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "code",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview",
11 |     "api": "npx openapi-typescript ./src/shared/api/schema/main.yaml -o ./src/shared/api/schema/generated.ts"
12 |   },
13 |   "dependencies": {
14 |     "@hookform/resolvers": "^5.0.1",
15 |     "@radix-ui/react-dialog": "^1.1.11",
16 |     "@radix-ui/react-dropdown-menu": "^2.1.12",
17 |     "@radix-ui/react-label": "^2.1.4",
18 |     "@radix-ui/react-scroll-area": "^1.2.6",
19 |     "@radix-ui/react-select": "^2.2.2",
20 |     "@radix-ui/react-slot": "^1.2.0",
21 |     "@radix-ui/react-switch": "^1.2.2",
22 |     "@radix-ui/react-tabs": "^1.1.9",
23 |     "@tailwindcss/vite": "^4.1.4",
24 |     "@tanstack/react-query": "^5.74.9",
25 |     "class-variance-authority": "^0.7.1",
26 |     "clsx": "^2.1.1",
27 |     "create-gstore": "^0.1.4",
28 |     "jwt-decode": "^4.0.0",
29 |     "lucide-react": "^0.503.0",
30 |     "openapi-fetch": "^0.13.5",
31 |     "openapi-react-query": "^0.3.1",
32 |     "react": "^19.0.0",
33 |     "react-dom": "^19.0.0",
34 |     "react-hook-form": "^7.56.1",
35 |     "react-router-dom": "^7.5.3",
36 |     "tailwind-merge": "^3.2.0",
37 |     "tailwindcss": "^4.1.4",
38 |     "zod": "^3.24.3"
39 |   },
40 |   "devDependencies": {
41 |     "@eslint/js": "^9.22.0",
42 |     "@types/react": "^19.0.10",
43 |     "@types/react-dom": "^19.0.4",
44 |     "@vitejs/plugin-react": "^4.3.4",
45 |     "eslint": "^9.22.0",
46 |     "eslint-import-resolver-typescript": "^4.3.4",
47 |     "eslint-plugin-boundaries": "^5.0.1",
48 |     "eslint-plugin-react-hooks": "^5.2.0",
49 |     "eslint-plugin-react-refresh": "^0.4.19",
50 |     "globals": "^16.0.0",
51 |     "jose": "^6.0.10",
52 |     "msw": "^2.7.5",
53 |     "openapi-msw": "^1.2.0",
54 |     "openapi-typescript": "^7.6.1",
55 |     "prettier": "^3.5.3",
56 |     "tw-animate-css": "^1.2.8",
57 |     "typescript": "~5.7.2",
58 |     "typescript-eslint": "^8.26.1",
59 |     "vite": "^6.3.1",
60 |     "vite-tsconfig-paths": "^5.1.4"
61 |   },
62 |   "msw": {
63 |     "workerDirectory": [
64 |       "public"
65 |     ]
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/features/auth/ui/login-form.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/shared/ui/kit/button";
 2 | import {
 3 |   FormField,
 4 |   FormItem,
 5 |   FormLabel,
 6 |   FormControl,
 7 |   FormMessage,
 8 |   Form,
 9 | } from "@/shared/ui/kit/form";
10 | import { Input } from "@/shared/ui/kit/input";
11 | import { useForm } from "react-hook-form";
12 | import { z } from "zod";
13 | import { zodResolver } from "@hookform/resolvers/zod";
14 | import { useLogin } from "../model/use-login";
15 | 
16 | const loginSchema = z.object({
17 |   email: z
18 |     .string({
19 |       required_error: "Email обязателен",
20 |     })
21 |     .email("Неверный email"),
22 |   password: z
23 |     .string({
24 |       required_error: "Пароль обязателен",
25 |     })
26 |     .min(6, "Пароль должен быть не менее 6 символов"),
27 | });
28 | 
29 | export function LoginForm() {
30 |   const form = useForm({
31 |     resolver: zodResolver(loginSchema),
32 |   });
33 | 
34 |   const { errorMessage, isPending, login } = useLogin();
35 | 
36 |   const onSubmit = form.handleSubmit(login);
37 | 
38 |   return (
39 |     <Form {...form}>
40 |       <form className="flex flex-col gap-4" onSubmit={onSubmit}>
41 |         <FormField
42 |           control={form.control}
43 |           name="email"
44 |           render={({ field }) => (
45 |             <FormItem>
46 |               <FormLabel>Email</FormLabel>
47 |               <FormControl>
48 |                 <Input placeholder="admin@gmail.com" {...field} />
49 |               </FormControl>
50 | 
51 |               <FormMessage />
52 |             </FormItem>
53 |           )}
54 |         />
55 |         <FormField
56 |           control={form.control}
57 |           name="password"
58 |           render={({ field }) => (
59 |             <FormItem>
60 |               <FormLabel>Пароль</FormLabel>
61 |               <FormControl>
62 |                 <Input placeholder="******" type="password" {...field} />
63 |               </FormControl>
64 | 
65 |               <FormMessage />
66 |             </FormItem>
67 |           )}
68 |         />
69 | 
70 |         {errorMessage && (
71 |           <p className="text-destructive text-sm">{errorMessage}</p>
72 |         )}
73 | 
74 |         <Button disabled={isPending} type="submit">
75 |           Войти
76 |         </Button>
77 |       </form>
78 |     </Form>
79 |   );
80 | }
81 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/shared/lib/css"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "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",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "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",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : "button"
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/shared/lib/css"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/src/shared/api/schema/endpoints/auth.yaml:
--------------------------------------------------------------------------------
  1 | schemas:
  2 |   User:
  3 |     type: object
  4 |     required:
  5 |       - id
  6 |       - email
  7 |     properties:
  8 |       id:
  9 |         type: string
 10 |       email:
 11 |         type: string
 12 |         format: email
 13 | 
 14 |   LoginRequest:
 15 |     type: object
 16 |     required:
 17 |       - email
 18 |       - password
 19 |     properties:
 20 |       email:
 21 |         type: string
 22 |         format: email
 23 |       password:
 24 |         type: string
 25 |         format: password
 26 | 
 27 |   RegisterRequest:
 28 |     type: object
 29 |     required:
 30 |       - email
 31 |       - password
 32 |     properties:
 33 |       email:
 34 |         type: string
 35 |         format: email
 36 |       password:
 37 |         type: string
 38 |         format: password
 39 | 
 40 |   AuthResponse:
 41 |     type: object
 42 |     required:
 43 |       - accessToken
 44 |       - user
 45 |     properties:
 46 |       accessToken:
 47 |         type: string
 48 |       user:
 49 |         $ref: '#/schemas/User'
 50 | 
 51 | login:
 52 |   summary: Login user
 53 |   requestBody:
 54 |     required: true
 55 |     content:
 56 |       application/json:
 57 |         schema:
 58 |           $ref: '#/schemas/LoginRequest'
 59 |   responses:
 60 |     '200':
 61 |       description: Login successful
 62 |       content:
 63 |         application/json:
 64 |           schema:
 65 |             $ref: '#/schemas/AuthResponse'
 66 |     '401':
 67 |       $ref: '../shared/responses.yaml#/UnauthorizedError'
 68 | 
 69 | register:
 70 |   summary: Register new user
 71 |   requestBody:
 72 |     required: true
 73 |     content:
 74 |       application/json:
 75 |         schema:
 76 |           $ref: '#/schemas/RegisterRequest'
 77 |   responses:
 78 |     '201':
 79 |       description: Registration successful
 80 |       content:
 81 |         application/json:
 82 |           schema:
 83 |             $ref: '#/schemas/AuthResponse'
 84 |     '400':
 85 |       $ref: '../shared/responses.yaml#/BadRequestError'
 86 | 
 87 | refresh:
 88 |   summary: Refresh access token
 89 |   parameters:
 90 |   - in: cookie
 91 |     name: refreshToken
 92 |     schema:
 93 |       type: string
 94 |   responses:
 95 |     '200':
 96 |       description: Access token refreshed successfully
 97 |       content:
 98 |         application/json:
 99 |           schema:
100 |             $ref: '#/schemas/AuthResponse'
101 |     '401':
102 |       $ref: '../shared/responses.yaml#/UnauthorizedError'
103 | 


--------------------------------------------------------------------------------
/src/features/boards-list/boards-list-recent.page.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { useBoardsList } from "./model/use-boards-list";
 3 | 
 4 | import {
 5 |   BoardsLayoutContentGroups,
 6 |   BoardsListLayout,
 7 |   BoardsListLayoutCards,
 8 |   BoardsListLayoutContent,
 9 |   BoardsListLayoutHeader,
10 |   BoardsListLayoutList,
11 | } from "./ui/boards-list-layout";
12 | import { ViewMode, ViewModeToggle } from "./ui/view-mode-toggle";
13 | 
14 | import { useRecentGroups } from "./model/use-recent-groups";
15 | 
16 | import { BoardCard } from "./compose/board-card";
17 | import { BoardItem } from "./compose/board-item";
18 | import { BoardsSidebar } from "./ui/boards-sidebar";
19 | 
20 | function BoardsListPage() {
21 |   const boardsQuery = useBoardsList({
22 |     sort: "lastOpenedAt",
23 |   });
24 | 
25 |   const [viewMode, setViewMode] = useState<ViewMode>("list");
26 | 
27 |   const recentGroups = useRecentGroups(boardsQuery.boards);
28 | 
29 |   return (
30 |     <BoardsListLayout
31 |       sidebar={<BoardsSidebar />}
32 |       header={
33 |         <BoardsListLayoutHeader
34 |           title="Последние доски"
35 |           description="Здесь вы можете просматривать и управлять своими последними досками"
36 |           actions={
37 |             <ViewModeToggle
38 |               value={viewMode}
39 |               onChange={(value) => setViewMode(value)}
40 |             />
41 |           }
42 |         />
43 |       }
44 |     >
45 |       <BoardsListLayoutContent
46 |         isEmpty={boardsQuery.boards.length === 0}
47 |         isPending={boardsQuery.isPending}
48 |         isPendingNext={boardsQuery.isFetchingNextPage}
49 |         cursorRef={boardsQuery.cursorRef}
50 |         hasCursor={boardsQuery.hasNextPage}
51 |         mode={viewMode}
52 |       >
53 |         <BoardsLayoutContentGroups
54 |           groups={recentGroups.map((group) => ({
55 |             items: {
56 |               list: (
57 |                 <BoardsListLayoutList>
58 |                   {group.items.map((board) => (
59 |                     <BoardItem key={board.id} board={board} />
60 |                   ))}
61 |                 </BoardsListLayoutList>
62 |               ),
63 |               cards: (
64 |                 <BoardsListLayoutCards>
65 |                   {group.items.map((board) => (
66 |                     <BoardCard key={board.id} board={board} />
67 |                   ))}
68 |                 </BoardsListLayoutCards>
69 |               ),
70 |             }[viewMode],
71 |             title: group.title,
72 |           }))}
73 |         />
74 |       </BoardsListLayoutContent>
75 |     </BoardsListLayout>
76 |   );
77 | }
78 | 
79 | export const Component = BoardsListPage;
80 | 


--------------------------------------------------------------------------------
/src/features/auth/ui/register-form.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@/shared/ui/kit/button";
  2 | import {
  3 |   FormField,
  4 |   FormItem,
  5 |   FormLabel,
  6 |   FormControl,
  7 |   FormMessage,
  8 |   Form,
  9 | } from "@/shared/ui/kit/form";
 10 | import { Input } from "@/shared/ui/kit/input";
 11 | import { useForm } from "react-hook-form";
 12 | import { z } from "zod";
 13 | import { zodResolver } from "@hookform/resolvers/zod";
 14 | import { useRegister } from "../model/use-register";
 15 | 
 16 | const registerSchema = z
 17 |   .object({
 18 |     email: z
 19 |       .string({
 20 |         required_error: "Email обязателен",
 21 |       })
 22 |       .email("Неверный email"),
 23 |     password: z
 24 |       .string({
 25 |         required_error: "Пароль обязателен",
 26 |       })
 27 |       .min(6, "Пароль должен быть не менее 6 символов"),
 28 |     confirmPassword: z.string().optional(),
 29 |   })
 30 |   .refine((data) => data.password === data.confirmPassword, {
 31 |     path: ["confirmPassword"],
 32 |     message: "Пароли не совпадают",
 33 |   });
 34 | 
 35 | export function RegisterForm() {
 36 |   const form = useForm({
 37 |     resolver: zodResolver(registerSchema),
 38 |   });
 39 | 
 40 |   const { errorMessage, isPending, register } = useRegister();
 41 | 
 42 |   const onSubmit = form.handleSubmit(register);
 43 | 
 44 |   return (
 45 |     <Form {...form}>
 46 |       <form className="flex flex-col gap-4" onSubmit={onSubmit}>
 47 |         <FormField
 48 |           control={form.control}
 49 |           name="email"
 50 |           render={({ field }) => (
 51 |             <FormItem>
 52 |               <FormLabel>Email</FormLabel>
 53 |               <FormControl>
 54 |                 <Input placeholder="admin@gmail.com" {...field} />
 55 |               </FormControl>
 56 | 
 57 |               <FormMessage />
 58 |             </FormItem>
 59 |           )}
 60 |         />
 61 |         <FormField
 62 |           control={form.control}
 63 |           name="password"
 64 |           render={({ field }) => (
 65 |             <FormItem>
 66 |               <FormLabel>Пароль</FormLabel>
 67 |               <FormControl>
 68 |                 <Input placeholder="******" type="password" {...field} />
 69 |               </FormControl>
 70 | 
 71 |               <FormMessage />
 72 |             </FormItem>
 73 |           )}
 74 |         />
 75 |         <FormField
 76 |           control={form.control}
 77 |           name="confirmPassword"
 78 |           render={({ field }) => (
 79 |             <FormItem>
 80 |               <FormLabel>Подтвердите пароль</FormLabel>
 81 |               <FormControl>
 82 |                 <Input type="password" {...field} />
 83 |               </FormControl>
 84 | 
 85 |               <FormMessage />
 86 |             </FormItem>
 87 |           )}
 88 |         />
 89 | 
 90 |         {errorMessage && (
 91 |           <p className="text-destructive text-sm">{errorMessage}</p>
 92 |         )}
 93 | 
 94 |         <Button disabled={isPending} type="submit">
 95 |           Зарегистрироваться
 96 |         </Button>
 97 |       </form>
 98 |     </Form>
 99 |   );
100 | }
101 | 


--------------------------------------------------------------------------------
/src/features/boards-list/boards-list.page.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Button } from "@/shared/ui/kit/button";
  3 | import { useBoardsList } from "./model/use-boards-list";
  4 | import { useBoardsFilters } from "./model/use-boards-filters";
  5 | import { useDebouncedValue } from "@/shared/lib/react";
  6 | import { useCreateBoard } from "./model/use-create-board";
  7 | 
  8 | import { PlusIcon } from "lucide-react";
  9 | import {
 10 |   BoardsListLayout,
 11 |   BoardsListLayoutContent,
 12 |   BoardsListLayoutFilters,
 13 |   BoardsListLayoutHeader,
 14 | } from "./ui/boards-list-layout";
 15 | import { ViewMode, ViewModeToggle } from "./ui/view-mode-toggle";
 16 | import { BoardsSortSelect } from "./ui/boards-sort-select";
 17 | import { BoardsSearchInput } from "./ui/boards-search-input";
 18 | import { BoardItem } from "./compose/board-item";
 19 | import { BoardCard } from "./compose/board-card";
 20 | import { BoardsSidebar } from "./ui/boards-sidebar";
 21 | import {
 22 |   TemplatesGallery,
 23 |   TemplatesModal,
 24 |   useTemplatesModal,
 25 | } from "@/features/board-templates";
 26 | 
 27 | function BoardsListPage() {
 28 |   const boardsFilters = useBoardsFilters();
 29 |   const boardsQuery = useBoardsList({
 30 |     sort: boardsFilters.sort,
 31 |     search: useDebouncedValue(boardsFilters.search, 300),
 32 |   });
 33 | 
 34 |   const templatesModal = useTemplatesModal();
 35 | 
 36 |   const createBoard = useCreateBoard();
 37 | 
 38 |   const [viewMode, setViewMode] = useState<ViewMode>("list");
 39 | 
 40 |   return (
 41 |     <>
 42 |       <TemplatesModal />
 43 |       <BoardsListLayout
 44 |         templates={<TemplatesGallery />}
 45 |         sidebar={<BoardsSidebar />}
 46 |         header={
 47 |           <BoardsListLayoutHeader
 48 |             title="Доски"
 49 |             description="Здесь вы можете просматривать и управлять своими досками"
 50 |             actions={
 51 |               <>
 52 |                 <Button variant="outline" onClick={() => templatesModal.open()}>
 53 |                   Выбрать шаблон
 54 |                 </Button>
 55 |                 <Button
 56 |                   disabled={createBoard.isPending}
 57 |                   onClick={createBoard.createBoard}
 58 |                 >
 59 |                   <PlusIcon />
 60 |                   Создать доску
 61 |                 </Button>
 62 |               </>
 63 |             }
 64 |           />
 65 |         }
 66 |         filters={
 67 |           <BoardsListLayoutFilters
 68 |             sort={
 69 |               <BoardsSortSelect
 70 |                 value={boardsFilters.sort}
 71 |                 onValueChange={boardsFilters.setSort}
 72 |               />
 73 |             }
 74 |             filters={
 75 |               <BoardsSearchInput
 76 |                 value={boardsFilters.search}
 77 |                 onChange={boardsFilters.setSearch}
 78 |               />
 79 |             }
 80 |             actions={
 81 |               <ViewModeToggle
 82 |                 value={viewMode}
 83 |                 onChange={(value) => setViewMode(value)}
 84 |               />
 85 |             }
 86 |           />
 87 |         }
 88 |       >
 89 |         <BoardsListLayoutContent
 90 |           isEmpty={boardsQuery.boards.length === 0}
 91 |           isPending={boardsQuery.isPending}
 92 |           isPendingNext={boardsQuery.isFetchingNextPage}
 93 |           cursorRef={boardsQuery.cursorRef}
 94 |           hasCursor={boardsQuery.hasNextPage}
 95 |           mode={viewMode}
 96 |           renderList={() =>
 97 |             boardsQuery.boards.map((board) => (
 98 |               <BoardItem key={board.id} board={board} />
 99 |             ))
100 |           }
101 |           renderGrid={() =>
102 |             boardsQuery.boards.map((board) => (
103 |               <BoardCard key={board.id} board={board} />
104 |             ))
105 |           }
106 |         />
107 |       </BoardsListLayout>
108 |     </>
109 |   );
110 | }
111 | 
112 | export const Component = BoardsListPage;
113 | 


--------------------------------------------------------------------------------
/src/shared/api/mocks/handlers/auth.ts:
--------------------------------------------------------------------------------
  1 | import { ApiSchemas } from "../../schema";
  2 | import { http } from "../http";
  3 | import { delay, HttpResponse } from "msw";
  4 | import {
  5 |   createRefreshTokenCookie,
  6 |   generateTokens,
  7 |   verifyToken,
  8 | } from "../session";
  9 | 
 10 | const mockUsers: ApiSchemas["User"][] = [
 11 |   {
 12 |     id: "1",
 13 |     email: "admin@gmail.com",
 14 |   },
 15 | ];
 16 | 
 17 | const userPasswords = new Map<string, string>();
 18 | userPasswords.set("admin@gmail.com", "123456");
 19 | 
 20 | export const authHandlers = [
 21 |   http.post("/auth/login", async ({ request }) => {
 22 |     const body = await request.json();
 23 | 
 24 |     const user = mockUsers.find((u) => u.email === body.email);
 25 |     const storedPassword = userPasswords.get(body.email);
 26 | 
 27 |     await delay();
 28 | 
 29 |     if (!user || !storedPassword || storedPassword !== body.password) {
 30 |       return HttpResponse.json(
 31 |         {
 32 |           message: "Неверный email или пароль",
 33 |           code: "INVALID_CREDENTIALS",
 34 |         },
 35 |         { status: 401 },
 36 |       );
 37 |     }
 38 | 
 39 |     const { accessToken, refreshToken } = await generateTokens({
 40 |       userId: user.id,
 41 |       email: user.email,
 42 |     });
 43 | 
 44 |     return HttpResponse.json(
 45 |       {
 46 |         accessToken: accessToken,
 47 |         user,
 48 |       },
 49 |       {
 50 |         status: 200,
 51 |         headers: {
 52 |           "Set-Cookie": createRefreshTokenCookie(refreshToken),
 53 |         },
 54 |       },
 55 |     );
 56 |   }),
 57 | 
 58 |   http.post("/auth/register", async ({ request }) => {
 59 |     const body = await request.json();
 60 | 
 61 |     await delay();
 62 | 
 63 |     if (mockUsers.some((u) => u.email === body.email)) {
 64 |       return HttpResponse.json(
 65 |         {
 66 |           message: "Пользователь уже существует",
 67 |           code: "USER_EXISTS",
 68 |         },
 69 |         { status: 400 },
 70 |       );
 71 |     }
 72 | 
 73 |     const newUser: ApiSchemas["User"] = {
 74 |       id: String(mockUsers.length + 1),
 75 |       email: body.email,
 76 |     };
 77 | 
 78 |     const { accessToken, refreshToken } = await generateTokens({
 79 |       userId: newUser.id,
 80 |       email: newUser.email,
 81 |     });
 82 | 
 83 |     mockUsers.push(newUser);
 84 |     userPasswords.set(body.email, body.password);
 85 | 
 86 |     return HttpResponse.json(
 87 |       {
 88 |         accessToken: accessToken,
 89 |         user: newUser,
 90 |       },
 91 |       {
 92 |         status: 201,
 93 |         headers: {
 94 |           "Set-Cookie": createRefreshTokenCookie(refreshToken),
 95 |         },
 96 |       },
 97 |     );
 98 |   }),
 99 |   http.post("/auth/refresh", async ({ cookies }) => {
100 |     const refreshToken = cookies.refreshToken;
101 | 
102 |     if (!refreshToken) {
103 |       return HttpResponse.json(
104 |         {
105 |           message: "Refresh token не найден",
106 |           code: "REFRESH_TOKEN_MISSING",
107 |         },
108 |         { status: 401 },
109 |       );
110 |     }
111 | 
112 |     try {
113 |       const session = await verifyToken(refreshToken);
114 |       const user = mockUsers.find((u) => u.id === session.userId);
115 | 
116 |       if (!user) {
117 |         throw new Error("User not found");
118 |       }
119 | 
120 |       const { accessToken, refreshToken: newRefreshToken } =
121 |         await generateTokens({
122 |           userId: user.id,
123 |           email: user.email,
124 |         });
125 | 
126 |       return HttpResponse.json(
127 |         {
128 |           accessToken,
129 |           user,
130 |         },
131 |         {
132 |           status: 200,
133 |           headers: {
134 |             "Set-Cookie": createRefreshTokenCookie(newRefreshToken),
135 |           },
136 |         },
137 |       );
138 |     } catch (error) {
139 |       console.error("Error refreshing token:", error);
140 |       return HttpResponse.json(
141 |         {
142 |           message: "Недействительный refresh token",
143 |           code: "INVALID_REFRESH_TOKEN",
144 |         },
145 |         { status: 401 },
146 |       );
147 |     }
148 |   }),
149 | ];
150 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  3 | import { XIcon } from "lucide-react"
  4 | 
  5 | import { cn } from "@/shared/lib/css"
  6 | 
  7 | function Dialog({
  8 |   ...props
  9 | }: React.ComponentProps<typeof DialogPrimitive.Root>) {
 10 |   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 11 | }
 12 | 
 13 | function DialogTrigger({
 14 |   ...props
 15 | }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
 16 |   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 17 | }
 18 | 
 19 | function DialogPortal({
 20 |   ...props
 21 | }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
 22 |   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 23 | }
 24 | 
 25 | function DialogClose({
 26 |   ...props
 27 | }: React.ComponentProps<typeof DialogPrimitive.Close>) {
 28 |   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 29 | }
 30 | 
 31 | function DialogOverlay({
 32 |   className,
 33 |   ...props
 34 | }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
 35 |   return (
 36 |     <DialogPrimitive.Overlay
 37 |       data-slot="dialog-overlay"
 38 |       className={cn(
 39 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     />
 44 |   )
 45 | }
 46 | 
 47 | function DialogContent({
 48 |   className,
 49 |   children,
 50 |   ...props
 51 | }: React.ComponentProps<typeof DialogPrimitive.Content>) {
 52 |   return (
 53 |     <DialogPortal data-slot="dialog-portal">
 54 |       <DialogOverlay />
 55 |       <DialogPrimitive.Content
 56 |         data-slot="dialog-content"
 57 |         className={cn(
 58 |           "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 59 |           className
 60 |         )}
 61 |         {...props}
 62 |       >
 63 |         {children}
 64 |         <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
 65 |           <XIcon />
 66 |           <span className="sr-only">Close</span>
 67 |         </DialogPrimitive.Close>
 68 |       </DialogPrimitive.Content>
 69 |     </DialogPortal>
 70 |   )
 71 | }
 72 | 
 73 | function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 74 |   return (
 75 |     <div
 76 |       data-slot="dialog-header"
 77 |       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 78 |       {...props}
 79 |     />
 80 |   )
 81 | }
 82 | 
 83 | function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 84 |   return (
 85 |     <div
 86 |       data-slot="dialog-footer"
 87 |       className={cn(
 88 |         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 89 |         className
 90 |       )}
 91 |       {...props}
 92 |     />
 93 |   )
 94 | }
 95 | 
 96 | function DialogTitle({
 97 |   className,
 98 |   ...props
 99 | }: React.ComponentProps<typeof DialogPrimitive.Title>) {
100 |   return (
101 |     <DialogPrimitive.Title
102 |       data-slot="dialog-title"
103 |       className={cn("text-lg leading-none font-semibold", className)}
104 |       {...props}
105 |     />
106 |   )
107 | }
108 | 
109 | function DialogDescription({
110 |   className,
111 |   ...props
112 | }: React.ComponentProps<typeof DialogPrimitive.Description>) {
113 |   return (
114 |     <DialogPrimitive.Description
115 |       data-slot="dialog-description"
116 |       className={cn("text-muted-foreground text-sm", className)}
117 |       {...props}
118 |     />
119 |   )
120 | }
121 | 
122 | export {
123 |   Dialog,
124 |   DialogClose,
125 |   DialogContent,
126 |   DialogDescription,
127 |   DialogFooter,
128 |   DialogHeader,
129 |   DialogOverlay,
130 |   DialogPortal,
131 |   DialogTitle,
132 |   DialogTrigger,
133 | }
134 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   FormProvider,
  7 |   useFormContext,
  8 |   useFormState,
  9 |   type ControllerProps,
 10 |   type FieldPath,
 11 |   type FieldValues,
 12 | } from "react-hook-form"
 13 | 
 14 | import { cn } from "@/shared/lib/css"
 15 | import { Label } from "@/shared/ui/kit/label"
 16 | 
 17 | const Form = FormProvider
 18 | 
 19 | type FormFieldContextValue<
 20 |   TFieldValues extends FieldValues = FieldValues,
 21 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 22 | > = {
 23 |   name: TName
 24 | }
 25 | 
 26 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 27 |   {} as FormFieldContextValue
 28 | )
 29 | 
 30 | const FormField = <
 31 |   TFieldValues extends FieldValues = FieldValues,
 32 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 33 | >({
 34 |   ...props
 35 | }: ControllerProps<TFieldValues, TName>) => {
 36 |   return (
 37 |     <FormFieldContext.Provider value={{ name: props.name }}>
 38 |       <Controller {...props} />
 39 |     </FormFieldContext.Provider>
 40 |   )
 41 | }
 42 | 
 43 | const useFormField = () => {
 44 |   const fieldContext = React.useContext(FormFieldContext)
 45 |   const itemContext = React.useContext(FormItemContext)
 46 |   const { getFieldState } = useFormContext()
 47 |   const formState = useFormState({ name: fieldContext.name })
 48 |   const fieldState = getFieldState(fieldContext.name, formState)
 49 | 
 50 |   if (!fieldContext) {
 51 |     throw new Error("useFormField should be used within <FormField>")
 52 |   }
 53 | 
 54 |   const { id } = itemContext
 55 | 
 56 |   return {
 57 |     id,
 58 |     name: fieldContext.name,
 59 |     formItemId: `${id}-form-item`,
 60 |     formDescriptionId: `${id}-form-item-description`,
 61 |     formMessageId: `${id}-form-item-message`,
 62 |     ...fieldState,
 63 |   }
 64 | }
 65 | 
 66 | type FormItemContextValue = {
 67 |   id: string
 68 | }
 69 | 
 70 | const FormItemContext = React.createContext<FormItemContextValue>(
 71 |   {} as FormItemContextValue
 72 | )
 73 | 
 74 | function FormItem({ className, ...props }: React.ComponentProps<"div">) {
 75 |   const id = React.useId()
 76 | 
 77 |   return (
 78 |     <FormItemContext.Provider value={{ id }}>
 79 |       <div
 80 |         data-slot="form-item"
 81 |         className={cn("grid gap-2", className)}
 82 |         {...props}
 83 |       />
 84 |     </FormItemContext.Provider>
 85 |   )
 86 | }
 87 | 
 88 | function FormLabel({
 89 |   className,
 90 |   ...props
 91 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
 92 |   const { error, formItemId } = useFormField()
 93 | 
 94 |   return (
 95 |     <Label
 96 |       data-slot="form-label"
 97 |       data-error={!!error}
 98 |       className={cn("data-[error=true]:text-destructive", className)}
 99 |       htmlFor={formItemId}
100 |       {...props}
101 |     />
102 |   )
103 | }
104 | 
105 | function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
106 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
107 | 
108 |   return (
109 |     <Slot
110 |       data-slot="form-control"
111 |       id={formItemId}
112 |       aria-describedby={
113 |         !error
114 |           ? `${formDescriptionId}`
115 |           : `${formDescriptionId} ${formMessageId}`
116 |       }
117 |       aria-invalid={!!error}
118 |       {...props}
119 |     />
120 |   )
121 | }
122 | 
123 | function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
124 |   const { formDescriptionId } = useFormField()
125 | 
126 |   return (
127 |     <p
128 |       data-slot="form-description"
129 |       id={formDescriptionId}
130 |       className={cn("text-muted-foreground text-sm", className)}
131 |       {...props}
132 |     />
133 |   )
134 | }
135 | 
136 | function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
137 |   const { error, formMessageId } = useFormField()
138 |   const body = error ? String(error?.message ?? "") : props.children
139 | 
140 |   if (!body) {
141 |     return null
142 |   }
143 | 
144 |   return (
145 |     <p
146 |       data-slot="form-message"
147 |       id={formMessageId}
148 |       className={cn("text-destructive text-sm", className)}
149 |       {...props}
150 |     >
151 |       {body}
152 |     </p>
153 |   )
154 | }
155 | 
156 | export {
157 |   useFormField,
158 |   Form,
159 |   FormItem,
160 |   FormLabel,
161 |   FormControl,
162 |   FormDescription,
163 |   FormMessage,
164 |   FormField,
165 | }
166 | 


--------------------------------------------------------------------------------
/src/app/index.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --radius-sm: calc(var(--radius) - 4px);
  8 |   --radius-md: calc(var(--radius) - 2px);
  9 |   --radius-lg: var(--radius);
 10 |   --radius-xl: calc(var(--radius) + 4px);
 11 |   --color-background: var(--background);
 12 |   --color-foreground: var(--foreground);
 13 |   --color-card: var(--card);
 14 |   --color-card-foreground: var(--card-foreground);
 15 |   --color-popover: var(--popover);
 16 |   --color-popover-foreground: var(--popover-foreground);
 17 |   --color-primary: var(--primary);
 18 |   --color-primary-foreground: var(--primary-foreground);
 19 |   --color-secondary: var(--secondary);
 20 |   --color-secondary-foreground: var(--secondary-foreground);
 21 |   --color-muted: var(--muted);
 22 |   --color-muted-foreground: var(--muted-foreground);
 23 |   --color-accent: var(--accent);
 24 |   --color-accent-foreground: var(--accent-foreground);
 25 |   --color-destructive: var(--destructive);
 26 |   --color-border: var(--border);
 27 |   --color-input: var(--input);
 28 |   --color-ring: var(--ring);
 29 |   --color-chart-1: var(--chart-1);
 30 |   --color-chart-2: var(--chart-2);
 31 |   --color-chart-3: var(--chart-3);
 32 |   --color-chart-4: var(--chart-4);
 33 |   --color-chart-5: var(--chart-5);
 34 |   --color-sidebar: var(--sidebar);
 35 |   --color-sidebar-foreground: var(--sidebar-foreground);
 36 |   --color-sidebar-primary: var(--sidebar-primary);
 37 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 38 |   --color-sidebar-accent: var(--sidebar-accent);
 39 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 40 |   --color-sidebar-border: var(--sidebar-border);
 41 |   --color-sidebar-ring: var(--sidebar-ring);
 42 | }
 43 | 
 44 | :root {
 45 |   --radius: 0.625rem;
 46 |   --background: oklch(1 0 0);
 47 |   --foreground: oklch(0.145 0 0);
 48 |   --card: oklch(1 0 0);
 49 |   --card-foreground: oklch(0.145 0 0);
 50 |   --popover: oklch(1 0 0);
 51 |   --popover-foreground: oklch(0.145 0 0);
 52 |   --primary: oklch(0.205 0 0);
 53 |   --primary-foreground: oklch(0.985 0 0);
 54 |   --secondary: oklch(0.97 0 0);
 55 |   --secondary-foreground: oklch(0.205 0 0);
 56 |   --muted: oklch(0.97 0 0);
 57 |   --muted-foreground: oklch(0.556 0 0);
 58 |   --accent: oklch(0.97 0 0);
 59 |   --accent-foreground: oklch(0.205 0 0);
 60 |   --destructive: oklch(0.577 0.245 27.325);
 61 |   --border: oklch(0.922 0 0);
 62 |   --input: oklch(0.922 0 0);
 63 |   --ring: oklch(0.708 0 0);
 64 |   --chart-1: oklch(0.646 0.222 41.116);
 65 |   --chart-2: oklch(0.6 0.118 184.704);
 66 |   --chart-3: oklch(0.398 0.07 227.392);
 67 |   --chart-4: oklch(0.828 0.189 84.429);
 68 |   --chart-5: oklch(0.769 0.188 70.08);
 69 |   --sidebar: oklch(0.985 0 0);
 70 |   --sidebar-foreground: oklch(0.145 0 0);
 71 |   --sidebar-primary: oklch(0.205 0 0);
 72 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 73 |   --sidebar-accent: oklch(0.97 0 0);
 74 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 75 |   --sidebar-border: oklch(0.922 0 0);
 76 |   --sidebar-ring: oklch(0.708 0 0);
 77 | }
 78 | 
 79 | .dark {
 80 |   --background: oklch(0.145 0 0);
 81 |   --foreground: oklch(0.985 0 0);
 82 |   --card: oklch(0.205 0 0);
 83 |   --card-foreground: oklch(0.985 0 0);
 84 |   --popover: oklch(0.205 0 0);
 85 |   --popover-foreground: oklch(0.985 0 0);
 86 |   --primary: oklch(0.922 0 0);
 87 |   --primary-foreground: oklch(0.205 0 0);
 88 |   --secondary: oklch(0.269 0 0);
 89 |   --secondary-foreground: oklch(0.985 0 0);
 90 |   --muted: oklch(0.269 0 0);
 91 |   --muted-foreground: oklch(0.708 0 0);
 92 |   --accent: oklch(0.269 0 0);
 93 |   --accent-foreground: oklch(0.985 0 0);
 94 |   --destructive: oklch(0.704 0.191 22.216);
 95 |   --border: oklch(1 0 0 / 10%);
 96 |   --input: oklch(1 0 0 / 15%);
 97 |   --ring: oklch(0.556 0 0);
 98 |   --chart-1: oklch(0.488 0.243 264.376);
 99 |   --chart-2: oklch(0.696 0.17 162.48);
100 |   --chart-3: oklch(0.769 0.188 70.08);
101 |   --chart-4: oklch(0.627 0.265 303.9);
102 |   --chart-5: oklch(0.645 0.246 16.439);
103 |   --sidebar: oklch(0.205 0 0);
104 |   --sidebar-foreground: oklch(0.985 0 0);
105 |   --sidebar-primary: oklch(0.488 0.243 264.376);
106 |   --sidebar-primary-foreground: oklch(0.985 0 0);
107 |   --sidebar-accent: oklch(0.269 0 0);
108 |   --sidebar-accent-foreground: oklch(0.985 0 0);
109 |   --sidebar-border: oklch(1 0 0 / 10%);
110 |   --sidebar-ring: oklch(0.556 0 0);
111 | }
112 | 
113 | @layer base {
114 |   * {
115 |     @apply border-border outline-ring/50;
116 |   }
117 |   body {
118 |     @apply bg-background text-foreground;
119 |   }
120 | }
121 | 


--------------------------------------------------------------------------------
/src/features/boards-list/ui/boards-list-layout.tsx:
--------------------------------------------------------------------------------
  1 | import { Skeleton } from "@/shared/ui/kit/skeleton";
  2 | import React from "react";
  3 | import { ViewMode } from "./view-mode-toggle";
  4 | 
  5 | export function BoardsListLayout({
  6 |   header,
  7 |   filters,
  8 |   children,
  9 |   sidebar,
 10 |   templates,
 11 | }: {
 12 |   header: React.ReactNode;
 13 |   filters?: React.ReactNode;
 14 |   children: React.ReactNode;
 15 |   sidebar?: React.ReactNode;
 16 |   templates?: React.ReactNode;
 17 | }) {
 18 |   return (
 19 |     <div className="container mx-auto">
 20 |       <div className="flex gap-4">
 21 |         {sidebar}
 22 |         <div className="flex-1  p-4 flex flex-col gap-6">
 23 |           {templates && (
 24 |             <div className="rounded-md bg-gray-100 p-4">{templates}</div>
 25 |           )}
 26 |           {header}
 27 |           {filters}
 28 |           {children}
 29 |         </div>
 30 |       </div>
 31 |     </div>
 32 |   );
 33 | }
 34 | 
 35 | export function BoardsListLayoutHeader({
 36 |   title,
 37 |   description,
 38 |   actions,
 39 | }: {
 40 |   title: string;
 41 |   description?: string;
 42 |   actions?: React.ReactNode;
 43 | }) {
 44 |   return (
 45 |     <div className="flex justify-between items-center">
 46 |       <div>
 47 |         <h1 className="text-2xl font-bold">{title}</h1>
 48 |         {description && <p className="text-gray-500">{description}</p>}
 49 |       </div>
 50 | 
 51 |       <div className="flex gap-2">{actions}</div>
 52 |     </div>
 53 |   );
 54 | }
 55 | 
 56 | export function BoardsListLayoutFilters({
 57 |   sort,
 58 |   filters,
 59 |   actions,
 60 | }: {
 61 |   sort?: React.ReactNode;
 62 |   filters?: React.ReactNode;
 63 |   actions?: React.ReactNode;
 64 | }) {
 65 |   return (
 66 |     <div className="flex items-center gap-4">
 67 |       {filters && (
 68 |         <div className="flex items-center gap-2">
 69 |           <div className="text-sm text-gray-500 whitespace-nowrap">
 70 |             Filter by
 71 |           </div>
 72 |           {filters}
 73 |         </div>
 74 |       )}
 75 |       {sort && (
 76 |         <div className="flex items-center gap-2 ">
 77 |           <div className="text-sm text-gray-500 whitespace-nowrap">Sort by</div>
 78 |           {sort}
 79 |         </div>
 80 |       )}
 81 |       {actions && <div className="ml-auto">{actions}</div>}
 82 |     </div>
 83 |   );
 84 | }
 85 | 
 86 | export function BoardsListLayoutContent({
 87 |   children,
 88 |   cursorRef,
 89 |   hasCursor,
 90 |   isEmpty,
 91 |   isPending,
 92 |   isPendingNext,
 93 |   mode,
 94 |   renderList,
 95 |   renderGrid,
 96 | }: {
 97 |   children?: React.ReactNode;
 98 |   isEmpty?: boolean;
 99 |   isPending?: boolean;
100 |   isPendingNext?: boolean;
101 |   cursorRef?: React.Ref<HTMLDivElement>;
102 |   hasCursor?: boolean;
103 |   mode: ViewMode;
104 |   renderList?: () => React.ReactNode;
105 |   renderGrid?: () => React.ReactNode;
106 | }) {
107 |   return (
108 |     <div>
109 |       {isPending && <div className="text-center py-10">Загрузка...</div>}
110 |       {mode === "list" && renderList && (
111 |         <BoardsListLayoutList>{renderList?.()}</BoardsListLayoutList>
112 |       )}
113 |       {mode === "cards" && renderGrid && (
114 |         <BoardsListLayoutCards>{renderGrid?.()}</BoardsListLayoutCards>
115 |       )}
116 |       {!isPending && children}
117 | 
118 |       {isEmpty && !isPending && (
119 |         <div className="text-center py-10">Доски не найдены</div>
120 |       )}
121 | 
122 |       {hasCursor && (
123 |         <div ref={cursorRef} className="text-center py-8">
124 |           {isPendingNext &&
125 |             {
126 |               list: (
127 |                 <div className="flex flex-col gap-2">
128 |                   <Skeleton className="h-10 w-full" />
129 |                   <Skeleton className="h-10 w-full" />
130 |                 </div>
131 |               ),
132 |               cards: (
133 |                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
134 |                   <Skeleton className="h-40 w-full" />
135 |                   <Skeleton className="h-40 w-full" />
136 |                   <Skeleton className="h-40 w-full" />
137 |                 </div>
138 |               ),
139 |             }[mode]}
140 |         </div>
141 |       )}
142 |     </div>
143 |   );
144 | }
145 | 
146 | export function BoardsListLayoutCards({
147 |   children,
148 | }: {
149 |   children: React.ReactNode;
150 | }) {
151 |   return (
152 |     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
153 |       {children}
154 |     </div>
155 |   );
156 | }
157 | 
158 | export function BoardsListLayoutList({
159 |   children,
160 | }: {
161 |   children: React.ReactNode;
162 | }) {
163 |   return <div className="flex flex-col gap-2">{children}</div>;
164 | }
165 | 
166 | export function BoardsLayoutContentGroups({
167 |   groups,
168 | }: {
169 |   groups: {
170 |     title: string;
171 |     items: React.ReactNode;
172 |   }[];
173 | }) {
174 |   return (
175 |     <div className="flex flex-col gap-2">
176 |       {groups.map((group) => (
177 |         <div key={group.title}>
178 |           <div className="text-lg font-bold mb-2">{group.title}</div>
179 |           {group.items}
180 |         </div>
181 |       ))}
182 |     </div>
183 |   );
184 | }
185 | 


--------------------------------------------------------------------------------
/src/shared/api/schema/endpoints/boards.yaml:
--------------------------------------------------------------------------------
  1 | schemas:
  2 |   Board:
  3 |     type: object
  4 |     required:
  5 |       - id
  6 |       - name
  7 |       - createdAt
  8 |       - updatedAt
  9 |       - lastOpenedAt
 10 |       - isFavorite
 11 |     properties:
 12 |       id:
 13 |         type: string
 14 |       name:
 15 |         type: string
 16 |       createdAt:
 17 |         type: string
 18 |         format: date-time
 19 |       updatedAt:
 20 |         type: string
 21 |         format: date-time
 22 |       lastOpenedAt:
 23 |         type: string
 24 |         format: date-time
 25 |       isFavorite:
 26 |         type: boolean
 27 |   RenameBoard:
 28 |     type: object
 29 |     required:
 30 |       - name
 31 |     properties:
 32 |       name:
 33 |         type: string
 34 |   UpdateBoardFavorite:
 35 |     type: object
 36 |     required:
 37 |       - isFavorite
 38 |     properties:
 39 |       isFavorite:
 40 |         type: boolean
 41 |   BoardsList:
 42 |     type: object
 43 |     required:
 44 |       - list
 45 |       - total
 46 |       - totalPages
 47 |     properties:
 48 |       list:
 49 |         type: array
 50 |         items:
 51 |           $ref: '#/schemas/Board'
 52 |       total:
 53 |         type: integer
 54 |       totalPages:
 55 |         type: integer
 56 | 
 57 |       
 58 | getAllBoards:
 59 |   summary: Get all boards for current user
 60 |   security:
 61 |     - bearerAuth: []
 62 |   parameters:
 63 |     - name: page
 64 |       in: query
 65 |       required: false
 66 |       schema:
 67 |         type: integer
 68 |         default: 1
 69 |     - name: limit
 70 |       in: query
 71 |       required: false
 72 |       schema:
 73 |         type: integer
 74 |         default: 10
 75 |     - name: sort
 76 |       in: query
 77 |       required: false
 78 |       schema:
 79 |         type: string
 80 |         enum:
 81 |           - createdAt
 82 |           - updatedAt
 83 |           - lastOpenedAt
 84 |           - name
 85 |     - name: isFavorite
 86 |       in: query
 87 |       required: false
 88 |       schema:
 89 |         type: boolean
 90 |     - name: search
 91 |       in: query
 92 |       required: false
 93 |       schema:
 94 |         type: string
 95 |   responses:
 96 |     '200':
 97 |       description: List of boards
 98 |       content:
 99 |         application/json:
100 |           schema:
101 |             $ref: '#/schemas/BoardsList'
102 |     '401':
103 |       $ref: '../shared/responses.yaml#/UnauthorizedError'
104 | 
105 | getBoardById:
106 |   summary: Get a board by id
107 |   security:
108 |     - bearerAuth: []
109 |   parameters:
110 |     - name: boardId
111 |       in: path
112 |       required: true
113 |       schema:
114 |         type: string
115 |   responses:
116 |     '200':
117 |       description: Board
118 |       content:
119 |         application/json:
120 |           schema:
121 |             $ref: '#/schemas/Board'
122 |     '401':
123 |       $ref: '../shared/responses.yaml#/UnauthorizedError'
124 |     '404':
125 |       $ref: '../shared/responses.yaml#/NotFoundError'
126 | 
127 | createBoard:
128 |   summary: Create a new board
129 |   security:
130 |     - bearerAuth: []
131 |   responses:
132 |     '201':
133 |       description: Board created successfully
134 |       content:
135 |         application/json:
136 |           schema:
137 |             $ref: '#/schemas/Board'
138 |     '401':
139 |       $ref: '../shared/responses.yaml#/UnauthorizedError'
140 | 
141 | renameBoard:
142 |   summary: Rename a board
143 |   security:
144 |     - bearerAuth: []
145 |   parameters:
146 |     - name: boardId
147 |       in: path
148 |       required: true
149 |       schema:
150 |         type: string
151 |   requestBody:
152 |     required: true
153 |     content:
154 |       application/json:
155 |         schema:
156 |           $ref: '#/schemas/RenameBoard'
157 |   responses:
158 |     '201':
159 |       description: Board created successfully
160 |       content:
161 |         application/json:
162 |           schema:
163 |             $ref: '#/schemas/Board'
164 |     '401':
165 |       $ref: '../shared/responses.yaml#/UnauthorizedError'
166 | 
167 | updateBoardFavorite:
168 |   summary: Update a board favorite
169 |   security:
170 |     - bearerAuth: []
171 |   parameters:
172 |     - name: boardId
173 |       in: path
174 |       required: true
175 |       schema:
176 |         type: string
177 |   requestBody:
178 |     required: true
179 |     content:
180 |       application/json:
181 |         schema:
182 |           $ref: '#/schemas/UpdateBoardFavorite'
183 |   responses:
184 |     '201':
185 |       description: Board created successfully
186 |       content:
187 |         application/json:
188 |           schema:
189 |             $ref: '#/schemas/Board'
190 |     '401':
191 |       $ref: '../shared/responses.yaml#/UnauthorizedError'
192 | 
193 | 
194 | 
195 | deleteBoard:
196 |   summary: Delete a board
197 |   security:
198 |     - bearerAuth: []
199 |   parameters:
200 |     - name: boardId
201 |       in: path
202 |       required: true
203 |       schema:
204 |         type: string
205 |   responses:
206 |     '204':
207 |       description: Board deleted successfully
208 |     '401':
209 |       $ref: '../shared/responses.yaml#/UnauthorizedError'
210 |     '404':
211 |       $ref: '../shared/responses.yaml#/NotFoundError'
212 | 


--------------------------------------------------------------------------------
/bundle.yaml:
--------------------------------------------------------------------------------
  1 | openapi: 3.0.0
  2 | info:
  3 |   title: Miro-like Collaborative Whiteboard API
  4 |   description: API for a collaborative whiteboard application similar to Miro
  5 |   version: 1.0.0
  6 | paths:
  7 |   /auth/login:
  8 |     post:
  9 |       summary: Login user
 10 |       requestBody:
 11 |         required: true
 12 |         content:
 13 |           application/json:
 14 |             schema:
 15 |               $ref: '#/components/schemas/LoginRequest'
 16 |       responses:
 17 |         '200':
 18 |           description: Login successful
 19 |           content:
 20 |             application/json:
 21 |               schema:
 22 |                 $ref: '#/components/schemas/AuthResponse'
 23 |         '401':
 24 |           $ref: '#/components/responses/UnauthorizedError'
 25 |   /auth/register:
 26 |     post:
 27 |       summary: Register new user
 28 |       requestBody:
 29 |         required: true
 30 |         content:
 31 |           application/json:
 32 |             schema:
 33 |               $ref: '#/components/schemas/RegisterRequest'
 34 |       responses:
 35 |         '201':
 36 |           description: Registration successful
 37 |           content:
 38 |             application/json:
 39 |               schema:
 40 |                 $ref: '#/components/schemas/AuthResponse'
 41 |         '400':
 42 |           $ref: '#/components/responses/BadRequestError'
 43 |   /boards:
 44 |     get:
 45 |       summary: Get all boards for current user
 46 |       security:
 47 |         - bearerAuth: []
 48 |       responses:
 49 |         '200':
 50 |           description: List of boards
 51 |           content:
 52 |             application/json:
 53 |               schema:
 54 |                 type: array
 55 |                 items:
 56 |                   $ref: '#/components/schemas/Board'
 57 |         '401':
 58 |           $ref: '#/components/responses/UnauthorizedError'
 59 |     post:
 60 |       summary: Create a new board
 61 |       security:
 62 |         - bearerAuth: []
 63 |       requestBody:
 64 |         required: true
 65 |         content:
 66 |           application/json:
 67 |             schema:
 68 |               $ref: '#/components/schemas/CreateBoard'
 69 |       responses:
 70 |         '201':
 71 |           description: Board created successfully
 72 |           content:
 73 |             application/json:
 74 |               schema:
 75 |                 $ref: '#/components/schemas/Board'
 76 |         '401':
 77 |           $ref: '#/components/responses/UnauthorizedError'
 78 |   /boards/{boardId}:
 79 |     delete:
 80 |       summary: Delete a board
 81 |       security:
 82 |         - bearerAuth: []
 83 |       parameters:
 84 |         - name: boardId
 85 |           in: path
 86 |           required: true
 87 |           schema:
 88 |             type: string
 89 |       responses:
 90 |         '204':
 91 |           description: Board deleted successfully
 92 |         '401':
 93 |           $ref: '#/components/responses/UnauthorizedError'
 94 |         '404':
 95 |           $ref: '#/components/responses/NotFoundError'
 96 | components:
 97 |   securitySchemes:
 98 |     bearerAuth:
 99 |       type: http
100 |       scheme: bearer
101 |       bearerFormat: JWT
102 |   schemas:
103 |     LoginRequest:
104 |       type: object
105 |       required:
106 |         - email
107 |         - password
108 |       properties:
109 |         email:
110 |           type: string
111 |           format: email
112 |         password:
113 |           type: string
114 |           format: password
115 |     User:
116 |       type: object
117 |       required:
118 |         - id
119 |         - email
120 |       properties:
121 |         id:
122 |           type: string
123 |         email:
124 |           type: string
125 |           format: email
126 |     AuthResponse:
127 |       type: object
128 |       required:
129 |         - accessToken
130 |         - user
131 |       properties:
132 |         accessToken:
133 |           type: string
134 |         user:
135 |           $ref: '#/components/schemas/User'
136 |     Error:
137 |       type: object
138 |       required:
139 |         - message
140 |         - code
141 |       properties:
142 |         message:
143 |           type: string
144 |         code:
145 |           type: string
146 |     RegisterRequest:
147 |       type: object
148 |       required:
149 |         - email
150 |         - password
151 |       properties:
152 |         email:
153 |           type: string
154 |           format: email
155 |         password:
156 |           type: string
157 |           format: password
158 |     Board:
159 |       type: object
160 |       required:
161 |         - id
162 |         - name
163 |       properties:
164 |         id:
165 |           type: string
166 |         name:
167 |           type: string
168 |     CreateBoard:
169 |       type: object
170 |       required:
171 |         - name
172 |       properties:
173 |         name:
174 |           type: string
175 |   responses:
176 |     UnauthorizedError:
177 |       description: Unauthorized
178 |       content:
179 |         application/json:
180 |           schema:
181 |             $ref: '#/components/schemas/Error'
182 |     BadRequestError:
183 |       description: Bad request
184 |       content:
185 |         application/json:
186 |           schema:
187 |             $ref: '#/components/schemas/Error'
188 |     NotFoundError:
189 |       description: Resource not found
190 |       content:
191 |         application/json:
192 |           schema:
193 |             $ref: '#/components/schemas/Error'
194 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SelectPrimitive from "@radix-ui/react-select"
  3 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
  4 | 
  5 | import { cn } from "@/shared/lib/css"
  6 | 
  7 | function Select({
  8 |   ...props
  9 | }: React.ComponentProps<typeof SelectPrimitive.Root>) {
 10 |   return <SelectPrimitive.Root data-slot="select" {...props} />
 11 | }
 12 | 
 13 | function SelectGroup({
 14 |   ...props
 15 | }: React.ComponentProps<typeof SelectPrimitive.Group>) {
 16 |   return <SelectPrimitive.Group data-slot="select-group" {...props} />
 17 | }
 18 | 
 19 | function SelectValue({
 20 |   ...props
 21 | }: React.ComponentProps<typeof SelectPrimitive.Value>) {
 22 |   return <SelectPrimitive.Value data-slot="select-value" {...props} />
 23 | }
 24 | 
 25 | function SelectTrigger({
 26 |   className,
 27 |   size = "default",
 28 |   children,
 29 |   ...props
 30 | }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
 31 |   size?: "sm" | "default"
 32 | }) {
 33 |   return (
 34 |     <SelectPrimitive.Trigger
 35 |       data-slot="select-trigger"
 36 |       data-size={size}
 37 |       className={cn(
 38 |         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 39 |         className
 40 |       )}
 41 |       {...props}
 42 |     >
 43 |       {children}
 44 |       <SelectPrimitive.Icon asChild>
 45 |         <ChevronDownIcon className="size-4 opacity-50" />
 46 |       </SelectPrimitive.Icon>
 47 |     </SelectPrimitive.Trigger>
 48 |   )
 49 | }
 50 | 
 51 | function SelectContent({
 52 |   className,
 53 |   children,
 54 |   position = "popper",
 55 |   ...props
 56 | }: React.ComponentProps<typeof SelectPrimitive.Content>) {
 57 |   return (
 58 |     <SelectPrimitive.Portal>
 59 |       <SelectPrimitive.Content
 60 |         data-slot="select-content"
 61 |         className={cn(
 62 |           "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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
 63 |           position === "popper" &&
 64 |             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 65 |           className
 66 |         )}
 67 |         position={position}
 68 |         {...props}
 69 |       >
 70 |         <SelectScrollUpButton />
 71 |         <SelectPrimitive.Viewport
 72 |           className={cn(
 73 |             "p-1",
 74 |             position === "popper" &&
 75 |               "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
 76 |           )}
 77 |         >
 78 |           {children}
 79 |         </SelectPrimitive.Viewport>
 80 |         <SelectScrollDownButton />
 81 |       </SelectPrimitive.Content>
 82 |     </SelectPrimitive.Portal>
 83 |   )
 84 | }
 85 | 
 86 | function SelectLabel({
 87 |   className,
 88 |   ...props
 89 | }: React.ComponentProps<typeof SelectPrimitive.Label>) {
 90 |   return (
 91 |     <SelectPrimitive.Label
 92 |       data-slot="select-label"
 93 |       className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
 94 |       {...props}
 95 |     />
 96 |   )
 97 | }
 98 | 
 99 | function SelectItem({
100 |   className,
101 |   children,
102 |   ...props
103 | }: React.ComponentProps<typeof SelectPrimitive.Item>) {
104 |   return (
105 |     <SelectPrimitive.Item
106 |       data-slot="select-item"
107 |       className={cn(
108 |         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
109 |         className
110 |       )}
111 |       {...props}
112 |     >
113 |       <span className="absolute right-2 flex size-3.5 items-center justify-center">
114 |         <SelectPrimitive.ItemIndicator>
115 |           <CheckIcon className="size-4" />
116 |         </SelectPrimitive.ItemIndicator>
117 |       </span>
118 |       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
119 |     </SelectPrimitive.Item>
120 |   )
121 | }
122 | 
123 | function SelectSeparator({
124 |   className,
125 |   ...props
126 | }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
127 |   return (
128 |     <SelectPrimitive.Separator
129 |       data-slot="select-separator"
130 |       className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
131 |       {...props}
132 |     />
133 |   )
134 | }
135 | 
136 | function SelectScrollUpButton({
137 |   className,
138 |   ...props
139 | }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
140 |   return (
141 |     <SelectPrimitive.ScrollUpButton
142 |       data-slot="select-scroll-up-button"
143 |       className={cn(
144 |         "flex cursor-default items-center justify-center py-1",
145 |         className
146 |       )}
147 |       {...props}
148 |     >
149 |       <ChevronUpIcon className="size-4" />
150 |     </SelectPrimitive.ScrollUpButton>
151 |   )
152 | }
153 | 
154 | function SelectScrollDownButton({
155 |   className,
156 |   ...props
157 | }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
158 |   return (
159 |     <SelectPrimitive.ScrollDownButton
160 |       data-slot="select-scroll-down-button"
161 |       className={cn(
162 |         "flex cursor-default items-center justify-center py-1",
163 |         className
164 |       )}
165 |       {...props}
166 |     >
167 |       <ChevronDownIcon className="size-4" />
168 |     </SelectPrimitive.ScrollDownButton>
169 |   )
170 | }
171 | 
172 | export {
173 |   Select,
174 |   SelectContent,
175 |   SelectGroup,
176 |   SelectItem,
177 |   SelectLabel,
178 |   SelectScrollDownButton,
179 |   SelectScrollUpButton,
180 |   SelectSeparator,
181 |   SelectTrigger,
182 |   SelectValue,
183 | }
184 | 


--------------------------------------------------------------------------------
/src/shared/api/mocks/handlers/boards.ts:
--------------------------------------------------------------------------------
  1 | import { delay, HttpResponse } from "msw";
  2 | import { http } from "../http";
  3 | import { ApiSchemas } from "../../schema";
  4 | import { verifyTokenOrThrow } from "../session";
  5 | 
  6 | // Функция для генерации случайной даты в пределах последних 30 дней
  7 | function randomDate() {
  8 |   const start = new Date();
  9 |   start.setDate(start.getDate() - 30);
 10 | 
 11 |   const end = new Date();
 12 | 
 13 |   return new Date(
 14 |     start.getTime() + Math.random() * (end.getTime() - start.getTime()),
 15 |   ).toISOString();
 16 | }
 17 | 
 18 | // Функция для генерации случайного названия доски
 19 | function generateBoardName() {
 20 |   const adjectives = [
 21 |     "Стратегический",
 22 |     "Креативный",
 23 |     "Инновационный",
 24 |     "Годовой",
 25 |     "Квартальный",
 26 |     "Важный",
 27 |     "Срочный",
 28 |     "Ключевой",
 29 |     "Долгосрочный",
 30 |     "Оперативный",
 31 |     "Тактический",
 32 |     "Аналитический",
 33 |     "Исследовательский",
 34 |   ];
 35 | 
 36 |   const nouns = [
 37 |     "План",
 38 |     "Проект",
 39 |     "Дизайн",
 40 |     "Отчет",
 41 |     "Анализ",
 42 |     "Концепт",
 43 |     "Процесс",
 44 |     "Прототип",
 45 |     "Обзор",
 46 |     "Презентация",
 47 |     "Маркетинг",
 48 |     "Разработка",
 49 |     "Бюджет",
 50 |     "Исследование",
 51 |     "Запуск",
 52 |     "Совещание",
 53 |   ];
 54 | 
 55 |   const themes = [
 56 |     "Продукта",
 57 |     "Команды",
 58 |     "Компании",
 59 |     "Кампании",
 60 |     "Стратегии",
 61 |     "Рынка",
 62 |     "Бренда",
 63 |     "Бизнеса",
 64 |     "Проекта",
 65 |     "Квартала",
 66 |     "Года",
 67 |     "Пользователя",
 68 |     "Клиента",
 69 |   ];
 70 | 
 71 |   const randomAdjective =
 72 |     adjectives[Math.floor(Math.random() * adjectives.length)];
 73 |   const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
 74 |   const randomTheme = themes[Math.floor(Math.random() * themes.length)];
 75 | 
 76 |   return `${randomAdjective} ${randomNoun} ${randomTheme}`;
 77 | }
 78 | 
 79 | // Генерация 1000 случайных досок
 80 | function generateRandomBoards(count: number): ApiSchemas["Board"][] {
 81 |   const result: ApiSchemas["Board"][] = [];
 82 | 
 83 |   for (let i = 0; i < count; i++) {
 84 |     const createdAt = randomDate();
 85 |     const updatedAt = new Date(
 86 |       Math.min(
 87 |         new Date(createdAt).getTime() + Math.random() * 86400000 * 10,
 88 |         new Date().getTime(),
 89 |       ),
 90 |     ).toISOString(); // Добавляем до 10 дней
 91 |     const lastOpenedAt = new Date(
 92 |       Math.min(
 93 |         new Date(updatedAt).getTime() + Math.random() * 86400000 * 5,
 94 |         new Date().getTime(),
 95 |       ),
 96 |     ).toISOString(); // Добавляем до 5 дней
 97 | 
 98 |     result.push({
 99 |       id: crypto.randomUUID(),
100 |       name: generateBoardName(),
101 |       createdAt,
102 |       updatedAt,
103 |       lastOpenedAt,
104 |       isFavorite: Math.random() > 0.7, // Примерно 30% досок будут избранными
105 |     });
106 |   }
107 | 
108 |   return result;
109 | }
110 | 
111 | // Создаем 1000 случайных досок
112 | const boards: ApiSchemas["Board"][] = generateRandomBoards(1000);
113 | 
114 | export const boardsHandlers = [
115 |   http.get("/boards", async (ctx) => {
116 |     await verifyTokenOrThrow(ctx.request);
117 | 
118 |     const url = new URL(ctx.request.url);
119 |     const page = Number(url.searchParams.get("page") || 1);
120 |     const limit = Number(url.searchParams.get("limit") || 10);
121 |     const search = url.searchParams.get("search");
122 |     const isFavorite = url.searchParams.get("isFavorite");
123 |     const sort = url.searchParams.get("sort");
124 | 
125 |     let filteredBoards = [...boards];
126 | 
127 |     // Фильтрация по поиску
128 |     if (search) {
129 |       filteredBoards = filteredBoards.filter((board) =>
130 |         board.name.toLowerCase().includes(search.toLowerCase()),
131 |       );
132 |     }
133 | 
134 |     // Фильтрация по избранному
135 |     if (isFavorite !== null) {
136 |       const isFav = isFavorite === "true";
137 |       filteredBoards = filteredBoards.filter(
138 |         (board) => board.isFavorite === isFav,
139 |       );
140 |     }
141 | 
142 |     // Сортировка
143 |     if (sort) {
144 |       filteredBoards.sort((a, b) => {
145 |         if (sort === "name") {
146 |           return a.name.localeCompare(b.name);
147 |         } else {
148 |           // Для дат (createdAt, updatedAt, lastOpenedAt)
149 |           return (
150 |             new Date(
151 |               b[sort as keyof ApiSchemas["Board"]].toString(),
152 |             ).getTime() -
153 |             new Date(a[sort as keyof ApiSchemas["Board"]].toString()).getTime()
154 |           );
155 |         }
156 |       });
157 |     }
158 | 
159 |     const total = filteredBoards.length;
160 |     const totalPages = Math.ceil(total / limit);
161 |     const startIndex = (page - 1) * limit;
162 |     const endIndex = startIndex + limit;
163 |     const paginatedBoards = filteredBoards.slice(startIndex, endIndex);
164 | 
165 |     return HttpResponse.json({
166 |       list: paginatedBoards,
167 |       total,
168 |       totalPages,
169 |     });
170 |   }),
171 | 
172 |   http.get("/boards/{boardId}", async ({ params, request }) => {
173 |     await verifyTokenOrThrow(request);
174 |     const { boardId } = params;
175 |     const board = boards.find((board) => board.id === boardId);
176 | 
177 |     if (!board) {
178 |       return HttpResponse.json(
179 |         { message: "Board not found", code: "NOT_FOUND" },
180 |         { status: 404 },
181 |       );
182 |     }
183 | 
184 |     // Обновляем lastOpenedAt при просмотре доски
185 |     board.lastOpenedAt = new Date().toISOString();
186 |     return HttpResponse.json(board);
187 |   }),
188 | 
189 |   http.post("/boards", async (ctx) => {
190 |     await verifyTokenOrThrow(ctx.request);
191 | 
192 |     const now = new Date().toISOString();
193 |     const board: ApiSchemas["Board"] = {
194 |       id: crypto.randomUUID(),
195 |       name: "New Board",
196 |       createdAt: now,
197 |       updatedAt: now,
198 |       lastOpenedAt: now,
199 |       isFavorite: false,
200 |     };
201 | 
202 |     boards.push(board);
203 |     return HttpResponse.json(board, { status: 201 });
204 |   }),
205 | 
206 |   http.put("/boards/{boardId}/favorite", async ({ params, request }) => {
207 |     await verifyTokenOrThrow(request);
208 |     const { boardId } = params;
209 |     const board = boards.find((board) => board.id === boardId);
210 | 
211 |     if (!board) {
212 |       return HttpResponse.json(
213 |         { message: "Board not found", code: "NOT_FOUND" },
214 |         { status: 404 },
215 |       );
216 |     }
217 | 
218 |     const data = (await request.json()) as ApiSchemas["UpdateBoardFavorite"];
219 |     board.isFavorite = data.isFavorite;
220 |     board.updatedAt = new Date().toISOString();
221 | 
222 |     return HttpResponse.json(board, { status: 201 });
223 |   }),
224 | 
225 |   http.put("/boards/{boardId}/rename", async ({ params, request }) => {
226 |     await verifyTokenOrThrow(request);
227 |     const { boardId } = params;
228 |     const board = boards.find((board) => board.id === boardId);
229 | 
230 |     if (!board) {
231 |       return HttpResponse.json(
232 |         { message: "Board not found", code: "NOT_FOUND" },
233 |         { status: 404 },
234 |       );
235 |     }
236 | 
237 |     const data = (await request.json()) as ApiSchemas["RenameBoard"];
238 |     board.name = data.name;
239 |     board.updatedAt = new Date().toISOString();
240 | 
241 |     return HttpResponse.json(board, { status: 201 });
242 |   }),
243 | 
244 |   http.delete("/boards/{boardId}", async ({ params, request }) => {
245 |     await verifyTokenOrThrow(request);
246 |     const { boardId } = params;
247 |     const index = boards.findIndex((board) => board.id === boardId);
248 |     await delay(1000);
249 |     if (index === -1) {
250 |       return HttpResponse.json(
251 |         { message: "Board not found", code: "NOT_FOUND" },
252 |         { status: 404 },
253 |       );
254 |     }
255 | 
256 |     boards.splice(index, 1);
257 |     return new HttpResponse(null, { status: 204 });
258 |   }),
259 | ];
260 | 


--------------------------------------------------------------------------------
/src/shared/ui/kit/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  3 | import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
  4 | 
  5 | import { cn } from "@/shared/lib/css"
  6 | 
  7 | function DropdownMenu({
  8 |   ...props
  9 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
 10 |   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 11 | }
 12 | 
 13 | function DropdownMenuPortal({
 14 |   ...props
 15 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
 16 |   return (
 17 |     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
 18 |   )
 19 | }
 20 | 
 21 | function DropdownMenuTrigger({
 22 |   ...props
 23 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
 24 |   return (
 25 |     <DropdownMenuPrimitive.Trigger
 26 |       data-slot="dropdown-menu-trigger"
 27 |       {...props}
 28 |     />
 29 |   )
 30 | }
 31 | 
 32 | function DropdownMenuContent({
 33 |   className,
 34 |   sideOffset = 4,
 35 |   ...props
 36 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
 37 |   return (
 38 |     <DropdownMenuPrimitive.Portal>
 39 |       <DropdownMenuPrimitive.Content
 40 |         data-slot="dropdown-menu-content"
 41 |         sideOffset={sideOffset}
 42 |         className={cn(
 43 |           "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",
 44 |           className
 45 |         )}
 46 |         {...props}
 47 |       />
 48 |     </DropdownMenuPrimitive.Portal>
 49 |   )
 50 | }
 51 | 
 52 | function DropdownMenuGroup({
 53 |   ...props
 54 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
 55 |   return (
 56 |     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 57 |   )
 58 | }
 59 | 
 60 | function DropdownMenuItem({
 61 |   className,
 62 |   inset,
 63 |   variant = "default",
 64 |   ...props
 65 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
 66 |   inset?: boolean
 67 |   variant?: "default" | "destructive"
 68 | }) {
 69 |   return (
 70 |     <DropdownMenuPrimitive.Item
 71 |       data-slot="dropdown-menu-item"
 72 |       data-inset={inset}
 73 |       data-variant={variant}
 74 |       className={cn(
 75 |         "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",
 76 |         className
 77 |       )}
 78 |       {...props}
 79 |     />
 80 |   )
 81 | }
 82 | 
 83 | function DropdownMenuCheckboxItem({
 84 |   className,
 85 |   children,
 86 |   checked,
 87 |   ...props
 88 | }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
 89 |   return (
 90 |     <DropdownMenuPrimitive.CheckboxItem
 91 |       data-slot="dropdown-menu-checkbox-item"
 92 |       className={cn(
 93 |         "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",
 94 |         className
 95 |       )}
 96 |       checked={checked}
 97 |       {...props}
 98 |     >
 99 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
100 |         <DropdownMenuPrimitive.ItemIndicator>
101 |           <CheckIcon className="size-4" />
102 |         </DropdownMenuPrimitive.ItemIndicator>
103 |       </span>
104 |       {children}
105 |     </DropdownMenuPrimitive.CheckboxItem>
106 |   )
107 | }
108 | 
109 | function DropdownMenuRadioGroup({
110 |   ...props
111 | }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
112 |   return (
113 |     <DropdownMenuPrimitive.RadioGroup
114 |       data-slot="dropdown-menu-radio-group"
115 |       {...props}
116 |     />
117 |   )
118 | }
119 | 
120 | function DropdownMenuRadioItem({
121 |   className,
122 |   children,
123 |   ...props
124 | }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
125 |   return (
126 |     <DropdownMenuPrimitive.RadioItem
127 |       data-slot="dropdown-menu-radio-item"
128 |       className={cn(
129 |         "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",
130 |         className
131 |       )}
132 |       {...props}
133 |     >
134 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
135 |         <DropdownMenuPrimitive.ItemIndicator>
136 |           <CircleIcon className="size-2 fill-current" />
137 |         </DropdownMenuPrimitive.ItemIndicator>
138 |       </span>
139 |       {children}
140 |     </DropdownMenuPrimitive.RadioItem>
141 |   )
142 | }
143 | 
144 | function DropdownMenuLabel({
145 |   className,
146 |   inset,
147 |   ...props
148 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
149 |   inset?: boolean
150 | }) {
151 |   return (
152 |     <DropdownMenuPrimitive.Label
153 |       data-slot="dropdown-menu-label"
154 |       data-inset={inset}
155 |       className={cn(
156 |         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
157 |         className
158 |       )}
159 |       {...props}
160 |     />
161 |   )
162 | }
163 | 
164 | function DropdownMenuSeparator({
165 |   className,
166 |   ...props
167 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
168 |   return (
169 |     <DropdownMenuPrimitive.Separator
170 |       data-slot="dropdown-menu-separator"
171 |       className={cn("bg-border -mx-1 my-1 h-px", className)}
172 |       {...props}
173 |     />
174 |   )
175 | }
176 | 
177 | function DropdownMenuShortcut({
178 |   className,
179 |   ...props
180 | }: React.ComponentProps<"span">) {
181 |   return (
182 |     <span
183 |       data-slot="dropdown-menu-shortcut"
184 |       className={cn(
185 |         "text-muted-foreground ml-auto text-xs tracking-widest",
186 |         className
187 |       )}
188 |       {...props}
189 |     />
190 |   )
191 | }
192 | 
193 | function DropdownMenuSub({
194 |   ...props
195 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
196 |   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
197 | }
198 | 
199 | function DropdownMenuSubTrigger({
200 |   className,
201 |   inset,
202 |   children,
203 |   ...props
204 | }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
205 |   inset?: boolean
206 | }) {
207 |   return (
208 |     <DropdownMenuPrimitive.SubTrigger
209 |       data-slot="dropdown-menu-sub-trigger"
210 |       data-inset={inset}
211 |       className={cn(
212 |         "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",
213 |         className
214 |       )}
215 |       {...props}
216 |     >
217 |       {children}
218 |       <ChevronRightIcon className="ml-auto size-4" />
219 |     </DropdownMenuPrimitive.SubTrigger>
220 |   )
221 | }
222 | 
223 | function DropdownMenuSubContent({
224 |   className,
225 |   ...props
226 | }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
227 |   return (
228 |     <DropdownMenuPrimitive.SubContent
229 |       data-slot="dropdown-menu-sub-content"
230 |       className={cn(
231 |         "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",
232 |         className
233 |       )}
234 |       {...props}
235 |     />
236 |   )
237 | }
238 | 
239 | export {
240 |   DropdownMenu,
241 |   DropdownMenuPortal,
242 |   DropdownMenuTrigger,
243 |   DropdownMenuContent,
244 |   DropdownMenuGroup,
245 |   DropdownMenuLabel,
246 |   DropdownMenuItem,
247 |   DropdownMenuCheckboxItem,
248 |   DropdownMenuRadioGroup,
249 |   DropdownMenuRadioItem,
250 |   DropdownMenuSeparator,
251 |   DropdownMenuShortcut,
252 |   DropdownMenuSub,
253 |   DropdownMenuSubTrigger,
254 |   DropdownMenuSubContent,
255 | }
256 | 


--------------------------------------------------------------------------------
/public/mockServiceWorker.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /* tslint:disable */
  3 | 
  4 | /**
  5 |  * Mock Service Worker.
  6 |  * @see https://github.com/mswjs/msw
  7 |  * - Please do NOT modify this file.
  8 |  * - Please do NOT serve this file on production.
  9 |  */
 10 | 
 11 | const PACKAGE_VERSION = '2.7.5'
 12 | const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 13 | const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 14 | const activeClientIds = new Set()
 15 | 
 16 | self.addEventListener('install', function () {
 17 |   self.skipWaiting()
 18 | })
 19 | 
 20 | self.addEventListener('activate', function (event) {
 21 |   event.waitUntil(self.clients.claim())
 22 | })
 23 | 
 24 | self.addEventListener('message', async function (event) {
 25 |   const clientId = event.source.id
 26 | 
 27 |   if (!clientId || !self.clients) {
 28 |     return
 29 |   }
 30 | 
 31 |   const client = await self.clients.get(clientId)
 32 | 
 33 |   if (!client) {
 34 |     return
 35 |   }
 36 | 
 37 |   const allClients = await self.clients.matchAll({
 38 |     type: 'window',
 39 |   })
 40 | 
 41 |   switch (event.data) {
 42 |     case 'KEEPALIVE_REQUEST': {
 43 |       sendToClient(client, {
 44 |         type: 'KEEPALIVE_RESPONSE',
 45 |       })
 46 |       break
 47 |     }
 48 | 
 49 |     case 'INTEGRITY_CHECK_REQUEST': {
 50 |       sendToClient(client, {
 51 |         type: 'INTEGRITY_CHECK_RESPONSE',
 52 |         payload: {
 53 |           packageVersion: PACKAGE_VERSION,
 54 |           checksum: INTEGRITY_CHECKSUM,
 55 |         },
 56 |       })
 57 |       break
 58 |     }
 59 | 
 60 |     case 'MOCK_ACTIVATE': {
 61 |       activeClientIds.add(clientId)
 62 | 
 63 |       sendToClient(client, {
 64 |         type: 'MOCKING_ENABLED',
 65 |         payload: {
 66 |           client: {
 67 |             id: client.id,
 68 |             frameType: client.frameType,
 69 |           },
 70 |         },
 71 |       })
 72 |       break
 73 |     }
 74 | 
 75 |     case 'MOCK_DEACTIVATE': {
 76 |       activeClientIds.delete(clientId)
 77 |       break
 78 |     }
 79 | 
 80 |     case 'CLIENT_CLOSED': {
 81 |       activeClientIds.delete(clientId)
 82 | 
 83 |       const remainingClients = allClients.filter((client) => {
 84 |         return client.id !== clientId
 85 |       })
 86 | 
 87 |       // Unregister itself when there are no more clients
 88 |       if (remainingClients.length === 0) {
 89 |         self.registration.unregister()
 90 |       }
 91 | 
 92 |       break
 93 |     }
 94 |   }
 95 | })
 96 | 
 97 | self.addEventListener('fetch', function (event) {
 98 |   const { request } = event
 99 | 
100 |   // Bypass navigation requests.
101 |   if (request.mode === 'navigate') {
102 |     return
103 |   }
104 | 
105 |   // Opening the DevTools triggers the "only-if-cached" request
106 |   // that cannot be handled by the worker. Bypass such requests.
107 |   if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
108 |     return
109 |   }
110 | 
111 |   // Bypass all requests when there are no active clients.
112 |   // Prevents the self-unregistered worked from handling requests
113 |   // after it's been deleted (still remains active until the next reload).
114 |   if (activeClientIds.size === 0) {
115 |     return
116 |   }
117 | 
118 |   // Generate unique request ID.
119 |   const requestId = crypto.randomUUID()
120 |   event.respondWith(handleRequest(event, requestId))
121 | })
122 | 
123 | async function handleRequest(event, requestId) {
124 |   const client = await resolveMainClient(event)
125 |   const response = await getResponse(event, client, requestId)
126 | 
127 |   // Send back the response clone for the "response:*" life-cycle events.
128 |   // Ensure MSW is active and ready to handle the message, otherwise
129 |   // this message will pend indefinitely.
130 |   if (client && activeClientIds.has(client.id)) {
131 |     ;(async function () {
132 |       const responseClone = response.clone()
133 | 
134 |       sendToClient(
135 |         client,
136 |         {
137 |           type: 'RESPONSE',
138 |           payload: {
139 |             requestId,
140 |             isMockedResponse: IS_MOCKED_RESPONSE in response,
141 |             type: responseClone.type,
142 |             status: responseClone.status,
143 |             statusText: responseClone.statusText,
144 |             body: responseClone.body,
145 |             headers: Object.fromEntries(responseClone.headers.entries()),
146 |           },
147 |         },
148 |         [responseClone.body],
149 |       )
150 |     })()
151 |   }
152 | 
153 |   return response
154 | }
155 | 
156 | // Resolve the main client for the given event.
157 | // Client that issues a request doesn't necessarily equal the client
158 | // that registered the worker. It's with the latter the worker should
159 | // communicate with during the response resolving phase.
160 | async function resolveMainClient(event) {
161 |   const client = await self.clients.get(event.clientId)
162 | 
163 |   if (activeClientIds.has(event.clientId)) {
164 |     return client
165 |   }
166 | 
167 |   if (client?.frameType === 'top-level') {
168 |     return client
169 |   }
170 | 
171 |   const allClients = await self.clients.matchAll({
172 |     type: 'window',
173 |   })
174 | 
175 |   return allClients
176 |     .filter((client) => {
177 |       // Get only those clients that are currently visible.
178 |       return client.visibilityState === 'visible'
179 |     })
180 |     .find((client) => {
181 |       // Find the client ID that's recorded in the
182 |       // set of clients that have registered the worker.
183 |       return activeClientIds.has(client.id)
184 |     })
185 | }
186 | 
187 | async function getResponse(event, client, requestId) {
188 |   const { request } = event
189 | 
190 |   // Clone the request because it might've been already used
191 |   // (i.e. its body has been read and sent to the client).
192 |   const requestClone = request.clone()
193 | 
194 |   function passthrough() {
195 |     // Cast the request headers to a new Headers instance
196 |     // so the headers can be manipulated with.
197 |     const headers = new Headers(requestClone.headers)
198 | 
199 |     // Remove the "accept" header value that marked this request as passthrough.
200 |     // This prevents request alteration and also keeps it compliant with the
201 |     // user-defined CORS policies.
202 |     const acceptHeader = headers.get('accept')
203 |     if (acceptHeader) {
204 |       const values = acceptHeader.split(',').map((value) => value.trim())
205 |       const filteredValues = values.filter(
206 |         (value) => value !== 'msw/passthrough',
207 |       )
208 | 
209 |       if (filteredValues.length > 0) {
210 |         headers.set('accept', filteredValues.join(', '))
211 |       } else {
212 |         headers.delete('accept')
213 |       }
214 |     }
215 | 
216 |     return fetch(requestClone, { headers })
217 |   }
218 | 
219 |   // Bypass mocking when the client is not active.
220 |   if (!client) {
221 |     return passthrough()
222 |   }
223 | 
224 |   // Bypass initial page load requests (i.e. static assets).
225 |   // The absence of the immediate/parent client in the map of the active clients
226 |   // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
227 |   // and is not ready to handle requests.
228 |   if (!activeClientIds.has(client.id)) {
229 |     return passthrough()
230 |   }
231 | 
232 |   // Notify the client that a request has been intercepted.
233 |   const requestBuffer = await request.arrayBuffer()
234 |   const clientMessage = await sendToClient(
235 |     client,
236 |     {
237 |       type: 'REQUEST',
238 |       payload: {
239 |         id: requestId,
240 |         url: request.url,
241 |         mode: request.mode,
242 |         method: request.method,
243 |         headers: Object.fromEntries(request.headers.entries()),
244 |         cache: request.cache,
245 |         credentials: request.credentials,
246 |         destination: request.destination,
247 |         integrity: request.integrity,
248 |         redirect: request.redirect,
249 |         referrer: request.referrer,
250 |         referrerPolicy: request.referrerPolicy,
251 |         body: requestBuffer,
252 |         keepalive: request.keepalive,
253 |       },
254 |     },
255 |     [requestBuffer],
256 |   )
257 | 
258 |   switch (clientMessage.type) {
259 |     case 'MOCK_RESPONSE': {
260 |       return respondWithMock(clientMessage.data)
261 |     }
262 | 
263 |     case 'PASSTHROUGH': {
264 |       return passthrough()
265 |     }
266 |   }
267 | 
268 |   return passthrough()
269 | }
270 | 
271 | function sendToClient(client, message, transferrables = []) {
272 |   return new Promise((resolve, reject) => {
273 |     const channel = new MessageChannel()
274 | 
275 |     channel.port1.onmessage = (event) => {
276 |       if (event.data && event.data.error) {
277 |         return reject(event.data.error)
278 |       }
279 | 
280 |       resolve(event.data)
281 |     }
282 | 
283 |     client.postMessage(
284 |       message,
285 |       [channel.port2].concat(transferrables.filter(Boolean)),
286 |     )
287 |   })
288 | }
289 | 
290 | async function respondWithMock(response) {
291 |   // Setting response status code to 0 is a no-op.
292 |   // However, when responding with a "Response.error()", the produced Response
293 |   // instance will have status code set to 0. Since it's not possible to create
294 |   // a Response instance with status code 0, handle that use-case separately.
295 |   if (response.status === 0) {
296 |     return Response.error()
297 |   }
298 | 
299 |   const mockedResponse = new Response(response.body, response)
300 | 
301 |   Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
302 |     value: true,
303 |     enumerable: true,
304 |   })
305 | 
306 |   return mockedResponse
307 | }
308 | 


--------------------------------------------------------------------------------
/src/shared/api/schema/generated.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * This file was auto-generated by openapi-typescript.
  3 |  * Do not make direct changes to the file.
  4 |  */
  5 | 
  6 | export interface paths {
  7 |     "/auth/login": {
  8 |         parameters: {
  9 |             query?: never;
 10 |             header?: never;
 11 |             path?: never;
 12 |             cookie?: never;
 13 |         };
 14 |         get?: never;
 15 |         put?: never;
 16 |         /** Login user */
 17 |         post: {
 18 |             parameters: {
 19 |                 query?: never;
 20 |                 header?: never;
 21 |                 path?: never;
 22 |                 cookie?: never;
 23 |             };
 24 |             requestBody: {
 25 |                 content: {
 26 |                     "application/json": components["schemas"]["LoginRequest"];
 27 |                 };
 28 |             };
 29 |             responses: {
 30 |                 /** @description Login successful */
 31 |                 200: {
 32 |                     headers: {
 33 |                         [name: string]: unknown;
 34 |                     };
 35 |                     content: {
 36 |                         "application/json": components["schemas"]["AuthResponse"];
 37 |                     };
 38 |                 };
 39 |                 401: components["responses"]["UnauthorizedError"];
 40 |             };
 41 |         };
 42 |         delete?: never;
 43 |         options?: never;
 44 |         head?: never;
 45 |         patch?: never;
 46 |         trace?: never;
 47 |     };
 48 |     "/auth/register": {
 49 |         parameters: {
 50 |             query?: never;
 51 |             header?: never;
 52 |             path?: never;
 53 |             cookie?: never;
 54 |         };
 55 |         get?: never;
 56 |         put?: never;
 57 |         /** Register new user */
 58 |         post: {
 59 |             parameters: {
 60 |                 query?: never;
 61 |                 header?: never;
 62 |                 path?: never;
 63 |                 cookie?: never;
 64 |             };
 65 |             requestBody: {
 66 |                 content: {
 67 |                     "application/json": components["schemas"]["RegisterRequest"];
 68 |                 };
 69 |             };
 70 |             responses: {
 71 |                 /** @description Registration successful */
 72 |                 201: {
 73 |                     headers: {
 74 |                         [name: string]: unknown;
 75 |                     };
 76 |                     content: {
 77 |                         "application/json": components["schemas"]["AuthResponse"];
 78 |                     };
 79 |                 };
 80 |                 400: components["responses"]["BadRequestError"];
 81 |             };
 82 |         };
 83 |         delete?: never;
 84 |         options?: never;
 85 |         head?: never;
 86 |         patch?: never;
 87 |         trace?: never;
 88 |     };
 89 |     "/auth/refresh": {
 90 |         parameters: {
 91 |             query?: never;
 92 |             header?: never;
 93 |             path?: never;
 94 |             cookie?: never;
 95 |         };
 96 |         get?: never;
 97 |         put?: never;
 98 |         /** Refresh access token */
 99 |         post: {
100 |             parameters: {
101 |                 query?: never;
102 |                 header?: never;
103 |                 path?: never;
104 |                 cookie?: {
105 |                     refreshToken?: string;
106 |                 };
107 |             };
108 |             requestBody?: never;
109 |             responses: {
110 |                 /** @description Access token refreshed successfully */
111 |                 200: {
112 |                     headers: {
113 |                         [name: string]: unknown;
114 |                     };
115 |                     content: {
116 |                         "application/json": components["schemas"]["AuthResponse"];
117 |                     };
118 |                 };
119 |                 401: components["responses"]["UnauthorizedError"];
120 |             };
121 |         };
122 |         delete?: never;
123 |         options?: never;
124 |         head?: never;
125 |         patch?: never;
126 |         trace?: never;
127 |     };
128 |     "/boards": {
129 |         parameters: {
130 |             query?: never;
131 |             header?: never;
132 |             path?: never;
133 |             cookie?: never;
134 |         };
135 |         /** Get all boards for current user */
136 |         get: {
137 |             parameters: {
138 |                 query?: {
139 |                     page?: number;
140 |                     limit?: number;
141 |                     sort?: "createdAt" | "updatedAt" | "lastOpenedAt" | "name";
142 |                     isFavorite?: boolean;
143 |                     search?: string;
144 |                 };
145 |                 header?: never;
146 |                 path?: never;
147 |                 cookie?: never;
148 |             };
149 |             requestBody?: never;
150 |             responses: {
151 |                 /** @description List of boards */
152 |                 200: {
153 |                     headers: {
154 |                         [name: string]: unknown;
155 |                     };
156 |                     content: {
157 |                         "application/json": components["schemas"]["BoardsList"];
158 |                     };
159 |                 };
160 |                 401: components["responses"]["UnauthorizedError"];
161 |             };
162 |         };
163 |         put?: never;
164 |         /** Create a new board */
165 |         post: {
166 |             parameters: {
167 |                 query?: never;
168 |                 header?: never;
169 |                 path?: never;
170 |                 cookie?: never;
171 |             };
172 |             requestBody?: never;
173 |             responses: {
174 |                 /** @description Board created successfully */
175 |                 201: {
176 |                     headers: {
177 |                         [name: string]: unknown;
178 |                     };
179 |                     content: {
180 |                         "application/json": components["schemas"]["Board"];
181 |                     };
182 |                 };
183 |                 401: components["responses"]["UnauthorizedError"];
184 |             };
185 |         };
186 |         delete?: never;
187 |         options?: never;
188 |         head?: never;
189 |         patch?: never;
190 |         trace?: never;
191 |     };
192 |     "/boards/{boardId}": {
193 |         parameters: {
194 |             query?: never;
195 |             header?: never;
196 |             path?: never;
197 |             cookie?: never;
198 |         };
199 |         /** Get a board by id */
200 |         get: {
201 |             parameters: {
202 |                 query?: never;
203 |                 header?: never;
204 |                 path: {
205 |                     boardId: string;
206 |                 };
207 |                 cookie?: never;
208 |             };
209 |             requestBody?: never;
210 |             responses: {
211 |                 /** @description Board */
212 |                 200: {
213 |                     headers: {
214 |                         [name: string]: unknown;
215 |                     };
216 |                     content: {
217 |                         "application/json": components["schemas"]["Board"];
218 |                     };
219 |                 };
220 |                 401: components["responses"]["UnauthorizedError"];
221 |                 404: components["responses"]["NotFoundError"];
222 |             };
223 |         };
224 |         put?: never;
225 |         post?: never;
226 |         /** Delete a board */
227 |         delete: {
228 |             parameters: {
229 |                 query?: never;
230 |                 header?: never;
231 |                 path: {
232 |                     boardId: string;
233 |                 };
234 |                 cookie?: never;
235 |             };
236 |             requestBody?: never;
237 |             responses: {
238 |                 /** @description Board deleted successfully */
239 |                 204: {
240 |                     headers: {
241 |                         [name: string]: unknown;
242 |                     };
243 |                     content?: never;
244 |                 };
245 |                 401: components["responses"]["UnauthorizedError"];
246 |                 404: components["responses"]["NotFoundError"];
247 |             };
248 |         };
249 |         options?: never;
250 |         head?: never;
251 |         patch?: never;
252 |         trace?: never;
253 |     };
254 |     "/boards/{boardId}/favorite": {
255 |         parameters: {
256 |             query?: never;
257 |             header?: never;
258 |             path?: never;
259 |             cookie?: never;
260 |         };
261 |         get?: never;
262 |         /** Update a board favorite */
263 |         put: {
264 |             parameters: {
265 |                 query?: never;
266 |                 header?: never;
267 |                 path: {
268 |                     boardId: string;
269 |                 };
270 |                 cookie?: never;
271 |             };
272 |             requestBody: {
273 |                 content: {
274 |                     "application/json": components["schemas"]["UpdateBoardFavorite"];
275 |                 };
276 |             };
277 |             responses: {
278 |                 /** @description Board created successfully */
279 |                 201: {
280 |                     headers: {
281 |                         [name: string]: unknown;
282 |                     };
283 |                     content: {
284 |                         "application/json": components["schemas"]["Board"];
285 |                     };
286 |                 };
287 |                 401: components["responses"]["UnauthorizedError"];
288 |             };
289 |         };
290 |         post?: never;
291 |         delete?: never;
292 |         options?: never;
293 |         head?: never;
294 |         patch?: never;
295 |         trace?: never;
296 |     };
297 |     "/boards/{boardId}/rename": {
298 |         parameters: {
299 |             query?: never;
300 |             header?: never;
301 |             path?: never;
302 |             cookie?: never;
303 |         };
304 |         get?: never;
305 |         /** Rename a board */
306 |         put: {
307 |             parameters: {
308 |                 query?: never;
309 |                 header?: never;
310 |                 path: {
311 |                     boardId: string;
312 |                 };
313 |                 cookie?: never;
314 |             };
315 |             requestBody: {
316 |                 content: {
317 |                     "application/json": components["schemas"]["RenameBoard"];
318 |                 };
319 |             };
320 |             responses: {
321 |                 /** @description Board created successfully */
322 |                 201: {
323 |                     headers: {
324 |                         [name: string]: unknown;
325 |                     };
326 |                     content: {
327 |                         "application/json": components["schemas"]["Board"];
328 |                     };
329 |                 };
330 |                 401: components["responses"]["UnauthorizedError"];
331 |             };
332 |         };
333 |         post?: never;
334 |         delete?: never;
335 |         options?: never;
336 |         head?: never;
337 |         patch?: never;
338 |         trace?: never;
339 |     };
340 | }
341 | export type webhooks = Record<string, never>;
342 | export interface components {
343 |     schemas: {
344 |         LoginRequest: {
345 |             /** Format: email */
346 |             email: string;
347 |             /** Format: password */
348 |             password: string;
349 |         };
350 |         User: {
351 |             id: string;
352 |             /** Format: email */
353 |             email: string;
354 |         };
355 |         AuthResponse: {
356 |             accessToken: string;
357 |             user: components["schemas"]["User"];
358 |         };
359 |         Error: {
360 |             message: string;
361 |             code: string;
362 |         };
363 |         RegisterRequest: {
364 |             /** Format: email */
365 |             email: string;
366 |             /** Format: password */
367 |             password: string;
368 |         };
369 |         Board: {
370 |             id: string;
371 |             name: string;
372 |             /** Format: date-time */
373 |             createdAt: string;
374 |             /** Format: date-time */
375 |             updatedAt: string;
376 |             /** Format: date-time */
377 |             lastOpenedAt: string;
378 |             isFavorite: boolean;
379 |         };
380 |         BoardsList: {
381 |             list: components["schemas"]["Board"][];
382 |             total: number;
383 |             totalPages: number;
384 |         };
385 |         UpdateBoardFavorite: {
386 |             isFavorite: boolean;
387 |         };
388 |         RenameBoard: {
389 |             name: string;
390 |         };
391 |     };
392 |     responses: {
393 |         /** @description Unauthorized */
394 |         UnauthorizedError: {
395 |             headers: {
396 |                 [name: string]: unknown;
397 |             };
398 |             content: {
399 |                 "application/json": components["schemas"]["Error"];
400 |             };
401 |         };
402 |         /** @description Bad request */
403 |         BadRequestError: {
404 |             headers: {
405 |                 [name: string]: unknown;
406 |             };
407 |             content: {
408 |                 "application/json": components["schemas"]["Error"];
409 |             };
410 |         };
411 |         /** @description Resource not found */
412 |         NotFoundError: {
413 |             headers: {
414 |                 [name: string]: unknown;
415 |             };
416 |             content: {
417 |                 "application/json": components["schemas"]["Error"];
418 |             };
419 |         };
420 |     };
421 |     parameters: never;
422 |     requestBodies: never;
423 |     headers: never;
424 |     pathItems: never;
425 | }
426 | export type $defs = Record<string, never>;
427 | export type operations = Record<string, never>;
428 | 


--------------------------------------------------------------------------------