Pacote NPM - TSDX React com Storybook

Esse projeto é um pacote construído do 0 e publicado no NPM para todos usarem

🔨 Funcionalidades do projeto

O projeto possui 6 componentes que foram desenvolvidos com base no design da AluraBooks no Figma

AbBotao

Possui texto personalizável, tipo[primario, secundario] e onClick

AbCard

Um card simples

AbTag

Uma tag com texto personalizável

AbCampoTexto

Um label com titúlo personalizável, value(placeholder), tipo[texto, email, password, date] e onChange

AbGrupoOpcoes

3 cards com titulo, corpo e rodapé onde tem onChange
É possível determinar o padrão e muda o estilo de acordo com o selecionado

AbInputQuantidade

Possui o título quantidade, 2 botões[+ e -] e um contador
O usuário pode adicionar ou remover itens e o contador é atualizado

✔️ Técnicas e tecnologias utilizadas

• Typescript
• React
• React Hooks
• styled-components
• TSDX
• Storybook
• NPM
• GitHub Actions

💻 Para usar o pacote em seus projetos:

Comando

npm i react-alurabooks

import { ctrl + espaço } from 'react-alurabooks';

🛠️ Para abrir e rodar o projeto:

É necessário ter instalado no PC:

• node.js
• npm ou yarn

👾 TSDX

É recomendado rodar o TSDX em um terminal:

npm start # ou yarn start

📖 Storybook

Rode em outro terminal:

yarn storybook

🖌️ Exemplo para rodar o projeto:

cd example
npm i # ou yarn (para instalar dependências)
npm start # ou yarn start