@evolution-soft/ui

Biblioteca de componentes oficial da Evolutionsoft - construída sobre shadcn/ui, Tailwind CSS v4, Radix UI, Framer Motion e Lottie.

Centraliza, documenta e padroniza os componentes utilizados nas aplicações da empresa, garantindo consistência visual e reutilização de código.

📦 Utilizar no projeto (como consumidor)

1. Instalação

npm install @evolution-soft/ui

O pacote tem react, react-dom e next (opcional) como peer dependencies — certifica-te de que já estão instalados no projeto.

2. Adicionar componentes via CLI

Após instalar, podes copiar os ficheiros fonte directamente para o teu projecto:

# Assistente interactivo (recomendado)
npx @evolution-soft/ui

# Adicionar componentes específicos
npx @evolution-soft/ui add button calendar sidebar

# Adicionar todos os componentes de uma vez
npx @evolution-soft/ui add --all

# Atualizar componentes já instalados após uma nova versão do pacote
npm update @evolution-soft/ui
npx @evolution-soft/ui update

2. Importar os estilos globais

No ficheiro raiz do projeto (ex: app/layout.tsx, main.tsx ou _app.tsx):

import '@evolution-soft/ui/styles.css';

3. Importar componentes

import { Button, Title, Subtitle, TooltipIndicator, LottieIcon } from '@evolution-soft/ui';

export default function Page() {
  return (
    <>
      <Title size="xl">Olá, Evolutionsoft!</Title>
      <Button variant="outline">Clique aqui</Button>
    </>
  );
}

4. Providers necessários (opcional)

Se usares SettingsModal ou ButtonIconLottie, envolve a aplicação com o AnimationSettingsProvider:

import { AnimationSettingsProvider } from '@evolution-soft/ui';

export default function RootLayout({ children }) {
  return (
    <AnimationSettingsProvider>
      {children}
    </AnimationSettingsProvider>
  );
}

🛠️ Desenvolver e publicar (como mantedor)

Pré-requisitos

• Node.js v24.13.1
• Conta no npm com acesso à org evolutionsoft

Setup local

git clone https://[email protected]/evolutionsoftteam/evolution-backoffice-storybook.git
cd evolution-backoffice-storybook
npm install

Desenvolvimento

npm run dev          # Vite dev server com preview de componentes
npm run storybook    # Storybook em localhost:6006

Build da biblioteca

npm run build        # Gera dist/ com ESM + CJS + tipos

Publicar nova versão no npm

# 1. Login (apenas uma vez por máquina)
npm login

# 2. Actualizar a versão em package.json:
#    patch: 1.0.0 → 1.0.1  |  minor: 1.0.0 → 1.1.0  |  major: 1.0.0 → 2.0.0
npm version patch   # ou minor / major

# 3. Build + publish (o prepublishOnly corre automaticamente)
npm publish --access public

Após o publish, os consumidores atualizam com npm update @evolution-soft/ui.

🏗️ Tecnologias

| Tecnologia | Função | |---|---| | Vite | Build e dev server | | Tailwind CSS v4 | Utilitários de CSS | | shadcn/ui | Componentes base | | Radix UI | Primitivos acessíveis | | Framer Motion | Animações | | Lottie React | Ícones animados | | TypeScript | Tipagem |

✒️ Autores

• Vitor Cesar Kravszenko — vitorkravs
• Evolutionsoft — evolutionsoft.com.br

📄 Licença

Todos os direitos reservados à Evolutionsoft. Uso sujeito a autorização prévia da empresa.