netsuite-uif-spa-reference

What this skill does

# NetSuite UIF Reference

Complete type definitions for `@uif-js/core` and `@uif-js/component`, the two packages that power NetSuite SPA (single-page application) user interfaces.

## When to Use

- Building or modifying a UIF SPA component (JSX files)
- Looking up the exact API for a UIF class (Date, ArrayDataSource, Router, etc.)
- Checking available props/methods on UIF components (DataGrid, StackPanel, Button, etc.)
- Debugging runtime errors from UIF framework code
- Verifying enum values (for example, `Button.Hierarchy`, `GapSize`, `DataGrid.ColumnType`)
- Understanding UIF Date vs. Native Date behavior

## Reference Data

The type definitions are located in the `references/` subdirectory.

| File | Package | Contents |
|------|---------|----------|
| `references/core.d.ts` | `@uif-js/core` | Core framework: Date, ArrayDataSource, Ajax, Router, useState, useEffect, Context, etc. |
| `references/component.d.ts` | `@uif-js/component` | UI components: DataGrid, StackPanel, Button, Text, Badge, Heading, Card, ContentPanel, Modal, etc. |

## Lookup Instructions

To find information about a specific class or component:

1. **Search by class name**:
   ```
   Search for `class Date` in the local `references/` directory.
   ```

2. **Search by method name**:
   ```
   Search for `lastOfMonth`, `firstOfMonth`, or `addDay` in `references/core.d.ts`.
   ```

3. **Search by enum**:
   ```
   Search for `enum GapSize`, `enum Hierarchy`, or `enum Type` in `references/component.d.ts`.
   ```

4. **Read a section**: Once you find the line number, open that part of the file to view the full definition.

## Key Classes Quick Reference

### @uif-js/core

| Class | Purpose | Key Members |
|-------|---------|-------------|
| `Date` | UIF date wrapper | `.year`, `.month` (0-indexed), `.day`, `.firstOfMonth()`, `.lastOfMonth()`, `.addDay()`, `.addMonth()`, `.stripTime()`, `.toDate()` (→ native), `Date.now()`, `Date.today()` |
| `ArrayDataSource` | Data provider for grids | `ArrayDataSource<T>` – constructor takes `T[]` |
| `Ajax` | HTTP client | `Ajax.post()`, `Ajax.get()`, `Ajax.DataType`, `Ajax.ResponseType` |
| `Router` | SPA routing | `Router.Routes`, `Router.Route`, `Router.Hash`, `Router.Path` |
| `useState` | State hook | `useState(initialValue)` → `[value, setter]` |
| `useEffect` | Effect hook | `useEffect(callback, deps)` |
| `useContext` | Context hook | `useContext(contextName: string)` – takes a string, for example, `ContextType.ROUTER_LOCATION` |
| `Context` | Context provider | `Context.Provider`, `Context.Consumer` |
| `ContextType` | Context type string constants | `ContextType.ROUTER_LOCATION`, `ContextType.ROUTER_NAVIGATION`, `ContextType.ROUTER_ROUTE`, `ContextType.I18N`, `ContextType.PREFERENCES`, `ContextType.FOCUS_MANAGER`, `ContextType.STORE` – full list: 31 values; search for `ContextType` in `core.d.ts` |
| `useCallback` | Memoized callback | `useCallback(fn, deps)` – prevents unnecessary re-renders |
| `useMemo` | Memoized value | `useMemo(() => compute(), deps)` |
| `useRef` | Mutable ref container | `useRef(initialValue)` – `.current` persists across renders |
| `Translation` | i18n support | `Translation.get('key')` for localized strings |
| `Store` | Redux-like state container | `Store.create({ reducer, initial })`; factory; `Store.Provider` – wrap the tree in JSX; `useSelector(fn)` – select slice; `useDispatch()` – dispatch actions |
| `Reducer` | Creates typed reducers | `Reducer.create(handlers)`; action handler map; `Reducer.combine([{path, reduce}])` – combine reducers (takes array, not plain object) |
| `useDispatch` | Dispatch hook | `var dispatch = useDispatch()`; dispatches Store actions; requires `Store.Provider` ancestor |
| `useSelector` | State selector hook | `var value = useSelector(function(state) { return state.data; })` – selects state slice from Store |
| `CancellationTokenSource` | Async operation cancellation | `new CancellationTokenSource()` → `var token = source.token` (pass to async fn), `source.cancel()` (call in useEffect cleanup) |
| `CancellationToken` | Cancellation check | `token.cancelled`; check before updating state in async callbacks |
| `TreeDataSource` | Hierarchical grid/tree data | `new TreeDataSource({ data, childAccessor: fn })`; `fn` receives item, returns children array (or pass string property name). Use with `DataGrid.ColumnType.TREE` or `TreeView` |
| `LazyDataSource` | On-demand data loading | `new LazyDataSource(() => fetch().then(data => new ArrayDataSource(data)))` – wraps any async data load. `.load()` triggers load; `.loaded` checks status. Use with DataGrid `paging` for server-side pagination |
| `ImmutableArray` | Immutable array helpers | `ImmutableArray.push(arr, item)`, `ImmutableArray.remove(arr, item)`, `ImmutableArray.set(arr, index, item)`, `ImmutableArray.filter(arr, fn)`, `ImmutableArray.EMPTY`; all return new arrays |
| `ImmutableObject` | Immutable object helpers | `ImmutableObject.set(obj, 'key', value)`, `ImmutableObject.merge(obj, partial)`, `ImmutableObject.remove(obj, 'key')`; all return new objects |
| `FormatService` | Locale-aware type formatting | `FormatService.forI18n(i18n).format(date, Format.DATE)`; converts UIF Date to display string. `Format` enum: `DATE`, `DATE_TIME`, `TIME`, `INTEGER`, `FLOAT`. Get `i18n` via `useContext(ContextType.I18N)` |
| `SystemIcon` | System icon constants (277) | `SystemIcon.ADD`, `SystemIcon.EDIT`, `SystemIcon.DELETE`, `SystemIcon.FILTER`, `SystemIcon.HOME`, `SystemIcon.SEARCH`, `SystemIcon.SETTINGS`, `SystemIcon.SAVE`, `SystemIcon.CLOSE`, `SystemIcon.ALERT`, `SystemIcon.CALENDAR`, `SystemIcon.DOWNLOAD_DOCUMENT`, `SystemIcon.UPLOAD_DOCUMENT`, `SystemIcon.PERSON` – search for `SystemIcon` in `core.d.ts` for full catalog |
| `RecordIcon` | NetSuite record icons (43) | `RecordIcon.CUSTOMER`, `RecordIcon.EMPLOYEE`, `RecordIcon.INVOICE`, `RecordIcon.SALES_ORDER`, `RecordIcon.CONTACT`, `RecordIcon.ITEM`, `RecordIcon.CASE`, `RecordIcon.TASK` |
| `EventBus` | Pub/sub event bus | `eventBus.subscribe(sender, listener)`, `eventBus.publish(event)` – for decoupled cross-component communication without prop-drilling or shared state |
| `KeyCode` | Keyboard key constants (101) | `KeyCode.ENTER`, `KeyCode.ESCAPE`, `KeyCode.TAB`, `KeyCode.BACKSPACE`, `KeyCode.SPACE`, `KeyCode.ARROW_DOWN`, `KeyCode.ARROW_UP`, `KeyCode.F1`–`KeyCode.F12`, `KeyCode.A`–`KeyCode.Z`, `KeyCode.NUM_0`–`KeyCode.NUM_9` |

### @uif-js/component

| Component | Purpose | Key Props |
|-----------|---------|-----------|
| `DataGrid` | Table/grid display | `dataSource`, `columns`, `columnStretch`, `rootStyle`, `dataRowHeight`, `highlightRowsOnHover` |
| `StackPanel` | Layout container | `orientation`, `itemGap`, `outerGap`, `alignment` |
| `Button` | Clickable button | `label`, `action`, `enabled` (not `disabled` – constructor-only). Enums: `Button.Hierarchy`: PRIMARY/SECONDARY/DANGER; `Button.Type`: DEFAULT/PRIMARY/PURE/EMBEDDED/GHOST/DANGER/LINK; `Button.Size`: SMALLER/SMALL/MEDIUM/LARGE; `Button.Behavior`: DEFAULT/TOGGLE |
| `Text` | Text display | `type` (WEAK, STRONG, etc.) |
| `Badge` | Status badges | `label`, `classList` (single class only!) |
| `Heading` | Section headings | `type` (LARGE_HEADING, MEDIUM_HEADING, etc.) |
| `Card` | Card container | Content wrapper |
| `ContentPanel` | Content wrapper | `outerGap`, `horizontalAlignment` |
| `ApplicationHeader` | Page header | `title` |
| `Modal` | Dialog overlay | `title`, `size` (DEFAULT/SMALL/MEDIUM/LARGE), `rootStyle`, `owner`, `content`, `closeButton` |
| `Loader` | Loading spinner | `label` |
| `GridPanel` | CSS Grid layout | `columns`, `defaultColumnWidth`, `gap`; prefer over horizontal StackPanel |
| `ScrollPanel` | Scrollable container | `orientation` – requires bounded parent height |
| `NavigationDrawer` | Vertical nav | `selectedValue`, items with `route`, `icon`, `label` |
| `Dropdown` | Select input | `dataSource`, `selectedValue`, `onSelectedValueChanged`; do not use `Select` |
| `TextBox` | Text input | `t