create-stitchkit 0.1.0

package/template/packages/frontend/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export const Switch = forwardRef<
+  ComponentRef<typeof SwitchPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted',
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm transition-transform',
+        'data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]',
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+
+Switch.displayName = 'Switch';

package/template/packages/frontend/src/components/ui/table.tsx

@@ -0,0 +1,106 @@
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type TdHTMLAttributes,
+  type ThHTMLAttributes,
+} from 'react';
+import { cn } from '@/lib/utils';
+
+const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+  ),
+);
+Table.displayName = 'Table';
+
+const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+  ),
+);
+TableBody.displayName = 'TableBody';
+
+const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        'h-10 px-3 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableHead.displayName = 'TableHead';
+
+const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn(
+        'p-3 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableCell.displayName = 'TableCell';
+
+const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};

package/template/packages/frontend/src/components/ui/tabs.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+/**
+ * Tabs - Компонент табов на основе Radix UI
+ *
+ * Композиция примитивов для максимальной гибкости.
+ * Плавная анимация активного таба через Framer Motion.
+ *
+ * Использование:
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ * </Tabs>
+ */
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { motion } from 'framer-motion';
+import type { ComponentPropsWithoutRef, ComponentRef, CSSProperties } from 'react';
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from 'react';
+import { cn } from '@/lib/utils';
+
+// ==========================================================================
+// Context для layoutId анимации
+// ==========================================================================
+
+interface TabsContext {
+  layoutId: string;
+  activeValue?: string;
+  disableAnimation?: boolean;
+}
+
+const TabsAnimationContext = createContext<TabsContext>({
+  layoutId: 'tabs-indicator',
+  activeValue: undefined,
+  disableAnimation: false,
+});
+
+// ==========================================================================
+// Tabs Root
+// ==========================================================================
+
+interface TabsProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+  /** Уникальный ID для анимации (нужен если несколько Tabs на странице) */
+  layoutId?: string;
+  /** Отключить анимацию sliding indicator */
+  disableAnimation?: boolean;
+}
+
+const Tabs = forwardRef<ComponentRef<typeof TabsPrimitive.Root>, TabsProps>(function Tabs(
+  {
+    className,
+    layoutId: layoutIdProp,
+    disableAnimation = false,
+    value,
+    defaultValue,
+    onValueChange,
+    ...props
+  },
+  ref,
+) {
+  // Если layoutId не задан — генерируем стабильный уникальный, чтобы несколько Tabs
+  // на странице не "склеивались" по layout-анимации.
+  const reactId = useId();
+  const layoutId = layoutIdProp ?? `tabs-indicator-${reactId}`;
+
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState<string | undefined>(defaultValue);
+
+  const handleValueChange = useCallback(
+    (nextValue: string) => {
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const activeValue = isControlled ? value : uncontrolledValue;
+
+  const contextValue = useMemo(
+    () => ({ layoutId, activeValue, disableAnimation }),
+    [layoutId, activeValue, disableAnimation],
+  );
+
+  // Важно: Radix Tabs поддерживает controlled и uncontrolled режимы. Чтобы не
+  // передать одновременно value и defaultValue — задаём пропы условно.
+  const rootProps: ComponentPropsWithoutRef<typeof TabsPrimitive.Root> = {
+    ...props,
+    className: cn('flex flex-col gap-2', className),
+    onValueChange: handleValueChange,
+  };
+
+  if (activeValue !== undefined) rootProps.value = activeValue;
+
+  return (
+    <TabsAnimationContext.Provider value={contextValue}>
+      <TabsPrimitive.Root ref={ref} {...rootProps} />
+    </TabsAnimationContext.Provider>
+  );
+});
+
+// ==========================================================================
+// TabsList
+// ==========================================================================
+
+const TabsList = forwardRef<
+  ComponentRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(function TabsList({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn('inline-flex items-center gap-1 rounded-xl bg-muted p-1 w-fit', className)}
+      {...props}
+    />
+  );
+});
+
+// ==========================================================================
+// TabsTrigger
+// ==========================================================================
+
+const TabsTrigger = forwardRef<
+  ComponentRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(function TabsTrigger({ className, children, value, ...props }, ref) {
+  const { layoutId, activeValue, disableAnimation } = useContext(TabsAnimationContext);
+  const isActive = value === activeValue;
+  const indicatorClassName = 'absolute inset-0 rounded-lg bg-background shadow-sm';
+  const indicatorStyle: CSSProperties = { pointerEvents: 'none' };
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      value={value}
+      className={cn(
+        'relative flex-1 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer whitespace-nowrap',
+        'text-muted-foreground hover:text-foreground',
+        'data-[state=active]:text-foreground',
+        className,
+      )}
+      {...props}
+    >
+      {isActive &&
+        (disableAnimation ? (
+          <div aria-hidden='true' className={indicatorClassName} style={indicatorStyle} />
+        ) : (
+          <motion.div
+            aria-hidden='true'
+            layoutId={layoutId}
+            className={indicatorClassName}
+            transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+            style={indicatorStyle}
+          />
+        ))}
+      <span className='relative z-10'>{children}</span>
+    </TabsPrimitive.Trigger>
+  );
+});
+
+// ==========================================================================
+// TabsContent
+// ==========================================================================
+
+const TabsContent = forwardRef<
+  ComponentRef<typeof TabsPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(function TabsContent({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+});
+
+Tabs.displayName = 'Tabs';
+TabsList.displayName = 'TabsList';
+TabsTrigger.displayName = 'TabsTrigger';
+TabsContent.displayName = 'TabsContent';
+
+// ==========================================================================
+// Exports
+// ==========================================================================
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/template/packages/frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    className={cn(
+      'min-h-28 w-full resize-y rounded-lg border border-border bg-background px-4 py-3',
+      'placeholder:text-muted-foreground focus:border-primary focus:outline-none',
+      'transition-colors',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+
+Textarea.displayName = 'Textarea';

package/template/packages/frontend/src/components/ui/toaster.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { IconAlertTriangle, IconCheck, IconInfoCircle, IconX } from '@tabler/icons-react';
+import { useThemeValue } from '@wrksz/themes/client/use-theme-value';
+import type { ReactNode } from 'react';
+import { type ExternalToast, Toaster as SonnerToaster, toast as sonnerToast } from 'sonner';
+
+type ToastPosition = 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
+
+interface ToastOptions {
+  position?: ToastPosition;
+  duration?: number;
+}
+
+const getResponsivePosition = (): ToastPosition => {
+  if (typeof window === 'undefined') return 'bottom-center';
+  return window.innerWidth >= 1024 ? 'bottom-right' : 'bottom-center';
+};
+
+const getBaseOptions = (options?: ToastOptions): ExternalToast => ({
+  position: options?.position ?? getResponsivePosition(),
+  duration: options?.duration,
+});
+
+export const toast = {
+  success: (message: ReactNode, options?: ToastOptions) =>
+    sonnerToast.success(message, getBaseOptions(options)),
+  error: (message: ReactNode, options?: ToastOptions) =>
+    sonnerToast.error(message, getBaseOptions(options)),
+  info: (message: ReactNode, options?: ToastOptions) =>
+    sonnerToast.info(message, getBaseOptions(options)),
+  warning: (message: ReactNode, options?: ToastOptions) =>
+    sonnerToast.warning(message, getBaseOptions(options)),
+  loading: (message: ReactNode, options?: ToastOptions) =>
+    sonnerToast.loading(message, getBaseOptions(options)),
+  custom: sonnerToast.custom,
+  dismiss: sonnerToast.dismiss,
+};
+
+export function Toaster() {
+  const theme = useThemeValue<'light' | 'dark' | 'system'>({
+    light: 'light',
+    dark: 'dark',
+    default: 'system',
+  });
+
+  return (
+    <SonnerToaster
+      theme={theme}
+      position='bottom-right'
+      icons={{
+        success: <IconCheck size={18} stroke={2.5} />,
+        error: <IconX size={18} stroke={2.5} />,
+        info: <IconInfoCircle size={18} stroke={2} />,
+        warning: <IconAlertTriangle size={18} stroke={2} />,
+      }}
+      toastOptions={{
+        unstyled: true,
+        classNames: {
+          toast:
+            'flex items-center gap-3 w-full p-4 rounded-xl shadow-lg font-sans font-medium text-sm border',
+          title: 'font-medium',
+          description: 'text-sm opacity-90',
+          success: 'bg-success text-success-foreground border-success-foreground/10',
+          error: 'bg-destructive text-destructive-foreground border-destructive-foreground/10',
+          info: 'bg-card text-card-foreground border-border [&>svg]:text-info',
+          warning: 'bg-warning text-warning-foreground border-warning-foreground/10',
+        },
+      }}
+    />
+  );
+}

package/template/packages/frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+const Tooltip = TooltipPrimitive.Root;
+const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = forwardRef<
+  ComponentRef<typeof TooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      collisionPadding={12}
+      className={cn(
+        'z-50 max-w-xs overflow-hidden rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground shadow-md',
+        'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/template/packages/frontend/src/env.ts

@@ -0,0 +1,21 @@
+import path from 'node:path';
+import { createEnv } from '@t3-oss/env-nextjs';
+import { config } from 'dotenv';
+import { z } from 'zod';
+
+config({ path: path.resolve(process.cwd(), '../../.env'), quiet: true });
+
+export const env = createEnv({
+  server: { INTERNAL_API_URL: z.url(), WEB_PORT: z.coerce.number().int().positive() },
+  client: {
+    NEXT_PUBLIC_API_URL: z.url(),
+    NEXT_PUBLIC_WEB_URL: z.url(),
+  },
+  runtimeEnv: {
+    INTERNAL_API_URL: process.env.INTERNAL_API_URL,
+    WEB_PORT: process.env.WEB_PORT,
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+    NEXT_PUBLIC_WEB_URL: process.env.NEXT_PUBLIC_WEB_URL,
+  },
+  emptyStringAsUndefined: true,
+});

package/template/packages/frontend/src/features/data-table/components/column-helpers.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import type { Icon } from '@tabler/icons-react';
+import { IconDots } from '@tabler/icons-react';
+import type { ColumnDef } from '@tanstack/react-table';
+import {
+  Button,
+  Checkbox,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  TriStateCheckbox,
+} from '@/components/ui';
+import { formatDateTime } from '@/lib/utils';
+import type { dataTableFeatures } from '../table-features';
+import { SortableHeader } from './sortable-header';
+
+/**
+ * Creates a select column with checkbox for row selection
+ */
+export function createSelectColumn<T extends object>(): ColumnDef<
+  typeof dataTableFeatures,
+  T,
+  unknown
+> {
+  return {
+    id: 'select',
+    header: ({ table }) => (
+      <TriStateCheckbox
+        checked={
+          table.getIsAllPageRowsSelected()
+            ? true
+            : table.getIsSomePageRowsSelected()
+              ? 'indeterminate'
+              : false
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(value === true)}
+        aria-label='Select all'
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label='Select row'
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  };
+}
+
+/**
+ * Creates a date/time column with sortable header
+ */
+export function createDateColumn<T extends object>(
+  accessorKey: keyof T & string,
+  headerLabel: string,
+): ColumnDef<typeof dataTableFeatures, T, unknown> {
+  return {
+    accessorKey,
+    header: ({ column }) => <SortableHeader column={column}>{headerLabel}</SortableHeader>,
+    cell: ({ row }) => {
+      const value = row.getValue(accessorKey);
+      if (!value) return null;
+
+      if (!(value instanceof Date) && typeof value !== 'string') return null;
+      const { date, time } = formatDateTime(value);
+      return (
+        <div className='flex flex-col'>
+          <span className='text-sm text-muted-foreground'>{date}</span>
+          <span className='text-xs text-muted-foreground/70'>{time}</span>
+        </div>
+      );
+    },
+  };
+}
+
+export interface ActionItem<T extends object> {
+  icon: Icon;
+  label: string;
+  onClick?: (row: T) => void;
+  variant?: 'default' | 'destructive';
+}
+
+function ActionsCell<T extends object>({
+  row,
+  getActions,
+}: {
+  row: T;
+  getActions: (row: T) => ActionItem<T>[];
+}) {
+  const actions = getActions(row);
+
+  return (
+    <div className='flex justify-end pr-2'>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant='ghost' size='icon' className='h-7 w-7'>
+            <IconDots size={14} />
+            <span className='sr-only'>Открыть меню</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='end'>
+          {actions.map((action) => (
+            <DropdownMenuItem
+              key={action.label}
+              onClick={() => action.onClick?.(row)}
+              className={
+                action.variant === 'destructive'
+                  ? 'text-destructive focus:text-destructive'
+                  : undefined
+              }
+            >
+              <action.icon size={14} />
+              {action.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+/**
+ * Creates an actions column with dropdown menu
+ */
+export function createActionsColumn<T extends object>(
+  getActions: (row: T) => ActionItem<T>[],
+): ColumnDef<typeof dataTableFeatures, T, unknown> {
+  return {
+    id: 'actions',
+    cell: ({ row }) => <ActionsCell row={row.original} getActions={getActions} />,
+  };
+}