DS-Eatopia

Uma biblioteca de componentes React independente de CSS externo, com todos os estilos embutidos inline.

Características

• ✅ Zero dependências de CSS externo - Todos os estilos são inline
• ✅ Componentes prontos para uso - Não precisa configurar Tailwind ou outros frameworks CSS
• ✅ Totalmente responsivo - Funciona em todos os dispositivos
• ✅ Mobile-first - Modal com largura total em dispositivos móveis
• ✅ Acessível - Segue as melhores práticas de acessibilidade
• ✅ TypeScript - Tipagem completa incluída

Instalação

npm install ds-eatopia

Uso

EstoqueCard

import { EstoqueCard, Produto, ContagemInicial } from "ds-eatopia";

const produto: Produto = {
  id: 1,
  name: "Arroz Integral",
  sku: "ARROZ001",
  categoria: "Grãos",
  estoque: 50,
  unidades: [
    { label: "kg", value: "1" },
    { label: "Caixa 5kg", value: "5" },
  ],
  unidade_sap: "kg",
};

const contagemInicial: ContagemInicial[] = [
   {
      quantidade: 2,
      unidade: {
        label: "KG",
        value: "1"
      }
    },
    {
      quantidade: 4,
      unidade: {
        label: "PCT 0,5 KG",
        value: "0.5"
      }
    }
]

function App() {
  return (
    <div>
      <EstoqueCard produto={produto} contagemInicial={contagemInicial} />
    </div>
  );
}

UnitSelect

import { UnitSelect, UnitOption } from "ds-eatopia";

function App() {
  const [selectedUnit, setSelectedUnit] = useState("1");

  const units: UnitOption[] = [
    { label: "kg", value: "1" },
    { label: "Caixa 5kg", value: "5" },
    { label: "Saco 25kg", value: "25" },
  ];

  return (
    <UnitSelect
      units={units}
      selectedUnit={selectedUnit}
      onUnitChange={setSelectedUnit}
      defaultUnit="1"
    />
  );
}

Responsividade Automática

O componente EstoqueCard detecta automaticamente dispositivos móveis (≤768px) e ajusta o modal para largura total:

• Desktop/Tablet: Modal com largura fixa de 400px
• Mobile: Modal com largura total (100%) e padding otimizado

QuantidadeInput

import { QuantidadeInput } from "ds-eatopia";

function App() {
  const [quantidade, setQuantidade] = useState(5);

  return (
    <QuantidadeInput
      valor={quantidade}
      onChange={setQuantidade}
      atalhos={[10, 25, 50, -10, -25, -50]}
      selectedUnit="kg"
      addStockItem={(valor) => {
        console.log(`Adicionando ${valor} kg ao estoque`);
      }}
    />
  );
}

Atalhos Inteligentes

Os atalhos negativos só aparecem quando fazem sentido:

• Valor atual: 5 → Mostra apenas: +10, +25, +50
• Valor atual: 15 → Mostra: +10, +25, +50, -10
• Valor atual: 60 → Mostra: +10, +25, +50, -10, -25, -50

Componentes Disponíveis

EstoqueCard

• Gerencia itens de estoque com diferentes unidades
• Interface intuitiva para adicionar/remover itens
• Cálculo automático de totais
• Modal integrado para inserção de novos itens

QuantidadeInput

• Input numérico com controles + e -
• Atalhos personalizáveis para valores comuns
• Atalhos negativos inteligentes - Só aparecem quando fazem sentido
• Suporte a unidades de medida
• Botão para adicionar ao estoque

UnitSelect

• Select customizado e bonito para unidades
• Navegação por teclado (setas, Enter, Escape)
• Animações suaves e feedback visual
• Totalmente acessível (ARIA labels)
• Suporte a hover e focus states

Modal

• Modal responsivo com animações suaves
• Largura total em dispositivos móveis (≤768px)
• Seletor de unidades integrado
• Controle de foco e acessibilidade

Vantagens

Sem Dependências Externas

• Não precisa instalar Tailwind CSS
• Não precisa configurar PostCSS
• Não precisa importar arquivos CSS
• Funciona em qualquer projeto React

Performance

• Estilos inline são mais rápidos para carregar
• Sem overhead de frameworks CSS
• Bundle menor

Facilidade de Uso

• Instale e use imediatamente
• Sem configuração adicional
• Compatível com qualquer setup de build
• Responsivo automático - Detecta dispositivos móveis automaticamente

Desenvolvimento

# Instalar dependências
npm install

# Executar em modo de desenvolvimento
npm run dev

# Build para produção
npm run build

# Executar Storybook
npm run storybook

Licença

MIT