@lumx/react 3.10.1-alpha.4 → 3.10.1-alpha.6

package/src/components/thumbnail/Thumbnail.tsx

@@ -12,8 +12,8 @@ import React, {
 import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
-import { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { Falsy, GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiImageBroken } from '@lumx/icons';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
@@ -81,7 +81,7 @@ const COMPONENT_NAME = 'Thumbnail';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-thumbnail';
 
 /**
  * Component default props.

package/src/components/toolbar/Toolbar.tsx

@@ -2,8 +2,8 @@ import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -26,7 +26,7 @@ const COMPONENT_NAME = 'Toolbar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-toolbar';
 
 /**
  * Component default props.

package/src/components/tooltip/Tooltip.tsx

@@ -5,8 +5,8 @@ import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
 import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
-import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasCloseMode, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
@@ -47,7 +47,7 @@ const COMPONENT_NAME = 'Tooltip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-tooltip';
 
 /**
  * Component default props.

package/src/components/uploader/Uploader.tsx

@@ -3,8 +3,8 @@ import React, { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ValueOf, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -60,7 +60,7 @@ const COMPONENT_NAME = 'Uploader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-uploader';
 
 /**
  * Component default props.

package/src/components/user-block/UserBlock.tsx

@@ -2,8 +2,8 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -54,7 +54,7 @@ const COMPONENT_NAME = 'UserBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-user-block';
 
 /**
  * Component default props.

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

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

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

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

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

@@ -0,0 +1,28 @@
+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,4 +1,3 @@
 export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
-export { getRootClassName } from './getRootClassName';
 export { getTypographyClassName } from './getTypographyClassName';
 export { getFontColorClassName } from './getFontColorClassName';

package/src/utils/type/Callback.ts

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

package/src/utils/type/Comp.ts

@@ -0,0 +1,14 @@
+import type { ReactElement, Ref } from 'react';
+
+/** 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;
+};

package/src/utils/type/ComponentClassName.ts

@@ -0,0 +1,7 @@
+import type { KebabCase } from './KebabCase';
+
+/** Transform the component name into the lumx class name. */
+export type ComponentClassName<
+    TComponentName extends string,
+    TSubComponentName extends string = '',
+> = `lumx-${KebabCase<TComponentName>}${TSubComponentName extends `${TComponentName}${infer TSubName}` ? `__${KebabCase<TSubName>}` : ''}`;

package/src/utils/type/ComponentRef.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { Comp } from './Comp';
+
+/**
+ * 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;

package/src/utils/type/Falsy.ts

@@ -0,0 +1,5 @@
+/**
+ * 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

@@ -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 {
     /**