cli

Author: zbeyens

CONTRIBUTING.md

@@ -111,7 +111,7 @@ When adding or modifying components, please ensure that you update the documenta
 
 ## CLI
 
-The `@udecode/plate-ui` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://platejs.org/docs/components/cli).
+The `shadcx` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://platejs.org/docs/components/cli).
 
 Any changes to the CLI should be made in the `packages/plate-ui` directory. If you can, it would be great if you could add tests for your changes.
 

apps/www/content/docs/components/align-dropdown-menu.mdx

@@ -23,7 +23,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add align-dropdown-menu
+npx shadcx@latest add align-dropdown-menu -r plate-ui
 ```
 
 </TabsContent>

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

@@ -18,7 +18,7 @@ links:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add avatar
+npx shadcx@latest add avatar -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/blockquote-element.mdx

@@ -18,7 +18,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add blockquote-element
+npx shadcx@latest add blockquote-element -r plate-ui
 ```
 
 </TabsContent>

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

@@ -17,7 +17,7 @@ links:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add button
+npx shadcx@latest add button -r plate-ui
 ```
 
 </TabsContent>

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

@@ -18,7 +18,7 @@ links:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add calendar
+npx shadcx@latest add calendar -r plate-ui
 ```
 
 </TabsContent>

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

@@ -18,7 +18,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add caption
+npx shadcx@latest add caption -r plate-ui
 ```
 
 </TabsContent>

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

@@ -11,6 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## October 2024 #15
 
+### October 14 #15.3
+
+- New cli: `shadcx`. See [CLI](/docs/components/cli) and [components.json](/docs/components/components-json).
+
 ### October 10 #15.3
 
 - `dropdown-menu`(`DropdownMenuContent`): prevent default on `onCloseAutoFocus`

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

@@ -17,7 +17,7 @@ links:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add checkbox
+npx shadcx@latest add checkbox -r plate-ui
 ```
 
 </TabsContent>

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

@@ -1,93 +1,55 @@
 ---
 title: CLI
-description: Use the CLI to add components to your project.
+description: Use the CLI to add Plate UI 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.
+Use the `init` command to initialize configuration and dependencies for a new project with Plate UI.
 
 The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
 
 ```bash
-npx @udecode/plate-ui@latest init
+npx shadcx@latest init -u https://platejs.org/r -n plate-ui
+```
+
+If you also want to use <Link href="https://ui.shadcn.com/">shadcn/ui</Link> in your project, you can use the following command:
+
+```bash
+npx shadcx@latest init
+npx shadcx@latest init -u https://platejs.org/r -n plate-ui
 ```
 
 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
 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: shadcn init [options] [components...]
+Usage: shadcx init [options]
 
 initialize your project and install dependencies
 
-Arguments:
-  components         the components to add or a url to the component.
-
 Options:
-  -d, --defaults    use default values i.e new-york, zinc and css variables. (default: false)
+  -d, --defaults    use default values i.e slate 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
+  -u, --url <url>   custom registry URL. (default: https://platejs.org/r)
+  -n, --name <name> registry name. (default: plate-ui)
+  -h, --help        display help for command
 ```
 
 ## add
 
-Use the `add` command to add components and dependencies to your project.
+Use the `add` command to add Plate UI components and dependencies to your project.
 
 ```bash
-npx @udecode/plate-ui@latest add [component]
+npx shadcx@latest add [component]
 ```
 
 You will be presented with a list of components to choose from:
@@ -107,73 +69,63 @@ Enter to submit.
 ◯  combobox
 ```
 
-<Callout className="my-4">
-  Pick the components you want in our <Link href="/?builder=true" target="_blank">interactive builder</Link> to generate the bulk add command to run.
-</Callout>
-
 ### Options
 
 ```txt
-Usage: @udecode/plate-ui add [options] [components...]
+Usage: shadcx add [options] [components...]
 
 add a component to your project
 
 Arguments:
-  components         the components to add
+  components         the components to add.
 
 Options:
-  -y, --yes          skip confirmation prompt. (default: false)
-  -o, --overwrite    overwrite existing files. (default: false)
-  -c, --cwd <cwd>    the working directory. defaults to the current directory.
-  -p, --path <path>  the path to add the component to.
-  -h, --help         display help for command
+  -y, --yes         skip confirmation prompt. (default: false)
+  -o, --overwrite   overwrite existing files. (default: false)
+  -c, --cwd <cwd>   the working directory. defaults to the current directory.
+  -p, --path <path> the path to add the component to.
+  -h, --help        display help for command
 ```
 
-## diff (experimental)
-
-You can use the diff command to check for updates against the registry.
+## Monorepo
 
-Run the following command to get a list of components that have updates available:
+In a monorepo, you can specify the path to your workspace with the `-c` or `--cwd` option.
 
 ```bash
-npx @udecode/plate-ui@latest diff
+npx shadcx@latest init -u https://platejs.org/r -n plate-ui -c ./apps/www
 ```
 
-```txt
-The following components have updates available:
-- blockquote-element
-  - /path/to/my-app/components/ui/blockquote-element.tsx
-- button
-  - /path/to/my-app/components/ui/button.tsx
-- combobox
-  - /path/to/my-app/components/ui/combobox.ts
-```
-
-Then run `diff [component]` to see the changes:
+or
 
 ```bash
-npx @udecode/plate-ui@latest diff blockquote-element
+npx shadcx@latest add align-dropdown-menu -c ./apps/www
 ```
 
-```diff /pl-6/
-      ref={ref}
-    - className={cn('my-1 border-l-2 pl-4 italic', className)}
-    + className={cn('my-1 border-l-2 pl-6 italic', className)}
-      {...props}
+## Example components.json
+
+Here's an example `components.json` file configured for <Link href="https://ui.shadcn.com/">shadcn/ui</Link> and Plate UI:
+
+```json
+{
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  },
+  "registries": {
+    "plate-ui": {
+      "url": "https://platejs.org/r",
+      "style": "default",
+      "aliases": {
+        "ui": "@/components/plate-ui"
+      }
+    }
+  }
+}
 ```
-
-### Options
-
-```txt
-Usage: @udecode/plate-ui diff [options] [component]
-
-check for updates against the registry
-
-Arguments:
-  component        the component name
-
-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
-``` */}

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

@@ -18,7 +18,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add cloud
+npx shadcx@latest add cloud -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/code-block-element.mdx

@@ -20,7 +20,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add code-block-element
+npx shadcx@latest add code-block-element -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/code-leaf.mdx

@@ -18,7 +18,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add code-leaf
+npx shadcx@latest add code-leaf -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/code-line-element.mdx

@@ -18,7 +18,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add code-line-element
+npx shadcx@latest add code-line-element -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/code-syntax-leaf.mdx

@@ -18,7 +18,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add code-syntax-leaf
+npx shadcx@latest add code-syntax-leaf -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/color-dropdown-menu.mdx

@@ -28,7 +28,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add color-dropdown-menu
+npx shadcx@latest add color-dropdown-menu -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/column-element.mdx

@@ -20,7 +20,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add column-element
+npx shadcx@latest add column-element -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/column-group-element.mdx

@@ -20,7 +20,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add column-group-element
+npx shadcx@latest add column-group-element -r plate-ui
 ```
 
 </TabsContent>

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

@@ -17,7 +17,7 @@ links:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add command
+npx shadcx@latest add command -r plate-ui
 ```
 
 </TabsContent>

apps/www/content/docs/components/comment-leaf.mdx

@@ -18,7 +18,7 @@ docs:
 <TabsContent value="cli">
 
 ```bash
-npx @udecode/plate-ui@latest add comment-leaf
+npx shadcx@latest add comment-leaf -r plate-ui
 ```
 
 </TabsContent>