Introdução ao Design System com Vue 3

Nos dias atuais, a criação de interfaces de usuário coesas e eficientes é essencial para o sucesso de qualquer aplicação web. Um Design System é um conjunto de componentes reutilizáveis e diretrizes que ajuda a manter a consistência visual e funcional em um produto. Neste guia, vamos aprender como construir um Design System utilizando Vue 3, que não apenas aborda a estrutura dos componentes, mas também seu ecossistema completo, incluindo estilos, documentação e práticas recomendadas.

Pré-requisitos

Para seguir este guia, é necessário ter:

• Conhecimento básico de JavaScript e HTML
• Noções básicas de Vue.js
• Ambiente de desenvolvimento configurado (Node.js e npm instalados)

Principais Conceitos

Componentes

Os componentes são a base de qualquer aplicação Vue. Um Design System consiste em vários componentes que podem ser reutilizados em diferentes partes da aplicação.

<template>
  <button :class="buttonClass" @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    label: {
      type: String,
      required: true
    },
    variant: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    buttonClass() {
      return `btn btn-${this.variant}`;
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style>
.btn {
  padding: 10px;
  border-radius: 5px;
  border: none;
}
.btn-default {
  background-color: gray;
  color: white;
}
.btn-primary {
  background-color: blue;
  color: white;
}
</style>

Estilos

Um Design System é tanto sobre a experiência do usuário quanto sobre a aparência visual. Normalmente, você vai querer usar pré-processadores de CSS (como SASS ou LESS) para organizar seus estilos.

Documentação

Documentar os componentes é crucial. Utilize ferramentas como Storybook para facilitar a criação e visualização de componentes em diferentes estados.

Mini-projeto: Criando um Design System Simples

Vamos criar um Design System básico que inclui um botão e um input de texto.

1. Estrutura do Projeto Crie um novo projeto Vue utilizando o Vue CLI:

 vue create my-design-system
 cd my-design-system

1. Criar Componentes Adicione os componentes BaseButton.vue e BaseInput.vue na pasta src/components.

 // BaseInput.vue
 <template>
   <input class="base-input" :placeholder="placeholder" />
 </template>

 <script>
 export default {
   name: 'BaseInput',
   props: {
     placeholder: {
       type: String,
       default: 'Digite algo...'
     }
   }
 };
 </script>

 <style>
 .base-input {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
 }
 </style>

1. Utilização dos Componentes No App.vue, importe e utilize os componentes que você acabou de criar.

<template>
	<div>
		<BaseInput placeholder="Seu nome" />
		<BaseButton label="Enviar" variant="primary" @click="handleSubmit" />
	</div>
</template>

<script>
	import BaseButton from './components/BaseButton.vue'
	import BaseInput from './components/BaseInput.vue'

	export default {
		components: {
			BaseButton,
			BaseInput
		},
		methods: {
			handleSubmit() {
				alert('Formulário enviado!')
			}
		}
	}
</script>

Melhores Práticas para Criar Componentes Performáticos

1. Evite re-renderizações desnecessárias: Utilize v-if e v-show efetivamente.
2. Componente Único: Sempre que possível, crie componentes que sirvam a múltiplos propósitos em vez de vários similares.
3. Fragmentação: Não crie componentes excessivamente grandes. Mantenha unidades coesas e bem definidas.
4. Uso de props e emit: Utilize props para passar dados e emit para comunicar eventos.

Dicas de Próximos Passos

• Aprofundamento em Vue Router: Aprenda a gerenciar rotas em sua aplicação.
• State Management com Vuex: Explore como gerenciar estados globais.
• Práticas de Acessibilidade: Estude como melhorar a acessibilidade de seu Design System.

Possíveis Erros e Como Solucionar

• Erro: “Component not found…”: Verifique se o componente está exportado corretamente e se o caminho de importação está correto.
• Erro: “Template compilation error…”: Isso geralmente indica um erro de sintaxe no HTML do componente. Revise a estrutura do seu template.

Links Úteis para Aprendizado

• Documentação Oficial do Vue.js
• Vue CLI
• Storybook para Vue
• Artigo sobre Design Systems

Com este guia, você terá uma base sólida para começar a desenvolver um Design System utilizando Vue 3. Lembre-se de que a prática leva à perfeição, e quanto mais você experimentar, melhor será o seu entendimento. Boa sorte!