From f92be39455553d8c88af3def15c5ecf24af46fb1 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 12 Jul 2024 02:04:54 +0900
Subject: [PATCH] feat(pswui): update component and library to latest

---
 src/pswui/components/Button.tsx           |  11 +-
 src/pswui/components/Checkbox.tsx         |   1 +
 src/pswui/components/Dialog/Component.tsx |  49 ++++++++-
 src/pswui/components/Drawer.tsx           |  52 ++++++----
 src/pswui/components/Form.tsx             |   0
 src/pswui/components/Input.tsx            |  15 ++-
 src/pswui/components/Label.tsx            |   1 +
 src/pswui/components/Popover.tsx          |  13 ++-
 src/pswui/components/Switch.tsx           |   1 +
 src/pswui/components/Toast/Component.tsx  | 119 +++++++++++-----------
 src/pswui/components/Tooltip.tsx          |  10 +-
 src/pswui/lib/index.ts                    |   2 +
 src/pswui/lib/ssrFallback.tsx             |  20 ++++
 src/pswui/lib/withSSD.tsx                 |  16 +++
 14 files changed, 210 insertions(+), 100 deletions(-)
 create mode 100644 src/pswui/components/Form.tsx
 create mode 100644 src/pswui/lib/ssrFallback.tsx
 create mode 100644 src/pswui/lib/withSSD.tsx

diff --git a/src/pswui/components/Button.tsx b/src/pswui/components/Button.tsx
index 40158d4..3ad8f67 100644
--- a/src/pswui/components/Button.tsx
+++ b/src/pswui/components/Button.tsx
@@ -111,21 +111,20 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     const [variantProps, otherPropsCompressed] = resolveVariants(props);
-    const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
+    const { asChild, type, ...otherPropsExtracted } = otherPropsCompressed;
 
     const Comp = asChild ? Slot : "button";
-    const compProps = {
-      ...otherPropsExtracted,
-      className: buttonVariants(variantProps),
-    };
 
     return (
       <Comp
         ref={ref}
-        {...compProps}
+        type={type ?? "button"}
+        className={buttonVariants(variantProps)}
+        {...otherPropsExtracted}
       />
     );
   },
 );
+Button.displayName = "Button";
 
 export { Button };
diff --git a/src/pswui/components/Checkbox.tsx b/src/pswui/components/Checkbox.tsx
index d48a1e3..695be34 100644
--- a/src/pswui/components/Checkbox.tsx
+++ b/src/pswui/components/Checkbox.tsx
@@ -110,5 +110,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     );
   },
 );
+Checkbox.displayName = "Checkbox";
 
 export { Checkbox };
diff --git a/src/pswui/components/Dialog/Component.tsx b/src/pswui/components/Dialog/Component.tsx
index 6332b62..a97e747 100644
--- a/src/pswui/components/Dialog/Component.tsx
+++ b/src/pswui/components/Dialog/Component.tsx
@@ -1,5 +1,10 @@
-import { Slot, type VariantProps, vcn } from "@pswui-lib";
-import React, { useState } from "react";
+import {
+  ServerSideDocumentFallback,
+  Slot,
+  type VariantProps,
+  vcn,
+} from "@pswui-lib";
+import React, { type ReactNode, useState } from "react";
 import ReactDOM from "react-dom";
 
 import {
@@ -100,8 +105,9 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
     });
     const { children, closeOnClick, onClick, ...otherPropsExtracted } =
       otherPropsCompressed;
+
     return (
-      <>
+      <ServerSideDocumentFallback>
         {ReactDOM.createPortal(
           <div
             {...otherPropsExtracted}
@@ -125,10 +131,11 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
           </div>,
           document.body,
         )}
-      </>
+      </ServerSideDocumentFallback>
     );
   },
 );
+DialogOverlay.displayName = "DialogOverlay";
 
 /**
  * =========================
@@ -204,6 +211,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
     );
   },
 );
+DialogContent.displayName = "DialogContent";
 
 /**
  * =========================
@@ -268,6 +276,8 @@ const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
   },
 );
 
+DialogHeader.displayName = "DialogHeader";
+
 /**
  * =========================
  * DialogTitle / DialogSubtitle
@@ -342,6 +352,7 @@ const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
     );
   },
 );
+DialogTitle.displayName = "DialogTitle";
 
 const DialogSubtitle = React.forwardRef<
   HTMLHeadingElement,
@@ -360,6 +371,7 @@ const DialogSubtitle = React.forwardRef<
     </h2>
   );
 });
+DialogSubtitle.displayName = "DialogSubtitle";
 
 /**
  * =========================
@@ -401,6 +413,34 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
     );
   },
 );
+DialogFooter.displayName = "DialogFooter";
+
+interface DialogControllers {
+  context: IDialogContext;
+
+  setContext: React.Dispatch<React.SetStateAction<IDialogContext>>;
+  close: () => void;
+}
+
+interface DialogControllerProps {
+  children: (controllers: DialogControllers) => ReactNode;
+}
+
+const DialogController = (props: DialogControllerProps) => {
+  return (
+    <DialogContext.Consumer>
+      {([context, setContext]) =>
+        props.children({
+          context,
+          setContext,
+          close() {
+            setContext((p) => ({ ...p, opened: false }));
+          },
+        })
+      }
+    </DialogContext.Consumer>
+  );
+};
 
 export {
   DialogRoot,
@@ -412,4 +452,5 @@ export {
   DialogTitle,
   DialogSubtitle,
   DialogFooter,
+  DialogController,
 };
diff --git a/src/pswui/components/Drawer.tsx b/src/pswui/components/Drawer.tsx
index 5828204..42d84f3 100644
--- a/src/pswui/components/Drawer.tsx
+++ b/src/pswui/components/Drawer.tsx
@@ -1,4 +1,10 @@
-import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
+import {
+  type AsChild,
+  ServerSideDocumentFallback,
+  Slot,
+  type VariantProps,
+  vcn,
+} from "@pswui-lib";
 import React, {
   type ComponentPropsWithoutRef,
   type TouchEvent as ReactTouchEvent,
@@ -119,25 +125,30 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
           : 1
     })`;
 
-    return createPortal(
-      <Comp
-        {...restPropsExtracted}
-        className={drawerOverlayVariant({
-          ...variantProps,
-          opened: state.isDragging ? true : state.opened,
-        })}
-        onClick={onOutsideClick}
-        style={{
-          backdropFilter,
-          WebkitBackdropFilter: backdropFilter,
-          transitionDuration: state.isDragging ? "0s" : undefined,
-        }}
-        ref={ref}
-      />,
-      document.body,
+    return (
+      <ServerSideDocumentFallback>
+        {createPortal(
+          <Comp
+            {...restPropsExtracted}
+            className={drawerOverlayVariant({
+              ...variantProps,
+              opened: state.isDragging ? true : state.opened,
+            })}
+            onClick={onOutsideClick}
+            style={{
+              backdropFilter,
+              WebkitBackdropFilter: backdropFilter,
+              transitionDuration: state.isDragging ? "0s" : undefined,
+            }}
+            ref={ref}
+          />,
+          document.body,
+        )}
+      </ServerSideDocumentFallback>
     );
   },
 );
+DrawerOverlay.displayName = "DrawerOverlay";
 
 const drawerContentColors = {
   background: "bg-white dark:bg-black",
@@ -309,7 +320,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
           ...variantProps,
           opened: true,
           className: dragState.isDragging
-            ? "transition-[width_0ms]"
+            ? "transition-[width] duration-0"
             : variantProps.className,
         })}
         style={
@@ -374,6 +385,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
     );
   },
 );
+DrawerContent.displayName = "DrawerContent";
 
 const DrawerClose = forwardRef<
   HTMLButtonElement,
@@ -388,6 +400,7 @@ const DrawerClose = forwardRef<
     />
   );
 });
+DrawerClose.displayName = "DrawerClose";
 
 const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({
   base: "flex flex-col gap-2",
@@ -417,6 +430,7 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
     );
   },
 );
+DrawerHeader.displayName = "DrawerHeader";
 
 const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
   base: "flex-grow",
@@ -444,6 +458,7 @@ const DrawerBody = forwardRef<HTMLDivElement, DrawerBodyProps>((props, ref) => {
     />
   );
 });
+DrawerBody.displayName = "DrawerBody";
 
 const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({
   base: "flex flex-row justify-end gap-2",
@@ -473,6 +488,7 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
     );
   },
 );
+DrawerFooter.displayName = "DrawerFooter";
 
 export {
   DrawerRoot,
diff --git a/src/pswui/components/Form.tsx b/src/pswui/components/Form.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pswui/components/Input.tsx b/src/pswui/components/Input.tsx
index 6541e04..99e456e 100644
--- a/src/pswui/components/Input.tsx
+++ b/src/pswui/components/Input.tsx
@@ -1,4 +1,4 @@
-import { type VariantProps, vcn } from "@pswui-lib";
+import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
 import React from "react";
 
 const inputColors = {
@@ -42,7 +42,8 @@ const [inputVariant, resolveInputVariantProps] = vcn({
 
 interface InputFrameProps
   extends VariantProps<typeof inputVariant>,
-    React.ComponentPropsWithoutRef<"label"> {
+    React.ComponentPropsWithoutRef<"label">,
+    AsChild {
   children?: React.ReactNode;
 }
 
@@ -50,19 +51,22 @@ const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
   (props, ref) => {
     const [variantProps, otherPropsCompressed] =
       resolveInputVariantProps(props);
-    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
+
+    const Comp = asChild ? Slot : "label";
 
     return (
-      <label
+      <Comp
         ref={ref}
         className={`group/input-frame ${inputVariant(variantProps)}`}
         {...otherPropsExtracted}
       >
         {children}
-      </label>
+      </Comp>
     );
   },
 );
+InputFrame.displayName = "InputFrame";
 
 interface InputProps
   extends VariantProps<typeof inputVariant>,
@@ -113,5 +117,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     />
   );
 });
+Input.displayName = "Input";
 
 export { InputFrame, Input };
diff --git a/src/pswui/components/Label.tsx b/src/pswui/components/Label.tsx
index 31790ef..3f695a7 100644
--- a/src/pswui/components/Label.tsx
+++ b/src/pswui/components/Label.tsx
@@ -29,5 +29,6 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
     />
   );
 });
+Label.displayName = "Label";
 
 export { Label };
diff --git a/src/pswui/components/Popover.tsx b/src/pswui/components/Popover.tsx
index 2fb43f1..f6f2cfb 100644
--- a/src/pswui/components/Popover.tsx
+++ b/src/pswui/components/Popover.tsx
@@ -65,7 +65,7 @@ const popoverColors = {
 };
 
 const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
-  base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full z-10 ${popoverColors.background} ${popoverColors.border}`,
+  base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`,
   variants: {
     direction: {
       row: "",
@@ -200,7 +200,7 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
   (props, ref) => {
     const [variantProps, otherPropsCompressed] =
       resolvePopoverContentVariantProps(props);
-    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
     const [state, setState] = useContext(PopoverContext);
 
     const internalRef = useRef<HTMLDivElement | null>(null);
@@ -221,14 +221,16 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
       };
     }, [state.controlled, setState]);
 
+    const Comp = asChild ? Slot : "div";
+
     return (
-      <div
+      <Comp
         {...otherPropsExtracted}
         className={popoverContentVariant({
           ...variantProps,
           opened: state.opened,
         })}
-        ref={(el) => {
+        ref={(el: HTMLDivElement) => {
           internalRef.current = el;
           if (typeof ref === "function") {
             ref(el);
@@ -238,9 +240,10 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
         }}
       >
         {children}
-      </div>
+      </Comp>
     );
   },
 );
+PopoverContent.displayName = "PopoverContent";
 
 export { Popover, PopoverTrigger, PopoverContent };
diff --git a/src/pswui/components/Switch.tsx b/src/pswui/components/Switch.tsx
index c804eba..cb52209 100644
--- a/src/pswui/components/Switch.tsx
+++ b/src/pswui/components/Switch.tsx
@@ -80,5 +80,6 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
     </label>
   );
 });
+Switch.displayName = "Switch";
 
 export { Switch };
diff --git a/src/pswui/components/Toast/Component.tsx b/src/pswui/components/Toast/Component.tsx
index 42df8f4..e9c4675 100644
--- a/src/pswui/components/Toast/Component.tsx
+++ b/src/pswui/components/Toast/Component.tsx
@@ -1,4 +1,4 @@
-import { type VariantProps, vcn } from "@pswui-lib";
+import { type VariantProps, vcn, withServerSideDocument } from "@pswui-lib";
 import React, { useEffect, useId, useRef } from "react";
 import ReactDOM from "react-dom";
 
@@ -145,68 +145,71 @@ interface ToasterProps
   muteDuplicationWarning?: boolean;
 }
 
-const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
-  const id = useId();
-  const [variantProps, otherPropsCompressed] =
-    resolveToasterVariantProps(props);
-  const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
-    otherPropsCompressed;
+const Toaster = withServerSideDocument(
+  React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
+    const id = useId();
+    const [variantProps, otherPropsCompressed] =
+      resolveToasterVariantProps(props);
+    const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
+      otherPropsCompressed;
 
-  const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
-  const internalRef = useRef<HTMLDivElement | null>(null);
+    const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
+    const internalRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    return subscribe(() => {
-      setToastList(getSnapshot());
-    });
-  }, []);
+    useEffect(() => {
+      return subscribe(() => {
+        setToastList(getSnapshot());
+      });
+    }, []);
 
-  const option = React.useMemo(() => {
-    return {
-      ...defaultToastOption,
-      ...defaultOption,
-    };
-  }, [defaultOption]);
+    const option = React.useMemo(() => {
+      return {
+        ...defaultToastOption,
+        ...defaultOption,
+      };
+    }, [defaultOption]);
 
-  const toasterInstance = document.querySelector("div[data-toaster-root]");
-  if (toasterInstance && id !== toasterInstance.id) {
-    if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
-      console.warn(
-        "Multiple Toaster instances detected. Only one Toaster is allowed.",
-      );
+    const toasterInstance = document.querySelector("div[data-toaster-root]");
+    if (toasterInstance && id !== toasterInstance.id) {
+      if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
+        console.warn(
+          "Multiple Toaster instances detected. Only one Toaster is allowed.",
+        );
+      }
+      return null;
     }
-    return null;
-  }
 
-  return (
-    <>
-      {ReactDOM.createPortal(
-        <div
-          {...otherPropsExtracted}
-          data-toaster-root={true}
-          className={toasterVariant(variantProps)}
-          ref={(el) => {
-            internalRef.current = el;
-            if (typeof ref === "function") {
-              ref(el);
-            } else if (ref) {
-              ref.current = el;
-            }
-          }}
-          id={id}
-        >
-          {Object.entries(toastList).map(([id]) => (
-            <ToastTemplate
-              key={id}
-              id={id as `${number}`}
-              globalOption={option}
-            />
-          ))}
-        </div>,
-        document.body,
-      )}
-    </>
-  );
-});
+    return (
+      <>
+        {ReactDOM.createPortal(
+          <div
+            {...otherPropsExtracted}
+            data-toaster-root={true}
+            className={toasterVariant(variantProps)}
+            ref={(el) => {
+              internalRef.current = el;
+              if (typeof ref === "function") {
+                ref(el);
+              } else if (ref) {
+                ref.current = el;
+              }
+            }}
+            id={id}
+          >
+            {Object.entries(toastList).map(([id]) => (
+              <ToastTemplate
+                key={id}
+                id={id as `${number}`}
+                globalOption={option}
+              />
+            ))}
+          </div>,
+          document.body,
+        )}
+      </>
+    );
+  }),
+);
+Toaster.displayName = "Toaster";
 
 export { Toaster };
diff --git a/src/pswui/components/Tooltip.tsx b/src/pswui/components/Tooltip.tsx
index aaf9c64..f47568b 100644
--- a/src/pswui/components/Tooltip.tsx
+++ b/src/pswui/components/Tooltip.tsx
@@ -71,6 +71,7 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
     </TooltipContext.Provider>
   );
 });
+Tooltip.displayName = "Tooltip";
 
 const tooltipContentColors = {
   variants: {
@@ -83,10 +84,10 @@ const tooltipContentColors = {
 };
 
 const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
-  base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all 
-  group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100 
-  select-none pointer-events-none 
-  group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto  
+  base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all
+  group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100
+  select-none pointer-events-none
+  group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto
   group-[:not(.controlled):hover]/tooltip:[transition:transform_150ms_ease-out_var(--delay),opacity_150ms_ease-out_var(--delay),background-color_150ms_ease-in-out,color_150ms_ease-in-out,border-color_150ms_ease-in-out]`,
   variants: {
     position: {
@@ -144,5 +145,6 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
     );
   },
 );
+TooltipContent.displayName = "TooltipContent";
 
 export { Tooltip, TooltipContent };
diff --git a/src/pswui/lib/index.ts b/src/pswui/lib/index.ts
index faba6d8..47c4881 100644
--- a/src/pswui/lib/index.ts
+++ b/src/pswui/lib/index.ts
@@ -1,2 +1,4 @@
 export * from "./vcn";
 export * from "./Slot";
+export * from "./ssrFallback";
+export * from "./withSSD";
diff --git a/src/pswui/lib/ssrFallback.tsx b/src/pswui/lib/ssrFallback.tsx
new file mode 100644
index 0000000..abaff35
--- /dev/null
+++ b/src/pswui/lib/ssrFallback.tsx
@@ -0,0 +1,20 @@
+import { type ReactNode, useEffect, useState } from "react";
+
+/**
+ * This component allows components to use `document` as like they're always in the client side.
+ * Return null if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
+ */
+function ServerSideDocumentFallback({ children }: { children: ReactNode }) {
+  const [initialRender, setInitialRender] = useState<boolean>(true);
+
+  useEffect(() => {
+    setInitialRender(false);
+  }, []);
+
+  if (typeof document === "undefined" /* server side */ || initialRender)
+    return null;
+
+  return children;
+}
+
+export { ServerSideDocumentFallback };
diff --git a/src/pswui/lib/withSSD.tsx b/src/pswui/lib/withSSD.tsx
new file mode 100644
index 0000000..0cc71ee
--- /dev/null
+++ b/src/pswui/lib/withSSD.tsx
@@ -0,0 +1,16 @@
+import type { ComponentType } from "react";
+import { ServerSideDocumentFallback } from "./ssrFallback";
+
+function withServerSideDocument<P extends {}>(
+  Component: ComponentType<P>,
+): ComponentType<P> {
+  return (props) => {
+    return (
+      <ServerSideDocumentFallback>
+        <Component {...props} />
+      </ServerSideDocumentFallback>
+    );
+  };
+}
+
+export { withServerSideDocument };