@proyecto-viviana/solidaria-components 0.2.2 → 0.2.4

package/src/Toast.tsx

@@ -0,0 +1,503 @@
+/**
+ * Toast components for solidaria-components
+ *
+ * Toast notifications with auto-dismiss, pause on hover/focus, and accessibility.
+ * Port of react-aria-components Toast.
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  splitProps,
+  Show,
+  useContext,
+} from 'solid-js';
+import { Portal, isServer } from 'solid-js/web';
+import {
+  type ToastState,
+  type QueuedToast,
+  type ToastQueueOptions,
+  ToastQueue,
+  createToastState,
+} from '@proyecto-viviana/solid-stately';
+import {
+  createToast,
+  createToastRegion,
+} from '@proyecto-viviana/solidaria';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ToastContent {
+  /** The title of the toast. */
+  title?: string;
+  /** The description/body of the toast. */
+  description?: string;
+  /** The type/variant of the toast (info, success, warning, error). */
+  type?: 'info' | 'success' | 'warning' | 'error';
+  /** Custom action button. */
+  action?: {
+    label: string;
+    onAction: () => void;
+  };
+}
+
+export interface ToastRenderProps {
+  /** Whether the toast is currently animating in. */
+  isEntering: boolean;
+  /** Whether the toast is currently animating out. */
+  isExiting: boolean;
+  /** The animation state (entering, exiting, queued). */
+  animation: 'entering' | 'exiting' | 'queued' | undefined;
+  /** The toast data. */
+  toast: QueuedToast<ToastContent>;
+}
+
+export interface ToastRegionRenderProps {
+  /** The visible toasts. */
+  visibleToasts: QueuedToast<ToastContent>[];
+}
+
+export interface ToastRegionProps {
+  /** The children of the component - can be JSX or render function. */
+  children?: RenderChildren<ToastRegionRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<ToastRegionRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<ToastRegionRenderProps>;
+  /** The toast state to display. If not provided, uses ToastContext. */
+  state?: ToastState<ToastContent>;
+  /** Accessible label for the region. */
+  'aria-label'?: string;
+  /** Whether to render in a portal. */
+  portal?: boolean;
+  /** Placement of the toast region. */
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+}
+
+export interface ToastProps {
+  /** The toast data. */
+  toast: QueuedToast<ToastContent>;
+  /** The children of the component - can be JSX or render function. */
+  children?: RenderChildren<ToastRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<ToastRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<ToastRenderProps>;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+export const ToastContext = createContext<ToastState<ToastContent> | null>(null);
+
+export function useToastContext(): ToastState<ToastContent> {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('Toast components must be used within a ToastProvider');
+  }
+  return context;
+}
+
+// ============================================
+// GLOBAL TOAST QUEUE
+// ============================================
+
+/** Default global toast queue that can be used for app-wide toasts. */
+export const globalToastQueue = new ToastQueue<ToastContent>({
+  maxVisibleToasts: 5,
+  hasExitAnimation: false, // TODO: Enable once exit animation handling is implemented
+});
+
+/**
+ * Add a toast to the global queue.
+ * Convenience function for adding toasts from anywhere in the app.
+ */
+export function addToast(
+  content: ToastContent,
+  options?: { timeout?: number; priority?: number }
+): string {
+  return globalToastQueue.add(content, options);
+}
+
+// ============================================
+// TOAST PROVIDER
+// ============================================
+
+export interface ToastProviderProps {
+  /** The children of the provider. */
+  children: JSX.Element;
+  /** Custom toast queue options. */
+  queueOptions?: ToastQueueOptions;
+  /** Use global queue instead of creating a new one. */
+  useGlobalQueue?: boolean;
+}
+
+/**
+ * ToastProvider creates a toast queue context for descendant components.
+ * Use this to wrap your app or a section that needs toast notifications.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider>
+ *   <App />
+ *   <ToastRegion />
+ * </ToastProvider>
+ * ```
+ */
+export function ToastProvider(props: ToastProviderProps): JSX.Element {
+  const queue = props.useGlobalQueue
+    ? globalToastQueue
+    : new ToastQueue<ToastContent>(props.queueOptions);
+
+  const state = createToastState({ queue });
+
+  return (
+    <ToastContext.Provider value={state}>
+      {props.children}
+    </ToastContext.Provider>
+  );
+}
+
+// ============================================
+// TOAST REGION COMPONENT
+// ============================================
+
+/**
+ * ToastRegion is a container that displays all visible toasts.
+ * It handles pause on hover/focus and provides the landmark region.
+ *
+ * @example
+ * ```tsx
+ * <ToastRegion placement="bottom-end">
+ *   {(renderProps) => (
+ *     <For each={renderProps.visibleToasts}>
+ *       {(toast) => <Toast toast={toast} />}
+ *     </For>
+ *   )}
+ * </ToastRegion>
+ * ```
+ */
+export function ToastRegion(props: ToastRegionProps): JSX.Element {
+  if (isServer) {
+    return null as unknown as JSX.Element;
+  }
+
+  const [local, rest] = splitProps(props, [
+    'children',
+    'class',
+    'style',
+    'state',
+    'aria-label',
+    'portal',
+    'placement',
+  ]);
+
+  // Get state from context if not provided
+  const contextState = useContext(ToastContext);
+  const state = () => local.state ?? contextState;
+
+  // Create region accessibility props
+  const getRegionAria = () => {
+    const s = state();
+    if (!s) return null;
+    return createToastRegion({
+      state: s,
+      'aria-label': local['aria-label'],
+    });
+  };
+
+  // Render props values
+  const renderValues = createMemo<ToastRegionRenderProps>(() => ({
+    visibleToasts: state()?.visibleToasts() ?? [],
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-ToastRegion',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+
+  // Placement styles
+  const placementStyles = createMemo<JSX.CSSProperties>(() => {
+    const placement = local.placement ?? 'bottom-end';
+    const base: JSX.CSSProperties = {
+      position: 'fixed',
+      'z-index': 100001,
+      display: 'flex',
+      'flex-direction': 'column',
+      gap: '8px',
+      padding: '16px',
+      'pointer-events': 'none',
+    };
+
+    switch (placement) {
+      case 'top':
+        return { ...base, top: 0, left: '50%', transform: 'translateX(-50%)' } as JSX.CSSProperties;
+      case 'top-start':
+        return { ...base, top: 0, left: 0 } as JSX.CSSProperties;
+      case 'top-end':
+        return { ...base, top: 0, right: 0 } as JSX.CSSProperties;
+      case 'bottom':
+        return { ...base, bottom: 0, left: '50%', transform: 'translateX(-50%)' } as JSX.CSSProperties;
+      case 'bottom-start':
+        return { ...base, bottom: 0, left: 0 } as JSX.CSSProperties;
+      case 'bottom-end':
+      default:
+        return { ...base, bottom: 0, right: 0 } as JSX.CSSProperties;
+    }
+  });
+
+  const visibleToasts = () => state()?.visibleToasts() ?? [];
+  const hasToasts = () => visibleToasts().length > 0;
+
+  const regionContent = () => {
+    const regionAria = getRegionAria();
+    if (!regionAria || !state()) return null;
+
+    // Merge styles - placement styles are base, renderProps.style() overrides
+    const mergedStyle = () => {
+      const placement = placementStyles();
+      const custom = renderProps.style();
+      if (!custom) return placement;
+      return { ...placement, ...custom } as JSX.CSSProperties;
+    };
+
+    // Extract ref from regionProps to avoid type conflicts
+    const { ref: _ref, ...cleanRegionProps } = regionAria.regionProps as Record<string, unknown>;
+
+    return (
+      <div
+        {...domProps()}
+        {...cleanRegionProps}
+        class={renderProps.class()}
+        style={mergedStyle()}
+        data-placement={local.placement ?? 'bottom-end'}
+      >
+        {renderProps.renderChildren()}
+      </div>
+    );
+  };
+
+  // Only render when there are toasts
+  return (
+    <Show when={hasToasts()}>
+      <Show when={local.portal !== false} fallback={regionContent()}>
+        <Portal>{regionContent()}</Portal>
+      </Show>
+    </Show>
+  );
+}
+
+// ============================================
+// TOAST COMPONENT
+// ============================================
+
+/**
+ * Toast is an individual notification component.
+ *
+ * @example
+ * ```tsx
+ * <Toast toast={toast}>
+ *   {(renderProps) => (
+ *     <div class={renderProps.isExiting ? 'fade-out' : 'fade-in'}>
+ *       <h3>{renderProps.toast.content.title}</h3>
+ *       <p>{renderProps.toast.content.description}</p>
+ *     </div>
+ *   )}
+ * </Toast>
+ * ```
+ */
+export function Toast(props: ToastProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'toast',
+    'children',
+    'class',
+    'style',
+  ]);
+
+  // Get state from context
+  const state = useToastContext();
+
+  // Create toast accessibility props
+  const toastAria = createToast({
+    toast: local.toast,
+    state,
+  });
+
+  // Render props values
+  const renderValues = createMemo<ToastRenderProps>(() => ({
+    isEntering: local.toast.animation === 'entering',
+    isExiting: local.toast.animation === 'exiting',
+    animation: local.toast.animation,
+    toast: local.toast,
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Toast',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+
+  // Merge styles
+  const mergedStyle = () => {
+    const custom = renderProps.style();
+    if (!custom) return { 'pointer-events': 'auto' as const };
+    return { 'pointer-events': 'auto' as const, ...custom } as JSX.CSSProperties;
+  };
+
+  // Extract ref from toastProps to avoid type conflicts
+  const { ref: _ref, ...cleanToastProps } = toastAria.toastProps as Record<string, unknown>;
+
+  return (
+    <div
+      {...domProps()}
+      {...cleanToastProps}
+      class={renderProps.class()}
+      style={mergedStyle()}
+      data-animation={local.toast.animation}
+      data-type={local.toast.content.type}
+    >
+      {renderProps.renderChildren()}
+    </div>
+  );
+}
+
+// ============================================
+// TOAST SUB-COMPONENTS
+// ============================================
+
+export interface ToastTitleProps {
+  children: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+/**
+ * ToastTitle renders the toast title with proper accessibility attributes.
+ */
+export function ToastTitle(props: ToastTitleProps): JSX.Element {
+  return (
+    <div class={props.class} style={props.style}>
+      {props.children}
+    </div>
+  );
+}
+
+export interface ToastDescriptionProps {
+  children: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+/**
+ * ToastDescription renders the toast description with proper accessibility attributes.
+ */
+export function ToastDescription(props: ToastDescriptionProps): JSX.Element {
+  return (
+    <div class={props.class} style={props.style}>
+      {props.children}
+    </div>
+  );
+}
+
+export interface ToastCloseButtonProps {
+  /** The toast to close. */
+  toast: QueuedToast<ToastContent>;
+  children?: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+  'aria-label'?: string;
+}
+
+/**
+ * ToastCloseButton is a button that closes the toast.
+ */
+export function ToastCloseButton(props: ToastCloseButtonProps): JSX.Element {
+  const state = useToastContext();
+
+  const handleClose = () => {
+    state.close(props.toast.key);
+  };
+
+  return (
+    <button
+      type="button"
+      class={props.class}
+      style={props.style}
+      aria-label={props['aria-label'] ?? 'Close'}
+      onClick={handleClose}
+    >
+      {props.children ?? '×'}
+    </button>
+  );
+}
+
+// ============================================
+// DEFAULT TOAST RENDERING
+// ============================================
+
+export interface DefaultToastProps {
+  toast: QueuedToast<ToastContent>;
+}
+
+/**
+ * DefaultToast provides a basic toast layout with title, description, and close button.
+ * Use this as a starting point or as-is for simple toast needs.
+ */
+export function DefaultToast(props: DefaultToastProps): JSX.Element {
+  const content = () => props.toast.content;
+
+  return (
+    <Toast toast={props.toast}>
+      <div style={{ display: 'flex', 'align-items': 'flex-start', gap: '12px' }}>
+        <div style={{ flex: 1 }}>
+          <Show when={content().title}>
+            <ToastTitle style={{ 'font-weight': 'bold', 'margin-bottom': '4px' }}>
+              {content().title}
+            </ToastTitle>
+          </Show>
+          <Show when={content().description}>
+            <ToastDescription>{content().description}</ToastDescription>
+          </Show>
+          <Show when={content().action}>
+            <button
+              type="button"
+              style={{ 'margin-top': '8px' }}
+              onClick={content().action?.onAction}
+            >
+              {content().action?.label}
+            </button>
+          </Show>
+        </div>
+        <ToastCloseButton toast={props.toast} />
+      </div>
+    </Toast>
+  );
+}

package/src/Toolbar.tsx

@@ -0,0 +1,160 @@
+/**
+ * Toolbar component for solidaria-components
+ *
+ * Pre-wired headless toolbar component that combines aria hooks.
+ * Port of react-aria-components/src/Toolbar.tsx
+ */
+
+import {
+  type JSX,
+  type ParentProps,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+} from 'solid-js'
+import {
+  createToolbar,
+  type AriaToolbarProps,
+  type Orientation,
+} from '@proyecto-viviana/solidaria'
+import {
+  type SlotProps,
+  filterDOMProps,
+} from './utils'
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ToolbarRenderProps {
+  /** The orientation of the toolbar. */
+  orientation: Orientation
+}
+
+export interface ToolbarProps
+  extends AriaToolbarProps,
+    ParentProps,
+    SlotProps {
+  /** The CSS className for the element. A function may be provided to receive render props. */
+  class?: string | ((renderProps: ToolbarRenderProps) => string)
+  /** The inline style for the element. A function may be provided to receive render props. */
+  style?: JSX.CSSProperties | ((renderProps: ToolbarRenderProps) => JSX.CSSProperties)
+  /** Additional data-* attributes. */
+  [key: `data-${string}`]: string | undefined
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+export interface ToolbarContextValue {
+  slots?: {
+    [name: string]: Record<string, unknown>
+  }
+}
+
+export const ToolbarContext = createContext<ToolbarContextValue | null>(null)
+
+// ============================================
+// TOOLBAR COMPONENT
+// ============================================
+
+/**
+ * A toolbar is a container for a set of interactive controls,
+ * such as buttons, checkboxes, or links, with arrow key navigation.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar aria-label="Text formatting">
+ *   <Button>Bold</Button>
+ *   <Button>Italic</Button>
+ *   <Button>Underline</Button>
+ * </Toolbar>
+ *
+ * // With render props
+ * <Toolbar orientation="vertical">
+ *   {({ orientation }) => (
+ *     <div data-orientation={orientation}>
+ *       <Button>Cut</Button>
+ *       <Button>Copy</Button>
+ *       <Button>Paste</Button>
+ *     </div>
+ *   )}
+ * </Toolbar>
+ * ```
+ */
+export function Toolbar(props: ToolbarProps): JSX.Element {
+  const [local, ariaProps, domProps] = splitProps(
+    props,
+    ['class', 'style', 'slot', 'children'],
+    ['orientation', 'aria-label', 'aria-labelledby']
+  )
+
+  // Get slot props from context if available
+  const ctx = useContext(ToolbarContext)
+  const slotProps = () => {
+    if (ctx?.slots && local.slot) {
+      return ctx.slots[local.slot] || {}
+    }
+    return {}
+  }
+
+  // Merge slot props with explicit props
+  const mergedAriaProps = createMemo(() => ({
+    orientation: ariaProps.orientation,
+    'aria-label': ariaProps['aria-label'] ?? slotProps()['aria-label'] as string | undefined,
+    'aria-labelledby': ariaProps['aria-labelledby'],
+  }))
+
+  // Create toolbar aria props
+  const { toolbarProps, orientation } = createToolbar(mergedAriaProps())
+
+  // Render props values
+  const renderValues = createMemo<ToolbarRenderProps>(() => ({
+    orientation: orientation(),
+  }))
+
+  // Resolve class
+  const resolvedClass = createMemo(() => {
+    const cls = local.class
+    if (typeof cls === 'function') {
+      return cls(renderValues())
+    }
+    return cls ?? 'solidaria-Toolbar'
+  })
+
+  // Resolve style
+  const resolvedStyle = createMemo(() => {
+    const style = local.style
+    if (typeof style === 'function') {
+      return style(renderValues())
+    }
+    return style
+  })
+
+  // Resolve children (support render props)
+  const resolvedChildren = createMemo(() => {
+    const children = props.children
+    if (typeof children === 'function') {
+      return (children as (props: ToolbarRenderProps) => JSX.Element)(renderValues())
+    }
+    return children
+  })
+
+  // Filter remaining DOM props
+  const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }))
+
+  return (
+    <div
+      {...filteredDOMProps()}
+      {...toolbarProps}
+      class={resolvedClass()}
+      style={resolvedStyle()}
+      slot={local.slot}
+      data-orientation={orientation()}
+    >
+      {resolvedChildren()}
+    </div>
+  )
+}