sl-react-cli

A modern code generation CLI tool for React projects with Storyblok CMS integration. Built with TypeScript and featuring an improved developer experience.

Features

- 🚀 Modern CLI with subcommands and interactive prompts
- 📁 Folder-based components - Components are generated as folders with index.tsx for better organization
- 🎨 Multiple style options - Support for CSS, SCSS, styled-components, or no styles
- 🏗️ Storyblok integration - Generate bloks with migration files and schemas
- ⚙️ Configuration support - Use .slrc.json for project-specific settings
- 🧪 Test generation - Automatically create test files for components
- 📝 TypeScript first - Full TypeScript support with proper typing
- 🔍 Debug mode - Detailed logging for troubleshooting
- 🏃 Dry run - Preview what will be created without making changes

Installation

Install as a development dependency:

``bash
npm install -D @simmalugnt-se/next-cli
`

Or install globally:

`bash
npm install -g @simmalugnt-se/next-cli
`

If Storybook is not already installed, you can set it up with:

`bash
npx storybook@latest init --yes
`

This will automatically detect your Next.js project and install the appropriate dependencies and configuration.

Usage

$3

`bash
sl-create component Button


or with alias

sl-create c Button

With options

sl-create component Header --style scss --dir src/components/layout
`

This creates:
`
src/components/Button/
├── index.tsx # Component file
├── button.css # Style file
├── Button.test.tsx # Test file
└── Button.stories.tsx # Storybook story (if template exists)
`

$3

`bash
sl-create blok Hero


or with alias

sl-create b Hero

Without migration files

sl-create blok Feature --no-migration
`

This creates:
- Component: src/components/bloks/Hero/index.tsx
- Style file: src/components/bloks/Hero/hero.css
- Migration file: storyblok/Hero.js
- Schema file: config/storyblok/schemas/hero.json
- Updates: config/storyblok/BlokIndex.tsx

$3

`bash
sl-create post-type Article


or with alias

sl-create p Article

With custom fields

sl-create post-type Product --fields name price description category
`

$3

`bash
sl-create context Theme


or with alias

sl-create x Theme

Without provider or hook

sl-create context Auth --no-provider --no-hook
`

This creates:
`
src/components/contexts/Theme/
├── index.tsx # Context definition
├── ThemeProvider.tsx # Provider component
├── useTheme.ts # Custom hook
└── Theme.test.tsx # Test file
`

Configuration

Create a .slrc.json file in your project root:

`json
{
"componentsDir": "src/components",
"bloksDir": "src/components/bloks",
"typingsDir": "src/types",
"sbConfigDir": "config/storyblok",
"customTemplatesPath": "my-templates",
"componentDefaults": {
"withTest": true,
"withStory": true
}
}
`

Or run the init command:

`bash
sl-create init
`

$3

You can set default values for component generation in your .slrc.json:

- withTest - Whether to generate test files by default (default: true)
- withStory - Whether to generate Storybook story files by default (default: true)

These defaults can be overridden with command line flags:
- Use --no-test to skip test generation even if the default is true
- Use --no-story to skip story generation even if the default is true

Command Options

$3

- --debug - Enable debug output
- --dry - Dry run, show what would be created
- -f, --force - Overwrite existing files

$3

- -d, --dir - Target directory
- -s, --style - Style type: css, scss, styled, none
- --no-test - Skip test file generation
- --no-story - Skip Storybook story generation

$3

- -d, --dir - Target directory
- --no-migration - Skip migration file generation
- --no-schema - Skip schema generation

$3

- -d, --dir - Target directory
- --no-provider - Skip provider generation
- --no-hook - Skip hook generation

Custom Templates

You can create custom templates by specifying a customTemplatesPath in your configuration:

1. Create a templates directory in your project
2. Add it to .slrc.json:
`json
{
"customTemplatesPath": "./my-templates"
}
`
3. Create templates following the same structure as the default templates

Template variables available:
- {{name}} - Original name
- {{pascalCase}} - PascalCase version
- {{camelCase}} - camelCase version
- {{kebabCase}} - kebab-case version
- {{snakeCase}} - snake_case version
- {{titleCase}} - Title Case version

Development

$3

`bash
npm run build
`

$3

`bash
npm run dev
`

$3

`bash
npm test
`

Migration from v2.0

$3

1. Command Structure: Old flag-based commands (-c, -b, -p) are replaced with subcommands
`bash
# Old
npx sl-create -c Button

# New
npx sl-create component Button
`

2. Component Structure: Components are now generated in folders
`bash
# Old: src/components/Button.tsx
# New: src/components/Button/index.tsx
`

3. ES Modules: The package now uses ES modules instead of CommonJS

$3

- Interactive prompts when name is not provided
- Configuration file support (.slrc.json`)
- Dry run mode
- Debug mode
- Context generator
- Custom templates support
- Better error handling and validation

License

ISC