MadeinWeb Design System

Este projeto é um Design System de componentes React, desenvolvido para a empresa MadeinWeb. Ele utiliza o shadcn/ui como base para a construção de componentes reutilizáveis, acessíveis e modernos, acelerando o desenvolvimento de interfaces consistentes em múltiplos produtos da empresa.

Sobre o projeto

• Tecnologias: React, TypeScript, Vite, shadcn/ui
• Objetivo: Fornecer uma biblioteca de componentes UI padronizados, personalizáveis e prontos para uso em aplicações internas e externas da MadeinWeb.
• Benefícios:
  • Consistência visual e de experiência do usuário
  • Redução de retrabalho e duplicidade de código
  • Facilidade de manutenção e evolução dos componentes
  • Base moderna e flexível para novos projetos

Stack técnica

Este template fornece uma configuração mínima para rodar React com Vite, HMR e algumas regras de ESLint.

Atualmente, dois plugins oficiais estão disponíveis:

• @vitejs/plugin-react usa Babel para Fast Refresh
• @vitejs/plugin-react-swc usa SWC para Fast Refresh

Expansão da configuração do ESLint

Se você estiver desenvolvendo uma aplicação para produção, recomendamos atualizar a configuração para habilitar regras de lint com checagem de tipos:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended e substitua por isso
    ...tseslint.configs.recommendedTypeChecked,
    // Opcionalmente, use para regras mais estritas
    ...tseslint.configs.strictTypeChecked,
    // Opcionalmente, adicione para regras de estilo
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // outras opções...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

Você também pode instalar eslint-plugin-react-x e eslint-plugin-react-dom para regras específicas de React:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config({
  plugins: {
    // Adicione os plugins react-x e react-dom
    "react-x": reactX,
    "react-dom": reactDom,
  },
  rules: {
    // outras regras...
    // Habilite as regras recomendadas para typescript
    ...reactX.configs["recommended-typescript"].rules,
    ...reactDom.configs.recommended.rules,
  },
});