Skip to main content

Migração para o Design System Próprio

· 2 min read
Juathan Coelho Duarte
Juathan Coelho Duarte
Tech Lead

O frontend da Smart NX está passando por um processo de evolução técnica e visual. Um dos marcos mais importantes é a transição oficial do uso de componentes do Ant Design (antd) para o nosso @design-system interno.

Por que a mudança?​

Embora o Ant Design tenha sido fundamental para o crescimento inicial da nossa plataforma, decidimos internalizar nossos componentes por vários motivos estratégicos:

  1. Flexibilidade de Design: O Ant Design possui uma estrutura de estilização complexa que dificulta a personalização profunda para as necessidades específicas da Smart NX.
  2. Performance: Componentes customizados e otimizados reduzem o bundle size e melhoram a velocidade de renderização.
  3. Consistência de Marca: Com o nosso próprio Design System, garantimos 100% de alinhamento com a identidade visual da SNX em toda a plataforma.
  4. Independência Técnica: Reduzimos a dependência de bibliotecas externas, permitindo atualizações de framework (como React ou Vite) com menos breaking changes.
  5. Estabilidade e Performance: Identificamos vazamentos de memória (memory leaks) em alguns componentes complexos do Ant Design quando utilizados em fluxos de longa duração, o que será mitigado com nossas implementações internas mais leves.

O que muda para o desenvolvedor?​

A partir de agora, não é permitido o uso de novos componentes do antd em novos desenvolvimentos. Sempre que precisar de um componente (botão, input, modal, etc.), ele deve ser importado do @design-system.

Como migrar?​

Para componentes existentes que ainda utilizam antd, a migração deve ser feita de forma gradual durante as janelas de refatoração ou manutenção de features.

Antes (antd):

import { Button } from "antd";

const MyComponent = () => <Button type="primary">Enviar</Button>;

Depois (@design-system):

import { Button } from "@design-system/Button";

const MyComponent = () => <Button variant="brand">Enviar</Button>;

Benefícios Imediatos​

  • Temas: Suporte nativo a dark/light mode via styled-components sem a necessidade de hacks de CSS.
  • Tipagem: Todos os componentes do @design-system são rigorosamente tipados, seguindo a convenção de prefixo I para interfaces.
  • Acessibilidade: Foco em atributos ARIA e semântica HTML de forma nativa.

Contamos com a colaboração de todos para manter nossa base de código moderna, robusta e alinhada com as melhores práticas de engenharia da Smart NX.