feat(cli): implement modui add and modui init - #6
Open
hulk510 wants to merge 1 commit into
Open
Conversation
- Add registry build script that scans packages/registry/src/ui/** and emits per-component JSON with embedded source files (shadcn-style). - Implement `modui init`: creates components.json and installs the default theme. - Implement `modui add`: resolves registryDependencies recursively, prompts on overwrite, installs npm deps via detected package manager. - Support both URL and local-path registries for dev/testing. - Schema validation with zod, CLI structure with commander + prompts + kleur + execa.
There was a problem hiding this comment.
Pull request overview
Implements the first functional modui CLI workflow and an embedded-source registry build pipeline, enabling users to init a project (config + default theme) and add components by copying source files plus installing detected npm dependencies.
Changes:
- Add a registry build script that emits JSON artifacts with embedded
.tsx/.csscontent and derived dependency metadata. - Implement CLI registry fetching/caching + dependency resolution, plus
modui initandmodui add. - Update workspace dependencies/lockfile to include CLI/runtime dependencies (commander, prompts, execa, kleur, zod) and registry build tooling (tsx).
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds lock entries for new CLI and registry build dependencies. |
| packages/registry/scripts/build.ts | Generates embedded-source registry JSON (components, themes, index) from src/. |
| packages/registry/package.json | Adds build script using tsx and required dev deps. |
| packages/cli/src/utils/write-files.ts | Writes registry files into the user project with overwrite prompting. |
| packages/cli/src/utils/install-deps.ts | Detects package manager and installs resolved npm dependencies via execa. |
| packages/cli/src/utils/config.ts | Defines and reads/writes components.json config via zod schema. |
| packages/cli/src/registry/schema.ts | Defines registry/index/item schemas and types for validation. |
| packages/cli/src/registry/resolve.ts | Recursively resolves registryDependencies to a full install set. |
| packages/cli/src/registry/fetch.ts | Fetches registry JSON (remote or local) with an in-memory cache. |
| packages/cli/src/index.ts | Replaces manual arg parsing with commander-based init and add commands. |
| packages/cli/src/commands/init.ts | Implements modui init (config scaffolding + default theme install). |
| packages/cli/src/commands/add.ts | Implements modui add (component selection, recursive deps, file writes, installs). |
| packages/cli/package.json | Adds CLI runtime dependencies and typings for prompts. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
| }); | ||
|
|
||
| program.parseAsync(); |
Comment on lines
+28
to
+44
| let selected = names; | ||
| if (selected.length === 0) { | ||
| const index = await fetchIndex(registry); | ||
| const { picked } = await prompts({ | ||
| type: "multiselect", | ||
| name: "picked", | ||
| message: "Which components would you like to add?", | ||
| choices: index.components.map((c) => ({ title: c.name, value: c.name })), | ||
| hint: "Space to select. Enter to submit.", | ||
| instructions: false, | ||
| }); | ||
| if (!picked || picked.length === 0) { | ||
| console.log(kleur.yellow("No components selected.")); | ||
| return; | ||
| } | ||
| selected = picked; | ||
| } |
Comment on lines
+20
to
+23
| console.error( | ||
| kleur.red("components.json not found. Run `modui init` first."), | ||
| ); | ||
| process.exit(1); |
Comment on lines
+34
to
+36
| const target = resolveTarget(cwd, config, file); | ||
| const relTarget = target.replace(`${cwd}/`, ""); | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
First real implementation of the CLI.
modui add <name>now copies component source from a registry into a user's project, andmodui initscaffoldscomponents.json+ the default theme.Design
Adopts shadcn/ui's embedded-source registry model rather than fetching individual files from GitHub raw. Reasons:
What's included
packages/registry/scripts/build.ts— build script that scanssrc/ui/**andsrc/themes/**and emitsdist/registry/<name>.jsonwith embedded.tsx+.module.csscontent. Parses imports to auto-derivedependencies(npm) andregistryDependencies(other modui components).packages/cli/src/registry/— schema (zod), fetcher with in-memory cache (URL or local path), recursive dep resolver.packages/cli/src/commands/init.ts— createscomponents.json, prompts for component / theme paths, installs the default theme.packages/cli/src/commands/add.ts— fetches items, resolvesregistryDependenciesrecursively, prompts on overwrite, installs npm deps via detected package manager (pnpm / yarn / bun / npm).CLI deps
Tested
End-to-end against a local registry path:
init --yescreates config and copies themeadd input --skip-installcopies filesadd input --yesskips existing filesadd input --overwriteoverwritesadd buttonworks as a new componentFollow-ups (out of scope for this PR)
packages/registry/dist/registry)