WARNING

This package is under development and may have unresolved issues. Please be aware that it might not be fully stable yet.

Snap Component

Snap component is a CLI tool to quicly create react's components with support to styles, storybook and tests. This package is thinked to your quaility of life while creating components

Instalation

1npm i -D snap-component

or

1pnpm i -D snap-component

Requeriments

Before using snap component, you must set up a snap-component.config.json file in the root of your project

1{
2    "language": "ts",
3    "outputDir": "src/components",
4    "cssFramework": "styled-components",
5    "test": "jest",
6    "useStorybook": true
7}

Configuration

• language: Choose the language (e.g,'ts','js').
• outputDir: Defines the directory where the component's generated source code and associated files will be placed after creation.(default :src/components)
• cssFramework: Choose the CSS framework (e.g., styled-components,css).
• test: framework for test. for now, only jest is availible
• useStorybook: Enables or disables the creation of Storybook files.

Usage

First of all, add the script to your package.json

1{ "snap-component": "snap-component snap-component" }

Using npm

1npm run snap-component ~componentName~

Using pnpm

1pnpm snap-component  ~componentName~

Directory Structure Created

• src/components/<component-name>/
  • index.tsx - The main component file.
  • index.stories.tsx - Storybook story file.
  • styles.ts - Styles file.
  • index.test.tsx - Unit tests file.

Output Generic Files Created

React Component

1'use client'
2
3import * as Styled from './styles'
4
5export type SnapComponentProps = {
6  name: string,
7}
8
9export const SnapComponent = ({ name }: SnapComponentProps) => {
10  return <Styled.Wrapper>{name}</Styled.Wrapper>
11}

Storybook Component

1
2import type { Meta, StoryObj } from '@storybook/react'
3import { SnapComponent } from '.'
4
5const meta = {
6  title: 'Component/SnapComponent',
7  component: SnapComponent,
8  parameters: {
9    layout: 'centered',
10  },
11  tags: ['autodocs'],
12  argTypes: {
13    name: {
14      control: 'text',
15      description: 'description',
16    },
17  },
18} satisfies Meta<typeof snap-component>
19
20export default meta
21
22type Story = StoryObj<typeof meta>
23
24export const Default: Story = {
25  args: { name: 'preset-story' },
26}
27

Test Component

1
2import { render } from '@testing-library/react'
3import { snapComponent } from '.'
4
5describe('snap-component', () => {
6  it('should render the snap-component', () => {
7    const { getByText } = render(<SnapComponent  name={'test'}/>)
8
9    const component = getByText('test')
10
11    expect(component).toBeInTheDocument()
12  })
13})
14

Styled Component

1'use client'
2
3import styled, { css } from 'styled-components'
4
5export const Wrapper = styled.div`
6    ${({ theme }) => css``}
7`

Especific Component

This command will generate a well-designed heading with:

Tests: Comprehensive Jest tests. Styles: Styled-components for consistent and modular styling. Props: Specific props tailored for this component.

Component Name	Language (TS/JS)	Test	CSS Framework (CSS/Styled-components)	Storybook
heading	both	only Jest	Styled-components	Yes
tooltip	both	only Jest	both	Yes

example

1pnpm snap-component <one of the component name listed above>

Contribution

If you would like to contribute to Snap Component, feel free to fork the repository and submit pull requests. All contributions are welcome

LICENSE

This project is licensed under the MIT License. See the LICENSE file for details.