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

package/examples/sdui/sdui-crud-todo/rippling-function.ts

@@ -0,0 +1,367 @@
+/**
+ * ----------------------------------------------------------------------------
+ * PASTE THIS ENTIRE FILE INTO THE RIPPLING FUNCTION EDITOR TO PREVIEW RENDERED
+ * SDUI (CUSTOM PAGE). DEPENDS ON @rippling/rippling-sdk AND @rippling/sdui-builder.
+ * MOCK DATA ONLY — NO CUSTOM OBJECT API NAMES; SAFE TO RENDER WITHOUT CO DEFINITIONS.
+ * ----------------------------------------------------------------------------
+ * Pair file sdui-crud-todo.ts uses import from '@rippling/rippling-sdk/lib/sdui' for local runs.
+ */
+
+/*
+import SDUI from '@rippling/sdui-builder';
+import { FunctionContext, FunctionEvent, FunctionResponse } from '@rippling/rippling-sdk';
+
+const INITIAL_TODOS = [
+  {
+    id: 't1',
+    _key: 't1',
+    title__c: 'Ship SDK patch',
+    status__c: 'In Progress',
+    priority__c: 'High',
+    notes__c: 'Regression pass on SDUI examples',
+  },
+  {
+    id: 't2',
+    _key: 't2',
+    title__c: 'Document Function paste flow',
+    status__c: 'To Do',
+    priority__c: 'Medium',
+    notes__c: 'Caps comment on rippling-function.ts',
+  },
+  {
+    id: 't3',
+    _key: 't3',
+    title__c: 'Weekly sync',
+    status__c: 'Done',
+    priority__c: 'Low',
+    notes__c: '',
+  },
+];
+
+let mutableTodos = INITIAL_TODOS.map((r) => ({ ...r }));
+
+function renderSpec(functionId: string) {
+  const s = SDUI.createState({
+    todos: mutableTodos,
+    selectedRow: null as unknown,
+    showCreateModal: false,
+    showEditModal: false,
+    form: { title: '', status: '', priority: '', notes: '' },
+  });
+
+  const mainColumn = SDUI.components.VStack({
+    gap: 'space500',
+    children: [
+      SDUI.components.VStack({
+        gap: 'space300',
+        children: [
+          SDUI.components.HStack({
+            gap: 'space200',
+            align: 'center',
+            wrap: true,
+            children: [
+              SDUI.components.Heading({
+                level: '2',
+                text: 'Team todos',
+              }),
+              SDUI.components.Badge({
+                text: 'Demo data',
+                appearance: 'NEUTRAL',
+                size: 'S',
+              }),
+            ],
+          }),
+          SDUI.components.Text({
+            text: 'Create, edit, and delete call this Function; the grid below uses sample rows until you connect Custom Objects or your own API.',
+            typestyle: 'bodyMd',
+            color: 'secondary',
+            maxWidth: '720px',
+          }),
+        ],
+      }),
+      SDUI.components.Layout({
+        width: '100%',
+        children: [SDUI.components.Divider({})],
+      }),
+      SDUI.components.Grid({
+        data: s.todos,
+        columns: [
+          { id: 'title__c', header: 'Title', data: 'title__c' },
+          { id: 'status__c', header: 'Status', data: 'status__c', type: 'text' },
+          { id: 'priority__c', header: 'Priority', data: 'priority__c', type: 'text' },
+          { id: 'notes__c', header: 'Notes', data: 'notes__c' },
+        ],
+        selectedRow: s.selectedRow.$bind,
+        headerActions: [{ id: 'new', label: 'New Todo', icon: 'ADD', appearance: 'PRIMARY' }],
+        onHeaderAction: [
+          SDUI.actions.set(s.form, { title: '', status: '', priority: '', notes: '' }),
+          SDUI.actions.set(s.showCreateModal, true),
+        ],
+        rowActions: [
+          { id: 'edit', label: 'Edit', icon: 'EDIT_OUTLINE', placement: 'menu' },
+          { id: 'delete', label: 'Delete', icon: 'TRASH_OUTLINE', placement: 'menu' },
+        ],
+        onRowAction: [
+          SDUI.actions.set(s.form, {
+            title: s.selectedRow['title__c'],
+            status: s.selectedRow['status__c'],
+            priority: s.selectedRow['priority__c'],
+            notes: s.selectedRow['notes__c'],
+          }),
+          SDUI.actions.set(s.showEditModal, true),
+        ],
+        onRowClick: [
+          SDUI.actions.set(s.form, {
+            title: s.selectedRow['title__c'],
+            status: s.selectedRow['status__c'],
+            priority: s.selectedRow['priority__c'],
+            notes: s.selectedRow['notes__c'],
+          }),
+          SDUI.actions.set(s.showEditModal, true),
+        ],
+      }),
+    ],
+  });
+
+  const root = SDUI.components.VStack({
+    align: 'center',
+    gap: 'space0',
+    children: [
+      SDUI.components.Layout({
+        maxWidth: '1080px',
+        width: '100%',
+        margin: { left: 'auto', right: 'auto' },
+        padding: { top: 32, bottom: 40, left: 24, right: 24 },
+        children: [mainColumn],
+      }),
+
+      SDUI.components.Modal({
+        title: 'New Todo',
+        isOpen: s.showCreateModal.$bind,
+        onClose: SDUI.actions.set(s.showCreateModal, false),
+        children: [
+          SDUI.components.VStack({
+            gap: 'space300',
+            children: [
+              SDUI.components.TextInput({
+                label: 'Title',
+                name: 'title',
+                value: s.form.title.$bind,
+                isRequired: true,
+              }),
+              SDUI.components.Select({
+                label: 'Status',
+                name: 'status',
+                value: s.form.status.$bind,
+                options: [
+                  { label: 'To Do', value: 'To Do' },
+                  { label: 'In Progress', value: 'In Progress' },
+                  { label: 'Done', value: 'Done' },
+                ],
+              }),
+              SDUI.components.Select({
+                label: 'Priority',
+                name: 'priority',
+                value: s.form.priority.$bind,
+                options: [
+                  { label: 'Low', value: 'Low' },
+                  { label: 'Medium', value: 'Medium' },
+                  { label: 'High', value: 'High' },
+                ],
+              }),
+              SDUI.components.Textarea({
+                label: 'Notes',
+                name: 'notes',
+                value: s.form.notes.$bind,
+              }),
+            ],
+          }),
+          SDUI.components.HStack({
+            gap: 'space200',
+            justify: 'flex-end',
+            children: [
+              SDUI.components.Button({
+                label: 'Cancel',
+                appearance: 'OUTLINE',
+                onPress: SDUI.actions.set(s.showCreateModal, false),
+              }),
+              SDUI.components.Button({
+                label: 'Create',
+                appearance: 'PRIMARY',
+                onPress: SDUI.actions.callFunction(functionId, 'create', {
+                  title: s.form.title,
+                  status: s.form.status,
+                  priority: s.form.priority,
+                  notes: s.form.notes,
+                  responsePath: '/todos',
+                  onSuccess: { set: { '/showCreateModal': false } },
+                }),
+              }),
+            ],
+          }),
+        ],
+      }),
+
+      SDUI.components.Modal({
+        title: 'Edit Todo',
+        isOpen: s.showEditModal.$bind,
+        onClose: SDUI.actions.set(s.showEditModal, false),
+        children: [
+          SDUI.components.VStack({
+            gap: 'space300',
+            children: [
+              SDUI.components.TextInput({
+                label: 'Title',
+                name: 'edit_title',
+                value: s.form.title.$bind,
+                isRequired: true,
+              }),
+              SDUI.components.Select({
+                label: 'Status',
+                name: 'edit_status',
+                value: s.form.status.$bind,
+                options: [
+                  { label: 'To Do', value: 'To Do' },
+                  { label: 'In Progress', value: 'In Progress' },
+                  { label: 'Done', value: 'Done' },
+                ],
+              }),
+              SDUI.components.Select({
+                label: 'Priority',
+                name: 'edit_priority',
+                value: s.form.priority.$bind,
+                options: [
+                  { label: 'Low', value: 'Low' },
+                  { label: 'Medium', value: 'Medium' },
+                  { label: 'High', value: 'High' },
+                ],
+              }),
+              SDUI.components.Textarea({
+                label: 'Notes',
+                name: 'edit_notes',
+                value: s.form.notes.$bind,
+              }),
+            ],
+          }),
+          SDUI.components.HStack({
+            gap: 'space200',
+            justify: 'flex-end',
+            children: [
+              SDUI.components.Button({
+                label: 'Delete',
+                appearance: 'DESTRUCTIVE',
+                onPress: SDUI.actions.callFunction(functionId, 'delete', {
+                  id: s.selectedRow['id'],
+                  responsePath: '/todos',
+                  onSuccess: { set: { '/showEditModal': false } },
+                }),
+              }),
+              SDUI.components.Button({
+                label: 'Cancel',
+                appearance: 'OUTLINE',
+                onPress: SDUI.actions.set(s.showEditModal, false),
+              }),
+              SDUI.components.Button({
+                label: 'Save',
+                appearance: 'PRIMARY',
+                onPress: SDUI.actions.callFunction(functionId, 'update', {
+                  id: s.selectedRow['id'],
+                  title: s.form.title,
+                  status: s.form.status,
+                  priority: s.form.priority,
+                  notes: s.form.notes,
+                  responsePath: '/todos',
+                  onSuccess: { set: { '/showEditModal': false } },
+                }),
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+
+  return SDUI.render(s, root);
+}
+
+export async function onRipplingEvent(
+  event: FunctionEvent,
+  context: FunctionContext,
+): Promise<FunctionResponse> {
+  const params = event['parameters'] as Record<string, string | undefined> | undefined;
+  const action = params?.['action'];
+  const functionId = context.function?.function_id ?? 'demo-fn';
+
+  if (!action || action === 'init') {
+    mutableTodos = INITIAL_TODOS.map((r) => ({ ...r }));
+    const spec = renderSpec(functionId);
+    return new FunctionResponse({
+      body: { spec: JSON.stringify(spec) },
+      statusCode: 200,
+      headers: {},
+      message: '',
+    });
+  }
+
+  if (action === 'create') {
+    const p = params ?? {};
+    const id = `t_${mutableTodos.length + 1}`;
+    mutableTodos = [
+      ...mutableTodos,
+      {
+        id,
+        _key: id,
+        title__c: (p['title'] as string) || 'Untitled',
+        status__c: (p['status'] as string) || 'To Do',
+        priority__c: (p['priority'] as string) || 'Medium',
+        notes__c: (p['notes'] as string) || '',
+      },
+    ];
+    return new FunctionResponse({
+      body: mutableTodos as unknown as Record<string, unknown>,
+      statusCode: 200,
+      headers: {},
+      message: '',
+    });
+  }
+
+  if (action === 'update') {
+    const p = params ?? {};
+    mutableTodos = mutableTodos.map((r) =>
+      r.id === p['id']
+        ? {
+            ...r,
+            title__c: (p['title'] as string) || r.title__c,
+            status__c: (p['status'] as string) || r.status__c,
+            priority__c: (p['priority'] as string) || r.priority__c,
+            notes__c: (p['notes'] as string) ?? r.notes__c,
+          }
+        : r,
+    );
+    return new FunctionResponse({
+      body: mutableTodos as unknown as Record<string, unknown>,
+      statusCode: 200,
+      headers: {},
+      message: '',
+    });
+  }
+
+  if (action === 'delete') {
+    const id = params?.['id'];
+    mutableTodos = mutableTodos.filter((r) => r.id !== id);
+    return new FunctionResponse({
+      body: mutableTodos as unknown as Record<string, unknown>,
+      statusCode: 200,
+      headers: {},
+      message: '',
+    });
+  }
+
+  return new FunctionResponse({
+    body: {},
+    statusCode: 400,
+    headers: {},
+    message: 'Unknown action',
+  });
+}
+*/

package/examples/sdui/sdui-crud-todo/sdui-crud-todo.ts

@@ -0,0 +1,282 @@
+/**
+ * SDUI CRUD (Todo list) — mock data only; no Custom Objects / objectApiName.
+ * Uses in-repo `@rippling/rippling-sdk/lib/sdui` (same pattern as manifest examples).
+ *
+ * Run:
+ *   npx ts-node --transpile-only -r tsconfig-paths/register examples/sdui/sdui-crud-todo/sdui-crud-todo.ts
+ */
+
+import SDUI from '@rippling/rippling-sdk/lib/sdui';
+
+const MOCK_TODOS = [
+  {
+    id: 't1',
+    _key: 't1',
+    title__c: 'Ship SDK patch',
+    status__c: 'In Progress',
+    priority__c: 'High',
+    notes__c: 'Regression pass on SDUI examples',
+  },
+  {
+    id: 't2',
+    _key: 't2',
+    title__c: 'Document Function paste flow',
+    status__c: 'To Do',
+    priority__c: 'Medium',
+    notes__c: 'Caps comment on rippling-function.ts',
+  },
+  {
+    id: 't3',
+    _key: 't3',
+    title__c: 'Weekly sync',
+    status__c: 'Done',
+    priority__c: 'Low',
+    notes__c: '',
+  },
+];
+
+function renderSpec(functionId: string) {
+  const s = SDUI.createState({
+    todos: MOCK_TODOS,
+    selectedRow: null as unknown,
+    showCreateModal: false,
+    showEditModal: false,
+    form: { title: '', status: '', priority: '', notes: '' },
+  });
+
+  const mainColumn = SDUI.components.VStack({
+    gap: 'space500',
+    children: [
+      SDUI.components.VStack({
+        gap: 'space300',
+        children: [
+          SDUI.components.HStack({
+            gap: 'space200',
+            align: 'center',
+            wrap: true,
+            children: [
+              SDUI.components.Heading({
+                level: '2',
+                text: 'Team todos',
+              }),
+              SDUI.components.Badge({
+                text: 'Demo data',
+                appearance: 'NEUTRAL',
+                size: 'S',
+              }),
+            ],
+          }),
+          SDUI.components.Text({
+            text: 'Create, edit, and delete call this Function; the grid below uses sample rows until you connect Custom Objects or your own API.',
+            typestyle: 'bodyMd',
+            color: 'secondary',
+            maxWidth: '720px',
+          }),
+        ],
+      }),
+      SDUI.components.Layout({
+        width: '100%',
+        children: [SDUI.components.Divider({})],
+      }),
+      SDUI.components.Grid({
+        data: s.todos,
+        columns: [
+          { id: 'title__c', header: 'Title', data: 'title__c' },
+          { id: 'status__c', header: 'Status', data: 'status__c', type: 'text' },
+          { id: 'priority__c', header: 'Priority', data: 'priority__c', type: 'text' },
+          { id: 'notes__c', header: 'Notes', data: 'notes__c' },
+        ],
+        selectedRow: s.selectedRow.$bind,
+        headerActions: [{ id: 'new', label: 'New Todo', icon: 'ADD', appearance: 'PRIMARY' }],
+        onHeaderAction: [
+          SDUI.actions.set(s.form, { title: '', status: '', priority: '', notes: '' }),
+          SDUI.actions.set(s.showCreateModal, true),
+        ],
+        rowActions: [
+          { id: 'edit', label: 'Edit', icon: 'EDIT_OUTLINE', placement: 'menu' },
+          { id: 'delete', label: 'Delete', icon: 'TRASH_OUTLINE', placement: 'menu' },
+        ],
+        onRowAction: [
+          SDUI.actions.set(s.form, {
+            title: s.selectedRow['title__c'],
+            status: s.selectedRow['status__c'],
+            priority: s.selectedRow['priority__c'],
+            notes: s.selectedRow['notes__c'],
+          }),
+          SDUI.actions.set(s.showEditModal, true),
+        ],
+        onRowClick: [
+          SDUI.actions.set(s.form, {
+            title: s.selectedRow['title__c'],
+            status: s.selectedRow['status__c'],
+            priority: s.selectedRow['priority__c'],
+            notes: s.selectedRow['notes__c'],
+          }),
+          SDUI.actions.set(s.showEditModal, true),
+        ],
+      }),
+    ],
+  });
+
+  const root = SDUI.components.VStack({
+    align: 'center',
+    gap: 'space0',
+    children: [
+      SDUI.components.Layout({
+        maxWidth: '1080px',
+        width: '100%',
+        margin: { left: 'auto', right: 'auto' },
+        padding: { top: 32, bottom: 40, left: 24, right: 24 },
+        children: [mainColumn],
+      }),
+
+      SDUI.components.Modal({
+        title: 'New Todo',
+        isOpen: s.showCreateModal.$bind,
+        onClose: SDUI.actions.set(s.showCreateModal, false),
+        children: [
+          SDUI.components.VStack({
+            gap: 'space300',
+            children: [
+              SDUI.components.TextInput({
+                label: 'Title',
+                name: 'title',
+                value: s.form.title.$bind,
+                isRequired: true,
+              }),
+              SDUI.components.Select({
+                label: 'Status',
+                name: 'status',
+                value: s.form.status.$bind,
+                options: [
+                  { label: 'To Do', value: 'To Do' },
+                  { label: 'In Progress', value: 'In Progress' },
+                  { label: 'Done', value: 'Done' },
+                ],
+              }),
+              SDUI.components.Select({
+                label: 'Priority',
+                name: 'priority',
+                value: s.form.priority.$bind,
+                options: [
+                  { label: 'Low', value: 'Low' },
+                  { label: 'Medium', value: 'Medium' },
+                  { label: 'High', value: 'High' },
+                ],
+              }),
+              SDUI.components.Textarea({
+                label: 'Notes',
+                name: 'notes',
+                value: s.form.notes.$bind,
+              }),
+            ],
+          }),
+          SDUI.components.HStack({
+            gap: 'space200',
+            justify: 'flex-end',
+            children: [
+              SDUI.components.Button({
+                label: 'Cancel',
+                appearance: 'OUTLINE',
+                onPress: SDUI.actions.set(s.showCreateModal, false),
+              }),
+              SDUI.components.Button({
+                label: 'Create',
+                appearance: 'PRIMARY',
+                onPress: SDUI.actions.callFunction(functionId, 'create', {
+                  title: s.form.title,
+                  status: s.form.status,
+                  priority: s.form.priority,
+                  notes: s.form.notes,
+                  responsePath: '/todos',
+                  onSuccess: { set: { '/showCreateModal': false } },
+                }),
+              }),
+            ],
+          }),
+        ],
+      }),
+
+      SDUI.components.Modal({
+        title: 'Edit Todo',
+        isOpen: s.showEditModal.$bind,
+        onClose: SDUI.actions.set(s.showEditModal, false),
+        children: [
+          SDUI.components.VStack({
+            gap: 'space300',
+            children: [
+              SDUI.components.TextInput({
+                label: 'Title',
+                name: 'edit_title',
+                value: s.form.title.$bind,
+                isRequired: true,
+              }),
+              SDUI.components.Select({
+                label: 'Status',
+                name: 'edit_status',
+                value: s.form.status.$bind,
+                options: [
+                  { label: 'To Do', value: 'To Do' },
+                  { label: 'In Progress', value: 'In Progress' },
+                  { label: 'Done', value: 'Done' },
+                ],
+              }),
+              SDUI.components.Select({
+                label: 'Priority',
+                name: 'edit_priority',
+                value: s.form.priority.$bind,
+                options: [
+                  { label: 'Low', value: 'Low' },
+                  { label: 'Medium', value: 'Medium' },
+                  { label: 'High', value: 'High' },
+                ],
+              }),
+              SDUI.components.Textarea({
+                label: 'Notes',
+                name: 'edit_notes',
+                value: s.form.notes.$bind,
+              }),
+            ],
+          }),
+          SDUI.components.HStack({
+            gap: 'space200',
+            justify: 'flex-end',
+            children: [
+              SDUI.components.Button({
+                label: 'Delete',
+                appearance: 'DESTRUCTIVE',
+                onPress: SDUI.actions.callFunction(functionId, 'delete', {
+                  id: s.selectedRow['id'],
+                  responsePath: '/todos',
+                  onSuccess: { set: { '/showEditModal': false } },
+                }),
+              }),
+              SDUI.components.Button({
+                label: 'Cancel',
+                appearance: 'OUTLINE',
+                onPress: SDUI.actions.set(s.showEditModal, false),
+              }),
+              SDUI.components.Button({
+                label: 'Save',
+                appearance: 'PRIMARY',
+                onPress: SDUI.actions.callFunction(functionId, 'update', {
+                  id: s.selectedRow['id'],
+                  title: s.form.title,
+                  status: s.form.status,
+                  priority: s.form.priority,
+                  notes: s.form.notes,
+                  responsePath: '/todos',
+                  onSuccess: { set: { '/showEditModal': false } },
+                }),
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+
+  return SDUI.render(s, root);
+}
+
+console.log(JSON.stringify(renderSpec('demo-fn'), null, 2));