@m5kdev/web-ui 0.1.0

package/src/components/PageAlert.tsx

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

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

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

@@ -0,0 +1,340 @@
+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";