@pol-studios/ui 1.0.0

package/dist/auth/index.js

@@ -0,0 +1,588 @@
+"use client";
+
+// src/auth/LoginForm.tsx
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { cn as cn5 } from "@pol-studios/utils";
+
+// 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/card.tsx
+import * as React2 from "react";
+import { cn as cn2 } from "@pol-studios/utils";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    className: cn2(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    className: cn2("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    className: cn2(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    className: cn2("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn2("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    className: cn2("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/primitives/input.tsx
+import * as React3 from "react";
+import { cn as cn3 } from "@pol-studios/utils";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = React3.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type,
+        "data-slot": "input",
+        className: cn3(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-xs",
+          "ring-offset-background transition-shadow",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/primitives/label.tsx
+import * as React4 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva2 } from "class-variance-authority";
+import { cn as cn4 } from "@pol-studios/utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var labelVariants = cva2(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn4(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/auth/LoginForm.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+function LoginForm({
+  className,
+  onLogin,
+  forgotPasswordRoute = "/forgot-password",
+  signUpRoute = "/sign-up",
+  redirectTo = "/",
+  ...props
+}) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (onLogin) {
+        await onLogin(email, password);
+      }
+      await navigate({ to: redirectTo, reloadDocument: true });
+    } catch (error2) {
+      setError(error2 instanceof Error ? error2.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx5("div", { className: cn5("flex flex-col gap-6", className), ...props, children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx5(CardHeader, { children: /* @__PURE__ */ jsx5(CardTitle, { className: "text-2xl text-center", children: "Login" }) }),
+    /* @__PURE__ */ jsx5(CardContent, { children: /* @__PURE__ */ jsxs("form", { onSubmit: handleLogin, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx5(Label, { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ jsx5(
+            Input,
+            {
+              "data-testid": "email",
+              id: "email",
+              type: "email",
+              placeholder: "m@example.com",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx5(Label, { htmlFor: "password", children: "Password" }),
+          /* @__PURE__ */ jsx5(
+            Input,
+            {
+              "data-testid": "password",
+              id: "password",
+              type: "password",
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx5("div", { className: "flex items-center", children: /* @__PURE__ */ jsx5(
+            Link,
+            {
+              to: forgotPasswordRoute,
+              className: "ml-auto inline-block text-sm underline-offset-4 hover:underline",
+              children: "Forgot your password?"
+            }
+          ) })
+        ] }),
+        error && /* @__PURE__ */ jsx5("p", { className: "text-sm text-red-500", children: error }),
+        /* @__PURE__ */ jsx5(
+          Button,
+          {
+            type: "submit",
+            className: "w-full",
+            disabled: isLoading,
+            "data-testid": "loginButton",
+            children: isLoading ? "Logging in..." : "Login"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 text-center text-sm", children: [
+        "Don't have an account?",
+        " ",
+        /* @__PURE__ */ jsx5(Link, { to: signUpRoute, className: "underline underline-offset-4", children: "Sign up" })
+      ] })
+    ] }) })
+  ] }) });
+}
+var LoginForm_default = LoginForm;
+
+// src/auth/SignUpForm.tsx
+import { Link as Link2, useNavigate as useNavigate2 } from "@tanstack/react-router";
+import { useState as useState2 } from "react";
+import { cn as cn6 } from "@pol-studios/utils";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function SignUpForm({
+  className,
+  onSignUp,
+  loginRoute = "/login",
+  successRoute = "/sign-up-success",
+  ...props
+}) {
+  const [email, setEmail] = useState2("");
+  const [password, setPassword] = useState2("");
+  const [repeatPassword, setRepeatPassword] = useState2("");
+  const [error, setError] = useState2(null);
+  const [isLoading, setIsLoading] = useState2(false);
+  const navigate = useNavigate2();
+  const handleSignUp = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (password !== repeatPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      if (onSignUp) {
+        await onSignUp(email, password);
+      }
+      await navigate({ to: successRoute });
+    } catch (error2) {
+      setError(error2 instanceof Error ? error2.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx6("div", { className: cn6("flex flex-col gap-6", className), ...props, children: /* @__PURE__ */ jsxs2(Card, { children: [
+    /* @__PURE__ */ jsxs2(CardHeader, { children: [
+      /* @__PURE__ */ jsx6(CardTitle, { className: "text-2xl", children: "Sign up" }),
+      /* @__PURE__ */ jsx6(CardDescription, { children: "Create a new account" })
+    ] }),
+    /* @__PURE__ */ jsx6(CardContent, { children: /* @__PURE__ */ jsxs2("form", { onSubmit: handleSignUp, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx6(Label, { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ jsx6(
+            Input,
+            {
+              id: "email",
+              type: "email",
+              placeholder: "m@example.com",
+              required: true,
+              value: email,
+              onChange: (e) => setEmail(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx6("div", { className: "flex items-center", children: /* @__PURE__ */ jsx6(Label, { htmlFor: "password", children: "Password" }) }),
+          /* @__PURE__ */ jsx6(
+            Input,
+            {
+              id: "password",
+              type: "password",
+              required: true,
+              value: password,
+              onChange: (e) => setPassword(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx6("div", { className: "flex items-center", children: /* @__PURE__ */ jsx6(Label, { htmlFor: "repeat-password", children: "Repeat Password" }) }),
+          /* @__PURE__ */ jsx6(
+            Input,
+            {
+              id: "repeat-password",
+              type: "password",
+              required: true,
+              value: repeatPassword,
+              onChange: (e) => setRepeatPassword(e.target.value)
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx6("p", { className: "text-sm text-red-500", children: error }),
+        /* @__PURE__ */ jsx6(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Creating an account..." : "Sign up" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "mt-4 text-center text-sm", children: [
+        "Already have an account?",
+        " ",
+        /* @__PURE__ */ jsx6(Link2, { to: loginRoute, className: "underline underline-offset-4", children: "Login" })
+      ] })
+    ] }) })
+  ] }) });
+}
+var SignUpForm_default = SignUpForm;
+
+// src/auth/ForgotPasswordForm.tsx
+import { Link as Link3 } from "@tanstack/react-router";
+import { useState as useState3 } from "react";
+import { cn as cn7 } from "@pol-studios/utils";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function ForgotPasswordForm({
+  className,
+  onResetPassword,
+  loginRoute = "/login",
+  ...props
+}) {
+  const [email, setEmail] = useState3("");
+  const [error, setError] = useState3(null);
+  const [success, setSuccess] = useState3(false);
+  const [isLoading, setIsLoading] = useState3(false);
+  const handleForgotPassword = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (onResetPassword) {
+        await onResetPassword(email);
+      }
+      setSuccess(true);
+    } catch (error2) {
+      setError(error2 instanceof Error ? error2.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx7("div", { className: cn7("flex flex-col gap-6", className), ...props, children: success ? /* @__PURE__ */ jsxs3(Card, { children: [
+    /* @__PURE__ */ jsxs3(CardHeader, { children: [
+      /* @__PURE__ */ jsx7(CardTitle, { className: "text-2xl", children: "Check Your Email" }),
+      /* @__PURE__ */ jsx7(CardDescription, { children: "Password reset instructions sent" })
+    ] }),
+    /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: "If you registered using your email and password, you will receive a password reset email." }) })
+  ] }) : /* @__PURE__ */ jsxs3(Card, { children: [
+    /* @__PURE__ */ jsxs3(CardHeader, { children: [
+      /* @__PURE__ */ jsx7(CardTitle, { className: "text-2xl", children: "Reset Your Password" }),
+      /* @__PURE__ */ jsx7(CardDescription, { children: "Type in your email and we'll send you a link to reset your password" })
+    ] }),
+    /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsxs3("form", { onSubmit: handleForgotPassword, children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx7(Label, { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ jsx7(
+            Input,
+            {
+              id: "email",
+              type: "email",
+              placeholder: "m@example.com",
+              required: true,
+              value: email,
+              onChange: (e) => setEmail(e.target.value)
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx7("p", { className: "text-sm text-red-500", children: error }),
+        /* @__PURE__ */ jsx7(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Sending..." : "Send reset email" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "mt-4 text-center text-sm", children: [
+        "Already have an account?",
+        " ",
+        /* @__PURE__ */ jsx7(Link3, { to: loginRoute, className: "underline underline-offset-4", children: "Login" })
+      ] })
+    ] }) })
+  ] }) });
+}
+var ForgotPasswordForm_default = ForgotPasswordForm;
+
+// src/auth/UpdatePasswordForm.tsx
+import { useNavigate as useNavigate3 } from "@tanstack/react-router";
+import { useState as useState4 } from "react";
+import { cn as cn8 } from "@pol-studios/utils";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function UpdatePasswordForm({
+  className,
+  onUpdatePassword,
+  redirectTo = "/",
+  ...props
+}) {
+  const [password, setPassword] = useState4("");
+  const [error, setError] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(false);
+  const navigate = useNavigate3();
+  const handleUpdatePassword = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (onUpdatePassword) {
+        await onUpdatePassword(password);
+      }
+      await navigate({ to: redirectTo, reloadDocument: true });
+    } catch (error2) {
+      setError(error2 instanceof Error ? error2.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx8("div", { className: cn8("flex flex-col gap-6", className), ...props, children: /* @__PURE__ */ jsxs4(Card, { children: [
+    /* @__PURE__ */ jsxs4(CardHeader, { children: [
+      /* @__PURE__ */ jsx8(CardTitle, { className: "text-2xl", children: "Reset Your Password" }),
+      /* @__PURE__ */ jsx8(CardDescription, { children: "Please enter your new password below." })
+    ] }),
+    /* @__PURE__ */ jsx8(CardContent, { children: /* @__PURE__ */ jsx8("form", { onSubmit: handleUpdatePassword, children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx8(Label, { htmlFor: "password", children: "New password" }),
+        /* @__PURE__ */ jsx8(
+          Input,
+          {
+            id: "password",
+            type: "password",
+            placeholder: "New password",
+            required: true,
+            value: password,
+            onChange: (e) => setPassword(e.target.value)
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx8("p", { className: "text-sm text-red-500", children: error }),
+      /* @__PURE__ */ jsx8(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Saving..." : "Save new password" })
+    ] }) }) })
+  ] }) });
+}
+var UpdatePasswordForm_default = UpdatePasswordForm;
+
+// src/auth/AuthRouteWithLicense.tsx
+import { useSetupAuth } from "@pol-studios/auth";
+import { isUsable } from "@pol-studios/utils/types";
+import { Suspense } from "react";
+
+// src/primitives/spinner.tsx
+import { Loader2Icon } from "lucide-react";
+import { cn as cn9 } from "@pol-studios/utils";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    Loader2Icon,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn9("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+
+// src/hooks/usePOLNavigate.tsx
+import { useContext as useContext2 } from "react";
+import { useNavigate as useTanstackNavigate } from "@tanstack/react-router";
+
+// src/providers/router/RouterContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var RouterContext = createContext(null);
+
+// src/hooks/usePOLNavigate.tsx
+function usePolNavigate() {
+  const routerContext = useContext2(RouterContext);
+  let tanstackNavigate = null;
+  try {
+    tanstackNavigate = useTanstackNavigate();
+  } catch {
+  }
+  if (tanstackNavigate) {
+    return tanstackNavigate;
+  }
+  if (routerContext) {
+    return (options) => {
+      const searchValue = typeof options.search === "object" && options.search !== null ? options.search : void 0;
+      const adapterOptions = {
+        to: typeof options.to === "string" ? options.to : String(options.to),
+        params: options.params,
+        search: searchValue,
+        replace: options.replace
+      };
+      routerContext.navigate(adapterOptions);
+    };
+  }
+  throw new Error("usePOLNavigate requires either a RouterProvider or TanStack Router context");
+}
+
+// src/feedback/NotFoundView.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function NotFoundView() {
+  const navigate = usePolNavigate();
+  return /* @__PURE__ */ jsx11("section", { className: "bg-background-100 h-full", children: /* @__PURE__ */ jsx11("div", { className: "pFx-4 mx-auto max-w-screen-xl py-8 lg:px-6 lg:py-16", children: /* @__PURE__ */ jsxs5("div", { className: "mx-auto max-w-screen-sm text-center", children: [
+    /* @__PURE__ */ jsx11("h1", { className: "mb-4 text-7xl font-extrabold tracking-tight text-primary-600 lg:text-9xl", children: "404" }),
+    /* @__PURE__ */ jsx11("p", { className: "mb-4 text-3xl font-bold tracking-tight text-text-900  md:text-4xl", children: "Something's missing." }),
+    /* @__PURE__ */ jsx11("p", { className: "mb-4 text-lg text-text-400 text-text-500", children: "Sorry, we can't find that page. You'll find lots to explore on the home page." }),
+    /* @__PURE__ */ jsx11(
+      Button,
+      {
+        variant: "ghost",
+        "data-testid": "go-home-404-button",
+        className: " inline-flex",
+        onClick: () => navigate({ to: "/" }),
+        children: "Back to Homepage"
+      }
+    )
+  ] }) }) });
+}
+
+// src/auth/AuthRouteWithLicense.tsx
+import { useParams as useParams2 } from "@tanstack/react-router";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function withAccessAndLicense(component, access) {
+  return () => /* @__PURE__ */ jsx12(AuthRouteWithLicense, { component, access });
+}
+function AuthRouteWithLicense({ component: RouteComponent, access }) {
+  const { isLoading, hasAccess, user } = useSetupAuth();
+  const navigate = usePolNavigate();
+  const params = useParams2({ strict: false });
+  const loadingComponent = /* @__PURE__ */ jsx12("div", { className: "center-Items flex h-[calc(100dvh-120px)]", children: /* @__PURE__ */ jsx12(Spinner, { className: "m-auto" }) });
+  if (isUsable(user) == false || isLoading) {
+    return loadingComponent;
+  } else if (access !== void 0 && hasAccess(access) === false) {
+    if (isUsable(user) === false) {
+      navigate({ to: "/login" });
+      return loadingComponent;
+    }
+    return /* @__PURE__ */ jsx12(Suspense, { fallback: loadingComponent, children: /* @__PURE__ */ jsx12(NotFoundView, {}) });
+  }
+  return /* @__PURE__ */ jsx12(Suspense, { fallback: loadingComponent, children: /* @__PURE__ */ jsx12(RouteComponent, { ...params }) });
+}
+var AuthRouteWithLicense_default = AuthRouteWithLicense;
+export {
+  AuthRouteWithLicense_default as AuthRouteWithLicense,
+  ForgotPasswordForm,
+  ForgotPasswordForm_default as ForgotPasswordFormDefault,
+  LoginForm,
+  LoginForm_default as LoginFormDefault,
+  SignUpForm,
+  SignUpForm_default as SignUpFormDefault,
+  UpdatePasswordForm,
+  UpdatePasswordForm_default as UpdatePasswordFormDefault,
+  withAccessAndLicense
+};