Design System CPF.CNPJ

O Design System CPF.CNPJ é uma biblioteca interativa de componentes desenvolvida para sistemas que lidam com validação e exibição de informações relacionadas a CPF e CNPJ. Este projeto utiliza React com Vite e é documentado com Storybook, permitindo uma colaboração eficiente entre desenvolvedores e designers.

Acesse o Design System em: http://ds-cpf-cnpj.s3-website-us-east-1.amazonaws.com/

📋 Visão Geral

Este projeto fornece:

• Componentes reutilizáveis: Focados na consistência e funcionalidade para projetos relacionados a CPF e CNPJ.
• Documentação interativa: O Storybook exibe cada componente isoladamente, permitindo testes e customizações.
• Colaboração otimizada: Desenvolvedores e designers podem ajustar propriedades de forma visual e em tempo real.

🚀 Tecnologias Utilizadas

• React: Para construção de interfaces dinâmicas e reutilizáveis.
• Vite: Para um ambiente de desenvolvimento rápido e moderno.
• Storybook: Para documentar e testar os componentes de maneira isolada.

📂 Estrutura do Projeto

A estrutura principal do projeto é:

├── .storybook/       # Configuração do Storybook
├── assets/           # Arquivos estáticos do projeto
├── src/              # Código-fonte dos componentes
├── stories/          # Stories documentados no Storybook
├── storybook-static/ # Arquivos estáticos gerados pelo Storybook
├── package.json      # Dependências e scripts do projeto
└── vite.config.js    # Configuração do Vite

🔧 Instalação

1. Clone o repositório:

git clone [email protected]:dev-peakstudio/ds-cpf-cnpj.git

2. Instale as dependências:

yarn install

3. Execute o Storybook:

yarn storybook

4. Construa os componentes:

yarn build

🛠️ Scripts Disponíveis

• yarn dev: Inicia o servidor de desenvolvimento com Vite.
• yarn storybook: Inicia o Storybook para documentação interativa.
• yarn build: Constrói a biblioteca para produção.
• yarn build-storybook: Constrói os arquivos estáticos do Storybook.

🖥️ Uso no Projeto

Após construir a biblioteca, você pode importá-la em outros projetos:

import { MeuComponente } from "@dev-peakstudio/ds-cpf-cnpj";

🚀 Publicação no NPM

Este projeto está configurado para publicar automaticamente uma nova versão no GitHub Packages sempre que uma release é criada no repositório. O fluxo de trabalho (workflow) está configurado da seguinte forma:

Workflow para Publicação

name: Publish package to GitHub Packages
on:
  release:
    types: [published]
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v4
      # Setup .npmrc file to publish to GitHub Packages
      - uses: actions/setup-node@v3
        with:
          node-version: '20.x'
          registry-url: 'https://npm.pkg.github.com'
          # Defaults to the user or organization that owns the workflow file
          scope: '@dev-peakstudio'
      - name: Install dependencies
        run: yarn
      - name: Publish package
        run: yarn publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NODE_TOKEN }}

Publicação Manual

Se necessário, é possível publicar manualmente utilizando o comando:

yarn publish --access public