🎚️Config

Make you templates smart

Config file contains next parameters:

• folderPath

• templatesFolder

• multiProject

• skipFinalStep

• checkExistenceOnCreate

• templates

• processFileAndFolderName

• placeholders

• afterCreation

folderPath

Root directory to place you components, or array of paths

Default: src/

templatesFolder

Path to your own components templates

Default: templates

multiProject

Allows you to set up config for mono-repository with several projects

Default: false

skipFinalStep

Allows you to switch off last checking step

Default: false

checkExistenceOnCreate

Allows you to switch on check component existence on create to avoid replacing

Default: false

templates

Object with structure of your component, or array of objects.

Example:

{
    index: {
        name: 'index.ts',
        file: 'index.tmp'
    },
    component: {
        name: '[name].tsx',
        file: [
            { name: 'fc.tmp', description: 'Functional component' },
            { name: 'class.tmp', description: 'Class component' }
        ]
    },
    stories: {
        name: '[name].stories.tsx',
        file: 'stories.tmp',
        optional: true,
        default: false
    }
}

Full description can be found on templates page

processFileAndFolderName

String or function which allows you to remap your component name to folder-name and file-name prefix

Default: PascalCase

Possible values:

• camelCase

• PascalCase

• snake_case

• dash-case

• (name: string, parts: string[], isFolder: boolean) => string

Example:

{
    ...config,
    processFileAndFolderName: (name, parts, isFolder) => 
        isFolder ? name : parts.map((part) => part.toLowerCase()).join('-')
}

Here we has PascalCase for folders and dash-case for files

placeholders

List of placeholders which you can use to build your own component template

Default: #NAME# for a component name #STYLE# for css-module import #STORY_PATH# for storybook title

More info on placeholder page

afterCreation

Object with scripts to process you file after creation

Default: undefined

Example:

{
    ...config,
    afterCreation: {                
        prettier: {
            extensions: ['.ts', '.tsx'], // optional
            cmd: 'prettier --write [filepath]'
        }
    }
}

The most common case for script is to add files to git. It can be done like that:

afterCreation: {
    git: {
        cmd: 'git add [filepath]'
    }
}