@pol-studios/ui 1.0.0

package/dist/forms/index.js

@@ -0,0 +1,504 @@
+"use client";
+
+// src/forms/MultiForm.tsx
+import { isNullOrWhitespace } from "@pol-studios/utils";
+import { Box, Step, StepLabel, Stepper } from "@mui/material";
+import { useEffect, useMemo, useState } from "react";
+
+// src/primitives/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@pol-studios/utils";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/primitives/skeleton.tsx
+import * as React2 from "react";
+import { cn as cn2 } from "@pol-studios/utils";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Skeleton = React2.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      className: cn2("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+
+// src/forms/MultiForm.tsx
+import { cn as cn3 } from "@pol-studios/utils";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function useMultistepForm(steps) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  function goNext() {
+    setCurrentStepIndex((i) => i >= steps.length - 1 ? i : i + 1);
+  }
+  function goBack() {
+    setCurrentStepIndex((i) => i <= 0 ? i : i - 1);
+  }
+  function goTo(index) {
+    setCurrentStepIndex(index);
+  }
+  return {
+    currentStepIndex,
+    currentStep: steps[currentStepIndex],
+    steps,
+    isFirstStep: currentStepIndex === 0,
+    isLastStep: currentStepIndex === steps.length - 1,
+    goBack,
+    goNext,
+    goTo
+  };
+}
+function MultiForm({
+  views,
+  className,
+  validateStep,
+  onSuccess,
+  canGoBack = true,
+  canGoForward = true,
+  startingStepIndex,
+  onNavigateStep
+}) {
+  const viewComponents = useMemo(() => Array.from(views.values()), [views]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const { currentStepIndex, currentStep, steps, goBack, goNext, goTo } = useMultistepForm(viewComponents.map((x) => x[1]));
+  useEffect(() => {
+    if (startingStepIndex) {
+      goTo(startingStepIndex);
+      onNavigateStep && onNavigateStep(startingStepIndex);
+    }
+  }, [startingStepIndex]);
+  async function onSubmit(e) {
+    e.preventDefault();
+    setIsLoading(true);
+    const nextStep = currentStepIndex + 1;
+    const response = validateStep && validateStep(currentStepIndex);
+    let errorMsg = null;
+    if (response instanceof Promise) {
+      errorMsg = await response;
+    } else {
+      errorMsg = response ?? null;
+    }
+    if (isNullOrWhitespace(errorMsg) && nextStep !== steps.length) {
+      goTo(nextStep);
+      await (onNavigateStep && onNavigateStep(nextStep));
+      setErrorMessage("");
+    } else {
+      setErrorMessage(errorMsg || "");
+    }
+    setIsLoading(false);
+  }
+  async function tryOnSuccess() {
+    let errorMsg = null;
+    if (currentStepIndex + 1 === steps.length) {
+      errorMsg = await (onSuccess ? onSuccess() : void 0);
+    }
+    setErrorMessage(errorMsg ?? "");
+  }
+  const onBackClicked = () => {
+    setErrorMessage("");
+    goBack();
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx3(
+      Box,
+      {
+        sx: {
+          width: "70%",
+          minWidth: "min(450px, 100dvw)",
+          textAlign: "center",
+          margin: "auto",
+          padding: "25px",
+          height: "10%"
+        },
+        children: /* @__PURE__ */ jsx3(Stepper, { activeStep: currentStepIndex, children: views.map((x) => x[0]).map((label) => /* @__PURE__ */ jsx3(Step, { children: /* @__PURE__ */ jsx3(StepLabel, { children: label }) }, label)) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit,
+        className: "grid h-[90%] grid-rows-[auto_1fr_auto] p-5",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn3("relative", isLoading && "opacity-50 pointer-events-none"), children: [
+            isLoading && /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(Skeleton, { className: "h-8 w-8 rounded-full" }) }),
+            /* @__PURE__ */ jsx3("div", { children: currentStep })
+          ] }),
+          /* @__PURE__ */ jsx3("p", { className: "text-center text-xs text-wrap text-red-500 font-bold", children: errorMessage }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-auto grid grid-flow-col grid-cols-[auto_1fr_auto] pt-5", children: [
+            canGoBack && currentStepIndex !== 0 ? /* @__PURE__ */ jsx3(
+              Button,
+              {
+                type: "button",
+                "data-testid": "back-button",
+                onClick: onBackClicked,
+                children: "Back"
+              }
+            ) : /* @__PURE__ */ jsx3("div", {}),
+            /* @__PURE__ */ jsx3("div", {}),
+            canGoForward && /* @__PURE__ */ jsx3(
+              Button,
+              {
+                type: "submit",
+                "data-testid": "next-button",
+                onClick: tryOnSuccess,
+                children: currentStepIndex !== steps.length - 1 ? "Next" : "Finish"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/forms/MultiStepForm.tsx
+import React4 from "react";
+import { useControlledState } from "@react-stately/utils";
+import { m, LazyMotion, domAnimation } from "framer-motion";
+import { cn as cn5 } from "@pol-studios/utils";
+
+// src/primitives/scroll-area.tsx
+import * as React3 from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn as cn4 } from "@pol-studios/utils";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var ScrollArea = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn4("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx4(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx4(ScrollBar, {}),
+      /* @__PURE__ */ jsx4(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React3.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx4(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn4(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx4(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// src/forms/MultiStepForm.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      ...props,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ jsx5(
+        m.path,
+        {
+          animate: { pathLength: 1 },
+          d: "M5 13l4 4L19 7",
+          initial: { pathLength: 0 },
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          transition: {
+            delay: 0.2,
+            type: "tween",
+            ease: "easeOut",
+            duration: 0.3
+          }
+        }
+      )
+    }
+  );
+}
+var MultiStepForm = React4.forwardRef(
+  ({
+    color = "primary",
+    steps = [],
+    defaultStep = 0,
+    onStepChange,
+    currentStep: currentStepProp,
+    hideProgressBars = false,
+    stepClassName,
+    className,
+    ...props
+  }, ref) => {
+    const [currentStep, setCurrentStep] = useControlledState(
+      currentStepProp,
+      defaultStep,
+      onStepChange
+    );
+    const colors = React4.useMemo(() => {
+      let userColor;
+      let fgColor;
+      const colorsVars = [
+        "[--active-fg-color:var(--step-fg-color)]",
+        "[--active-border-color:var(--step-color)]",
+        "[--active-color:var(--step-color)]",
+        "[--complete-background-color:var(--step-color)]",
+        "[--complete-border-color:var(--step-color)]",
+        "[--inactive-border-color:hsl(var(--muted))]",
+        "[--inactive-color:hsl(var(--muted))]"
+      ];
+      switch (color) {
+        case "primary":
+          userColor = "[--step-color:hsl(var(--primary))]";
+          fgColor = "[--step-fg-color:hsl(var(--primary-foreground))]";
+          break;
+        case "secondary":
+          userColor = "[--step-color:hsl(var(--secondary))]";
+          fgColor = "[--step-fg-color:hsl(var(--secondary-foreground))]";
+          break;
+        case "success":
+          userColor = "[--step-color:hsl(var(--success))]";
+          fgColor = "[--step-fg-color:hsl(var(--success-foreground))]";
+          break;
+        case "warning":
+          userColor = "[--step-color:hsl(var(--warning))]";
+          fgColor = "[--step-fg-color:hsl(var(--warning-foreground))]";
+          break;
+        case "danger":
+          userColor = "[--step-color:hsl(var(--destructive))]";
+          fgColor = "[--step-fg-color:hsl(var(--destructive-foreground))]";
+          break;
+        case "default":
+          userColor = "[--step-color:hsl(var(--muted-foreground))]";
+          fgColor = "[--step-fg-color:hsl(var(--muted))]";
+          break;
+        default:
+          userColor = "[--step-color:hsl(var(--primary))]";
+          fgColor = "[--step-fg-color:hsl(var(--primary-foreground))]";
+          break;
+      }
+      if (!className?.includes("--step-fg-color")) colorsVars.unshift(fgColor);
+      if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
+      if (!className?.includes("--inactive-bar-color"))
+        colorsVars.push(
+          "[--inactive-bar-color:hsl(var(--muted))]"
+        );
+      return colorsVars;
+    }, [color, className]);
+    return /* @__PURE__ */ jsxs3("div", { className: cn5("flex flex-col overflow-auto", className), children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          "aria-label": "Progress",
+          className: "max-w-fit overflow-x-auto mx-auto pb-4 table",
+          children: /* @__PURE__ */ jsx5("ol", { className: cn5("flex flex-row flex-nowrap gap-x-3", colors), children: steps?.map((step, stepIdx) => {
+            let status = currentStep === stepIdx ? "active" : currentStep < stepIdx ? "inactive" : "complete";
+            return /* @__PURE__ */ jsx5(
+              "li",
+              {
+                className: "relative flex w-full items-center pr-12",
+                children: /* @__PURE__ */ jsxs3(
+                  "button",
+                  {
+                    ref,
+                    type: "button",
+                    "aria-current": status === "active" ? "step" : void 0,
+                    className: cn5(
+                      "group flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 rounded-lg py-2.5",
+                      stepClassName
+                    ),
+                    disabled: status === "inactive",
+                    onClick: () => setCurrentStep(stepIdx),
+                    ...props,
+                    children: [
+                      /* @__PURE__ */ jsx5("div", { className: "h-ful relative flex items-center", children: /* @__PURE__ */ jsx5(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx5(m.div, { animate: status, className: "relative", children: /* @__PURE__ */ jsx5(
+                        m.div,
+                        {
+                          className: cn5(
+                            "relative flex h-[34px] w-[34px] items-center justify-center rounded-full border-2 text-large font-semibold",
+                            {
+                              "shadow-lg": status === "complete"
+                            }
+                          ),
+                          initial: false,
+                          transition: { duration: 0.25 },
+                          variants: {
+                            inactive: {
+                              backgroundColor: "transparent",
+                              borderColor: "var(--inactive-border-color)",
+                              color: "var(--inactive-color)"
+                            },
+                            active: {
+                              backgroundColor: "transparent",
+                              borderColor: "var(--active-border-color)",
+                              color: "var(--active-color)"
+                            },
+                            complete: {
+                              backgroundColor: "var(--complete-background-color)",
+                              borderColor: "var(--complete-border-color)"
+                            }
+                          },
+                          children: /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center", children: status === "complete" ? /* @__PURE__ */ jsx5(CheckIcon, { className: "h-6 w-6 text-[var(--active-fg-color)]" }) : /* @__PURE__ */ jsx5("span", { children: stepIdx + 1 }) })
+                        }
+                      ) }) }) }),
+                      /* @__PURE__ */ jsx5("div", { className: "max-w-full flex-1 text-start", children: /* @__PURE__ */ jsx5(
+                        "div",
+                        {
+                          className: cn5(
+                            "text-sm font-medium transition-[color,opacity] duration-300 group-active:opacity-80 lg:text-base",
+                            {
+                              "text-muted-foreground": status === "inactive"
+                            }
+                          ),
+                          children: step.title
+                        }
+                      ) }),
+                      stepIdx < steps.length - 1 && !hideProgressBars && /* @__PURE__ */ jsx5(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: "pointer-events-none absolute right-0 w-10 flex-none items-center",
+                          style: {
+                            // @ts-ignore
+                            "--idx": stepIdx
+                          },
+                          children: /* @__PURE__ */ jsx5(
+                            "div",
+                            {
+                              className: cn5(
+                                "relative h-0.5 w-full bg-[var(--inactive-bar-color)] transition-colors duration-300",
+                                "after:absolute after:block after:h-full after:w-0 after:bg-[var(--active-border-color)] after:transition-[width] after:duration-300 after:content-['']",
+                                {
+                                  "after:w-full": stepIdx < currentStep
+                                }
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  stepIdx
+                )
+              },
+              stepIdx
+            );
+          }) })
+        }
+      ),
+      /* @__PURE__ */ jsx5(ScrollArea, { className: "py-5 px-2 flex-1", children: steps[currentStep]?.content })
+    ] });
+  }
+);
+MultiStepForm.displayName = "MultiStepForm";
+var MultiStepForm_default = MultiStepForm;
+
+// src/forms/FileDropzone.tsx
+import { FileInput, Label } from "flowbite-react";
+import { cn as cn6 } from "@pol-studios/utils";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function FileDropzone({
+  children,
+  onFileUpload,
+  accept,
+  className
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: cn6("flex w-full items-center justify-center", className), children: /* @__PURE__ */ jsxs4(
+    Label,
+    {
+      htmlFor: "dropzone-file",
+      className: "flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600",
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center pb-6 pt-5", children: [
+          /* @__PURE__ */ jsx6(
+            "svg",
+            {
+              className: "mb-4 h-8 w-8 text-gray-500 dark:text-gray-400",
+              "aria-hidden": "true",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 20 16",
+              children: /* @__PURE__ */ jsx6(
+                "path",
+                {
+                  stroke: "currentColor",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  d: "M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                }
+              )
+            }
+          ),
+          children
+        ] }),
+        /* @__PURE__ */ jsx6(
+          FileInput,
+          {
+            id: "dropzone-file",
+            onChange: (e) => onFileUpload(e.target.files),
+            className: "hidden",
+            accept
+          }
+        )
+      ]
+    }
+  ) });
+}
+var FileDropzone_default = FileDropzone;
+export {
+  FileDropzone,
+  FileDropzone_default as FileDropzoneDefault,
+  MultiForm,
+  MultiStepForm_default as MultiStepForm
+};