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

package/examples/sdui/sdui-showcase/sdui-showcase.ts

@@ -0,0 +1,351 @@
+/**
+ * Extra SDUI primitives not emphasized in crud / tabs / vote demos. Mock state only.
+ *
+ * Run:
+ *   npx ts-node --transpile-only -r tsconfig-paths/register examples/sdui/sdui-showcase/sdui-showcase.ts
+ */
+import SDUI from '../../../src/lib/sdui';
+
+const CAROUSEL_SLIDES = [
+  { heading: 'One', img: 'https://picsum.photos/seed/ex1/880/360', alt: '' },
+  { heading: 'Two', img: 'https://picsum.photos/seed/ex2/880/360', alt: '' },
+  { heading: 'Three', img: 'https://picsum.photos/seed/ex3/880/360', alt: '' },
+];
+
+const TREE_ROWS = [
+  { label: 'A', value: 'a' },
+  { label: 'B', value: 'b', parent: 'a' },
+  { label: 'C', value: 'c', parent: 'a' },
+];
+
+const DRAG_ROWS = [
+  { id: '1', label: 'First' },
+  { id: '2', label: 'Second' },
+  { id: '3', label: 'Third' },
+];
+
+function renderSpec(_functionId: string) {
+  const s = SDUI.createState({
+    eventDate: '2026-06-01',
+    phoneVal: '+15555550123',
+    budget: 500,
+    consent: false,
+    alertsOn: true,
+    drawerOpen: false,
+    toastOpen: false,
+    treeValue: '',
+    menuPick: 'a',
+    breadcrumbActive: 'here',
+  });
+
+  const page = SDUI.components.Layout({
+    width: '100%',
+    maxWidth: '800px',
+    margin: { left: 'auto', right: 'auto' },
+    padding: { top: 32, bottom: 48, left: 24, right: 24 },
+    children: [
+      SDUI.components.VStack({
+        gap: 'space500',
+        align: 'stretch',
+        children: [
+          SDUI.components.VStack({
+            gap: 'space150',
+            align: 'flex-start',
+            children: [
+              SDUI.components.Heading({
+                level: '1',
+                text: 'Extra components',
+              }),
+              SDUI.components.Text({
+                typestyle: 'bodyMd',
+                color: 'secondary',
+                text: 'Date, phone, currency, checkbox, switch, file drop, breadcrumbs, dropdown, menu list, pagination, drawer, carousel, video, tree, stepper, draggable list, loaders, snackbar.',
+              }),
+            ],
+          }),
+
+          SDUI.components.Card({
+            title: 'Fields',
+            padding: '24',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space350',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Date({
+                    name: 'd',
+                    label: 'Date',
+                    value: s.eventDate.$bind,
+                    format: 'yyyy-MM-dd',
+                  }),
+                  SDUI.components.Phone({
+                    name: 'p',
+                    label: 'Phone',
+                    value: s.phoneVal.$bind,
+                  }),
+                  SDUI.components.Currency({
+                    name: 'c',
+                    label: 'Amount',
+                    value: s.budget.$bind,
+                    prefix: '$',
+                  }),
+                  SDUI.components.HStack({
+                    gap: 'space400',
+                    wrap: false,
+                    align: 'stretch',
+                    children: [
+                      SDUI.components.Layout({
+                        flex: '1 1 0',
+                        minWidth: '0',
+                        minHeight: 48,
+                        direction: 'column',
+                        justify: 'center',
+                        children: [
+                          SDUI.components.Checkbox({
+                            name: 'ok',
+                            label: 'Opt in',
+                            value: s.consent.$bind,
+                          }),
+                        ],
+                      }),
+                      SDUI.components.Layout({
+                        flex: '1 1 0',
+                        minWidth: '0',
+                        minHeight: 48,
+                        direction: 'column',
+                        justify: 'center',
+                        children: [
+                          SDUI.components.Switch({
+                            name: 'sw',
+                            label: 'Alerts',
+                            value: s.alertsOn.$bind,
+                            compact: true,
+                          }),
+                        ],
+                      }),
+                    ],
+                  }),
+                  SDUI.components.FileDrop({
+                    name: 'f',
+                    label: 'Files',
+                    value: [],
+                    placeholder: 'Drop files',
+                    multiple: true,
+                  }),
+                ],
+              }),
+            ],
+          }),
+
+          SDUI.components.Card({
+            title: 'Navigation',
+            padding: '24',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space400',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Breadcrumb({
+                    items: [
+                      { title: 'Start', value: 'start', href: '#' },
+                      { title: 'Here', value: 'here', href: '#' },
+                    ],
+                    active: s.breadcrumbActive.$bind,
+                  }),
+                  SDUI.components.HStack({
+                    gap: 'space300',
+                    wrap: true,
+                    align: 'center',
+                    children: [
+                      SDUI.components.Dropdown({
+                        triggerLabel: 'Choose',
+                        list: [
+                          { label: 'Alpha', value: 'a' },
+                          { label: 'Beta', value: 'b' },
+                        ],
+                        value: s.menuPick.$bind,
+                        width: 200,
+                      }),
+                      SDUI.components.Button({
+                        label: 'Drawer',
+                        appearance: 'OUTLINE',
+                        size: 'S',
+                        onPress: SDUI.actions.set(s.drawerOpen, true),
+                      }),
+                      SDUI.components.Button({
+                        label: 'Toast',
+                        appearance: 'GHOST',
+                        size: 'S',
+                        onPress: SDUI.actions.set(s.toastOpen, true),
+                      }),
+                    ],
+                  }),
+                  SDUI.components.MenuList({
+                    list: [
+                      { label: 'One', value: '1' },
+                      { label: 'Two', value: '2' },
+                    ],
+                    width: '100%',
+                    maxHeight: 160,
+                  }),
+                  SDUI.components.Layout({
+                    width: '100%',
+                    padding: { top: 8 },
+                    children: [
+                      SDUI.components.Paginate({
+                        pageCount: 5,
+                        initialPage: 2,
+                        alignment: 'CENTER',
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+
+          SDUI.components.Card({
+            title: 'Media',
+            padding: '24',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space400',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Carousel({ slides: CAROUSEL_SLIDES }),
+                  SDUI.components.Video({
+                    src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+                    width: '100%',
+                    loading: 'lazy',
+                    name: 'v',
+                  }),
+                ],
+              }),
+            ],
+          }),
+
+          SDUI.components.Card({
+            title: 'Lists',
+            padding: '24',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space450',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Tree({
+                    name: 't',
+                    label: 'Tree',
+                    list: TREE_ROWS,
+                    value: s.treeValue.$bind,
+                    maxHeight: 180,
+                  }),
+                  SDUI.components.Stepper({
+                    steps: [
+                      { title: 'Done', status: 'COMPLETE' },
+                      { title: 'Active', status: 'TODO' },
+                      { title: 'Next', status: 'TODO' },
+                    ],
+                    activeStepIndex: 1,
+                  }),
+                  SDUI.components.DraggableList({
+                    list: DRAG_ROWS,
+                    labelKey: 'label',
+                    groupName: 'g',
+                    width: '100%',
+                    showDragIcon: true,
+                  }),
+                ],
+              }),
+            ],
+          }),
+
+          SDUI.components.Card({
+            title: 'Loading',
+            padding: '24',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space400',
+                align: 'stretch',
+                children: [
+                  SDUI.components.HStack({
+                    gap: 'space300',
+                    align: 'center',
+                    children: [
+                      SDUI.components.Spinner({
+                        size: 'M',
+                        appearance: 'PRIMARY',
+                        alignment: 'LEFT',
+                      }),
+                      SDUI.components.Text({
+                        typestyle: 'bodySm',
+                        color: 'secondary',
+                        text: 'Working…',
+                      }),
+                    ],
+                  }),
+                  SDUI.components.Skeleton({
+                    variant: 'TEXT',
+                    lines: 2,
+                    width: '100%',
+                  }),
+                  SDUI.components.HStack({
+                    gap: 'space300',
+                    align: 'center',
+                    children: [
+                      SDUI.components.Skeleton({ variant: 'CIRCLE', size: 40 }),
+                      SDUI.components.Skeleton({ variant: 'BOX', width: 160, height: 48, borderRadius: 6 }),
+                    ],
+                  }),
+                  SDUI.components.ContentLoader({ width: '100%', height: 40, speed: 1 }),
+                  SDUI.components.SnackBar({
+                    text: 'Done.',
+                    appearance: 'SUCCESS',
+                    canDismiss: true,
+                    isVisible: s.toastOpen.$bind,
+                    onDismiss: SDUI.actions.set(s.toastOpen, false),
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+
+  const root = SDUI.components.VStack({
+    gap: 'space0',
+    align: 'stretch',
+    children: [
+      page,
+      SDUI.components.Drawer({
+        isVisible: s.drawerOpen.$bind,
+        title: 'Drawer',
+        width: 360,
+        theme: 'GRAY',
+        onClose: SDUI.actions.set(s.drawerOpen, false),
+        children: [
+          SDUI.components.VStack({
+            gap: 'space300',
+            children: [
+              SDUI.components.Text({
+                text: 'Side content.',
+                typestyle: 'bodyMd',
+              }),
+              SDUI.components.Button({
+                label: 'Close',
+                appearance: 'PRIMARY',
+                size: 'S',
+                onPress: SDUI.actions.set(s.drawerOpen, false),
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+
+  return SDUI.render(s, root);
+}
+
+console.log(JSON.stringify(renderSpec('demo-fn'), null, 2));