@umituz/web-design-system 5.3.1 → 6.0.0

package/src/presentation/molecules/index.ts

@@ -1,4 +1,3 @@
-
 export { FormField } from './FormField';
 export type { FormFieldProps } from './FormField';
 
@@ -17,7 +16,18 @@ export type { ChipProps } from './Chip';
 export { Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './Select';
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './Select';
 
 export { Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';
@@ -64,3 +74,16 @@ export type { TagInputProps } from './TagInput';
 
 export { MarkdownText } from './MarkdownText';
 export type { MarkdownTextProps } from './MarkdownText';
+
+// New Productivity Molecules
+export { PasswordInput } from './PasswordInput';
+export type { PasswordInputProps } from './PasswordInput';
+
+export { SearchInput } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';
+
+export { ConfirmButton } from './ConfirmButton';
+export type { ConfirmButtonProps } from './ConfirmButton';
+
+export { Toolbar } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';

package/src/presentation/organisms/DescriptionList.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { Card } from './Card';
+import { Badge, type BadgeVariant } from '../atoms/Badge';
+import { CopyButton } from '../atoms/CopyButton';
+import { cn } from '../../infrastructure/utils';
+
+export interface DescriptionItem {
+  key?: string;
+  label: string;
+  value: React.ReactNode;
+  copyable?: boolean;
+  copyText?: string;
+  badge?: string;
+  badgeVariant?: BadgeVariant;
+  hint?: string;
+}
+
+export interface DescriptionListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  items: DescriptionItem[];
+  columns?: 1 | 2;
+  bordered?: boolean;
+}
+
+export const DescriptionList = React.forwardRef<HTMLDivElement, DescriptionListProps>(
+  (
+    {
+      title,
+      description,
+      action,
+      items,
+      columns = 1,
+      bordered = true,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const content = (
+      <div
+        ref={ref}
+        className={cn('w-full flex flex-col gap-4', className)}
+        {...props}
+      >
+        {(title || action || description) && (
+          <div className="flex items-start justify-between gap-4 pb-3 border-b border-border">
+            <div>
+              {title && (
+                <h3 className="text-base font-semibold text-foreground tracking-tight">
+                  {title}
+                </h3>
+              )}
+              {description && (
+                <p className="text-sm text-muted-foreground mt-0.5">
+                  {description}
+                </p>
+              )}
+            </div>
+            {action && <div className="shrink-0">{action}</div>}
+          </div>
+        )}
+
+        <dl
+          className={cn(
+            'grid gap-x-6 gap-y-3',
+            columns === 2 ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'
+          )}
+        >
+          {items.map((item, idx) => {
+            const rawCopyText = item.copyText ?? (typeof item.value === 'string' ? item.value : '');
+
+            return (
+              <div
+                key={item.key ?? idx}
+                className="flex items-center justify-between py-2 border-b border-border/60 last:border-0 gap-3"
+              >
+                <dt className="text-sm font-medium text-muted-foreground shrink-0">
+                  {item.label}
+                  {item.hint && (
+                    <span className="block text-xs font-normal text-muted-foreground/75">
+                      {item.hint}
+                    </span>
+                  )}
+                </dt>
+                <dd className="text-sm font-medium text-foreground flex items-center gap-2 text-right break-all">
+                  {item.value}
+                  {item.badge && (
+                    <Badge variant={item.badgeVariant ?? 'secondary'} size="sm">
+                      {item.badge}
+                    </Badge>
+                  )}
+                  {item.copyable && rawCopyText && (
+                    <CopyButton text={rawCopyText} size="xs" />
+                  )}
+                </dd>
+              </div>
+            );
+          })}
+        </dl>
+      </div>
+    );
+
+    if (bordered) {
+      return <Card className="p-5">{content}</Card>;
+    }
+
+    return content;
+  }
+);
+
+DescriptionList.displayName = 'DescriptionList';

package/src/presentation/organisms/StatsGrid.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { Card } from './Card';
+import { Skeleton } from '../atoms/Skeleton';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+
+export interface StatItem {
+  id?: string;
+  title: string;
+  value: string | number;
+  change?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  icon?: React.ReactNode;
+  description?: string;
+}
+
+export interface StatsGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  stats: StatItem[];
+  columns?: 2 | 3 | 4;
+  loading?: boolean;
+}
+
+const colStyles = {
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+};
+
+export const StatsGrid = React.forwardRef<HTMLDivElement, StatsGridProps>(
+  ({ stats, columns = 4, loading = false, className, ...props }, ref) => {
+    if (loading) {
+      return (
+        <div
+          ref={ref}
+          className={cn('grid gap-4 w-full', colStyles[columns], className)}
+          {...props}
+        >
+          {Array.from({ length: columns }).map((_, i) => (
+            <Card key={i} className="p-5 flex flex-col gap-3">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-8 w-32" />
+              <Skeleton className="h-3 w-40" />
+            </Card>
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn('grid gap-4 w-full', colStyles[columns], className)}
+        {...props}
+      >
+        {stats.map((stat, idx) => {
+          const isUp = stat.trend === 'up';
+          const isDown = stat.trend === 'down';
+
+          return (
+            <Card
+              key={stat.id ?? idx}
+              className="p-5 flex flex-col justify-between transition-shadow hover:shadow-md"
+            >
+              <div className="flex items-start justify-between gap-2">
+                <span className="text-sm font-medium text-muted-foreground truncate">
+                  {stat.title}
+                </span>
+                {stat.icon && (
+                  <div className="size-9 rounded-lg bg-accent/60 flex items-center justify-center text-foreground shrink-0 [&_svg]:size-4">
+                    {stat.icon}
+                  </div>
+                )}
+              </div>
+
+              <div className="mt-3 flex items-baseline justify-between gap-2">
+                <div className="text-2xl font-bold tracking-tight text-foreground">
+                  {stat.value}
+                </div>
+
+                {stat.change && (
+                  <span
+                    className={cn(
+                      'inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full',
+                      isUp && 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+                      isDown && 'bg-rose-500/10 text-rose-600 dark:text-rose-400',
+                      !isUp && !isDown && 'bg-accent text-muted-foreground'
+                    )}
+                  >
+                    {isUp && <TrendingUp className="size-3" />}
+                    {isDown && <TrendingDown className="size-3" />}
+                    {!isUp && !isDown && <Minus className="size-3" />}
+                    <span>{stat.change}</span>
+                  </span>
+                )}
+              </div>
+
+              {stat.description && (
+                <p className="mt-2 text-xs text-muted-foreground line-clamp-1">
+                  {stat.description}
+                </p>
+              )}
+            </Card>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+StatsGrid.displayName = 'StatsGrid';

package/src/presentation/organisms/index.ts

@@ -1,4 +1,3 @@
-
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
 export type { CardProps, CardHeaderProps } from './Card';
 
@@ -13,7 +12,7 @@ export {
   TableRow,
   TableHead,
   TableCell,
-  TableCaption
+  TableCaption,
 } from './Table';
 export type { TableProps } from './Table';
 
@@ -36,10 +35,10 @@ export {
 } from './Dialog';
 
 export { CommandPalette } from './CommandPalette';
+export type { CommandPaletteProps, CommandGroup, CommandItem } from './CommandPalette';
 
 export { ErrorBoundary } from './ErrorBoundary';
 export type { ErrorBoundaryProps } from './ErrorBoundary';
-export type { CommandPaletteProps, CommandGroup, CommandItem } from './CommandPalette';
 
 export { Breadcrumbs } from './Breadcrumb';
 export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumb';
@@ -112,7 +111,7 @@ export {
 export { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
 
 export { ToastProvider, useToast } from './Toaster';
-export type { ToastKind, ToastOptions } from './Toaster';
+export type { ToastKind, ToastOptions, ToastShorthandOptions } from './Toaster';
 
 export { KeyValueList } from './KeyValueList';
 export type { KeyValueListProps, KeyValueItem } from './KeyValueList';
@@ -149,8 +148,6 @@ export type { PhotoGalleryProps, PhotoTile } from './PhotoGallery';
 export { Lightbox } from './Lightbox';
 export type { LightboxProps } from './Lightbox';
 
-export type { ToastShorthandOptions } from './Toaster';
-
 export { Timeline } from './Timeline';
 export type { TimelineProps, TimelineItem, TimelineTone } from './Timeline';
 
@@ -181,3 +178,10 @@ export type { PlanPickerProps, PlanPickerPlan, PlanPickerCycle } from './PlanPic
 
 export { CoverArt } from './CoverArt';
 export type { CoverArtProps } from './CoverArt';
+
+// New Productivity Organisms
+export { StatsGrid } from './StatsGrid';
+export type { StatsGridProps, StatItem } from './StatsGrid';
+
+export { DescriptionList } from './DescriptionList';
+export type { DescriptionListProps, DescriptionItem } from './DescriptionList';

package/src/presentation/templates/CrudPageTemplate.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Breadcrumbs, type BreadcrumbItem } from '../organisms/Breadcrumb';
+import { cn } from '../../infrastructure/utils';
+
+export interface CrudPageTemplateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  breadcrumbItems?: BreadcrumbItem[];
+  actions?: React.ReactNode;
+  stats?: React.ReactNode;
+  toolbar?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const CrudPageTemplate = React.forwardRef<HTMLDivElement, CrudPageTemplateProps>(
+  (
+    {
+      title,
+      description,
+      breadcrumbItems,
+      actions,
+      stats,
+      toolbar,
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('w-full flex flex-col gap-6 p-4 sm:p-6 lg:p-8', className)}
+        {...props}
+      >
+        {/* Breadcrumbs */}
+        {breadcrumbItems && breadcrumbItems.length > 0 && (
+          <div>
+            <Breadcrumbs items={breadcrumbItems} />
+          </div>
+        )}
+
+        {/* Page Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground">
+              {title}
+            </h1>
+            {description && (
+              <p className="text-sm text-muted-foreground mt-1">{description}</p>
+            )}
+          </div>
+          {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+        </div>
+
+        {/* Optional Stats Grid */}
+        {stats && <div>{stats}</div>}
+
+        {/* Optional Search / Filter Toolbar */}
+        {toolbar && <div>{toolbar}</div>}
+
+        {/* Main Content (Table / List / Cards) */}
+        <div className="w-full">{children}</div>
+      </div>
+    );
+  }
+);
+
+CrudPageTemplate.displayName = 'CrudPageTemplate';

package/src/presentation/templates/SettingsLayout.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { cn } from '../../infrastructure/utils';
+
+export interface SettingsNavItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  description?: string;
+  badge?: string;
+  disabled?: boolean;
+}
+
+export interface SettingsLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  navItems: SettingsNavItem[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  actions?: React.ReactNode;
+}
+
+export const SettingsLayout = React.forwardRef<HTMLDivElement, SettingsLayoutProps>(
+  (
+    {
+      title = 'Ayarlar',
+      description,
+      navItems,
+      activeId,
+      onSelect,
+      actions,
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('w-full max-w-6xl mx-auto flex flex-col gap-6 p-4 sm:p-6 lg:p-8', className)}
+        {...props}
+      >
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-border">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
+            {description && (
+              <p className="text-sm text-muted-foreground mt-1">{description}</p>
+            )}
+          </div>
+          {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+        </div>
+
+        {/* Content Layout */}
+        <div className="flex flex-col lg:flex-row gap-8 items-start">
+          {/* Navigation Sidebar */}
+          <nav
+            aria-label="Settings navigation"
+            className="w-full lg:w-64 shrink-0 flex flex-row lg:flex-col gap-1 overflow-x-auto pb-2 lg:pb-0"
+          >
+            {navItems.map((item) => {
+              const isActive = item.id === activeId;
+
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  disabled={item.disabled}
+                  onClick={() => onSelect(item.id)}
+                  className={cn(
+                    'flex items-center gap-3 px-3.5 py-2.5 rounded-lg text-sm font-medium transition-colors text-left shrink-0 whitespace-nowrap lg:whitespace-normal',
+                    isActive
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+                    item.disabled && 'opacity-50 pointer-events-none'
+                  )}
+                >
+                  {item.icon && (
+                    <span className="shrink-0 size-4 flex items-center justify-center [&_svg]:size-4">
+                      {item.icon}
+                    </span>
+                  )}
+                  <span className="flex-1 truncate">{item.label}</span>
+                  {item.badge && (
+                    <span className="text-xs px-2 py-0.5 rounded-full bg-accent text-accent-foreground ml-auto">
+                      {item.badge}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </nav>
+
+          {/* Main Panel Content */}
+          <main className="flex-1 w-full min-w-0">{children}</main>
+        </div>
+      </div>
+    );
+  }
+);
+
+SettingsLayout.displayName = 'SettingsLayout';

package/src/presentation/templates/index.ts

@@ -1,4 +1,3 @@
-
 export { Form, FormActions } from './Form';
 export type { FormProps } from './Form';
 
@@ -19,3 +18,10 @@ export type { ProjectSkeletonProps } from './ProjectSkeleton';
 
 export { ResponsiveContainer } from './ResponsiveContainer';
 export type { ResponsiveContainerProps, ResponsiveSize } from './ResponsiveContainer';
+
+// New Productivity Templates
+export { SettingsLayout } from './SettingsLayout';
+export type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout';
+
+export { CrudPageTemplate } from './CrudPageTemplate';
+export type { CrudPageTemplateProps } from './CrudPageTemplate';