@casar/ui-kit
v4.2.4
Published
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 outr
Downloads
189
Readme
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:
- Clone o repositório:
git clone [email protected]:casarcom2017/casar-ui-kit.git
- Navegue até o diretório do projeto:
cd casar-ui-kit
- 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:
- Instale essa lib como uma dependência em seu projeto React:
npm install --save @casar/ui-kit
- Importe o componente desejado em seu arquivo JavaScript ou TypeScript:
import { Componente } from '@casar/ui-kit'
- 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:
Crie o componente na pasta src/components/nome-do-componente/index.tsx.
Adicione uma história para o componente na pasta src/components/nome-do-componente/nome-do-componente.stories.ts.
Execute o Storybook localmente para visualizar o novo componente e suas histórias.
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.