Merge pull request #3561 from udecode/sync-shadcn

Sync shadcn
udecode · Sep 24, 2024 · af808ba · af808ba
2 parents 02e1b5f + 3f92d00
commit af808ba
Show file tree

Hide file tree

Showing 190 changed files with 12,832 additions and 4,743 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,7 +1,7 @@
+const { filePatterns } = require('./config/eslint/constants/file-patterns.cjs');
 const {
   getDefaultIgnorePatterns,
 } = require('./config/eslint/helpers/getDefaultIgnorePatterns.cjs');
-const { filePatterns } = require('./config/eslint/constants/file-patterns.cjs');
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
@@ -34,6 +34,7 @@ module.exports = {
     '.out',
     '**/*.mdx',
     '**/__registry__',
+    '**/scripts/build-registry.mts',
   ],
   overrides: [
     {

diff --git a/apps/www/content/docs/components/cli.mdx b/apps/www/content/docs/components/cli.mdx
@@ -3,6 +3,16 @@ title: CLI
 description: Use the CLI to add components to your project.
 ---
 
+<Callout className="mt-6">
+WIP – We're migrating to <Link href="https://ui.shadcn.com/docs/cli">npx shadcn</Link>.
+</Callout>
+
+{/* <Callout>
+
+**Note:** We are now using the `shadcn` CLI.
+
+</Callout>
+
 ## init
 
 Use the `init` command to initialize configuration and dependencies for a new project.
@@ -13,41 +23,65 @@ The `init` command installs dependencies, adds the `cn` util, configures `tailwi
 npx @udecode/plate-ui@latest init
 ```
 
-You will be asked a few questions to configure `plate-components.json`:
+You will be asked a few questions to configure `components.json`:
 
 ```txt showLineNumbers
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
-Where is your global CSS file? › src/style/globals.css
-Do you want to use CSS variables for colors? › no / yes
-Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
-Where is your tailwind.config.js located? › tailwind.config.js
-Configure the import alias for components: › @/components
-Configure the import alias for ui: › @/components/plate-ui
-Are you using React Server Components? › no / yes
+Do you want to use CSS variables for colors? › yes
+```
+
+To have the same look than Plate UI, you should:
+
+- Pick "Default" for the style. Plate does not have the "New York" style.
+- Pick "Slate" for the base color.
+- Pick "Yes" for using CSS variables.
+
+You should get something like this:
+
+```txt
+npx shadcn@latest init
+Need to install the following packages:
+[email protected]
+Ok to proceed? (y) y
+
+✔ Preflight checks.
+✔ Verifying framework. Found Next.js.
+✔ Validating Tailwind CSS.
+✔ Validating import alias.
+✔ Which style would you like to use? › Default
+✔ Which color would you like to use as the base color? › Slate
+✔ Would you like to use CSS variables for theming? … no / yes
+✔ Writing components.json.
+✔ Checking registry.
+✔ Updating tailwind.config.js
+✔ Updating src/styles/globals.css
+✔ Installing dependencies.
+✔ Created 1 file:
+  - src/lib/utils.ts
+
+Success! Project initialization completed.
+You may now add components.
 ```
 
 ### Options
 
 ```txt
-Usage: @udecode/plate-ui init [options]
+Usage: shadcn init [options] [components...]
 
 initialize your project and install dependencies
 
+Arguments:
+  components         the components to add or a url to the component.
+
 Options:
-  -y, --yes        skip confirmation prompt. (default: false)
-  -c, --cwd <cwd>  the working directory. defaults to the current directory.
+  -d, --defaults    use default values i.e new-york, zinc and css variables. (default: false)
+  -f, --force       force overwrite of existing components.json. (default: false)
+  -y, --yes         skip confirmation prompt. (default: false)
+  -c, --cwd <cwd>   the working directory. defaults to the current directory.
   -h, --help       display help for command
 ```
 
-### Add icons
-
-Add the icons you'll use in `components/icons.tsx`:
-
-<ComponentSource src="../../templates/plate-playground-template/src/components/icons.tsx" />
-
-We use icons from <Link href="https://lucide.dev">Lucide</Link>. You can use any icon library you want.
-
 ## add
 
 Use the `add` command to add components and dependencies to your project.
@@ -142,4 +176,4 @@ Options:
   -y, --yes        skip confirmation prompt. (default: false)
   -c, --cwd <cwd>  the working directory. defaults to the current directory.
   -h, --help       display help for command
-```
+``` */}
diff --git a/apps/www/content/docs/components/components-json.mdx b/apps/www/content/docs/components/components-json.mdx
@@ -1,9 +1,13 @@
 ---
-title: plate-components.json
+title: components.json
 description: Configuration for your project.
 ---
 
-The `plate-components.json` file holds configuration for your project.
+<Callout className="mt-6">
+WIP – We're migrating to <Link href="https://ui.shadcn.com/docs/components-json">shadcn's components.json</Link>.
+</Callout>
+
+{/* The `plate-components.json` file holds configuration for your project.
 
 We use it to understand how your project is set up and how to generate components customized for your project.
 
@@ -163,4 +167,4 @@ The CLI will use this value to determine where to place your UI components. Use
     "plate-ui": "@/components/plate-ui"
   }
 }
-```
+``` */}
diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/docs/components/installation/next.mdx
@@ -13,13 +13,7 @@ A <Link href="https://github.com/udecode/plate/tree/main/templates/plate-templat
 
 ### Create project
 
-Start by creating a new Next.js project using `create-next-app`:
-
-```bash
-npx create-next-app@latest my-app --typescript --tailwind --eslint
-```
-
-### Run the CLI
+Run the `init` command to create a new Next.js project or to setup an existing one:
 
 ```bash
 npx @udecode/plate-ui@latest init
@@ -35,93 +29,6 @@ Which color would you like to use as base color? › Slate
 Do you want to use CSS variables for colors? › no / yes
 ```
 
-### Fonts
-
-We use <Link href="https://rsms.me/inter/">Inter</Link> 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 "@udecode/cn"
-
-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],
-      },
-    },
-  },
-}
-```
-
-### App structure
-
-Here's how we structure our Next.js apps. You can use this as a reference:
-
-```txt {7-11,15-18}
-.
-├── src
-│   ├── app
-│   │   ├── layout.tsx
-│   │   └── page.tsx
-│   │   components
-│   │   ├── ui
-│   │   │   ├── button.tsx
-│   │   │   ├── dropdown-menu.tsx
-│   │   │   ├── paragraph-element.tsx
-│   │   │   └── ...
-│   │   ├── main-nav.tsx
-│   │   ├── page-header.tsx
-│   │   └── ...
-│   │   styles
-│   │   └── globals.css
-├── next.config.js
-├── package.json
-├── postcss.config.js
-├── tailwind.config.js
-└── tsconfig.json
-```
-
-- We place the UI components in the `components/ui` folder. If you already have one and want to keep them separated, you could use `components/plate-ui`.
-- The rest of the components such as `<PageHeader />` and `<MainNav />` are placed in the `components` folder.
-- The `styles` folder contains the global CSS.
-
 ### Add TooltipProvider
 
 Wrap your editor with `TooltipProvider`. Here's an example:

diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/docs/components/installation/vite.mdx
@@ -23,21 +23,47 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-### Edit tsconfig.json
+### Edit tsconfig.json file
 
-Add the following code to the `tsconfig.json` file to resolve paths:
+The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
+Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
+`tsconfig.app.json` files:
 
-```bash {4-9} showLineNumbers
+```ts {11-16} showLineNumbers
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+### Edit tsconfig.app.json file
+
+Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:
+
+```ts {4-9} showLineNumbers
 {
   "compilerOptions": {
-    // ...
+    // ... existing compilerOptions ...
     "baseUrl": ".",
     "paths": {
       "@/*": [
         "./src/*"
       ]
     }
-    // ...
+    // ... rest of the file ...
   }
 }
 ```
@@ -68,7 +94,7 @@ export default defineConfig({
 
 ### Run the CLI
 
-Run the `plate-ui` init command to setup your project:
+Run `@udecode/plate-ui` init command to setup your project:
 
 ```bash
 npx @udecode/plate-ui@latest init
@@ -81,13 +107,7 @@ You will be asked a few questions to configure `plate-components.json`:
 ```txt showLineNumbers
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
-Where is your global CSS file? › › src/styles/globals.css
 Do you want to use CSS variables for colors? › no / yes
-Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
-Where is your tailwind.config.js located? › tailwind.config.js
-Configure the import alias for components: › @/components
-Configure the import alias for ui: › @/components/plate-ui
-Are you using React Server Components? › no / yes (no)
 ```
 
 ### Add TooltipProvider

diff --git a/apps/www/content/docs/components/theming.mdx b/apps/www/content/docs/components/theming.mdx
@@ -3,7 +3,11 @@ title: Theming
 description: Using CSS Variables or Tailwind CSS for theming.
 ---
 
-You can choose between using CSS variables or Tailwind CSS utility classes for theming.
+<Callout className="mt-6">
+WIP – We're migrating to <Link href="https://ui.shadcn.com/docs/theming">npx shadcn</Link>.
+</Callout>
+
+{/* You can choose between using CSS variables or Tailwind CSS utility classes for theming.
 
 ## Utility classes
 
@@ -185,4 +189,4 @@ You can now use the `warning` utility class in your components.
 
 We recommend using <Link href="https://www.smashingmagazine.com/2021/07/hsl-colors-css/">HSL colors</Link> for theming but you can also use other color formats if you prefer.
 
-See the <Link href="https://tailwindcss.com/docs/customizing-colors#using-css-variables">Tailwind CSS documentation</Link> for more information on using `rgb`, `rgba` or `hsl` colors.
+See the <Link href="https://tailwindcss.com/docs/customizing-colors#using-css-variables">Tailwind CSS documentation</Link> for more information on using `rgb`, `rgba` or `hsl` colors. */}
diff --git a/apps/www/contentlayer.config.js b/apps/www/contentlayer.config.js
@@ -132,7 +132,7 @@ export default makeSource({
         {
           getHighlighter: async () => {
             const theme = await loadTheme(
-              path.join(process.cwd(), '/src/lib/themes/dark.json')
+              path.join(process.cwd(), '/src/lib/highlighter-theme.json')
             );
 
             return await getHighlighter({ theme });

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -149,7 +149,7 @@
     "react-dom": "^18.3.1",
     "react-lite-youtube-embed": "^2.4.0",
     "react-markdown": "9.0.1",
-    "react-resizable-panels": "^0.0.55",
+    "react-resizable-panels": "^2.0.22",
     "react-syntax-highlighter": "^15.5.0",
     "react-tweet": "^3.2.1",
     "react-wrap-balancer": "^1.1.1",
@@ -165,7 +165,7 @@
     "ts-morph": "^22.0.0",
     "unist-builder": "4.0.0",
     "unist-util-visit": "^5.0.0",
-    "vaul": "^0.9.2"
+    "vaul": "0.9.0"
   },
   "devDependencies": {
     "@shikijs/compat": "^1.17.5",