A script to generate a folder named as your component, containing a minimalist react-typescript (.tsx) template component with its jest test file, types file, stories file (storybook.js), and styles file (react-jss). Develop faster by creating all you need for your new component at once.
└── my-component
│
└── MyComponent.tsx
└── MyComponent.types.tsx
└── MyComponent.styles.tsx
└── MyComponent.test.tsx
└── MyComponent.stories.tsx
└── index.ts
npm i -D @tonisanchez.dev/init-component
Alternatively
yarn add -D @tonisanchez.dev/init-component
Execute the script on your package.json like this:
// package.json
...
"component": "node node_modules/@tonisanchez.dev/init-component/src 'YOUR_COMPONENTS_FOLDER_DIR'",
...
Everytime you call this script a new folder will be created containing 6 files:
- Types file with a minimal type declaration for props.
- Declaration of styles with a basic react-jss configuration.
- Stories file for storybook.js code-level documentation.
- Test file with a pre-built test that is passing.
- Component file that renders a minimalistic component importing above files.
- An index to use it optionally for repositories with an folder structure of "index" files.
Notice that the folder created containing the above files will be named after the component name you specify as first parameter. See next section.
Using script as shown above, you can specify the name of your component with a following parameter as shown below:
npm run component MyComponent
Alternatively
yarn component MyComponent
You can specify a subfolder with the second parameter. This is specially useful for projects that follows atomic design principles. With the second optional parameter you can specify the level of the component represented in the scale [atoms, molecules, organisms, templates, pages].
Assuming the following in your package.json
...
"component": "node '@tonisanchez.dev/init-component' './src/components'"
...
And then running the script below
yarn run component MyComponent organisms
Will generate the next content
src
│
└───components
│ │
│ └── ...
│ │
│ └── organisms
│ │
│ └── my-component
│ │
│ └── MyComponent.tsx
│ └── MyComponent.types.tsx
│ └── MyComponent.styles.tsx
│ └── MyComponent.test.tsx
│ └── MyComponent.stories.tsx
│ └── index.ts
└─...
import React from 'react'
import { useStyles } from './styles'
import { MyComponentProps } from './types'
const MyComponent = ({ children }: MyComponentProps) => {
const classes = useStyles()
return (
<button className={classes.myButton}>
<span className={classes.myLabel}>{children}</span>
</button>
)
}
export default MyComponent
export type MyComponentProps = {
children: string
}
import { createUseStyles } from 'react-jss'
export const useStyles = createUseStyles({
myButton: {
color: 'green',
margin: {
top: 5,
right: 0,
bottom: 0,
left: '1rem'
},
'& span': {
fontWeight: 'bold'
}
},
myLabel: {
fontStyle: 'italic'
}
})
import React from 'react'
import { render, screen } from '@testing-library/react'
import MyComponent from './component'
describe('Block of tests', () => {
test('renders children text', () => {
render(<MyComponent>Hola</MyComponent>)
const demoElement = screen.getByText(/Hola/i)
expect(demoElement).toBeInTheDocument()
})
})
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import MyComponent from '.';
export default {
title: 'Components/MyComponent',
component: MyComponent,
} as ComponentMeta<typeof MyComponent>;
const Template: ComponentStory<typeof MyComponent> = (args: any) => <MyComponent {...args} />;
export const Primary = Template.bind({});
/* Primary.parameters = {
backgrounds: { default: 'dark' }
};
Primary.args = {
label: 'MyComponent',
variant: MyComponentVariants.primary
};
export const Secondary = Template.bind({});
Secondary.args = {
label: 'MyComponent',
variant: MyComponentVariants.secondary
}; */
I will be publishing newer versions and extend this simple and small tool. Meanwhile, I have more interesting projects on my Github @TonySapa or site tonisanchez.dev