@m5kdev/web-ui 0.1.3 → 0.1.5

package/src/components/CardsSelect.tsx

@@ -1,155 +0,0 @@
-import { Check, Edit } from "lucide-react";
-import * as React from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "#components/ui/card";
-import { cn } from "#utils";
-
-export interface CardSelectItem {
-  id: string;
-  title: string;
-  description?: string;
-  content?: React.ReactNode;
-  disabled?: boolean;
-  icon?: React.ReactNode;
-  onEdit?: (id: string) => void;
-}
-
-export interface CardsSelectProps {
-  items: CardSelectItem[];
-  selectedIds: string[];
-  onSelectionChange: (selectedIds: string[]) => void;
-  maxSelections?: number;
-  className?: string;
-  cardClassName?: string;
-  showCheckbox?: boolean;
-  disabled?: boolean;
-  reversed?: boolean;
-}
-
-const CardsSelect = React.forwardRef<HTMLDivElement, CardsSelectProps>(
-  (
-    {
-      items,
-      selectedIds,
-      onSelectionChange,
-      maxSelections,
-      className,
-      cardClassName,
-      showCheckbox = true,
-      disabled = false,
-      reversed = false,
-      ...props
-    },
-    ref
-  ) => {
-    const handleCardClick = (itemId: string) => {
-      if (disabled) return;
-
-      const item = items.find((item) => item.id === itemId);
-      if (item?.disabled) return;
-
-      const isSelected = selectedIds.includes(itemId);
-
-      if (isSelected) {
-        // Remove from selection
-        onSelectionChange(selectedIds.filter((id) => id !== itemId));
-      } else {
-        // Add to selection
-        if (maxSelections && selectedIds.length >= maxSelections) {
-          // If max selections reached, replace the first selection
-          onSelectionChange([...selectedIds.slice(1), itemId]);
-        } else {
-          onSelectionChange([...selectedIds, itemId]);
-        }
-      }
-    };
-
-    const getGridClasses = () => {
-      return "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 justify-items-center";
-    };
-
-    return (
-      <div ref={ref} className={cn(getGridClasses(), className)} {...props}>
-        {items.map((item) => {
-          const isSelected = reversed
-            ? !selectedIds.includes(item.id)
-            : selectedIds.includes(item.id);
-          const isDisabled = disabled || item.disabled;
-
-          return (
-            <Card
-              key={item.id}
-              className={cn(
-                "relative cursor-pointer transition-all duration-200 hover:shadow-md w-full",
-                isSelected && "ring-2 ring-primary bg-primary/5 border-primary",
-                isDisabled && "opacity-50 cursor-not-allowed",
-                !isDisabled && "hover:bg-accent/50",
-                cardClassName
-              )}
-              onClick={() => handleCardClick(item.id)}
-            >
-              {/* Edit button */}
-              {item.onEdit && (
-                <div className="absolute top-3 left-3 z-10">
-                  <button
-                    type="button"
-                    className={cn(
-                      "flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-accent",
-                      "text-muted-foreground hover:text-foreground"
-                    )}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      item.onEdit?.(item.id);
-                    }}
-                    aria-label="Edit"
-                  >
-                    <Edit className="h-3.5 w-3.5" />
-                  </button>
-                </div>
-              )}
-
-              {/* Selection indicator */}
-              {showCheckbox && (
-                <div className="absolute top-3 right-3 z-10">
-                  <div
-                    className={cn(
-                      "flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors",
-                      isSelected
-                        ? "bg-primary border-primary text-primary-foreground"
-                        : "border-muted-foreground/30 bg-background"
-                    )}
-                  >
-                    {isSelected && <Check className="h-3 w-3" />}
-                  </div>
-                </div>
-              )}
-
-              {/* Card icon */}
-              {item.icon && (
-                <div className="flex items-center justify-center pt-6 pb-4">
-                  <div className="text-5xl text-primary">
-                    <i className={`ti ${item.icon}`} />
-                  </div>
-                </div>
-              )}
-
-              <CardHeader className={cn("pb-3 text-center", item.icon && "pt-2")}>
-                <CardTitle className="text-lg leading-tight">{item.title}</CardTitle>
-                {item.description && (
-                  <CardDescription className="text-sm">{item.description}</CardDescription>
-                )}
-              </CardHeader>
-
-              {item.content && (
-                <CardContent className="pt-0 text-center">{item.content}</CardContent>
-              )}
-            </Card>
-          );
-        })}
-      </div>
-    );
-  }
-);
-
-CardsSelect.displayName = "CardsSelect";
-
-export { CardsSelect };

package/src/components/CollapsibleSidebarMenuItem.tsx

@@ -1,57 +0,0 @@
-import type { CollapsibleProps } from "@radix-ui/react-collapsible";
-import { ChevronRight } from "lucide-react";
-import type { ReactNode } from "react";
-import { Link } from "react-router";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#components/ui/collapsible";
-import {
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  useSidebar,
-} from "#components/ui/sidebar";
-
-export function CollapsibleSidebarMenuItem({
-  children,
-  label,
-  icon,
-  link,
-  badge,
-  ...props
-}: {
-  children: ReactNode;
-  label: string;
-  icon: ReactNode;
-  link: string;
-  badge?: ReactNode;
-} & CollapsibleProps) {
-  const { open } = useSidebar();
-
-  if (!open)
-    return (
-      <SidebarMenuItem>
-        <SidebarMenuButton asChild tooltip={label}>
-          <Link to={link}>
-            {icon}
-            <span>{label}</span>
-          </Link>
-        </SidebarMenuButton>
-      </SidebarMenuItem>
-    );
-
-  return (
-    <Collapsible asChild className="group/collapsible" {...props}>
-      <SidebarMenuItem>
-        <CollapsibleTrigger asChild>
-          <SidebarMenuButton>
-            {icon}
-            {badge ? badge : <span>{label}</span>}
-            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-          </SidebarMenuButton>
-        </CollapsibleTrigger>
-        <CollapsibleContent>
-          <SidebarMenuSub>{children}</SidebarMenuSub>
-        </CollapsibleContent>
-      </SidebarMenuItem>
-    </Collapsible>
-  );
-}

package/src/components/ColorPicker.tsx

@@ -1,56 +0,0 @@
-import {
-  Button,
-  Input,
-  type InputProps,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@heroui/react";
-import { hexToHsva } from "@uiw/color-convert";
-import Colorful from "@uiw/react-color-colorful";
-import { PipetteIcon } from "lucide-react";
-import { useState } from "react";
-
-function safeHexToHsva(hex: string) {
-  try {
-    return hexToHsva(hex);
-  } catch (err) {
-    return { h: 0, s: 0, v: 0, a: 1 };
-  }
-}
-
-export function ColorPicker({
-  disableAlpha = true,
-  value,
-
-  onValueChange,
-  ...props
-}: InputProps & { disableAlpha?: boolean }) {
-  const [hsva, setHsva] = useState(safeHexToHsva(value || ""));
-  return (
-    <Input
-      onValueChange={onValueChange}
-      value={value}
-      endContent={
-        <Popover placement="bottom">
-          <PopoverTrigger>
-            <Button isIconOnly aria-label="Pick color" size="sm" variant="light">
-              <PipetteIcon className="h-4 w-4 text-foreground" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent aria-label="Color picker">
-            <Colorful
-              color={hsva}
-              disableAlpha={disableAlpha}
-              onChange={(color) => {
-                setHsva(color.hsva);
-                onValueChange?.(color.hex);
-              }}
-            />
-          </PopoverContent>
-        </Popover>
-      }
-      {...props}
-    />
-  );
-}

package/src/components/CopyButton.tsx

@@ -1,45 +0,0 @@
-import { Button, type ButtonProps } from "@heroui/react";
-import { CheckCircle, Copy } from "lucide-react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-export function CopyButton({
-  text,
-  notificationTimeout = 1000,
-  isIconOnly,
-  onCopy,
-  ...props
-}: ButtonProps & { text: string; notificationTimeout?: number; onCopy?: () => void }) {
-  const { t } = useTranslation();
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleCopy = async (text: string) => {
-    try {
-      await window.navigator.clipboard.writeText(text);
-      setIsCopied(true);
-      onCopy?.();
-      toast.success(t("web-ui:common.copySuccess"));
-      setTimeout(() => setIsCopied(false), notificationTimeout);
-    } catch (error) {
-      toast.error(t("web-ui:common.copyError"));
-      console.error(error);
-    }
-  };
-
-  return (
-    <Button isIconOnly={isIconOnly} onPress={() => handleCopy(text)} {...props}>
-      {isCopied ? (
-        <>
-          <CheckCircle className="h-4 w-4" />
-          {!isIconOnly && t("web-ui:common.copied")}
-        </>
-      ) : (
-        <>
-          <Copy className="h-4 w-4" />
-          {!isIconOnly && t("web-ui:common.copy")}
-        </>
-      )}
-    </Button>
-  );
-}

package/src/components/CropDialog.tsx

@@ -1,154 +0,0 @@
-import { ZoomIn, ZoomOut } from "lucide-react";
-import { useState } from "react";
-import Cropper, { type Area } from "react-easy-crop";
-import { useTranslation } from "react-i18next";
-import { Button } from "#components/ui/button";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "#components/ui/dialog";
-import { Slider } from "#components/ui/slider";
-
-interface CropArea {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-interface CropDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  imageUrl: string;
-  onCropComplete: (croppedBlob: Blob) => void;
-  onCancel: () => void;
-  isLoading?: boolean;
-}
-
-async function getCroppedImg(
-  imageSrc: string,
-  pixelCrop: CropArea,
-  t: (key: string) => string
-): Promise<Blob> {
-  const image = new Image();
-  image.src = imageSrc;
-
-  // Create canvas
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-
-  if (!ctx) {
-    throw new Error(t("web-ui:image.crop.failedContext"));
-  }
-
-  // Set canvas size to the crop size
-  canvas.width = pixelCrop.width;
-  canvas.height = pixelCrop.height;
-
-  // Draw the cropped image
-  ctx.drawImage(
-    image,
-    pixelCrop.x,
-    pixelCrop.y,
-    pixelCrop.width,
-    pixelCrop.height,
-    0,
-    0,
-    pixelCrop.width,
-    pixelCrop.height
-  );
-
-  // Get the cropped image as blob
-  return new Promise((resolve, reject) => {
-    canvas.toBlob((blob) => {
-      if (!blob) reject(new Error(t("web-ui:image.crop.failedCrop")));
-      else resolve(blob);
-    }, "image/jpeg");
-  });
-}
-
-export function CropDialog({
-  open,
-  onOpenChange,
-  imageUrl,
-  onCropComplete,
-  onCancel,
-  isLoading = false,
-}: CropDialogProps) {
-  const { t } = useTranslation();
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState<CropArea | null>(null);
-
-  const handleCropComplete = (_croppedArea: Area, croppedAreaPixels: CropArea) => {
-    setCroppedAreaPixels(croppedAreaPixels);
-  };
-
-  const handleSave = async () => {
-    if (!croppedAreaPixels) return;
-
-    try {
-      const croppedImageBlob = await getCroppedImg(imageUrl, croppedAreaPixels, t);
-      onCropComplete(croppedImageBlob);
-    } catch (error) {
-      console.error(t("web-ui:image.crop.error"), error);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[600px]">
-        <DialogHeader>
-          <DialogTitle>{t("web-ui:image.crop.title")}</DialogTitle>
-        </DialogHeader>
-        <div className="relative h-[400px] w-full">
-          <Cropper
-            image={imageUrl}
-            crop={crop}
-            zoom={zoom}
-            aspect={1}
-            onCropChange={setCrop}
-            onZoomChange={setZoom}
-            onCropComplete={handleCropComplete}
-            objectFit="contain"
-            showGrid={true}
-            style={{
-              containerStyle: {
-                position: "relative",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "#262626",
-              },
-              cropAreaStyle: {
-                border: "2px solid #fff",
-                color: "rgba(255, 255, 255, 0.9)",
-              },
-              mediaStyle: {
-                backgroundColor: "#262626",
-              },
-            }}
-          />
-        </div>
-
-        <div className="flex items-center gap-4 px-1">
-          <ZoomOut className="h-4 w-4" />
-          <Slider
-            value={[zoom]}
-            onValueChange={(values: number[]) => setZoom(values[0])}
-            min={1}
-            max={3}
-            step={0.1}
-            className="flex-1"
-          />
-          <ZoomIn className="h-4 w-4" />
-        </div>
-
-        <div className="mt-4 flex justify-end space-x-2">
-          <Button variant="outline" onClick={onCancel}>
-            {t("web-ui:common.cancel")}
-          </Button>
-          <Button onClick={handleSave} disabled={isLoading}>
-            {isLoading ? t("web-ui:common.saving") : t("web-ui:common.save")}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/DialogProvider.tsx

@@ -1,105 +0,0 @@
-import {
-  Button,
-  type ButtonProps,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-} from "@heroui/react";
-import { semanticColors } from "@heroui/theme";
-import { createContext, useContext, useRef, useState } from "react";
-
-export type DialogProps = {
-  title: React.ReactNode;
-  description: React.ReactNode;
-  color?: ButtonProps["color"];
-  cancelable?: boolean;
-  onCancel?: () => void;
-  onConfirm?: () => void;
-  cancelLabel?: string;
-  confirmLabel?: string;
-};
-
-const DialogContext = createContext<(dialog: DialogProps) => void>(() => {
-  console.warn("DialogProvider is not initialized");
-});
-
-export function useDialog() {
-  const context = useContext(DialogContext);
-  if (!context) {
-    throw new Error("useDialog must be used within a DialogProvider");
-  }
-  return context;
-}
-
-export function DialogProvider({ children }: { children: React.ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [dialog, setDialog] = useState<DialogProps | null>(null);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const handleSetDialog = (dialog: DialogProps) => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    setDialog(dialog);
-    setIsOpen(true);
-  };
-
-  const handleUnsetDialog = () => {
-    setIsOpen(false);
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    timeoutRef.current = setTimeout(() => {
-      setDialog(null);
-    }, 500);
-  };
-
-  const handleCancel = () => {
-    dialog?.onCancel?.();
-    handleUnsetDialog();
-  };
-
-  const handleConfirm = () => {
-    dialog?.onConfirm?.();
-    handleUnsetDialog();
-  };
-
-  return (
-    <DialogContext.Provider value={handleSetDialog}>
-      <>
-        {children}
-        {dialog && (
-          <Modal
-            isOpen={isOpen}
-            onOpenChange={handleUnsetDialog}
-            style={{
-              borderColor: semanticColors.light[dialog.color || "danger"][600],
-            }}
-            classNames={{
-              base: "border-1",
-            }}
-          >
-            <ModalContent>
-              <ModalHeader>{dialog.title}</ModalHeader>
-              <ModalBody>{dialog.description}</ModalBody>
-              <ModalFooter>
-                <div className="flex flex-row gap-2">
-                  {(dialog.cancelable || dialog.onCancel) && (
-                    <Button onPress={handleCancel}>{dialog.cancelLabel ?? "Cancel"}</Button>
-                  )}
-                  <Button color={dialog.color} onPress={handleConfirm}>
-                    {dialog.confirmLabel ?? "Confirm"}
-                  </Button>
-                </div>
-              </ModalFooter>
-            </ModalContent>
-          </Modal>
-        )}
-      </>
-    </DialogContext.Provider>
-  );
-}

package/src/components/ErrorFallback.tsx

@@ -1,17 +0,0 @@
-export function ErrorFallback({
-  error,
-  componentStack,
-}: {
-  error: unknown;
-  componentStack: string;
-}) {
-  const errorMessage = error instanceof Error ? error.message : "Unknown error";
-  return (
-    <div className="flex flex-grow-1 flex-col items-center justify-center h-[100vh]">
-      <h1 className="text-3xl font-bold">Something went wrong.</h1>
-      <h1 className="text-2xl text-gray-700 font-bold mb-5">Please try again later.</h1>
-      <div className="text-lg text-gray-700 mb-5">{errorMessage}</div>
-      <div className="text-sm text-gray-500 px-10">{componentStack}</div>
-    </div>
-  );
-}