Merge pull request #14 from near/v2

V2
near · Nov 7, 2024 · c65f3b2 · c65f3b2
2 parents 83edca4 + ec50004
commit c65f3b2
Show file tree

Hide file tree

Showing 126 changed files with 3,323 additions and 2,155 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"],
+  "extends": ["next", "next/core-web-vitals", "prettier"],
   "plugins": ["simple-import-sort"],
   "rules": {
     "simple-import-sort/imports": "warn",

diff --git a/README.md b/README.md
@@ -15,40 +15,49 @@ pnpm add zustand
 pnpm add @near-pagoda/ui
 ```
 
-In your `_app.tsx` file, import the following CSS files in order:
+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
-import '@near-pagoda/ui/globals.css';
-import '@near-pagoda/ui/theme.css';
-import '@near-pagoda/ui/lib.css';
-```
+'use client';
 
-Wrap your application with the `<PagodaUiProvider>` to 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()`:
+import '@near-pagoda/ui/styles.css';
 
-```tsx
 import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { PagodaUiProvider, Toaster } from '@near-pagoda/ui';
 
-...
-
-const router = useRouter();
-
-...
-
-<PagodaUiProvider
-  value={{
-    routerPrefetch: router.prefetch,
-    routerPush: router.push,
-    Link,
-  }}
->
-  ...
-  <Toaster />
-</PagodaUiProvider>
+/*
+  The suppressHydrationWarning on <html> is required by next-theme's <ThemeProvider>:
+  https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
+*/
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, minimum-scale=1"
+        />
+      </head>
+
+      <body>
+        <PagodaUiProvider
+          value={{
+            Link,
+            useRouter
+          }}
+        >
+          <Toaster />
+          <main>{children}</main>
+        </PagodaUiProvider>
+      </body>
+    </html>
+  );
+}
 ```
 
-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.
+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
@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {
@@ -63,42 +63,51 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.5",
+    "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-focus-scope": "^1.1.0",
+    "@radix-ui/react-roving-focus": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "downshift": "^9.0.6",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "next-themes": "^0.4.3"
   },
   "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^8.3.4",
     "@testing-library/dom": "^10.4.0",
     "@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",
     "eslint-config-prettier": "^9",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "husky": "^9.1.3",
     "jsdom": "^24.1.1",
+    "next": "^15.0.2",
     "postcss": "^8.4.40",
     "postcss-preset-env": "^7.6.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3",
     "rollup": "^2.77.2",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.8",
     "tslib": "^2.6.2",