@casar/ui-kit v4.4.0

Sobre o Projeto

Este projeto é uma biblioteca de componentes React desenvolvida com Tailwind CSS para estilos, Storybook para documentação interativa e TypeScript para tipagem estática. Ele fornece uma coleção de componentes reutilizáveis que podem ser integrados em outros projetos.

Como Instalar o Projeto

Para instalar o projeto, siga estas etapas:

1. Clone o repositório:

git clone git@bitbucket.org:casarcom2017/casar-ui-kit.git

2. Navegue até o diretório do projeto:

cd casar-ui-kit

3. Instale as dependências:

npm install

Como Importar um Componente no Meu Projeto?

Para importar um componente desse pacote de componentes em seu próprio projeto React:

1. Instale essa lib como uma dependência em seu projeto React:

npm install --save @casar/ui-kit

2. Importe o componente desejado em seu arquivo JavaScript ou TypeScript:

import { Componente } from '@casar/ui-kit'

3. Use o componente em seu código conforme necessário:

<Componente propriedade='valor' />

Como Funciona o Storybook

O Storybook é uma ferramenta de código aberto para desenvolvimento de componentes de UI. Ele permite criar, documentar e visualizar componentes isoladamente em diferentes estados e variações de forma interativa e rápida.

Para iniciar o Storybook, execute o seguinte comando no diretório do seu projeto:

npm run storybook

Isso iniciará o servidor do Storybook, que será acessível no navegador. Você poderá visualizar e interagir com os componentes em diferentes estados e configurações, facilitando o desenvolvimento e teste dos mesmos.

Adicionando Novos Componentes

Para adicionar um novo componente ao Storybook:

1. Crie o componente na pasta src/components/nome-do-componente/index.tsx.

2. Adicione uma história para o componente na pasta src/components/nome-do-componente/nome-do-componente.stories.ts.

3. Execute o Storybook localmente para visualizar o novo componente e suas histórias.

4. Commit e envie as alterações para o repositório.

Obs: Se tiver alguma dúvida em relação à configuração da história, acesse a documentação do Storybook.