@m5kdev/web-ui 0.1.0

package/src/components/CardsSelect.tsx

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,154 @@
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,17 @@
+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>
+  );
+}