create-stitchkit 0.1.0

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

@@ -0,0 +1,81 @@
+'use client';
+
+/**
+ * Button - Универсальный компонент кнопки
+ *
+ * Варианты: default, primary, ghost, outline, destructive
+ * Размеры: sm, md, lg, icon
+ * Поддержка: loading, disabled, asChild (для Link)
+ *
+ * Powered by Radix UI Slot & CVA for Polymorphism
+ */
+
+import { Slot } from '@radix-ui/react-slot';
+import type { VariantProps } from 'class-variance-authority';
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from './button-variants';
+import { Spinner } from './spinner';
+
+// ==========================================================================
+// Styles with CVA
+// ==========================================================================
+
+// ==========================================================================
+// Types
+// ==========================================================================
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+}
+
+// ==========================================================================
+// Component
+// ==========================================================================
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      loading = false,
+      children,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+    const replacesChildrenWhileLoading = size === 'icon' || size === 'icon-md';
+
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        {...props}
+      >
+        {loading ? (
+          replacesChildrenWhileLoading ? (
+            <Spinner />
+          ) : (
+            <>
+              <Spinner />
+              {children}
+            </>
+          )
+        ) : (
+          children
+        )}
+      </Comp>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/template/packages/frontend/src/components/ui/card-deck.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+export interface CardDeckProps<T> {
+  /** Массив элементов для отображения */
+  items: T[];
+  /** Рендер-функция для каждой карточки */
+  renderCard: (item: T, index: number) => ReactNode;
+  /** Отступ между картами в px (отрицательный для наложения) @default -10 */
+  overlap?: number;
+  /** Шаг наклона в градусах @default 3 */
+  rotationStep?: number;
+  /** Индекс центральной карты (по умолчанию — середина массива) */
+  centerIndex?: number;
+  /** Дополнительные классы для контейнера */
+  className?: string;
+  /** Уникальный ключ для элемента */
+  keyExtractor?: (item: T, index: number) => string | number;
+}
+
+/**
+ * Универсальный компонент "колода карт" с эффектом веера.
+ *
+ * Автоматически рассчитывает наклон каждой карты относительно центра.
+ * Карты накладываются друг на друга с заданным overlap.
+ *
+ * @example
+ * ```tsx
+ * <CardDeck
+ *   items={projects}
+ *   renderCard={(project) => <ProjectCard project={project} />}
+ *   overlap={-12}
+ *   rotationStep={4}
+ * />
+ * ```
+ */
+export function CardDeck<T>({
+  items,
+  renderCard,
+  overlap = -10,
+  rotationStep = 3,
+  centerIndex,
+  className,
+  keyExtractor,
+}: CardDeckProps<T>) {
+  // Центр по умолчанию — середина массива
+  const center = centerIndex ?? Math.floor((items.length - 1) / 2);
+
+  return (
+    <div className={`flex justify-center ${className ?? ''}`}>
+      {items.map((item, index) => {
+        const rotation = (index - center) * rotationStep;
+        const key = keyExtractor ? keyExtractor(item, index) : index;
+
+        return (
+          <div
+            key={key}
+            className='shrink-0 cursor-pointer group'
+            style={{ marginLeft: index === 0 ? 0 : overlap }}
+          >
+            <div
+              className='relative transition-[filter,opacity] duration-200 ease-in-out group-hover:z-50 group-hover:brightness-105'
+              style={{ transform: `rotate(${rotation}deg)` }}
+            >
+              {renderCard(item, index)}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+// ==========================================================================
+// Card Root
+// ==========================================================================
+
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-xl border bg-card text-card-foreground', className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = 'Card';
+
+// ==========================================================================
+// Card Header
+// ==========================================================================
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-4', className)} {...props} />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+// ==========================================================================
+// Card Title
+// ==========================================================================
+
+interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  level?: 2 | 3 | 4;
+}
+
+const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ className, level = 3, ...props }, ref) => {
+    const titleClassName = cn('font-medium font-display tracking-tight', className);
+    if (level === 2) return <h2 ref={ref} className={titleClassName} {...props} />;
+    if (level === 4) return <h4 ref={ref} className={titleClassName} {...props} />;
+    return <h3 ref={ref} className={titleClassName} {...props} />;
+  },
+);
+CardTitle.displayName = 'CardTitle';
+
+// ==========================================================================
+// Card Description
+// ==========================================================================
+
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
+CardDescription.displayName = 'CardDescription';
+
+// ==========================================================================
+// Card Content
+// ==========================================================================
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
+  ),
+);
+CardContent.displayName = 'CardContent';
+
+// ==========================================================================
+// Card Footer
+// ==========================================================================
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/template/packages/frontend/src/components/ui/charts/area-chart.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import type { Locale } from 'date-fns';
+import { format } from 'date-fns';
+import type { ReactNode } from 'react';
+import {
+  Area,
+  AreaChart as RechartsAreaChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from 'recharts';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface AreaConfig {
+  key: string;
+  label: string;
+  color: string;
+  gradientOpacity?: { start: number; end: number };
+}
+
+export interface AreaChartDataPoint {
+  day: string;
+  [key: string]: string | number;
+}
+
+export interface AreaChartProps {
+  data: AreaChartDataPoint[];
+  areas: AreaConfig[];
+  height?: number;
+  dateLocale: Locale;
+  dateFormat?: string;
+  tooltipDateFormat?: string;
+  renderTooltip?: (props: TooltipRenderProps) => ReactNode;
+}
+
+export interface TooltipRenderProps {
+  date: string;
+  values: { key: string; label: string; value: number; color: string }[];
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const TOOLTIP_CLASS =
+  'bg-card border border-border rounded-lg p-3 shadow-lg animate-in fade-in duration-150';
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function AreaChart({
+  data,
+  areas,
+  height = 280,
+  dateLocale,
+  dateFormat = 'd MMM',
+  tooltipDateFormat = 'd MMMM yyyy',
+  renderTooltip,
+}: AreaChartProps) {
+  return (
+    <div className='w-full **:outline-none'>
+      <ResponsiveContainer width='100%' height={height}>
+        <RechartsAreaChart data={data} margin={{ top: 10, right: 0, left: 0, bottom: 20 }}>
+          <defs>
+            {areas.map((area) => (
+              <linearGradient
+                key={area.key}
+                id={`gradient-${area.key}`}
+                x1='0'
+                y1='0'
+                x2='0'
+                y2='1'
+              >
+                <stop
+                  offset='0%'
+                  stopColor={area.color}
+                  stopOpacity={area.gradientOpacity?.start ?? 0.4}
+                />
+                <stop
+                  offset='100%'
+                  stopColor={area.color}
+                  stopOpacity={area.gradientOpacity?.end ?? 0.05}
+                />
+              </linearGradient>
+            ))}
+          </defs>
+
+          <XAxis
+            dataKey='day'
+            axisLine={false}
+            tickLine={false}
+            tick={{ fontSize: 12, fill: 'var(--muted-foreground)' }}
+            dy={5}
+            tickFormatter={(value) =>
+              format(new Date(value), dateFormat, { locale: dateLocale })
+            }
+          />
+
+          <Tooltip
+            cursor={false}
+            isAnimationActive={false}
+            offset={20}
+            wrapperStyle={{ zIndex: 10, outline: 'none' }}
+            content={({ active, payload, label }) => {
+              if (!active || !payload?.length) return null;
+
+              const labelValue =
+                typeof label === 'string' || typeof label === 'number' ? label : '';
+              const formattedDate = format(new Date(labelValue), tooltipDateFormat, {
+                locale: dateLocale,
+              });
+
+              const values = areas.map((area) => ({
+                key: area.key,
+                label: area.label,
+                value: (() => {
+                  const value = payload.find((point) => point.dataKey === area.key)?.value;
+                  return typeof value === 'number' ? value : 0;
+                })(),
+                color: area.color,
+              }));
+
+              if (renderTooltip) {
+                return renderTooltip({ date: formattedDate, values });
+              }
+
+              return (
+                <div className={TOOLTIP_CLASS}>
+                  <p className='font-medium text-sm mb-2'>{formattedDate}</p>
+                  <div className='space-y-1 text-xs'>
+                    {values.map(({ key, label, value, color }) => (
+                      <div key={key} className='flex items-center gap-2'>
+                        <div
+                          className='w-2.5 h-2.5 rounded-full'
+                          style={{ backgroundColor: color }}
+                        />
+                        <span className='text-muted-foreground'>{label}:</span>
+                        <span className='font-medium'>{value.toLocaleString()}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              );
+            }}
+          />
+
+          {areas.map((area) => (
+            <Area
+              key={area.key}
+              type='monotone'
+              dataKey={area.key}
+              stroke={area.color}
+              strokeWidth={2}
+              fill={`url(#gradient-${area.key})`}
+              name={area.label}
+            />
+          ))}
+        </RechartsAreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/template/packages/frontend/src/components/ui/charts/index.ts

@@ -0,0 +1,7 @@
+export type {
+  AreaChartDataPoint,
+  AreaChartProps,
+  AreaConfig,
+  TooltipRenderProps,
+} from './area-chart';
+export { AreaChart } from './area-chart';

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

@@ -0,0 +1,133 @@
+'use client';
+
+import type { CheckedState } from '@radix-ui/react-checkbox';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { IconCheck, IconMinus } from '@tabler/icons-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { type ComponentPropsWithoutRef, type ComponentRef, forwardRef, useId } from 'react';
+import { cn } from '@/lib/utils';
+
+// Базовые пропсы без checked/onCheckedChange
+type BaseCheckboxProps = Omit<
+  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+  'checked' | 'onCheckedChange'
+>;
+
+/**
+ * Внутренний компонент - вся UI логика в одном месте
+ */
+interface CheckboxBaseProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  label?: string;
+}
+
+const CheckboxBase = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxBaseProps>(
+  ({ className, checked, label, id, ...props }, ref) => {
+    const generatedId = useId();
+    const checkboxId = id || generatedId;
+    const isChecked = checked === true;
+    const isIndeterminate = checked === 'indeterminate';
+
+    return (
+      <div className='flex items-center gap-2'>
+        <CheckboxPrimitive.Root
+          ref={ref}
+          id={checkboxId}
+          checked={checked}
+          className={cn(
+            'relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-md border transition-colors',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+            'disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none',
+            'data-[state=checked]:border-primary data-[state=checked]:bg-primary',
+            'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
+            'data-[state=unchecked]:border-border data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-primary/50',
+            className,
+          )}
+          {...props}
+        >
+          <AnimatePresence initial={false}>
+            {(isChecked || isIndeterminate) && (
+              <CheckboxPrimitive.Indicator forceMount>
+                <motion.span
+                  initial={{ scale: 0, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0, opacity: 0 }}
+                  transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+                >
+                  {isIndeterminate ? (
+                    <IconMinus
+                      size={14}
+                      stroke={3}
+                      className='text-primary-foreground transition-colors'
+                    />
+                  ) : (
+                    <IconCheck
+                      size={14}
+                      stroke={3}
+                      className='text-primary-foreground transition-colors'
+                    />
+                  )}
+                </motion.span>
+              </CheckboxPrimitive.Indicator>
+            )}
+          </AnimatePresence>
+        </CheckboxPrimitive.Root>
+        {label && (
+          <label
+            htmlFor={checkboxId}
+            className={cn(
+              'text-sm cursor-pointer select-none',
+              props.disabled && 'cursor-not-allowed opacity-50',
+            )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  },
+);
+
+CheckboxBase.displayName = 'CheckboxBase';
+
+/**
+ * Обычный Checkbox - boolean API (90% случаев)
+ */
+interface CheckboxProps extends BaseCheckboxProps {
+  label?: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const Checkbox = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ onCheckedChange, ...props }, ref) => {
+    // Адаптер: фильтруем indeterminate, возвращаем только boolean
+    const handleChange = (state: CheckedState) => {
+      if (state !== 'indeterminate' && onCheckedChange) {
+        onCheckedChange(state);
+      }
+    };
+
+    return <CheckboxBase ref={ref} onCheckedChange={handleChange} {...props} />;
+  },
+);
+
+Checkbox.displayName = 'Checkbox';
+
+/**
+ * TriStateCheckbox - для редких случаев (таблицы, деревья)
+ */
+interface TriStateCheckboxProps extends BaseCheckboxProps {
+  label?: string;
+  checked?: CheckedState;
+  onCheckedChange?: (checked: CheckedState) => void;
+}
+
+export const TriStateCheckbox = forwardRef<
+  ComponentRef<typeof CheckboxPrimitive.Root>,
+  TriStateCheckboxProps
+>((props, ref) => {
+  // Прямой проброс - без фильтрации
+  return <CheckboxBase ref={ref} {...props} />;
+});
+
+TriStateCheckbox.displayName = 'TriStateCheckbox';

package/template/packages/frontend/src/components/ui/confirmation-modal.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { AnimatePresence, motion, type Transition } from 'framer-motion';
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from './button';
+
+export interface ConfirmationModalProps {
+  /** Controlled open state */
+  isOpen: boolean;
+  /** Called when modal should close */
+  onClose: () => void;
+  /** Called when user confirms the action */
+  onConfirm: () => void;
+  /** Modal title */
+  title: string;
+  /** Description text */
+  description?: string;
+  /** Custom content instead of description */
+  children?: ReactNode;
+  /** Text for cancel button */
+  cancelText?: string;
+  /** Text for confirm button */
+  confirmText?: string;
+  /** Visual variant for confirm button */
+  variant?: 'default' | 'destructive';
+  /** Loading state for confirm button */
+  isLoading?: boolean;
+}
+
+const BACKDROP_TRANSITION: Transition = { duration: 0.2 };
+const MODAL_OPEN_TRANSITION: Transition = { type: 'spring', stiffness: 400, damping: 30 };
+const MODAL_CLOSE_TRANSITION: Transition = { type: 'tween', duration: 0.15 };
+
+const ANIMATION = {
+  backdrop: BACKDROP_TRANSITION,
+  modal: {
+    open: MODAL_OPEN_TRANSITION,
+    close: MODAL_CLOSE_TRANSITION,
+  },
+};
+
+export function ConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  children,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  variant = 'default',
+  isLoading = false,
+}: ConfirmationModalProps) {
+  return (
+    <AlertDialogPrimitive.Root open={isOpen} onOpenChange={onClose}>
+      <AnimatePresence>
+        {isOpen && (
+          <AlertDialogPrimitive.Portal forceMount>
+            {/* Backdrop */}
+            <AlertDialogPrimitive.Overlay asChild>
+              <motion.div
+                className='fixed inset-0 z-60 bg-overlay backdrop-blur-sm'
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={ANIMATION.backdrop}
+              />
+            </AlertDialogPrimitive.Overlay>
+
+            {/* Content */}
+            <AlertDialogPrimitive.Content asChild>
+              <div className='fixed inset-0 z-70 flex items-center justify-center p-4'>
+                <motion.div
+                  className={cn(
+                    'w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl outline-none',
+                  )}
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{
+                    opacity: 1,
+                    scale: 1,
+                    transition: ANIMATION.modal.open,
+                  }}
+                  exit={{
+                    opacity: 0,
+                    scale: 0.95,
+                    transition: ANIMATION.modal.close,
+                  }}
+                >
+                  {/* Title */}
+                  <AlertDialogPrimitive.Title className='text-xl font-semibold'>
+                    {title}
+                  </AlertDialogPrimitive.Title>
+
+                  {/* Description or custom content */}
+                  {description && (
+                    <AlertDialogPrimitive.Description className='mt-2 text-muted-foreground'>
+                      {description}
+                    </AlertDialogPrimitive.Description>
+                  )}
+                  {children && <div className='mt-2'>{children}</div>}
+
+                  {/* Actions */}
+                  <div className='mt-6 flex justify-end gap-3'>
+                    <AlertDialogPrimitive.Cancel asChild>
+                      <Button variant='outline' disabled={isLoading}>
+                        {cancelText}
+                      </Button>
+                    </AlertDialogPrimitive.Cancel>
+                    <AlertDialogPrimitive.Action asChild>
+                      <Button
+                        variant={variant === 'destructive' ? 'destructive' : 'default'}
+                        onClick={onConfirm}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? 'Loading...' : confirmText}
+                      </Button>
+                    </AlertDialogPrimitive.Action>
+                  </div>
+                </motion.div>
+              </div>
+            </AlertDialogPrimitive.Content>
+          </AlertDialogPrimitive.Portal>
+        )}
+      </AnimatePresence>
+    </AlertDialogPrimitive.Root>
+  );
+}