Simma Lugnt React CLI - Modern code generation tool for React and Storyblok
npm install @simmalugnt-se/next-cliA modern code generation CLI tool for React projects with Storyblok CMS integration. Built with TypeScript and featuring an improved developer experience.
- ๐ 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
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.
`bash
sl-create component Buttonor with alias
sl-create c Button
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 HeroWithout 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 ArticleWith custom fields
sl-create post-type Product --fields name price description category
`$3
`bash
sl-create context Theme
or with alias
sl-create x ThemeWithout 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 trueCommand 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 generationCustom 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 templatesTemplate variables available:
-
{{name}} - Original name
- {{pascalCase}} - PascalCase version
- {{camelCase}} - camelCase version
- {{kebabCase}} - kebab-case version
- {{snakeCase}} - snake_case version
- {{titleCase}} - Title Case versionDevelopment
$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`)ISC