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:

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

Or install globally:

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

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

npx storybook@latest init --yes

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

Usage

Create a Component

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)

Create a Storyblok Blok

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

Create a Post Type

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

Create a React Context

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:

{
  "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:

sl-create init

Component Defaults

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

Global Options

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

Component Options

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

Blok Options

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

Context Options

• -d, --dir <directory> - 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:

   {
     "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

Building

npm run build

Development Mode

npm run dev

Testing

npm test

Migration from v2.0

Breaking Changes

1. Command Structure: Old flag-based commands (-c, -b, -p) are replaced with subcommands

   # Old
   npx sl-create -c Button
   
   # New
   npx sl-create component Button

2. Component Structure: Components are now generated in folders

   # Old: src/components/Button.tsx
   # New: src/components/Button/index.tsx

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

New Features

• 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