feat: integrate ReUI components and update MCP configuration

- Added ReUI configuration to .mcp.json and .cursor/mcp.json for component integration. - Updated pnpm-lock.yaml with new dependencies including react-phone-number-input and adjustments to existing packages. - Enhanced SKILL.md documentation for ReUI to clarify usage and features. - Removed unused components (ChartCard, DataGridCard, etc.) to streamline the codebase. - Adjusted domain-related components and filters for improved functionality and UI consistency. Co-authored-by: Cursor <[email protected]>
2026-07-10 00:37:40 +07:00
parent 59163bfab5
commit 29e57666e0
225 changed files with 21908 additions and 4476 deletions
@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react'
+import { Link, Outlet, useRouterState } from '@tanstack/react-router'
+import { SettingsIcon } from 'lucide-react'
+
+import { useIsMobile } from '@cfdm/ui/hooks/use-mobile'
+import { cn } from '@cfdm/ui/lib/utils'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@cfdm/ui/components/tabs'
+import { PageShell } from '@/components/page-shell'
+
+export interface SettingsTabConfig {
+  id: string
+  to: string
+  label: string
+  icon?: ReactNode
+}
+
+const DEFAULT_TABS: SettingsTabConfig[] = [
+  {
+    id: 'integrations',
+    to: '/settings/integrations',
+    label: 'Интеграции',
+    icon: <SettingsIcon className="size-4" aria-hidden="true" />,
+  },
+]
+
+interface SettingsShellProps {
+  title?: string
+  description?: string
+  tabs?: SettingsTabConfig[]
+  children?: ReactNode
+}
+
+export function SettingsShell({
+  title = 'Настройки',
+  description = 'Интеграции и конфигурация приложения',
+  tabs = DEFAULT_TABS,
+  children,
+}: SettingsShellProps) {
+  const isMobile = useIsMobile()
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const activeTab =
+    tabs.find((tab) => pathname.startsWith(tab.to))?.id ?? tabs[0]?.id ?? ''
+
+  return (
+    <PageShell>
+      <div className="w-full max-w-4xl space-y-6">
+        <header className="px-1">
+          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+          <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+            {description}
+          </p>
+        </header>
+
+        <Tabs value={activeTab} orientation={isMobile ? 'horizontal' : 'vertical'}>
+          <div
+            className={cn(
+              'flex gap-6',
+              isMobile ? 'flex-col' : 'flex-row items-start',
+            )}
+          >
+            <TabsList
+              variant="line"
+              className={cn(
+                'h-auto w-full justify-start gap-1 bg-transparent p-0',
+                !isMobile && 'w-48 shrink-0 flex-col items-stretch',
+              )}
+            >
+              {tabs.map((tab) => (
+                <TabsTrigger
+                  key={tab.id}
+                  value={tab.id}
+                  className={cn(
+                    'justify-start gap-2 px-3 py-2',
+                    !isMobile && 'w-full',
+                  )}
+                  render={<Link to={tab.to} />}
+                >
+                  {tab.icon}
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+
+            <div className="min-w-0 flex-1">
+              {tabs.map((tab) => (
+                <TabsContent key={tab.id} value={tab.id} className="mt-0">
+                  {children ?? <Outlet />}
+                </TabsContent>
+              ))}
+            </div>
+          </div>
+        </Tabs>
+      </div>
+    </PageShell>
+  )
+}