@lumx/core 4.3.2-alpha.8 → 4.4.0

package/stories/controls/theme.d.ts

@@ -0,0 +1,7 @@
+export declare const themeArgType: {
+    control: string;
+    options: {
+        readonly light: "light";
+        readonly dark: "dark";
+    };
+};

package/stories/controls/typography.d.ts

@@ -0,0 +1,8 @@
+export declare const ALL_TYPOGRAPHY: ("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")[];
+export declare const allTypographyArgType: {
+    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;
+};

package/stories/controls/withUndefined.d.ts

@@ -0,0 +1 @@
+export declare const withUndefined: <E>(options: Array<E> | Record<string, E>) => (E | undefined)[];

package/stories/types.d.ts

@@ -0,0 +1,48 @@
+import type { CombinationsOptions } from './utils/combinations';
+/** Storybook decorator function */
+type Decorator = (story: any, context: any) => any;
+/** Framework-specific decorators (injectable by React/Vue consumers) */
+interface StoryDecorators {
+    /** Decorator to wrap a story with a container element */
+    withWrapper?: (props: Record<string, any>, as?: any) => Decorator;
+    /** Decorator to render a story in a combinations matrix */
+    withCombinations?: (options: CombinationsOptions) => Decorator;
+    /** Decorator adding a themed background (light/dark) based on the `theme` arg */
+    withThemedBackground?: () => Decorator;
+    /** manages nested props */
+    withNestedProps?: () => Decorator;
+    /** Decorator wrapping story in a resizable box */
+    withResizableBox?: (options?: Record<string, any>) => Decorator;
+}
+/** A partial Storybook story object (args, argTypes, render, decorators, etc.) */
+type StoryOverride = Record<string, any>;
+/** Base options shared by all setup functions. */
+interface SetupStoriesBaseOptions {
+    /** The component to create stories for */
+    component: any;
+    /** Base render */
+    render?: any;
+    /** Base args */
+    args?: any;
+}
+/**
+ * Generic options for setting up component stories.
+ */
+export type SetupStoriesOptions<TConfig extends {
+    overrides?: string;
+    decorators?: keyof StoryDecorators;
+    components?: Record<string, any>;
+} = Record<string, never>> = SetupStoriesBaseOptions & (TConfig extends {
+    overrides: infer O extends string;
+} ? {
+    overrides?: Partial<Record<O, StoryOverride>>;
+} : unknown) & (TConfig extends {
+    decorators: infer D extends keyof StoryDecorators;
+} ? {
+    decorators: Pick<Required<StoryDecorators>, D> & StoryDecorators;
+} : unknown) & (TConfig extends {
+    components: infer C;
+} ? {
+    components: C;
+} : unknown);
+export {};

package/stories/utils/combinations.d.ts

@@ -0,0 +1,100 @@
+/** A tuple of [label, props] representing a single combination entry */
+export type PropEntry = [key: string, value: unknown];
+/** Object format for combinations: { 'label': { prop: value }, ... } */
+export type PropCombination = Record<string, Record<string, unknown>>;
+/** Array format for combinations: { key: 'propName', options: [...] } */
+export type PropArrayCombination = {
+    key: string;
+    options: Array<any>;
+};
+/** Either format for defining combinations */
+export type Combination = PropArrayCombination | PropCombination;
+/** Style properties (compatible with both React and Vue) */
+export type CSSProperties = Record<string, any>;
+/** Options for the withCombinations decorator */
+export type CombinationsOptions = {
+    /** Props combinations */
+    combinations: {
+        rows?: Combination;
+        cols?: Combination;
+        sections?: Combination;
+    };
+    /** Inject style on table */
+    tableStyle?: CSSProperties;
+    /** Inject style on first col */
+    firstColStyle?: CSSProperties;
+    /** Inject style on sections */
+    sectionStyle?: CSSProperties;
+    /** Inject style on cols */
+    colStyle?: CSSProperties;
+    /** Inject style on cells */
+    cellStyle?: CSSProperties;
+    /** Combinator function */
+    combinator?: (a: any, b: any) => any;
+    /** Exclude a combination */
+    excludeCombination?: (args: any) => boolean;
+};
+/**
+ * Convert an array of values into PropEntry tuples
+ */
+export declare const toProps: <E>(arr: Array<E>, prop: string) => PropEntry[];
+/**
+ * Type guard to check if a combination is in array format
+ */
+export declare const isArrayConfig: (c?: Combination) => c is PropArrayCombination;
+/**
+ * Convert a Combination config into an array of PropEntry tuples
+ */
+export declare function toPropEntries(config?: Combination): PropEntry[];
+/** Data for a single cell in the matrix */
+export type CellData = {
+    key: string;
+    args: Record<string, any>;
+    excluded: boolean;
+};
+/** Data for a single row in the matrix */
+export type RowData = {
+    key: string;
+    args: Record<string, any>;
+    excluded: boolean;
+    cells: CellData[];
+};
+/** Data for a single section in the matrix */
+export type SectionData = {
+    key: string;
+    args: Record<string, any>;
+    cols: PropEntry[];
+    rows: RowData[];
+};
+/** Complete matrix data for rendering */
+export type MatrixData = {
+    sections: SectionData[];
+    hasRows: boolean;
+    hasCols: boolean;
+};
+/** Default table style */
+export declare const DEFAULT_TABLE_STYLE: CSSProperties;
+/** Default combinator function */
+export declare const defaultCombinator: {
+    <T extends {}, U>(target: T, source: U): T & U;
+    <T extends {}, U, V>(target: T, source1: U, source2: V): T & U & V;
+    <T extends {}, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
+    (target: object, ...sources: any[]): any;
+};
+/**
+ * Combinator that merges arrays instead of overwriting them.
+ * Useful for combining props like `marginAuto: ['left', 'top']` from rows and cols.
+ */
+export declare const mergeArraysCombinator: import("lodash/fp").LodashMergeWith1x1;
+/** Options for prepareMatrixData */
+export type PrepareMatrixDataOptions = {
+    combinations: CombinationsOptions['combinations'];
+    baseArgs: Record<string, any>;
+    combinator?: (a: any, b: any) => any;
+    excludeCombination?: (args: any) => boolean;
+};
+/**
+ * Prepare the complete matrix data from combinations options.
+ * Returns all sections, rows, and cells pre-computed.
+ */
+export declare function prepareMatrixData({ combinations, baseArgs, combinator, excludeCombination, }: PrepareMatrixDataOptions): MatrixData;

package/stories/utils/concatPath.d.ts

@@ -0,0 +1,10 @@
+export type PathPart = string | number;
+export type Path = PathPart | Array<PathPart>;
+/**
+ * Concat flatten object path
+ *
+ * @example concatPath('foo', 'bar') // => 'foo.bar'
+ * @example concatPath(['foo', 0]) // => 'foo[0]'
+ * @example concatPath('foo', 0, ['bar']) // => 'foo[0].bar'
+ */
+export declare const concatPath: (...prefix: Path[]) => string;

package/stories/utils/disableArgTypes.d.ts

@@ -0,0 +1,7 @@
+export declare function disableArgTypes(argTypes: string[]): {
+    [k: string]: {
+        table: {
+            disable: boolean;
+        };
+    };
+};

package/stories/utils/initDemoShadowDOMPortal.d.ts

@@ -0,0 +1,5 @@
+/** Init a demo shadow DOM to use as portal container */
+export declare const initDemoShadowDOMPortal: () => {
+    container: ShadowRoot;
+    teardown: () => void;
+};

package/stories/utils/lorem.d.ts

@@ -0,0 +1,7 @@
+declare const types: {
+    readonly tiny: "Lorem ipsum quisque tincidunt lobortis dui non auctor. Donec porta, ligula volutpat\nvehicula aliquet, dui sapien tempus felis, sed.";
+    readonly short: "Lorem ipsum quisque tincidunt lobortis dui non auctor. Donec porta, ligula volutpat\nvehicula aliquet, dui sapien tempus felis, sed. Ullamco laboris nisi ut aliquid ex ea\ncommodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum\nfestiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam\nhabebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.\nPhasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.\nPaullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed\nimmemorabili. Nec dubitamus multa iter quae et nos invenerat.";
+    readonly long: "Lorem ipsum quisque tincidunt lobortis dui non auctor. Donec porta, ligula volutpat\nvehicula aliquet, dui sapien tempus felis, sed. Ullamco laboris nisi ut aliquid ex ea\ncommodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum\nfestiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam\nhabebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.\nPhasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.\nPaullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed\nimmemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil\ntimor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis\niudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\nQuisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,\ntertiam. Cras mattis iudicium purus sit amet fermentum. Prima luce, cum quibus mons aliud\nconsensu ab eo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Petierunt uti sibi\nconcilium totius Galliae in diem certam indicere. Etiam habebis sem dicantur magna mollis\neuismod. A communi observantia non est recedendum. Ut enim ad minim veniam, quis nostrud\nexercitation. Paullum deliquit, ponderibus modulisque suis ratio utitur. Hi omnes lingua,\ninstitutis, legibus inter se differunt. Magna pars studiorum, prodita quaerimus. Quisque ut\ndolor gravida, placerat libero vel, euismod. Tityre, tu patulae recubans sub tegmine fagi dolor.\nExcepteur sint obcaecat cupiditat non proident culpa. Plura mihi bona sunt, inclinet, amari\npetere vellent. Quae vero auctorem tractata ab fiducia dicuntur. Inmensae subtilitatis, obscuris\net malesuada fames. Quo usque tandem abutere, Catilina, patientia nostra? Nihilne te nocturnum\npraesidium Palati, nihil urbis vigiliae. Curabitur blandit tempus ardua ridiculus sed magna. Tu\nquoque, Brute, fili mi, nihil timor populi, nihil! Nihil hic munitissimus habendi senatus locus,\nnihil horum?Tu quoque, Brute, fili mi, nihil timor populi, nihil! Tityre, tu patulae recubans\nsub tegmine fagi dolor. Plura mihi bona sunt, inclinet, amari petere vellent. Ullamco laboris\nnisi ut aliquid ex ea commodi consequat. Pellentesque habitant morbi tristique senectus et\nnetus. Salutantibus vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur\nadipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Petierunt uti sibi\nconcilium totius Galliae in diem certam indicere. Contra legem facit qui id facit quod lex\nprohibet. Integer legentibus erat a ante historiarum dapibus. Petierunt uti sibi concilium\ntotius Galliae in diem certam indicere. Ab illo tempore, ab est sed immemorabili. Nihil hic\nmunitissimus habendi senatus locus, nihil horum? Quisque ut dolor gravida, placerat libero vel,\neuismod. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut\nlabore et dolore magna aliqua. Nec dubitamus multa iter quae et nos invenerat. Quam temere in\nvitiis, legem sancimus haerentia. Donec sed odio operae, eu vulputate felis rhoncus. Idque\nCaesaris facere voluntate liceret: sese habere. Paullum deliquit, ponderibus modulisque suis\nratio utitur. Quae vero auctorem tractata ab fiducia dicuntur. Gallia est omnis divisa in partes\ntres, quarum. Etiam habebis sem dicantur magna mollis euismod. Fabio vel iudice vincam, sunt in\nculpa qui officia. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor\nincidunt ut labore et dolore magna aliqua. Tu quoque, Brute, fili mi, nihil timor populi, nihil!\nInteger legentibus erat a ante historiarum dapibus. Tityre, tu patulae recubans sub tegmine fagi\ndolor. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Idque Caesaris facere voluntate\nliceret: sese habere. Quid securi etiam tamquam eu fugiat nulla pariatur. Pellentesque habitant\nmorbi tristique senectus et netus. Ut enim ad minim veniam, quis nostrud exercitation. Petierunt\nuti sibi concilium totius Galliae in diem certam indicere. Curabitur est gravida et libero vitae\ndictum. Qui ipsorum lingua Celtae, nostra Galli appellantur. Quam temere in vitiis, legem\nsancimus haerentia. Phasellus laoreet lorem vel dolor tempus vehicula. Ab illo tempore, ab est\nsed immemorabili. Praeterea iter est quasdam res quas ex communi. Quo usque tandem abutere,\nCatilina, patientia nostra? Non equidem invideo, miror magis posuere velit aliquet. Excepteur\nsint obcaecat cupiditat non proident culpa. Curabitur blandit tempus ardua ridiculus sed magna.\nPlura mihi bona sunt, inclinet, amari petere vellent. Quae vero auctorem tractata ab fiducia\ndicuntur. Me non paenitet nullum festiviorem excogitasse ad hoc. Unam incolunt Belgae, aliam\nAquitani, tertiam.";
+};
+export declare const loremIpsum: (type: keyof typeof types) => string;
+export {};

package/stories/utils/toFlattenProps.d.ts

@@ -0,0 +1,12 @@
+type Props = Record<string, any>;
+type OneOrMoreProps = Props | Array<Props>;
+/**
+ * Build a flat props object from the given nested props
+ *
+ * @example toFlattenProps({ foo: { bar: 4 } }) // => { 'foo.bar': 4 }
+ * @example toFlattenProps({ foo: [{ bar: 4 }, { bar: 5 }] }) // => { 'foo[0].bar': 4, 'foo[0].bar': 5 }
+ */
+export declare function toFlattenProps(props: {
+    [prefix: string]: OneOrMoreProps;
+}): Props;
+export {};

package/stories/utils/withCategory.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Add table.category to the provided argTypes
+ */
+export declare function withCategory(category: string, argTypes: Record<string, any>): Record<string, any>;

package/testing/commonTestsSuiteTL.d.ts

@@ -0,0 +1,87 @@
+import { Screen } from '@testing-library/dom';
+import { GenericProps } from '../js/types';
+import { Theme } from '../js/constants';
+export type SetupResult = {
+    [propName: keyof GenericProps]: any;
+};
+export type SetupRenderOptions = {
+    [propName: keyof GenericProps]: any;
+};
+export type SetupOptions<Props extends GenericProps> = {
+    render: (props: Props, options?: SetupRenderOptions) => Partial<SetupResult>;
+    screen: Screen;
+} & SetupRenderOptions;
+export type SetupFunction = (props?: GenericProps, options?: SetupRenderOptions) => Partial<SetupResult>;
+/**
+ * Configuration for an element affected by a theme.
+ */
+export type AffectConfig<E> = {
+    element: E;
+    classModifier?: 'color' | 'theme';
+    inverted?: boolean;
+};
+/**
+ * Type utility to negate a configuration.
+ */
+export type Not<E> = {
+    not: E;
+};
+/**
+ * Configuration for applying a theme to the component.
+ */
+export type ApplyTheme<S extends GenericProps, Props extends GenericProps> = {
+    /** Element(s) to which we apply the theme class */
+    affects: Array<AffectConfig<keyof S> | Not<AffectConfig<keyof S>>>;
+    /** Apply theme via theme prop */
+    viaProp: boolean;
+    /** Apply theme via theme context */
+    viaContext: boolean;
+    /** Apply a default theme if no prop or context was provided */
+    defaultTheme?: Theme;
+    /** Default props to apply when testing theme */
+    defaultProps?: Props;
+};
+/**
+ * Options for the common tests suite.
+ */
+export interface Options<Props extends Partial<GenericProps>> {
+    baseClassName: string;
+    forwardClassName?: keyof GenericProps;
+    forwardAttributes?: keyof GenericProps;
+    forwardRef?: keyof GenericProps;
+    applyTheme?: ApplyTheme<GenericProps, Props>;
+}
+/**
+ * Get the test elements based on the theme configuration.
+ *
+ * @param applyTheme The theme configuration.
+ * @return The test elements configuration.
+ */
+export declare const getTestElements: <S extends GenericProps, Props extends GenericProps>(applyTheme: ApplyTheme<S, Props>) => {
+    element: any;
+    getExpectedClassModifier: (theme: Theme) => string;
+    shouldHaveModifier: boolean;
+    apply: string;
+}[];
+/**
+ * Expect the theme to be applied to the element.
+ *
+ * @param wrappers The wrappers returned by the setup function.
+ * @param elementConfig The configuration of the element to check.
+ * @param theme The theme to check.
+ * @param override Override the default expectations.
+ */
+export declare const expectTheme: (wrappers: any, { element, getExpectedClassModifier, shouldHaveModifier }: any, theme: Theme, override?: {
+    shouldHaveModifier?: boolean;
+}) => void;
+/**
+ * Run common tests on a component.
+ *
+ * - Check base class name and class name forwarding
+ * - Check props forwarding
+ * - Check theme application via props, context, and default theme
+ *
+ * @param setup The setup function returns the wrapper and the component.
+ * @param options The options for the common tests.
+ */
+export declare function commonTestsSuiteTL<Props extends GenericProps>(setup: SetupFunction, options: Options<Props>): void;

package/testing/index.d.ts

@@ -0,0 +1 @@
+export * from './commonTestsSuiteTL';

package/testing/queries.d.ts

@@ -0,0 +1,4 @@
+export declare const queryAllByClassName: (container: HTMLElement, className: string) => HTMLElement[];
+export declare const queryByClassName: import("@testing-library/dom").QueryBy<[className: string]>, getAllByClassName: import("@testing-library/dom").GetAllBy<[className: string]>, getByClassName: import("@testing-library/dom").GetBy<[className: string]>, findAllByClassName: import("@testing-library/dom").FindAllBy<[className: string]>, findByClassName: import("@testing-library/dom").FindBy<[className: string]>;
+export declare const queryAllByTagName: (container: HTMLElement, tagName: string) => HTMLElement[];
+export declare const queryByTagName: import("@testing-library/dom").QueryBy<[tagName: string]>, getAllByTagName: import("@testing-library/dom").GetAllBy<[tagName: string]>, getByTagName: import("@testing-library/dom").GetBy<[tagName: string]>, findAllByTagName: import("@testing-library/dom").FindAllBy<[tagName: string]>, findByTagName: import("@testing-library/dom").FindBy<[tagName: string]>;

package/js/utils/events/index.js

@@ -1,2 +0,0 @@
-export { onButtonPressed, onEnterPressed, onEscapePressed } from './keyboard.js';
-export { detectHorizontalSwipe } from './swipe.js';