Gseller Delivery Steps

O componente DeliverySteps é projetado para representar visualmente uma sequência de etapas em um processo de entrega. Ele fornece uma interface clara e intuitiva para o acompanhamento da progressão desde a adição de itens até a entrega. Este componente ajusta dinamicamente sua exibição com base na etapa atual do processo de entrega, oferecendo feedback visual por meio de ícones e cores para indicar etapas concluídas, ativas e canceladas.

Props

• currentStep -> string (A etapa atual no processo de entrega que o componente deve destacar como ativa.)
• previousStep -> string (A etapa anterior no processo de entrega, usada para determinar o estado do componente quando uma etapa é cancelada.)

Lembrete

• A alteração das cores não é possível de ser realizada, pois o componente foi pensado para seguir a estrutura e cores do Gseller

Dependências

Certifique-se de ter as seguintes dependências instaladas:

• @gseller-monorepo/box-model
• lucide-react

Instalação

  yarn add @gseller-monorepo/box-model lucide-react
  # ou
  npm install @gseller-monorepo/box-model lucide-react
  # ou
  pnpm add @gseller-monorepo/box-model lucide-react

Estrutura de Pastas e Arquivos

A estrutura do projeto é organizada para facilitar a compreensão e manutenção.

Pasta src

Arquivo index.ts

Responsável pela exportação de todos os arquivos necessários para utilização do componente

Arquivo global.css

Arquivo que define os resets e css base para utilização do tailwindcss

Exemplo de Uso

import React from 'react'
import { DeliverySteps } from '@seu-projeto/delivery-steps'

function App() {
  return (
    <DeliverySteps
      currentStep="PreparingForShipping"
      previousStep="PaymentSettled"
    />
  )
}