Wrapping up v2 changes

calebjacob · calebjacob · commit ec50004d8879 · 2024-11-07T12:48:09.000-07:00
diff --git a/README.md b/README.md
@@ -18,6 +18,8 @@ pnpm add @near-pagoda/ui
 In your root `layout.tsx` file, wrap your application with the `<PagodaUiProvider>` and pass in your framework's `<Link>` component and router methods. You'll also want to include the `<Toaster />` component to display toasts when calling `openToast()`.
 
 ```tsx
+'use client';
+
 import '@near-pagoda/ui/styles.css';
 
 import Link from 'next/link';
@@ -30,8 +32,6 @@ import { PagodaUiProvider, Toaster } from '@near-pagoda/ui';
 */
 
 export default function RootLayout({ children }: { children: ReactNode }) {
-  const router = useRouter();
-
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
@@ -45,8 +45,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <PagodaUiProvider
           value={{
             Link,
-            routerPrefetch: router.prefetch,
-            routerPush: router.push
+            useRouter
           }}
         >
           <Toaster />
@@ -58,7 +57,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 }
 ```
 
-Why is `<PagodaUiProvider>` needed? Some of our components render anchor tags or dynamically change the current route. This provider allows our library to support any React framework (Vanilla/Vite, Next JS, etc) by passing in your router's components. It also supports dark/light mode and opts into the user's preferred theme via [next-theme](ttps://github.com/pacocoursey/next-themes).
+Why is `<PagodaUiProvider>` needed? Some of our components render anchor tags or dynamically change the current route. This provider allows our library to support any React framework (Vanilla/Vite, Next JS, etc) by passing in your router's components and hooks. It also supports dark/light mode and opts into the user's preferred theme via [next-theme](ttps://github.com/pacocoursey/next-themes).
 
 ## Documentation
 
diff --git a/package.json b/package.json
@@ -89,8 +89,8 @@
     "@testing-library/react": "^16.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^8",
     "eslint-config-next": "^14.2.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rollup-plugin-concat.js b/rollup-plugin-concat.js
@@ -9,16 +9,21 @@ function concat(options = {}) {
 
     writeBundle() {
       let code = '';
+      let exit = false;
 
       for (const file of options.files) {
         const filePath = path.resolve(process.cwd(), file);
         if (fs.existsSync(filePath)) {
           const content = fs.readFileSync(filePath, 'utf8');
           fs.unlinkSync(filePath);
           code += `${content}\n`;
+        } else {
+          exit = true;
         }
       }
 
+      if (exit) return;
+
       writeFileWithDirs(outputPath, code);
     },
   };
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -52,14 +52,15 @@ export const Item = forwardRef<
   HTMLDivElement,
   ComponentProps<typeof Primitive.Item> & { external?: boolean; href?: string }
 >(({ external, href, ...props }, ref) => {
-  const { routerPush } = usePagodaUi();
+  const { useRouter } = usePagodaUi();
+  const router = useRouter();
 
   const onClick: MouseEventHandler = (event) => {
     if (href) {
       if (event.metaKey || external) {
         window.open(href, '_blank');
       } else {
-        void routerPush(href);
+        void router.push(href);
       }
     }
   };
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -41,21 +41,22 @@ Content.displayName = 'Content';
 
 export const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(({ children, href, iconLeft, ...props }, ref) => {
   const elementRef = useRef<HTMLButtonElement | null>(null);
-  const { routerPush, routerPrefetch } = usePagodaUi();
+  const { useRouter } = usePagodaUi();
+  const router = useRouter();
 
   useEffect(() => {
     if (href) {
-      void routerPrefetch(href);
+      void router.prefetch(href);
     }
-  }, [href, routerPrefetch]);
+  }, [href, router]);
 
   useEffect(() => {
     function clickListener(event: MouseEvent) {
       if (href) {
         if (event.metaKey || event.ctrlKey) {
           window.open(href, '_blank');
         } else {
-          void routerPush(href);
+          void router.push(href);
         }
       }
     }
@@ -66,7 +67,7 @@ export const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(({ children,
     return () => {
       el?.removeEventListener('click', clickListener);
     };
-  }, [href, routerPush]);
+  }, [href, router]);
 
   return (
     <Primitive.Trigger className={s.trigger} ref={mergeRefs([ref, elementRef])} {...props}>
diff --git a/src/context/PagodaUi.tsx b/src/context/PagodaUi.tsx
@@ -9,8 +9,10 @@ type PagodaUi = {
     target?: ComponentProps<'a'>['target'];
     ref?: ForwardedRef<HTMLAnchorElement>;
   }) => ReactNode;
-  routerPrefetch: (path: string) => any;
-  routerPush: (path: string) => any;
+  useRouter: () => {
+    prefetch: (path: string) => any;
+    push: (path: string) => any;
+  };
 };
 
 export const PagodaUiContext = createContext<PagodaUi | null>(null);
