@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/auth/login-page.tsx

@@ -0,0 +1,206 @@
+import { AppleIcon, Globe2Icon, LogInIcon, OrbitIcon } from "lucide-react";
+import { useState, type FormEvent } from "react";
+import { Button } from "../../components/button";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "../../components/field";
+import { Input } from "../../components/input";
+import {
+  AuthPageLayout,
+  AuthVisualPanel,
+  type AuthPageVariant,
+} from "./auth-page-layout";
+
+export type LoginPageProps = {
+  brandName?: string;
+  busy?: boolean;
+  description?: string;
+  devLoginEnabled?: boolean;
+  embedded?: boolean;
+  error?: string;
+  forgotHref?: string | null;
+  onSubmit(identifier: string, password: string): void;
+  onDevLogin?: () => void;
+  registerHref?: string | null;
+  title?: string;
+  variant?: AuthPageVariant;
+};
+
+export function LoginPage({
+  brandName,
+  busy = false,
+  description,
+  devLoginEnabled = false,
+  embedded = false,
+  error,
+  forgotHref = "/password/forgot",
+  onSubmit,
+  onDevLogin,
+  registerHref = "/register",
+  title,
+  variant = "v1",
+}: LoginPageProps) {
+  const [identifier, setIdentifier] = useState("");
+  const [password, setPassword] = useState("");
+
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    onSubmit(identifier, password);
+  }
+
+  return (
+    <AuthPageLayout
+      aside={
+        <AuthVisualPanel
+          description="Keep projects, people, and trusted application access in one connected workspace."
+          title="One workspace. Every application."
+        />
+      }
+      brandName={brandName}
+      embedded={embedded}
+      variant={variant}
+    >
+      <form className="grid gap-6" onSubmit={submit}>
+        <header
+          className={
+            variant === "v2" ? "grid gap-1.5 text-center" : "grid gap-2"
+          }
+        >
+          <h1 className="text-2xl font-semibold tracking-tight">
+            {title ?? (variant === "v2" ? "Welcome back" : "Welcome")}
+          </h1>
+          <p className="text-sm leading-6 text-muted-foreground">
+            {description ??
+              (variant === "v2"
+                ? "Sign in to continue to your CODEXSUN workspace."
+                : "Use your admin username or email and password for this desk.")}
+          </p>
+        </header>
+        {variant === "v1" ? <div className="border-t" /> : null}
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor={`login-${variant}-identifier`}>
+              Username or email
+            </FieldLabel>
+            <Input
+              autoComplete="username"
+              className="h-11"
+              id={`login-${variant}-identifier`}
+              onChange={(event) => setIdentifier(event.target.value)}
+              placeholder={variant === "v2" ? "Username or email" : undefined}
+              required
+              type="text"
+              value={identifier}
+            />
+          </Field>
+          {devLoginEnabled && onDevLogin ? (
+            <Button
+              className="w-full"
+              disabled={busy}
+              onClick={onDevLogin}
+              type="button"
+              variant="outline"
+            >
+              Development sign in
+            </Button>
+          ) : null}
+          <Field>
+            <div className={variant === "v2" ? "flex items-center gap-4" : ""}>
+              <FieldLabel htmlFor={`login-${variant}-password`}>
+                Password
+              </FieldLabel>
+              {variant === "v2" && forgotHref ? (
+                <a
+                  className="ml-auto text-sm underline-offset-4 hover:underline"
+                  href={forgotHref}
+                >
+                  Forgot your password?
+                </a>
+              ) : null}
+            </div>
+            <Input
+              autoComplete="current-password"
+              className="h-11"
+              id={`login-${variant}-password`}
+              minLength={8}
+              onChange={(event) => setPassword(event.target.value)}
+              required
+              type="password"
+              value={password}
+            />
+          </Field>
+          {error ? (
+            <p className="text-sm text-destructive" role="alert">
+              {error}
+            </p>
+          ) : null}
+          {variant === "v1" && forgotHref ? (
+            <a
+              className="text-center text-sm font-medium hover:underline"
+              href={forgotHref}
+            >
+              Forgot password?
+            </a>
+          ) : null}
+          <Field>
+            <Button
+              className="w-full"
+              disabled={busy}
+              type="submit"
+              variant={variant === "v1" ? "success" : "default"}
+            >
+              {variant === "v1" ? <LogInIcon /> : null}
+              {busy ? "Signing in…" : variant === "v2" ? "Login" : "Sign in"}
+            </Button>
+          </Field>
+          {variant === "v2" ? <ProviderActions /> : null}
+          {registerHref ? (
+            <FieldDescription className="text-center">
+              Don&apos;t have an account? <a href={registerHref}>Sign up</a>
+            </FieldDescription>
+          ) : null}
+        </FieldGroup>
+      </form>
+    </AuthPageLayout>
+  );
+}
+
+function ProviderActions() {
+  return (
+    <>
+      <FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
+        Or continue with
+      </FieldSeparator>
+      <Field className="grid grid-cols-3 gap-3">
+        <Button
+          aria-label="Login with Apple"
+          size="icon"
+          type="button"
+          variant="outline"
+        >
+          <AppleIcon />
+        </Button>
+        <Button
+          aria-label="Login with Google"
+          size="icon"
+          type="button"
+          variant="outline"
+        >
+          <Globe2Icon />
+        </Button>
+        <Button
+          aria-label="Login with another provider"
+          size="icon"
+          type="button"
+          variant="outline"
+        >
+          <OrbitIcon />
+        </Button>
+      </Field>
+    </>
+  );
+}

package/src/blocks/auth/password-forgot-page.tsx

@@ -0,0 +1,60 @@
+import { useState, type FormEvent } from 'react'
+import { Button } from '../../components/button'
+import { Input } from '../../components/input'
+import { Field, FieldGroup, FieldLabel } from '../../components/field'
+import { AuthPageLayout } from './auth-page-layout'
+
+export interface PasswordForgotPageProps {
+  backHref: string
+  embedded?: boolean
+  onSubmit(identifier: string): void
+}
+
+export function PasswordForgotPage({
+  backHref,
+  embedded = false,
+  onSubmit,
+}: PasswordForgotPageProps) {
+  const [identifier, setIdentifier] = useState('')
+  return (
+    <AuthPageLayout embedded={embedded} variant="v1">
+      <form
+        className="grid gap-6"
+        onSubmit={(event: FormEvent) => {
+          event.preventDefault()
+          onSubmit(identifier)
+        }}
+      >
+        <header className="grid gap-2">
+          <h1 className="text-2xl font-semibold tracking-tight">Reset your password</h1>
+          <p className="text-sm leading-6 text-muted-foreground">
+            Enter your username or email. The response does not reveal whether an account exists.
+          </p>
+        </header>
+        <div className="border-t" />
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="recovery-identifier">Username or email</FieldLabel>
+            <Input
+              className="h-11"
+              id="recovery-identifier"
+              type="text"
+              value={identifier}
+              onChange={(event) => setIdentifier(event.target.value)}
+              required
+            />
+          </Field>
+          <Button className="w-full" type="submit">
+            Request reset
+          </Button>
+          <a
+            className="text-center text-sm text-muted-foreground hover:text-foreground"
+            href={backHref}
+          >
+            Back to sign in
+          </a>
+        </FieldGroup>
+      </form>
+    </AuthPageLayout>
+  )
+}

package/src/blocks/auth/portal-pages.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react'
+
+function PortalPage({
+  children,
+  label,
+  title,
+}: {
+  children?: ReactNode
+  label: string
+  title: string
+}) {
+  return (
+    <div className="min-h-full bg-background p-8">
+      <div className="mx-auto max-w-6xl space-y-3">
+        <p className="text-sm font-medium text-muted-foreground">{label}</p>
+        <h1 className="text-3xl font-semibold tracking-tight">{title}</h1>
+        <p className="text-muted-foreground">Your authenticated workspace is ready.</p>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export function ClientPortalPage() {
+  return <PortalPage label="Client portal" title="Workspace" />
+}
+export function AdminPortalPage() {
+  return <PortalPage label="Administration" title="Administrator desk" />
+}
+export function SuperAdminPortalPage() {
+  return <PortalPage label="System control" title="Super administrator desk" />
+}

package/src/blocks/auth/privileged-desk.tsx

@@ -0,0 +1,55 @@
+import { LayoutDashboardIcon, ShieldCheckIcon, WrenchIcon } from 'lucide-react'
+import { MainWorkspace } from '../../layouts/mdi-main/mdi-main'
+import type { MdiNavigationSection } from '../../layouts/mdi-main/mdi-types'
+
+export function PrivilegedDesk({
+  applicationId,
+  applicationName,
+  logout,
+  portal,
+}: {
+  applicationId: string
+  applicationName: string
+  logout(): void
+  portal: 'admin' | 'super-admin'
+}) {
+  const superAdmin = portal === 'super-admin'
+  const title = `${applicationName} ${superAdmin ? 'Super Admin' : 'Admin'} Desk`
+  return (
+    <MainWorkspace
+      applicationId={applicationId}
+      applicationName={applicationName}
+      navigation={superAdmin ? superAdminNavigation() : adminNavigation()}
+      primaryAction={null}
+      user={{
+        initials: superAdmin ? 'SA' : 'A',
+        name: superAdmin ? 'Super administrator' : 'Administrator',
+        onSignOut: logout,
+      }}
+      workspaceTitle={title}
+    >
+      <main className="p-6">
+        <h1 className="text-lg font-semibold">{title}</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {superAdmin
+            ? 'Maintenance, access controls, and higher-end reports.'
+            : 'Manager approvals, administration controls, and reports.'}
+        </p>
+      </main>
+    </MainWorkspace>
+  )
+}
+
+function adminNavigation(): MdiNavigationSection[] {
+  return [
+    { items: [{ active: true, icon: LayoutDashboardIcon, label: 'Overview' }], label: 'Desk' },
+    { items: [{ icon: ShieldCheckIcon, label: 'Approvals' }, { icon: LayoutDashboardIcon, label: 'Reports' }], label: 'Administration' },
+  ]
+}
+
+function superAdminNavigation(): MdiNavigationSection[] {
+  return [
+    { items: [{ active: true, icon: LayoutDashboardIcon, label: 'Overview' }], label: 'Maintenance' },
+    { items: [{ icon: WrenchIcon, label: 'System maintenance' }, { icon: ShieldCheckIcon, label: 'Access audit' }, { icon: LayoutDashboardIcon, label: 'Higher-end reports' }], label: 'Platform' },
+  ]
+}

package/src/blocks/auth/register-page.tsx

@@ -0,0 +1,117 @@
+import { useState, type FormEvent } from 'react'
+import { Button } from '../../components/button'
+import { Field, FieldGroup, FieldLabel } from '../../components/field'
+import { Input } from '../../components/input'
+import { AuthPageLayout, AuthVisualPanel, type AuthPageVariant } from './auth-page-layout'
+
+export function RegisterPage({
+  embedded = false,
+  onSubmit,
+  variant = 'v1',
+}: {
+  embedded?: boolean
+  onSubmit(name: string, email: string, password: string, username?: string, mobile?: string): void
+  variant?: AuthPageVariant
+}) {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [username, setUsername] = useState('')
+  const [mobile, setMobile] = useState('')
+  return (
+    <AuthPageLayout
+      aside={
+        <AuthVisualPanel
+          description="Create one trusted identity for projects, agents, and connected application desks."
+          title="Start with a secure workspace."
+        />
+      }
+      embedded={embedded}
+      variant={variant}
+    >
+      <form
+        className="grid gap-6"
+        onSubmit={(event: FormEvent) => {
+          event.preventDefault()
+          onSubmit(name, email, password, username || undefined, mobile || undefined)
+        }}
+      >
+        <header className={variant === 'v2' ? 'grid gap-1.5 text-center' : 'grid gap-2'}>
+          <h1 className="text-2xl font-semibold tracking-tight">Create an account</h1>
+          <p className="text-sm leading-6 text-muted-foreground">
+            Register your CODEXSUN workspace identity.
+          </p>
+        </header>
+        {variant === 'v1' ? <div className="border-t" /> : null}
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor={`register-${variant}-name`}>Name</FieldLabel>
+            <Input
+              className="h-11"
+              id={`register-${variant}-name`}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              required
+            />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor={`register-${variant}-email`}>Email</FieldLabel>
+            <Input
+              className="h-11"
+              id={`register-${variant}-email`}
+              type="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              required
+            />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor={`register-${variant}-password`}>Password</FieldLabel>
+            <Input
+              className="h-11"
+              id={`register-${variant}-password`}
+              type="password"
+              minLength={8}
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              required
+            />
+          </Field>
+          {variant === 'v2' ? (
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field>
+                <FieldLabel htmlFor="register-v2-username">Username (optional)</FieldLabel>
+                <Input
+                  className="h-11"
+                  id="register-v2-username"
+                  minLength={3}
+                  value={username}
+                  onChange={(event) => setUsername(event.target.value)}
+                />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="register-v2-mobile">Mobile number (optional)</FieldLabel>
+                <Input
+                  className="h-11"
+                  id="register-v2-mobile"
+                  type="tel"
+                  value={mobile}
+                  onChange={(event) => setMobile(event.target.value)}
+                />
+              </Field>
+            </div>
+          ) : null}
+          <Button className="w-full" type="submit">
+            Create account
+          </Button>
+          <a
+            className="text-center text-sm text-muted-foreground hover:text-foreground"
+            href="/login"
+          >
+            Back to sign in
+          </a>
+        </FieldGroup>
+      </form>
+    </AuthPageLayout>
+  )
+}