dubinc · versecafe · Jan 19, 2024 · Jan 19, 2024 · Jan 20, 2024 · Jan 20, 2024
diff --git a/apps/web/app/app.dub.co/(auth)/welcome/page.tsx b/apps/web/app/app.dub.co/(auth)/welcome/page.tsx
@@ -1,5 +1,5 @@
-import { Background } from "@dub/ui";
 import { constructMetadata } from "@dub/utils";
+import { Background } from "@dub/ui";
 import { Suspense } from "react";
 import WelcomePageClient from "./page-client";
 
@@ -11,11 +11,11 @@ export const metadata = constructMetadata({
 
 export default function WelcomePage() {
   return (
-    <>
+    <div className="flex h-screen flex-col items-center">
       <Background />
-      <Suspense>
+      <Suspense fallback={null}>
         <WelcomePageClient />
       </Suspense>
-    </>
+    </div>
   );
 }
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -20,6 +20,7 @@ module.exports = {
       "@react-email/tailwind",
     ],
   },
+  transpilePackages: ["@dub/ui"],
   webpack: (config, { webpack, isServer }) => {
     if (isServer) {
       config.plugins.push(

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -13,7 +13,6 @@
   "dependencies": {
     "@boxyhq/saml-jackson": "^1.14.2",
     "@dub/tailwind-config": "workspace:*",
-    "@dub/ui": "workspace:*",
     "@dub/utils": "workspace:*",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@planetscale/database": "^1.7.0",
@@ -90,6 +89,9 @@
     "zod-error": "^1.5.0",
     "zod-openapi": "^2.12.0"
   },
+  "peerDependencies": {
+    "@dub/ui": "workspace:*"
+  },
   "devDependencies": {
     "@types/dotenv-flow": "^3.3.2",
     "@types/he": "^1.2.3",

diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -9,3 +9,18 @@ To install the package, run:
 ```bash
 pnpm i @dub/ui
 ```
+
+### Transpiling
+
+As of version `0.1.0` the package is not bundled, this means transpiling the module is 
+highly recommended, this was done to support React Server Components.
+
+If you are using NextJS this is as simple as:
+
+```js
+// next.config.js
+/** @type {import('next').NextConfig} */
+module.exports = {
+  transpilePackages: ["@dub/ui"]
+}
+```
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -3,16 +3,10 @@
   "description": "UI components for Dub.co",
   "version": "0.0.57",
   "sideEffects": false,
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist/**"
-  ],
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
   "scripts": {
-    "build": "tsup",
     "lint": "eslint src/",
-    "dev": "tsup --watch",
     "check-types": "tsc --noEmit"
   },
   "peerDependencies": {
@@ -31,7 +25,6 @@
     "react": "^18.2.0",
     "tailwindcss": "^3.3.3",
     "tsconfig": "workspace:*",
-    "tsup": "^6.1.3",
     "typescript": "^5.1.6"
   },
   "dependencies": {

diff --git a/packages/ui/src/accordion.tsx b/packages/ui/src/accordion.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { cn } from "@dub/utils";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";

diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@dub/utils";
 import { InputHTMLAttributes, ReactNode, useMemo, useState } from "react";
 import { Button } from "./button";

diff --git a/packages/ui/src/hooks/use-cookies.ts b/packages/ui/src/hooks/use-cookies.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import Cookies from "js-cookie";
 import { useEffect, useState } from "react";
 

diff --git a/packages/ui/src/hooks/use-current-anchor.ts b/packages/ui/src/hooks/use-current-anchor.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 export default function useCurrentAnchor() {

diff --git a/packages/ui/src/hooks/use-intersection-observer.ts b/packages/ui/src/hooks/use-intersection-observer.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { RefObject, useEffect, useState } from "react";
 
 interface Args extends IntersectionObserverInit {

diff --git a/packages/ui/src/hooks/use-local-storage.ts b/packages/ui/src/hooks/use-local-storage.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 export default function useLocalStorage<T>(

diff --git a/packages/ui/src/hooks/use-media-query.ts b/packages/ui/src/hooks/use-media-query.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 export default function useMediaQuery() {

diff --git a/packages/ui/src/hooks/use-router-stuff.ts b/packages/ui/src/hooks/use-router-stuff.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 export default function useRouterStuff() {

diff --git a/packages/ui/src/hooks/use-scroll.ts b/packages/ui/src/hooks/use-scroll.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useEffect, useState } from "react";
 
 export default function useScroll(threshold: number) {

diff --git a/packages/ui/src/hooks/use-toast-with-undo.tsx b/packages/ui/src/hooks/use-toast-with-undo.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { toast } from "sonner";
 import Success from "../icons/success";

diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml