@bacon-pos/ui 0.5.1 → 0.6.0

package/lib/module/components/Dropdown/Dropdown.js

@@ -0,0 +1,277 @@
+"use strict";
+
+import { Fragment } from 'react';
+import { Pressable, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { Icon } from "../Icon/Icon.js";
+import { Radio } from "../Radio/Radio.js";
+import { Switch } from "../Switch/Switch.js";
+import { Text } from "../Text/Text.js";
+import { ScrollArea } from "../_internal/ScrollArea.js";
+
+/**
+ * A leading/trailing slot on a row. Either a decorative/actionable control from
+ * the design system, or any custom node (avatar, flag, badge…).
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Checkbox/Switch/Radio wrap their control in `Labeled`, which defaults to
+ * `alignSelf: 'flex-start'`. Inside a row we want them vertically centered, so we
+ * override that (their `style` prop wins over the Labeled default).
+ */
+const CONTROL_ALIGN = {
+  alignSelf: 'center'
+};
+
+/** Returns the toggle a control slot performs when the row itself is pressed. */
+function slotToggle(slot) {
+  if (!slot) return undefined;
+  switch (slot.kind) {
+    case 'checkbox':
+      return () => slot.onChange(!slot.checked);
+    case 'switch':
+      return () => slot.onChange(!slot.value);
+    case 'radio':
+      return () => slot.onChange();
+    default:
+      return undefined;
+  }
+}
+function Slot({
+  slot,
+  disabled,
+  destructive
+}) {
+  const theme = useTheme();
+  if (!slot) return null;
+  const iconColor = destructive ? theme.colors.feedback.error : 'secondary';
+  switch (slot.kind) {
+    case 'icon':
+      return /*#__PURE__*/_jsx(Icon, {
+        name: slot.name,
+        size: 24,
+        color: slot.color ?? iconColor
+      });
+    case 'iconButton':
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: slot.onPress,
+        disabled: disabled,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: slot.accessibilityLabel,
+        style: {
+          opacity: disabled ? 0.5 : 1
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: slot.name,
+          size: 24,
+          color: slot.color ?? iconColor
+        })
+      });
+    case 'checkbox':
+      return /*#__PURE__*/_jsx(Checkbox, {
+        checked: slot.checked,
+        onChange: slot.onChange,
+        indeterminate: slot.indeterminate,
+        disabled: disabled,
+        style: CONTROL_ALIGN
+      });
+    case 'switch':
+      return /*#__PURE__*/_jsx(Switch, {
+        value: slot.value,
+        onValueChange: slot.onChange,
+        size: slot.size ?? 'sm',
+        disabled: disabled,
+        style: CONTROL_ALIGN
+      });
+    case 'radio':
+      return /*#__PURE__*/_jsx(Radio, {
+        selected: slot.selected,
+        onChange: slot.onChange,
+        disabled: disabled,
+        style: CONTROL_ALIGN
+      });
+    case 'custom':
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: slot.node
+      });
+  }
+}
+
+/**
+ * A single dropdown / menu row: text with optional leading and trailing slots
+ * (icon, icon button, checkbox, switch, radio, or a custom node). Used on its
+ * own or, more commonly, inside `Dropdown`.
+ */
+export function DropdownItem({
+  label,
+  description,
+  leading,
+  trailing,
+  onPress,
+  selected = false,
+  disabled = false,
+  destructive = false,
+  height = 58,
+  paddingHorizontal = 16,
+  style
+}) {
+  const theme = useTheme();
+  const rowPress = onPress ?? slotToggle(trailing) ?? slotToggle(leading);
+  const labelColor = disabled ? 'tertiary' : destructive ? theme.colors.feedback.error : 'primary';
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: rowPress,
+    disabled: disabled || !rowPress,
+    accessibilityRole: "menuitem",
+    accessibilityState: {
+      selected,
+      disabled
+    },
+    style: ({
+      pressed
+    }) => [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 10,
+      minHeight: height,
+      paddingHorizontal,
+      paddingVertical: description ? 8 : 0,
+      backgroundColor: selected ? theme.colors.background.subtle : pressed && rowPress ? theme.colors.background.muted : 'transparent',
+      opacity: disabled ? 0.6 : 1
+    }, style],
+    children: [/*#__PURE__*/_jsx(Slot, {
+      slot: leading,
+      disabled: disabled,
+      destructive: destructive
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "bodyLarge",
+        color: labelColor,
+        numberOfLines: 1,
+        children: label
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        variant: "bodySmall",
+        color: "tertiary",
+        numberOfLines: 2,
+        children: description
+      }) : null]
+    }), /*#__PURE__*/_jsx(Slot, {
+      slot: trailing,
+      disabled: disabled,
+      destructive: destructive
+    })]
+  });
+}
+
+/** An entry in a `Dropdown`: an item, a section header, or a divider. */
+
+/**
+ * Dropdown / menu panel — an elevated surface listing a dynamic set of options.
+ * Meant to be shown from a trigger (an Input select, an IconButton, …). Each row
+ * is a `DropdownItem`, so options can carry icons, checkboxes, switches, radios
+ * or custom nodes on either side. Supports section headers, dividers and scroll.
+ */
+export function Dropdown({
+  options,
+  onSelect,
+  width = 350,
+  minWidth,
+  maxHeight,
+  showDividers = true,
+  paddingVertical = 0,
+  radius = 'xl',
+  style
+}) {
+  const theme = useTheme();
+  const itemEntries = options.filter(o => o.type !== 'header' && o.type !== 'divider');
+  const lastItemKey = itemEntries[itemEntries.length - 1]?.key;
+  const rows = options.map(entry => {
+    if (entry.type === 'divider') {
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          height: 1,
+          backgroundColor: theme.colors.border.subtle,
+          marginVertical: 4
+        }
+      }, entry.key);
+    }
+    if (entry.type === 'header') {
+      return /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        weight: "medium",
+        color: "tertiary",
+        style: {
+          paddingHorizontal: 16,
+          paddingTop: 8,
+          paddingBottom: 4
+        },
+        children: entry.label
+      }, entry.key);
+    }
+    const {
+      key,
+      type: _type,
+      onPress,
+      ...itemProps
+    } = entry;
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(DropdownItem, {
+        ...itemProps,
+        onPress: onPress || onSelect ? () => {
+          onPress?.();
+          onSelect?.(key);
+        } : undefined
+      }), showDividers && key !== lastItemKey ? /*#__PURE__*/_jsx(View, {
+        style: {
+          height: 1,
+          backgroundColor: theme.colors.border.subtle
+        }
+      }) : null]
+    }, key);
+  });
+  const body = /*#__PURE__*/_jsx(View, {
+    style: {
+      paddingVertical
+    },
+    children: rows
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width,
+      minWidth,
+      borderRadius: theme.radii[radius],
+      borderWidth: 1,
+      borderColor: theme.colors.border.default,
+      backgroundColor: theme.colors.background.default,
+      overflow: 'hidden',
+      // Figma "shadow-5".
+      boxShadow: [{
+        offsetX: 0,
+        offsetY: 8,
+        blurRadius: 10,
+        spreadDistance: -6,
+        color: 'rgba(0, 0, 0, 0.04)'
+      }, {
+        offsetX: 0,
+        offsetY: 20,
+        blurRadius: 25,
+        spreadDistance: -5,
+        color: 'rgba(0, 0, 0, 0.04)'
+      }]
+    }, style],
+    children: maxHeight ? /*#__PURE__*/_jsx(ScrollArea, {
+      style: {
+        maxHeight
+      },
+      indicatorColor: theme.colors.border.strong,
+      children: body
+    }) : body
+  });
+}
+//# sourceMappingURL=Dropdown.js.map

package/lib/module/components/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Fragment","Pressable","View","useTheme","Checkbox","Icon","Radio","Switch","Text","ScrollArea","jsx","_jsx","_Fragment","jsxs","_jsxs","CONTROL_ALIGN","alignSelf","slotToggle","slot","undefined","kind","onChange","checked","value","Slot","disabled","destructive","theme","iconColor","colors","feedback","error","name","size","color","onPress","hitSlop","accessibilityRole","accessibilityLabel","style","opacity","children","indeterminate","onValueChange","selected","node","DropdownItem","label","description","leading","trailing","height","paddingHorizontal","rowPress","labelColor","accessibilityState","pressed","flexDirection","alignItems","gap","minHeight","paddingVertical","backgroundColor","background","subtle","muted","flex","minWidth","variant","numberOfLines","Dropdown","options","onSelect","width","maxHeight","showDividers","radius","itemEntries","filter","o","type","lastItemKey","length","key","rows","map","entry","border","marginVertical","weight","paddingTop","paddingBottom","_type","itemProps","body","borderRadius","radii","borderWidth","borderColor","default","overflow","boxShadow","offsetX","offsetY","blurRadius","spreadDistance","indicatorColor","strong"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Dropdown/Dropdown.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,417 @@
+"use strict";
+
+import { useState } from 'react';
+import { View } from 'react-native';
+import { Dropdown } from "./Dropdown.js";
+import { useTheme } from "../../theme/index.js";
+import { Text } from "../Text/Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Components/Dropdown',
+  component: Dropdown
+};
+export default meta;
+/** Faithful Figma replica: star leading, label, green check trailing (default 350 width). */
+export const Default = {
+  render: () => {
+    const theme = useTheme();
+    const options = Array.from({
+      length: 6
+    }).map((_, i) => ({
+      key: String(i),
+      label: 'Option',
+      leading: {
+        kind: 'icon',
+        name: 'star'
+      },
+      trailing: {
+        kind: 'icon',
+        name: 'check',
+        color: theme.colors.feedback.success
+      }
+    }));
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options
+      })
+    });
+  }
+};
+
+/** Select menu (e.g. opened from an Input select): tapping sets the checked row. */
+export const Select = {
+  render: () => {
+    const theme = useTheme();
+    const items = ['Small', 'Medium', 'Large', 'Extra large'];
+    const [sel, setSel] = useState('Medium');
+    const options = items.map(label => ({
+      key: label,
+      label,
+      selected: label === sel,
+      trailing: label === sel ? {
+        kind: 'icon',
+        name: 'check',
+        color: theme.colors.feedback.success
+      } : undefined
+    }));
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        padding: 24
+      },
+      children: [/*#__PURE__*/_jsx(Dropdown, {
+        options: options,
+        onSelect: setSel
+      }), /*#__PURE__*/_jsxs(Text, {
+        variant: "caption",
+        color: "secondary",
+        style: {
+          marginTop: 8
+        },
+        children: ["selected: ", sel]
+      })]
+    });
+  }
+};
+
+/** Multi-select: trailing checkbox; tapping anywhere on the row toggles it. */
+export const MultiSelect = {
+  render: () => {
+    const items = ['Cheese', 'Bacon', 'Egg', 'Avocado'];
+    const [checked, setChecked] = useState({
+      Bacon: true
+    });
+    const options = items.map(label => ({
+      key: label,
+      label,
+      trailing: {
+        kind: 'checkbox',
+        checked: Boolean(checked[label]),
+        onChange: v => setChecked(c => ({
+          ...c,
+          [label]: v
+        }))
+      }
+    }));
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options
+      })
+    });
+  }
+};
+
+/** Settings menu: trailing switch per row. */
+export const Toggles = {
+  render: () => {
+    const items = ['Notifications', 'Sound', 'Auto-print receipt'];
+    const [on, setOn] = useState({
+      Notifications: true
+    });
+    const options = items.map(label => ({
+      key: label,
+      label,
+      trailing: {
+        kind: 'switch',
+        value: Boolean(on[label]),
+        onChange: v => setOn(s => ({
+          ...s,
+          [label]: v
+        }))
+      }
+    }));
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options
+      })
+    });
+  }
+};
+
+/** Custom width via param. */
+export const CustomWidth = {
+  render: () => {
+    const options = ['Profile', 'Billing', 'Log out'].map(label => ({
+      key: label,
+      label
+    }));
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options,
+        width: 240,
+        onSelect: () => {}
+      })
+    });
+  }
+};
+
+/** Long labels truncate with an ellipsis (single line). */
+export const Ellipsis = {
+  render: () => {
+    const theme = useTheme();
+    const options = [{
+      key: '1',
+      label: 'This is a really long option label that will not fit',
+      leading: {
+        kind: 'icon',
+        name: 'star'
+      },
+      trailing: {
+        kind: 'icon',
+        name: 'check',
+        color: theme.colors.feedback.success
+      }
+    }, {
+      key: '2',
+      label: 'Another very very very long option that overflows the row',
+      trailing: {
+        kind: 'checkbox',
+        checked: false,
+        onChange: () => {}
+      }
+    }];
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options,
+        width: 260
+      })
+    });
+  }
+};
+
+/** Action menu (e.g. from an IconButton): leading icons + a destructive row. */
+export const ActionMenu = {
+  render: () => {
+    const options = [{
+      key: 'edit',
+      label: 'Edit',
+      leading: {
+        kind: 'icon',
+        name: 'edit'
+      }
+    }, {
+      key: 'duplicate',
+      label: 'Duplicate',
+      leading: {
+        kind: 'icon',
+        name: 'copy-01'
+      }
+    }, {
+      key: 'settings',
+      label: 'Settings',
+      leading: {
+        kind: 'icon',
+        name: 'settings'
+      }
+    }, {
+      key: 'div',
+      type: 'divider'
+    }, {
+      key: 'delete',
+      label: 'Delete',
+      leading: {
+        kind: 'icon',
+        name: 'trash'
+      },
+      destructive: true
+    }];
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options,
+        width: 260,
+        onSelect: () => {}
+      })
+    });
+  }
+};
+
+/** Text only — no slots. */
+export const TextOnly = {
+  render: () => {
+    const options = ['Profile', 'Billing', 'Log out'].map(label => ({
+      key: label,
+      label
+    }));
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options,
+        width: 240,
+        onSelect: () => {}
+      })
+    });
+  }
+};
+
+/** Grouped with section headers and a divider. */
+export const Grouped = {
+  render: () => {
+    const options = [{
+      key: 'h1',
+      type: 'header',
+      label: 'ACCOUNT'
+    }, {
+      key: 'profile',
+      label: 'Profile',
+      leading: {
+        kind: 'icon',
+        name: 'user'
+      }
+    }, {
+      key: 'settings',
+      label: 'Settings',
+      leading: {
+        kind: 'icon',
+        name: 'settings'
+      }
+    }, {
+      key: 'div',
+      type: 'divider'
+    }, {
+      key: 'h2',
+      type: 'header',
+      label: 'SESSION'
+    }, {
+      key: 'logout',
+      label: 'Log out',
+      destructive: true
+    }];
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options,
+        width: 280,
+        showDividers: false,
+        onSelect: () => {}
+      })
+    });
+  }
+};
+
+/** Two-line rows (label + description). */
+export const TwoLine = {
+  render: () => {
+    const options = [{
+      key: 'card',
+      label: 'Credit card',
+      description: 'Visa ending in 4242',
+      leading: {
+        kind: 'icon',
+        name: 'star'
+      }
+    }, {
+      key: 'cash',
+      label: 'Cash',
+      description: 'Pay at the counter',
+      leading: {
+        kind: 'icon',
+        name: 'star'
+      }
+    }];
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options,
+        onSelect: () => {}
+      })
+    });
+  }
+};
+
+/** Long list — scrolls beyond maxHeight. */
+export const Scrollable = {
+  render: () => {
+    const options = Array.from({
+      length: 20
+    }).map((_, i) => ({
+      key: String(i),
+      label: `Option ${i + 1}`
+    }));
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options,
+        width: 300,
+        maxHeight: 280,
+        onSelect: () => {}
+      })
+    });
+  }
+};
+
+/** Icon + actionable on both sides, and a custom leading node. */
+export const CustomAndBothSides = {
+  render: () => {
+    const [fav, setFav] = useState({});
+    const options = [{
+      key: 'a',
+      label: 'Table 1',
+      leading: {
+        kind: 'custom',
+        node: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: 12,
+            height: 12,
+            borderRadius: 6,
+            backgroundColor: '#008C57'
+          }
+        })
+      },
+      trailing: {
+        kind: 'checkbox',
+        checked: Boolean(fav.a),
+        onChange: v => setFav(f => ({
+          ...f,
+          a: v
+        }))
+      }
+    }, {
+      key: 'b',
+      label: 'Table 2',
+      leading: {
+        kind: 'icon',
+        name: 'star'
+      },
+      trailing: {
+        kind: 'iconButton',
+        name: 'edit',
+        onPress: () => {},
+        accessibilityLabel: 'Edit table 2'
+      }
+    }];
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24
+      },
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        options: options
+      })
+    });
+  }
+};
+//# sourceMappingURL=Dropdown.stories.js.map