@kestack/web-platform 0.0.0-stage → 0.0.0

package/src/form/components/submit-button.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import * as React from 'react';
+
+import { Button, type buttonVariants } from '#components/ui/button';
+import { useFormContext } from '../context.js';
+import type { VariantProps } from 'class-variance-authority';
+
+export interface SubmitButtonProps
+  extends
+    Omit<React.ComponentProps<typeof Button>, 'type'>,
+    VariantProps<typeof buttonVariants> {
+  loadingText?: string;
+  loadingIndicator?: React.ReactNode;
+}
+
+export function SubmitButton({
+  children,
+  loadingText,
+  loadingIndicator,
+  disabled,
+  ...props
+}: SubmitButtonProps) {
+  const form = useFormContext();
+
+  return (
+    <form.Subscribe
+      selector={(state) => ({
+        isSubmitting: state.isSubmitting,
+        canSubmit: state.canSubmit,
+      })}
+    >
+      {({ isSubmitting, canSubmit }) => (
+        <Button
+          data-slot="submit-button"
+          type="submit"
+          disabled={disabled || isSubmitting || !canSubmit}
+          {...props}
+        >
+          {isSubmitting ? (
+            <>
+              {loadingIndicator}
+              {loadingText ?? children}
+            </>
+          ) : (
+            children
+          )}
+        </Button>
+      )}
+    </form.Subscribe>
+  );
+}

package/src/form/context.ts

@@ -0,0 +1,8 @@
+import { createFormHookContexts } from '@tanstack/react-form';
+
+/**
+ * Form hook contexts for TanStack Form integration.
+ * These contexts allow field and form components to access their respective APIs.
+ */
+export const { fieldContext, formContext, useFieldContext, useFormContext } =
+  createFormHookContexts();

package/src/form/create-form-hook.ts

@@ -0,0 +1,50 @@
+import { createFormHook } from '@tanstack/react-form';
+
+import { fieldContext, formContext } from './context.js';
+import { TextField } from './fields/text-field.js';
+import { TextareaField } from './fields/textarea-field.js';
+import { SelectField } from './fields/select-field.js';
+import { SwitchField } from './fields/switch-field.js';
+import { DatePickerField } from './fields/date-picker-field.js';
+import { SubmitButton } from './components/submit-button.js';
+
+/**
+ * Pre-configured form hook with all field and form components registered.
+ *
+ * @example
+ * ```tsx
+ * import { useAppForm } from "@kestack/web-platform/form"
+ *
+ * function MyForm() {
+ *   const form = useAppForm({
+ *     defaultValues: { email: "", message: "" },
+ *     onSubmit: async ({ value }) => { ... },
+ *   })
+ *
+ *   return (
+ *     <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>
+ *       <form.AppField name="email" children={(field) => (
+ *         <field.TextField label="Email" type="email" required />
+ *       )} />
+ *       <form.AppForm>
+ *         <form.SubmitButton>Send</form.SubmitButton>
+ *       </form.AppForm>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+export const { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+    TextareaField,
+    SelectField,
+    SwitchField,
+    DatePickerField,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+});

package/src/form/fields/date-picker-field.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '#lib/utils';
+import { Button } from '#components/ui/button';
+import { Calendar } from '#components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '#components/ui/popover';
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+} from '#components/ui/field';
+import { CalendarIcon } from 'lucide-react';
+import { useFieldContext } from '../context.js';
+import { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';
+
+export interface DatePickerFieldProps extends Pick<
+  BaseFieldProps,
+  | 'label'
+  | 'description'
+  | 'required'
+  | 'disabled'
+  | 'placeholder'
+  | 'className'
+  | 'showAllErrors'
+> {
+  formatDate?: (date: Date) => string;
+}
+
+const defaultFormatDate = (date: Date) =>
+  date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+export function DatePickerField({
+  label,
+  description,
+  required,
+  disabled,
+  placeholder = 'Pick a date',
+  className,
+  formatDate = defaultFormatDate,
+  showAllErrors = true,
+}: DatePickerFieldProps) {
+  const field = useFieldContext<Date | undefined>();
+  const meta = getFieldMeta(field);
+  const showError = meta.isInvalid && meta.isTouched;
+  const value = field.state.value;
+
+  const [open, setOpen] = React.useState(false);
+  const triggerId = React.useId();
+  const descriptionId = React.useId();
+  const errorId = React.useId();
+
+  const describedBy =
+    [description ? descriptionId : undefined, showError ? errorId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <Field
+      data-slot="date-picker-field"
+      data-invalid={showError || undefined}
+      data-disabled={disabled || undefined}
+      className={cn(className)}
+    >
+      {label && (
+        <FieldLabel htmlFor={triggerId}>
+          {label}
+          {required && <span aria-hidden="true"> *</span>}
+        </FieldLabel>
+      )}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              id={triggerId}
+              variant="outline"
+              disabled={disabled}
+              className={cn(
+                'w-full justify-start text-left font-normal',
+                !value && 'text-muted-foreground',
+              )}
+              aria-invalid={showError || undefined}
+              aria-describedby={describedBy}
+              aria-required={required || undefined}
+            />
+          }
+        >
+          <CalendarIcon className="mr-2 size-4" />
+          {value ? formatDate(value) : placeholder}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={value}
+            onSelect={(selected) => {
+              field.handleChange(selected);
+              field.handleBlur();
+              setOpen(false);
+            }}
+            disabled={disabled}
+          />
+        </PopoverContent>
+      </Popover>
+      {description && (
+        <FieldDescription id={descriptionId}>{description}</FieldDescription>
+      )}
+      {showError && (
+        <FieldError
+          id={errorId}
+          errors={toFieldErrors(meta.errors, showAllErrors)}
+        />
+      )}
+    </Field>
+  );
+}

package/src/form/fields/select-field.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '#lib/utils';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#components/ui/select';
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+} from '#components/ui/field';
+import { useFieldContext } from '../context.js';
+import { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectFieldProps extends BaseFieldProps {
+  options: SelectOption[];
+  size?: 'sm' | 'default';
+}
+
+export function SelectField({
+  label,
+  description,
+  required,
+  disabled,
+  placeholder,
+  className,
+  options,
+  size,
+  showAllErrors = true,
+}: SelectFieldProps) {
+  const field = useFieldContext<string>();
+  const meta = getFieldMeta(field);
+  const showError = meta.isInvalid && meta.isTouched;
+
+  const triggerId = React.useId();
+  const descriptionId = React.useId();
+  const errorId = React.useId();
+
+  const describedBy =
+    [description ? descriptionId : undefined, showError ? errorId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <Field
+      data-slot="select-field"
+      data-invalid={showError || undefined}
+      data-disabled={disabled || undefined}
+      className={cn(className)}
+    >
+      {label && (
+        <FieldLabel htmlFor={triggerId}>
+          {label}
+          {required && <span aria-hidden="true"> *</span>}
+        </FieldLabel>
+      )}
+      <Select
+        value={field.state.value ?? ''}
+        onValueChange={(value) => {
+          field.handleChange(value ?? '');
+          field.handleBlur();
+        }}
+        disabled={disabled}
+      >
+        <SelectTrigger
+          id={triggerId}
+          size={size}
+          aria-invalid={showError || undefined}
+          aria-describedby={describedBy}
+          aria-required={required || undefined}
+        >
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {description && (
+        <FieldDescription id={descriptionId}>{description}</FieldDescription>
+      )}
+      {showError && (
+        <FieldError
+          id={errorId}
+          errors={toFieldErrors(meta.errors, showAllErrors)}
+        />
+      )}
+    </Field>
+  );
+}

package/src/form/fields/switch-field.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '#lib/utils';
+import { Switch } from '#components/ui/switch';
+import { Field, FieldDescription, FieldError } from '#components/ui/field';
+import { Label } from '#components/ui/label';
+import { useFieldContext } from '../context.js';
+import { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';
+
+export interface SwitchFieldProps extends Pick<
+  BaseFieldProps,
+  'label' | 'description' | 'disabled' | 'className' | 'showAllErrors'
+> {
+  size?: 'sm' | 'default';
+}
+
+export function SwitchField({
+  label,
+  description,
+  disabled,
+  className,
+  size,
+  showAllErrors = true,
+}: SwitchFieldProps) {
+  const field = useFieldContext<boolean>();
+  const meta = getFieldMeta(field);
+  const showError = meta.isInvalid && meta.isTouched;
+
+  const switchId = React.useId();
+  const descriptionId = React.useId();
+  const errorId = React.useId();
+
+  const describedBy =
+    [description ? descriptionId : undefined, showError ? errorId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <Field
+      data-slot="switch-field"
+      data-invalid={showError || undefined}
+      data-disabled={disabled || undefined}
+      orientation="horizontal"
+      className={cn(className)}
+    >
+      <Switch
+        id={switchId}
+        size={size}
+        checked={field.state.value ?? false}
+        onCheckedChange={(checked: boolean) => {
+          field.handleChange(checked);
+          field.handleBlur();
+        }}
+        disabled={disabled}
+        aria-invalid={showError || undefined}
+        aria-describedby={describedBy}
+      />
+      {label && <Label htmlFor={switchId}>{label}</Label>}
+      {description && (
+        <FieldDescription id={descriptionId}>{description}</FieldDescription>
+      )}
+      {showError && (
+        <FieldError
+          id={errorId}
+          errors={toFieldErrors(meta.errors, showAllErrors)}
+        />
+      )}
+    </Field>
+  );
+}

package/src/form/fields/text-field.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '#lib/utils';
+import { Input } from '#components/ui/input';
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+} from '#components/ui/field';
+import { useFieldContext } from '../context.js';
+import { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';
+
+export interface TextFieldProps extends BaseFieldProps {
+  type?: React.HTMLInputTypeAttribute;
+  autoComplete?: string;
+}
+
+export function TextField({
+  label,
+  description,
+  required,
+  disabled,
+  placeholder,
+  className,
+  type = 'text',
+  autoComplete,
+  showAllErrors = true,
+}: TextFieldProps) {
+  const field = useFieldContext<string>();
+  const meta = getFieldMeta(field);
+  const showError = meta.isInvalid && meta.isTouched;
+
+  const inputId = React.useId();
+  const descriptionId = React.useId();
+  const errorId = React.useId();
+
+  const describedBy =
+    [description ? descriptionId : undefined, showError ? errorId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <Field
+      data-slot="text-field"
+      data-invalid={showError || undefined}
+      data-disabled={disabled || undefined}
+      className={cn(className)}
+    >
+      {label && (
+        <FieldLabel htmlFor={inputId}>
+          {label}
+          {required && <span aria-hidden="true"> *</span>}
+        </FieldLabel>
+      )}
+      <Input
+        id={inputId}
+        type={type}
+        value={field.state.value ?? ''}
+        onChange={(e) => field.handleChange(e.target.value)}
+        onBlur={field.handleBlur}
+        disabled={disabled}
+        placeholder={placeholder}
+        autoComplete={autoComplete}
+        aria-invalid={showError || undefined}
+        aria-describedby={describedBy}
+        aria-required={required || undefined}
+      />
+      {description && (
+        <FieldDescription id={descriptionId}>{description}</FieldDescription>
+      )}
+      {showError && (
+        <FieldError
+          id={errorId}
+          errors={toFieldErrors(meta.errors, showAllErrors)}
+        />
+      )}
+    </Field>
+  );
+}

package/src/form/fields/textarea-field.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '#lib/utils';
+import { Textarea } from '#components/ui/textarea';
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+} from '#components/ui/field';
+import { useFieldContext } from '../context.js';
+import { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';
+
+export interface TextareaFieldProps extends BaseFieldProps {
+  rows?: number;
+  maxLength?: number;
+}
+
+export function TextareaField({
+  label,
+  description,
+  required,
+  disabled,
+  placeholder,
+  className,
+  rows,
+  maxLength,
+  showAllErrors = true,
+}: TextareaFieldProps) {
+  const field = useFieldContext<string>();
+  const meta = getFieldMeta(field);
+  const showError = meta.isInvalid && meta.isTouched;
+
+  const textareaId = React.useId();
+  const descriptionId = React.useId();
+  const errorId = React.useId();
+
+  const describedBy =
+    [description ? descriptionId : undefined, showError ? errorId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <Field
+      data-slot="textarea-field"
+      data-invalid={showError || undefined}
+      data-disabled={disabled || undefined}
+      className={cn(className)}
+    >
+      {label && (
+        <FieldLabel htmlFor={textareaId}>
+          {label}
+          {required && <span aria-hidden="true"> *</span>}
+        </FieldLabel>
+      )}
+      <Textarea
+        id={textareaId}
+        value={field.state.value ?? ''}
+        onChange={(e) => field.handleChange(e.target.value)}
+        onBlur={field.handleBlur}
+        disabled={disabled}
+        placeholder={placeholder}
+        rows={rows}
+        maxLength={maxLength}
+        aria-invalid={showError || undefined}
+        aria-describedby={describedBy}
+        aria-required={required || undefined}
+      />
+      {description && (
+        <FieldDescription id={descriptionId}>{description}</FieldDescription>
+      )}
+      {showError && (
+        <FieldError
+          id={errorId}
+          errors={toFieldErrors(meta.errors, showAllErrors)}
+        />
+      )}
+    </Field>
+  );
+}

package/src/form/index.ts

@@ -0,0 +1,56 @@
+/**
+ * TanStack Form integration for the web-platform components
+ *
+ * This module provides a schema-agnostic form primitive that integrates
+ * TanStack Form with the existing UI components.
+ *
+ * @example
+ * ```tsx
+ * import { useAppForm } from "@kestack/web-platform/form"
+ * import { z } from "zod" // Or any Standard Schema compliant library
+ *
+ * function ContactForm() {
+ *   const form = useAppForm({
+ *     defaultValues: { email: "", message: "" },
+ *     validators: {
+ *       onChange: z.object({
+ *         email: z.string().email(),
+ *         message: z.string().min(10)
+ *       })
+ *     },
+ *     onSubmit: async ({ value }) => {
+ *       console.log(value)
+ *     },
+ *   })
+ *
+ *   return (
+ *     <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>
+ *       <form.AppField name="email" children={(field) => (
+ *         <field.TextField label="Email" type="email" required />
+ *       )} />
+ *       <form.AppField name="message" children={(field) => (
+ *         <field.TextareaField label="Message" required />
+ *       )} />
+ *       <form.AppForm>
+ *         <form.SubmitButton>Send</form.SubmitButton>
+ *       </form.AppForm>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+
+// Main API
+export { useAppForm, withForm } from './create-form-hook.js';
+
+// Types
+export type { FieldMeta, BaseFieldProps } from './types.js';
+export type { TextFieldProps } from './fields/text-field.js';
+export type { TextareaFieldProps } from './fields/textarea-field.js';
+export type { SelectFieldProps, SelectOption } from './fields/select-field.js';
+export type { SwitchFieldProps } from './fields/switch-field.js';
+export type { DatePickerFieldProps } from './fields/date-picker-field.js';
+export type { SubmitButtonProps } from './components/submit-button.js';
+
+// Re-export formOptions for convenience
+export { formOptions } from '@tanstack/react-form';