Estrela Design System

Bem-vindo ao Estrela Design System, uma biblioteca de componentes Vue.js projetada para fornecer uma interface de usuário consistente e reutilizável, com base em Vue 3 e Vuetify 3. Esta biblioteca foi criada para simplificar o desenvolvimento de interfaces, garantindo uma estilização uniforme através de tokens de design e componentes fortemente tipados.

✨ Recursos

• Tokens de Design: Define cores, tamanhos de fontes, pesos de fontes, bordas e outros aspectos estilísticos para garantir consistência visual em toda a aplicação.
• Componentes Reutilizáveis: Um conjunto robusto de componentes Vue.js que seguem as melhores práticas de design e são altamente customizáveis.
• Baseada em Vuetify: Utiliza a poderosa biblioteca Vuetify, garantindo componentes modernos, acessíveis e responsivos.

📦 Instalação

Instale a biblioteca:

npm install estrela-design-system

🚀 Como Usar

Importando Componentes

Os componentes podem ser importados individualmente ou globalmente, conforme a necessidade do seu projeto. Aqui está um exemplo de como importar e utilizar um componente:

<template>
  <div class="button-container">
    <EButton color="primary" size="medium" variant="elevated">
      Clique Aqui
    </EButton>
  </div>
</template>

<script setup lang="ts">
import { EButton } from 'estrela-design-system';
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

Usando Tokens

Os tokens de design fornecem uma maneira consistente de aplicar estilos em seus componentes. Eles estão disponíveis para uso direto nos componentes.

🎨 Tokens de Estilização

Os tokens definem as propriedades de design usadas em todos os componentes, garantindo uma aparência coesa.

Cores

export const colors = {
  primary: "#6200EE",
  secondary: "#03DAC6",
  background: "#EFEFEF",
  white: "#FFFFFF",
  black: "#000000",
  red: "#B00020",
  orange: "#FB8C00",
  light_gray: "#C5C5C5",
};

Tamanhos de Fonte

export const fontSizes = {
  xxs: "0.625rem",
  xs: "0.75rem",
  sm: "0.875rem",
  md: "1rem",
  lg: "1.125rem",
  xl: "1.25rem",
  "2xl": "1.5rem",
  "4xl": "2rem",
  "5xl": "2.25rem",
  "6xl": "3rem",
  "7xl": "4rem",
  "8xl": "4.5rem",
  "9xl": "6rem",
};

Pesos de Fonte

export const fontWeights = {
  thin: "100",
  extraLight: "200",
  light: "300",
  regular: "400",
  medium: "500",
  semiBold: "600",
  bold: "700",
  extraBold: "800",
  black: "900",
};

Bordas

export const radius = {
  none: "0px",
  sm: "4px",
  md: "8px",
  lg: "12px",
  xl: "16px",
  full: "9999px",
};

🛠️ Componentes Disponíveis

1. EButton

Um botão personalizável que utiliza cores e bordas a partir dos tokens.

Exemplo de Uso:

<EButton color="primary" size="medium" variant="elevated">
  Clique Aqui
</EButton>

Props Disponíveis:

• color: Define a cor do botão (usando o token de colors).
• size: Define o tamanho do botão.
• variant: Define o estilo do botão (elevated, flat, tonal, outlined, text, plain).
• borderRadius: Define o raio da borda do botão (usando o token de radius).
• loading: Habilita um estado de carregamento no botão.
• prependIcon e appendIcon: Adiciona ícones antes ou depois do texto do botão.

2. ETextInput

Um campo de entrada de texto estilizado que agora suporta validações automáticas para diferentes tipos de entradas, como CPF, CNPJ, CPF e CNPJ ao mesmo tempo, telefone e email.

Exemplo de Uso:

<MyTextInput placeholder="Digite algo" color="primary" borderRadius="lg" />

Props Disponíveis:

• color: Define a cor do texto e da borda do campo (usando o token de colors).
• borderRadius: Define o raio da borda do campo (usando o token de radius).
• placeholder: Define o texto de placeholder.
• type: Define o tipo de entrada (text, email, password, phone, cpf, cnpj, cpfCNPJ ).
• required: Define se o campo é obrigatório.
• errorMessage: Mensagem de erro personalizada.

3. EText

Um componente de texto estilizado que utiliza tamanhos, pesos de fonte e cores a partir dos tokens.

Exemplo de Uso:

<EText size="lg" color="secondary" weight="regular">
  Texto Personalizado
</EText>

Props Disponíveis:

• size: Define o tamanho do texto (usando o token de fontSizes).
• color: Define a cor do texto (usando o token de colors).
• weight: Define o peso da fonte (usando o token de fontWeights).
• font: Define a família da fonte (usando o token de fonts).
• align: Define o alinhamento do texto (left, center, right, justify).

4. ETitle

Um componente de título estilizado que utiliza tamanhos, pesos de fonte e cores a partir dos tokens.

Exemplo de Uso:

<ETitle size="4xl" color="primary" weight="bold">
  Título Personalizado
</ETitle>

Props Disponíveis:

• size: Define o tamanho do título (usando o token de fontSizes).
• color: Define a cor do título (usando o token de colors).
• weight: Define o peso da fonte (usando o token de fontWeights).
• font: Define a família da fonte (usando o token de fonts).
• align: Define o alinhamento do título (left, center, right, justify).

🔧 Configuração Adicional

Certifique-se de que o arquivo de configuração do seu projeto Vue está devidamente ajustado para suportar esta biblioteca e os recursos que ela utiliza, como Vuetify e TypeScript. Para detalhes adicionais, consulte a documentação do Vuetify.

📝 Licença

Este projeto é licenciado sob a MIT License.