@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/stepper/__stories__/StepperVertical.stories.js

@@ -0,0 +1,575 @@
+const _excluded = ["steps", "activeStepId", "title", "initialComplete", "skipParentSteps", "renderWithApi"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useState } from 'react';
+import { useStepper } from '@coinbase/cds-common/stepper/useStepper';
+import { Button } from '../../buttons';
+import { ListCell } from '../../cells';
+import { Collapsible } from '../../collapsible';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons/Icon';
+import { HStack, VStack } from '../../layout';
+import { Pressable } from '../../system';
+import { Text } from '../../typography/Text';
+import { Stepper } from '../Stepper';
+
+// A reusable example wrapper that encapsulates useStepper, renders the Stepper and controls,
+// and forwards props to the Stepper component. Similar to StepperHorizontalExample.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StepperVerticalExample = _ref => {
+  let {
+      steps,
+      activeStepId,
+      title,
+      initialComplete,
+      skipParentSteps,
+      renderWithApi
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [renderKey, setRenderKey] = useState(0);
+  const [stepperState, stepperApi] = useStepper({
+    steps,
+    defaultActiveStepId: activeStepId,
+    skipParentSteps
+  });
+  const [complete, setComplete] = useState(initialComplete || false);
+  const activeIndex = stepperState.activeStepId ? steps.findIndex(step => step.id === stepperState.activeStepId) : -1;
+  const handleNextStep = () => {
+    if (stepperState.activeStepId === steps[steps.length - 1].id) {
+      setComplete(true);
+    } else {
+      stepperApi.goNextStep();
+    }
+  };
+  const handlePreviousStep = () => {
+    setComplete(false);
+    stepperApi.goPreviousStep();
+  };
+  const handleReset = () => {
+    setComplete(false);
+    stepperApi.reset();
+  };
+  const toggleComplete = () => {
+    setComplete(prev => !prev);
+  };
+  const handleToFirstStep = () => {
+    stepperApi.goToStep(steps[0].id);
+  };
+  const handleToLastStep = () => {
+    stepperApi.goToStep(steps[steps.length - 1].id);
+  };
+  const nextAction = complete ? handleReset : handleNextStep;
+  const nextActionLabel = complete ? 'Reset' : stepperState.activeStepId === steps[steps.length - 1].id ? 'Finish' : 'Next';
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [title && /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      paddingBottom: 2,
+      children: title
+    }), renderWithApi ? renderWithApi({
+      stepperState: _extends({}, stepperState, {
+        steps,
+        complete
+      }),
+      stepperApi
+    }) :
+    /*#__PURE__*/
+    // cast to any here to bridge story flexibility across metadata types
+    _jsx(Stepper, _extends({
+      direction: "vertical"
+    }, props, {
+      activeStepId: stepperState.activeStepId,
+      complete: complete,
+      steps: steps
+    })), /*#__PURE__*/_jsx(VStack, {
+      gap: 2,
+      paddingY: 2,
+      children: complete ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "label1",
+          children: "All steps completed!"
+        }), /*#__PURE__*/_jsxs(HStack, {
+          gap: 1,
+          justifyContent: "flex-start",
+          children: [/*#__PURE__*/_jsx(Button, {
+            compact: true,
+            onPress: handleReset,
+            children: "Reset"
+          }), /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            onPress: toggleComplete,
+            children: "Toggle Complete"
+          })]
+        })]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/_jsxs(Text, {
+            font: "label1",
+            children: ["Active Step: ", complete ? '-' : stepperState.activeStepId || 'None']
+          }), /*#__PURE__*/_jsx(Pressable, {
+            onPress: () => setRenderKey(prev => prev + 1),
+            children: /*#__PURE__*/_jsx(Text, {
+              children: "Rerender"
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(VStack, {
+          gap: 2,
+          children: [/*#__PURE__*/_jsxs(HStack, {
+            gap: 1,
+            justifyContent: "flex-start",
+            children: [/*#__PURE__*/_jsx(Button, {
+              compact: true,
+              disabled: activeIndex === 0,
+              onPress: handlePreviousStep,
+              children: "Back"
+            }), /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              onPress: nextAction,
+              children: nextActionLabel
+            }), /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              onPress: toggleComplete,
+              children: "Toggle Complete"
+            })]
+          }), /*#__PURE__*/_jsxs(HStack, {
+            gap: 1,
+            justifyContent: "flex-start",
+            children: [/*#__PURE__*/_jsx(Button, {
+              compact: true,
+              onPress: handleToFirstStep,
+              children: "First"
+            }), /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              onPress: handleToLastStep,
+              children: "Last"
+            })]
+          })]
+        })]
+      })
+    })]
+  }, renderKey);
+};
+const Default = () => {
+  const steps = [{
+    id: 'first-step',
+    label: 'First step'
+  }, {
+    id: 'second-step',
+    label: 'Second step'
+  }, {
+    id: 'final-step',
+    label: 'Final step'
+  }];
+  return /*#__PURE__*/_jsx(StepperVerticalExample, {
+    completedStepAccessibilityLabel: "Finished",
+    steps: steps
+  });
+};
+
+// ------------------------------------------------------------
+// No Active Step
+// ------------------------------------------------------------
+const NoActiveStep = () => {
+  const steps = [{
+    id: 'first-step',
+    label: 'First step'
+  }, {
+    id: 'second-step',
+    label: 'Second step'
+  }, {
+    id: 'third-step',
+    label: 'Third step'
+  }, {
+    id: 'final-step',
+    label: 'Final step'
+  }];
+  return /*#__PURE__*/_jsx(StepperVerticalExample, {
+    activeStepId: null,
+    steps: steps,
+    title: "No Active Step"
+  });
+};
+
+// ------------------------------------------------------------
+// Nested Steps
+// ------------------------------------------------------------
+const NestedSteps = () => {
+  const oneLevelSteps = [{
+    id: 'first-step',
+    label: 'First step'
+  }, {
+    id: 'second-step',
+    label: 'Second step',
+    subSteps: [{
+      id: 'second-step-substep-one',
+      label: 'Substep one'
+    }, {
+      id: 'second-step-substep-two',
+      label: 'Substep two'
+    }, {
+      id: 'second-step-substep-three',
+      label: 'Substep three'
+    }]
+  }, {
+    id: 'final-step',
+    label: 'Final step'
+  }];
+  const twoLevelSteps = [{
+    id: 'first-step',
+    label: 'First step'
+  }, {
+    id: 'second-step',
+    label: 'Second step',
+    subSteps: [{
+      id: 'second-step-substep-one',
+      label: 'Substep one'
+    }, {
+      id: 'second-step-substep-two',
+      label: 'Substep two',
+      subSteps: [{
+        id: 'deeply-nested-step-1',
+        label: 'Deeply nested step 1'
+      }, {
+        id: 'deeply-nested-step-2',
+        label: 'Deeply nested step 2'
+      }]
+    }, {
+      id: 'second-step-substep-three',
+      label: 'Substep three'
+    }]
+  }, {
+    id: 'final-step',
+    label: 'Final step'
+  }];
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 4,
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        paddingBottom: 2,
+        children: "One level steps"
+      }), /*#__PURE__*/_jsx(StepperVerticalExample, {
+        steps: oneLevelSteps
+      })]
+    }), /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        paddingBottom: 2,
+        children: "Two level steps (w/ skipParentSteps=true)"
+      }), /*#__PURE__*/_jsx(StepperVerticalExample, {
+        skipParentSteps: true,
+        steps: twoLevelSteps
+      })]
+    })]
+  });
+};
+
+// ------------------------------------------------------------
+// Custom Icons & Styles
+// ------------------------------------------------------------
+const CustomIconsAndStyles = () => {
+  const steps = [{
+    id: 'first-step',
+    label: 'First step'
+  }, {
+    StepperIconComponent: _ref2 => {
+      let {
+        active,
+        visited
+      } = _ref2;
+      return /*#__PURE__*/_jsx(Icon, {
+        color: active ? 'fgNegative' : visited ? 'fgPrimary' : 'fgMuted',
+        name: "addPeople",
+        size: "s"
+      });
+    },
+    id: 'second-step',
+    label: 'Second step',
+    subSteps: [{
+      id: 'second-step-substep-one',
+      label: 'Substep one'
+    }, {
+      id: 'second-step-substep-two',
+      label: 'Substep two'
+    }, {
+      id: 'second-step-substep-three',
+      label: 'Substep three'
+    }]
+  }, {
+    StepperIconComponent: () => /*#__PURE__*/_jsx(Icon, {
+      name: "airdrop",
+      size: "s"
+    }),
+    id: 'final-step',
+    label: 'Final step'
+  }];
+  return /*#__PURE__*/_jsx(StepperVerticalExample, {
+    activeStepId: steps[0].id,
+    steps: steps,
+    styles: {
+      progress: {
+        width: 8
+      }
+    }
+  });
+};
+
+// ------------------------------------------------------------
+// Custom Components
+// ------------------------------------------------------------
+
+const customComponentSteps = [{
+  id: 'first-step',
+  label: 'Book Hotel',
+  metadata: {
+    name: 'Erich',
+    date: '2025-06-13',
+    time: '10:00 AM'
+  }
+}, {
+  id: 'second-step',
+  label: 'Book Flight',
+  metadata: {
+    name: 'Erich',
+    date: '2025-06-13',
+    time: '11:03 AM'
+  }
+}, {
+  id: 'third-step',
+  label: 'Reserve Rental Car',
+  metadata: {
+    name: 'Erich',
+    date: '2025-06-14',
+    time: '02:24 PM'
+  }
+}];
+const CustomLabelComponent = _ref3 => {
+  let {
+    step,
+    active,
+    depth,
+    onPress
+  } = _ref3;
+  const {
+    label,
+    metadata,
+    id
+  } = step;
+  const subtitle = metadata == null ? void 0 : metadata.subtitle;
+  if (depth === 0 && metadata) {
+    return /*#__PURE__*/_jsx(ListCell, {
+      compact: true,
+      description: metadata.name,
+      detail: metadata.date,
+      innerSpacing: {
+        paddingTop: 0,
+        paddingBottom: 0
+      },
+      maxWidth: 350,
+      minHeight: undefined,
+      onPress: () => onPress(id),
+      outerSpacing: {
+        paddingTop: 0,
+        paddingBottom: 3,
+        paddingStart: 0,
+        paddingEnd: 0
+      },
+      subdetail: metadata.time,
+      title: label
+    });
+  }
+  return /*#__PURE__*/_jsxs(Pressable, {
+    flexDirection: "column",
+    gap: 1,
+    onPress: () => onPress(id),
+    paddingBottom: 3,
+    children: [/*#__PURE__*/_jsx(Text, {
+      color: active ? 'fgPrimary' : 'fg',
+      font: depth === 0 ? 'label1' : 'label2',
+      children: label
+    }), subtitle && /*#__PURE__*/_jsx(Text, {
+      font: "label2",
+      children: subtitle
+    })]
+  });
+};
+const CollapsibleSubsteps = _ref4 => {
+  let {
+    active,
+    isDescendentActive,
+    children
+  } = _ref4;
+  return /*#__PURE__*/_jsx(Collapsible, {
+    collapsed: !active && !isDescendentActive,
+    children: /*#__PURE__*/_jsx(VStack, {
+      gap: 2,
+      children: children
+    })
+  });
+};
+const CustomComponents = () => {
+  const oneLevelSteps = [{
+    id: 'first-step',
+    label: 'First step'
+  }, {
+    id: 'second-step',
+    label: 'Second step',
+    subSteps: [{
+      id: 'second-step-substep-one',
+      label: 'Substep one'
+    }, {
+      id: 'second-step-substep-two',
+      label: 'Substep two'
+    }, {
+      id: 'second-step-substep-three',
+      label: 'Substep three'
+    }]
+  }, {
+    id: 'final-step',
+    label: 'Final step'
+  }];
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 4,
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        paddingBottom: 2,
+        children: "Travel Booking Labels"
+      }), /*#__PURE__*/_jsx(StepperVerticalExample, {
+        initialComplete: true,
+        renderWithApi: _ref5 => {
+          let {
+            stepperState,
+            stepperApi
+          } = _ref5;
+          const activeStep = stepperState.activeStepId ? stepperState.steps.find(step => step.id === stepperState.activeStepId) || null : null;
+          return /*#__PURE__*/_jsx(Stepper, {
+            StepperLabelComponent: props => /*#__PURE__*/_jsx(CustomLabelComponent, _extends({
+              onPress: id => stepperApi.goToStep(id)
+            }, props)),
+            activeStepId: stepperState.activeStepId,
+            complete: stepperState.complete,
+            direction: "vertical",
+            steps: stepperState.steps
+          });
+        },
+        steps: customComponentSteps
+      })]
+    }), /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        paddingBottom: 2,
+        children: "Collapsible Substeps"
+      }), /*#__PURE__*/_jsx(StepperVerticalExample, {
+        StepperSubstepContainerComponent: CollapsibleSubsteps,
+        steps: oneLevelSteps
+      })]
+    })]
+  });
+};
+
+// ------------------------------------------------------------
+// Null Components
+// ------------------------------------------------------------
+const NullComponents = () => {
+  const steps = [{
+    id: 'first-step',
+    label: 'First step'
+  }, {
+    id: 'second-step',
+    label: 'Second step'
+  }, {
+    id: 'final-step',
+    label: 'Final step'
+  }];
+  return /*#__PURE__*/_jsx(StepperVerticalExample, {
+    renderWithApi: _ref6 => {
+      let {
+        stepperState: {
+          activeStepId,
+          steps,
+          complete
+        }
+      } = _ref6;
+      const activeStep = activeStepId ? steps.find(step => step.id === activeStepId) || null : null;
+      return /*#__PURE__*/_jsxs(VStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsxs(VStack, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label1",
+            paddingBottom: 2,
+            children: "Default Render"
+          }), /*#__PURE__*/_jsx(Stepper, {
+            activeStepId: activeStepId,
+            complete: complete,
+            direction: "vertical",
+            steps: steps
+          })]
+        }), /*#__PURE__*/_jsxs(VStack, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label1",
+            paddingBottom: 2,
+            children: "Without Progress Bars"
+          }), /*#__PURE__*/_jsx(Stepper, {
+            StepperProgressComponent: null,
+            activeStepId: activeStepId,
+            complete: complete,
+            direction: "vertical",
+            steps: steps
+          })]
+        }), /*#__PURE__*/_jsxs(VStack, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label1",
+            paddingBottom: 2,
+            children: "Without Labels"
+          }), /*#__PURE__*/_jsx(Stepper, {
+            StepperLabelComponent: null,
+            activeStepId: activeStepId,
+            complete: complete,
+            direction: "vertical",
+            steps: steps
+          })]
+        }), /*#__PURE__*/_jsxs(VStack, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label1",
+            paddingBottom: 2,
+            children: "Without Icons"
+          }), /*#__PURE__*/_jsx(Stepper, {
+            StepperIconComponent: null,
+            activeStepId: activeStepId,
+            complete: complete,
+            direction: "vertical",
+            steps: steps
+          })]
+        })]
+      });
+    },
+    steps: steps
+  });
+};
+const StepperVerticalScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: /*#__PURE__*/_jsx(Default, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "No Active Step",
+      children: /*#__PURE__*/_jsx(NoActiveStep, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Nested Steps",
+      children: /*#__PURE__*/_jsx(NestedSteps, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Icons & Styles",
+      children: /*#__PURE__*/_jsx(CustomIconsAndStyles, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Components",
+      children: /*#__PURE__*/_jsx(CustomComponents, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Null Components",
+      children: /*#__PURE__*/_jsx(NullComponents, {})
+    })]
+  });
+};
+export default StepperVerticalScreen;

package/esm/stepper/index.js

@@ -0,0 +1,12 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./*.stories.tsx}
+export * from './DefaultStepperHeaderHorizontal';
+export * from './DefaultStepperIconVertical';
+export * from './DefaultStepperLabelVertical';
+export * from './DefaultStepperProgressHorizontal';
+export * from './DefaultStepperProgressVertical';
+export * from './DefaultStepperStepHorizontal';
+export * from './DefaultStepperStepVertical';
+export * from './DefaultStepperSubstepContainerHorizontal';
+export * from './DefaultStepperSubstepContainerVertical';
+export * from './Stepper';
+// codegen:end

package/esm/sticky-footer/StickyFooter.js

@@ -0,0 +1,31 @@
+const _excluded = ["elevated", "elevation", "children", "testID", "role", "accessibilityLabel", "padding"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { View } from 'react-native';
+import { Box } from '../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const StickyFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      elevated,
+      elevation = elevated ? 1 : 0,
+      children,
+      testID = 'sticky-footer',
+      role = 'toolbar',
+      accessibilityLabel = 'footer',
+      padding = 2
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    ref: forwardedRef,
+    accessibilityLabel: accessibilityLabel,
+    elevation: elevation,
+    padding: padding,
+    role: role,
+    testID: testID
+  }, props, {
+    children: /*#__PURE__*/_jsx(View, {
+      children: children
+    })
+  }));
+}));

package/esm/sticky-footer/__figma__/StickyFooter.figma.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { StickyFooter } from '../StickyFooter';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(StickyFooter, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10340-69579&m=dev', {
+  imports: ["import {StickyFooter} from '@coinbase/cds-mobile/sticky-footer/StickyFooter';"],
+  props: {
+    // showlegaltext1391921: figma.boolean('show legal text'),
+    // buttons: figma.enum('buttons', {
+    //   'single primary': 'single-primary',
+    //   'single secondary': 'single-secondary',
+    //   stacked: 'stacked',
+    //   'stacked with transparent button': 'stacked-with-transparent-button',
+    //   'side-by-side': 'side-by-side',
+    //   none: 'none',
+    // }),
+    elevated: figma.boolean('floating'),
+    // compact: figma.boolean('compact'),
+    children: figma.children(['Button', 'ButtonGroup'])
+  },
+  example: props => /*#__PURE__*/_jsx(StickyFooter, {
+    elevated: props.elevated,
+    children: props.children
+  })
+});

package/esm/sticky-footer/__stories__/StickyFooter.stories.js

@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { StickyFooter } from '../StickyFooter';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StickyFooterScreen = () => {
+  const [showStickyFooter, setShowStickyFooter] = useState(true);
+  const handleButtonPress = useCallback(() => {
+    setShowStickyFooter(!showStickyFooter);
+  }, [showStickyFooter]);
+  const inset = useSafeAreaInsets();
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(ExampleScreen, {
+      children: /*#__PURE__*/_jsx(Example, {
+        title: "StickyFooter with Screen",
+        children: /*#__PURE__*/_jsx(Button, {
+          onPress: handleButtonPress,
+          children: showStickyFooter ? 'Close' : 'Open'
+        })
+      })
+    }), showStickyFooter && /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: inset.bottom / 2,
+        left: 0,
+        right: 0
+      },
+      children: /*#__PURE__*/_jsx(StickyFooter, {
+        children: /*#__PURE__*/_jsxs(VStack, {
+          alignContent: "center",
+          alignItems: "center",
+          gap: 1,
+          justifyContent: "center",
+          width: "100%",
+          children: [/*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleButtonPress,
+            children: "Primary"
+          }), /*#__PURE__*/_jsx(Button, {
+            block: true,
+            variant: "secondary",
+            children: "Secondary"
+          })]
+        })
+      })
+    })]
+  });
+};
+export default StickyFooterScreen;