create-disposabl-app 0.1.0 → 0.1.1

package/dist/templates/default/packages/disposabl-kit/client/components/ui/tooltip.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cn } from "@disposabl/disposabl-kit/client/lib/utils";
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/templates/default/packages/disposabl-kit/client/components/ui/trace.tsx

@@ -0,0 +1,161 @@
+import * as React from "react";
+import { cn } from "@disposabl/disposabl-kit/client/lib/utils";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@disposabl/disposabl-kit/client/components/ui/collapsible";
+import { ChevronRightIcon } from "lucide-react";
+
+function Trace({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="trace"
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TraceLine({
+  className,
+  status,
+  ...props
+}: React.ComponentProps<"span"> & {
+  status?: "running" | "error" | "pending";
+}) {
+  return (
+    <span
+      data-slot="trace-line"
+      data-status={status}
+      className={cn(
+        "flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TraceIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-icon"
+      aria-hidden="true"
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TraceTitle({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-title"
+      className={cn("min-w-0 truncate motion-reduce:shimmer-none", className)}
+      {...props}
+    />
+  );
+}
+
+function TraceDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-description"
+      className={cn(
+        "shrink-0 text-muted-foreground/70 tabular-nums",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TraceCollapsible({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof Collapsible>, "open"> &
+  (
+    | { open?: undefined }
+    | {
+        open: boolean;
+        onOpenChange: NonNullable<
+          React.ComponentProps<typeof Collapsible>["onOpenChange"]
+        >;
+      }
+  )) {
+  return (
+    <Collapsible
+      data-slot="trace-collapsible"
+      className={cn("flex w-full min-w-0 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function TraceCollapsibleTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger>) {
+  return (
+    <CollapsibleTrigger
+      data-slot="trace-collapsible-trigger"
+      className={cn(
+        "group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-left text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 has-[[data-status=error]]:text-destructive",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <TraceIcon className="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90">
+        <ChevronRightIcon />
+      </TraceIcon>
+    </CollapsibleTrigger>
+  );
+}
+
+function TraceCollapsibleContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  return (
+    <CollapsibleContent
+      data-slot="trace-collapsible-content"
+      className="h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0"
+      {...props}
+    >
+      <div
+        data-slot="trace-collapsible-content-inner"
+        className={cn(
+          "mt-2 mb-1 ml-[calc(--spacing(2)-1px)] min-w-0 border-l pr-1 pl-4 leading-relaxed wrap-break-word text-muted-foreground",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}
+
+export {
+  Trace,
+  TraceLine,
+  TraceIcon,
+  TraceTitle,
+  TraceDescription,
+  TraceCollapsible,
+  TraceCollapsibleTrigger,
+  TraceCollapsibleContent,
+};

package/dist/templates/default/packages/disposabl-kit/client/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/dist/templates/default/packages/disposabl-kit/client/lib/prerender.ts

@@ -0,0 +1,89 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from "@tanstack/react-router";
+import ts from "typescript";
+
+/** Read route metadata without executing route components in the Vite config. */
+function routeMatcher(source: string) {
+  const root = createRootRoute();
+  const paths = new Map<string, boolean>();
+  const file = ts.createSourceFile("routes.ts", source, ts.ScriptTarget.Latest);
+
+  function visit(node: ts.Node) {
+    if (
+      ts.isInterfaceDeclaration(node) &&
+      node.name.text === "FileRoutesByPath"
+    ) {
+      for (const member of node.members) {
+        if (
+          !ts.isPropertySignature(member) ||
+          !member.type ||
+          !ts.isTypeLiteralNode(member.type)
+        )
+          continue;
+        const fields = new Map<string, string>();
+        for (const field of member.type.members) {
+          if (
+            ts.isPropertySignature(field) &&
+            ts.isIdentifier(field.name) &&
+            field.type &&
+            ts.isLiteralTypeNode(field.type) &&
+            ts.isStringLiteral(field.type.literal)
+          ) {
+            fields.set(field.name.text, field.type.literal.text);
+          }
+        }
+        const id = fields.get("id");
+        const fullPath = fields.get("fullPath");
+        // Pathless layouts share their parent's URL; only match actual pages.
+        if (id && fullPath && fields.get("path")) {
+          paths.set(fullPath, id.split("/").includes("_authenticated"));
+        }
+      }
+    }
+    ts.forEachChild(node, visit);
+  }
+  visit(file);
+  if (paths.size === 0)
+    throw new Error(
+      "No page routes found in the generated TanStack route tree.",
+    );
+
+  const router = createRouter({
+    routeTree: root.addChildren(
+      [...paths.keys()].map((path) =>
+        createRoute({ getParentRoute: () => root, path }),
+      ),
+    ),
+  });
+  return (pathname: string) => {
+    const matches = router.matchRoutes(pathname);
+    const leaf = matches[matches.length - 1];
+    return leaf ? paths.get(leaf.fullPath) === true : false;
+  };
+}
+
+/** The authenticated layout is the single source of protected route membership. */
+export function createPrerenderFilter(
+  routeTreeFile = resolve("src/routeTree.gen.ts"),
+) {
+  let source: string | undefined;
+  let isAuthenticated: ReturnType<typeof routeMatcher> | undefined;
+  return (page: { path: string; sitemap?: { exclude?: boolean } }) => {
+    // Read lazily: Start generates the route tree after loading the Vite config.
+    const nextSource = readFileSync(routeTreeFile, "utf8");
+    if (nextSource !== source) {
+      isAuthenticated = routeMatcher(nextSource);
+      source = nextSource;
+    }
+    const authenticated = isAuthenticated!(
+      new URL(page.path, "http://localhost").pathname,
+    );
+    if (authenticated) page.sitemap = { ...page.sitemap, exclude: true };
+    return !authenticated;
+  };
+}

package/dist/templates/default/packages/disposabl-kit/client/lib/return-to.ts

@@ -0,0 +1,12 @@
+/** Allow local destinations only, including their query string and fragment. */
+export function getReturnTo(value: unknown): string | undefined {
+  if (typeof value !== "string" || !value.startsWith("/")) return;
+  const origin = "https://disposabl.invalid";
+  try {
+    const url = new URL(value, origin);
+    if (url.origin !== origin) return;
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return;
+  }
+}

package/dist/templates/default/packages/disposabl-kit/client/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn";

package/dist/templates/default/packages/disposabl-kit/client/routes/_auth-pages/login.tsx

@@ -0,0 +1,114 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useSignInWithUsernamePassword } from "@convex-dev/auth/methods/username-password/react";
+import { api } from "../../../../backend/convex/_generated/api";
+import { useState } from "react";
+import { getReturnTo } from "../../lib/return-to";
+
+export function LogIn() {
+  const { request, returnTo } = Route.useSearch();
+  const navigate = useNavigate();
+  const { signIn, pending } = useSignInWithUsernamePassword(api.auth);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+          setError(null);
+          const result = await signIn({ username, password });
+          if (result.status === "complete") {
+            if (request)
+              await navigate({ to: "/consent", search: { request } });
+            else if (returnTo) window.location.assign(returnTo);
+            return;
+          }
+          setError(() => {
+            switch (result.userError.error) {
+              case "USER_NOT_FOUND":
+                return "No account exists with that username.";
+              case "INVALID_CREDENTIALS":
+                return "Incorrect username or password.";
+              case "PASSWORD_TOO_SHORT":
+                return `Password must be at least ${result.userError.minimumLength} characters.`;
+              case "PASSWORD_TOO_LONG":
+                return `Password must be at most ${result.userError.maximumLength} characters.`;
+              case "PASSWORD_HAS_SURROUNDING_WHITESPACE":
+                return "Password can't start or end with whitespace.";
+              case "RATE_LIMITED":
+                return `Too many attempts. Try again in ${Math.ceil(result.userError.retryAfterMs / 1000)} seconds.`;
+              case "OTHER_ERROR":
+                // The mutation threw unexpectedly; the original error is
+                // available on `cause` if you want to log or inspect it.
+                console.error("Sign-in failed:", result.userError.cause);
+                return "Something went wrong. Please try again.";
+              default:
+                result.userError satisfies never;
+                console.error("Sign-in failed:", result.userError);
+                return "Something went wrong. Please try again.";
+            }
+          });
+        }}
+      >
+        <h1>Log in</h1>
+        <label htmlFor="username">
+          Username
+          <input
+            // Using a static id to help password managers behave correctly
+            id="username"
+            name="username"
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            autoComplete="username"
+            required
+            disabled={pending}
+          />
+        </label>
+        <label htmlFor="password">
+          Password
+          <input
+            // Using a static id to help password managers behave correctly
+            id="password"
+            name="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="current-password"
+            required
+            disabled={pending}
+          />
+        </label>
+        {error ? (
+          <p role="alert">
+            <strong>{error}</strong>
+          </p>
+        ) : null}
+        <button type="submit" disabled={pending}>
+          {pending ? "Logging in…" : "Log in"}
+        </button>
+      </form>
+      <p>
+        Don't have an account?{" "}
+        <Link to="/signup" search={{ request, returnTo }}>
+          Sign up
+        </Link>
+      </p>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_providers/login")({
+  validateSearch: (
+    search: Record<string, unknown>,
+  ): { request?: string; returnTo?: string } => ({
+    returnTo: getReturnTo(search.returnTo),
+    request:
+      typeof search.request === "string"
+        ? search.request.trim() || undefined
+        : undefined,
+  }),
+  component: LogIn,
+});

package/dist/templates/default/packages/disposabl-kit/client/routes/_auth-pages/signUp.tsx

@@ -0,0 +1,120 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { DEFAULT_MIN_PASSWORD_LENGTH } from "@convex-dev/auth/methods/username-password";
+import { useSignUpWithUsernamePassword } from "@convex-dev/auth/methods/username-password/react";
+import { api } from "../../../../backend/convex/_generated/api";
+import { useState } from "react";
+import { getReturnTo } from "../../lib/return-to";
+
+export function SignUp() {
+  const { request, returnTo } = Route.useSearch();
+  const navigate = useNavigate();
+  const { signUp, pending } = useSignUpWithUsernamePassword(api.auth);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+          setError(null);
+          const result = await signUp({ username, password });
+          if (result.status === "complete") {
+            if (request)
+              await navigate({ to: "/consent", search: { request } });
+            else if (returnTo) window.location.assign(returnTo);
+            return;
+          }
+          setError(() => {
+            switch (result.userError.error) {
+              case "USERNAME_TAKEN":
+                return "That username is already taken.";
+              case "USERNAME_TOO_SHORT":
+                return `Username must be at least ${result.userError.minimumLength} characters.`;
+              case "USERNAME_HAS_SURROUNDING_WHITESPACE":
+                return "Username can't start or end with whitespace.";
+              case "USERNAME_HAS_INVALID_CHARACTERS":
+                return "Username contains characters that aren't allowed.";
+              case "PASSWORD_TOO_SHORT":
+                return `Password must be at least ${result.userError.minimumLength} characters.`;
+              case "PASSWORD_TOO_LONG":
+                return `Password must be at most ${result.userError.maximumLength} characters.`;
+              case "PASSWORD_HAS_SURROUNDING_WHITESPACE":
+                return "Password can't start or end with whitespace.";
+              case "PASSWORD_TOO_COMMON":
+                return "This password is one of the most commonly used passwords. Please choose a different one.";
+              case "OTHER_ERROR":
+                // The mutation threw unexpectedly; the original error is
+                // available on `cause` if you want to log or inspect it.
+                console.error("Sign-up failed:", result.userError.cause);
+                return "Something went wrong. Please try again.";
+              default:
+                result.userError satisfies never;
+                console.error("Sign-up failed:", result.userError);
+                return "Something went wrong. Please try again.";
+            }
+          });
+        }}
+      >
+        <h1>Sign up</h1>
+        <label htmlFor="username">
+          Username
+          <input
+            // Using a static id to help password managers behave correctly
+            id="username"
+            name="username"
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            autoComplete="username"
+            required
+            disabled={pending}
+          />
+        </label>
+        <label htmlFor="password">
+          Password
+          <input
+            // Using a static id to help password managers behave correctly
+            id="password"
+            name="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="new-password"
+            minLength={DEFAULT_MIN_PASSWORD_LENGTH}
+            required
+            disabled={pending}
+          />
+        </label>
+        {error ? (
+          <p role="alert">
+            <strong>{error}</strong>
+          </p>
+        ) : null}
+        <button type="submit" disabled={pending}>
+          {pending ? "Creating account…" : "Create account"}
+        </button>
+      </form>
+      <p>
+        Already have an account?{" "}
+        <Link to="/login" search={{ request, returnTo }}>
+          Log in
+        </Link>
+      </p>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_providers/signup")({
+  validateSearch: (
+    search: Record<string, unknown>,
+  ): { request?: string; returnTo?: string } => ({
+    returnTo: getReturnTo(search.returnTo),
+    request:
+      typeof search.request === "string"
+        ? search.request.trim() || undefined
+        : undefined,
+  }),
+  component: SignUp,
+});

package/dist/templates/default/packages/disposabl-kit/client/routes/_authenticated/route.tsx

@@ -0,0 +1,38 @@
+import {
+  createFileRoute,
+  Navigate,
+  Outlet,
+  useRouterState,
+} from "@tanstack/react-router";
+import { Authenticated, AuthLoading, Unauthenticated } from "convex/react";
+import { useState } from "react";
+import { Spinner } from "../../components/ui/spinner";
+
+export const Route = createFileRoute("/_providers/_authenticated")({
+  ssr: false,
+  head: () => ({ meta: [{ name: "robots", content: "noindex, nofollow" }] }),
+  component: function AuthenticatedLayout() {
+    return (
+      <>
+        <Authenticated>
+          <Outlet />
+        </Authenticated>
+        <Unauthenticated>
+          <SignInRedirect />
+        </Unauthenticated>
+        <AuthLoading>
+          <Spinner className="h-10 w-10 animate-spin" />
+        </AuthLoading>
+      </>
+    );
+  },
+});
+
+function SignInRedirect() {
+  const href = useRouterState({
+    select: (state) => state.location.href,
+  });
+  // Keep the destination stable while navigating away from the protected route.
+  const [returnTo] = useState(href);
+  return <Navigate to="/login" search={{ returnTo }} />;
+}