@lumx/core 4.3.2-alpha.4 → 4.3.2-alpha.40

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

@@ -0,0 +1,34 @@
+import { ColorPalette } from '../../constants';
+import type { LumxClassName, HasTheme, JSXElement, HasClassName, CommonRef } from '../../types';
+import { TextProps } from '../Text';
+export interface FlagProps extends HasClassName, HasTheme {
+    /** Color of the component. */
+    color?: ColorPalette;
+    /** Icon to use before the label. */
+    icon?: string;
+    /** Text label of the flag. */
+    children: JSXElement;
+    /** Enable text truncate on overflow */
+    truncate?: boolean;
+    /** ref to the root element */
+    ref?: CommonRef;
+    /** Text component to use for rendering the label */
+    Text: (props: TextProps) => any;
+}
+export declare const COMPONENT_NAME = "Flag";
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const DEFAULT_PROPS: Partial<FlagProps>;
+export declare const block: {
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+}, element: {
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+};
+/**
+ * Flag component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Flag: (props: FlagProps) => import("react").JSX.Element;

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

@@ -0,0 +1,108 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup FlexBox stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, render, args, decorators: { withWrapper, withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'NoShrink' | 'MarginAuto';
+    decorators: 'withCombinations' | 'withWrapper';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        args: any;
+        argTypes: {
+            orientation: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("horizontal" | "vertical")[];
+                mapping: Record<string, "horizontal" | "vertical"> | undefined;
+            };
+            fillSpace: {
+                control: string;
+            };
+            wrap: {
+                control: string;
+            };
+            noShrink: {
+                control: string;
+            };
+            hAlign: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("bottom" | "center" | "space-around" | "space-between" | "space-evenly" | "top")[];
+                mapping: Record<string, "bottom" | "center" | "space-around" | "space-between" | "space-evenly" | "top"> | undefined;
+            };
+            vAlign: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("center" | "left" | "right" | "space-around" | "space-between" | "space-evenly")[];
+                mapping: Record<string, "center" | "left" | "right" | "space-around" | "space-between" | "space-evenly"> | undefined;
+            };
+            gap: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("tiny" | "regular" | "medium" | "big" | "huge")[];
+                mapping: Record<string, "tiny" | "regular" | "medium" | "big" | "huge"> | undefined;
+            };
+        };
+    };
+    /** Without config, FlexBox acts as a simple <div> */
+    NoConfig: {
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Horizontal orientation with all possible item alignments */
+    Horizontal: {
+        args: {
+            orientation: "horizontal";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Vertical orientation with all possible item alignments */
+    Vertical: {
+        args: {
+            orientation: "vertical";
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All gap sizes */
+    GapSizes: {
+        args: {
+            orientation: "horizontal";
+        };
+        argTypes: {
+            gap: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Wrap items in new row or column */
+    Wrap: {
+        args: {
+            orientation: "horizontal";
+            wrap: boolean;
+        };
+        argTypes: {
+            wrap: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Prevent FlexBox from shrinking into a parent flex box */
+    NoShrink: {
+        args: any;
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All combinations of margin auto values */
+    MarginAuto: {
+        args: any;
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,13 @@
+import { SetupOptions } from '../../../testing';
+import { FlexBoxProps } from '.';
+type SetupProps = Partial<FlexBoxProps>;
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (props: SetupProps | undefined, { render, ...options }: SetupOptions<FlexBoxProps>) => {
+    props: Partial<FlexBoxProps>;
+    flexBox: HTMLElement;
+    container: any;
+};
+declare const _default: (renderOptions: SetupOptions<FlexBoxProps>) => void;
+export default _default;

package/js/components/FlexBox/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const GAP_SIZES: ("tiny" | "regular" | "medium" | "big" | "huge")[];
+export declare const SPACE_ALIGNMENTS: ("space-around" | "space-between" | "space-evenly")[];
+export declare const VERTICAL_ALIGNMENTS: ("bottom" | "center" | "space-around" | "space-between" | "space-evenly" | "top")[];
+export declare const HORIZONTAL_ALIGNMENTS: ("center" | "left" | "right" | "space-around" | "space-between" | "space-evenly")[];

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

@@ -0,0 +1,50 @@
+import { Orientation } from '../../constants';
+import type { LumxClassName, JSXElement, HasClassName } from '../../types';
+import type { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment } from './types';
+export type * from './types';
+/**
+ * Defines the props of the component.
+ */
+export interface FlexBoxProps extends HasClassName {
+    /** Children elements. */
+    children?: JSXElement;
+    /** Whether the "content filling space" is enabled or not. */
+    fillSpace?: boolean;
+    /** Gap space between flexbox items. */
+    gap?: GapSize;
+    /** Flex horizontal alignment. */
+    hAlign?: FlexVerticalAlignment;
+    /** Whether the "auto margin" is enabled all around or not. */
+    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
+    /** Whether the "content shrink" is disabled or not. */
+    noShrink?: boolean;
+    /** Flex direction. */
+    orientation?: Orientation;
+    /** Flex vertical alignment. */
+    vAlign?: FlexHorizontalAlignment;
+    /** Whether the "flex wrap" is enabled or not. */
+    wrap?: boolean;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "FlexBox";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+};
+/**
+ * Get FlexBox component props (className computation).
+ *
+ * @param  props Component props.
+ * @return Computed props with className.
+ */
+export declare function getFlexBoxProps(props: FlexBoxProps): {
+    className: string;
+    /** Children elements. */
+    children?: JSXElement;
+};

package/js/components/FlexBox/types.d.ts

@@ -0,0 +1,7 @@
+import { Alignment, HorizontalAlignment, Size, VerticalAlignment } from '../../constants';
+export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
+export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
+export type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
+export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
+export {};

package/js/components/GridColumn/GridColumn.d.ts

@@ -0,0 +1,48 @@
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+import { Size } from '../../constants';
+export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+export interface GridColumnProps extends HasClassName {
+    /** Customize the root element. */
+    as?: any;
+    /** Children elements. */
+    children?: JSXElement;
+    /** Space between columns and rows. */
+    gap?: GridColumnGapSize;
+    /** Ideal number of columns. */
+    maxColumns?: number;
+    /** Minimum width for each item, reduce the number of column if there is not enough space. */
+    itemMinWidth?: number;
+    /** Custom styles. */
+    style?: any;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "GridColumn";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<GridColumnProps>;
+/**
+ * The GridColumn is a layout component that can display children in a grid
+ * with custom display properties. It also comes with a responsive design,
+ * with a number of column that reduce when there is not enough space for each item.
+ *
+ * @param props Component props.
+ * @return JSX element.
+ */
+export declare const GridColumn: {
+    (props: GridColumnProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-grid-column";
+    defaultProps: Partial<GridColumnProps>;
+};

package/js/components/GridColumn/GridColumnStories.d.ts

@@ -0,0 +1,47 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component, render, }: SetupStoriesOptions<{
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            nbItems: {
+                control: string;
+            };
+            gap: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: (import("./GridColumn").GridColumnGapSize | undefined)[];
+                mapping: Record<string, import("./GridColumn").GridColumnGapSize | undefined> | undefined;
+            };
+            itemMinWidth: {
+                control: string;
+            };
+            maxColumns: {
+                control: string;
+            };
+        };
+        args: {
+            nbItems: number;
+            as?: any;
+            children?: import("react").ReactNode;
+            gap?: import("./GridColumn").GridColumnGapSize | undefined;
+            maxColumns?: number | undefined;
+            itemMinWidth?: number | undefined;
+            style?: any;
+            ref?: import("../../types").CommonRef;
+            className?: string | undefined;
+        };
+    };
+    /** Default grid column displaying a single column */
+    Default: {};
+    /** Grid column with max 4 columns (responsive) */
+    Columns: {
+        args: {
+            maxColumns: number;
+            itemMinWidth: number;
+        };
+    };
+};

package/js/components/GridColumn/GridColumnTests.d.ts

@@ -0,0 +1,12 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    gridColumn: HTMLElement;
+    div: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

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

@@ -0,0 +1,89 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Heading stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, render, decorators: { withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'NestedHeadingLevelProvider';
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            as: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: import("../../types").HeadingElement[];
+                mapping: Record<string, import("../../types").HeadingElement> | undefined;
+            };
+            children: {
+                control: string;
+            };
+            typography: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "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, "overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "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;
+            };
+        };
+    };
+    /** Default heading with text */
+    Default: {
+        args: {
+            children: string;
+        };
+    };
+    /** All supported heading elements */
+    AllLevels: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            as: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All typography */
+    AllTypography: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            typography: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Nest HeadingLevelProvider to increment heading levels */
+    NestedHeadingLevelProvider: {
+        [x: string]: any;
+    };
+};

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

@@ -0,0 +1,11 @@
+import { SetupOptions } from '../../../testing';
+import { HeadingProps } from '.';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: Partial<HeadingProps> | undefined, { render, ...options }: SetupOptions<HeadingProps>) => {
+    heading: HTMLElement;
+    props: HeadingProps;
+};
+declare const _default: ({ render, screen, ...options }: SetupOptions<HeadingProps>) => void;
+export default _default;

package/js/components/Heading/constants.d.ts

@@ -0,0 +1,21 @@
+import { HeadingElement } from '../../types';
+/** The maximum authorized heading level. */
+export declare const MAX_HEADING_LEVEL = 6;
+/**
+ * Typography to use by default depending on the heading level.
+ */
+export declare const DEFAULT_TYPOGRAPHY_BY_LEVEL: {
+    h1: "display1";
+    h2: "headline";
+    h3: "title";
+    h4: "subtitle2";
+    h5: "subtitle1";
+    h6: "body2";
+};
+export interface HeadingLevelContext {
+    /** The current level */
+    level: number;
+    /** The heading element matching the current level */
+    headingElement: HeadingElement;
+}
+export declare const defaultContext: HeadingLevelContext;

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

@@ -0,0 +1,44 @@
+import { HeadingElement, LumxClassName } from '../../types';
+import { TextProps } from '../Text';
+/**
+ * Defines the props of the component.
+ */
+export interface HeadingProps extends Partial<TextProps> {
+    /**
+     * Display a specific heading level instead of the one provided by parent context provider.
+     */
+    as?: HeadingElement;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Heading";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: {};
+/**
+ * Get Heading component common props
+ *
+ * @param props                 Component props.
+ * @param contextHeadingElement Heading element from context.
+ * @return Common Props
+ */
+export declare const getHeadingProps: (props: HeadingProps, contextHeadingElement?: HeadingElement) => {
+    as: HeadingElement;
+    className: string;
+    typography: import("../../constants").Typography;
+    color?: import("../../constants").ColorWithVariants | undefined;
+    colorVariant?: import("../../constants").ColorVariant | undefined;
+    truncate?: boolean | {
+        lines: number;
+    } | undefined;
+    noWrap?: boolean | undefined;
+    whiteSpace?: import("../../constants").WhiteSpace | undefined;
+    children?: import("react").ReactNode;
+    style?: import("react").CSSProperties | undefined;
+};

package/js/components/Heading/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Computes the next heading level based on the optional prop level or the parent context level.
+ *
+ * @param levelProp - The explicit level provided via props (optional).
+ * @param parentLevel - The level from the parent context.
+ * @returns The calculated heading level, clamped to the maximum allowed level.
+ */
+export declare const computeHeadingLevel: (levelProp: number | undefined, parentLevel: number) => number;

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

@@ -0,0 +1,150 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Icon stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, decorators: { withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'SizeAndShape' | 'AllColors' | 'InsideText';
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            icon: {
+                control: {
+                    type: string;
+                };
+                options: {
+                    undefined: undefined;
+                    mdiAbTesting: string;
+                    mdiAbjadArabic: string;
+                    mdiAccount: string;
+                    mdiAccountBox: string;
+                    mdiAlert: string;
+                    mdiAlertCircle: string;
+                    mdiArrowDown: string;
+                    mdiArrowUp: string;
+                    mdiAtom: string;
+                    mdiBee: string;
+                    mdiBell: string;
+                    mdiBullhornOutline: string;
+                    mdiCheck: string;
+                    mdiCheckCircle: string;
+                    mdiChevronDown: string;
+                    mdiChevronLeft: string;
+                    mdiChevronRight: string;
+                    mdiChevronUp: string;
+                    mdiClose: string;
+                    mdiCloseCircle: string;
+                    mdiDelete: string;
+                    mdiDotsHorizontal: string;
+                    mdiDragVertical: string;
+                    mdiEarth: string;
+                    mdiEmail: string;
+                    mdiEye: string;
+                    mdiFileEdit: string;
+                    mdiFlag: string;
+                    mdiFolder: string;
+                    mdiFolderGoogleDrive: string;
+                    mdiFoodApple: string;
+                    mdiGoogleCirclesExtended: string;
+                    mdiHeart: string;
+                    mdiHome: string;
+                    mdiImageBroken: string;
+                    mdiInformation: string;
+                    mdiLink: string;
+                    mdiMagnifyMinusOutline: string;
+                    mdiMagnifyPlusOutline: string;
+                    mdiMenuDown: string;
+                    mdiMessageTextOutline: string;
+                    mdiMinus: string;
+                    mdiOpenInNew: string;
+                    mdiPauseCircleOutline: string;
+                    mdiPencil: string;
+                    mdiPlay: string;
+                    mdiPlayCircleOutline: string;
+                    mdiPlus: string;
+                    mdiRadioboxBlank: string;
+                    mdiRadioboxMarked: string;
+                    mdiReply: string;
+                    mdiSend: string;
+                    mdiStar: string;
+                    mdiTextBox: string;
+                    mdiTextBoxPlus: string;
+                    mdiTram: string;
+                    mdiTranslate: string;
+                    mdiViewList: string;
+                };
+            };
+            hasShape: {
+                control: string;
+            };
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl")[];
+                mapping: Record<string, "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl"> | 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;
+            };
+        };
+    };
+    /** All combinations of size and shape */
+    SizeAndShape: {
+        args: {
+            icon: string;
+        };
+        argTypes: {
+            hasShape: {
+                control: boolean;
+            };
+            size: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All combinations of color and color variants */
+    AllColors: {
+        args: {
+            size: "m";
+            icon: string;
+        };
+        argTypes: {
+            hasShape: {
+                control: boolean;
+            };
+            color: {
+                control: boolean;
+            };
+            colorVariant: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Icon inside a text component (renders as inline instead of block and can adapt to the verticalAlign) */
+    InsideText: {
+        args: any;
+        argTypes: {
+            verticalAlign: {
+                control: string;
+                options: (string | undefined)[];
+            };
+        };
+    };
+};