@rippling/rippling-sdk 0.2.0-alpha.48 → 0.2.0-alpha.49

package/examples/sdui/vote/vote.ts

@@ -1,294 +0,0 @@
-/**
- * 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: 'nowrap',
-    justify: 'space-between',
-    align: 'stretch',
-    children: [
-      SDUI.components.Layout({
-        width: '33%',
-        children: [
-          SDUI.components.Card({
-            title: 'Ship faster',
-            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',
-            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',
-            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: 'wrap',
-            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: 'wrap',
-                  children: [
-                    SDUI.visible(
-                      SDUI.conditions.eq(s.voteChoice, 'velocity'),
-                      SDUI.components.Badge({
-                        text: 'You voted · Ship faster',
-                        appearance: 'PRIMARY_DARK',
-                      }),
-                    ),
-                    SDUI.visible(
-                      SDUI.conditions.eq(s.voteChoice, 'quality'),
-                      SDUI.components.Badge({
-                        text: 'You voted · Raise quality',
-                        appearance: 'SUCCESS_DARK',
-                      }),
-                    ),
-                    SDUI.visible(
-                      SDUI.conditions.eq(s.voteChoice, 'debt'),
-                      SDUI.components.Badge({
-                        text: 'You voted · Pay down debt',
-                        appearance: 'WARNING_DARK',
-                      }),
-                    ),
-                  ],
-                }),
-                // 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)',
-                  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));