component-boilerplater
v1.1.2
Published
Generating component, test, stories, and index files automatically.
Downloads
39
Readme
🚀 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',
}