Prosperita Dumbo React - Biblioteca de Componentes

Uma biblioteca de componentes React moderna e acessível, desenvolvida para aplicações financeiras com design system consistente.

📦 Instalação

npm install prosperita-dumbo-react
# ou
yarn add prosperita-dumbo-react

🚀 Uso Básico

import { Button, Input, Modal } from 'prosperita-dumbo-react';
import 'prosperita-dumbo-react/dist/style.css';

function App() {
  return (
    <div>
      <Button kind="primary" size="medium" label="Clique aqui" />
      <Input label="Nome" placeholder="Digite seu nome" />
    </div>
  );
}

🎨 Componentes

Button

Botão com múltiplas variantes e tamanhos.

import { Button } from 'prosperita-dumbo-react';

// Props
type ButtonProps = {
  kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
  size: "large" | "medium" | "small" | "extraLarge" | "twoXLarge" | "expressive";
  label?: ReactNode;
  icon?: ReactNode | string;
  loading?: boolean;
  disabled?: boolean;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  width?: string;
  full?: boolean;
  borderNone?: boolean;
  hasIconSvg?: boolean;
  fortable?: boolean;
  fortableRadius?: boolean;
  dimension?: string;
  noPadding?: string;
  style?: CSSProperties;
};

// Exemplos
<Button 
  kind="primary" 
  size="medium" 
  label="Salvar" 
  onClick={() => console.log('Clicado!')} 
/>

<Button 
  kind="dangerPrimary" 
  size="large" 
  label="Excluir" 
  icon="🗑️" 
  loading={true} 
/>

Input

Campo de entrada com diferentes tipos e estados.

import { Input } from 'prosperita-dumbo-react';

// Props
type InputProps = {
  size?: "small" | "medium" | "large";
  label?: string;
  message?: ReactNode;
  error?: boolean;
  warning?: boolean;
  maxLength?: number;
  disabled?: boolean;
  readOnly?: boolean;
  loading?: boolean;
  type?: "text" | "password" | "email" | "number" | "textarea";
  placeholder?: string;
  value?: string | number;
  onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  noRadius?: boolean;
  borderNone?: boolean;
  forFilter?: boolean;
  forModal?: boolean;
  forSlider?: boolean;
};

// Exemplos
<Input 
  label="Email" 
  type="email" 
  placeholder="Digite seu email" 
  error={true} 
  message="Email inválido" 
/>

<Input 
  label="Senha" 
  type="password" 
  size="large" 
  disabled={false} 
/>

Checkbox

Caixa de seleção com diferentes estados.

import { Checkbox } from 'prosperita-dumbo-react';

// Props
type CheckboxProps = {
  label?: string;
  checked?: boolean;
  disabled?: boolean;
  size?: "small" | "medium" | "large";
  onChange?: (checked: boolean) => void;
  error?: boolean;
  message?: string;
};

// Exemplos
<Checkbox 
  label="Aceito os termos" 
  checked={true} 
  onChange={(checked) => console.log(checked)} 
/>

<Checkbox 
  label="Notificações" 
  size="large" 
  disabled={false} 
/>

Modal

Modal com diferentes tamanhos e configurações.

import { Modal } from 'prosperita-dumbo-react';

// Props
type ModalProps = {
  open?: boolean;
  label?: ReactNode;
  textLabel?: ReactNode;
  children?: ReactNode;
  onClose?: () => void;
  backgroundModal?: string;
  background?: string;
  height?: string;
  width?: string;
  overflow?: boolean;
  radius?: boolean;
  closeButtonModal?: boolean;
  buttons?: Array<{
    label?: string;
    icon?: string | ReactNode;
    onClick?: () => void;
    disabled?: boolean;
    hasIconSvg?: boolean;
    dimension?: string;
    loading?: boolean;
    size?: "large" | "medium" | "small" | "extraLarge" | "twoXLarge" | "expressive";
    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
  }>;
};

// Exemplos
<Modal 
  open={isOpen} 
  label="Confirmação" 
  onClose={() => setIsOpen(false)}
  buttons={[
    { label: "Cancelar", kind: "secondary", onClick: () => setIsOpen(false) },
    { label: "Confirmar", kind: "primary", onClick: handleConfirm }
  ]}
>
  <p>Tem certeza que deseja excluir este item?</p>
</Modal>

TableColumnDrag

Tabela com colunas arrastáveis e funcionalidades avançadas.

import { TableColumnDrag } from 'prosperita-dumbo-react';

// Props
type TableColumnDragProps = {
  columnTitles: Array<{
    id: string;
    label: ReactNode;
    name: string;
    hasFilter?: boolean;
    width?: string;
    text: boolean;
    value?: string;
    placeholder?: string;
    options?: Array<{ label: string; value: string }>;
    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    onChangeMoney?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    type?: string;
    paddingDrop?: string;
  }>;
  rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
  pageSizes: number[];
  clearFilesFilter: boolean;
  label?: string;
  search?: boolean;
  nofilter?: boolean;
  messagedatalength?: ReactNode;
  width?: string;
  sizeSearch?: "small" | "large" | "medium";
  rowSizes?: string;
  columnSizes?: string;
  stickyFirstColumn?: boolean;
  radiusButtonFilter: number;
  column_storage_name: string;
  widthOverflow?: string;
  values?: { [key: string]: any };
  onChangePage?: (event: number) => void;
  onFilterStateChange?: (isFiltering: boolean, data: any[]) => void;
  onChangeSearch?: (event: ChangeEvent<HTMLInputElement>) => void;
  buttons?: Array<{
    label: string;
    onClick?: () => void;
    icon?: string | ReactNode;
    kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
    position?: "right" | "left";
    width?: string;
    hasIconSvg?: boolean;
    dimension?: string;
    size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
  }>;
  actions?: Array<{
    text: ReactNode;
    icon?: ReactNode;
    onClick?: () => void;
    feature?: boolean;
    noPadding?: string;
    size: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
    hasIconSvg?: boolean;
    width?: string;
  }>;
  headerAction?: {
    active: boolean;
    count: number;
  };
  datePicker?: {
    label: string;
    type?: string;
    value?: string;
    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  };
};

// Exemplo
const columns = [
  { id: 'name', label: 'Nome', name: 'name', hasFilter: true, text: true },
  { id: 'email', label: 'Email', name: 'email', hasFilter: true, text: true },
  { id: 'status', label: 'Status', name: 'status', hasFilter: true, text: false, options: [
    { label: 'Ativo', value: 'active' },
    { label: 'Inativo', value: 'inactive' }
  ]}
];

const data = [
  { name: 'João Silva', email: '[email protected]', status: 'Ativo' },
  { name: 'Maria Santos', email: '[email protected]', status: 'Inativo' }
];

<TableColumnDrag
  columnTitles={columns}
  rowData={data}
  pageSizes={[10, 25, 50]}
  clearFilesFilter={false}
  search={true}
  column_storage_name="user-table"
  radiusButtonFilter={2}
  buttons={[
    { label: "Novo", kind: "primary", position: "left", onClick: () => console.log('Novo') },
    { label: "Excluir", kind: "dangerPrimary", position: "right", onClick: () => console.log('Excluir') }
  ]}
/>

Dropdown

Menu dropdown com opções customizáveis.

import { Dropdown } from 'prosperita-dumbo-react';

// Props
type DropdownProps = {
  options: Array<{ label: string; value: string }>;
  placeholder?: string;
  value?: string;
  onChange?: (data: { selectedItem: any }) => void;
  size?: "small" | "medium" | "large";
  kind?: "default" | "fluid";
  disabled?: boolean;
  loading?: boolean;
  error?: boolean;
  message?: string;
  noRadius?: boolean;
  borderNone?: boolean;
  forFilter?: boolean;
  clearFiles?: boolean;
  paddingDrop?: string;
  autoComplete?: string;
  name?: string;
};

// Exemplo
<Dropdown
  options={[
    { label: 'Opção 1', value: '1' },
    { label: 'Opção 2', value: '2' }
  ]}
  placeholder="Selecione uma opção"
  onChange={({ selectedItem }) => console.log(selectedItem)}
  size="medium"
/>

TabPane

Aba individual para sistema de abas.

import { TabPane } from 'prosperita-dumbo-react';

// Props
type TabPaneProps = {
  children?: ReactNode;
  label: string;
  onClick: () => void;
  isActive: boolean;
  icon?: string | ReactNode;
  bordercolor?: string;
  width?: string;
  disabled?: boolean;
  position?: "center" | "right" | "left";
  padding?: string;
  bottom?: boolean;
  borderRadius?: string;
};

// Exemplo
<TabPane
  label="Perfil"
  isActive={activeTab === 'profile'}
  onClick={() => setActiveTab('profile')}
  icon="👤"
  bordercolor="#007bff"
>
  <div>Conteúdo da aba Perfil</div>
</TabPane>

Search

Campo de busca com funcionalidades avançadas.

import { Search } from 'prosperita-dumbo-react';

// Props
type SearchProps = {
  kind?: "default" | "fluid";
  size?: "small" | "medium" | "large";
  placeholder?: string;
  value?: string;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  borderTable?: boolean;
  disabled?: boolean;
  loading?: boolean;
};

// Exemplo
<Search
  placeholder="Digite para pesquisar..."
  onChange={(e) => setSearchTerm(e.target.value)}
  size="medium"
  borderTable
/>

Notification

Notificação com diferentes tipos e posições.

import { Notification } from 'prosperita-dumbo-react';

// Props
type NotificationProps = {
  title?: string;
  message?: string;
  kind?: "info" | "success" | "warning" | "error";
  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
  duration?: number;
  onClose?: () => void;
  icon?: ReactNode;
};

// Exemplo
<Notification
  title="Sucesso!"
  message="Operação realizada com sucesso."
  kind="success"
  position="top-right"
  duration={5000}
/>

Tooltip

Tooltip com diferentes posições e tamanhos.

import { Tooltip } from 'prosperita-dumbo-react';

// Props
type TooltipProps = {
  children: ReactNode;
  label: string;
  align?: "top" | "top-right" | "top-left" | "bottom" | "bottom-right" | "bottom-left" | "left" | "right";
  size?: "small" | "medium" | "large";
  width?: string;
  disabled?: boolean;
};

// Exemplo
<Tooltip label="Informação adicional" align="top" size="small">
  <Button label="Hover me" />
</Tooltip>

Loading

Indicador de carregamento.

import { Loading } from 'prosperita-dumbo-react';

// Props
type LoadingProps = {
  size?: "small" | "medium" | "large";
  kind?: "spinner" | "skeleton";
  text?: string;
};

// Exemplo
<Loading size="medium" text="Carregando..." />

InlineLoading

Indicador de carregamento inline.

import { InlineLoading } from 'prosperita-dumbo-react';

// Props
type InlineLoadingProps = {
  size?: "small" | "medium" | "large";
  text?: string;
  success?: boolean;
  error?: boolean;
};

// Exemplo
<InlineLoading size="small" text="Salvando..." />

ProgressIndicator

Indicador de progresso.

import { ProgressIndicator } from 'prosperita-dumbo-react';

// Props
type ProgressIndicatorProps = {
  current: number;
  total: number;
  size?: "small" | "medium" | "large";
  showPercentage?: boolean;
  color?: string;
};

// Exemplo
<ProgressIndicator current={75} total={100} showPercentage />

Slider

Controle deslizante.

import { Slider } from 'prosperita-dumbo-react';

// Props
type SliderProps = {
  min: number;
  max: number;
  value: number;
  onChange: (value: number) => void;
  step?: number;
  disabled?: boolean;
  showValue?: boolean;
  label?: string;
};

// Exemplo
<Slider
  min={0}
  max={100}
  value={50}
  onChange={(value) => console.log(value)}
  step={1}
  showValue
  label="Volume"
/>

Toggle

Interruptor on/off.

import { Toggle } from 'prosperita-dumbo-react';

// Props
type ToggleProps = {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  size?: "small" | "medium" | "large";
  label?: string;
};

// Exemplo
<Toggle
  checked={isEnabled}
  onChange={setIsEnabled}
  label="Notificações"
  size="medium"
/>

Radio

Botão de opção única.

import { Radio } from 'prosperita-dumbo-react';

// Props
type RadioProps = {
  name: string;
  value: string;
  checked: boolean;
  onChange: (value: string) => void;
  label?: string;
  disabled?: boolean;
  size?: "small" | "medium" | "large";
};

// Exemplo
<Radio
  name="gender"
  value="male"
  checked={gender === 'male'}
  onChange={setGender}
  label="Masculino"
/>

Tag

Tag para categorização.

import { Tag } from 'prosperita-dumbo-react';

// Props
type TagProps = {
  label: string;
  kind?: "primary" | "secondary" | "success" | "warning" | "error";
  size?: "small" | "medium" | "large";
  onRemove?: () => void;
  disabled?: boolean;
};

// Exemplo
<Tag
  label="React"
  kind="primary"
  size="medium"
  onRemove={() => console.log('Removido')}
/>

Tile

Bloco de conteúdo.

import { Tile } from 'prosperita-dumbo-react';

// Props
type TileProps = {
  children: ReactNode;
  kind?: "default" | "selectable" | "expandable";
  selected?: boolean;
  expanded?: boolean;
  onClick?: () => void;
  onExpand?: () => void;
  disabled?: boolean;
  size?: "small" | "medium" | "large";
};

// Exemplo
<Tile
  kind="selectable"
  selected={isSelected}
  onClick={() => setIsSelected(!isSelected)}
>
  <h3>Título do Tile</h3>
  <p>Conteúdo do tile</p>
</Tile>

Breadcrumb

Navegação em migalhas.

import { Breadcrumb } from 'prosperita-dumbo-react';

// Props
type BreadcrumbProps = {
  items: Array<{
    label: string;
    href?: string;
    onClick?: () => void;
  }>;
  separator?: string;
  size?: "small" | "medium" | "large";
};

// Exemplo
<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Produtos', href: '/products' },
    { label: 'Detalhes' }
  ]}
  separator="/"
/>

FileUploader

Upload de arquivos.

import { FileUploader } from 'prosperita-dumbo-react';

// Props
type FileUploaderProps = {
  onUpload: (files: File[]) => void;
  accept?: string;
  multiple?: boolean;
  maxSize?: number;
  disabled?: boolean;
  label?: string;
  description?: string;
  error?: boolean;
  message?: string;
};

// Exemplo
<FileUploader
  onUpload={(files) => console.log(files)}
  accept=".pdf,.doc,.docx"
  multiple={true}
  maxSize={5242880}
  label="Upload de documentos"
  description="Arraste arquivos ou clique para selecionar"
/>

ContentSwitcher

Alternador de conteúdo.

import { ContentSwitcher } from 'prosperita-dumbo-react';

// Props
type ContentSwitcherProps = {
  items: Array<{
    id: string;
    label: string;
    content: ReactNode;
  }>;
  activeId: string;
  onChange: (id: string) => void;
  size?: "small" | "medium" | "large";
};

// Exemplo
<ContentSwitcher
  items={[
    { id: 'tab1', label: 'Aba 1', content: <div>Conteúdo 1</div> },
    { id: 'tab2', label: 'Aba 2', content: <div>Conteúdo 2</div> }
  ]}
  activeId={activeTab}
  onChange={setActiveTab}
/>

MenuButton

Botão de menu.

import { MenuButton } from 'prosperita-dumbo-react';

// Props
type MenuButtonProps = {
  label?: string;
  icon?: ReactNode;
  items: Array<{
    label: string;
    onClick: () => void;
    disabled?: boolean;
    icon?: ReactNode;
  }>;
  size?: "small" | "medium" | "large";
  kind?: "primary" | "secondary" | "tertiary" | "ghost";
  disabled?: boolean;
};

// Exemplo
<MenuButton
  label="Ações"
  icon="⚙️"
  items={[
    { label: 'Editar', onClick: () => console.log('Editar') },
    { label: 'Excluir', onClick: () => console.log('Excluir') }
  ]}
/>

Margin

Componente para espaçamento.

import { Margin } from 'prosperita-dumbo-react';

// Props
type MarginProps = {
  children: ReactNode;
  top?: string | number;
  bottom?: string | number;
  left?: string | number;
  right?: string | number;
  all?: string | number;
};

// Exemplo
<Margin top={20} bottom={10}>
  <Button label="Botão com margem" />
</Margin>

InputCurrency

Campo de entrada para valores monetários com formatação automática.

import { InputCurrency } from 'prosperita-dumbo-react';

// Props
type InputCurrencyProps = {
  size?: "small" | "medium" | "large";
  label?: string;
  message?: string;
  SymbolCipher?: string;
  randomSymbol?: string;
  error?: boolean;
  warning?: boolean;
  maxLength?: number;
  disabled?: boolean;
  readOnly?: boolean;
  forModal?: boolean;
  forSlider?: boolean;
  noRadius?: boolean;
  borderNone?: boolean;
  clearFilds?: boolean;
  onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
};

// Exemplo
<InputCurrency
  label="Valor"
  SymbolCipher="R$"
  placeholder="0,00"
  onChange={(e) => console.log(e.target.value)}
/>

InputCurrencyFluid

Versão fluida do campo de entrada monetária.

import { InputCurrencyFluid } from 'prosperita-dumbo-react';

// Props
type InputCurrencyFluidProps = {
  size?: "small" | "medium" | "large";
  message?: string;
  SymbolCipher?: string;
  randomSymbol?: string;
  error?: boolean;
  warning?: boolean;
  maxLength?: number;
  disabled?: boolean;
  readOnly?: boolean;
  forModal?: boolean;
  forSlider?: boolean;
  noRadius?: boolean;
  borderNone?: boolean;
  clearFiles?: boolean;
  onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
};

// Exemplo
<InputCurrencyFluid
  SymbolCipher="R$"
  placeholder="0,00"
  onChange={(e) => console.log(e.target.value)}
/>

InputFluid

Campo de entrada fluido com funcionalidades avançadas.

import { InputFluid } from 'prosperita-dumbo-react';

// Props
type InputFluidProps = {
  label?: string;
  message?: string;
  placeholder?: string;
  error?: boolean;
  warning?: boolean;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  maxLength?: number;
  disabled?: boolean;
  readOnly?: boolean;
  loading?: boolean;
  cols?: number;
  rows?: number;
  noRadius?: boolean;
  borderNone?: boolean;
  tootipLabel?: {
    align: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
    width?: string;
    children?: ReactNode;
    size: "small" | "large" | "medium";
    label?: string;
  };
};

// Exemplo
<InputFluid
  label="Nome"
  placeholder="Digite seu nome"
  loading={false}
  tootipLabel={{
    align: "top",
    label: "Informação adicional",
    size: "small"
  }}
/>

InputSelect

Campo de seleção baseado em react-select.

import { InputSelect } from 'prosperita-dumbo-react';

// Props
type InputSelectProps = {
  size: "small" | "large" | "medium";
  kind: "default" | "fluid" | "little";
  message?: string;
  label?: string;
  placeholder?: string;
  disabled?: boolean;
  error?: boolean;
  warning?: boolean;
  readonly?: boolean;
  loading?: boolean;
  options?: Array<{ label: string; value: string }>;
  styles?: StylesConfig;
  name?: string;
  id?: string;
  noRadius?: boolean;
  isMulti?: boolean;
  value?: string;
  onChange?: (event: any) => void;
  clearInput?: boolean;
  noBorder?: boolean;
};

// Exemplo
<InputSelect
  size="medium"
  kind="default"
  label="Selecione uma opção"
  options={[
    { label: 'Opção 1', value: '1' },
    { label: 'Opção 2', value: '2' }
  ]}
  onChange={(selected) => console.log(selected)}
/>

Tab

Container para sistema de abas.

import { Tab } from 'prosperita-dumbo-react';

// Props
type TabProps = {
  children: ReactNode;
  width: string;
  bottom?: boolean;
};

// Exemplo
<Tab width="100%" bottom={false}>
  <TabPane label="Aba 1" isActive={true} onClick={() => {}} />
  <TabPane label="Aba 2" isActive={false} onClick={() => {}} />
</Tab>

Table

Tabela básica com funcionalidades de paginação e busca.

import { Table } from 'prosperita-dumbo-react';

// Props
type TableProps = {
  columnTitles: string[];
  rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
  sizeHeightMessage?: string;
  actions?: Array<{
    text: ReactNode;
    onClick?: () => void;
  }>;
  label?: {
    content: JSX.Element | ReactNode;
    padding?: string;
    margin?: string;
  };
  buttons?: Array<{
    label: string;
    onClick?: () => void;
    icon?: string;
    kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
    position?: "right" | "left";
    width?: string;
    dimension?: string;
    size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
    disabled?: boolean;
    tooltip?: {
      align: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
      width?: string;
      children?: ReactNode;
      size: "small" | "large" | "medium";
      label?: string;
    };
  }>;
  pageSizes: number[];
  datePicker?: {
    label: string;
    type?: string;
    value?: string;
    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  };
  search?: boolean;
  pagination?: boolean;
  messagedatalength?: string;
  width?: string;
  sizeSearch?: "small" | "large" | "medium";
  rowSizes?: string;
  radius?: boolean;
  footer?: {
    ht: string;
    element: ReactNode;
    bg: string;
  };
  bg?: string;
  ht?: string;
};

// Exemplo
<Table
  columnTitles={['Nome', 'Email', 'Status']}
  rowData={[
    { name: 'João', email: '[email protected]', status: 'Ativo' },
    { name: 'Maria', email: '[email protected]', status: 'Inativo' }
  ]}
  pageSizes={[10, 25, 50]}
  search={true}
  pagination={true}
/>

TableBasic

Tabela básica simplificada.

import { TableBasic } from 'prosperita-dumbo-react';

// Props
type TableBasicProps = {
  columnTitles: string[];
  rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
  pageSizes: number[];
  actions?: Array<{
    text: ReactNode;
    onClick?: () => void;
  }>;
  label?: string;
  buttons?: Array<{
    label: string;
    onClick?: () => void;
    icon?: string;
    kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
    position?: "right" | "left";
    width?: string;
    dimension?: string;
    size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
    disabled?: boolean;
    dropOptions?: {
      options: Array<{
        label: string;
        onClick?: () => void;
      }>;
    };
  }>;
  search?: boolean;
  messagedatalength?: string;
  width?: string;
  sizeSearch?: "small" | "large" | "medium";
  rowSizes?: string;
  columnSizes?: string;
};

// Exemplo
<TableBasic
  columnTitles={['Nome', 'Email']}
  rowData={[
    { name: 'João', email: '[email protected]' },
    { name: 'Maria', email: '[email protected]' }
  ]}
  pageSizes={[10, 25, 50]}
  search={true}
/>

TableExpandable

Tabela com linhas expansíveis.

import { TableExpandable } from 'prosperita-dumbo-react';

// Props
type TableExpandableProps = {
  columnTitles: ReactNode[];
  rowData: Array<{ [key: string]: any; onClick?: () => void }>;
  pageSizes: number[];
  actions?: Array<{
    text: ReactNode;
    icon?: string | ReactNode;
    onClick?: () => void;
    feature?: boolean;
    noPadding?: string;
    size: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
    hasIconSvg?: boolean;
    width?: string;
  }>;
  label?: string;
  buttons?: Array<{
    label: string;
    onClick?: () => void;
    icon?: string;
    kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
    position?: "right" | "left";
    size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
    dimension?: string;
    width?: string;
    disabled?: boolean;
    loading?: boolean;
  }>;
  search?: boolean;
  onChangeSearch?: (event: ChangeEvent<HTMLInputElement>) => void;
  arrow?: { thSize: string; iconSize?: string; transform?: string };
  messageDatalength?: string;
  width?: string;
  expandedRowData?: string[];
  columsKeys?: string[];
  headerAction?: {
    active: boolean;
    count: number;
  };
  sizeSearch?: "small" | "large" | "medium";
  rowSizes?: string;
  columnSizes?: string;
  overflowPagination?: boolean;
};

// Exemplo
<TableExpandable
  columnTitles={['Nome', 'Email', 'Ações']}
  rowData={[
    { name: 'João', email: '[email protected]', details: 'Detalhes do João' },
    { name: 'Maria', email: '[email protected]', details: 'Detalhes da Maria' }
  ]}
  pageSizes={[10, 25, 50]}
  expandedRowData={['details']}
  search={true}
/>

TableExpandableDrag

Tabela expansível com colunas arrastáveis.

import { TableExpandableDrag } from 'prosperita-dumbo-react';

// Props
type TableExpandableDragProps = {
  columnTitles: Array<{
    id: string;
    label: ReactNode;
    name: string;
    hasFilter?: boolean;
    width?: string;
    text: boolean;
    value?: string;
    paddingDrop?: string;
    type?: string;
    placeholder?: string;
    options?: Array<{ label: string; value: string }>;
    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    onChangeMoney?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  }>;
  clearFilesFilter: boolean;
  rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
  pageSizes: number[];
  actions?: Array<{
    text: ReactNode;
    icon?: ReactNode;
    onClick?: () => void;
    feature?: boolean;
    noPadding?: string;
    size: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
    hasIconSvg?: boolean;
    width?: string;
  }>;
  label?: ReactNode;
  buttons?: Array<{
    label: string;
    onClick?: () => void;
    icon?: string | ReactNode;
    kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
    position?: "right" | "left";
    width?: string;
    hasIconSvg?: boolean;
    dimension?: string;
    size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
    disabled?: boolean;
    loading?: boolean;
  }>;
  search?: boolean;
  nofilter?: boolean;
  messagedatalength?: ReactNode;
  width?: string;
  onChangePage?: (event: number) => void;
  onChangeSearch?: (event: ChangeEvent<HTMLInputElement>) => void;
  sizeSearch?: "small" | "large" | "medium";
  rowSizes?: number;
  sizesRow?: string;
  radiusButtonFilter: number;
  columnSizes?: string;
  expandedRowData?: string[];
  onFilterStateChange?: (isFiltering: boolean, data: any[]) => void;
  columsKeys?: string[];
  arrow?: { thSize: string; iconSize?: string; transform?: string };
  headerAction?: {
    active: boolean;
    count: number;
  };
  column_storage_name: string;
  values?: { [key: string]: any };
  stickyFirstColumn?: boolean;
  widthOverflow?: string;
  datePicker?: {
    label: string;
    type?: string;
    value?: string;
    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  };
};

// Exemplo
<TableExpandableDrag
  columnTitles={[
    { id: 'name', label: 'Nome', name: 'name', hasFilter: true, text: true },
    { id: 'email', label: 'Email', name: 'email', hasFilter: true, text: true }
  ]}
  rowData={[
    { name: 'João', email: '[email protected]', details: 'Detalhes' },
    { name: 'Maria', email: '[email protected]', details: 'Detalhes' }
  ]}
  pageSizes={[10, 25, 50]}
  clearFilesFilter={false}
  column_storage_name="expandable-table"
  radiusButtonFilter={2}
  expandedRowData={['details']}
/>

TableBatchActions

Tabela com ações em lote.

import { TableBatchActions } from 'prosperita-dumbo-react';

// Props
type TableBatchActionsProps = {
  columnTitles: ReactNode[];
  rowData: Array<{ [key: string]: ReactNode | string | JSX.Element }>;
  pageSizes: number[];
  actions?: Array<{
    text: ReactNode;
    icon?: string;
    feature?: boolean;
    onClick?: () => void;
  }>;
  label?: string;
  buttons?: Array<{
    label: string;
    onClick?: () => void;
    icon?: string | ReactNode;
    kind: "primary" | "secondary" | "tertiary" | "ghost" | "dangerPrimary" | "dangerTertiary" | "dangerGhost";
    position?: "right" | "left";
    hasIconSvg?: boolean;
    dimension?: string;
    width?: string;
    size?: "small" | "large" | "medium" | "extraLarge" | "twoXLarge" | "expressive";
    disabled?: boolean;
  }>;
  search?: boolean;
  messagedatalength?: string;
  width?: string;
  columsKeys?: string[];
  sizeSearch?: "small" | "large" | "medium";
  headerAction?: {
    active: boolean;
    count: number;
  };
  rowSizes?: string;
};

// Exemplo
<TableBatchActions
  columnTitles={['Nome', 'Email', 'Selecionar']}
  rowData={[
    { name: 'João', email: '[email protected]', selected: false },
    { name: 'Maria', email: '[email protected]', selected: false }
  ]}
  pageSizes={[10, 25, 50]}
  headerAction={{ active: true, count: 0 }}
  search={true}
/>

CodeSnippet

Snippet de código com funcionalidade de cópia.

import { CodeSnippet } from 'prosperita-dumbo-react';

// Props
type CodeSnippetProps = {
  language?: string;
  code: string;
  background?: string;
  color?: string;
  icon?: ReactNode;
};

// Exemplo
<CodeSnippet
  language="javascript"
  code="console.log('Hello World!');"
  background="#f4f4f4"
  color="#161616"
/>

CodeSnippetInline

Snippet de código inline com numeração de linhas.

import { CodeSnippetInline } from 'prosperita-dumbo-react';

// Props
type CodeSnippetInlineProps = {
  code: string;
  language?: string;
  expanded?: boolean;
  numbers?: boolean;
  copy?: boolean;
};

// Exemplo
<CodeSnippetInline
  code={`function hello() {
  console.log('Hello World!');
}`}
  language="javascript"
  expanded={true}
  numbers={true}
  copy={true}
/>

DuoList

Lista dupla para seleção de itens.

import { DuoList } from 'prosperita-dumbo-react';

// Props
type DuoListProps = {
  options: Array<{
    label: string;
    value: number;
    checked?: boolean;
  }>;
  onClick?: () => void;
  selecteds?: Array<{
    label: string;
    value: number;
    checked?: boolean;
  }>;
  onChange?: (selected: Array<{ label: string; value: number; checked?: boolean }>) => void;
  width?: string;
};

// Exemplo
<DuoList
  options={[
    { label: 'Opção 1', value: 1 },
    { label: 'Opção 2', value: 2 },
    { label: 'Opção 3', value: 3 }
  ]}
  onChange={(selected) => console.log(selected)}
  width="400px"
/>

UINavigationHeader

Cabeçalho de navegação com menu e perfil do usuário.

import { UINavigationHeader } from 'prosperita-dumbo-react';

// Props
type UINavigationHeaderProps = {
  options?: Array<{
    normalMode?: boolean;
    label?: string | ReactNode;
    icon?: ReactNode;
    onClick?: () => void;
    href?: string;
    permission?: boolean;
    optionsMenu?: Array<{
      label?: string;
      onClick?: () => void;
      permission?: boolean;
      children?: Array<{
        label?: string;
        onClick?: () => void;
        permission?: boolean;
      }>;
    }>;
    minColumnWidth?: string;
    gap?: string;
  }>;
  icon?: string | ReactNode;
  emailuser?: string | ReactNode;
  userName?: string | ReactNode;
  children?: ReactNode;
  SectionRightTime?: ReactNode;
  open?: boolean;
  bgHeader?: string;
  navigateProfile?: () => void;
  columnsMax?: number;
};

// Exemplo
<UINavigationHeader
  userName="João Silva"
  emailuser="[email protected]"
  options={[
    {
      label: 'Dashboard',
      onClick: () => console.log('Dashboard'),
      optionsMenu: [
        { label: 'Submenu 1', onClick: () => console.log('Submenu 1') }
      ]
    }
  ]}
  navigateProfile={() => console.log('Perfil')}
/>

UISHELLHeader

Cabeçalho simples com menu dropdown.

import { UISHELLHeader } from 'prosperita-dumbo-react';

// Props
type UISHELLHeaderProps = {
  options: Array<{
    label: string;
    onClick: () => void;
  }>;
  label?: string;
};

// Exemplo
<UISHELLHeader
  label="Menu"
  options={[
    { label: 'Opção 1', onClick: () => console.log('Opção 1') },
    { label: 'Opção 2', onClick: () => console.log('Opção 2') }
  ]}
/>

UIHeaderNav

Cabeçalho de navegação com funcionalidades avançadas.

import { UIHeaderNav } from 'prosperita-dumbo-react';

// Props
type UIHeaderNavProps = {
  options?: Array<{
    label?: string | ReactNode;
    onClick?: () => void;
    href?: string;
    permission?: boolean;
    optionsMenu?: Array<{
      label?: string;
      onClick?: () => void;
      permission?: boolean;
    }>;
  }>;
  icon?: string | ReactNode;
  emailuser?: string | ReactNode;
  userName?: string | ReactNode;
  children?: ReactNode;
  SectionRightTime?: ReactNode;
  open?: boolean;
  bgHeader?: string;
  navigateProfile?: () => void;
  search?: {
    onClick: () => void;
    on: boolean;
  };
};

// Exemplo
<UIHeaderNav
  userName="João Silva"
  emailuser="[email protected]"
  options={[
    { label: 'Dashboard', onClick: () => console.log('Dashboard') }
  ]}
  search={{ onClick: () => console.log('Search'), on: true }}
  navigateProfile={() => console.log('Perfil')}
/>

🎨 Tema

A biblioteca usa um sistema de temas consistente. Para customizar:

import theme from 'prosperita-dumbo-react/theme';

// Cores disponíveis
theme.buttonPrimary    // Cor primária dos botões
theme.textPrimary      // Cor primária do texto
theme.layer01          // Cor de fundo da camada 1
theme.borderSubtle00   // Cor da borda sutil

📱 Responsividade

Todos os componentes são responsivos por padrão e se adaptam automaticamente a diferentes tamanhos de tela.

♿ Acessibilidade

A biblioteca segue as diretrizes WCAG 2.1 para acessibilidade, incluindo:

• Navegação por teclado
• Suporte a leitores de tela
• Contraste adequado
• Estados focáveis

🔧 Desenvolvimento

Para contribuir com o projeto:

git clone <repository>
cd prosperita-dumbo-react
yarn install
yarn dev

📄 Licença

MIT License - veja o arquivo LICENSE para detalhes.

🤝 Contribuição

Contribuições são bem-vindas! Por favor, leia o guia de contribuição antes de submeter um PR.