@digidelv/cli

CLI tool for the DigiDelv design system - automates project initialization, component generation, theme customization, and documentation.

Installation

``bash


Install globally

npm install -g @digidelv/cli

Or use directly with npx

npx @digidelv/cli init my-app
`

Commands

$3

Initialize a new Next.js project with DigiDelv pre-configured.

Usage:
`bash
digidelv init my-app
`

Interactive Prompts:
- Project name (if not provided as argument)
- Project description (optional)
- Default theme (system/dark/light)
- Neutral color (gray/slate/sand)
- Brand color (14 preset colors including digidelv)
- Accent color (14 preset colors including digidelv)
- Border style (rounded/playful/conservative)
- Include example components (yes/no)
- Install dependencies (yes/no)

Generated Structure:
`
my-app/
├── app/
│ ├── layout.tsx # With DigiDelv providers
│ ├── page.tsx # Homepage with optional examples
│ └── globals.css # DigiDelv CSS imports
├── components/
│ └── providers.tsx # ThemeProvider wrapper
├── config/
│ └── digidelv.config.ts # Theme configuration
├── package.json
├── tsconfig.json
├── next.config.js
└── .gitignore
`

Example:
`bash


Interactive mode

digidelv init

With project name

digidelv init my-digidelv-app

Non-interactive (uses defaults)

digidelv init my-app --no-interactive
`

$3

Alias: digidelv g c [name]

Generate a new component with TypeScript, SCSS module, and MDX documentation.

Usage:
`bash
digidelv generate component MyComponent


or shorter


digidelv g c MyComponent
`

Interactive Prompts:
- Component name (if not provided as argument)
- Component category (layout/form/display/interactive/media/navigation/custom)
- Component type (client/server)
- Include variants (yes/no) → variant names (comma-separated)
- Include sizes (yes/no) → select sizes (xs/s/m/l/xl)
- Generate SCSS module (yes/no)
- Generate MDX documentation (yes/no)

Generated Files:
`
packages/core/src/components/
├── MyComponent.tsx # Component implementation
├── MyComponent.module.scss # SCSS module (optional)
└── index.ts # Updated with new export

apps/docs/src/content/digidelv/components/
└── myComponent.mdx # Documentation (optional)
`

$3

Create a custom theme with interactive color palette generation.

Usage:
`bash
digidelv theme create ocean


or shorter


digidelv theme create
`

Interactive Prompts:
- Theme name (if not provided as argument)
- Primary color (hex, e.g., #46e5e8)
- Color generation method (auto/manual)
- Preview palette in terminal (yes/no)
- Add to core package (yes/no)
- Add to function.scss for brand/accent mappings (yes/no)
- Set as default brand color (yes/no)

What it does:
- Generates 12-shade color palette from your primary color
- Creates opacity variants (15%, 30%, 50%)
- Updates scheme.scss with color definitions
- Updates function.scss with brand/accent mappings
- Updates types.ts to include new scheme
- Updates StylePanel.module.scss for theme selector UI
- Optionally sets as default in ThemeProvider

Color Palette Generation:
Uses HSL color space to generate a consistent 12-shade palette:
- 100-500: Progressively darker shades
- 600: Your input color (primary)
- 700-1200: Progressively lighter shades
- Automatic saturation adjustment for natural color progression

$3

List all available theme presets with color previews.

$3

Apply a theme to the current project.

$3

Auto-generate MDX documentation from component TypeScript file using AST parsing.

Usage:
`bash
digidelv docs generate packages/core/src/components/Button.tsx


or shorter


digidelv docs generate
`

Interactive Prompts:
- Component file path (if not provided as argument)
- Documentation template (full/minimal)
- Include live preview section (yes/no)
- Include props table (yes/no)
- Include usage examples (yes/no)

What it does:
- Parses TypeScript component file using AST
- Extracts component name and description from JSDoc
- Extracts all props with types and defaults
- Detects variants automatically
- Generates comprehensive MDX documentation
- Creates props table with type information
- Scaffolds code examples based on props

Generated Documentation Includes:
- Component overview and description
- Import statement
- Basic usage example
- Variants section (if applicable)
- Sizes section (if applicable)
- Complete props table with types and defaults
- Usage examples
- Accessibility notes
- Ref forwarding documentation

$3

Validate project structure and configuration.

$3

Check for and apply updates to @digidelv/core.

Development

$3

`bash
cd packages/cli
pnpm install
pnpm build
`

$3

`bash


Build and test locally

pnpm build
node bin/digidelv.js --help

Test init command

node bin/digidelv.js init test-project
`

$3

`
packages/cli/
├── bin/
│ └── digidelv.js # CLI entry point
├── src/
│ ├── commands/
│ │ └── init.ts # Init command implementation
│ ├── utils/
│ │ ├── logger.ts # Formatted console output
│ │ ├── files.ts # File system operations
│ │ ├── validators.ts # Input validation
│ │ ├── prompts.ts # Inquirer prompts
│ │ ├── template.ts # Handlebars processing
│ │ └── package-manager.ts # Dependency installation
│ ├── types/
│ │ └── index.ts # TypeScript interfaces
│ └── index.ts # CLI setup with Commander
├── templates/
│ └── nextjs-app/ # Next.js App Router template
│ ├── app/
│ ├── components/
│ ├── config/
│ └── *.hbs # Handlebars templates
├── package.json
├── tsconfig.json
└── README.md
`

Implementation Status

$3

- CLI infrastructure with Commander.js
- Utilities (logger, files, validators)
- Type definitions
- Command structure

$3

- digidelv init command
- Interactive prompts with Inquirer
- Handlebars template processing
- Next.js App Router templates
- DigiDelv provider setup
- Dependency installation

$3

- digidelv generate component command
- Component templates (TSX, SCSS, MDX)
- Interactive prompts with 8 configuration options
- Handlebars template engine with helpers
- Export barrel automatic updates
- Category-based organization
- Variant and size support
- Optional SCSS module generation
- Optional MDX documentation generation

$3

- digidelv theme create command
- HSL-based color palette generation (12 shades)
- Automatic saturation adjustment for natural progression
- Terminal color preview with ANSI colors
- Chroma.js for color manipulation
- SCSS token file updates (scheme.scss, function.scss)
- TypeScript type updates (types.ts)
- StylePanel.module.scss automatic updates
- ThemeProvider defaults updater
- Brand and accent function mappings
- Opacity variant generation (15%, 30%, 50%)

$3

- digidelv docs generate` command
- TypeScript AST parsing with @typescript-eslint/typescript-estree
- Component name and description extraction
- Prop extraction with types and defaults
- JSDoc comment parsing
- Variant detection from union types
- MDX template generation with Handlebars
- Props table generation with type information
- Code example scaffolding
- Support for forwardRef pattern detection
- Automatic default value extraction
- Full and minimal template options

$3

- Comprehensive testing
- CLI documentation
- Performance optimization
- npm publication

Technologies

- Commander.js - CLI framework with subcommands
- Inquirer.js - Interactive prompts
- Chalk - Terminal styling and colors
- Ora - Terminal spinners
- Handlebars - Template engine
- fs-extra - Enhanced file operations
- execa - Process execution
- TypeScript - Type-safe implementation

Contributing

See CONTRIBUTING.md for development guidelines.

License

MIT