@m5kdev/web-ui 0.1.4 → 0.2.0

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>
-  );
-}

package/src/components/Steps.tsx

@@ -1,340 +0,0 @@
-import { Check } from "lucide-react";
-import type React from "react";
-import { Badge } from "#components/ui/badge";
-import { Separator } from "#components/ui/separator";
-import { cn } from "#utils";
-
-export interface Step {
-  id: string;
-  title: string;
-  description?: string;
-  status: "completed" | "current" | "upcoming";
-}
-
-export interface StepsProps {
-  steps: Step[];
-  className?: string;
-  onStepClick?: (step: number) => void;
-}
-
-export const Steps: React.FC<StepsProps> = ({ steps, className, onStepClick }) => {
-  return (
-    <nav aria-label="Progress" className={cn("w-full", className)}>
-      {/* Vertical layout for mobile/tablet */}
-      <ol className="lg:hidden space-y-6">
-        {steps.map((step, stepIdx) => (
-          <li key={step.id} className="relative">
-            <div className="flex items-start">
-              {/* Step indicator */}
-              <div className="flex-shrink-0">
-                {step.status === "completed" ? (
-                  <button type="button" onClick={() => onStepClick?.(stepIdx)}>
-                    <Badge
-                      variant="default"
-                      className="h-10 w-10 rounded-full p-0 flex items-center justify-center"
-                    >
-                      <Check className="h-5 w-5" />
-                    </Badge>
-                  </button>
-                ) : step.status === "current" ? (
-                  <Badge
-                    variant="default"
-                    className="h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium"
-                  >
-                    {stepIdx + 1}
-                  </Badge>
-                ) : (
-                  <Badge
-                    variant="outline"
-                    className="h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium bg-background"
-                  >
-                    {stepIdx + 1}
-                  </Badge>
-                )}
-              </div>
-
-              {/* Step content */}
-              <div className="ml-4 min-w-0 flex-1">
-                <p
-                  className={cn(
-                    "text-sm font-medium",
-                    step.status === "completed" || step.status === "current"
-                      ? "text-foreground"
-                      : "text-muted-foreground"
-                  )}
-                >
-                  {step.title}
-                </p>
-                {step.description && (
-                  <p
-                    className={cn(
-                      "text-sm mt-1",
-                      step.status === "completed" || step.status === "current"
-                        ? "text-muted-foreground"
-                        : "text-muted-foreground/60"
-                    )}
-                  >
-                    {step.description}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {/* Connecting line - vertical */}
-            {stepIdx !== steps.length - 1 && (
-              <div className="absolute left-5 top-10 -ml-px mt-2 h-6">
-                <Separator
-                  orientation="vertical"
-                  className={cn(
-                    "h-full",
-                    step.status === "completed" ? "bg-primary" : "bg-muted-foreground/20"
-                  )}
-                />
-              </div>
-            )}
-          </li>
-        ))}
-      </ol>
-
-      {/* Horizontal layout for desktop */}
-      <ol className="hidden lg:flex items-center justify-between">
-        {steps.map((step, stepIdx) => (
-          <li key={step.id} className="relative flex flex-col items-center flex-1">
-            {/* Step indicator */}
-            <div className="relative z-10 flex-shrink-0">
-              {step.status === "completed" ? (
-                <button type="button" onClick={() => onStepClick?.(stepIdx)}>
-                  <Badge
-                    variant="default"
-                    className="h-10 w-10 rounded-full p-0 flex items-center justify-center"
-                  >
-                    <Check className="h-5 w-5" />
-                  </Badge>
-                </button>
-              ) : step.status === "current" ? (
-                <Badge
-                  variant="default"
-                  className="h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium"
-                >
-                  {stepIdx + 1}
-                </Badge>
-              ) : (
-                <Badge
-                  variant="outline"
-                  className="h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium bg-background"
-                >
-                  {stepIdx + 1}
-                </Badge>
-              )}
-            </div>
-
-            {/* Step content */}
-            <div className="mt-3 text-center max-w-32">
-              <p
-                className={cn(
-                  "text-sm font-medium",
-                  step.status === "completed" || step.status === "current"
-                    ? "text-foreground"
-                    : "text-muted-foreground"
-                )}
-              >
-                {step.title}
-              </p>
-              {step.description && (
-                <p
-                  className={cn(
-                    "text-xs mt-1",
-                    step.status === "completed" || step.status === "current"
-                      ? "text-muted-foreground"
-                      : "text-muted-foreground/60"
-                  )}
-                >
-                  {step.description}
-                </p>
-              )}
-            </div>
-
-            {/* Connecting line - horizontal */}
-            {stepIdx !== steps.length - 1 && (
-              <div className="absolute left-1/2 top-5 w-full h-0.5 -z-10">
-                <Separator
-                  orientation="horizontal"
-                  className={cn(
-                    "w-full",
-                    step.status === "completed" ? "bg-primary" : "bg-muted-foreground/20"
-                  )}
-                />
-              </div>
-            )}
-          </li>
-        ))}
-      </ol>
-    </nav>
-  );
-};
-
-// Keep the individual components for specific use cases
-export const VerticalSteps: React.FC<StepsProps> = ({ steps, className }) => {
-  return (
-    <nav aria-label="Progress" className={cn("", className)}>
-      <ol className="space-y-6">
-        {steps.map((step, stepIdx) => (
-          <li key={step.id} className="relative">
-            <div className="flex items-start">
-              {/* Step indicator */}
-              <div className="flex-shrink-0">
-                {step.status === "completed" ? (
-                  <Badge
-                    variant="default"
-                    className="h-10 w-10 rounded-full p-0 flex items-center justify-center"
-                  >
-                    <Check className="h-5 w-5" />
-                  </Badge>
-                ) : step.status === "current" ? (
-                  <Badge
-                    variant="default"
-                    className="h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium"
-                  >
-                    {stepIdx + 1}
-                  </Badge>
-                ) : (
-                  <Badge
-                    variant="outline"
-                    className="h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium bg-background"
-                  >
-                    {stepIdx + 1}
-                  </Badge>
-                )}
-              </div>
-
-              {/* Step content */}
-              <div className="ml-4 min-w-0 flex-1">
-                <p
-                  className={cn(
-                    "text-sm font-medium",
-                    step.status === "completed" || step.status === "current"
-                      ? "text-foreground"
-                      : "text-muted-foreground"
-                  )}
-                >
-                  {step.title}
-                </p>
-                {step.description && (
-                  <p
-                    className={cn(
-                      "text-sm mt-1",
-                      step.status === "completed" || step.status === "current"
-                        ? "text-muted-foreground"
-                        : "text-muted-foreground/60"
-                    )}
-                  >
-                    {step.description}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {/* Connecting line */}
-            {stepIdx !== steps.length - 1 && (
-              <div className="absolute left-5 top-10 -ml-px mt-2 h-6">
-                <Separator
-                  orientation="vertical"
-                  className={cn(
-                    "h-full",
-                    step.status === "completed" ? "bg-primary" : "bg-muted-foreground/20"
-                  )}
-                />
-              </div>
-            )}
-          </li>
-        ))}
-      </ol>
-    </nav>
-  );
-};
-
-export interface HorizontalStepsProps {
-  steps: Step[];
-  className?: string;
-}
-
-export const HorizontalSteps: React.FC<HorizontalStepsProps> = ({ steps, className }) => {
-  return (
-    <nav aria-label="Progress" className={cn("w-full", className)}>
-      <ol className="flex items-center justify-between">
-        {steps.map((step, stepIdx) => (
-          <li key={step.id} className="relative flex flex-col items-center flex-1">
-            {/* Step indicator */}
-            <div className="relative z-10 flex-shrink-0">
-              {step.status === "completed" ? (
-                <Badge
-                  variant="default"
-                  className="h-10 w-10 rounded-full p-0 flex items-center justify-center"
-                >
-                  <Check className="h-5 w-5" />
-                </Badge>
-              ) : step.status === "current" ? (
-                <Badge
-                  variant="default"
-                  className="h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium"
-                >
-                  {stepIdx + 1}
-                </Badge>
-              ) : (
-                <Badge
-                  variant="outline"
-                  className="h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium bg-background"
-                >
-                  {stepIdx + 1}
-                </Badge>
-              )}
-            </div>
-
-            {/* Step content */}
-            <div className="mt-3 text-center max-w-32">
-              <p
-                className={cn(
-                  "text-sm font-medium",
-                  step.status === "completed" || step.status === "current"
-                    ? "text-foreground"
-                    : "text-muted-foreground"
-                )}
-              >
-                {step.title}
-              </p>
-              {step.description && (
-                <p
-                  className={cn(
-                    "text-xs mt-1",
-                    step.status === "completed" || step.status === "current"
-                      ? "text-muted-foreground"
-                      : "text-muted-foreground/60"
-                  )}
-                >
-                  {step.description}
-                </p>
-              )}
-            </div>
-
-            {/* Connecting line */}
-            {stepIdx !== steps.length - 1 && (
-              <div className="absolute left-1/2 top-5 w-full h-0.5 -z-10">
-                <Separator
-                  orientation="horizontal"
-                  className={cn(
-                    "w-full",
-                    step.status === "completed" ? "bg-primary" : "bg-muted-foreground/20"
-                  )}
-                />
-              </div>
-            )}
-          </li>
-        ))}
-      </ol>
-    </nav>
-  );
-};
-
-Steps.displayName = "Steps";
-VerticalSteps.displayName = "VerticalSteps";
-HorizontalSteps.displayName = "HorizontalSteps";