Merge branch 'shadcn-ui:main' into fix-calendar

shadcn-ui · Oct 30, 2024 · a72e1a7 · a72e1a7
2 parents a56c3f8 + c830780
commit a72e1a7
Show file tree

Hide file tree

Showing 17 changed files with 354 additions and 32 deletions.
diff --git a/apps/www/components/callout.tsx b/apps/www/components/callout.tsx
@@ -1,18 +1,19 @@
+import { cn } from "@/lib/utils"
 import {
   Alert,
   AlertDescription,
   AlertTitle,
 } from "@/registry/new-york/ui/alert"
 
-interface CalloutProps {
-  icon?: string
-  title?: string
-  children?: React.ReactNode
-}
-
-export function Callout({ title, children, icon, ...props }: CalloutProps) {
+export function Callout({
+  title,
+  children,
+  icon,
+  className,
+  ...props
+}: React.ComponentProps<typeof Alert> & { icon?: string }) {
   return (
-    <Alert {...props}>
+    <Alert className={cn("bg-muted/50", className)} {...props}>
       {icon && <span className="mr-4 text-2xl">{icon}</span>}
       {title && <AlertTitle>{title}</AlertTitle>}
       <AlertDescription>{children}</AlertDescription>

diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
@@ -139,23 +139,26 @@ const components = {
     <hr className="my-4 md:my-8" {...props} />
   ),
   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-    <div className="my-6 w-full overflow-y-auto rounded-lg">
+    <div className="my-6 w-full overflow-y-auto">
       <table
         className={cn(
-          "relative w-full overflow-hidden text-sm after:absolute after:inset-0 after:rounded-lg after:ring-1 after:ring-border",
+          "relative w-full overflow-hidden border-none text-sm",
           className
         )}
         {...props}
       />
     </div>
   ),
   tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
-    <tr className={cn("m-0 border-t", className)} {...props} />
+    <tr
+      className={cn("last:border-b-none m-0 border-b", className)}
+      {...props}
+    />
   ),
   th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <th
       className={cn(
-        "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+        "px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       )}
       {...props}
@@ -164,7 +167,7 @@ const components = {
   td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <td
       className={cn(
-        "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        "px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       )}
       {...props}

diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
@@ -71,6 +71,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/cli",
           items: [],
         },
+        {
+          title: "Next.js 15 + React 19",
+          href: "/docs/react-19",
+          items: [],
+        },
         {
           title: "Typography",
           href: "/docs/components/typography",

diff --git a/apps/www/content/docs/components/chart.mdx b/apps/www/content/docs/components/chart.mdx
@@ -4,6 +4,12 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap
 component: true
 ---
 
+<Callout className="mb-6">
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+</Callout>
+
 <ComponentPreview
   name="chart-bar-interactive"
   className="-mt-4 [&_.preview]:p-0 [&_.preview]:border-t [&_.preview>div]:shadow-none [&_.preview>div]:border-none [&_.preview>div]:w-full [&_.preview]:lg:min-h-[404px]"
@@ -47,7 +53,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 <Callout className="mt-4">
 
-**Note:** If you are trying to use charts with **React 19** or the **Next.js 15**, you will need the [recharts@alpha](https://github.com/recharts/recharts/releases/tag/v2.13.0-alpha.4) release currently.
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
 
 </Callout>
 

diff --git a/apps/www/content/docs/components/sidebar.mdx b/apps/www/content/docs/components/sidebar.mdx
@@ -406,6 +406,40 @@ You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT`
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 ```
 
+### Persisted State
+
+The `SidebarProvider` supports persisting the sidebar state across page reloads and server-side rendering. It uses cookies to store the current state of the sidebar. When the sidebar state changes, a default cookie named `sidebar:state` is set with the current open/closed state. This cookie is then read on subsequent page loads to restore the sidebar state.
+
+To persist sidebar state in Next.js, set up your `SidebarProvider` in `app/layout.tsx` like this:
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { cookies } from "next/headers"
+
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export async function Layout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies()
+  const defaultOpen = cookieStore.get("sidebar:state")?.value === "true"
+
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+You can change the name of the cookie by updating the `SIDEBAR_COOKIE_NAME` variable in `sidebar.tsx`.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+```
+
 ## Sidebar
 
 The main `Sidebar` component used to render a collapsible sidebar.
@@ -1323,7 +1357,30 @@ You can find more tips on using states for styling in this [Twitter thread](http
 
 ## Changelog
 
-### 2024-10-21
+### 2024-10-30 Cookie handling in setOpen
+
+- [#5593](https://github.com/shadcn-ui/ui/pull/5593) - Improved setOpen callback logic in `<SidebarProvider>`.
+
+Update the `setOpen` callback in `<SidebarProvider>` as follows:
+
+```tsx showLineNumbers
+const setOpen = React.useCallback(
+  (value: boolean | ((value: boolean) => boolean)) => {
+    const openState = typeof value === "function" ? value(open) : value
+    if (setOpenProp) {
+      setOpenProp(openState)
+    } else {
+      _setOpen(openState)
+    }
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  },
+  [setOpenProp, open]
+)
+```
+
+### 2024-10-21 Fixed `text-sidebar-foreground`
 
 - [#5491](https://github.com/shadcn-ui/ui/pull/5491) - Moved `text-sidebar-foreground` from `<SidebarProvider>` to `<Sidebar>` component.
 

diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx
@@ -3,6 +3,12 @@ title: Next.js
 description: Install and configure Next.js.
 ---
 
+<Callout>
+
+**If you're using Next.js 15, see the [Next.js 15 + React 19](/docs/react-19) guide.**
+
+</Callout>
+
 <Steps>
 
 ### Create project

diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx
@@ -23,6 +23,29 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
+Add this import header in your main css file, `src/index.css` in our case:
+
+```css {1-3} showLineNumbers
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ... */
+```
+
+Configure the tailwind template paths in `tailwind.config.js`:
+
+```js {3}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
 ### Edit tsconfig.json file
 
 The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.

diff --git a/apps/www/content/docs/react-19.mdx b/apps/www/content/docs/react-19.mdx
@@ -0,0 +1,168 @@
+---
+title: Next.js 15 + React 19
+description: Using shadcn/ui with Next.js 15 and React 19.
+---
+
+<Callout>
+  **The following guide applies to any framework that supports React 19**. I
+  titled this page "Next.js 15 + React 19" to help people upgrading to Next.js
+  15 find it. We are working with package maintainers to help upgrade to React
+  19.
+</Callout>
+
+## TL;DR
+
+If you're using `npm`, you can install shadcn/ui dependencies with a flag. The `shadcn` CLI will prompt you to select a flag when you run it. No flags required for pnpm, bun, or yarn.
+
+See [Upgrade Status](#upgrade-status) for the status of React 19 support for each package.
+
+## What's happening?
+
+React 19 is now [rc](https://www.npmjs.com/package/react?activeTab=versions) and is [tested and supported in the latest Next.js 15 release](https://nextjs.org/blog/next-15#react-19).
+
+To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is [already](https://github.com/radix-ui/primitives/pull/2952) [in](https://github.com/pacocoursey/cmdk/pull/318) [progress](https://github.com/emilkowalski/vaul/pull/498).
+
+```diff /^19.0/
+"peerDependencies": {
+-  "react": "^16.8 || ^17.0 || ^18.0",
++  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
+-  "react-dom": "^16.8 || ^17.0 || ^18.0"
++  "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
+},
+```
+
+<Callout>
+  You can check if a package lists React 19 as a peer dependency by running
+  `npm info <package> peerDependencies`.
+</Callout>
+
+In the meantime, if you are installing a package that **does not** list React 19 as a peer dependency, you will see an error message like this:
+
+```bash
+npm error code ERESOLVE
+npm error ERESOLVE unable to resolve dependency tree
+npm error
+npm error While resolving: [email protected]
+npm error Found: [email protected]
+npm error node_modules/react
+npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
+```
+
+<Callout>
+  **Note:** This is npm only. PNPM and Bun will only show a silent warning.
+</Callout>
+
+## How to fix this
+
+### Solution 1: `--force` or `--legacy-peer-deps`
+
+You can force install a package with the `--force` or the `--legacy-peer-deps` flag.
+
+```bash
+npm i <package> --force
+
+npm i <package> --legacy-peer-deps
+```
+
+This will install the package and ignore the peer dependency warnings.
+
+<Accordion type="multiple">
+  <AccordionItem value="flags">
+    <AccordionTrigger className="font-medium">
+      What do the `--force` and `--legacy-peer-deps` flag do?
+    </AccordionTrigger>
+    <AccordionContent className="[&_ul]:mt-0">
+
+      - `--force`: Ignores and overrides any dependency conflicts, forcing the
+        installation of packages.
+      - `--legacy-peer-deps`: Skips strict peer dependency checks, allowing
+        installation of packages with unmet peer dependencies to avoid errors.
+
+    </AccordionContent>
+
+  </AccordionItem>
+</Accordion>
+
+### Solution 2: Use React 18
+
+You can downgrade `react` and `react-dom` to version 18, which is compatible with the package you are installing and upgrade when the dependency is updated.
+
+```bash
+npm i react@18 react-dom@18
+```
+
+Whichever solution you choose, make sure you test your app thoroughly to ensure
+there are no regressions.
+
+## Using shadcn/ui on Next.js 15
+
+### Using pnpm, bun, or yarn
+
+Follow the instructions in the [installation guide](/docs/installation/next) to install shadcn/ui. No flags are needed.
+
+### Using npm
+
+When you run `npx shadcn@latest init -d`, you will be prompted to select an option to resolve the peer dependency issues.
+
+```bash
+It looks like you are using React 19.
+Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
+
+? How would you like to proceed? › - Use arrow-keys. Return to submit.
+❯   Use --force
+    Use --legacy-peer-deps
+```
+
+You can then run the command with the flag you choose.
+
+## Adding components
+
+The process for adding components is the same as above. Select a flag to resolve the peer dependency issues.
+
+**Remember to always test your app after installing new dependencies.**
+
+## Upgrade Status
+
+To make it easy for you track the progress of the upgrade, I've created a table below with React 19 support status for the shadcn/ui dependencies.
+
+- ✅ - Works with React 19 using npm, pnpm, and bun.
+- 🚧 - Works with React 19 using pnpm and bun. Requires flag for npm. PR is in progress.
+
+| Package                                                                            | Status | Note                                                        |
+| ---------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------- |
+| [radix-ui](https://www.npmjs.com/package/@radix-ui/react-icons)                    | ✅     |                                                             |
+| [lucide-react](https://www.npmjs.com/package/lucide-react)                         | ✅     |                                                             |
+| [class-variance-authority](https://www.npmjs.com/package/class-variance-authority) | ✅     | Does not list React 19 as a peer dependency.                |
+| [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate)           | ✅     | Does not list React 19 as a peer dependency.                |
+| [embla-carousel-react](https://www.npmjs.com/package/embla-carousel-react)         | ✅     |                                                             |
+| [recharts](https://www.npmjs.com/package/recharts)                                 | ✅     | See note [below](#recharts)                                 |
+| [react-hook-form](https://www.npmjs.com/package/react-hook-form)                   | ✅     |                                                             |
+| [react-resizable-panels](https://www.npmjs.com/package/react-resizable-panels)     | ✅     |                                                             |
+| [sonner](https://www.npmjs.com/package/sonner)                                     | ✅     |                                                             |
+| [react-day-picker](https://www.npmjs.com/package/react-day-picker)                 | ✅     | Works with flag for npm. Work to upgrade to v9 in progress. |
+| [input-otp](https://www.npmjs.com/package/input-otp)                               | ✅     |                                                             |
+| [vaul](https://www.npmjs.com/package/vaul)                                         | ✅     |                                                             |
+| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | ✅     |                                                             |
+| [cmdk](https://www.npmjs.com/package/cmdk)                                         | 🚧     | See [PR #318](https://github.com/pacocoursey/cmdk/pull/318) |
+
+If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.
+
+## Recharts
+
+To use recharts with React 19, you will need to override the `react-is` dependency.
+
+<Steps>
+
+<Step>Add the following to your `package.json`</Step>
+
+```json title="package.json"
+"overrides": {
+  "react-is": "^19.0.0-rc-69d4b800-20241021"
+}
+```
+
+Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
+
+<Step>Run `npm install --legacy-peer-deps`</Step>
+
+</Steps>
diff --git a/apps/www/next.config.mjs b/apps/www/next.config.mjs
@@ -58,6 +58,11 @@ const nextConfig = {
         destination: "/docs/components/sidebar",
         permanent: true,
       },
+      {
+        source: "/react-19",
+        destination: "/docs/react-19",
+        permanent: true,
+      },
     ]
   },
 }