poc-mpc-figma-tailwind

Este template irá ajudá-lo a inicializar o projeto de design system.

Stack

• Vue 3 + Composition API` – Framework reativo, com componetização e de simples aprendizado
• TypeScript – Tipagem estática
• Tailwind + Estilização dos componentes
• Vitest + Vue Test Utils - Testes
• Vite - Build
• ESLint + Prettier - Linting & Formatting
• Node 24+

Arquitetura

Ler o arquivo ARQUITETURA.md

Setup

IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Project Setup

Instalar dependências

npm install

Instalar o dot env

npm install -g dotenv-cli

Iniciar o servidor local

npm run dev

Iniciar o servidor do storybook

npm run storybook

Rodar a checagem de tipos

npm run type-check

Rodar testes

npm run test:unit

Rodar o Lint

npm run lint

Rodar o prettier

npm run format

Criação de componentes

atoms

npm run create:component Test --type atoms

molecules

npm run create:component Test --type molecules

organisms

npm run create:component Test --type organisms