@lumx/core 4.14.0-alpha.0 → 4.14.0-alpha.1

package/js/components/Chip/Stories.d.ts

@@ -0,0 +1,127 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: Chip, components: { Icon }, decorators: { withCombinations, withThemedBackground, withTheming }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withThemedBackground' | 'withTheming';
+    components: {
+        Icon: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: import("lodash").Omit<Partial<import(".").ChipProps>, "theme">;
+        argTypes: {
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("s" | "m")[];
+                mapping: Record<string, "s" | "m"> | undefined;
+            };
+            before: {
+                control: boolean;
+            };
+            after: {
+                control: boolean;
+            };
+        };
+    };
+    Default: {
+        args: {
+            children: string;
+        };
+    };
+    ChipButton: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            onClick: {
+                action: boolean;
+            };
+        };
+    };
+    ChipLink: {
+        args: {
+            children: string;
+            href: string;
+            target: string;
+        };
+    };
+    WithAfterAndBefore: {
+        argTypes: {
+            onBeforeClick: {
+                action: boolean;
+            };
+            onClick: {
+                action: boolean;
+            };
+            onAfterClick: {
+                action: boolean;
+            };
+        };
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            children: string;
+        };
+    };
+    ColorVariants: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            onBeforeClick: {
+                action: boolean;
+            };
+            onClick: {
+                action: boolean;
+            };
+            onAfterClick: {
+                action: boolean;
+            };
+        };
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    SelectedVariants: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            onBeforeClick: {
+                action: boolean;
+            };
+            onClick: {
+                action: boolean;
+            };
+            onAfterClick: {
+                action: boolean;
+            };
+        };
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Disabled: {
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Theming: {
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            onBeforeClick: {
+                action: boolean;
+            };
+            onClick: {
+                action: boolean;
+            };
+            onAfterClick: {
+                action: boolean;
+            };
+        };
+        args: {
+            children: string;
+        };
+    };
+};

package/js/components/Combobox/ComboboxOptionTests.d.ts

@@ -0,0 +1,24 @@
+import { ComboboxNamespace } from './Tests';
+type RenderResult = {
+    unmount: () => void;
+    container: HTMLElement;
+};
+/**
+ * Options to set up the ComboboxOption test suite.
+ * Injected by the framework-specific test file (React or Vue).
+ */
+export interface ComboboxOptionTestSetup {
+    /** Combobox compound component namespace */
+    Combobox: Pick<ComboboxNamespace, 'Provider' | 'List' | 'Option'>;
+    /**
+     * Render a JSX template and return a result with a container.
+     * The template is a zero-argument function returning a JSX element.
+     */
+    render: (template: () => any) => RenderResult;
+}
+/**
+ * Shared Combobox.Option test suite — covers DOM shape and ARIA correctness.
+ * Runs the same assertions against both React and Vue wrappers.
+ */
+export default function comboboxOptionTests({ Combobox, render }: ComboboxOptionTestSetup): void;
+export {};

package/js/components/Combobox/Stories.d.ts

@@ -0,0 +1,167 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import type { ComboboxNamespace } from './Tests';
+/**
+ * Setup Combobox demo stories for a specific framework (React or Vue).
+ * Framework-specific components and hooks are injected via options.
+ */
+export declare function setup({ components: { Combobox, IconButton, Avatar, SkeletonCircle }, decorators: { withValueOnChange }, }: SetupStoriesOptions<{
+    components: {
+        Combobox: ComboboxNamespace;
+        IconButton: any;
+        Avatar: any;
+        SkeletonCircle: any;
+    };
+    decorators: 'withValueOnChange';
+}>): {
+    meta: {
+        component: any;
+        play(): Promise<void>;
+    };
+    ComboboxWithSubcomponents: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithSection: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithFilteredSections: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithButton: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onSelect }: {
+            value: string;
+            onSelect: (option: {
+                value: string;
+            }) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithLinkOptions: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithOptionMoreInfo: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    GridComboboxWithInput: {
+        args: {
+            value: string;
+        };
+        argTypes: {
+            onEdit: {
+                action: string;
+            };
+            onDelete: {
+                action: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onEdit, onDelete, }: {
+            value: string;
+            onChange: (v: string) => void;
+            onEdit: (fruit: string) => void;
+            onDelete: (fruit: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    GridComboboxWithButton: {
+        args: {
+            value: string;
+        };
+        argTypes: {
+            onDelete: {
+                action: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onSelect, onDelete, }: {
+            value: string;
+            onSelect: (option: {
+                value: string;
+            }) => void;
+            onDelete: (fruit: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithEmptyState: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        play({ canvas }: any): Promise<void>;
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithErrorState: {
+        render: () => import("react").JSX.Element;
+    };
+    ComboboxWithLoading: {
+        render: () => import("react").JSX.Element;
+    };
+    ComboboxWithLoadMore: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithSectionLoading: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+    ComboboxWithAvatarLoading: {
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange }: {
+            value: string;
+            onChange: (v: string) => void;
+        }) => import("react").JSX.Element;
+    };
+};

package/js/components/Combobox/TestStories.d.ts

@@ -0,0 +1,143 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { type ComboboxNamespace } from './Tests';
+export declare function setup({ components: { Combobox, IconButton, Button }, decorators: { withValueOnChange }, }: SetupStoriesOptions<{
+    components: {
+        Combobox: ComboboxNamespace;
+        IconButton: any;
+        Button: any;
+    };
+    decorators: 'withValueOnChange';
+}>): {
+    meta: {
+        component: any;
+        tags: string[];
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+    AutoFilterOptions: {
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onSelect, }: {
+            value: string;
+            onChange: (v: string) => void;
+            onSelect?: (option: {
+                value: string;
+            }) => void;
+        }) => import("react").JSX.Element;
+    };
+    FilterOffOpenOnFocus: {
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onSelect }: any) => import("react").JSX.Element;
+    };
+    SelectOptionUpdatesInput: {
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onSelect, }: {
+            value: string;
+            onChange: (v: string) => void;
+            onSelect?: (option: {
+                value: string;
+            }) => void;
+        }) => import("react").JSX.Element;
+    };
+    MouseHoverDoesNotActivateOption: {
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onSelect, }: {
+            value: string;
+            onChange: (v: string) => void;
+            onSelect?: (option: {
+                value: string;
+            }) => void;
+        }) => import("react").JSX.Element;
+    };
+    ClickAwayClosesPopup: {
+        render: (args: any) => import("react").JSX.Element;
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    MouseHoverThenKeyboardNav: {
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onSelect, }: {
+            value: string;
+            onChange: (v: string) => void;
+            onSelect?: (option: {
+                value: string;
+            }) => void;
+        }) => import("react").JSX.Element;
+    };
+    OptionMoreInfoKeyboardHighlight: {
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        argTypes: {
+            onToggle: {
+                action: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onToggle, }: {
+            value: string;
+            onChange: (v: string) => void;
+            onToggle?: (isOpen: boolean) => void;
+        }) => import("react").JSX.Element;
+    };
+    OptionMoreInfoMouseHover: {
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        argTypes: {
+            onToggle: {
+                action: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onToggle, }: {
+            value: string;
+            onChange: (v: string) => void;
+            onToggle?: (isOpen: boolean) => void;
+        }) => import("react").JSX.Element;
+    };
+    OptionMoreInfoAriaDescribedBy: {
+        play: ({ canvasElement }: any) => Promise<void>;
+        args: {
+            value: string;
+        };
+        argTypes: {
+            onToggle: {
+                action: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ value, onChange, onToggle, }: {
+            value: string;
+            onChange: (v: string) => void;
+            onToggle?: (isOpen: boolean) => void;
+        }) => import("react").JSX.Element;
+    };
+};

package/js/components/Combobox/Tests.d.ts

@@ -0,0 +1,168 @@
+/** Combobox compound component namespace type. */
+export interface ComboboxNamespace {
+    Provider: any;
+    Input: any;
+    Button: any;
+    List: any;
+    Option: any;
+    OptionAction: any;
+    OptionMoreInfo: any;
+    OptionSkeleton: any;
+    Popover: any;
+    Section: any;
+    State: any;
+}
+type RenderResult = {
+    unmount: () => void;
+    container: HTMLElement;
+};
+/**
+ * Options to set up the combobox test suite.
+ * Injected by the framework-specific test file (React or Vue).
+ */
+export interface ComboboxTestSetup {
+    components: {
+        Combobox: ComboboxNamespace;
+        IconButton: any;
+        Button: any;
+    };
+    /**
+     * Render a template with controlled state management.
+     * Mirrors the withValueOnChange Storybook decorator.
+     *
+     * @param template   JSX render function receiving `{ value, onChange/onSelect, ... }`.
+     * @param initialArgs Initial props (value, spies, etc.).
+     * @param options     State wiring config (which prop manages state, how to extract value).
+     */
+    renderWithState: (template: (props: any) => any, initialArgs?: Record<string, any>, options?: {
+        onChangeProp?: string;
+        valueExtract?: (v: any) => any;
+    }) => RenderResult;
+}
+/**
+ * Create framework-agnostic JSX templates for combobox test fixtures.
+ * Exported so TestStories.tsx can reuse the same templates for browser-only tests.
+ */
+export declare function createTemplates(Combobox: ComboboxNamespace, IconButton: any): {
+    inputTemplate: ({ value, onChange, onSelect, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    manualFilterTemplate: ({ value, onChange, onSelect, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    filterOffTemplate: ({ value, onChange, onSelect, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    openOnFocusTemplate: ({ value, onChange, onSelect, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    noOpenOnFocusTemplate: ({ value, onChange, onSelect, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    buttonTemplate: ({ value, onSelect }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    showLabelButtonTemplate: ({ value, onSelect, }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    showTooltipButtonTemplate: ({ value, onSelect, }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    noValueButtonTemplate: ({ value, onSelect, }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    selectedButtonTemplate: ({ value, onSelect, }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    disabledInputTemplate: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("react").JSX.Element;
+    disabledButtonTemplate: ({ value, onSelect, }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+    }) => import("react").JSX.Element;
+    gridInputTemplate: ({ value, onChange, onSelect, onDelete, onEdit, }: {
+        value: string;
+        onChange: (v: string) => void;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+        onDelete?: (...args: unknown[]) => void;
+        onEdit?: (...args: unknown[]) => void;
+    }) => import("react").JSX.Element;
+    gridButtonTemplate: ({ value, onSelect, onDelete, }: {
+        value: string;
+        onSelect: (option: {
+            value: string;
+        }) => void;
+        onDelete?: (...args: unknown[]) => void;
+    }) => import("react").JSX.Element;
+    emptyStateTemplate: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("react").JSX.Element;
+    nbOptionMessageTemplate: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("react").JSX.Element;
+    errorStateTemplate: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("react").JSX.Element;
+    loadingTemplate: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("react").JSX.Element;
+    loadMoreTemplate: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("react").JSX.Element;
+    sectionLoadingTemplate: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("react").JSX.Element;
+    descriptionTemplate: ({ value, onChange }: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => import("react").JSX.Element;
+};
+export default function comboboxTests({ components: { Combobox, IconButton }, renderWithState }: ComboboxTestSetup): void;
+export {};