From eb8ea83336f0ad0f88e816934d3a2c1dc3232f3b Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 12 Jul 2024 01:10:28 +0900
Subject: [PATCH] feat(lib): add ServerSideDocumentFallback component to
 support ssr frameworks like nextjs

---
 packages/react/lib/index.ts        |  1 +
 packages/react/lib/ssrFallback.tsx | 20 +++++++++++++++++++
 registry.json                      | 32 +++++++++++++++++++++---------
 3 files changed, 44 insertions(+), 9 deletions(-)
 create mode 100644 packages/react/lib/ssrFallback.tsx

diff --git a/packages/react/lib/index.ts b/packages/react/lib/index.ts
index faba6d8..a507740 100644
--- a/packages/react/lib/index.ts
+++ b/packages/react/lib/index.ts
@@ -1,2 +1,3 @@
 export * from "./vcn";
 export * from "./Slot";
+export * from "./ssrFallback";
diff --git a/packages/react/lib/ssrFallback.tsx b/packages/react/lib/ssrFallback.tsx
new file mode 100644
index 0000000..abaff35
--- /dev/null
+++ b/packages/react/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/registry.json b/registry.json
index 269dfeb..2ede696 100644
--- a/registry.json
+++ b/registry.json
@@ -4,22 +4,36 @@
     "components": "/packages/react/components/{componentName}",
     "lib": "/packages/react/lib/{libName}"
   },
-  "lib": [
-    "index.ts",
-    "Slot.tsx",
-    "vcn.ts"
-  ],
+  "lib": ["index.ts", "Slot.tsx", "vcn.ts", "ssrFallback.tsx"],
   "components": {
     "button": { "type": "file", "name": "Button.tsx" },
     "checkbox": { "type": "file", "name": "Checkbox.tsx" },
-    "dialog": { "type": "dir", "name": "Dialog", "files": ["index.ts", "Component.tsx", "Context.ts"] },
+    "dialog": {
+      "type": "dir",
+      "name": "Dialog",
+      "files": ["index.ts", "Component.tsx", "Context.ts"]
+    },
     "drawer": { "type": "file", "name": "Drawer.tsx" },
     "input": { "type": "file", "name": "Input.tsx" },
     "label": { "type": "file", "name": "Label.tsx" },
     "popover": { "type": "file", "name": "Popover.tsx" },
     "switch": { "type": "file", "name": "Switch.tsx" },
-    "tabs": { "type": "dir", "name": "Tabs", "files": ["index.ts", "Context.ts", "Hook.ts", "Component.tsx"] },
-    "toast": { "type": "dir", "name": "Toast", "files": ["index.ts", "Component.tsx", "Hook.ts", "Store.ts", "Variant.ts"] },
+    "tabs": {
+      "type": "dir",
+      "name": "Tabs",
+      "files": ["index.ts", "Context.ts", "Hook.ts", "Component.tsx"]
+    },
+    "toast": {
+      "type": "dir",
+      "name": "Toast",
+      "files": [
+        "index.ts",
+        "Component.tsx",
+        "Hook.ts",
+        "Store.ts",
+        "Variant.ts"
+      ]
+    },
     "tooltip": { "type": "file", "name": "Tooltip.tsx" }
   }
-}
\ No newline at end of file
+}