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.

O que é o Storybook?​

O Storybook é uma ferramenta de código aberto para construir componentes de UI e páginas de forma isolada. Ele simplifica o desenvolvimento de UI, testes e documentação ao permitir que os desenvolvedores visualizem estados de componentes sem a necessidade de rodar a aplicação completa.

Por que estamos utilizando?​

1. Desenvolvimento Isolado: Crie componentes sem se preocupar com a lógica de negócio complexa ou dados de API pesados.
2. Documentação Viva: O Storybook serve como uma vitrine de todos os componentes disponíveis no @design-system, facilitando o reuso por outros desenvolvedores.
3. Testes de Estado: Visualize facilmente como um componente se comporta com diferentes estados (loading, error, empty, etc.).
4. Colaboração: Facilita a revisão de UI com designers e PMs.

Como utilizar?​

Para rodar o Storybook localmente, utilize o comando:

pnpm storybook

Ao criar um novo componente, lembre-se de sempre criar o arquivo .stories.tsx correspondente na pasta do componente.

Exemplo de Story​

// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./index";
import type { IButtonProps } from "./types";

const meta: Meta<IButtonProps> = {
  title: "Design System/Button",
  component: Button,
};

export default meta;
type Story = StoryObj<IButtonProps>;

export const Primary: Story = {
  args: {
    label: "Clique aqui",
    variant: "primary",
  },
};

Com essa integração, damos mais um passo em direção à excelência técnica e à consistência visual da nossa plataforma.

Para iniciar o Piratinha no ambiente local, basta executar esse script. Depois disso, inicie o moorse-sbc e, em seguida, entre no canal e salve para que ele seja vinculado ao webhook do parceiro.

"Aqui todos varrem o chão" 🚀

Siga o passo a passo a seguir

Como funciona?

1° Atualize o projeto: Dê um pull na pasta do Docker para garantir que você tenha a versão mais recente do ambiente.

2° Execute o script nx config-wpp: Ele vai configurar o ngrok, iniciar os serviços necessários, atualizar o banco de dados e as variáveis do arquivo .env, deixando seu ambiente pronto para rodar o WhatsApp e enviar HSMs localmente.

3° Inicie a API e o serviço do Zenvia-SBC: Depois de rodar o script, inicie a API e o serviço do Zenvia-SBC com o comando node app.js.

4° Registre o número desejado no canal: Com o ambiente configurado, registre o número desejado para os testes no canal de atendimento para garantir o roteamento correto das mensagens.

5° SEJA FELIZ! 😄

Em resumo, o nx config-wpp foi desenvolvido para simplificar sua vida e tornar os testes com WhatsApp mais fáceis e ágeis. Se surgir alguma dúvida ou precisar de ajuda, só me procurar!

TMJ ❤️

Nessa atualização, foi alterada a ferramenta que utilizamos para realizar o build e o inicio local do front-end. Nós utilizavamos o create-react-app, que é uma ferramente disponibilizada pelo próprio react, mas que de acordo com a própria documentação do react não é o recomendado.

A partir de agora, utilizamos o vite, na versão 4 (a versão LTS não funciona no node 16). Com essa alteração, teremos que ter cuidado com algumas pequenasa alterações que o vite exige para o seu funcionamento.

DECLARAÇÃO DE .ENV​

Antes utilizávamos o prefixo REACT_APP_ para declarar alguma variável de ambiente no nosso .env, mas a partir de agora iremos utilziar o prefixo VITE_ no lugar.

Para utilizar essas variáveis de ambiente como padrão do node utilizávamos o process.env, mas a partir de agora o vite só enxerga as variáveis de ambiente utilizando o import.meta.env

IMPORTAÇÃO DE SVG'S COMO COMPONENTES​

O vite utiliza um plugin pra conseguirmos importar os .svg como componente, mas pra continuaar funcional devemos mudar a forma de importar:

• Antes

import { ReactComponent as CalendarIcon } from '../../assets/icons/calendarIcon.svg';

• Depois

 import CalendarIcon from '../../assets/icons/calendarIcon.svg?react';

Assim que a PR for aprovada e mergeada na develop e vocês forem iniciar a utilização do novo build, deverão seguir esses passos abaixo:

• Deletar a pasta 📁 node_modules presente na pasta raiz do projeto

• Instalar as dependências atualizadas com o comando:

 yarn install

• Copiar as variáveis de ambiente atualizadas disponíveis no .env.example, selecionar o ambiente que deseja rodar o front e deixar somente descomentado as variáveis do respectivo ambiente.

Caso queira trocar de ambiente, agora não precisará parar a execução do front para fazer isso, basta atualizar o .env e salvar, automaticament o vite irá reiniciar com as novas variáveis carregadas.

Rodar o front com o comando abaixo e ser feliz 😃

 yarn start

Caso queira entender melhor sobre o vite e dar uma lida na documentação, o link está abaixo, vale ressaltar que esse link é da v4, a atual do vite é a v5 que ainda não utilizamos.

Qualquer outra dúvida, podem me procurar ❤️

https://v4.vitejs.dev/guide/