feat: add util mergeProps

Author: Ohh-889

packages/ui/src/lib/compose-props.ts

@@ -0,0 +1,50 @@
+import type { ReactElement } from 'react';
+import { cloneElement } from 'react';
+
+import type { ClassValue } from '@/types/other';
+
+import { cn } from './utils';
+
+export type AnyProps = Record<string, any>;
+
+export function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  // eslint-disable-next-line guard-for-in
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      }
+      // but if it exists only on the slot, we use only this one
+      else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    }
+    // if it's `style`, we merge them
+    else if (propName === 'style') {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === 'className') {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}
+
+export function withClassName(element: ReactElement<any>, ...className: ClassValue[]) {
+  return cloneElement(element, {
+    ...element.props,
+    className: cn(className, element.props.className)
+  });
+}

packages/ui/src/lib/index.ts

@@ -1,3 +1,5 @@
+export * from './compose-props';
+
 export * from './typed';
 
 export * from './utils';