@umituz/web-design-system 1.5.1 → 1.7.2

package/src/presentation/organisms/QuickActionCard.tsx

@@ -0,0 +1,110 @@
+/**
+ * QuickActionCard Component (Organism)
+ * @description Card component for quick navigation actions with icon
+ */
+
+import { forwardRef } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, SizeVariant } from '../../domain/types';
+
+export interface QuickActionCardProps extends BaseProps {
+  label: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  iconColor?: string;
+  iconBgColor?: string;
+  onClick?: () => void;
+  href?: string;
+  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+}
+
+const sizeStyles = {
+  sm: 'p-3 gap-2',
+  md: 'p-4 gap-3',
+  lg: 'p-5 gap-4',
+};
+
+const iconSizeStyles = {
+  sm: 'w-8 h-8',
+  md: 'w-10 h-10',
+  lg: 'w-12 h-12',
+};
+
+const iconInnerSizeStyles = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+const labelSizeStyles = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+export const QuickActionCard = forwardRef<HTMLAnchorElement | HTMLDivElement, QuickActionCardProps>(
+  (
+    {
+      className,
+      label,
+      icon: Icon,
+      iconColor = 'text-white',
+      iconBgColor = 'bg-primary',
+      onClick,
+      href,
+      size = 'md',
+      target = '_self',
+      ...props
+    },
+    ref
+  ) => {
+    const content = (
+      <>
+        {Icon && (
+          <div className={cn(iconSizeStyles[size], 'rounded-lg flex items-center justify-center flex-shrink-0', iconBgColor)}>
+            <Icon className={cn(iconInnerSizeStyles[size], iconColor)} />
+          </div>
+        )}
+        <span className={cn('font-medium text-foreground group-hover:text-primary transition-colors', labelSizeStyles[size])}>
+          {label}
+        </span>
+      </>
+    );
+
+    const baseClasses = cn(
+      'bg-card border border-border rounded-xl',
+      'flex items-center',
+      'hover:border-primary/50 transition-colors group',
+      sizeStyles[size],
+      className
+    );
+
+    if (href) {
+      return (
+        <a
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          href={href}
+          target={target}
+          className={baseClasses}
+          onClick={onClick}
+          {...props}
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <div
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={baseClasses}
+        onClick={onClick}
+        {...props}
+      >
+        {content}
+      </div>
+    );
+  }
+);
+
+QuickActionCard.displayName = 'QuickActionCard';

package/src/presentation/organisms/Sheet.tsx

@@ -0,0 +1,135 @@
+/**
+ * Sheet Component (Organism)
+ * @description Slide-over sheet dialog (Shadcn/ui compatible)
+ */
+
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../infrastructure/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const getSheetVariants = (side: 'top' | 'bottom' | 'left' | 'right') => {
+  const base = 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500';
+
+  const sideVariants = {
+    top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+    bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+    left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+    right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+  };
+
+  return cn(base, sideVariants[side]);
+};
+
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(getSheetVariants(side), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

package/src/presentation/organisms/StatCard.tsx

@@ -0,0 +1,161 @@
+/**
+ * StatCard Component (Organism)
+ * @description Enhanced metric card with progress bar and target tracking
+ * Combines functionality of KPICard and StatsCard from main app
+ */
+
+import { forwardRef, type ComponentType } from 'react';
+import { cn } from '../../infrastructure/utils';
+import { Card, CardContent } from './Card';
+import { Progress } from '../atoms';
+import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import type { BaseProps, ColorVariant, SizeVariant } from '../../domain/types';
+
+export interface StatCardProps extends BaseProps {
+  title: string;
+  value: string | number;
+  icon?: ComponentType<{ className?: string }>;
+  iconColor?: string;
+  trend?: {
+    value: number;
+    label?: string;
+  };
+  target?: {
+    value: string;
+    progress: number;
+  };
+  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+  variant?: 'default' | 'gradient' | 'elevated';
+  trendValueFormatter?: (value: number) => string;
+  onClick?: () => void;
+  changeLabel?: string; // For backward compatibility with StatsCard
+}
+
+const sizeStyles = {
+  sm: 'p-3',
+  md: 'p-4',
+  lg: 'p-6',
+};
+
+const valueSizeStyles = {
+  sm: 'text-lg',
+  md: 'text-2xl',
+  lg: 'text-3xl',
+};
+
+const iconSizeStyles = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+};
+
+const labelSizeStyles = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+const iconBgSizeStyles = {
+  sm: 'w-8 h-8',
+  md: 'w-12 h-12',
+  lg: 'w-16 h-16',
+};
+
+export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(
+  (
+    {
+      className,
+      title,
+      value,
+      icon: Icon,
+      iconColor = 'text-primary',
+      trend,
+      target,
+      size = 'md',
+      variant = 'default',
+      trendValueFormatter = (v) => `${v > 0 ? '+' : ''}${Math.abs(v).toFixed(1)}%`,
+      onClick,
+      changeLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const isPositive = trend?.value !== undefined && trend.value >= 0;
+    const GrowthIcon = isPositive ? ArrowUpRight : ArrowDownRight;
+    const trendColor = isPositive ? 'text-green-600' : 'text-red-600';
+    const iconBgColor = isPositive ? 'text-green-500' : 'text-red-500';
+
+    const cardVariant = variant === 'elevated' ? 'elevated' : 'default';
+
+    return (
+      <Card
+        ref={ref}
+        variant={cardVariant}
+        className={cn(
+          'transition-all duration-300',
+          variant === 'gradient' && 'bg-gradient-to-br from-white to-gray-50 hover:shadow-lg border-0 shadow-md',
+          onClick && 'cursor-pointer hover:shadow-lg hover:border-primary/50',
+          className
+        )}
+        onClick={onClick}
+        {...props}
+      >
+        <CardContent className={cn(sizeStyles[size])}>
+          <div className="flex items-center justify-between mb-4">
+            {Icon && (
+              <div
+                className={cn(
+                  'rounded-xl flex items-center justify-center',
+                  variant === 'gradient' && 'bg-gradient-to-br from-teal-500 to-cyan-500',
+                  variant !== 'gradient' && `bg-${iconColor.split('-')[1]}-500/10`,
+                  iconBgSizeStyles[size]
+                )}
+              >
+                <Icon className={cn(iconSizeStyles[size], variant === 'gradient' ? 'text-white' : iconColor)} />
+              </div>
+            )}
+            {trend && (
+              <span
+                className={cn(
+                  'text-sm font-medium px-2 py-1 rounded-full',
+                  isPositive ? 'text-green-700 bg-green-100' : 'text-red-700 bg-red-100'
+                )}
+              >
+                {changeLabel || trendValueFormatter(trend.value)}
+              </span>
+            )}
+          </div>
+
+          <div className="space-y-3">
+            <div>
+              <p className={cn('font-bold text-gray-900', valueSizeStyles[size])}>
+                {typeof value === 'number' ? value.toLocaleString() : value}
+              </p>
+              <p className={cn('text-muted-foreground', labelSizeStyles[size])}>{title}</p>
+            </div>
+
+            {target && (
+              <div className="space-y-1">
+                <div className="flex justify-between text-xs">
+                  <span className="text-muted-foreground">Target: {target.value}</span>
+                  <span className="text-teal-600">{target.progress}%</span>
+                </div>
+                <Progress value={target.progress} className="h-2" />
+              </div>
+            )}
+
+            {trend && variant !== 'gradient' && (
+              <div className="flex items-center mt-1">
+                <GrowthIcon className={cn('h-3 w-3 mr-1', iconBgColor)} />
+                <p className={cn('text-xs', trendColor)}>{trendValueFormatter(trend.value)}</p>
+                {trend.label && <p className="text-xs text-muted-foreground ml-1">{trend.label}</p>}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+);
+
+StatCard.displayName = 'StatCard';

package/src/presentation/organisms/index.ts

@@ -33,8 +33,62 @@ export type { TabsProps, Tab } from './Tabs';
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
 
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './Dialog';
+
 export { Breadcrumbs } from './Breadcrumb';
 export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumb';
 
+export { Popover, PopoverTrigger, PopoverContent } from './Popover';
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from './Sheet';
+
 export { Footer } from './Footer';
 export type { FooterProps } from './Footer';
+
+export { MetricCard } from './MetricCard';
+export type { MetricCardProps } from './MetricCard';
+
+export { QuickActionCard } from './QuickActionCard';
+export type { QuickActionCardProps } from './QuickActionCard';
+
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
+
+export { LoadingState } from './LoadingState';
+export type { LoadingStateProps } from './LoadingState';
+
+export { DataTable } from './DataTable';
+export type { DataTableProps, Column } from './DataTable';
+
+export { StatCard } from './StatCard';
+export type { StatCardProps } from './StatCard';
+
+export { FormModal } from './FormModal';
+export type { FormModalProps } from './FormModal';
+
+export { ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';