@lumx/react 3.19.0 → 3.19.1-alpha.1

package/src/utils/react/RawClickable.tsx

@@ -0,0 +1,65 @@
+import React, { AriaAttributes, ElementType } from 'react';
+import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
+import { ComponentRef, HasPolymorphicAs } from '@lumx/react/utils/type';
+import { HasRequiredLinkHref } from '@lumx/react/utils/type/HasRequiredLinkHref';
+
+type ClickableElement = 'a' | 'button' | ElementType;
+
+type BaseClickableProps<E extends ClickableElement> = {
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    'aria-disabled'?: AriaAttributes['aria-disabled'];
+    onClick?: React.MouseEventHandler<E>;
+};
+
+export type RawClickableProps<E extends ClickableElement> = HasPolymorphicAs<E> &
+    HasRequiredLinkHref<E> &
+    BaseClickableProps<E>;
+
+/**
+ * Render clickable element (link, button or custom element)
+ * (also does some basic disabled state handling)
+ */
+export const RawClickable = forwardRefPolymorphic(
+    <E extends ClickableElement>(props: RawClickableProps<E>, ref: ComponentRef<E>) => {
+        const {
+            children,
+            onClick,
+            disabled,
+            isDisabled = disabled,
+            'aria-disabled': ariaDisabled,
+            as,
+            ...forwardedProps
+        } = props;
+
+        const isAnyDisabled = isDisabled || ariaDisabled === 'true' || ariaDisabled === true;
+
+        const Component = as as any;
+        let clickableProps;
+        if (Component === 'button') {
+            clickableProps = { type: forwardedProps.type || 'button', disabled: isDisabled };
+        } else {
+            clickableProps = { tabIndex: isDisabled ? '-1' : forwardedProps.tabIndex };
+        }
+
+        return (
+            <Component
+                ref={ref}
+                aria-disabled={isAnyDisabled}
+                {...forwardedProps}
+                {...clickableProps}
+                onClick={(event: any) => {
+                    if (isAnyDisabled) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        return;
+                    }
+                    onClick?.(event);
+                }}
+            >
+                {children}
+            </Component>
+        );
+    },
+);

package/src/utils/type/HasRequiredLinkHref.ts

@@ -0,0 +1 @@
+export type HasRequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;

package/src/utils/type/index.ts

@@ -1,19 +1,9 @@
-export type { Callback } from './Callback';
+export type * from '@lumx/core/js/types';
+
 export type { Comp } from './Comp';
 export type { ComponentRef } from './ComponentRef';
-export type { Falsy } from './Falsy';
-export type { GenericProps } from './GenericProps';
-export type { HasAriaLabelOrLabelledBy } from './HasAriaLabelOrLabelledBy';
-export type { HasClassName } from './HasClassName';
-export type { HasCloseMode } from './HasCloseMode';
 export type { HasPolymorphicAs } from './HasPolymorphicAs';
-export type { HasTheme } from './HasTheme';
-export type { HeadingElement } from './HeadingElement';
 export { isComponent } from './isComponent';
 export { isComponentType } from './isComponentType';
 export type { MaybeElementOrRef } from './MaybeElementOrRef';
-export type { Point } from './Point';
-export type { Predicate } from './Predicate';
-export type { RectSize } from './RectSize';
-export type { TextElement } from './TextElement';
-export type { ValueOf } from './ValueOf';
+export type { HasRequiredLinkHref } from './HasRequiredLinkHref';

package/src/components/index.ts

@@ -1,160 +0,0 @@
-import { ValueOf } from '@lumx/react/utils/type';
-
-/**
- * Alignments.
- */
-export const Alignment = {
-    bottom: 'bottom',
-    center: 'center',
-    end: 'end',
-    left: 'left',
-    right: 'right',
-    spaceAround: 'space-around',
-    spaceBetween: 'space-between',
-    spaceEvenly: 'space-evenly',
-    start: 'start',
-    top: 'top',
-} as const;
-export type Alignment = ValueOf<typeof Alignment>;
-export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
-export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
-
-export const Theme = {
-    light: 'light',
-    dark: 'dark',
-} as const;
-export type Theme = ValueOf<typeof Theme>;
-
-export const Size = {
-    xxs: 'xxs',
-    xs: 'xs',
-    s: 's',
-    m: 'm',
-    l: 'l',
-    xl: 'xl',
-    xxl: 'xxl',
-    tiny: 'tiny',
-    regular: 'regular',
-    medium: 'medium',
-    big: 'big',
-    huge: 'huge',
-} as const;
-export type Size = ValueOf<typeof Size>;
-export type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-
-export const Orientation = {
-    horizontal: 'horizontal',
-    vertical: 'vertical',
-} as const;
-export type Orientation = ValueOf<typeof Orientation>;
-
-export const Emphasis = {
-    low: 'low',
-    medium: 'medium',
-    high: 'high',
-} as const;
-export type Emphasis = ValueOf<typeof Emphasis>;
-
-/**
- * List of typographies that can't be customized.
- */
-export const TypographyInterface = {
-    overline: 'overline',
-    caption: 'caption',
-    body1: 'body1',
-    body2: 'body2',
-    subtitle1: 'subtitle1',
-    subtitle2: 'subtitle2',
-    title: 'title',
-    headline: 'headline',
-    display1: 'display1',
-} as const;
-export type TypographyInterface = ValueOf<typeof TypographyInterface>;
-
-/**
- * List of title typographies that can be customized (via CSS variables).
- */
-export const TypographyTitleCustom = {
-    title1: 'custom-title1',
-    title2: 'custom-title2',
-    title3: 'custom-title3',
-    title4: 'custom-title4',
-    title5: 'custom-title5',
-    title6: 'custom-title6',
-} as const;
-export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
-
-/**
- * List of typographies that can be customized (via CSS variables).
- */
-export const TypographyCustom = {
-    ...TypographyTitleCustom,
-    intro: 'custom-intro',
-    'body-large': 'custom-body-large',
-    body: 'custom-body',
-    quote: 'custom-quote',
-    'publish-info': 'custom-publish-info',
-    button: 'custom-button',
-} as const;
-export type TypographyCustom = ValueOf<typeof TypographyCustom>;
-
-/**
- * List of all typographies.
- */
-export const Typography = {
-    ...TypographyInterface,
-    custom: TypographyCustom,
-} as const;
-export type Typography = TypographyInterface | TypographyCustom;
-
-/**
- * All available aspect ratios.
- */
-export const AspectRatio = {
-    /** Intrinsic content ratio. */
-    original: 'original',
-    /** Ratio 3:1 */
-    panoramic: 'panoramic',
-    /** Ratio 16:9 */
-    wide: 'wide',
-    /** Ratio 3:2 */
-    horizontal: 'horizontal',
-    /** Ratio 3:2 */
-    vertical: 'vertical',
-    /** Ratio 1:1 */
-    square: 'square',
-    /** Ratio constrained by the parent. */
-    free: 'free',
-} as const;
-export type AspectRatio = ValueOf<typeof AspectRatio>;
-
-/**
- * Semantic info about the purpose of the component
- */
-export const Kind = {
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-} as const;
-export type Kind = ValueOf<typeof Kind>;
-
-/**
- * All available white-space values
- * */
-export const WhiteSpace = {
-    normal: 'normal',
-    nowrap: 'nowrap',
-    pre: 'pre',
-    'pre-wrap': 'pre-wrap',
-    'pre-line': 'pre-line',
-    'break-spaces': 'break-spaces',
-};
-export type WhiteSpace = ValueOf<typeof WhiteSpace>;
-
-/**
- * Re-exporting some utils types.
- */
-export type { HeadingElement, TextElement, GenericProps, Callback } from '../utils/type';
-
-export * from '../utils/type/color';

package/src/utils/browser/event.ts

@@ -1 +0,0 @@
-export { onEnterPressed, onButtonPressed, onEscapePressed } from '@lumx/core/js/utils';

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

@@ -1,15 +0,0 @@
-import { fontColorClass } from '@lumx/react/utils/className/fontColorClass';
-
-describe(fontColorClass, () => {
-    it('should get lumx class for font color', () => {
-        expect(fontColorClass('dark')).toBe('lumx-color-font-dark-N');
-    });
-
-    it('should get lumx class for font color with variant', () => {
-        expect(fontColorClass('red', 'L2')).toBe('lumx-color-font-red-L2');
-    });
-
-    it('should get lumx class for font color with variant with override', () => {
-        expect(fontColorClass('red-N', 'L2')).toBe('lumx-color-font-red-L2');
-    });
-});

package/src/utils/className/fontColorClass.ts

@@ -1,12 +0,0 @@
-import { ColorVariant, ColorWithVariants } from '@lumx/react';
-import { resolveColorWithVariants } from '@lumx/react/utils/className';
-
-/**
- * Returns the classname associated to the given color and variant.
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
- */
-export function fontColorClass(propColor?: ColorWithVariants, propColorVariant?: ColorVariant) {
-    if (!propColor) return undefined;
-    const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
-    return `lumx-color-font-${color}-${colorVariant}`;
-}

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

@@ -1,20 +0,0 @@
-import { getBasicClass } from '@lumx/core/js/utils';
-
-describe(getBasicClass, () => {
-    it('should return correct basic CSS class for different types and values', () => {
-        // Test cases with different inputs
-        expect(getBasicClass({ prefix: 'test', type: 'color', value: 'primary' })).toBe('test--color-primary');
-        expect(getBasicClass({ prefix: 'test', type: 'variant', value: 'button' })).toBe('test--variant-button');
-        expect(getBasicClass({ prefix: 'test', type: 'isDark', value: true })).toBe('test--is-dark');
-        expect(getBasicClass({ prefix: 'test', type: 'dark', value: true })).toBe('test--is-dark');
-        expect(getBasicClass({ prefix: 'test', type: 'hasDark', value: true })).toBe('test--has-dark');
-        expect(getBasicClass({ prefix: 'test', type: 'isActive', value: false })).toBe('');
-
-        // Additional tests for boolean types
-        expect(getBasicClass({ prefix: 'test', type: 'hasBorder', value: true })).toBe('test--has-border');
-        expect(getBasicClass({ prefix: 'test', type: 'isVisible', value: false })).toBe('');
-
-        // Tests for undefined
-        expect(getBasicClass({ prefix: 'test', type: 'variant', value: undefined })).toBe('test--variant-undefined');
-    });
-});

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/className/getTypographyClassName.test.ts

@@ -1,7 +0,0 @@
-import { getTypographyClassName } from '@lumx/react/utils/className/getTypographyClassName';
-
-describe(getTypographyClassName, () => {
-    it('should generate lumx typography class', () => {
-        expect(getTypographyClassName('title')).toBe('lumx-typography-title');
-    });
-});

package/src/utils/className/getTypographyClassName.ts

@@ -1,9 +0,0 @@
-import { Typography } from '@lumx/react';
-
-/**
- * Returns the classname associated to the given typography.
- * For example, for `Typography.title` it returns `lumx-typography-title`
- */
-export const getTypographyClassName = (typography: Typography) => {
-    return `lumx-typography-${typography}`;
-};

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

@@ -1,28 +0,0 @@
-import { handleBasicClasses } from '@lumx/core/js/utils';
-
-describe(handleBasicClasses, () => {
-    it('should return correct combined CSS classes based on props', () => {
-        const className = handleBasicClasses({
-            prefix: 'test',
-            // Undefined
-            undefined,
-            // Null
-            null: null,
-            // Empty string
-            emptyString: '',
-            // Empty array
-            emptyArray: [],
-            // Empty object
-            emptyObject: {},
-            // String
-            color: 'red',
-            // False property
-            isDisabled: false,
-            // Boolean without a prefix (is or has)
-            visible: true,
-            // Has prefix
-            hasButton: true,
-        });
-        expect(className).toBe('test test--color-red test--is-visible test--has-button');
-    });
-});

package/src/utils/className/index.ts

@@ -1,5 +0,0 @@
-export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
-export { getRootClassName } from './getRootClassName';
-export { getTypographyClassName } from './getTypographyClassName';
-export { fontColorClass } from './fontColorClass';
-export { resolveColorWithVariants } from './resolveColorWithVariants';

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

@@ -1,33 +0,0 @@
-import { resolveColorWithVariants } from './resolveColorWithVariants';
-
-describe(resolveColorWithVariants, () => {
-    it('should handle undefined color', () => {
-        const result = resolveColorWithVariants(undefined);
-        expect(result).toEqual([undefined, undefined]);
-    });
-
-    it('should handle undefined color with variant', () => {
-        const result = resolveColorWithVariants(undefined, 'L2');
-        expect(result).toEqual([undefined, 'L2']);
-    });
-
-    it('should handle color with undefined variant', () => {
-        const result = resolveColorWithVariants('primary');
-        expect(result).toEqual(['primary', undefined]);
-    });
-
-    it('should handle color & variant separated', () => {
-        const result = resolveColorWithVariants('primary', 'L2');
-        expect(result).toEqual(['primary', 'L2']);
-    });
-
-    it('should handle color with variant all in one', () => {
-        const result = resolveColorWithVariants('primary-L2');
-        expect(result).toEqual(['primary', 'L2']);
-    });
-
-    it('should override color variant with the given color variant', () => {
-        const result = resolveColorWithVariants('primary-L2', 'D2');
-        expect(result).toEqual(['primary', 'D2']);
-    });
-});

package/src/utils/className/resolveColorWithVariants.ts

@@ -1,11 +0,0 @@
-import { ColorPalette, ColorVariant, ColorWithVariants } from '@lumx/react';
-
-/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
-export function resolveColorWithVariants(
-    colorWithVariants?: ColorWithVariants,
-    colorVariant?: ColorVariant,
-): [color?: ColorPalette, colorVariant?: ColorVariant] {
-    if (!colorWithVariants) return [undefined, colorVariant];
-    const [color, baseColorVariant] = colorWithVariants.split('-');
-    return [color as ColorPalette, (colorVariant || baseColorVariant) as ColorVariant];
-}

package/src/utils/react/renderButtonOrLink.tsx

@@ -1,16 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { renderLink } from './renderLink';
-
-interface Props {
-    linkAs?: any;
-    href?: any;
-}
-
-/**
- * Render <button> HTML component, fallbacks to `<a>` when a `href` is provided or a custom component with `linkAs`.
- */
-export const renderButtonOrLink = <P extends Props>(props: P, ...children: ReactNode[]): ReactElement => {
-    const { linkAs, href, ...forwardedProps } = props;
-    if (linkAs || href) return renderLink(props, ...children);
-    return React.createElement('button', { type: 'button', ...forwardedProps }, ...children);
-};

package/src/utils/react/renderLink.tsx

@@ -1,17 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-interface Props {
-    linkAs?: any;
-}
-
-/**
- * Render link with default <a> HTML component or a custom one provided by `linkAs`.
- *
- * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
- *
- * @param linkAs    Custom link component.
- * @param children  Link children.
- * @return          A link.
- */
-export const renderLink = <P extends Props>({ linkAs, ...forwardedProps }: P, ...children: ReactNode[]): ReactElement =>
-    React.createElement(linkAs || 'a', forwardedProps, ...children);

package/src/utils/type/Callback.ts

@@ -1,4 +0,0 @@
-/**
- * Callback function type alias (use for readability)
- */
-export type Callback = () => void;

package/src/utils/type/Falsy.ts

@@ -1,5 +0,0 @@
-/**
- * JS falsy values.
- * (excluding `NaN` as it can't be distinguished from `number`)
- */
-export type Falsy = false | undefined | null | 0 | '';

package/src/utils/type/GenericProps.ts

@@ -1,11 +0,0 @@
-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

@@ -1,19 +0,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;
-      };

package/src/utils/type/HasClassName.ts

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

package/src/utils/type/HasCloseMode.ts

@@ -1,7 +0,0 @@
-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/HasTheme.ts

@@ -1,8 +0,0 @@
-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

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

package/src/utils/type/Point.ts

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

package/src/utils/type/Predicate.ts

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

package/src/utils/type/RectSize.ts

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

package/src/utils/type/TextElement.ts

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

package/src/utils/type/ValueOf.ts

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

package/src/utils/type/color/index.ts

@@ -1,43 +0,0 @@
-import type { ValueOf } from '@lumx/react/utils/type';
-
-/**
- * See SCSS variable $lumx-color-palette
- */
-export const ColorPalette = {
-    primary: 'primary',
-    secondary: 'secondary',
-    blue: 'blue',
-    dark: 'dark',
-    green: 'green',
-    yellow: 'yellow',
-    red: 'red',
-    light: 'light',
-    grey: 'grey',
-} as const;
-export type ColorPalette = ValueOf<typeof ColorPalette>;
-export type Color = ColorPalette | string;
-
-/**
- * See SCSS variable $lumx-color-variants
- */
-export const ColorVariant = {
-    D1: 'D1',
-    D2: 'D2',
-    L1: 'L1',
-    L2: 'L2',
-    L3: 'L3',
-    L4: 'L4',
-    L5: 'L5',
-    L6: 'L6',
-    N: 'N',
-} as const;
-export type ColorVariant = ValueOf<typeof ColorVariant>;
-
-/** ColorPalette with all possible color variant combination */
-export type ColorWithVariants =
-    | ColorPalette
-    | Exclude<
-          `${ColorPalette}-${ColorVariant}`,
-          // No dark variant for light and dark
-          `light-D${number}` | `dark-D${number}`
-      >;