@umituz/web-design-system 3.1.21 → 4.0.0

package/src/presentation/organisms/AlertDialog.tsx

@@ -1,181 +0,0 @@
-/**
- * AlertDialog Component
- * @description Alert dialog component for critical confirmations using @radix-ui/react-alert-dialog
- * @example
- * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@umituz/web-design-system/organisms';
- *
- * <AlertDialog>
- *   <AlertDialogTrigger asChild>
- *     <Button>Open Alert Dialog</Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogHeader>
- *       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
- *       <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
- *     </AlertDialogHeader>
- *     <AlertDialogFooter>
- *       <AlertDialogCancel>Cancel</AlertDialogCancel>
- *       <AlertDialogAction>Continue</AlertDialogAction>
- *     </AlertDialogFooter>
- *   </AlertDialogContent>
- * </AlertDialog>
- */
-
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "../../infrastructure/utils";
-
-// Import buttonVariants from the atoms folder
-// We need to define it here since Button uses cva
-import { cva } from "class-variance-authority";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-  }
-);
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.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}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

package/src/presentation/organisms/Calendar.tsx

@@ -1,79 +0,0 @@
-/**
- * Calendar Component
- * @description Date picker component using react-day-picker
- * @example
- * import { Calendar } from '@umituz/web-design-system/organisms';
- *
- * <Calendar
- *   mode="single"
- *   selected={date}
- *   onSelect={setDate}
- *   className="rounded-md border"
- * />
- */
-
-import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
-
-import { cn } from "../../infrastructure/utils";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        Chevron: ({ orientation, ...props }) =>
-          orientation === 'left' ? (
-            <ChevronLeft className="h-4 w-4" {...props} />
-          ) : (
-            <ChevronRight className="h-4 w-4" {...props} />
-          ),
-      }}
-      {...props}
-    />
-  );
-}
-Calendar.displayName = "Calendar";
-
-export { Calendar };

package/src/presentation/organisms/Comments.tsx

@@ -1,103 +0,0 @@
-/**
- * Comments Component (Organism)
- * @description Giscus-based GitHub Discussions comment widget
- */
-
-import { useEffect, useRef } from 'react';
-import { cn } from '../../infrastructure/utils';
-import type { BaseProps } from '../../domain/types';
-
-export interface GiscusConfig {
-  repo: string;
-  repoId: string;
-  category?: string;
-  mapping?: 'pathname' | 'url' | 'title' | 'og:title' | 'custom';
-  term?: string;
-  strict?: '0' | '1';
-  reactionsEnabled?: '0' | '1';
-  emitMetadata?: '0' | '1';
-  inputPosition?: 'top' | 'bottom';
-  theme?: 'light' | 'dark' | 'dark_dimmed' | 'transparent_dark' | 'preferred_color_scheme';
-  lang?: string;
-}
-
-export interface CommentsProps extends BaseProps {
-  slug: string;
-  config?: Partial<GiscusConfig>;
-  title?: string;
-  description?: string;
-}
-
-declare global {
-  interface Window {
-    giscus?: {
-      render: (element: HTMLElement, config: Record<string, unknown>) => void;
-    };
-  }
-}
-
-export const Comments = ({
-  slug,
-  config,
-  title = 'Comments',
-  description = 'Join the discussion! Share your thoughts and questions below.',
-  className,
-}: CommentsProps) => {
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    // Load Giscus script dynamically
-    const script = document.createElement('script');
-    script.src = 'https://giscus.app/client.js';
-    script.async = true;
-    script.crossOrigin = 'anonymous';
-
-    script.addEventListener('load', () => {
-      if (window.giscus && rootRef.current) {
-        const defaultConfig: GiscusConfig = {
-          repo: 'umituz/umituz-apps',
-          repoId: 'R_kgDONJ7RJw',
-          category: 'Announcements',
-          mapping: 'pathname',
-          term: slug,
-          strict: '0',
-          reactionsEnabled: '1',
-          emitMetadata: '0',
-          inputPosition: 'top',
-          theme: 'dark',
-          lang: 'en',
-          ...config,
-        };
-
-        window.giscus.render(rootRef.current, defaultConfig as unknown as Record<string, unknown>);
-      }
-    });
-
-    document.head.appendChild(script);
-
-    return () => {
-      // Only remove if script exists and is in DOM
-      if (script.parentNode === document.head) {
-        document.head.removeChild(script);
-      }
-    };
-  }, [slug, config]);
-
-  return (
-    <div className={cn('mt-8', className)}>
-      <div className="bg-bg-card rounded-xl p-6 border border-border transition-theme">
-        <h3 className="text-xl font-bold text-text-primary mb-4">{title}</h3>
-        <p className="text-text-secondary text-sm mb-4">
-          {description}
-        </p>
-        <div
-          ref={rootRef}
-          id="giscus-comments"
-          className="min-h-[200px]"
-        />
-      </div>
-    </div>
-  );
-};
-
-Comments.displayName = 'Comments';

package/src/presentation/organisms/ConfirmDialog.tsx

@@ -1,97 +0,0 @@
-/**
- * ConfirmDialog Component (Organism)
- * @description Confirmation dialog for destructive actions
- * Reduces boilerplate in delete/remove confirmation modals
- */
-
-import { forwardRef, type ReactNode } from 'react';
-import { cn } from '../../infrastructure/utils';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from './Dialog';
-import { Button } from '../atoms';
-import { AlertTriangle } from 'lucide-react';
-import type { BaseProps } from '../../domain/types';
-
-export interface ConfirmDialogProps extends BaseProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  message?: string;
-  description?: string;
-  onConfirm: () => void | Promise<void>;
-  loading?: boolean;
-  confirmText?: string;
-  cancelText?: string;
-  variant?: 'default' | 'destructive';
-  icon?: ReactNode;
-}
-
-export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(
-  (
-    {
-      className,
-      open,
-      onOpenChange,
-      title,
-      message,
-      description,
-      onConfirm,
-      loading = false,
-      confirmText = 'Confirm',
-      cancelText = 'Cancel',
-      variant = 'destructive',
-      icon,
-      ...props
-    },
-    ref
-  ) => {
-    const handleConfirm = async () => {
-      if (!loading) {
-        await onConfirm();
-        onOpenChange(false);
-      }
-    };
-
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className={cn('sm:max-w-[425px]', className)} ref={ref} {...props}>
-          <DialogHeader>
-            <div className="flex items-center gap-3">
-              {icon || (
-                variant === 'destructive' && (
-                  <div className="w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center">
-                    <AlertTriangle className="h-5 w-5 text-destructive" />
-                  </div>
-                )
-              )}
-              <DialogTitle>{title}</DialogTitle>
-            </div>
-            {description && <DialogDescription>{description}</DialogDescription>}
-          </DialogHeader>
-          {message && (
-            <div className="py-4">
-              <p className="text-sm text-muted-foreground">{message}</p>
-            </div>
-          )}
-          <DialogFooter>
-            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
-              {cancelText}
-            </Button>
-            <Button variant={variant} onClick={handleConfirm} disabled={loading}>
-              {loading && <span className="mr-2 h-4 w-4 animate-spin">⟳</span>}
-              {confirmText}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-);
-
-ConfirmDialog.displayName = 'ConfirmDialog';