🗂️
Component Boilerplater

Don't manually create files for React Component, one by one

Just one command, you can get Component, Test, Stories automatically.

🚀 Getting Started

01. Add Scripts

{
  //..
  "scripts": {
    //..
    "gen": "component-boilerplater"
    //..
  }
  //..
}

02. Run Command with Component Name

npm run gen <Component Name>

Configurations

Make boilerplate.config.json in your root directory.

{
  "baseDir": "/src/components", // Output directory
  "ext": "ts"                   // js | ts
}

What Can You Get?

You only need to prepare a component name for files. If you named some component 'Text', you can get below files in Text folder:

Text
├── index.ts
├── Text.tsx
├── Text.test.tsx
├── Text.stories.tsx

Preview the files with component name 'Text'

index.ts

export * from './Text'

Component

export interface TextProps {}

export default function Text({}: TextProps) {
  return <div></div>
}

Test

import { render } from '@testing-library/react'
import Text, { TextProps } from './Text'

const renderText = (props?: TextProps) => {
  return render(<Text {...props}></Text>)
}

describe('<Text/>', () => {
  test('Renders correctly', () => {})
})

Stories

import { Meta, StoryObj } from '@storybook/react'
import Text from './Text'

const meta: Meta<typeof Text> = {
  title: 'Components/Text',
  component: Text,
  tags: ['autodocs'],
}

export default meta

type Story = StoryObj<typeof Text>

/**
 * Text
 */
export const TextDefault: Story = {
  name: 'Text',
}