@udixio/ui-react 2.5.2 → 2.7.0

package/src/lib/styles/tooltip.style.ts

@@ -1,37 +1,46 @@
-import { classNames, defaultClassNames } from '../utils';
-import { ToolTipInterface } from '../interfaces/tooltip.interface';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+import { ToolTipInterface } from '../interfaces';
+
+const toolTipConfig: ClassNameComponent<ToolTipInterface> = ({
+  position,
+  variant,
+}) => ({
+  toolTip: classNames(
+    ' pointer-events-auto w-max z-10  absolute  m-1 w-max-content max-w-[312px]',
+    {
+      'bottom-full left-1/2 -translate-x-1/2': position == 'top',
+      'top-full left-1/2 -translate-x-1/2': position == 'bottom',
+      'right-full top-1/2 -translate-y-1/2': position == 'left',
+      'left-full top-1/2 -translate-y-1/2': position == 'right',
+      'bottom-full right-full': position == 'top-left',
+      'bottom-full left-full': position == 'top-right',
+      'top-full right-full': position == 'bottom-left',
+      'top-full left-full': position == 'bottom-right',
+    },
+  ),
+  container: classNames(
+    'pb-2',
+    variant == 'rich' &&
+      'bg-surface-container rounded-2xl text-on-surface-container px-4 pt-3 shadow-2',
+    variant == 'plain' &&
+      'bg-inverse-surface rounded text-inverse-on-surface px-2 py-1',
+  ),
+  actions: classNames('flex gap-10 px-1 mt-2', variant == 'plain' && 'hidden'),
+  subHead: classNames('text-title-small mb-1', variant == 'plain' && 'hidden'),
+  supportingText: classNames(''),
+});
 
 export const toolStyle = defaultClassNames<ToolTipInterface>(
   'toolTip',
-  ({ position, variant }) => ({
-    toolTip: classNames(
-      ' pointer-events-auto w-max z-10  absolute  m-1 w-max-content max-w-[312px]',
-      {
-        'bottom-full left-1/2 -translate-x-1/2': position == 'top',
-        'top-full left-1/2 -translate-x-1/2': position == 'bottom',
-        'right-full top-1/2 -translate-y-1/2': position == 'left',
-        'left-full top-1/2 -translate-y-1/2': position == 'right',
-        'bottom-full right-full': position == 'top-left',
-        'bottom-full left-full': position == 'top-right',
-        'top-full right-full': position == 'bottom-left',
-        'top-full left-full': position == 'bottom-right',
-      }
-    ),
-    container: classNames(
-      'pb-2',
-      variant == 'rich' &&
-        'bg-surface-container rounded-2xl text-on-surface-container px-4 pt-3 shadow-2',
-      variant == 'plain' &&
-        'bg-inverse-surface rounded text-inverse-on-surface px-2 py-1'
-    ),
-    actions: classNames(
-      'flex gap-10 px-1 mt-2',
-      variant == 'plain' && 'hidden'
-    ),
-    subHead: classNames(
-      'text-title-small mb-1',
-      variant == 'plain' && 'hidden'
-    ),
-    supportingText: classNames(''),
-  })
+  toolTipConfig,
+);
+
+export const useToolTipStyle = createUseClassNames<ToolTipInterface>(
+  'toolTip',
+  toolTipConfig,
 );

package/src/lib/utils/styles/get-classname.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { ComponentInterface } from '../component';
 import { convertToKebabCase } from '../string';
 import { classnames } from './classnames';
@@ -71,3 +72,25 @@ export const defaultClassNames = <T extends ComponentInterface>(
       states,
     });
 };
+
+export const createUseClassNames = <T extends ComponentInterface>(
+  element: T['elements'][0],
+  defaultClassName: ClassNameComponent<T> | string,
+) => {
+  return (
+    states: T['states'] & T['props'] & {
+      className?: string | ClassNameComponent<T>;
+    },
+  ): Record<T['elements'][number], string> => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useMemo(
+      () =>
+        getClassNames<T>({
+          classNameList: [states.className, defaultClassName],
+          default: element,
+          states,
+        }),
+      [states],
+    );
+  };
+};

package/src/lib/utils/styles/index.ts

@@ -1,3 +1,4 @@
 export * from './classnames';
 export * from './classnames';
 export * from './get-classname';
+export * from './use-classnames';

package/src/lib/utils/styles/use-classnames.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { ComponentInterface } from '../component';
+import { ClassNameComponent, getClassNames } from './get-classname';
+
+export function useClassNames<T extends ComponentInterface>(
+  element: T['elements'][0],
+  defaultClassName: ClassNameComponent<T> | string,
+  states: (T['states'] & T['props']) & { className?: string | ClassNameComponent<T> },
+): Record<T['elements'][number], string> {
+  return useMemo(
+    () =>
+      getClassNames<T>({
+        classNameList: [states?.className, defaultClassName],
+        default: element,
+        states: states as any,
+      }),
+    [element, defaultClassName, states],
+  );
+}
+
+// Documentation note:
+// - This hook centralizes class name merging logic (string or function),
+//   prefixes each element key with its kebab-case name, and adds `relative` on the root element by default.
+// - It preserves current order/priority where consumer overrides take precedence over defaults.
+// - Pass overrides via props.className (string or function) — see Button for example usage.

package/src/tests/useClassNames.spec.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useClassNames } from '../lib/utils/styles/use-classnames';
+import type { ComponentInterface } from '../lib/utils/component';
+import type { ClassNameComponent } from '../lib/utils/styles/get-classname';
+
+// Minimal fake component interface for testing the hook
+interface TestComp extends ComponentInterface {
+  type: 'div';
+  elements: ['root', 'label'];
+  props: { label?: string };
+  states: { active?: boolean };
+}
+
+const defaultConfig: ClassNameComponent<TestComp> = (s) => ({
+  root: 'bg-default',
+  label: s.active ? 'text-active' : 'text-inactive',
+});
+
+describe('useClassNames', () => {
+  it('merges string default with function override; override wins', () => {
+    const override: ClassNameComponent<TestComp> = () => ({
+      root: 'px-2 custom-override',
+      label: 'text-red-500',
+    });
+
+    const { result, rerender } = renderHook(
+      (props: any) =>
+        useClassNames<TestComp>('root', 'bg-default-root', {
+          ...props,
+          className: override,
+        }),
+      { initialProps: { active: false } },
+    );
+
+    expect(result.current.root).toContain('root'); // kebab-case prefix
+    expect(result.current.root).toContain('relative'); // default relative
+    // override precedence should keep both but allow override to win on conflicts; here no conflict
+    expect(result.current.root).toContain('custom-override');
+
+    // label from default function should be present and overridden by override
+    // default for inactive: text-inactive, but override sets text-red-500
+    // since we didn't include defaultConfig, this ensures hook handles function override w/ string default
+
+    rerender({ active: true });
+    // Memo invalidated due to states change; new value produced
+    expect(result.current.root).toContain('custom-override');
+  });
+
+  it('merges function default with string override on default element', () => {
+    const { result } = renderHook(() =>
+      useClassNames<TestComp>('root', defaultConfig, {
+        active: true,
+        className: 'p-4',
+      }),
+    );
+    expect(result.current.root).toContain('root');
+    expect(result.current.root).toContain('relative');
+    expect(result.current.root).toContain('p-4');
+    expect(result.current.label).toContain('label');
+    expect(result.current.label).toContain('text-active');
+  });
+
+  it('memoizes: same inputs => stable reference', () => {
+    const states = { active: false, className: 'm-1' } as any;
+    const { result, rerender } = renderHook(
+      (p: any) => useClassNames<TestComp>('root', defaultConfig, p.states),
+      { initialProps: { states } },
+    );
+
+    const first = result.current;
+    rerender({ states }); // same reference
+    const second = result.current;
+    expect(second).toBe(first);
+
+    // change shallow reference -> new object allocated
+    rerender({ states: { ...states } });
+    const third = result.current;
+    expect(third).not.toBe(first);
+  });
+});