Merge pull request #2824 from udecode/sync-shadcn

Sync shadcn
udecode · Dec 25, 2023 · 7f115f3 · 7f115f3
2 parents 90bd461 + 0c63bd3
commit 7f115f3
Show file tree

Hide file tree

Showing 105 changed files with 1,620 additions and 1,798 deletions.
diff --git a/.changeset/mean-taxis-tie.md b/.changeset/mean-taxis-tie.md
@@ -0,0 +1,6 @@
+---
+'@udecode/plate-ui': minor
+---
+
+- add support for custom tailwind prefix
+- minify build
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
@@ -2,8 +2,8 @@
 title: Avatar
 description: An image element with a fallback for representing the user.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/avatar
+links:
+  doc: https://ui.shadcn.com/docs/components/avatar
   api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
 ---
 

diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
@@ -2,8 +2,8 @@
 title: Button
 description: Displays a button or a component that looks like a button.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/button
+links:
+  doc: https://ui.shadcn.com/docs/components/button
 ---
 
 ## Installation

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -10,6 +10,19 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2023 #6
 
+### December 25 #6.2
+
+- [dialog](https://github.com/udecode/plate/pull/2824/files#diff-5f7205cdd85718b7f26cef1e746ad67d69c83703135a7e3ad1a9a09ca69c38c8)
+- Plate 28, includes a few optimizations: [changes](https://github.com/udecode/plate/pull/2816/files#diff-726cd463a614f1a49228e05a2eb7ea9bc95f2e574423eb4264c6cb95eb0ac792)
+  - `combobox`
+  - `insert-dropdown-menu`
+  - `media-popover`
+  - `mode-dropdown-menu`
+  - `more-dropdown-menu`
+  - `table-dropdown-menu`
+  - `table-element`
+  - `turn-into-dropdown-menu`
+
 ### December 10 #6.1
 
 - `image-element`: wrap the component with `withHOC(ResizableProvide, ...)`

diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
@@ -2,8 +2,8 @@
 title: Checkbox
 description: A control that allows the user to toggle between checked and not checked.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/checkbox
+links:
+  doc: https://ui.shadcn.com/docs/components/checkbox
 ---
 
 ## Installation

diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
@@ -2,8 +2,8 @@
 title: Command
 description: Fast, composable, unstyled command menu for React.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/command
+links:
+  doc: https://ui.shadcn.com/docs/components/command
 ---
 
 ## Installation

diff --git a/apps/www/content/docs/components/components-json.mdx b/apps/www/content/docs/components/components-json.mdx
@@ -101,6 +101,18 @@ For more information, see the <Link href="/docs/theming">theming docs</Link>.
 
 **This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
 
+### tailwind.prefix
+
+The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "prefix": "tw-"
+  }
+}
+```
+
 ## rsc
 
 Whether or not to enable support for React Server Components.

diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx
@@ -2,8 +2,8 @@
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/dialog
+links:
+  doc: https://ui.shadcn.com/docs/components/dialog
 ---
 
 ## Installation

diff --git a/apps/www/content/docs/components/dropdown-menu.mdx b/apps/www/content/docs/components/dropdown-menu.mdx
@@ -2,8 +2,8 @@
 title: Dropdown Menu
 description: Display a menu of options for selection within a dropdown interface.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/dropdown-menu
+links:
+  doc: https://ui.shadcn.com/docs/components/dropdown-menu
   api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference
 ---
 

diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
@@ -2,8 +2,8 @@
 title: Input
 description: Displays a form input field or a component that looks like an input field.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/input
+links:
+  doc: https://ui.shadcn.com/docs/components/input
 ---
 
 ## Installation

diff --git a/apps/www/content/docs/components/installation.mdx b/apps/www/content/docs/components/installation.mdx
@@ -32,19 +32,6 @@ description: How to install dependencies and structure your app.
     </svg>
     <p className="mt-2 font-medium">Vite</p>
   </LinkedCard>
-  <LinkedCard href="/docs/components/installation/remix">
-    <svg
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-10 w-10"
-      fill="currentColor"
-    >
-      <title>Remix</title>
-      <path d="M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z" />
-    </svg>
-    <p className="mt-2 font-medium">Remix</p>
-  </LinkedCard>
   <LinkedCard href="/docs/components/installation/manual">
     <svg
       role="img"

diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/docs/components/installation/next.mdx
@@ -40,6 +40,61 @@ Configure the import alias for utils: › @/lib/utils
 Are you using React Server Components? › no / yes
 ```
 
+### Fonts
+
+We use [Inter](https://rsms.me/inter/) as the default font. Inter is not required. You can replace it with any other font.
+
+Here's how you can configure Inter for Next.js:
+
+**1. Import the font in the root layout:**
+
+```js showLineNumbers title=app/layout.tsx {2,5-8,16-17}
+import "@/styles/globals.css"
+import { Inter as FontSans } from "next/font/google"
+
+import { cn } from "@/lib/utils"
+
+export const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          fontSans.variable
+        )}
+      >
+        ...
+      </body>
+    </html>
+  )
+}
+```
+
+**2. Configure `theme.extend.fontFamily` in `tailwind.config.js`**
+
+```js showLineNumbers title=tailwind.config.js {9-11}
+const { fontFamily } = require("tailwindcss/defaultTheme")
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+      },
+    },
+  },
+}
+```
+
 ### Add icons
 
 Add the icons you'll use in `components/icons.tsx`:

diff --git a/apps/www/content/docs/components/installation/remix.mdx b/apps/www/content/docs/components/installation/remix.mdx
diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/docs/components/installation/vite.mdx
@@ -25,18 +25,26 @@ npx tailwindcss init -p
 
 ### Edit tsconfig.json
 
-Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error
-
-```bash
-"baseUrl": ".",
-"paths": {
-  "@/*": ["./src/*"]
+Add the following code to the `tsconfig.json` file to resolve paths:
+
+```bash {4-9} showLineNumbers
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+    // ...
+  }
 }
 ```
 
 ### Update vite.config.ts
 
-Add the code below to the vite.config.ts so your app can resolve paths without error
+Add the following code to the vite.config.ts so your app can resolve paths without error
 
 ```bash
 # (so you can import "path" without error)

diff --git a/apps/www/content/docs/components/popover.mdx b/apps/www/content/docs/components/popover.mdx
@@ -2,8 +2,8 @@
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/popover
+links:
+  doc: https://ui.shadcn.com/docs/components/popover
   api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference
 ---
 

diff --git a/apps/www/content/docs/components/separator.mdx b/apps/www/content/docs/components/separator.mdx
@@ -2,8 +2,8 @@
 title: Separator
 description: Visually or semantically separates content.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/separator
+links:
+  doc: https://ui.shadcn.com/docs/components/separator
   api: https://www.radix-ui.com/docs/primitives/components/separator#api-reference
 ---
 

diff --git a/apps/www/content/docs/components/toggle.mdx b/apps/www/content/docs/components/toggle.mdx
@@ -2,8 +2,8 @@
 title: Toggle
 description: Enable or disable a specific feature or functionality with a toggle switch.
 component: true
-radix:
-  shadcn: https://ui.shadcn.com/docs/components/toggle
+links:
+  doc: https://ui.shadcn.com/docs/components/toggle
   api: https://www.radix-ui.com/docs/primitives/components/toggle#api-reference
 ---