@getrowscript/ui-react

RowScript UI - React component library.

Installation

npm install @getrowscript/ui-react

Usage

import {
  RowScriptUIAlert,
  RowScriptUIButton,
  RowScriptUIPage,
} from "@getrowscript/ui-react";
import "@getrowscript/ui-react/styles";

Components

| Component | Description | |-----------|-------------| | RowScriptUIAlert | Success/error/warning/info alert banners | | RowScriptUIAuthLayout | Split-panel authentication layout | | RowScriptUIBadge | Status badges with variants and sizes | | RowScriptUIBreadcrumb | Navigation breadcrumbs | | RowScriptUIButton | Full button system with variants, sizes, and icons | | RowScriptUIDatePicker | Custom calendar date picker | | RowScriptUIDataTable | Full-featured data table with TanStack Table | | RowScriptUIDialog | Confirmation dialog | | RowScriptUIConfirmDialog | Danger confirmation dialog | | RowScriptUIFormDialog | Form dialog with nested confirmation | | RowScriptUIEditor | Rich text editor using ReactQuill | | RowScriptUIErrorPage | Generic error page | | RowScriptUINotFound | 404 page | | RowScriptUITextInput | Text input with label, error, and helper text | | RowScriptUIPasswordInput | Password input with toggle visibility | | RowScriptUIIconInput | Icon picker input | | RowScriptUITextArea | Multi-line text input | | RowScriptUINumberInput | Numeric input | | RowScriptUIOTPInput | 6-digit OTP verification input | | RowScriptUIPage | Page layout wrapper with title and breadcrumbs | | RowScriptUISelect | Dropdown select | | RowScriptUISelectSearch | Searchable dropdown select | | RowScriptUIMultiSelect | Multi-select with tags | | RowScriptUISkeleton | Loading skeleton | | RowScriptUIToast | Toast notification component | | RowScriptUIToastProvider | Toast notification provider |

Hooks

| Hook | Description | |------|-------------| | useDebounce | Debounce a value | | useMediaQuery | Responsive media query hook |

Utilities

| Utility | Description | |---------|-------------| | formatDate | Format date (Indonesian locale) | | formatTime | Format time (Indonesian locale) | | slugify | Convert text to URL slug | | normalizeCode | Normalize code string | | generateRoleCode | Generate role code | | generatePermissionCode | Generate permission code | | RowScriptUITextPair | Primary/secondary text display | | RowScriptUIDateTimeText | Date and time display |

The prefixed names are the primary public API. Older unprefixed component names remain available as compatibility aliases.

License

MIT