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

package/examples/sdui/vote/rippling-function.ts

@@ -0,0 +1,330 @@
+/**
+ * ----------------------------------------------------------------------------
+ * PASTE INTO THE RIPPLING FUNCTION EDITOR TO PREVIEW. DEPENDS ON
+ * @rippling/rippling-sdk AND @rippling/sdui-builder. MOCK POLL ONLY.
+ * ----------------------------------------------------------------------------
+ */
+
+/*
+import SDUI from '@rippling/sdui-builder';
+import { FunctionContext, FunctionEvent, FunctionResponse } from '@rippling/rippling-sdk';
+
+// Whole-number percentages that sum to 100 — matches what DistributionBar
+// and ProgressBar both expect, so they tell the same visual story.
+const PCT_V = 52;
+const PCT_Q = 33;
+const PCT_D = 15;
+const POLL_TOTAL = PCT_V + PCT_Q + PCT_D;
+
+const POLL_SEGMENTS = [
+  { value: PCT_V, segmentColor: '#4F46E5' },
+  { value: PCT_Q, segmentColor: '#059669' },
+  { value: PCT_D, segmentColor: '#EA580C' },
+];
+
+function renderSpec(_functionId: string) {
+  const s = SDUI.createState({
+    voteChoice: '',
+    resultsVisible: false,
+  });
+
+  // Vote cards: every card gets the same explicit width: '33%' so they're
+  // mathematically equal regardless of content length. justify 'space-between'
+  // is a real CSS value (unlike 'stretch') so layout actually applies.
+  const voteCards = SDUI.components.HStack({
+    gap: 'space500',
+    wrap: false,
+    justify: 'space-between',
+    align: 'stretch',
+    children: [
+      SDUI.components.Layout({
+        width: '33%',
+        children: [
+          SDUI.components.Card({
+            title: 'Ship faster',
+            padding: '32',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space500',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Text({
+                    text: 'More releases, shorter cycles.',
+                    typestyle: 'bodyLg',
+                    color: 'secondary',
+                  }),
+                  SDUI.components.Button({
+                    label: 'Vote',
+                    appearance: 'PRIMARY',
+                    size: 'L',
+                    onPress: [
+                      SDUI.actions.set(s.voteChoice, 'velocity'),
+                      SDUI.actions.set(s.resultsVisible, true),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+      SDUI.components.Layout({
+        width: '33%',
+        children: [
+          SDUI.components.Card({
+            title: 'Raise quality',
+            padding: '32',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space500',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Text({
+                    text: 'Fewer bugs, better UX.',
+                    typestyle: 'bodyLg',
+                    color: 'secondary',
+                  }),
+                  SDUI.components.Button({
+                    label: 'Vote',
+                    appearance: 'SUCCESS',
+                    size: 'L',
+                    onPress: [
+                      SDUI.actions.set(s.voteChoice, 'quality'),
+                      SDUI.actions.set(s.resultsVisible, true),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+      SDUI.components.Layout({
+        width: '33%',
+        children: [
+          SDUI.components.Card({
+            title: 'Pay down debt',
+            padding: '32',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space500',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Text({
+                    text: 'Refactors and infra.',
+                    typestyle: 'bodyLg',
+                    color: 'secondary',
+                  }),
+                  SDUI.components.Button({
+                    label: 'Vote',
+                    appearance: 'WARNING',
+                    size: 'L',
+                    onPress: [
+                      SDUI.actions.set(s.voteChoice, 'debt'),
+                      SDUI.actions.set(s.resultsVisible, true),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+
+  const shell = SDUI.components.Layout({
+    width: '100%',
+    maxWidth: '1200px',
+    margin: { left: 'auto', right: 'auto' },
+    padding: { top: 48, bottom: 56, left: 32, right: 32 },
+    children: [
+      SDUI.components.VStack({
+        gap: 'space700',
+        align: 'stretch',
+        children: [
+          SDUI.components.VStack({
+            gap: 'space300',
+            align: 'center',
+            children: [
+              SDUI.components.Heading({
+                level: '1',
+                align: 'center',
+                text: 'Where should we focus next quarter?',
+              }),
+              SDUI.components.Text({
+                align: 'center',
+                maxWidth: '680px',
+                text: 'One vote. Percentages are mock data — swap in real counts later.',
+                typestyle: 'bodyLg',
+                color: 'secondary',
+              }),
+            ],
+          }),
+          SDUI.components.Divider({}),
+          voteCards,
+          SDUI.components.HStack({
+            gap: 'space300',
+            justify: 'center',
+            wrap: true,
+            children: [
+              SDUI.components.Chip({
+                text: 'Start over',
+                appearance: 'NEUTRAL',
+                onPress: [
+                  SDUI.actions.set(s.voteChoice, ''),
+                  SDUI.actions.set(s.resultsVisible, false),
+                ],
+              }),
+            ],
+          }),
+          SDUI.visible(
+            SDUI.conditions.falsy(s.resultsVisible),
+            SDUI.components.Text({
+              align: 'center',
+              maxWidth: '560px',
+              typestyle: 'bodyMd',
+              color: 'secondary',
+              text: 'Tap Vote — results open below with a split bar plus one bar per option.',
+            }),
+          ),
+          SDUI.visible(
+            SDUI.conditions.truthy(s.resultsVisible),
+            SDUI.components.VStack({
+              gap: 'space500',
+              align: 'stretch',
+              children: [
+                // The "you voted" badge sits centered above the result card
+                SDUI.components.HStack({
+                  gap: 'space200',
+                  justify: 'center',
+                  wrap: true,
+                  children: [
+                    SDUI.visible(
+                      SDUI.conditions.eq(s.voteChoice, 'velocity'),
+                      SDUI.components.Badge({
+                        text: 'You voted · Ship faster',
+                        appearance: 'PRIMARY',
+                      }),
+                    ),
+                    SDUI.visible(
+                      SDUI.conditions.eq(s.voteChoice, 'quality'),
+                      SDUI.components.Badge({
+                        text: 'You voted · Raise quality',
+                        appearance: 'SUCCESS',
+                      }),
+                    ),
+                    SDUI.visible(
+                      SDUI.conditions.eq(s.voteChoice, 'debt'),
+                      SDUI.components.Badge({
+                        text: 'You voted · Pay down debt',
+                        appearance: 'WARNING',
+                      }),
+                    ),
+                  ],
+                }),
+                // Result card uses the Card's title prop and stretches to fill
+                // the shell's full width because the parent VStack is align:stretch
+                SDUI.components.Card({
+                  title: 'Vote share (mock)',
+                  padding: '32',
+                  children: [
+                    SDUI.components.VStack({
+                      gap: 'space500',
+                      align: 'stretch',
+                      children: [
+                        SDUI.components.Text({
+                          typestyle: 'bodyMdEmphasis',
+                          text: 'Overall mix',
+                        }),
+                        SDUI.components.Layout({
+                          width: '100%',
+                          padding: { top: 8, bottom: 16 },
+                          children: [
+                            SDUI.components.DistributionBar({
+                              segments: POLL_SEGMENTS,
+                              totalValue: POLL_TOTAL,
+                              size: 'standard',
+                            }),
+                          ],
+                        }),
+                        SDUI.components.Text({
+                          typestyle: 'bodyMdEmphasis',
+                          text: 'Each option',
+                        }),
+                        SDUI.components.VStack({
+                          gap: 'space400',
+                          children: [
+                            SDUI.components.ProgressBar({
+                              value: PCT_V,
+                              label: 'Ship faster',
+                              appearance: 'PRIMARY',
+                              showPercentage: true,
+                            }),
+                            SDUI.components.ProgressBar({
+                              value: PCT_Q,
+                              label: 'Raise quality',
+                              appearance: 'SUCCESS',
+                              showPercentage: true,
+                            }),
+                            SDUI.components.ProgressBar({
+                              value: PCT_D,
+                              label: 'Pay down debt',
+                              appearance: 'WARNING',
+                              showPercentage: true,
+                            }),
+                          ],
+                        }),
+                        SDUI.components.Text({
+                          align: 'center',
+                          typestyle: 'bodySm',
+                          color: 'secondary',
+                          text: 'Hook callFunction to replace mock totals.',
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ),
+        ],
+      }),
+    ],
+  });
+
+  const root = SDUI.components.VStack({
+    align: 'stretch',
+    gap: 'space0',
+    children: [shell],
+  });
+
+  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'];
+
+  if (!action || action === 'init') {
+    const spec = renderSpec(context.function?.function_id ?? 'demo-fn');
+    return new FunctionResponse({
+      body: { spec: JSON.stringify(spec) },
+      statusCode: 200,
+      headers: {},
+      message: '',
+    });
+  }
+
+  return new FunctionResponse({
+    body: {},
+    statusCode: 200,
+    headers: {},
+    message: '',
+  });
+}
+
+*/

package/examples/sdui/vote/vote.ts

@@ -0,0 +1,298 @@
+/**
+ * One-screen team poll: pick a priority → see a colored breakdown (preview totals).
+ * No tabs, no Custom Objects. Run:
+ *   npx ts-node --transpile-only -r tsconfig-paths/register examples/sdui/vote/vote.ts
+ */
+import SDUI from '../../../src/lib/sdui';
+
+// Whole-number percentages that sum to 100 — matches what DistributionBar
+// and ProgressBar both expect, so they tell the same visual story.
+const PCT_V = 52;
+const PCT_Q = 33;
+const PCT_D = 15;
+const POLL_TOTAL = PCT_V + PCT_Q + PCT_D;
+
+const POLL_SEGMENTS = [
+  { value: PCT_V, segmentColor: '#4F46E5' },
+  { value: PCT_Q, segmentColor: '#059669' },
+  { value: PCT_D, segmentColor: '#EA580C' },
+];
+
+function renderSpec(_functionId: string) {
+  const s = SDUI.createState({
+    voteChoice: '',
+    resultsVisible: false,
+  });
+
+  // Vote cards: every card gets the same explicit width: '33%' so they're
+  // mathematically equal regardless of content length. justify 'space-between'
+  // is a real CSS value (unlike 'stretch') so layout actually applies.
+  const voteCards = SDUI.components.HStack({
+    gap: 'space500',
+    wrap: false,
+    justify: 'space-between',
+    align: 'stretch',
+    children: [
+      SDUI.components.Layout({
+        width: '33%',
+        children: [
+          SDUI.components.Card({
+            title: 'Ship faster',
+            padding: '32',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space500',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Text({
+                    text: 'More releases, shorter cycles.',
+                    typestyle: 'bodyLg',
+                    color: 'secondary',
+                  }),
+                  SDUI.components.Button({
+                    label: 'Vote',
+                    appearance: 'PRIMARY',
+                    size: 'L',
+                    onPress: [
+                      SDUI.actions.set(s.voteChoice, 'velocity'),
+                      SDUI.actions.set(s.resultsVisible, true),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+      SDUI.components.Layout({
+        width: '33%',
+        children: [
+          SDUI.components.Card({
+            title: 'Raise quality',
+            padding: '32',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space500',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Text({
+                    text: 'Fewer bugs, better UX.',
+                    typestyle: 'bodyLg',
+                    color: 'secondary',
+                  }),
+                  SDUI.components.Button({
+                    label: 'Vote',
+                    appearance: 'SUCCESS',
+                    size: 'L',
+                    onPress: [
+                      SDUI.actions.set(s.voteChoice, 'quality'),
+                      SDUI.actions.set(s.resultsVisible, true),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+      SDUI.components.Layout({
+        width: '33%',
+        children: [
+          SDUI.components.Card({
+            title: 'Pay down debt',
+            padding: '32',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space500',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Text({
+                    text: 'Refactors and infra.',
+                    typestyle: 'bodyLg',
+                    color: 'secondary',
+                  }),
+                  SDUI.components.Button({
+                    label: 'Vote',
+                    appearance: 'WARNING',
+                    size: 'L',
+                    onPress: [
+                      SDUI.actions.set(s.voteChoice, 'debt'),
+                      SDUI.actions.set(s.resultsVisible, true),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+
+  const shell = SDUI.components.Layout({
+    width: '100%',
+    maxWidth: '1200px',
+    margin: { left: 'auto', right: 'auto' },
+    padding: { top: 48, bottom: 56, left: 32, right: 32 },
+    children: [
+      SDUI.components.VStack({
+        gap: 'space700',
+        align: 'stretch',
+        children: [
+          SDUI.components.VStack({
+            gap: 'space300',
+            align: 'center',
+            children: [
+              SDUI.components.Heading({
+                level: '1',
+                align: 'center',
+                text: 'Where should we focus next quarter?',
+              }),
+              SDUI.components.Text({
+                align: 'center',
+                maxWidth: '680px',
+                text: 'One vote. Percentages are mock data — swap in real counts later.',
+                typestyle: 'bodyLg',
+                color: 'secondary',
+              }),
+            ],
+          }),
+          SDUI.components.Divider({}),
+          voteCards,
+          SDUI.components.HStack({
+            gap: 'space300',
+            justify: 'center',
+            wrap: true,
+            children: [
+              SDUI.components.Chip({
+                text: 'Start over',
+                appearance: 'NEUTRAL',
+                onPress: [SDUI.actions.set(s.voteChoice, ''), SDUI.actions.set(s.resultsVisible, false)],
+              }),
+            ],
+          }),
+          SDUI.visible(
+            SDUI.conditions.falsy(s.resultsVisible),
+            SDUI.components.Text({
+              align: 'center',
+              maxWidth: '560px',
+              typestyle: 'bodyMd',
+              color: 'secondary',
+              text: 'Tap Vote — results open below with a split bar plus one bar per option.',
+            }),
+          ),
+          SDUI.visible(
+            SDUI.conditions.truthy(s.resultsVisible),
+            SDUI.components.VStack({
+              gap: 'space500',
+              align: 'stretch',
+              children: [
+                // The "you voted" badge sits centered above the result card
+                SDUI.components.HStack({
+                  gap: 'space200',
+                  justify: 'center',
+                  wrap: true,
+                  children: [
+                    SDUI.visible(
+                      SDUI.conditions.eq(s.voteChoice, 'velocity'),
+                      SDUI.components.Badge({
+                        text: 'You voted · Ship faster',
+                        appearance: 'PRIMARY',
+                      }),
+                    ),
+                    SDUI.visible(
+                      SDUI.conditions.eq(s.voteChoice, 'quality'),
+                      SDUI.components.Badge({
+                        text: 'You voted · Raise quality',
+                        appearance: 'SUCCESS',
+                      }),
+                    ),
+                    SDUI.visible(
+                      SDUI.conditions.eq(s.voteChoice, 'debt'),
+                      SDUI.components.Badge({
+                        text: 'You voted · Pay down debt',
+                        appearance: 'WARNING',
+                      }),
+                    ),
+                  ],
+                }),
+                // Result card uses the Card's title prop and stretches to fill
+                // the shell's full width because the parent VStack is align:stretch
+                SDUI.components.Card({
+                  title: 'Vote share (mock)',
+                  padding: '32',
+                  children: [
+                    SDUI.components.VStack({
+                      gap: 'space500',
+                      align: 'stretch',
+                      children: [
+                        SDUI.components.Text({
+                          typestyle: 'bodyMdEmphasis',
+                          text: 'Overall mix',
+                        }),
+                        SDUI.components.Layout({
+                          width: '100%',
+                          padding: { top: 8, bottom: 16 },
+                          children: [
+                            SDUI.components.DistributionBar({
+                              segments: POLL_SEGMENTS,
+                              totalValue: POLL_TOTAL,
+                              size: 'standard',
+                            }),
+                          ],
+                        }),
+                        SDUI.components.Text({
+                          typestyle: 'bodyMdEmphasis',
+                          text: 'Each option',
+                        }),
+                        SDUI.components.VStack({
+                          gap: 'space400',
+                          children: [
+                            SDUI.components.ProgressBar({
+                              value: PCT_V,
+                              label: 'Ship faster',
+                              appearance: 'PRIMARY',
+                              showPercentage: true,
+                            }),
+                            SDUI.components.ProgressBar({
+                              value: PCT_Q,
+                              label: 'Raise quality',
+                              appearance: 'SUCCESS',
+                              showPercentage: true,
+                            }),
+                            SDUI.components.ProgressBar({
+                              value: PCT_D,
+                              label: 'Pay down debt',
+                              appearance: 'WARNING',
+                              showPercentage: true,
+                            }),
+                          ],
+                        }),
+                        SDUI.components.Text({
+                          align: 'center',
+                          typestyle: 'bodySm',
+                          color: 'secondary',
+                          text: 'Hook callFunction to replace mock totals.',
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ),
+        ],
+      }),
+    ],
+  });
+
+  const root = SDUI.components.VStack({
+    align: 'stretch',
+    gap: 'space0',
+    children: [shell],
+  });
+
+  return SDUI.render(s, root);
+}
+
+console.log(JSON.stringify(renderSpec('demo-fn'), null, 2));