@rangka/client 0.1.0 → 0.1.2

package/src/auth/SessionExpired.tsx

@@ -1,24 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-
-export interface SessionExpiredProps {
-  onReLogin: () => void;
-}
-
-export function SessionExpired({ onReLogin }: SessionExpiredProps) {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <Card className="w-full max-w-sm text-center">
-        <CardHeader>
-          <CardTitle>Session Expired</CardTitle>
-        </CardHeader>
-        <CardContent className="flex flex-col items-center gap-4">
-          <p className="text-sm text-muted-foreground">
-            Your session has expired. Please sign in again to continue.
-          </p>
-          <Button onClick={onReLogin}>Sign in</Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/src/auth/SetupForm.tsx

@@ -1,76 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-
-export interface SetupFormProps {
-  onSetup: (data: { name: string; email: string; password: string }) => void | Promise<void>;
-  error?: string;
-  loading?: boolean;
-}
-
-export function SetupForm({ onSetup, error, loading }: SetupFormProps) {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onSetup({ name, email, password });
-  };
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <Card className="w-full max-w-sm">
-        <CardHeader>
-          <CardTitle>Setup</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="name">Name</FieldLabel>
-                <Input
-                  id="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Your name"
-                  required
-                  autoFocus
-                />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="email">Email</FieldLabel>
-                <Input
-                  id="email"
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="you@example.com"
-                  required
-                />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="password">Password</FieldLabel>
-                <Input
-                  id="password"
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                />
-              </Field>
-              {error && <FieldError>{error}</FieldError>}
-              <Field>
-                <Button type="submit" className="w-full" disabled={loading}>
-                  {loading ? 'Setting up...' : 'Complete setup'}
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/src/boot/BootGate.tsx

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react';
-import { useBootContext } from './BootProvider.js';
-import { LoginForm } from '../auth/LoginForm.js';
-import { SessionExpired } from '../auth/SessionExpired.js';
-import { SetupForm } from '../auth/SetupForm.js';
-
-export function BootGate({ children }: { children: ReactNode }) {
-  const { state, handleLogin, handleSetup, handleSessionExpired, retry } = useBootContext();
-
-  switch (state.status) {
-    case 'checking':
-    case 'loading':
-      return (
-        <div role="status" aria-label="Loading">
-          Loading…
-        </div>
-      );
-    case 'setup':
-      return <SetupForm onSetup={handleSetup} />;
-    case 'login':
-      if (state.sessionExpired) {
-        return <SessionExpired onReLogin={handleSessionExpired} />;
-      }
-      return <LoginForm onLogin={handleLogin} />;
-    case 'error':
-      return (
-        <div role="alert">
-          <p>Something went wrong. Unable to load the application.</p>
-          <button onClick={retry}>Retry</button>
-        </div>
-      );
-    case 'ready':
-      return <>{children}</>;
-  }
-}

package/src/boot/BootProvider.tsx

@@ -1,28 +0,0 @@
-import { createContext, useContext, type ReactNode } from 'react';
-import type { LoginCredentials, SetupCredentials } from '../api/auth.js';
-import type { BootState } from './types.js';
-import { useBoot } from './useBoot.js';
-
-interface BootContextValue {
-  state: BootState;
-  handleLogin: (credentials: LoginCredentials) => Promise<void>;
-  handleSetup: (credentials: SetupCredentials) => Promise<void>;
-  handleSessionExpired: () => void;
-  handleLogout: () => void;
-  retry: () => void;
-}
-
-const BootContext = createContext<BootContextValue | null>(null);
-
-export function BootProvider({ children }: { children: ReactNode }) {
-  const boot = useBoot();
-  return <BootContext.Provider value={boot}>{children}</BootContext.Provider>;
-}
-
-export function useBootContext(): BootContextValue {
-  const ctx = useContext(BootContext);
-  if (!ctx) {
-    throw new Error('useBootContext must be used within a BootProvider');
-  }
-  return ctx;
-}

package/src/boot/types.ts

@@ -1,9 +0,0 @@
-import type { BootResponse } from '@rangka/shared';
-
-export type BootState =
-  | { status: 'checking' }
-  | { status: 'setup' }
-  | { status: 'login'; sessionExpired?: boolean }
-  | { status: 'loading' }
-  | { status: 'ready'; data: BootResponse }
-  | { status: 'error'; error: unknown };

package/src/boot/useBoot.ts

@@ -1,111 +0,0 @@
-import { useCallback, useEffect, useReducer } from 'react';
-import type { BootResponse } from '@rangka/shared';
-import { fetchBoot } from '../api/boot.js';
-import { login, setup, type LoginCredentials, type SetupCredentials } from '../api/auth.js';
-import { getToken, clearToken } from '../api/token.js';
-import type { BootState } from './types.js';
-
-type BootAction =
-  | { type: 'SETUP_REQUIRED' }
-  | { type: 'AUTH_REQUIRED'; sessionExpired?: boolean }
-  | { type: 'LOADING' }
-  | { type: 'READY'; data: BootResponse }
-  | { type: 'ERROR'; error: unknown }
-  | { type: 'RESET' };
-
-function bootReducer(_state: BootState, action: BootAction): BootState {
-  switch (action.type) {
-    case 'SETUP_REQUIRED':
-      return { status: 'setup' };
-    case 'AUTH_REQUIRED':
-      return { status: 'login', sessionExpired: action.sessionExpired };
-    case 'LOADING':
-      return { status: 'loading' };
-    case 'READY':
-      return { status: 'ready', data: action.data };
-    case 'ERROR':
-      return { status: 'error', error: action.error };
-    case 'RESET':
-      return { status: 'login' };
-  }
-}
-
-export interface UseBootResult {
-  state: BootState;
-  handleLogin: (credentials: LoginCredentials) => Promise<void>;
-  handleSetup: (credentials: SetupCredentials) => Promise<void>;
-  handleSessionExpired: () => void;
-  handleLogout: () => void;
-  retry: () => void;
-}
-
-export function useBoot(): UseBootResult {
-  const [state, dispatch] = useReducer(bootReducer, { status: 'checking' });
-
-  const performBoot = useCallback(async () => {
-    dispatch({ type: 'LOADING' });
-    try {
-      const data = await fetchBoot();
-      dispatch({ type: 'READY', data });
-    } catch (err: unknown) {
-      const status = (err as { status?: number }).status;
-      if (status === 503) {
-        dispatch({ type: 'SETUP_REQUIRED' });
-      } else if (status === 401 || !getToken()) {
-        dispatch({ type: 'AUTH_REQUIRED' });
-      } else {
-        dispatch({ type: 'ERROR', error: err });
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    performBoot();
-  }, [performBoot]);
-
-  useEffect(() => {
-    const onSessionExpired = () => {
-      dispatch({ type: 'AUTH_REQUIRED', sessionExpired: true });
-    };
-    window.addEventListener('rangka:session-expired', onSessionExpired);
-    return () => window.removeEventListener('rangka:session-expired', onSessionExpired);
-  }, []);
-
-  const handleLogin = useCallback(
-    async (credentials: LoginCredentials) => {
-      const response = await login(credentials);
-      if (!response.ok) {
-        throw response;
-      }
-      await performBoot();
-    },
-    [performBoot],
-  );
-
-  const handleSetup = useCallback(
-    async (credentials: SetupCredentials) => {
-      const response = await setup(credentials);
-      if (!response.ok) {
-        const body = await response.json().catch(() => ({}));
-        throw new Error(body.message ?? 'Setup failed');
-      }
-      await performBoot();
-    },
-    [performBoot],
-  );
-
-  const handleSessionExpired = useCallback(() => {
-    dispatch({ type: 'AUTH_REQUIRED', sessionExpired: true });
-  }, []);
-
-  const handleLogout = useCallback(() => {
-    clearToken();
-    dispatch({ type: 'RESET' });
-  }, []);
-
-  const retry = useCallback(() => {
-    performBoot();
-  }, [performBoot]);
-
-  return { state, handleLogin, handleSetup, handleSessionExpired, handleLogout, retry };
-}

package/src/components/Icon.tsx

@@ -1,17 +0,0 @@
-import { icons, type LucideProps } from 'lucide-react';
-
-export interface IconProps extends Omit<LucideProps, 'ref'> {
-  name: string;
-}
-
-export function Icon({ name, size = 14, ...props }: IconProps) {
-  const pascalName = name
-    .split('-')
-    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-    .join('');
-
-  const LucideIcon = icons[pascalName as keyof typeof icons];
-  if (!LucideIcon) return null;
-
-  return <LucideIcon size={size} {...props} />;
-}

package/src/components/ui/accordion.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { Accordion as AccordionPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
-
-function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      className={cn('flex w-full flex-col', className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn('not-last:border-b', className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-none border border-transparent py-2.5 text-left text-xs font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon
-          data-slot="accordion-trigger-icon"
-          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
-        />
-        <ChevronUpIcon
-          data-slot="accordion-trigger-icon"
-          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
-        />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="overflow-hidden text-xs data-open:animate-accordion-down data-closed:animate-accordion-up"
-      {...props}
-    >
-      <div
-        className={cn(
-          'h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
-          className,
-        )}
-      >
-        {children}
-      </div>
-    </AccordionPrimitive.Content>
-  );
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert-dialog.tsx

@@ -1,180 +0,0 @@
-import * as React from 'react';
-import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-
-function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
-}
-
-function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        'fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogContent({
-  className,
-  size = 'default',
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
-  size?: 'default' | 'sm';
-}) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm 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}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn(
-        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "mb-2 inline-flex size-10 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn(
-        'font-heading text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn(
-        'text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  variant = 'default',
-  size = 'default',
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action
-        data-slot="alert-dialog-action"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  );
-}
-
-function AlertDialogCancel({
-  className,
-  variant = 'outline',
-  size = 'default',
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel
-        data-slot="alert-dialog-cancel"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/src/components/ui/alert.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        'text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-action"
-      className={cn(
-        'absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/ui/aspect-ratio.tsx

@@ -1,9 +0,0 @@
-'use client';
-
-import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
-
-function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
-}
-
-export { AspectRatio };