From d16df342a21b53aaedafd543c6552c8473f52d0f Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 04:22:45 +0900
Subject: [PATCH] feat: install lib as directory

---
 src/pswui/lib/Slot.tsx            | 97 +++++++++++++++++++++++++++++++
 src/pswui/lib/index.ts            |  2 +
 src/pswui/{lib.tsx => lib/vcn.ts} | 90 ++--------------------------
 3 files changed, 104 insertions(+), 85 deletions(-)
 create mode 100644 src/pswui/lib/Slot.tsx
 create mode 100644 src/pswui/lib/index.ts
 rename src/pswui/{lib.tsx => lib/vcn.ts} (74%)

diff --git a/src/pswui/lib/Slot.tsx b/src/pswui/lib/Slot.tsx
new file mode 100644
index 0000000..51ee483
--- /dev/null
+++ b/src/pswui/lib/Slot.tsx
@@ -0,0 +1,97 @@
+import { twMerge } from "tailwind-merge";
+import React from "react";
+
+/**
+ * Merges the react props.
+ * Basically childProps will override parentProps.
+ * But if it is a event handler, style, or className, it will be merged.
+ *
+ * @param parentProps - The parent props.
+ * @param childProps - The child props.
+ * @returns The merged props.
+ */
+function mergeReactProps(
+  parentProps: Record<string, unknown>,
+  childProps: Record<string, unknown>,
+) {
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const parentPropValue = parentProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (
+        childPropValue &&
+        parentPropValue &&
+        typeof childPropValue === "function" &&
+        typeof parentPropValue === "function"
+      ) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue?.(...args);
+          parentPropValue?.(...args);
+        };
+      } else if (parentPropValue) {
+        overrideProps[propName] = parentPropValue;
+      }
+    } else if (
+      propName === "style" &&
+      typeof parentPropValue === "object" &&
+      typeof childPropValue === "object"
+    ) {
+      overrideProps[propName] = { ...parentPropValue, ...childPropValue };
+    } else if (
+      propName === "className" &&
+      typeof parentPropValue === "string" &&
+      typeof childPropValue === "string"
+    ) {
+      overrideProps[propName] = twMerge(parentPropValue, childPropValue);
+    }
+  }
+
+  return { ...parentProps, ...overrideProps };
+}
+
+/**
+ * Takes an array of refs, and returns a single ref.
+ *
+ * @param refs - The array of refs.
+ * @returns The single ref.
+ */
+function combinedRef<I>(refs: React.Ref<I | null>[]) {
+  return (instance: I | null) =>
+    refs.forEach((ref) => {
+      if (ref instanceof Function) {
+        ref(instance);
+      } else if (ref) {
+        (ref as React.MutableRefObject<I | null>).current = instance;
+      }
+    });
+}
+
+interface SlotProps {
+  children?: React.ReactNode;
+}
+export const Slot = React.forwardRef<
+  HTMLElement,
+  SlotProps & Record<string, unknown>
+>((props, ref) => {
+  const { children, ...slotProps } = props;
+  const { asChild: _1, ...safeSlotProps } = slotProps;
+  if (!React.isValidElement(children)) {
+    console.warn(`given children "${children}" is not valid for asChild`);
+    return null;
+  }
+  return React.cloneElement(children, {
+    ...mergeReactProps(safeSlotProps, children.props),
+    ref: combinedRef([
+      ref,
+      (children as unknown as { ref: React.Ref<HTMLElement> }).ref,
+    ]),
+  } as never);
+});
+
+export interface AsChild {
+  asChild?: boolean;
+}
diff --git a/src/pswui/lib/index.ts b/src/pswui/lib/index.ts
new file mode 100644
index 0000000..faba6d8
--- /dev/null
+++ b/src/pswui/lib/index.ts
@@ -0,0 +1,2 @@
+export * from "./vcn";
+export * from "./Slot";
diff --git a/src/pswui/lib.tsx b/src/pswui/lib/vcn.ts
similarity index 74%
rename from src/pswui/lib.tsx
rename to src/pswui/lib/vcn.ts
index 2f4d675..d232f2c 100644
--- a/src/pswui/lib.tsx
+++ b/src/pswui/lib/vcn.ts
@@ -1,4 +1,3 @@
-import React from "react";
 import { twMerge } from "tailwind-merge";
 
 /**
@@ -109,6 +108,7 @@ export function vcn<V extends VariantType>(param: {
   /**
    * Any Props -> Variant Props, Other Props
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
   ) => [
@@ -139,6 +139,7 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
   /**
    * Any Props -> Variant Props, Other Props
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
   ) => [
@@ -223,7 +224,7 @@ export function vcn<
      * @param anyProps - Any props that have passed to the component.
      * @returns [variantProps, otherProps]
      */
-    <AnyPropBeforeResolve extends Record<string, any>>(
+    <AnyPropBeforeResolve extends Record<string, unknown>>(
       anyProps: AnyPropBeforeResolve,
     ) => {
       const variantKeys = Object.keys(variants) as (keyof V)[];
@@ -268,86 +269,5 @@ export function vcn<
  * }
  * ```
  */
-export type VariantProps<F extends (props: any) => string> = F extends (
-  props: infer P,
-) => string
-  ? P
-  : never;
-
-/**
- * Merges the react props.
- * Basically childProps will override parentProps.
- * But if it is a event handler, style, or className, it will be merged.
- *
- * @param parentProps - The parent props.
- * @param childProps - The child props.
- * @returns The merged props.
- */
-function mergeReactProps(
-  parentProps: Record<string, any>,
-  childProps: Record<string, any>,
-) {
-  const overrideProps = { ...childProps };
-
-  for (const propName in childProps) {
-    const parentPropValue = parentProps[propName];
-    const childPropValue = childProps[propName];
-
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (childPropValue && parentPropValue) {
-        overrideProps[propName] = (...args: unknown[]) => {
-          childPropValue?.(...args);
-          parentPropValue?.(...args);
-        };
-      } else if (parentPropValue) {
-        overrideProps[propName] = parentPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...parentPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = twMerge(parentPropValue, childPropValue);
-    }
-  }
-
-  return { ...parentProps, ...overrideProps };
-}
-
-/**
- * Takes an array of refs, and returns a single ref.
- *
- * @param refs - The array of refs.
- * @returns The single ref.
- */
-function combinedRef<I>(refs: React.Ref<I | null>[]) {
-  return (instance: I | null) =>
-    refs.forEach((ref) => {
-      if (ref instanceof Function) {
-        ref(instance);
-      } else if (!!ref) {
-        (ref as React.MutableRefObject<I | null>).current = instance;
-      }
-    });
-}
-
-interface SlotProps {
-  children?: React.ReactNode;
-}
-export const Slot = React.forwardRef<any, SlotProps & Record<string, any>>(
-  (props, ref) => {
-    const { children, ...slotProps } = props;
-    const { asChild: _1, ...safeSlotProps } = slotProps;
-    if (!React.isValidElement(children)) {
-      console.warn(`given children "${children}" is not valid for asChild`);
-      return null;
-    }
-    return React.cloneElement(children, {
-      ...mergeReactProps(safeSlotProps, children.props),
-      ref: combinedRef([ref, (children as any).ref]),
-    } as any);
-  },
-);
-
-export interface AsChild {
-  asChild?: boolean;
-}
+export type VariantProps<F extends (props: Record<string, unknown>) => string> =
+  F extends (props: infer P) => string ? { [key in keyof P]: P[key] } : never;