CookBook SB

O cookbook-sb é uma biblioteca de componentes React desenvolvida pela Autoforce para simplificar e acelerar a criação de layouts e interfaces consistentes. Esta oferece um conjunto diversificado de componentes prontos para uso, permitindo que desenvolvedores construam rapidamente interfaces de usuário elegantes e responsivas.

Rodando localmente

Clone o projeto

  git clone [email protected]:autoforce/cookbook-sb.git

Entre no diretório do projeto

  cd cookbook-sb

Instale as dependências

  yarn

Inicie o servidor

  yarn storybook

Exemplo de construção de um componente

Criar um arquivo para o componente NomeDoComponente.tsx

export const NomeDoComponente = (): JSX.Element => {
  return (
    <h2>Hello World!</h2>
  )
}

Criar um arquivo para as stories NomeDoComponente.stories.tsx

import { Meta } from '@storybook/react'
import { NomeDoComponente } from './NomeDoComponente'
import { JSX } from 'react/jsx-runtime'

export default {
  title: 'Components/NomeDoComponente',
  component: NomeDoComponente
} as Meta

const Template = (args: JSX.IntrinsicAttributes) => (
  <NomeDoComponente {...args} />
)

export const Default = Template.bind({})

Criar um arquivo para os testes unitários NomeDoComponente.test.tsx

import { render } from '@testing-library/react'
import { NomeDoComponente } from './NomeDoComponente'
import '@testing-library/jest-dom/extend-expect'

describe('NomeDoComponente component', () => {
  it('renders "Hello World!" text', () => {
    const { getByText } = render(<HelloWorld />)

    const helloWorldElement = getByText('Hello World!')
    expect(helloWorldElement).toBeInTheDocument()
  })
})

Rodando os testes

Para rodar os testes, rode o seguinte comando

  npm run test

Processo de Lançamento de Novas Releases

Para garantir um lançamento consistente e organizado das novas versões, seguimos um processo estruturado:

Definição da Versão:

• Cada nova versão (por exemplo, 1.0.2) é planejada antecipadamente, identificando as melhorias e correções a serem incluídas.

Criação da Branch Específica:

• Uma branch é criada a partir da main, nomeada de acordo com o número ou nome da release (ex: release-1.0.2).

Desenvolvimento das Funcionalidades:

• Todos os novos recursos são desenvolvidos e os pull requests são abertos apontando para a branch da release correspondente.

Preparação da Versão:

• A versão no arquivo package.json é atualizada para refletir a nova release.

Testes e Revisão:

• A release é rigorosamente testada para assegurar o funcionamento correto das funcionalidades incluídas.

Merge na Branch main:

• Após a aprovação dos testes, as alterações são mescladas na branch main.

Lançamento no NPM:

• A versão atualizada é lançada no NPM, disponibilizando as novas funcionalidades para os usuários.

Este procedimento garante que cada nova versão seja cuidadosamente preparada, testada e lançada, mantendo a qualidade do projeto e proporcionando uma experiência estável para os usuários.

Documentações úteis

• Storybook
• Tailwind
• Rollup