Sync shadcn

.changeset/soft-zebras-camp.md

@@ -0,0 +1,6 @@
+---
+"@udecode/plate-ui": minor
+---
+
+- add support for `plate-components.json` to avoid conflict with shadcn's `components.json`. If `plate-components.json` does not exist, `components.json` will be used.
+- add support for custom ui dir in `components.json`: use `aliases > plate-ui`.

apps/www/content/docs/components/changelog.mdx

@@ -10,6 +10,11 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## January 2024 #7
 
+### January 11 #7.4
+
+- add support for custom ui dir in `components.json`
+- add support for `plate-components.json` to avoid conflict with shadcn's `components.json`
+
 ### January 9 #7.3
 
 - `toolbar`

apps/www/content/docs/components/cli.mdx

@@ -13,15 +13,17 @@ 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 `components.json`:
+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/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
 ```
 

apps/www/content/docs/components/components-json.mdx

@@ -1,31 +1,33 @@
 ---
-title: components.json
+title: plate-components.json
 description: Configuration for your project.
 ---
 
-The `components.json` file holds configuration for your project.
+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.
 
 <Callout className="mt-6">
-  Note: The `components.json` file is optional and **only required if you're
+  Note: The `plate-components.json` file is optional and **only required if you're
   using the CLI** to add components to your project. If you're using the copy
   and paste method, you don't need this file.
 </Callout>
 
-You can create a `components.json` file in your project by running the following command:
+You can create a `plate-components.json` file in your project by running the following command:
 
 ```bash
 npx @udecode/plate-ui@latest init
 ```
 
+Or you could extend [shadcn's `components.json`](https://ui.shadcn.com/docs/components-json) if you don't have any conflict.
+
 See the <Link href="/docs/components/cli">CLI section</Link> for more information.
 
 ## $schema
 
-You can see the JSON Schema for `components.json` [here](https://platejs.org/schema.json).
+You can see the JSON Schema for `plate-components.json` [here](https://platejs.org/schema.json).
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "$schema": "https://platejs.org/schema.json"
 }
@@ -35,7 +37,7 @@ You can see the JSON Schema for `components.json` [here](https://platejs.org/sch
 
 The style for your components. **This cannot be changed after initialization.**
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "style": "default"
 }
@@ -51,7 +53,7 @@ See the <Link href="/docs/installation">installation section</Link> for how to s
 
 Path to where your `tailwind.config.js` file is located.
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "tailwind": {
     "config": "tailwind.config.js" | "tailwind.config.ts"
@@ -63,7 +65,7 @@ Path to where your `tailwind.config.js` file is located.
 
 Path to the CSS file that imports Tailwind CSS into your project.
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "tailwind": {
     "css": "src/styles/globals.css"
@@ -75,7 +77,7 @@ Path to the CSS file that imports Tailwind CSS into your project.
 
 This is used to generate the default color palette for your components. **This cannot be changed after initialization.**
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "tailwind": {
     "baseColor": "slate" | "gray" | "neutral" | "stone" | "zinc"
@@ -89,7 +91,7 @@ You can choose between using CSS variables or Tailwind CSS utility classes for t
 
 To use utility classes for theming set `tailwind.cssVariables` to `false`. For CSS variables, set `tailwind.cssVariables` to `true`.
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "tailwind": {
     "cssVariables": `true` | `false`
@@ -105,7 +107,7 @@ For more information, see the <Link href="/docs/theming">theming docs</Link>.
 
 The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "tailwind": {
     "prefix": "tw-"
@@ -119,7 +121,7 @@ Whether or not to enable support for React Server Components.
 
 The CLI automatically adds a `use client` directive to client components when set to `true`.
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "rsc": `true` | `false`
 }
@@ -136,26 +138,29 @@ Path aliases have to be set up in your `tsconfig.json` file.
   under `paths` in your `tsconfig.json` file.
 </Callout>
 
-### aliases.utils
+### aliases.components
 
-Import alias for your utility functions.
+Import alias for your components.
 
-```json title="components.json"
+```json title="plate-components.json"
 {
   "aliases": {
-    "utils": "@udecode/cn"
+    "components": "@/components"
   }
 }
 ```
 
-### aliases.components
 
-Import alias for your components.
+### aliases.plate-ui
+
+Import alias for `plate-ui` components. If not defined, uses `aliases.ui`, or `aliases.components`. 
 
-```json title="components.json"
+The CLI will use this value to determine where to place your UI components. Use this config if you want to customize the installation directory for your UI components.
+
+```json title="plate-components.json"
 {
   "aliases": {
-    "components": "@/components"
+    "plate-ui": "@/components/plate-ui"
   }
 }
 ```

apps/www/content/docs/components/installation/next.mdx

@@ -25,17 +25,19 @@ npx create-next-app@latest my-app --typescript --tailwind --eslint
 npx @udecode/plate-ui@latest init
 ```
 
-### Configure components.json
+### Configure plate-components.json
 
-You will be asked a few questions to configure `components.json`:
+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/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
 ```
 

apps/www/content/docs/components/installation/vite.mdx

@@ -74,17 +74,19 @@ Run the `plate-ui` init command to setup your project:
 npx @udecode/plate-ui@latest init
 ```
 
-### Configure components.json
+### Configure plate-components.json
 
-You will be asked a few questions to configure `components.json`:
+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)
 ```
 

apps/www/content/docs/components/theming.mdx

@@ -11,9 +11,9 @@ You can choose between using CSS variables or Tailwind CSS utility classes for t
 <div className="bg-slate-950 dark:bg-white" />
 ```
 
-To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
+To use utility classes for theming set `tailwind.cssVariables` to `false` in your `plate-components.json` file.
 
-```json {8} title="components.json"
+```json {8} title="plate-components.json"
 {
   "style": "default",
   "rsc": true,
@@ -36,9 +36,9 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you
 <div className="bg-background text-foreground" />
 ```
 
-To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
+To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `plate-components.json` file.
 
-```json {8} title="components.json"
+```json {8} title="plate-components.json"
 {
   "style": "default",
   "rsc": true,

apps/www/public/schema.json

@@ -20,6 +20,9 @@
         },
         "cssVariables": {
           "type": "boolean"
+        },
+        "prefix": {
+          "type": "string"
         }
       },
       "required": ["config", "css", "baseColor", "cssVariables"]
@@ -32,6 +35,12 @@
       "properties": {
         "components": {
           "type": "string"
+        },
+        "ui": {
+          "type": "string"
+        },
+        "plate-ui": {
+          "type": "string"
         }
       },
       "required": ["components"]

apps/www/src/components/command-menu.tsx

@@ -108,7 +108,16 @@ export function CommandMenu({ ...props }: DialogProps) {
 
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+      if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return;
+        }
+
         e.preventDefault();
         setOpen((_open) => !_open);
       }

apps/www/src/components/mobile-nav.tsx

@@ -80,6 +80,11 @@ export function MobileNav() {
                     onOpenChange={setOpen}
                   >
                     {item.title}
+                    {item.label && (
+                      <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                        {item.label}
+                      </span>
+                    )}
                   </MobileLink>
                 )
               );
@@ -100,6 +105,11 @@ export function MobileNav() {
                             className="text-muted-foreground"
                           >
                             {_item.title}
+                            {item.label && (
+                              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                                {item.label}
+                              </span>
+                            )}
                           </MobileLink>
                         ) : (
                           _item.title

config/eslint/bases/unicorn.cjs

@@ -2,6 +2,7 @@ module.exports = {
   extends: ['plugin:unicorn/recommended'],
   plugins: ['unicorn'],
   rules: {
+    'unicorn/prefer-module': 'off',
     'unicorn/consistent-destructuring': 'off',
     'unicorn/consistent-function-scoping': [
       'error',

packages/cli/src/commands/add.ts

@@ -61,7 +61,7 @@ export const add = new Command()
         logger.warn(
           `Configuration is missing. Please run ${chalk.green(
             `init`
-          )} to create a components.json file.`
+          )} to create a plate-components.json file.`
         );
         process.exit(1);
       }

packages/cli/src/commands/diff.ts

@@ -55,7 +55,7 @@ export const diff = new Command()
         logger.warn(
           `Configuration is missing. Please run ${chalk.green(
             `init`
-          )} to create a components.json file.`
+          )} to create a plate-components.json file.`
         );
         process.exit(1);
       }

packages/cli/src/commands/init.ts

@@ -12,6 +12,7 @@ import * as z from 'zod';
 
 import {
   DEFAULT_COMPONENTS,
+  DEFAULT_PLATE_UI,
   DEFAULT_TAILWIND_CONFIG,
   DEFAULT_TAILWIND_CSS,
   getConfig,
@@ -145,6 +146,12 @@ export async function promptForConfig(
       message: `Configure the import alias for ${highlight('components')}:`,
       initial: defaultConfig?.aliases['components'] ?? DEFAULT_COMPONENTS,
     },
+    {
+      type: 'text',
+      name: 'plate-ui',
+      message: `Configure the import alias for ${highlight('plate-ui')}:`,
+      initial: defaultConfig?.aliases['plate-ui'] ?? DEFAULT_PLATE_UI,
+    },
     {
       type: 'toggle',
       name: 'rsc',
@@ -169,6 +176,7 @@ export async function promptForConfig(
     tsx: true,
     aliases: {
       components: options.components,
+      'plate-ui': options['plate-ui'],
     },
   });
 
@@ -177,7 +185,7 @@ export async function promptForConfig(
       type: 'confirm',
       name: 'proceed',
       message: `Write configuration to ${highlight(
-        'components.json'
+        'plate-components.json'
       )}. Proceed?`,
       initial: true,
     });
@@ -189,8 +197,8 @@ export async function promptForConfig(
 
   // Write to file.
   logger.info('');
-  const spinner = ora(`Writing components.json...`).start();
-  const targetPath = path.resolve(cwd, 'components.json');
+  const spinner = ora(`Writing plate-components.json...`).start();
+  const targetPath = path.resolve(cwd, 'plate-components.json');
   await fs.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8');
   spinner.succeed();