newagecomponent-ui

Installation

pnpm add newagecomponent-ui

or

npm install newagecomponent-ui

Available Components

Button

import { NaButton } from 'newagecomponent-ui';

<NaButton variant='primary' onClick={() => alert('Saved')}>
  Save
</NaButton>

<NaButton
  variant='primary'
  leftIcon={<UploadCloud size={24} />}
  onClick={() => alert('Uploaded')}
>
  Upload Files
</NaButton>

| Prop | Type | Default | Description | | ----------- | --------------------------------- | ----------- | ------------------------------- | | variant | 'primary' \| 'secondary' | 'primary' | Button style variant | | onClick | () => void | — | Function called on click | | leftIcon | React.ReactNode | — | Icon rendered on the left side | | rightIcon | React.ReactNode | — | Icon rendered on the right side | | disabled | boolean | false | Disables the button if true | | type | 'button' \| 'submit' \| 'reset' | 'button' | Button HTML type |

Input

import { Input } from 'newagecomponent-ui';

<Input
  placeholder='Type something'
  variant='default'
  sizeVariant='md'
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>;

| Prop | Type | Default | Description | | ------------- | --------------------------------------- | ----------- | ------------------------- | | variant | 'default' \| 'underline' | 'default' | Visual style of the input | | sizeVariant | 'sm' \| 'md' \| 'lg' | 'md' | Input size | | ...rest | InputHTMLAttributes<HTMLInputElement> | — | Native HTML attributes |

Link

import { Link } from 'newagecomponent-ui';

<Link href='/contact' variant='secondary' size='sm'>
  Contact Us
</Link>;

| Prop | Type | Default | Description | | --------- | -------------------------- | ----------- | --------------- | | href | string | — | Destination URL | | variant | 'primary' \| 'secondary' | 'primary' | Visual style | | size | 'sm' \| 'md' \| 'lg' | 'md' | Link size |

Sidebar

import { Sidebar } from 'newagecomponent-ui';

<Sidebar
  title='New Age'
  items={[
    {
      id: 'admin',
      label: 'Admin',
      icon: <User />,
      href: '/admin',
    },
    {
      id: 'dl',
      label: 'Direct Labor (DL)',
      icon: <Database />,
      href: '/direct-labor',
      children: [
        {
          id: 'catalog',
          label: 'Standard Time Catalog',
          icon: <ClipboardList />,
          href: '/direct-labor/standard-time-catalog',
        },
        {
          id: 'rate',
          label: 'Hourly Rate Catalog',
          icon: <DollarSign />,
          href: '/direct-labor/hourly-rate-catalog',
        },
      ],
    },
  ]}
  expanded={['dl']}
  onToggle={(id) => console.log('Toggle:', id)}
  onCollapseAll={() => console.log('Collapse all')}
  onCollapseToggle={() => console.log('Collapse sidebar')}
  LinkComponent={({ href, children }) => (
    <a href={href} style={{ color: 'inherit' }}>
      {children}
    </a>
  )}
  currentPath='/direct-labor/standard-time-catalog'
/>;

| Prop | Type | Default | Description | | ------------------ | ---------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------- | | title | string | — | Title shown on top of the sidebar | | items | SidebarItem[] | — | List of items and subitems | | expanded | string[] | [] | Array with IDs of the currently expanded parent items | | onToggle | (id: string) => void | — | Triggered when a parent item is toggled | | collapsed | boolean | false | Controls whether the sidebar is collapsed externally | | onCollapseToggle | () => void | — | Triggered when clicking to expand/collapse the entire sidebar | | onCollapseAll | () => void | — | Triggered when clicking an item without children, collapsing all expanded groups | | LinkComponent | (props: { href: string; children: ReactNode }) => ReactElement | — | Component used to render links (useful for Next.js Link or any routing library) | | currentPath | string | — | Current URL path used to determine which item is active |

NaBreadcrumb

import { NaBreadcrumb } from 'newagecomponent-ui';

<NaBreadcrumb
  items={[
    {
      label: 'Direct Labor',
      href: '/direct-labor',
      children: [
        {
          label: 'Standard Time Catalog',
          href: '/direct-labor/standard-time-catalog',
        },
        {
          label: 'Hourly Rate Catalog',
          href: '/direct-labor/hourly-rate-catalog',
        },
      ],
    },
    { label: 'Standard Time Catalog' },
  ]}
  LinkComponent={({ href, children }) => (
    <a href={href} style={{ color: 'inherit' }}>
      {children}
    </a>
  )}
/>;

| Prop | Type | Default | Description | | --------------- | ---------------------------------------------------------------- | ------- | ----------------------------------------------- | | items | BreadcrumbItem[] | — | Breadcrumb items with optional children | | separator | ReactNode | '/' | Separator between items | | className | string | — | Additional CSS classes | | LinkComponent | (props: { href: string; children: ReactNode }) => ReactElement | — | Custom link component (useful for Next.js Link) |

NaTooltip

import { NaTooltip } from 'newagecomponent-ui';

<NaTooltip title='Informações' placement='right' arrow>
  <button>Hover me</button>
</NaTooltip>;

NaTable

import { NaTable } from 'newagecomponent-ui';

<NaTable
  columns={[
    { field: 'product', headerName: 'Product' },
    { field: 'uph', headerName: 'UPH' },
    { field: 'efficiency', headerName: 'Efficiency' },
  ]}
  rows={[
    { id: 1, product: 'Item 01', uph: 100, efficiency: 0.95 },
    { id: 2, product: 'Item 02', uph: 120, efficiency: 0.92 },
  ]}
  enableCollapse
  getCollapseContent={(row) => <div>Detalhes de {row.product}</div>}
  pagination={{
    enabled: true,
    rowsPerPageOptions: [10, 50, 100],
    defaultRowsPerPage: 10,
  }}
  hideFooter={false}
/>;

| Prop | Type | Default | Description | | -------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------- | | columns | GridColDef[] | — | Columns of the table (follows MUI DataGrid-like structure) | | rows | T[] (extends GridValidRowModel) | — | Row data | | headerContent | ReactNode | — | Optional custom header above the table | | enableCollapse | boolean | false | Enables expandable rows | | getCollapseContent | (row: T) => ReactNode | — | Returns the collapse content component for a row | | pagination | { enabled: boolean; rowsPerPageOptions?: number[]; defaultRowsPerPage?: number; } | { enabled: true, rowsPerPageOptions: [10, 50, 100], defaultRowsPerPage: 10 } | Pagination configuration | | hideFooter | boolean | false | Whether to hide the pagination footer | | footerContent | ReactNode | — | Optional content below the table (e.g. status legend) | | density | 'standard' \| 'comfortable' \| 'compact' | 'standard' | Controls vertical padding of table rows | | sx | SxProps<Theme> | — | Custom styles via sx prop |

Notes

• Rows should have a unique id field.
• Pagination is client-side only.
• If enableCollapse is enabled, getCollapseContent must be provided.
• footerContent renders even if hideFooter is true.

Example with Collapse and Footer Content

<NaTable
  columns={[
    { field: 'name', headerName: 'Name' },
    { field: 'age', headerName: 'Age' },
  ]}
  rows={[{ id: 1, name: 'Alice', age: 28, details: 'Detail' }]}
  enableCollapse
  getCollapseContent={(row) => <div>{row.details}</div>}
  footerContent={<div style={{ paddingBottom: '5rem' }}>Status Legend</div>}
/>

NaConfirmAction

import { NaConfirmAction } from 'newagecomponent-ui';

<NaConfirmAction
  open={isOpen}
  onClose={() => setIsOpen(false)}
  onConfirm={() => console.log('Confirmed')}
  title='Inactivate Item'
  description='Are you sure you want to inactivate this item? This action cannot be undone.'
  keyword='inactivate'
  actionLabel='Inactivate'
  actionColor='error'
/>;

NaModal

import { NaModal } from 'newagecomponent-ui';

<NaModal open={isOpen} onClose={() => setIsOpen(false)} title='Example Modal'>
  <div>Modal Content</div>
</NaModal>;

| Prop | Type | Default | Description | | ------------------ | ----------------- | ------- | ----------------------------------- | | open | boolean | — | Whether the modal is open | | onClose | () => void | — | Function called on modal close | | title | string | — | Optional title displayed at the top | | children | React.ReactNode | — | Content inside the modal | | disableCloseIcon | boolean | false | Hides the close icon if true |

NaDropdownMenu

import { NaDropdownMenu } from 'newagecomponent-ui';
import { Edit, Trash2 } from 'lucide-react';

<NaDropdownMenu
  items={[
    {
      label: 'Edit',
      icon: <Edit size={16} />,
      onClick: () => console.log('Edit'),
    },
    {
      label: 'Inactivate',
      icon: <Trash2 size={16} />,
      onClick: () => console.log('Inactivate'),
    },
  ]}
  align='right'
/>;

| Prop | Type | Default | Descrição | | ----------- | ------------------------------------------------------------- | --------- | ---------------------------------------------------------------- | | items | { label: string; icon?: ReactNode; onClick: () => void; }[] | — | Lista de itens com ícone e ação | | align | 'left' \| 'right' | 'right' | Define o alinhamento do menu em relação ao botão de ativação | | className | string | — | Classe CSS opcional para personalização do contêiner do dropdown |

📦 Components Ready

• ✅ NaButton
• ✅ Input
• ✅ Link
• ✅ Sidebar
• ✅ NaBreadcrumb
• ✅ NaTooltip
• ✅ NaTable
• ✅ NaConfirmAction
• ✅ NaModal
• ✅ NaDropdownMenu