@sustaina/shared-ui

Shared UI component library for Sustaina micro-frontend modules.

Installation

npm install @sustaina/shared-ui

Setup

Import the stylesheet in your app entry point:

import "@sustaina/shared-ui/dist/index.css";

Usage

import { Button, Dialog, DataTable, DatePicker } from "@sustaina/shared-ui";

// Button
<Button variant="default" onClick={() => console.log("clicked")}>
  Submit
</Button>

// Dialog
<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <p>Hello from shared dialog</p>
  </DialogContent>
</Dialog>

// DatePicker
<DatePicker value={date} onChange={setDate} />

// DataTable
<DataTable columns={columns} data={rows} />

Available Components

| Component | Description | | ------------------------------- | ---------------------------- | | Button | Base button with variants | | Dialog / DialogAlert | Modal dialogs | | DataTable | Sortable, filterable table | | DatePicker / DateTimePicker | Date & time selection | | Combobox | Searchable select | | Form | Form wrapper with validation | | Checkbox | Checkbox input | | DropdownMenu | Dropdown menu | | Accordion | Collapsible sections | | Carousel | Image/content carousel | | ActionMenu | Context action menu | | AdvanceSearch | Advanced search panel | | AuditFooter | Audit trail footer | | CropperModal | Image cropper modal |

Hooks & Utils

import { useDebounce, formatDate } from "@sustaina/shared-ui";

Peer Dependencies

• React ^18
• Tailwind CSS ^3

test