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

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

@@ -1,346 +0,0 @@
-/**
- * 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',
-            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: 'nowrap',
-                    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',
-            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: 'wrap',
-                    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: 'auto',
-                    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',
-            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: 720,
-                    loading: 'lazy',
-                    name: 'v',
-                  }),
-                ],
-              }),
-            ],
-          }),
-
-          SDUI.components.Card({
-            title: 'Lists',
-            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',
-            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: 720, 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));