refactor(utils): split type utils into modules

Author: gcornut

packages/lumx-react/src/utils/type.ts

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

packages/lumx-react/src/utils/type/Callback.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;
+};

packages/lumx-react/src/utils/type/Comp.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;

packages/lumx-react/src/utils/type/ComponentRef.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 | '';

packages/lumx-react/src/utils/type/Falsy.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;
+}

packages/lumx-react/src/utils/type/GenericProps.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;
+      };

packages/lumx-react/src/utils/type/HasAriaLabelOrLabelledBy.ts

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

packages/lumx-react/src/utils/type/HasClassName.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';
+}

packages/lumx-react/src/utils/type/HasCloseMode.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;
+};