@rippling/rippling-sdk 0.2.0-alpha.34 → 0.2.0-alpha.36

package/src/lib/sdui/components.ts

@@ -0,0 +1,308 @@
+/**
+ * AUTO-GENERATED from component-manifest.json
+ * Generated at: 2026-04-17T04:10:01.126Z
+ * Components: 128
+ *
+ * Do not edit manually. Run: npx tsx scripts/codegen-builder.ts
+ */
+
+import type { ActionBinding } from './actions';
+
+export interface SpecNode {
+  type: string;
+  props: Record<string, unknown>;
+  children: SpecNode[];
+  visible?: unknown;
+  on?: Record<string, ActionBinding | ActionBinding[]>;
+  watch?: Record<string, unknown>;
+  repeat?: { statePath: string; key?: string };
+}
+
+type EventMap = Record<string, string>;
+
+function createComponent(type: string, eventMap: EventMap = {}) {
+  return (props: Record<string, unknown> = {}): SpecNode => {
+    const node: SpecNode = { type, props: {}, children: [] };
+    for (const [key, value] of Object.entries(props)) {
+      if (key === 'children') {
+        node.children = (Array.isArray(value) ? value : [value]).flat().filter(Boolean) as SpecNode[];
+      } else if (key === 'visible') {
+        node.visible = value;
+      } else if (key === 'watch') {
+        node.watch = value as Record<string, unknown>;
+      } else if (key === 'repeat') {
+        node.repeat = value as { statePath: string; key?: string };
+      } else if (eventMap[key]) {
+        node.on = node.on || {};
+        node.on[eventMap[key]] = value as ActionBinding | ActionBinding[];
+      } else {
+        node.props[key] = value;
+      }
+    }
+    return node;
+  };
+}
+
+export const TextInput = createComponent('TextInput', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onFocus: 'focus',
+  onClick: 'click',
+  onKeydown: 'keydown',
+  onKeyup: 'keyup',
+  onPaste: 'paste',
+  onMouseenter: 'mouseenter',
+  onMouseleave: 'mouseleave',
+});
+export const Select = createComponent('Select', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onFocus: 'focus',
+  onPaste: 'paste',
+  onMenuToggle: 'menuToggle',
+});
+export const AppGroupSelect = createComponent('AppGroupSelect', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onFocus: 'focus',
+  onPaste: 'paste',
+  onMenuToggle: 'menuToggle',
+});
+export const Checkbox = createComponent('Checkbox', { onChange: 'change', onBlur: 'blur' });
+export const CheckboxGroup = createComponent('CheckboxGroup', { onChange: 'change', onBlur: 'blur' });
+export const Email = createComponent('Email', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onFocus: 'focus',
+  onClick: 'click',
+  onKeydown: 'keydown',
+  onKeyup: 'keyup',
+  onPaste: 'paste',
+  onMouseenter: 'mouseenter',
+  onMouseleave: 'mouseleave',
+});
+export const Number = createComponent('Number', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onChangeRaw: 'changeRaw',
+  onChangeCalculationState: 'changeCalculationState',
+});
+export const Date = createComponent('Date', { onChange: 'change', onBlur: 'blur' });
+export const DateRange = createComponent('DateRange', { onChange: 'change', onBlur: 'blur' });
+export const DateInlineMulti = createComponent('DateInlineMulti', { onChange: 'change', onBlur: 'blur' });
+export const Textarea = createComponent('Textarea', { onChange: 'change', onBlur: 'blur', onFocus: 'focus' });
+export const Radio = createComponent('Radio', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onMouseenter: 'mouseenter',
+  onMouseleave: 'mouseleave',
+});
+export const Phone = createComponent('Phone', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onFocus: 'focus',
+  onClick: 'click',
+  onKeydown: 'keydown',
+  onKeyup: 'keyup',
+  onPaste: 'paste',
+  onMouseenter: 'mouseenter',
+  onMouseleave: 'mouseleave',
+  onCountryCodeChange: 'countryCodeChange',
+});
+export const Password = createComponent('Password', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onFocus: 'focus',
+  onClick: 'click',
+  onKeydown: 'keydown',
+  onKeyup: 'keyup',
+  onPaste: 'paste',
+  onMouseenter: 'mouseenter',
+  onMouseleave: 'mouseleave',
+  onReveal: 'reveal',
+});
+export const Switch = createComponent('Switch', { onChange: 'change', onBlur: 'blur' });
+export const FileDrop = createComponent('FileDrop', { onChange: 'change', onBlur: 'blur' });
+export const TextAutoSuggest = createComponent('TextAutoSuggest', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onFocus: 'focus',
+  onClick: 'click',
+});
+export const Currency = createComponent('Currency', { onChange: 'change', onBlur: 'blur' });
+export const WorkEmail = createComponent('WorkEmail', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onFocus: 'focus',
+  onClick: 'click',
+  onKeydown: 'keydown',
+  onKeyup: 'keyup',
+  onPaste: 'paste',
+  onMouseenter: 'mouseenter',
+  onMouseleave: 'mouseleave',
+});
+export const Percentage = createComponent('Percentage', { onChange: 'change', onBlur: 'blur' });
+export const SegmentedControl = createComponent('SegmentedControl', { onChange: 'change', onBlur: 'blur' });
+export const Time = createComponent('Time', { onChange: 'change', onBlur: 'blur' });
+export const TimeRange = createComponent('TimeRange', { onChange: 'change', onBlur: 'blur' });
+export const Timezone = createComponent('Timezone', { onChange: 'change', onBlur: 'blur', onFocus: 'focus' });
+export const Slider = createComponent('Slider', {
+  onChange: 'change',
+  onBlur: 'blur',
+  onBeforeChange: 'beforeChange',
+  onAfterChange: 'afterChange',
+});
+export const RangeSlider = createComponent('RangeSlider', {
+  onChange: 'change',
+  onBeforeChange: 'beforeChange',
+  onAfterChange: 'afterChange',
+  onBlur: 'blur',
+});
+export const Masker = createComponent('Masker', { onChange: 'change', onBlur: 'blur' });
+export const DaySelector = createComponent('DaySelector', { onChange: 'change' });
+export const ColorPicker = createComponent('ColorPicker', { onChange: 'change', onBlur: 'blur' });
+export const SelectableGroup = createComponent('SelectableGroup', { onChange: 'change' });
+export const Ssn = createComponent('Ssn', { onChange: 'change', onBlur: 'blur' });
+export const Sin = createComponent('Sin', { onChange: 'change', onBlur: 'blur' });
+export const Signature = createComponent('Signature', { onChange: 'change' });
+export const Survey = createComponent('Survey', { onChange: 'change' });
+export const Tree = createComponent('Tree', { onChange: 'change', onFooterAction: 'footerAction' });
+export const TreeSelect = createComponent('TreeSelect', { onChange: 'change' });
+export const File = createComponent('File', { onChange: 'change', onDelete: 'delete' });
+export const InputGroup = createComponent('InputGroup');
+export const Field = createComponent('Field');
+export const ActionCard = createComponent('ActionCard', {
+  onPressPrimary: 'pressPrimary',
+  onPressSecondary: 'pressSecondary',
+});
+export const Alert = createComponent('Alert', {
+  onPressPrimary: 'pressPrimary',
+  onPressSecondary: 'pressSecondary',
+  onDismiss: 'dismiss',
+});
+export const Avatar = createComponent('Avatar', { onPress: 'press' });
+export const Badge = createComponent('Badge');
+export const Chip = createComponent('Chip', { onDismiss: 'dismiss', onPress: 'press' });
+export const Card = createComponent('Card', {
+  onEdit: 'edit',
+  onDelete: 'delete',
+  onAdd: 'add',
+  onClick: 'click',
+  onAction: 'action',
+});
+export const ContentLoader = createComponent('ContentLoader');
+export const Divider = createComponent('Divider');
+export const Icon = createComponent('Icon', { onPress: 'press' });
+export const Label = createComponent('Label');
+export const ListItem = createComponent('ListItem', { onPress: 'press' });
+export const Modal = createComponent('Modal', { onClose: 'close' });
+export const ModalFooter = createComponent('ModalFooter');
+export const ProgressBar = createComponent('ProgressBar');
+export const Skeleton = createComponent('Skeleton');
+export const Spinner = createComponent('Spinner');
+export const Stepper = createComponent('Stepper', { onClick: 'click' });
+export const TextClip = createComponent('TextClip');
+export const TextSnippet = createComponent('TextSnippet');
+export const Tip = createComponent('Tip');
+export const CheckList = createComponent('CheckList', { onChange: 'change' });
+export const DistributionBar = createComponent('DistributionBar');
+export const ImageViewer = createComponent('ImageViewer');
+export const ObjectUI = createComponent('ObjectUI');
+export const ObjectUITemplate = createComponent('ObjectUITemplate');
+export const ObjectUIHeader = createComponent('ObjectUIHeader');
+export const ObjectUIContent = createComponent('ObjectUIContent');
+export const ObjectUIStats = createComponent('ObjectUIStats', { onActionClick: 'actionClick' });
+export const SnackBar = createComponent('SnackBar', { onDismiss: 'dismiss' });
+export const Video = createComponent('Video');
+export const AvatarList = createComponent('AvatarList');
+export const Image = createComponent('Image', { onPress: 'press', onLoad: 'load', onError: 'error' });
+export const AtomsSeparator = createComponent('AtomsSeparator');
+export const Carousel = createComponent('Carousel', { onDone: 'done' });
+export const TableBasic = createComponent('TableBasic');
+export const LocationCard = createComponent('LocationCard', {
+  onEdit: 'edit',
+  onDelete: 'delete',
+  onClick: 'click',
+  onAction: 'action',
+});
+export const LoaderCard = createComponent('LoaderCard');
+export const LayoutCard = createComponent('LayoutCard', { onPress: 'press' });
+export const AppGroupLoader = createComponent('AppGroupLoader');
+export const ChartLoader = createComponent('ChartLoader');
+export const ReportLoader = createComponent('ReportLoader');
+export const ReportShareLoader = createComponent('ReportShareLoader');
+export const ReportViewerLoader = createComponent('ReportViewerLoader');
+export const SettingsLoader = createComponent('SettingsLoader');
+export const ChipGroup = createComponent('ChipGroup', { onOverflowChange: 'overflowChange' });
+export const ModalCloseButton = createComponent('ModalCloseButton');
+export const Status = createComponent('Status');
+export const ApiError = createComponent('ApiError');
+export const Circle = createComponent('Circle');
+export const CountDown = createComponent('CountDown');
+export const Country = createComponent('Country');
+export const ToggleableArrow = createComponent('ToggleableArrow');
+export const TitleCaption = createComponent('TitleCaption');
+export const AiIcon = createComponent('AiIcon');
+export const Breadcrumb = createComponent('Breadcrumb', { onSelect: 'select' });
+export const Button = createComponent('Button', {
+  onPress: 'press',
+  onPressWhileDisabled: 'pressWhileDisabled',
+  onMouseEnter: 'mouseEnter',
+  onMouseLeave: 'mouseLeave',
+});
+export const ButtonGroup = createComponent('ButtonGroup');
+export const DraggableList = createComponent('DraggableList', {
+  onUpdate: 'update',
+  onRemove: 'remove',
+  onDragStart: 'dragStart',
+  onDragEnd: 'dragEnd',
+});
+export const Drawer = createComponent('Drawer', { onClose: 'close' });
+export const Dropdown = createComponent('Dropdown', { onChange: 'change' });
+export const ExpansionPanel = createComponent('ExpansionPanel', { onToggle: 'toggle' });
+export const ExpansionPanelGroup = createComponent('ExpansionPanelGroup');
+export const FloatingButton = createComponent('FloatingButton', {
+  onPress: 'press',
+  onPressWhileDisabled: 'pressWhileDisabled',
+  onMouseEnter: 'mouseEnter',
+  onMouseLeave: 'mouseLeave',
+});
+export const IconButton = createComponent('IconButton', {
+  onPress: 'press',
+  onPressWhileDisabled: 'pressWhileDisabled',
+  onMouseEnter: 'mouseEnter',
+  onMouseLeave: 'mouseLeave',
+});
+export const ItemNavigator = createComponent('ItemNavigator', { onNext: 'next', onPrevious: 'previous' });
+export const Link = createComponent('Link', { onPress: 'press' });
+export const MenuList = createComponent('MenuList', { onSelect: 'select' });
+export const NestedList = createComponent('NestedList', { onToggle: 'toggle', onSelect: 'select' });
+export const Paginate = createComponent('Paginate', { onChange: 'change' });
+export const SelectableMenu = createComponent('SelectableMenu', { onChange: 'change' });
+export const ShowMore = createComponent('ShowMore');
+export const Tab = createComponent('Tab', { onChange: 'change' });
+export const Heading = createComponent('Heading');
+export const Text = createComponent('Text');
+export const Box = createComponent('Box');
+export const Grid = createComponent('Grid', {
+  onRowClick: 'rowClick',
+  onRowAction: 'rowAction',
+  onHeaderAction: 'headerAction',
+});
+export const HStack = createComponent('HStack');
+export const LabelGroup = createComponent('LabelGroup');
+export const Layout = createComponent('Layout');
+export const PageContent = createComponent('PageContent');
+export const PageHeader = createComponent('PageHeader');
+export const PageAppLogo = createComponent('PageAppLogo');
+export const PageFooter = createComponent('PageFooter', { onContinue: 'continue' });
+export const Pane = createComponent('Pane', {
+  onCollapsedChange: 'collapsedChange',
+  onDismiss: 'dismiss',
+  onResize: 'resize',
+});
+export const Responsive = createComponent('Responsive');
+export const SplitPane = createComponent('SplitPane');
+export const VStack = createComponent('VStack');
+export const CustomObjectGrid = createComponent('CustomObjectGrid');
+export const ObjectListView = createComponent('ObjectListView');

package/src/lib/sdui/conditions.ts

@@ -0,0 +1,59 @@
+import { extractPath } from './state';
+
+export interface StateCondition {
+  $state: string;
+  eq?: unknown;
+  neq?: unknown;
+  gt?: number;
+  gte?: number;
+  lt?: number;
+  lte?: number;
+  not?: boolean;
+}
+
+export type OrCondition = { $or: VisibilityCondition[] };
+export type VisibilityCondition = StateCondition | StateCondition[] | OrCondition;
+
+function pathOf(ref: unknown): string {
+  return extractPath(ref);
+}
+
+export function eq(ref: unknown, value: unknown): StateCondition {
+  return { $state: pathOf(ref), eq: value };
+}
+
+export function neq(ref: unknown, value: unknown): StateCondition {
+  return { $state: pathOf(ref), neq: value };
+}
+
+export function gt(ref: unknown, value: number): StateCondition {
+  return { $state: pathOf(ref), gt: value };
+}
+
+export function gte(ref: unknown, value: number): StateCondition {
+  return { $state: pathOf(ref), gte: value };
+}
+
+export function lt(ref: unknown, value: number): StateCondition {
+  return { $state: pathOf(ref), lt: value };
+}
+
+export function lte(ref: unknown, value: number): StateCondition {
+  return { $state: pathOf(ref), lte: value };
+}
+
+export function truthy(ref: unknown): StateCondition {
+  return { $state: pathOf(ref) };
+}
+
+export function falsy(ref: unknown): StateCondition {
+  return { $state: pathOf(ref), not: true };
+}
+
+export function and(...conditions: StateCondition[]): StateCondition[] {
+  return conditions;
+}
+
+export function or(...conditions: VisibilityCondition[]): OrCondition {
+  return { $or: conditions };
+}

package/src/lib/sdui/directives.ts

@@ -0,0 +1,42 @@
+import type { SpecNode } from './components';
+import { extractPath } from './state';
+
+export interface ItemRef {
+  $item: string;
+}
+
+export interface BindItemRef {
+  $bindItem: string;
+}
+
+export interface IndexRef {
+  $index: true;
+}
+
+export function $item(field: string): ItemRef {
+  return { $item: field };
+}
+
+export function $bindItem(field: string): BindItemRef {
+  return { $bindItem: field };
+}
+
+export function $index(): IndexRef {
+  return { $index: true };
+}
+
+export function visible(condition: unknown, element: SpecNode): SpecNode {
+  return { ...element, visible: condition };
+}
+
+export function repeat(
+  stateRef: unknown,
+  opts: { key?: string },
+  childFn: (item: typeof $item, index: typeof $index, bindItem: typeof $bindItem) => SpecNode,
+): SpecNode {
+  const child = childFn($item, $index, $bindItem);
+  return {
+    ...child,
+    repeat: { statePath: extractPath(stateRef), ...(opts.key ? { key: opts.key } : {}) },
+  };
+}