Patterns

App Shell

The AppShell component is the main outer frame of an application. It provides the basic architecture to build an application inside of our admin.

Calendar

O padrão Calendar permite aos usuários selecionar datas individuais ou intervalos de datas dentro de uma interface visual baseada em um calendário. É chave para fluxos que requerem a definição de períodos temporais, como filtros, programação de eventos ou gestão de conteúdos. Seu propósito é oferecer uma seleção eficiente, clara e precisa de datas. Calendar foi criado baseado em ReactDayPicker e estende suas propriedades, consulte a documentação para obter uma referência completa da API do componente.

Callout Card

Callout Card é um padrão que destaca conteúdo relevante ou informativo dentro da interface. Seu propósito é captar a atenção do usuário em momentos chave, **reforçar uma ação recomendada ou proporcionar acessos diretos a outras partes do produto.** É útil para mensagens breves com chamada à ação ou referências contextuais.

Data List

Data list é um padrão visual que permite visualizar e gerenciar listados de itens estruturados, como ordens, informações de clientes, etc. Está projetado para mostrar informações resumidas de forma clara e ordenada. Seu design modular permite visualização rápida e uso intensivo em fluxos de trabalho administrativos, especialmente em contextos onde a ordem ou relação entre itens é relevante.

Data Table

A **Data Table** é um padrão que organiza informações estruturadas em linhas e colunas, facilitando sua exploração, comparação e manipulação. É utilizada para listar grandes volumes de dados (como produtos, pedidos ou clientes), permitindo realizar ações de forma eficiente e precisa a partir da mesma vista.

Editor

O **Editor** é um padrão de interface que permite aos usuários criar ou modificar conteúdo textual. Seu objetivo é oferecer uma experiência clara, eficiente e flexível para tarefas que requerem edição ou carregamento de grande quantidade de conteúdo textual ou entradas de texto enriquecido.

Empty Message

O padrão Empty message é utilizado para informar ao usuário que não há dados disponíveis em uma seção da interface. Sua função principal é fornecer contexto, comunicar o estado vazio de forma clara, e guiar o usuário para a ação mais relevante para resolver essa situação. É fundamental para evitar confusão, manter o foco e fomentar a produtividade, especialmente ao filtrar ou depois de eliminar conteúdo.

O padrão **Form Field** encapsula um controle de entrada (como input, select, textarea) junto com sua etiqueta, ajuda contextual e mensagens de validação. É essencial para capturar dados do usuário de forma clara, consistente e acessível. Seu objetivo é maximizar a eficiência, reduzir erros e assegurar a compreensão imediata do propósito de cada campo.

Help Link

O padrão **Help Link** proporciona um acesso direto e contextual à documentação ou recursos de ajuda relevantes dentro da interface do usuário. Seu objetivo é **fornecer suporte proativo, sem interromper o fluxo de trabalho do usuário.** Melhora a autonomia do usuário ao facilitar o acesso a respostas rápidas, especialmente em momentos de incerteza.

Initial Screen

Este padrão proporciona um design consistente para mostrar uma tela de início ou boas-vindas. Apresenta ao usuário uma funcionalidade ou serviço, oferecendo opções para obter mais informações ou continuar.

Interactive List

A *Interactive List* é um padrão de interface que permite mostrar em formato de lista elementos de seleção ou acesso. Está desenhada para melhorar a produtividade em tarefas frequentes como a gestão de itens, permitindo operar de forma rápida, acessível e sem abandonar o contexto.

Layout

The Layout component is intended for building single or multi-column layouts using predefined typologies.

Menu Button

O padrão **Menu Button** é um elemento interativo cujo objetivo é oferecer acesso rápido a uma seção ou ação específica dentro de uma listagem de acessos (Menu).

Menu

O componente Menu permite agrupar um conjunto de ações ou navegações em uma lista suspensa, ocasionalmente ativado a partir de um botão ou ícone. É fundamental para apresentar opções de maneira organizada, evitando o ruído visual e mantendo a interface limpa. Favorece a acessibilidade a funções secundárias sem comprometer a hierarquia visual do conteúdo principal.

Nav Tabs

Nav Tabs é um padrão de navegação que permite aos usuários alternar entre diferentes vistas ou seções. É utilizado principalmente em ambientes mobile e seu objetivo é organizar conteúdo relacionado e de igual hierarquia em abas claramente etiquetadas, melhorando a experiência de exploração e reduzindo a carga cognitiva.

Page

O componente **Page** atua como contêiner principal de vistas. Estrutura o conteúdo em seções hierárquicas, fornece contexto com títulos e descrições, e pode incluir ações principais (como botões). Seu objetivo é oferecer um framework consistente, claro e acessível que facilite a compreensão e execução de tarefas.

Plan Display

O pattern PlanDisplay organiza planos ou opções de forma comparativa e visual, ideal para mostrar preços, benefícios ou níveis de assinatura com layout flexível e personalizável.

Product Data List

O padrão Product Data List permite visualizar e gerenciar listas resumidas de produtos. É projetado para facilitar a seleção, organização e priorização de produtos relacionados, sejam eles alternativos ou complementares, através da funcionalidade de arrastar e soltar e ações de edição rápidas. Este padrão é ideal para fluxos de trabalho de edição ou configuração de produtos onde é necessário manter a relação entre os diferentes artigos do catálogo.

Product Updates

ProductUpdates component allows the user to showcase new features or updates in a non-distractive way by displaying the information in a floating popover with a high-contrast setting that catches the eye of the user.

Side Modal

O Side Modal é um padrão de sobreposição lateral que permite ao usuário interagir com conteúdo adicional sem abandonar a visão principal. Aparece a partir da borda direita ou esquerda da tela, sem bloquear completamente o fundo, o que favorece a continuidade do contexto e a multitarefa. Seu objetivo é facilitar fluxos secundários, edição rápida ou tarefas complementares à visão principal.

Thumbnail With Action

The Thumbnail With Action pattern allows you to add interactive elements to image thumbnails. By overlaying custom content onto a thumbnail component in one of the four corners, you can embed atomic components such as buttons, icons, or links that enable users to perform specific actions related to the image.