@lumx/react 3.10.1-alpha.5 → 3.10.1-alpha.7

package/src/utils/type/GenericProps.ts

@@ -0,0 +1,11 @@
+import type { HasClassName } from './HasClassName';
+
+/**
+ * Define a generic props types.
+ */
+export interface GenericProps extends HasClassName {
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}

package/src/utils/type/HasAriaLabelOrLabelledBy.ts

@@ -0,0 +1,19 @@
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string
+    ? {
+          /**
+           * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+           * Although it is not recommended, aria-label can be used instead if no visible element is available.
+           */
+          'aria-labelledby': T;
+          /** The label of the dialog. */
+          'aria-label'?: undefined;
+      }
+    : {
+          'aria-label': string;
+          'aria-labelledby'?: undefined;
+      };

package/src/utils/type/HasClassName.ts

@@ -0,0 +1,6 @@
+export interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}

package/src/utils/type/HasCloseMode.ts

@@ -0,0 +1,7 @@
+export interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}

package/src/utils/type/HasPolymorphicAs.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export type HasPolymorphicAs<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
+    /**
+     * Customize the rendered component.
+     */
+    as?: E;
+};

package/src/utils/type/HasTheme.ts

@@ -0,0 +1,8 @@
+import type { Theme } from '@lumx/react';
+
+export interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}

package/src/utils/type/HeadingElement.ts

@@ -0,0 +1,2 @@
+/** Union type of all heading elements */
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/src/utils/type/KebabCase.ts

@@ -0,0 +1,6 @@
+/** Transform a string literal into kebab case */
+export type KebabCase<S> = S extends `${infer C}${infer T}`
+    ? T extends Uncapitalize<T>
+        ? `${Uncapitalize<C>}${KebabCase<T>}`
+        : `${Uncapitalize<C>}-${KebabCase<T>}`
+    : S;

package/src/utils/type/MaybeElementOrRef.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+
+/**
+ * Maybe a HTMLElement or a React ref of a HTMLElement
+ */
+export type MaybeElementOrRef<E extends HTMLElement> = E | React.RefObject<E | null> | null | undefined;

package/src/utils/type/Point.ts

@@ -0,0 +1,4 @@
+/**
+ * A point coordinate in 2D space
+ */
+export type Point = { x: number; y: number };

package/src/utils/type/Predicate.ts

@@ -0,0 +1,2 @@
+/** Predicate function type */
+export type Predicate<T> = (t: T) => boolean;

package/src/utils/type/RectSize.ts

@@ -0,0 +1,4 @@
+/**
+ * Rectangle size
+ */
+export type RectSize = { width: number; height: number };

package/src/utils/type/TextElement.ts

@@ -0,0 +1,4 @@
+import type { HeadingElement } from './HeadingElement';
+
+/** Union type of all text elements */
+export type TextElement = 'span' | 'p' | HeadingElement;

package/src/utils/type/ValueOf.ts

@@ -0,0 +1,2 @@
+/** Get types of the values of a record. */
+export type ValueOf<T extends Record<any, any>> = T[keyof T];

package/src/utils/type/index.ts

@@ -0,0 +1,19 @@
+export { Callback } from './Callback';
+export { Comp } from './Comp';
+export { ComponentRef } from './ComponentRef';
+export { Falsy } from './Falsy';
+export { GenericProps } from './GenericProps';
+export { HasAriaLabelOrLabelledBy } from './HasAriaLabelOrLabelledBy';
+export { HasClassName } from './HasClassName';
+export { HasCloseMode } from './HasCloseMode';
+export { HasPolymorphicAs } from './HasPolymorphicAs';
+export { HasTheme } from './HasTheme';
+export { HeadingElement } from './HeadingElement';
+export { isComponentType } from './isComponentType';
+export { MaybeElementOrRef } from './MaybeElementOrRef';
+export { Point } from './Point';
+export { Predicate } from './Predicate';
+export { RectSize } from './RectSize';
+export { TextElement } from './TextElement';
+export { ValueOf } from './ValueOf';
+export { ComponentClassName } from './ComponentClassName';

package/src/utils/type/isComponentType.ts

@@ -0,0 +1,9 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+/**
+ * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
+ */
+export const isComponentType =
+    (type: ReactElement['type']) =>
+    (node: ReactNode): node is ReactElement =>
+        React.isValidElement(node) && node.type === type;

package/utils/index.d.ts

@@ -1,5 +1,5 @@
 import React, { RefObject } from 'react';
-import { F as Falsy } from '../_internal/index.js';
+import { F as Falsy } from '../_internal/Falsy.js';
 
 interface ClickAwayParameters {
     /**

package/_internal/index.d.ts

@@ -1,285 +0,0 @@
-import React, { Ref, ReactElement } from 'react';
-
-/** Get types of the values of a record. */
-type ValueOf<T extends Record<any, any>> = T[keyof T];
-/** LumX Component Type. */
-type Comp<P, T = HTMLElement> = {
-    (props: P & {
-        ref?: Ref<T>;
-    }): ReactElement | null;
-    /** React component type. */
-    readonly $$typeof: symbol;
-    /** Component default props. */
-    defaultProps?: Partial<P>;
-    /** Component name. */
-    displayName?: string;
-    /** Component base class name. */
-    className?: string;
-};
-/** Union type of all heading elements */
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-/** Union type of all text elements */
-type TextElement = 'span' | 'p' | HeadingElement;
-interface HasTheme {
-    /**
-     * Theme adapting the component to light or dark background.
-     */
-    theme?: Theme;
-}
-interface HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}
-interface HasCloseMode {
-    /**
-     * Choose how the children are hidden when closed
-     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
-     */
-    closeMode?: 'hide' | 'unmount';
-}
-/**
- * Define a generic props types.
- */
-interface GenericProps extends HasClassName {
-    /**
-     * Any prop (particularly any supported prop for a HTML element).
-     */
-    [propName: string]: any;
-}
-/**
- * Callback function type alias (use for readability)
- */
-type Callback = () => void;
-/**
- * JS falsy values.
- * (excluding `NaN` as it can't be distinguished from `number`)
- */
-type Falsy = false | undefined | null | 0 | '';
-/**
- * Require either `aria-label` or `arial-labelledby` prop.
- * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
- * needs a visible element.
- */
-type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
-    /**
-     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
-     * Although it is not recommended, aria-label can be used instead if no visible element is available.
-     */
-    'aria-labelledby': T;
-    /** The label of the dialog. */
-    'aria-label'?: undefined;
-} : {
-    'aria-label': string;
-    'aria-labelledby'?: undefined;
-};
-/**
- * Extract ref type for a component or JSX intrinsic element
- *
- * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
- * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
- */
-type ComponentRef<C> = C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C]['ref'] : C extends Comp<any, infer T> ? React.Ref<T> : C extends React.JSXElementConstructor<{
-    ref?: infer R;
-}> ? R : never;
-
-/**
- * Alignments.
- */
-declare const Alignment: {
-    readonly bottom: "bottom";
-    readonly center: "center";
-    readonly end: "end";
-    readonly left: "left";
-    readonly right: "right";
-    readonly spaceAround: "space-around";
-    readonly spaceBetween: "space-between";
-    readonly spaceEvenly: "space-evenly";
-    readonly start: "start";
-    readonly top: "top";
-};
-type Alignment = ValueOf<typeof Alignment>;
-type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
-type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
-/**
- * See SCSS variable $lumx-color-palette
- */
-declare const ColorPalette: {
-    readonly primary: "primary";
-    readonly secondary: "secondary";
-    readonly blue: "blue";
-    readonly dark: "dark";
-    readonly green: "green";
-    readonly yellow: "yellow";
-    readonly red: "red";
-    readonly light: "light";
-    readonly grey: "grey";
-};
-type ColorPalette = ValueOf<typeof ColorPalette>;
-type Color = ColorPalette | string;
-/**
- * See SCSS variable $lumx-color-variants
- */
-declare const ColorVariant: {
-    readonly D1: "D1";
-    readonly D2: "D2";
-    readonly L1: "L1";
-    readonly L2: "L2";
-    readonly L3: "L3";
-    readonly L4: "L4";
-    readonly L5: "L5";
-    readonly L6: "L6";
-    readonly N: "N";
-};
-type ColorVariant = ValueOf<typeof ColorVariant>;
-declare const Theme: {
-    readonly light: "light";
-    readonly dark: "dark";
-};
-type Theme = ValueOf<typeof Theme>;
-declare const Size: {
-    readonly xxs: "xxs";
-    readonly xs: "xs";
-    readonly s: "s";
-    readonly m: "m";
-    readonly l: "l";
-    readonly xl: "xl";
-    readonly xxl: "xxl";
-    readonly tiny: "tiny";
-    readonly regular: "regular";
-    readonly medium: "medium";
-    readonly big: "big";
-    readonly huge: "huge";
-};
-type Size = ValueOf<typeof Size>;
-type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-declare const Orientation: {
-    readonly horizontal: "horizontal";
-    readonly vertical: "vertical";
-};
-type Orientation = ValueOf<typeof Orientation>;
-declare const Emphasis: {
-    readonly low: "low";
-    readonly medium: "medium";
-    readonly high: "high";
-};
-type Emphasis = ValueOf<typeof Emphasis>;
-/**
- * List of typographies that can't be customized.
- */
-declare const TypographyInterface: {
-    readonly overline: "overline";
-    readonly caption: "caption";
-    readonly body1: "body1";
-    readonly body2: "body2";
-    readonly subtitle1: "subtitle1";
-    readonly subtitle2: "subtitle2";
-    readonly title: "title";
-    readonly headline: "headline";
-    readonly display1: "display1";
-};
-type TypographyInterface = ValueOf<typeof TypographyInterface>;
-/**
- * List of title typographies that can be customized (via CSS variables).
- */
-declare const TypographyTitleCustom: {
-    readonly title1: "custom-title1";
-    readonly title2: "custom-title2";
-    readonly title3: "custom-title3";
-    readonly title4: "custom-title4";
-    readonly title5: "custom-title5";
-    readonly title6: "custom-title6";
-};
-type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
-/**
- * List of typographies that can be customized (via CSS variables).
- */
-declare const TypographyCustom: {
-    readonly intro: "custom-intro";
-    readonly 'body-large': "custom-body-large";
-    readonly body: "custom-body";
-    readonly quote: "custom-quote";
-    readonly 'publish-info': "custom-publish-info";
-    readonly button: "custom-button";
-    readonly title1: "custom-title1";
-    readonly title2: "custom-title2";
-    readonly title3: "custom-title3";
-    readonly title4: "custom-title4";
-    readonly title5: "custom-title5";
-    readonly title6: "custom-title6";
-};
-type TypographyCustom = ValueOf<typeof TypographyCustom>;
-/**
- * List of all typographies.
- */
-declare const Typography: {
-    readonly custom: {
-        readonly intro: "custom-intro";
-        readonly 'body-large': "custom-body-large";
-        readonly body: "custom-body";
-        readonly quote: "custom-quote";
-        readonly 'publish-info': "custom-publish-info";
-        readonly button: "custom-button";
-        readonly title1: "custom-title1";
-        readonly title2: "custom-title2";
-        readonly title3: "custom-title3";
-        readonly title4: "custom-title4";
-        readonly title5: "custom-title5";
-        readonly title6: "custom-title6";
-    };
-    readonly overline: "overline";
-    readonly caption: "caption";
-    readonly body1: "body1";
-    readonly body2: "body2";
-    readonly subtitle1: "subtitle1";
-    readonly subtitle2: "subtitle2";
-    readonly title: "title";
-    readonly headline: "headline";
-    readonly display1: "display1";
-};
-type Typography = TypographyInterface | TypographyCustom;
-/**
- * All available aspect ratios.
- */
-declare const AspectRatio: {
-    /** Intrinsic content ratio. */
-    readonly original: "original";
-    /** Ratio 3:1 */
-    readonly panoramic: "panoramic";
-    /** Ratio 16:9 */
-    readonly wide: "wide";
-    /** Ratio 3:2 */
-    readonly horizontal: "horizontal";
-    /** Ratio 3:2 */
-    readonly vertical: "vertical";
-    /** Ratio 1:1 */
-    readonly square: "square";
-    /** Ratio constrained by the parent. */
-    readonly free: "free";
-};
-type AspectRatio = ValueOf<typeof AspectRatio>;
-/**
- * Semantic info about the purpose of the component
- */
-declare const Kind: {
-    readonly info: "info";
-    readonly success: "success";
-    readonly warning: "warning";
-    readonly error: "error";
-};
-type Kind = ValueOf<typeof Kind>;
-/**
- * All available white-space values
- * */
-declare const WhiteSpace: {
-    normal: string;
-    nowrap: string;
-    pre: string;
-    'pre-wrap': string;
-    'pre-line': string;
-    'break-spaces': string;
-};
-type WhiteSpace = ValueOf<typeof WhiteSpace>;
-
-export { Alignment as A, type Comp as C, Emphasis as E, type Falsy as F, type GenericProps as G, type HasTheme as H, Kind as K, Orientation as O, Size as S, Typography as T, type ValueOf as V, WhiteSpace as W, type HorizontalAlignment as a, ColorPalette as b, type VerticalAlignment as c, ColorVariant as d, type TextElement as e, type HeadingElement as f, AspectRatio as g, type HasClassName as h, type ComponentRef as i, type HasAriaLabelOrLabelledBy as j, type HasCloseMode as k, type GlobalSize as l, TypographyInterface as m, Theme as n, type Color as o, TypographyTitleCustom as p, TypographyCustom as q, type Callback as r };

package/src/utils/className/getRootClassName.test.ts

@@ -1,11 +0,0 @@
-import { getRootClassName } from '@lumx/react/utils/className/getRootClassName';
-
-describe(getRootClassName, () => {
-    it('should transform the component name into a lumx class', () => {
-        expect(getRootClassName('Table')).toBe('lumx-table');
-    });
-
-    it('should transform the sub component name into a lumx class', () => {
-        expect(getRootClassName('TableBody', true)).toBe('lumx-table__body');
-    });
-});

package/src/utils/className/getRootClassName.ts

@@ -1,24 +0,0 @@
-import { CSS_PREFIX } from '@lumx/core/js/constants';
-import kebabCase from 'lodash/kebabCase';
-
-// See https://regex101.com/r/YjS1uI/3
-const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
-
-/**
- * Get the name of the root CSS class of a component based on its name.
- *
- * @param  componentName The name of the component. This name should contains the component prefix and be
- *                       written in PascalCase.
- * @param  subComponent Whether the current component is a sub component, if true, define the class according
- *                      to BEM standards.
- * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
- *         lower-snake-case.
- */
-export function getRootClassName(componentName: string, subComponent?: boolean): string {
-    const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
-
-    if (subComponent) {
-        return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
-    }
-    return formattedClassName;
-}

package/src/utils/type.ts

@@ -1,164 +0,0 @@
-import get from 'lodash/get';
-import React, { ReactElement, ReactNode, Ref } from 'react';
-import { Theme } from '@lumx/react';
-
-/** Get types of the values of a record. */
-export type ValueOf<T extends Record<any, any>> = T[keyof T];
-
-/**
- * Properties of a component to use to determine it's name.
- * In the order of preference.
- */
-const NAME_PROPERTIES: string[] = [
-    'type',
-    'type.displayName',
-    'displayName',
-    'name',
-    'type.name',
-    'props.mdxType',
-    '_reactInternalFiber.elementType.name',
-];
-
-/** LumX Component Type. */
-export type Comp<P, T = HTMLElement> = {
-    (props: P & { ref?: Ref<T> }): ReactElement | null;
-    /** React component type. */
-    readonly $$typeof: symbol;
-    /** Component default props. */
-    defaultProps?: Partial<P>;
-    /** Component name. */
-    displayName?: string;
-    /** Component base class name. */
-    className?: string;
-};
-
-/** Union type of all heading elements */
-export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-/** Union type of all text elements */
-export type TextElement = 'span' | 'p' | HeadingElement;
-
-export type HasPolymorphicAs<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
-    /**
-     * Customize the rendered component.
-     */
-    as?: E;
-};
-
-export interface HasTheme {
-    /**
-     * Theme adapting the component to light or dark background.
-     */
-    theme?: Theme;
-}
-
-export interface HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}
-
-export interface HasCloseMode {
-    /**
-     * Choose how the children are hidden when closed
-     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
-     */
-    closeMode?: 'hide' | 'unmount';
-}
-
-/**
- * Define a generic props types.
- */
-export interface GenericProps extends HasClassName {
-    /**
-     * Any prop (particularly any supported prop for a HTML element).
-     */
-    [propName: string]: any;
-}
-
-/**
- * Callback function type alias (use for readability)
- */
-export type Callback = () => void;
-export type Predicate<T> = (t: T) => boolean;
-
-/**
- * Create a predicate function that checks if a ReactNode is a react element from the given component.
- *
- * @param  component React function component or the component name
- * @return predicate returning true if value is instance of the component
- */
-export const isComponent =
-    <C>(component: Comp<C, any> | string) =>
-    (instance: ReactNode): instance is ReactElement => {
-        const componentName = typeof component === 'string' ? component : component.displayName;
-
-        return (
-            !!get(instance, '$$typeof') &&
-            NAME_PROPERTIES.some((nameProperty: string): boolean => get(instance, nameProperty) === componentName)
-        );
-    };
-
-/**
- * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
- */
-export const isComponentType =
-    (type: ReactElement['type']) =>
-    (node: ReactNode): node is ReactElement =>
-        React.isValidElement(node) && node.type === type;
-
-/**
- * JS falsy values.
- * (excluding `NaN` as it can't be distinguished from `number`)
- */
-export type Falsy = false | undefined | null | 0 | '';
-
-/**
- * Require either `aria-label` or `arial-labelledby` prop.
- * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
- * needs a visible element.
- */
-export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string
-    ? {
-          /**
-           * The id of the element to use as title of the dialog. Can be within or out of the dialog.
-           * Although it is not recommended, aria-label can be used instead if no visible element is available.
-           */
-          'aria-labelledby': T;
-          /** The label of the dialog. */
-          'aria-label'?: undefined;
-      }
-    : {
-          'aria-label': string;
-          'aria-labelledby'?: undefined;
-      };
-
-/**
- * Extract ref type for a component or JSX intrinsic element
- *
- * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
- * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
- */
-export type ComponentRef<C> = C extends keyof JSX.IntrinsicElements
-    ? JSX.IntrinsicElements[C]['ref']
-    : C extends Comp<any, infer T>
-      ? React.Ref<T>
-      : C extends React.JSXElementConstructor<{ ref?: infer R }>
-        ? R
-        : never;
-
-/**
- * Rectangle size
- */
-export type RectSize = { width: number; height: number };
-
-/**
- * Maybe a HTMLElement or a React ref of a HTMLElement
- */
-export type MaybeElementOrRef<E extends HTMLElement> = E | React.RefObject<E | null> | null | undefined;
-
-/**
- * A point coordinate in 2D space
- */
-export type Point = { x: number; y: number };