@lumx/core 4.13.0 → 4.14.0-alpha.1

package/js/components/Table/TableCellStories.d.ts

@@ -0,0 +1,47 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: TableCell, components: { Table, TableBody, TableHeader, TableRow }, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+    components: {
+        Table: any;
+        TableBody: any;
+        TableHeader: any;
+        TableRow: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            variant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("body" | "head")[];
+                mapping: Record<string, "body" | "head"> | undefined;
+            };
+            onHeaderClick: {
+                action: boolean;
+            };
+        };
+    };
+    Default: {
+        args: {
+            children: string;
+        };
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+    };
+    Header: {
+        args: {
+            variant: string;
+            children: string;
+        };
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+    };
+    AllHeaderStates: {
+        args: {
+            variant: string;
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+    };
+};

package/js/components/Table/TableHeader.d.ts

@@ -0,0 +1,29 @@
+import type { JSXElement, HasClassName, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface TableHeaderProps extends HasClassName {
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "TableHeader";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: string;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TableHeaderProps>;
+/**
+ * TableHeader component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+export declare const TableHeader: (props: TableHeaderProps) => import("react").JSX.Element;

package/js/components/Table/TableRow.d.ts

@@ -0,0 +1,35 @@
+import type { JSXElement, HasClassName, CommonRef, HasAriaDisabled } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface TableRowProps extends HasClassName, HasAriaDisabled {
+    /** Whether the component is clickable or not. */
+    isClickable?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Tab index */
+    tabIndex?: number;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "TableRow";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: string;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TableRowProps>;
+/**
+ * TableRow component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+export declare const TableRow: (props: TableRowProps) => import("react").JSX.Element;

package/js/components/Table/TableRowStories.d.ts

@@ -0,0 +1,23 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: TableRow, components: { Table, TableBody, TableCell }, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+    components: {
+        Table: any;
+        TableBody: any;
+        TableCell: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: (args: any) => import("react").JSX.Element;
+        argTypes: {
+            children: {
+                control: boolean;
+            };
+        };
+    };
+    Default: {};
+    AllStates: {
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/Table/index.d.ts

@@ -0,0 +1,27 @@
+import type { JSXElement, HasTheme, HasClassName, CommonRef } from '../../types';
+import { CLASSNAME, COMPONENT_NAME } from './constants';
+/**
+ * Defines the props of the component.
+ */
+export interface TableProps extends HasTheme, HasClassName {
+    /** Whether the table has checkbox or thumbnail on first cell or not. */
+    hasBefore?: boolean;
+    /** Whether the table has dividers or not. */
+    hasDividers?: boolean;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TableProps>;
+/**
+ * Table component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+export declare const Table: (props: TableProps) => import("react").JSX.Element;
+export { CLASSNAME, COMPONENT_NAME };

package/js/components/Tabs/Tab.d.ts

@@ -0,0 +1,70 @@
+import { CommonRef, HasClassName, JSXElement } from '../../types';
+import { IconProps } from '../Icon';
+/**
+ * Defines the props of the component.
+ */
+export interface TabProps extends HasClassName {
+    /** Children are not supported. */
+    children?: never;
+    /** Icon (SVG path). */
+    icon?: IconProps['icon'];
+    /** Icon component properties. */
+    iconProps?: Omit<IconProps, 'icon'>;
+    /** Native id property. */
+    id?: string;
+    /** Whether the tab is active or not. */
+    isActive?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Label content. */
+    label: string | JSXElement;
+    /** Whether any tab in the list is disabled (used to block interaction). */
+    isAnyDisabled?: boolean;
+    /** Whether the tab should become active when it receives focus (automatic activation pattern). */
+    shouldActivateOnFocus?: boolean;
+    /** Focus event handler injected by TabList. */
+    handleFocus?: (event: any) => void;
+    /** Keypress event handler injected by TabList. */
+    handleKeyPress?: (event: any) => void;
+    /** Callback to activate this tab, injected by TabList. */
+    changeToTab?: () => void;
+    /** Tab index for roving tabindex management. */
+    tabIndex?: number;
+    /** Name of the prop used to set tab index (framework-dependent). */
+    tabIndexProp?: string;
+    /** Name of the prop used to attach the keypress event (framework-dependent). */
+    keyPressProp?: string;
+    /** ID applied to the tab button element (for aria-labelledby on the panel). */
+    tabId?: string;
+    /** ID of the associated tab panel (for aria-controls). */
+    tabPanelId?: string;
+    /** Icon component injected by the framework wrapper. */
+    Icon: any;
+    /** Text component injected by the framework wrapper. */
+    Text: any;
+    /** Forward ref to the underlying button element. */
+    ref?: CommonRef;
+}
+export type TabPropsToOverride = 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabIndexProp' | 'keyPressProp' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Tab";
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TabProps>;
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME = "lumx-tabs__link";
+/**
+ * Tab component.
+ *
+ * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Tab: (props: TabProps) => import("react").JSX.Element;

package/js/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,43 @@
+import { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface TabPanelProps extends HasClassName {
+    /** Whether the tab is active or not. */
+    isActive?: boolean;
+    /** Whether the tab is lazy loaded or not */
+    isLazy?: boolean;
+    /** Children */
+    children?: JSXElement;
+    /** ID applied to the tab button element (for aria-labelledby on the panel). */
+    tabId?: string;
+    /** ID of the associated tab panel (for aria-controls). */
+    id?: string;
+    /** Name of the prop used to set tab index (framework-dependent). */
+    tabIndexProp?: string;
+    /** Forward ref to the underlying button element. */
+    ref?: CommonRef;
+}
+export type TabPanelPropsToOverride = 'tabId' | 'isLazy' | 'tabIndexProp';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "TabPanel";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TabPanelProps>;
+/**
+ * TabPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const TabPanel: (props: TabPanelProps) => import("react").JSX.Element;

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

@@ -0,0 +1,164 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/** Shared argTypes for Text (also reused by Heading) */
+export declare const TEXT_ARG_TYPES: {
+    as: {
+        control: {
+            type: "select" | "inline-radio";
+        };
+        options: import("../../types").TextElement[];
+        mapping: Record<string, import("../../types").TextElement> | undefined;
+    };
+    typography: {
+        control: {
+            type: "select" | "inline-radio";
+        };
+        options: ("caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button")[];
+        mapping: Record<string, "caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button"> | undefined;
+    };
+    color: {
+        control: {
+            type: "select" | "inline-radio";
+        };
+        options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+        mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+    };
+    colorVariant: {
+        control: {
+            type: "select" | "inline-radio";
+        };
+        options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+        mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+    };
+    whiteSpace: {
+        control: {
+            type: "select" | "inline-radio";
+        };
+        options: string[];
+        mapping: Record<string, string> | undefined;
+    };
+};
+/**
+ * Setup Text stories for a specific framework (React or Vue).
+ * Framework-specific components (Icon) are injected via `components`.
+ */
+export declare function setup({ component: Text, components: { Icon }, decorators: { withCombinations, withResizableBox }, overrides, }: SetupStoriesOptions<{
+    overrides: 'TestUpdateTruncateTitleLabel';
+    decorators: 'withCombinations' | 'withResizableBox';
+    components: {
+        Icon: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        args: {
+            as: string;
+            children: string;
+        };
+        argTypes: {
+            as: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: import("../../types").TextElement[];
+                mapping: Record<string, import("../../types").TextElement> | undefined;
+            };
+            typography: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button")[];
+                mapping: Record<string, "caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button"> | undefined;
+            };
+            color: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+                mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+            };
+            colorVariant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+                mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+            };
+            whiteSpace: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+        };
+    };
+    Base: {};
+    LongText: {
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    NoWrap: {
+        args: {
+            children: string;
+            noWrap: boolean;
+        };
+    };
+    AllWhiteSpace: {
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Truncate: {
+        args: {
+            children: string;
+            truncate: boolean;
+        };
+    };
+    TruncateMultiline: {
+        args: {
+            children: string;
+            truncate: {
+                lines: number;
+            };
+        };
+    };
+    WithIcon: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+    };
+    AllTypography: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            typography: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    AllColors: {
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+            colorVariant: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    TestUpdateTruncateTitleLabel: {
+        args: {
+            children: undefined;
+        };
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+        tags: string[];
+    };
+};

package/js/components/TextField/RawInputText.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLInputTypeAttribute } from 'react';
+import { CommonRef, HasClassName, HasTheme } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface RawInputTextProps extends HasTheme, HasClassName {
+    value?: string;
+    type?: HTMLInputTypeAttribute;
+    name?: string | undefined;
+    ref?: CommonRef;
+    handleChange?: (value: string, name?: string, event?: any) => void;
+    handleInput?: (value: string, name?: string, event?: any) => void;
+}
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<RawInputTextProps>;
+/**
+ * Raw input text component
+ * (input element without any decoration)
+ */
+export declare const RawInputText: (props: RawInputTextProps) => import("react").JSX.Element;

package/js/components/TextField/RawInputTextStories.d.ts

@@ -0,0 +1,16 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: RawInputText, decorators: { withValueOnChange, withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withValueOnChange' | 'withWrapper';
+}>): {
+    meta: {
+        component: any;
+        args: Partial<import("./RawInputText").RawInputTextProps>;
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Default: {};
+    WithPlaceholder: {
+        args: {
+            placeholder: string;
+        };
+    };
+};

package/js/components/TextField/RawInputTextareaStories.d.ts

@@ -0,0 +1,21 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: RawInputTextarea, decorators: { withValueOnChange, withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withValueOnChange' | 'withWrapper';
+}>): {
+    meta: {
+        component: any;
+        args: Partial<import("./RawInputTextarea").RawInputTextareaProps>;
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Default: {};
+    WithMinimumRows: {
+        args: {
+            rows: number;
+        };
+    };
+    WithPlaceholder: {
+        args: {
+            placeholder: string;
+        };
+    };
+};

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

@@ -0,0 +1,101 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: TextField, components: { Chip, IconButton, Typography }, decorators: { withValueOnChange, withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withValueOnChange' | 'withCombinations';
+    components: {
+        Chip: any;
+        IconButton: any;
+        Typography: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            clearButtonProps: {
+                control: boolean;
+            };
+            chips: {
+                control: boolean;
+            };
+            afterElement: {
+                control: boolean;
+            };
+            onClear: {
+                action: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Default: {
+        args: {
+            value: string;
+        };
+    };
+    Placeholder: {
+        args: {
+            value: string;
+            placeholder: string;
+        };
+    };
+    LabelAndHelper: {
+        args: {
+            label: string;
+            helper: string;
+            value: string;
+        };
+    };
+    CustomLabelAndHelper: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    NumberField: {
+        args: {
+            value: string;
+            type: string;
+        };
+    };
+    TextareaField: {
+        args: {
+            value: string;
+            multiline: boolean;
+            minimumRows: number;
+        };
+    };
+    Error: {
+        args: {
+            hasError: boolean;
+            error: string;
+            label: string;
+            helper: string;
+            value: string;
+        };
+    };
+    Valid: {
+        args: {
+            isValid: boolean;
+            label: string;
+            helper: string;
+            value: string;
+        };
+    };
+    MaxLength: {
+        args: {
+            value: string;
+            maxLength: number;
+            label: string;
+            helper: string;
+        };
+    };
+    WithAfterElement: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    WithChips: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    Disabled: {
+        args: {
+            value: string;
+            label: string;
+            helper: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};