@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/blocks/auth/linked-accounts-block.tsx

@@ -1,203 +0,0 @@
-"use client"
-
-import { AnimatePresence, MotionConfig, motion } from "motion/react"
-import * as React from "react"
-
-import {
-  SOCIAL_PROVIDERS,
-} from "@/components/composed/social-providers"
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardPanel,
-  CardTitle,
-} from "@/components/ui/card"
-import { Spinner } from "@/components/ui/spinner"
-import { cn } from "@/lib/utils"
-import { AuthError, EASE } from "./auth-shell"
-import type { ILinkedAccountsBlockProps } from "./type"
-import type { TSocialProvider } from "@/components/composed/types"
-import { Users2 } from "lucide-react"
-
-
-const LAST_METHOD_EXPLANATION =
-  "This is your only way to sign in, so it can't be disconnected."
-
-/**
- * Settings panel for the sign-in identities attached to an account: lists the
- * connected ones, offers connect buttons for the rest, and guards the last
- * remaining method from being disconnected — the guard is a disabled button
- * plus an explanation rather than an error after the fact.
- */
-export function LinkedAccountsBlock({
-  title = "Connected accounts",
-  description = "Manage the accounts you can use to sign in.",
-  identities = [],
-  providers = ["google", "apple", "github"],
-  loading = false,
-  hasOtherSignInMethods = false,
-  onLink,
-  onUnlink,
-  className,
-}: ILinkedAccountsBlockProps) {
-  const noteId = React.useId()
-  const [error, setError] = React.useState<string | null>(null)
-  const [linking, setLinking] = React.useState<TSocialProvider | null>(null)
-  const [unlinking, setUnlinking] = React.useState<string | null>(null)
-
-  const connected = new Set(identities.map((identity) => identity.provider))
-  const connectable = providers.filter((provider) => !connected.has(provider))
-  const busy = linking !== null || unlinking !== null
-  // The backend rule, enforced here so we never fire a request that would
-  // remove the account's only way in. An off-list method (a password) keeps
-  // the account reachable, so it lifts the guard.
-  const lastMethod = !hasOtherSignInMethods && identities.length <= 1
-
-  async function connect(provider: TSocialProvider) {
-    if (busy) return
-    setError(null)
-    setLinking(provider)
-    try {
-      await onLink?.(provider)
-    } catch (cause) {
-      setError(
-        cause instanceof Error ? cause.message : "Unable to connect account."
-      )
-    } finally {
-      setLinking(null)
-    }
-  }
-
-  async function disconnect(id: string) {
-    if (busy || lastMethod) return
-    setError(null)
-    setUnlinking(id)
-    try {
-      await onUnlink?.(id)
-    } catch (cause) {
-      setError(
-        cause instanceof Error ? cause.message : "Unable to disconnect account."
-      )
-    } finally {
-      setUnlinking(null)
-    }
-  }
-
-  return (
-    <MotionConfig reducedMotion="user">
-      <Card className={cn("w-full", className)} data-slot="auth-block">
-        <CardHeader>
-          <CardTitle className="inline-flex items-center gap-1"><Users2 size={18} /> {title}</CardTitle>
-          <CardDescription>{description}</CardDescription>
-        </CardHeader>
-        <CardPanel>
-          {loading ? (
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <Spinner className="size-4" />
-              Loading connected accounts…
-            </div>
-          ) : (
-            <motion.div
-              layout
-              transition={{ duration: 0.3, ease: EASE }}
-              className="flex flex-col gap-3"
-            >
-              <AuthError message={error} />
-
-              {identities.length > 0 ? (
-                <ul
-                  aria-label="Connected accounts"
-                  className="flex flex-col gap-2"
-                >
-                  <AnimatePresence initial={false}>
-                    {identities.map((identity, index) => {
-                      const { label, BrandIcon, brandClassName } =
-                        SOCIAL_PROVIDERS[identity.provider]
-                      return (
-                        <motion.li
-                          key={identity.id}
-                          layout
-                          className="flex items-center justify-between gap-3 rounded-md border px-3 py-2"
-                          initial={{ opacity: 0, y: -4 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          exit={{ opacity: 0, y: -4 }}
-                          // 40ms per row, capped so a long identity list never
-                          // leaves the last row arriving noticeably late.
-                          transition={{
-                            duration: 0.25,
-                            ease: EASE,
-                            delay: Math.min(index, 5) * 0.04,
-                          }}
-                        >
-                          <div className="flex min-w-0 items-center gap-2.5">
-                            <BrandIcon
-                              aria-hidden="true"
-                              className={cn("size-4", brandClassName)}
-                            />
-                            <div className="flex min-w-0 flex-col">
-                              <span className="text-sm font-medium">
-                                {label}
-                              </span>
-                              {identity.email && (
-                                <span className="truncate text-xs text-muted-foreground">
-                                  {identity.email}
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                          <Button
-                            aria-describedby={lastMethod ? noteId : undefined}
-                            aria-label={`Disconnect ${label}`}
-                            size="sm"
-                            type="button"
-                            variant="destructive-outline"
-                            disabled={busy || lastMethod}
-                            loading={unlinking === identity.id}
-                            onClick={() => void disconnect(identity.id)}
-                          >
-                            Disconnect
-                          </Button>
-                        </motion.li>
-                      )
-                    })}
-                  </AnimatePresence>
-                </ul>
-              ) : (
-                <p className="text-sm text-muted-foreground">
-                  No sign-in methods connected yet.
-                </p>
-              )}
-
-              {lastMethod && identities.length > 0 && (
-                <p className="text-xs text-muted-foreground" id={noteId}>
-                  {LAST_METHOD_EXPLANATION}
-                </p>
-              )}
-
-              {connectable.map((provider) => {
-                const { label, BrandIcon, brandClassName, buttonClassName, labelClassName } =
-                  SOCIAL_PROVIDERS[provider]
-                return (
-                  <Button
-                    key={provider}
-                    className={cn("w-full", buttonClassName)}
-                    type="button"
-                    variant="outline"
-                    disabled={busy}
-                    loading={linking === provider}
-                    onClick={() => void connect(provider)}
-                  >
-                    <BrandIcon aria-hidden="true" className={brandClassName} />
-                    <span className={cn("flex-1", labelClassName)}>Connect {label}</span>
-                  </Button>
-                )
-              })}
-            </motion.div>
-          )}
-        </CardPanel>
-      </Card>
-    </MotionConfig>
-  )
-}

package/src/components/blocks/auth/login-block.tsx

@@ -1,217 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { PasswordInput } from "@/components/composed/password-input";
-import {
-  SocialProviders,
-} from "@/components/composed/social-providers";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Field, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { authAccentActionStyles } from "@/lib/auth-accent";
-import { cn } from "@/lib/utils";
-import {
-  AuthCard,
-  AuthError,
-  AuthSeparator,
-  AuthSuccess,
-  MorphStep,
-  Reveal,
-} from "./auth-shell";
-import type { ILoginBlockProps, TAuthStatus } from "./type";
-import type { TSocialProvider } from "@/components/composed/types";
-
-export function LoginBlock({
-  title = "Login to your account",
-  description = "Enter your email and password to login",
-  logo,
-  accent,
-  providers = ["google", "apple", "github"],
-  showRememberMe = true,
-  showForgotPassword = true,
-  onSubmit,
-  onProviderSelect,
-  onForgotPassword,
-  onSignup,
-}: ILoginBlockProps) {
-  const emailId = React.useId();
-  const rememberId = React.useId();
-  const [status, setStatus] = React.useState<TAuthStatus>("idle");
-  const [error, setError] = React.useState<string | null>(null);
-  const [loadingProvider, setLoadingProvider] =
-    React.useState<TSocialProvider | null>(null);
-  const [remember, setRemember] = React.useState(false);
-  const [email, setEmail] = React.useState("");
-  const [emailValid, setEmailValid] = React.useState(false);
-  const [password, setPassword] = React.useState("");
-
-  const busy = status === "loading" || loadingProvider !== null;
-
-  // Progressive disclosure: each step unlocks the next. The password field is
-  // gated on the email input's own constraint validation (required + type
-  // email), the submit button on the password being non-empty — a login form
-  // verifies a credential rather than enforcing policy, so strength rules here
-  // would lock out anyone whose password predates them. The submit gate
-  // re-checks emailValid so a stale password (typed, then the email was edited
-  // back into an invalid state) can't leave the button on its own.
-  const passwordValid = password.trim().length > 0;
-  const canSubmit = emailValid && passwordValid;
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    // Enter in any field submits the form even while the button is hidden.
-    if (!canSubmit) return;
-    const form = new FormData(event.currentTarget);
-    setError(null);
-    setStatus("loading");
-    try {
-      await onSubmit?.({
-        email: String(form.get("email") ?? ""),
-        password: String(form.get("password") ?? ""),
-        remember,
-      });
-      setStatus("success");
-    } catch (cause) {
-      setStatus("idle");
-      setError(cause instanceof Error ? cause.message : "Unable to login.");
-    }
-  }
-
-  async function handleProvider(provider: TSocialProvider) {
-    setError(null);
-    setLoadingProvider(provider);
-    try {
-      await onProviderSelect?.(provider);
-      setStatus("success");
-    } catch (cause) {
-      setError(
-        cause instanceof Error ? cause.message : "Unable to login.",
-      );
-    } finally {
-      setLoadingProvider(null);
-    }
-  }
-
-  return (
-    <AuthCard
-      title={title}
-      description={description}
-      logo={logo}
-      accent={accent}
-      footer={
-        status !== "success" && (
-          <>
-            Don&apos;t have an account?{" "}
-            <Button variant="link" onClick={onSignup}>
-              Sign up
-            </Button>
-          </>
-        )
-      }
-    >
-      <MorphStep step={status === "success" ? "success" : "form"}>
-        {status === "success" ? (
-          <AuthSuccess
-            title="Welcome back"
-            description="You are now logged in."
-          />
-        ) : (
-          <div className="flex flex-col gap-4">
-            <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
-              <Field name="email">
-                <FieldLabel htmlFor={emailId}>Email</FieldLabel>
-                <Input
-                  id={emailId}
-                  aria-label="Email"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
-                  placeholder="you@example.com"
-                  required
-                  disabled={busy}
-                  value={email}
-                  onChange={(event) => {
-                    setEmail(event.currentTarget.value);
-                    setEmailValid(event.currentTarget.validity.valid);
-                  }}
-                />
-              </Field>
-              <Reveal show={emailValid}>
-                <Field name="password">
-                  <FieldLabel htmlFor="password">Password</FieldLabel>
-                  <PasswordInput
-                    id="password"
-                    name="password"
-                    autoComplete="current-password"
-                    required
-                    disabled={busy}
-                    value={password}
-                    onChange={(event) => setPassword(event.target.value)}
-                  />
-                  {showForgotPassword && (
-                    // self-end: Field root is items-start, so this aligns the
-                    // link with the input's trailing edge. sm:text-xs is
-                    // required — the cva's sm:text-sm survives tailwind-merge
-                    // and would otherwise win at the breakpoint.
-                    <Button
-                      variant="link"
-                      type="button"
-                      className="self-end font-normal text-muted-foreground text-xs hover:text-foreground sm:text-xs"
-                      onClick={onForgotPassword}
-                    >
-                      Forgot password?
-                    </Button>
-                  )}
-                </Field>
-              </Reveal>
-              {showRememberMe && (
-                <div className="flex items-center gap-2">
-                  <Checkbox
-                    id={rememberId}
-                    checked={remember}
-                    onCheckedChange={(checked) => setRemember(checked)}
-                    disabled={busy}
-                  />
-                  <Label htmlFor={rememberId} className="font-normal">
-                    Remember me
-                  </Label>
-                </div>
-              )}
-              <AuthError message={error} />
-              <Reveal show={canSubmit}>
-                <Button
-                  className={cn("w-full", accent && authAccentActionStyles)}
-                  type="submit"
-                  loading={status === "loading"}
-                  disabled={busy}
-                >
-                  Login
-                </Button>
-              </Reveal>
-            </form>
-            {providers.length > 0 && (
-              // The social providers retire once the email path is filled in
-              // and valid — the user has committed to a path, so the
-              // alternatives are just noise. They come back if a field is
-              // invalidated again. gap-4 on the wrapper reproduces the spacing
-              // the two children had as direct flex items of the column above.
-              <Reveal show={!canSubmit} className="flex flex-col gap-4">
-                <AuthSeparator label="Or continue with" />
-                <SocialProviders
-                  providers={providers}
-                  action="login"
-                  loadingProvider={loadingProvider}
-                  disabled={status === "loading"}
-                  onSelect={handleProvider}
-                />
-              </Reveal>
-            )}
-          </div>
-        )}
-      </MorphStep>
-    </AuthCard>
-  );
-}

package/src/components/blocks/auth/onboarding/profile-step.tsx

@@ -1,216 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Field, FieldError, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { cn } from "@/lib/utils";
-import type {
-    IProfileStepProps,
-  TOnboardingFieldConfig,
-  TOnboardingValue,
-} from "../type";
-
-
-function initialValue(
-  field: TOnboardingFieldConfig,
-  saved: TOnboardingValue | undefined,
-): TOnboardingValue {
-  if (field.kind === "checkbox") return typeof saved === "boolean" ? saved : false;
-  return typeof saved === "string" ? saved : "";
-}
-
-/** Built-in validation, mirroring the declared `FieldConfig` contract. */
-function validateField(
-  field: TOnboardingFieldConfig,
-  value: TOnboardingValue,
-): string | null {
-  const required = field.required === true;
-
-  if (field.kind === "checkbox") {
-    if (required && value !== true) return `${field.label} is required`;
-    return null;
-  }
-
-  const text = typeof value === "string" ? value.trim() : "";
-  if (required && text.length === 0) return `${field.label} is required`;
-
-  if (field.kind === "url" && text.length > 0) {
-    try {
-      new URL(text);
-    } catch {
-      return "Enter a valid URL";
-    }
-  }
-
-  if (field.kind === "select" && text.length > 0) {
-    const allowed = field.options.map((option) => option.value);
-    if (!allowed.includes(text)) {
-      return `Choose a valid option for ${field.label}`;
-    }
-  }
-
-  return field.validate?.(text) ?? null;
-}
-
-/**
- * Renders one declared profile step: `OnboardingFieldConfig[]` → labeled
- * controls, validated locally before anything is handed to `onSubmit`. Mounted
- * keyed by `step.id` so drafts re-seed per step.
- */
-export function ProfileStep({
-  step,
-  values,
-  submitting = false,
-  submitLabel,
-  onSubmit,
-  onBack,
-  onDraftChange,
-}: IProfileStepProps) {
-  const idPrefix = React.useId();
-  const [draft, setDraft] = React.useState<Record<string, TOnboardingValue>>(
-    () =>
-      Object.fromEntries(
-        step.fields.map((field) => [
-          field.name,
-          initialValue(field, values[field.name]),
-        ]),
-      ),
-  );
-  const [errors, setErrors] = React.useState<Record<string, string>>({});
-
-  function setValue(name: string, value: TOnboardingValue) {
-    setDraft((current) => ({ ...current, [name]: value }));
-    onDraftChange?.(name, value);
-    // Clear a field's error as soon as it is edited; re-validation happens on
-    // the next submit rather than on every keystroke.
-    setErrors((current) =>
-      current[name] ? { ...current, [name]: "" } : current,
-    );
-  }
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (submitting) return;
-
-    const next: Record<string, string> = {};
-    for (const field of step.fields) {
-      const message = validateField(field, draft[field.name]);
-      if (message) next[field.name] = message;
-    }
-    if (Object.keys(next).length > 0) {
-      setErrors(next);
-      return;
-    }
-    setErrors({});
-
-    const submitted: Record<string, TOnboardingValue> = {};
-    for (const field of step.fields) {
-      const value = draft[field.name];
-      submitted[field.name] = typeof value === "string" ? value.trim() : value;
-    }
-    await onSubmit(submitted);
-  }
-
-  return (
-    <form className="flex flex-col gap-4" noValidate onSubmit={handleSubmit}>
-      {step.fields.map((field) => {
-        const error = errors[field.name] || undefined;
-        const controlId = `${idPrefix}-${field.name}`;
-        const value = draft[field.name];
-
-        if (field.kind === "checkbox") {
-          return (
-            <Field
-              key={field.name}
-              name={field.name}
-              invalid={Boolean(error)}
-              className="gap-1.5"
-            >
-              <div className="flex items-center gap-2">
-                <Checkbox
-                  id={controlId}
-                  checked={value === true}
-                  disabled={submitting}
-                  onCheckedChange={(checked) => setValue(field.name, checked)}
-                />
-                <Label htmlFor={controlId} className="font-normal">
-                  {field.label}
-                </Label>
-              </div>
-              {error && <FieldError match>{error}</FieldError>}
-            </Field>
-          );
-        }
-
-        return (
-          <Field key={field.name} name={field.name} invalid={Boolean(error)}>
-            <FieldLabel htmlFor={controlId}>{field.label}</FieldLabel>
-            {field.kind === "textarea" ? (
-              <Textarea
-                id={controlId}
-                aria-invalid={error ? true : undefined}
-                disabled={submitting}
-                placeholder={field.placeholder}
-                value={String(value ?? "")}
-                onChange={(event) => setValue(field.name, event.target.value)}
-              />
-            ) : field.kind === "select" ? (
-              // No select atom exists in the library yet; a native control
-              // styled to match Input keeps the flow self-contained without
-              // inventing one here.
-              <select
-                id={controlId}
-                aria-invalid={error ? true : undefined}
-                className={cn(
-                  "h-8.5 w-full rounded-md border border-input bg-background px-[calc(--spacing(3)-1px)] text-base text-foreground shadow-xs/5 outline-none transition-[box-shadow,border-color] duration-150 ease-smooth-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24 disabled:opacity-64 aria-invalid:border-destructive/36 sm:h-7.5 sm:text-sm dark:bg-input/32",
-                )}
-                disabled={submitting}
-                value={String(value ?? "")}
-                onChange={(event) => setValue(field.name, event.target.value)}
-              >
-                <option value="">{field.placeholder ?? "Choose an option"}</option>
-                {field.options.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <Input
-                id={controlId}
-                aria-invalid={error ? true : undefined}
-                disabled={submitting}
-                placeholder={field.placeholder}
-                type={field.kind === "url" ? "url" : "text"}
-                value={String(value ?? "")}
-                onChange={(event) => setValue(field.name, event.target.value)}
-              />
-            )}
-            {error && <FieldError match>{error}</FieldError>}
-          </Field>
-        );
-      })}
-
-      <div className="flex gap-2">
-        {onBack && (
-          <Button
-            type="button"
-            variant="outline"
-            disabled={submitting}
-            onClick={onBack}
-          >
-            Back
-          </Button>
-        )}
-        <Button className="flex-1" type="submit" loading={submitting}>
-          {submitLabel}
-        </Button>
-      </div>
-    </form>
-  );
-}