@dashforge/tw 1.1.0 → 1.2.0

package/src/components/Textarea/Textarea.test.tsx

@@ -1,75 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { DashFormProvider } from '@dashforge/forms';
-import { Textarea } from './Textarea.js';
-
-describe('<Textarea>', () => {
-  describe('standalone (no DashForm)', () => {
-    it('renders a <textarea> element with the label', () => {
-      render(<Textarea name="bio" label="Bio" />);
-      const el = screen.getByLabelText('Bio');
-      expect(el).toBeInstanceOf(HTMLTextAreaElement);
-    });
-
-    it('respects the `rows` attribute (default 3, overridable)', () => {
-      const { rerender } = render(<Textarea name="bio" label="Bio" />);
-      expect(screen.getByLabelText('Bio').getAttribute('rows')).toBe('3');
-      rerender(<Textarea name="bio" label="Bio" rows={6} />);
-      expect(screen.getByLabelText('Bio').getAttribute('rows')).toBe('6');
-    });
-
-    it('renders helperText when provided', () => {
-      render(
-        <Textarea name="bio" label="Bio" helperText="Tell us about yourself" />
-      );
-      expect(screen.getByText('Tell us about yourself')).toBeTruthy();
-    });
-
-    it('renders a `*` for required fields', () => {
-      render(<Textarea name="bio" label="Bio" required />);
-      expect(screen.getByText('*')).toBeTruthy();
-    });
-
-    it('fires onChange when typed into', () => {
-      const onChange = vi.fn();
-      render(<Textarea name="bio" label="Bio" onChange={onChange} />);
-      fireEvent.change(screen.getByLabelText('Bio'), {
-        target: { value: 'hello' },
-      });
-      expect(onChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('applies the `disabled` attribute on the textarea', () => {
-      render(<Textarea name="bio" label="Bio" disabled />);
-      const el = screen.getByLabelText('Bio') as HTMLTextAreaElement;
-      expect(el.disabled).toBe(true);
-    });
-  });
-
-  describe('inside DashFormProvider', () => {
-    it('reflects the typed value on the textarea element', () => {
-      render(
-        <DashFormProvider defaultValues={{ bio: '' }}>
-          <Textarea name="bio" label="Bio" />
-        </DashFormProvider>
-      );
-      const el = screen.getByLabelText('Bio') as HTMLTextAreaElement;
-      fireEvent.change(el, { target: { value: 'A short bio.' } });
-      // The bridge updates synchronously; the rendered value mirrors it.
-      expect(el.value).toBe('A short bio.');
-    });
-  });
-
-  describe('resize variant', () => {
-    it('default `vertical` adds resize-y', () => {
-      render(<Textarea name="bio" label="Bio" />);
-      expect(screen.getByLabelText('Bio').className).toMatch(/resize-y/);
-    });
-
-    it('`none` adds resize-none', () => {
-      render(<Textarea name="bio" label="Bio" resize="none" />);
-      expect(screen.getByLabelText('Bio').className).toMatch(/resize-none/);
-    });
-  });
-});

package/src/components/Textarea/Textarea.tsx

@@ -1,190 +0,0 @@
-import { useCallback, useContext, useEffect, useId, useRef } from 'react';
-import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
-import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
-import { useDashFieldMeta } from '@dashforge/forms';
-import { cn } from '../../utils/cn.js';
-import { useAccessState } from '../../hooks/useAccessState.js';
-import { resolveValidationState } from '../_shared/resolveValidationState.js';
-import { textareaVariants } from './textarea.variants.js';
-import type { TextareaProps } from './textarea.types.js';
-
-/**
- * Dashforge TW Textarea — bridge-integrated multi-line input.
- *
- * Sibling of `<TextField>` (same slot taxonomy, same bridge wiring) but
- * renders a `<textarea>` element instead of a single-line `<input>`.
- *
- * Defaults to `rows={3}` and `resize="vertical"` — both overridable via
- * variant prop or per-instance `rows` attribute.
- *
- * **A11y**: `aria-invalid` from the resolved validation state,
- * `aria-describedby` links to the helper/error text node, required
- * fields get the native `required` attribute + a visual `*`.
- */
-export function Textarea(props: TextareaProps) {
-  const {
-    name,
-    rules,
-    visibleWhen,
-    layout = 'stacked',
-    size,
-    resize,
-    label,
-    helperText,
-    required,
-    error,
-    disabled,
-    fullWidth,
-    access,
-    sx,
-    slotProps,
-    placeholder,
-    rows = 3,
-    onChange: userOnChange,
-    onBlur: userOnBlur,
-    value: userValue,
-    defaultValue,
-    ...rest
-  } = props;
-
-  // ───── Hooks (unconditional) ─────
-  const bridge = useContext(DashFormContext) as DashFormBridge | null;
-  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
-  const fieldMeta = useDashFieldMeta(name);
-  const accessState = useAccessState(access);
-
-  const inputId = useId();
-  const helperId = `${inputId}-help`;
-
-  // StrictMode-safe unregister-on-unmount
-  const unregisterRef = useRef({ bridge, name });
-  unregisterRef.current = { bridge, name };
-  const isMountedRef = useRef(false);
-   
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-      const { bridge: cap, name: capName } = unregisterRef.current;
-      queueMicrotask(() => {
-        if (!isMountedRef.current) cap?.unregister?.(capName);
-      });
-    };
-  }, []);
-
-  // ───── Derived (every hook MUST be called above the early returns) ─────
-  const effectiveDisabled = Boolean(disabled) || accessState.disabled;
-  const effectiveReadOnly = accessState.readonly;
-
-  const isFormMode = Boolean(bridge?.register);
-
-  let resolvedError = error;
-  let resolvedHelperText: typeof helperText = helperText;
-  let registration: FieldRegistration | null = null;
-  let resolvedValue: string | undefined = userValue;
-
-  if (isFormMode && bridge) {
-    registration = bridge.register(name, rules);
-    const validation = resolveValidationState(name, bridge, error, helperText);
-    resolvedError = validation.error;
-    resolvedHelperText = validation.helperText;
-    if (userValue === undefined) {
-      const bv = fieldMeta.value;
-      resolvedValue = bv == null ? '' : String(bv);
-    }
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (isFormMode && bridge) {
-      bridge.setValue?.(name, e.target.value);
-      void registration?.onChange?.(e);
-    }
-    userOnChange?.(e);
-  };
-
-  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-    if (isFormMode && bridge) {
-      registration?.onBlur?.(e);
-    }
-    userOnBlur?.(e);
-  };
-
-  const registrationRefFn = registration?.ref;
-  const inputRef = useCallback(
-    (instance: HTMLTextAreaElement | null) => {
-      if (typeof registrationRefFn === 'function') {
-        registrationRefFn(instance);
-      }
-    },
-    [registrationRefFn]
-  );
-
-  // ───── Render-time guards (after all hooks) ─────
-  if (!isVisible) return null;
-  if (!accessState.visible) return null;
-
-  const v = textareaVariants({
-    size,
-    layout,
-    resize,
-    error: resolvedError,
-    fullWidth,
-    disabled: effectiveDisabled,
-  });
-
-  return (
-    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
-      {label && (
-        <label
-          htmlFor={inputId}
-          className={cn(v.label(), slotProps?.label?.className)}
-        >
-          {label}
-          {required && (
-            <span
-              aria-hidden="true"
-              className={cn(v.requiredMark(), slotProps?.requiredMark?.className)}
-            >
-              *
-            </span>
-          )}
-        </label>
-      )}
-
-      <div className={cn(v.inputWrapper(), slotProps?.inputWrapper?.className)}>
-        <textarea
-          {...rest}
-          id={inputId}
-          name={name}
-          rows={rows}
-          placeholder={placeholder}
-          value={isFormMode ? resolvedValue ?? '' : userValue}
-          defaultValue={!isFormMode && userValue === undefined ? defaultValue : undefined}
-          disabled={effectiveDisabled}
-          readOnly={effectiveReadOnly}
-          required={required}
-          aria-invalid={resolvedError || undefined}
-          aria-describedby={resolvedHelperText ? helperId : undefined}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          ref={inputRef}
-          className={cn(v.input(), slotProps?.input?.className)}
-        />
-      </div>
-
-      {resolvedHelperText && (
-        <p
-          id={helperId}
-          className={cn(
-            resolvedError ? v.errorText() : v.helperText(),
-            resolvedError
-              ? slotProps?.errorText?.className
-              : slotProps?.helperText?.className
-          )}
-        >
-          {resolvedHelperText}
-        </p>
-      )}
-    </div>
-  );
-}

package/src/components/Textarea/textarea.types.ts

@@ -1,60 +0,0 @@
-import type {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  TextareaHTMLAttributes,
-} from 'react';
-import type { Engine } from '@dashforge/ui-core';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { TextareaVariants } from './textarea.variants.js';
-
-export interface TextareaSlotProps {
-  root?: { className?: string };
-  label?: { className?: string };
-  requiredMark?: { className?: string };
-  inputWrapper?: { className?: string };
-  input?: { className?: string };
-  helperText?: { className?: string };
-  errorText?: { className?: string };
-}
-
-/**
- * Props for `<Textarea>`.
- *
- * Mirrors `<TextField>` semantics (bridge integration, RBAC, gating)
- * but renders a multi-line `<textarea>` and exposes a `resize` variant
- * (default `'vertical'`). Inherits standard HTMLTextarea attributes
- * (`rows`, `cols`, `maxLength`, etc.) via `TextareaHTMLAttributes`.
- */
-export interface TextareaProps
-  extends Omit<
-      TextareaHTMLAttributes<HTMLTextAreaElement>,
-      'name' | 'size' | 'onChange' | 'onBlur' | 'value' | 'defaultValue'
-    >,
-    TextareaVariants {
-  name: string;
-  rules?: unknown;
-  label?: ReactNode;
-  helperText?: ReactNode;
-  required?: boolean;
-  error?: boolean;
-  disabled?: boolean;
-  /** Engine predicate — textarea not rendered when it returns `false`. */
-  visibleWhen?: (engine: Engine) => boolean;
-  /** RBAC access requirement (combines with explicit `disabled`). */
-  access?: AccessRequirement;
-  /** Root className shortcut (`cn`'d with the variant root class). */
-  sx?: string;
-  /** Per-slot className overrides. */
-  slotProps?: TextareaSlotProps;
-  /** Controlled value (form mode reads from the bridge if omitted). */
-  value?: string;
-  /** Default value (uncontrolled, standalone mode only). */
-  defaultValue?: string;
-  /** User-supplied change handler — fires *after* bridge update. */
-  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-  /** User-supplied blur handler — fires *after* bridge `onBlur`. */
-  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-  /** Minimum visible row count for the textarea. Default: 3. */
-  rows?: number;
-}

package/src/components/Textarea/textarea.variants.ts

@@ -1,85 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<Textarea>` with 7 slots.
- *
- * Sibling of `<TextField>` but renders a multi-line `<textarea>` element
- * instead of a single-line `<input>`. Shares the same slot taxonomy +
- * variant axes so consumers can swap the two without rewriting overrides.
- */
-export const textareaVariants = tv({
-  slots: {
-    root: 'flex',
-    label: 'block text-sm font-medium text-neutral-900 mb-1',
-    requiredMark: 'text-danger-500 ml-0.5',
-    inputWrapper: [
-      'relative flex',
-      // bg-neutral-50 inverts via @dashforge/tw-tokens — dark-mode aware.
-      'rounded-md border bg-neutral-50',
-      'border-neutral-300',
-      'transition-colors',
-      'focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30',
-    ],
-    input: [
-      'block w-full bg-transparent outline-none resize-y',
-      'text-neutral-900 placeholder:text-neutral-400',
-      'disabled:cursor-not-allowed disabled:opacity-60',
-      'read-only:cursor-default',
-    ],
-    helperText: 'mt-1 text-sm text-neutral-600',
-    errorText: 'mt-1 text-sm text-danger-600',
-  },
-  variants: {
-    size: {
-      sm: {
-        inputWrapper: 'px-2 py-1.5',
-        input: 'text-sm',
-      },
-      md: {
-        inputWrapper: 'px-3 py-2',
-        input: 'text-base',
-      },
-      lg: {
-        inputWrapper: 'px-4 py-3',
-        input: 'text-lg',
-      },
-    },
-    layout: {
-      stacked: { root: 'flex-col' },
-      inline: { root: 'flex-row items-start gap-3', label: 'mb-0 pt-2 whitespace-nowrap shrink-0' },
-    },
-    error: {
-      true: {
-        inputWrapper:
-          'border-danger-500 focus-within:border-danger-500 focus-within:ring-danger-500/30',
-      },
-    },
-    fullWidth: {
-      true: {
-        root: 'w-full',
-        inputWrapper: 'w-full',
-      },
-    },
-    disabled: {
-      true: {
-        inputWrapper: 'opacity-60 cursor-not-allowed bg-neutral-200',
-      },
-    },
-    resize: {
-      none: { input: 'resize-none' },
-      vertical: { input: 'resize-y' },
-      horizontal: { input: 'resize-x' },
-      both: { input: 'resize' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    layout: 'stacked',
-    error: false,
-    fullWidth: false,
-    disabled: false,
-    resize: 'vertical',
-  },
-});
-
-export type TextareaVariants = VariantProps<typeof textareaVariants>;

package/src/components/TimePicker/TimePicker.test.tsx

@@ -1,65 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi, beforeAll } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { TimePicker } from './TimePicker.js';
-
-beforeAll(() => {
-  // Radix Popover (Floating UI) needs ResizeObserver — jsdom lacks it.
-  if (!('ResizeObserver' in globalThis)) {
-    class ResizeObserverStub {
-      observe(): void {
-        /* no-op */
-      }
-      unobserve(): void {
-        /* no-op */
-      }
-      disconnect(): void {
-        /* no-op */
-      }
-    }
-    (globalThis as { ResizeObserver?: unknown }).ResizeObserver =
-      ResizeObserverStub;
-  }
-});
-
-describe('TimePicker', () => {
-  it('renders a labelled trigger with the placeholder', () => {
-    render(<TimePicker name="alarm" label="Alarm" placeholder="Pick a time" />);
-    expect(screen.queryByText('Alarm')).not.toBeNull();
-    expect(screen.getByRole('button').textContent).toContain('Pick a time');
-  });
-
-  it('shows a 24-hour controlled value', () => {
-    render(<TimePicker name="t" value="14:30" />);
-    expect(screen.getByRole('button').textContent).toContain('14:30');
-  });
-
-  it('formats the value in 12-hour notation when hour12 is set', () => {
-    render(<TimePicker name="t" value="14:30" hour12 />);
-    expect(screen.getByRole('button').textContent).toContain('2:30 PM');
-  });
-
-  it('opens the time-list popover from the trigger', () => {
-    render(<TimePicker name="t" />);
-    expect(screen.queryByRole('listbox')).toBeNull();
-    fireEvent.click(screen.getByRole('button'));
-    expect(screen.getByRole('listbox', { name: 'Time options' })).not.toBeNull();
-  });
-
-  it('selects a time from the popover, updates the trigger and closes', () => {
-    const onChange = vi.fn();
-    render(<TimePicker name="t" onChange={onChange} />);
-    fireEvent.click(screen.getByRole('button'));
-    fireEvent.click(screen.getByRole('option', { name: '09:00' }));
-    expect(onChange).toHaveBeenCalledWith('09:00');
-    expect(screen.queryByRole('listbox')).toBeNull();
-    expect(screen.getByRole('button').textContent).toContain('09:00');
-  });
-
-  it('does not open the popover when disabled', () => {
-    render(<TimePicker name="t" disabled />);
-    fireEvent.click(screen.getByRole('button'));
-    expect(screen.queryByRole('listbox')).toBeNull();
-  });
-});