@m5kdev/web-ui 0.1.3 → 0.1.5

package/src/components/FileDropzone.tsx

@@ -1,120 +0,0 @@
-import { File, Upload, X } from "lucide-react";
-import { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { Button } from "#components/ui/button";
-import { Progress } from "#components/ui/progress";
-import { cn } from "#utils";
-
-interface FileDropzoneProps {
-  onUploadComplete?: (filePath: string) => void;
-  className?: string;
-}
-
-export function FileDropzone({ onUploadComplete, className }: FileDropzoneProps) {
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [isUploading, setIsUploading] = useState(false);
-
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    if (acceptedFiles.length > 0) {
-      setSelectedFile(acceptedFiles[0]);
-    }
-  }, []);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    accept: {
-      "image/jpeg": [],
-      "image/png": [],
-      "image/webp": [],
-      "image/jpg": [],
-    },
-    maxFiles: 1,
-  });
-
-  const uploadFile = async () => {
-    if (!selectedFile) return;
-
-    setIsUploading(true);
-    setUploadProgress(0);
-
-    const formData = new FormData();
-    formData.append("file", selectedFile);
-
-    try {
-      const response = await fetch("/api/upload/image", {
-        method: "POST",
-        body: formData,
-        // Note: Content-Type is automatically set for FormData
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-      onUploadComplete?.(data.filePath);
-      setSelectedFile(null);
-      setUploadProgress(0);
-    } catch (error) {
-      console.error("Upload error:", error);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const removeFile = () => {
-    setSelectedFile(null);
-    setUploadProgress(0);
-  };
-
-  return (
-    <div className={cn("w-full max-w-xl", className)}>
-      <div
-        {...getRootProps()}
-        className={cn(
-          "border-2 border-dashed rounded-lg p-6 cursor-pointer transition-colors",
-          isDragActive ? "border-primary bg-primary/5" : "border-gray-300 hover:border-primary",
-          selectedFile && "border-primary"
-        )}
-      >
-        <input {...getInputProps()} />
-        <div className="flex flex-col items-center justify-center space-y-2 text-center">
-          {selectedFile ? (
-            <>
-              <File className="h-8 w-8 text-primary" />
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-gray-600">{selectedFile.name}</span>
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    removeFile();
-                  }}
-                  className="p-1 hover:bg-gray-100 rounded-full"
-                >
-                  <X className="h-4 w-4 text-gray-500" />
-                </button>
-              </div>
-            </>
-          ) : (
-            <>
-              <Upload className="h-8 w-8 text-gray-400" />
-              <p className="text-sm text-gray-600">Drag & drop an image here, or click to select</p>
-              <p className="text-xs text-gray-500">Supports JPG, PNG, and WebP</p>
-            </>
-          )}
-        </div>
-      </div>
-
-      {selectedFile && (
-        <div className="mt-4 space-y-4">
-          {isUploading && <Progress value={uploadProgress} className="h-2 w-full" />}
-          <Button onClick={uploadFile} disabled={isUploading} className="w-full">
-            {isUploading ? "Uploading..." : "Upload File"}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/MultiSelectDropdown.tsx

@@ -1,233 +0,0 @@
-import { ChevronDown, RotateCcw } from "lucide-react";
-import * as React from "react";
-
-import { Button } from "#components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "#components/ui/dropdown-menu";
-import { cn } from "#utils";
-
-interface MultiSelectOption {
-  label: string;
-  icon?: React.ReactNode;
-  value: string;
-  group?: string;
-}
-
-interface MultiSelectDropdownProps {
-  options: MultiSelectOption[];
-  selectedValues: string[];
-  onValueChange: (selectedValues: string[]) => void;
-  placeholder?: React.ReactNode;
-  label?: string;
-  className?: string;
-  triggerClassName?: string;
-  disabled?: boolean;
-  maxDisplayCount?: number;
-  multiSelectLabel?: string;
-  trigger?: React.ReactNode;
-  resetButton?: "bottom" | "top";
-  resetLabel?: React.ReactNode;
-  separateGroups?: boolean;
-}
-
-const MultiSelectDropdown = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuTrigger>,
-  MultiSelectDropdownProps
->(
-  (
-    {
-      options,
-      selectedValues,
-      onValueChange,
-      placeholder = "Select items...",
-      label,
-      className,
-      triggerClassName,
-      trigger,
-      multiSelectLabel,
-      disabled = false,
-      maxDisplayCount = 3,
-      resetButton = "bottom",
-      resetLabel = "Reset",
-      separateGroups = false,
-      ...props
-    },
-    ref
-  ) => {
-    const handleValueChange = (value: string, checked: boolean) => {
-      if (checked) {
-        onValueChange([...selectedValues, value]);
-      } else {
-        onValueChange(selectedValues.filter((v) => v !== value));
-      }
-    };
-
-    const handleReset = () => {
-      onValueChange([]);
-    };
-
-    const getDisplayText = () => {
-      if (selectedValues.length === 0) {
-        return placeholder;
-      }
-
-      const selectedLabels = options
-        .filter((option) => selectedValues.includes(option.value))
-        .map((option) => option.label);
-
-      if (multiSelectLabel && selectedLabels.length > 1) {
-        return multiSelectLabel;
-      }
-
-      if (selectedLabels.length <= maxDisplayCount) {
-        return selectedLabels.join(", ");
-      }
-
-      return `${selectedLabels.slice(0, maxDisplayCount).join(", ")} (+${
-        selectedLabels.length - maxDisplayCount
-      } more)`;
-    };
-
-    const groupedOptions = React.useMemo(() => {
-      const groups: Record<string, MultiSelectOption[]> = {};
-      const ungrouped: MultiSelectOption[] = [];
-
-      options.forEach((option) => {
-        if (option.group) {
-          if (!groups[option.group]) {
-            groups[option.group] = [];
-          }
-          groups[option.group].push(option);
-        } else {
-          ungrouped.push(option);
-        }
-      });
-
-      return { groups, ungrouped };
-    }, [options]);
-
-    return (
-      <div className={cn("w-full", className)}>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              ref={ref}
-              variant="outline"
-              className={cn(
-                "w-full justify-between text-left font-normal",
-                selectedValues.length === 0 && "text-muted-foreground",
-                triggerClassName
-              )}
-              disabled={disabled}
-              {...props}
-            >
-              {trigger || (
-                <>
-                  <span className="truncate">{getDisplayText()}</span>
-                  <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </>
-              )}
-            </Button>
-          </DropdownMenuTrigger>
-
-          <DropdownMenuContent
-            className="w-full min-w-[var(--radix-dropdown-menu-trigger-width)]"
-            align="start"
-          >
-            {resetButton && resetButton === "top" && (
-              <>
-                <DropdownMenuItem
-                  onClick={handleReset}
-                  disabled={selectedValues.length === 0}
-                  onSelect={(event) => event.preventDefault()}
-                  className="cursor-pointer text-muted-foreground hover:text-foreground"
-                >
-                  {resetLabel || (
-                    <>
-                      <RotateCcw className="mr-2 h-4 w-4" />
-                      Reset
-                    </>
-                  )}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-              </>
-            )}
-            {label && (
-              <>
-                <DropdownMenuLabel>{label}</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-              </>
-            )}
-            {Object.entries(groupedOptions.groups).map(([groupName, groupOptions], groupIndex) => (
-              <DropdownMenuGroup key={groupName}>
-                {groupIndex > 0 && separateGroups && <DropdownMenuSeparator />}
-                <DropdownMenuLabel className="text-xs font-semibold text-muted-foreground px-2 py-1.5">
-                  {groupName}
-                </DropdownMenuLabel>
-                {groupOptions.map((option) => (
-                  <DropdownMenuCheckboxItem
-                    key={option.value}
-                    checked={selectedValues.includes(option.value)}
-                    onCheckedChange={(checked) => handleValueChange(option.value, checked)}
-                    onSelect={(event) => event.preventDefault()}
-                    className="cursor-pointer"
-                  >
-                    {option.icon && <span className="mr-2">{option.icon}</span>}
-                    {option.label}
-                  </DropdownMenuCheckboxItem>
-                ))}
-              </DropdownMenuGroup>
-            ))}
-            {groupedOptions.ungrouped.length > 0 && (
-              <DropdownMenuGroup>
-                {Object.keys(groupedOptions.groups).length > 0 && <DropdownMenuSeparator />}
-                {groupedOptions.ungrouped.map((option) => (
-                  <DropdownMenuCheckboxItem
-                    key={option.value}
-                    checked={selectedValues.includes(option.value)}
-                    onCheckedChange={(checked) => handleValueChange(option.value, checked)}
-                    onSelect={(event) => event.preventDefault()}
-                    className="cursor-pointer"
-                  >
-                    {option.label}
-                  </DropdownMenuCheckboxItem>
-                ))}
-              </DropdownMenuGroup>
-            )}
-            {resetButton && resetButton === "bottom" && (
-              <>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={handleReset}
-                  disabled={selectedValues.length === 0}
-                  onSelect={(event) => event.preventDefault()}
-                  className="cursor-pointer text-muted-foreground hover:text-foreground"
-                >
-                  {resetLabel || (
-                    <>
-                      <RotateCcw className="mr-2 h-4 w-4" />
-                      Reset
-                    </>
-                  )}
-                </DropdownMenuItem>
-              </>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    );
-  }
-);
-
-MultiSelectDropdown.displayName = "MultiSelectDropdown";
-
-export { MultiSelectDropdown };
-export type { MultiSelectOption, MultiSelectDropdownProps };

package/src/components/PageAlert.tsx

@@ -1,121 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from "lucide-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-
-import { cn } from "#utils";
-
-const pageAlertVariants = cva(
-  "relative w-full border-b px-4 py-3 text-sm transition-all duration-300 ease-in-out",
-  {
-    variants: {
-      variant: {
-        default: "bg-background border-border text-foreground",
-        info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950/50 dark:border-blue-800 dark:text-blue-100",
-        success:
-          "bg-green-50 border-green-200 text-green-900 dark:bg-green-950/50 dark:border-green-800 dark:text-green-100",
-        warning:
-          "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950/50 dark:border-yellow-800 dark:text-yellow-100",
-        destructive:
-          "bg-red-50 border-red-200 text-red-900 dark:bg-red-950/50 dark:border-red-800 dark:text-red-100",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const iconMap = {
-  default: Info,
-  info: Info,
-  success: CheckCircle,
-  warning: AlertTriangle,
-  destructive: AlertCircle,
-} as const;
-
-interface PageAlertProps
-  extends React.ComponentProps<"div">,
-    VariantProps<typeof pageAlertVariants> {
-  title?: string;
-  description?: React.ReactNode;
-  icon?: React.ComponentType<{ className?: string }>;
-  dismissible?: boolean;
-  defaultOpen?: boolean;
-  onDismiss?: () => void;
-  children?: React.ReactNode;
-}
-
-const PageAlert = React.forwardRef<HTMLDivElement, PageAlertProps>(
-  (
-    {
-      className,
-      variant = "default",
-      title,
-      description,
-      icon,
-      dismissible = true,
-      defaultOpen = true,
-      onDismiss,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const { t } = useTranslation();
-    const [isOpen, setIsOpen] = React.useState(defaultOpen);
-    const [isAnimatingOut, setIsAnimatingOut] = React.useState(false);
-    const IconComponent = icon || iconMap[variant || "default"];
-
-    const handleDismiss = React.useCallback(() => {
-      setIsAnimatingOut(true);
-      // Wait for animation to complete before removing from DOM
-      setTimeout(() => {
-        setIsOpen(false);
-        onDismiss?.();
-      }, 300); // Match the animation duration
-    }, [onDismiss]);
-
-    if (!isOpen) {
-      return null;
-    }
-
-    const content = (
-      <div
-        ref={ref}
-        role="alert"
-        className={cn(
-          pageAlertVariants({ variant }),
-          isAnimatingOut && "transform -translate-y-full opacity-0",
-          className
-        )}
-        {...props}
-      >
-        <div className="flex items-start gap-3">
-          {IconComponent && <IconComponent className="h-4 w-4 mt-0.5 flex-shrink-0" />}
-          <div className="flex-1 min-w-0">
-            {title && <div className="font-medium leading-none tracking-tight mb-1">{title}</div>}
-            {description && <div className="text-sm opacity-90 leading-relaxed">{description}</div>}
-            {children}
-          </div>
-          {dismissible && (
-            <button
-              type="button"
-              onClick={handleDismiss}
-              className="flex-shrink-0 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"
-              aria-label={t("web-ui:alert.dismissLabel")}
-            >
-              <X className="h-4 w-4" />
-            </button>
-          )}
-        </div>
-      </div>
-    );
-
-    return content;
-  }
-);
-
-PageAlert.displayName = "PageAlert";
-
-export { PageAlert, type PageAlertProps };

package/src/components/SelectChips.tsx

@@ -1,40 +0,0 @@
-import { Button, type ButtonProps, Checkbox } from "@heroui/react";
-
-export function SelectChips({
-  items,
-  selectedItems,
-  onSelectionChange,
-  buttonProps,
-}: {
-  items: string[] | { label: string; value: string }[];
-  selectedItems: string[];
-  onSelectionChange: (items: string[]) => void;
-  buttonProps?: ButtonProps;
-}) {
-  return items.map((item) => {
-    const value = typeof item === "string" ? item : item.value;
-    const label = typeof item === "string" ? item : item.label;
-    return (
-      <Button
-        key={value}
-        startContent={
-          <Checkbox
-            isSelected={selectedItems.includes(value)}
-            isReadOnly
-            style={{ pointerEvents: "none" }}
-          />
-        }
-        onPress={() =>
-          onSelectionChange(
-            selectedItems.includes(value)
-              ? selectedItems.filter((i) => i !== value)
-              : [...selectedItems, value]
-          )
-        }
-        {...buttonProps}
-      >
-        {label}
-      </Button>
-    );
-  });
-}

package/src/components/SidebarItem.tsx

@@ -1,26 +0,0 @@
-import type { ReactNode } from "react";
-import { Link } from "react-router";
-import { SidebarMenuButton, SidebarMenuItem } from "#components/ui/sidebar";
-
-export function SidebarItem({
-  label,
-  icon,
-  link,
-  badge,
-}: {
-  label: string;
-  icon: ReactNode;
-  link: string;
-  badge?: ReactNode;
-}) {
-  return (
-    <SidebarMenuItem>
-      <SidebarMenuButton asChild tooltip={label}>
-        <Link to={link}>
-          {icon}
-          {badge ? badge : <span>{label}</span>}
-        </Link>
-      </SidebarMenuButton>
-    </SidebarMenuItem>
-  );
-}