@bacon-pos/ui 0.5.1 → 0.6.0

package/lib/module/components/Menu/MenuButton.stories.js

@@ -0,0 +1,162 @@
+"use strict";
+
+import { useState } from 'react';
+import { View } from 'react-native';
+import { MenuButton } from "./MenuButton.js";
+import { Text } from "../Text/Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Components/MenuButton',
+  component: MenuButton
+};
+export default meta;
+/** The "More" button from the mockup: a switch row + two plain options. */
+export const More = {
+  render: () => {
+    const [showPhotos, setShowPhotos] = useState(true);
+    const options = [{
+      key: 'photos',
+      label: 'Show product photos',
+      trailing: {
+        kind: 'switch',
+        value: showPhotos,
+        onChange: setShowPhotos
+      }
+    }, {
+      key: 'opt2',
+      label: 'Option 2'
+    }, {
+      key: 'opt3',
+      label: 'Option 3'
+    }];
+    return (
+      /*#__PURE__*/
+      // Right-aligned in a toolbar, as in the mockup.
+      _jsx(View, {
+        style: {
+          padding: 24,
+          height: 360,
+          alignItems: 'flex-end'
+        },
+        children: /*#__PURE__*/_jsx(MenuButton, {
+          options: options,
+          menuWidth: 260,
+          onSelect: () => {}
+        })
+      })
+    );
+  }
+};
+
+/** Action menu with a destructive row. */
+export const Actions = {
+  render: () => {
+    const options = [{
+      key: 'edit',
+      label: 'Edit',
+      leading: {
+        kind: 'icon',
+        name: 'edit'
+      }
+    }, {
+      key: 'duplicate',
+      label: 'Duplicate',
+      leading: {
+        kind: 'icon',
+        name: 'copy-01'
+      }
+    }, {
+      key: 'div',
+      type: 'divider'
+    }, {
+      key: 'delete',
+      label: 'Delete',
+      leading: {
+        kind: 'icon',
+        name: 'trash'
+      },
+      destructive: true
+    }];
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24,
+        height: 320,
+        alignItems: 'flex-end'
+      },
+      children: /*#__PURE__*/_jsx(MenuButton, {
+        options: options,
+        menuWidth: 240,
+        onSelect: () => {}
+      })
+    });
+  }
+};
+
+/** Left-anchored: menu drops below, left edges aligned. */
+export const AnchorLeft = {
+  render: () => {
+    const options = ['Profile', 'Billing', 'Log out'].map(label => ({
+      key: label,
+      label
+    }));
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24,
+        height: 320,
+        alignItems: 'flex-start'
+      },
+      children: /*#__PURE__*/_jsx(MenuButton, {
+        options: options,
+        menuWidth: 240,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left'
+        },
+        menuOrigin: {
+          vertical: 'top',
+          horizontal: 'left'
+        },
+        onSelect: () => {}
+      })
+    });
+  }
+};
+
+/** Opens upward (e.g. a button near the bottom of the screen). */
+export const OpenUp = {
+  render: () => {
+    const options = ['One', 'Two', 'Three'].map(label => ({
+      key: label,
+      label
+    }));
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        padding: 24,
+        height: 320,
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end'
+      },
+      children: [/*#__PURE__*/_jsx(MenuButton, {
+        options: options,
+        menuWidth: 220,
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'right'
+        },
+        menuOrigin: {
+          vertical: 'bottom',
+          horizontal: 'right'
+        },
+        onSelect: () => {}
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "secondary",
+        style: {
+          marginTop: 8
+        },
+        children: "anchor top/right \xB7 menu bottom/right"
+      })]
+    });
+  }
+};
+//# sourceMappingURL=MenuButton.stories.js.map

package/lib/module/components/Menu/MenuButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","View","MenuButton","Text","jsx","_jsx","jsxs","_jsxs","meta","title","component","More","render","showPhotos","setShowPhotos","options","key","label","trailing","kind","value","onChange","style","padding","height","alignItems","children","menuWidth","onSelect","Actions","leading","name","type","destructive","AnchorLeft","map","anchorOrigin","vertical","horizontal","menuOrigin","OpenUp","justifyContent","variant","color","marginTop"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/MenuButton.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Menu/SelectButton.js

@@ -0,0 +1,139 @@
+"use strict";
+
+import { useState } from 'react';
+import { useTheme } from "../../theme/index.js";
+import { Button } from "../Button/Button.js";
+import { Dropdown } from "../Dropdown/Dropdown.js";
+import { Icon } from "../Icon/Icon.js";
+import { Menu } from "./Menu.js";
+
+/** A selectable option. Its `icon` shows both in the row and on the trigger when chosen. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Button foreground per variant — mirrors Button so the trigger icon matches the label. */
+function triggerForeground(theme, variant) {
+  const {
+    action,
+    state
+  } = theme.colors;
+  switch (variant) {
+    case 'secondary':
+      return action.secondaryForeground;
+    case 'inverse':
+      return action.inverseForeground;
+    case 'destructive':
+      return state.destructiveSubtleForeground;
+    case 'success':
+      return state.successForeground;
+    case 'successSubtle':
+      return state.successSubtleForeground;
+    default:
+      return action.primaryForeground;
+  }
+}
+
+/**
+ * Select-style button — a `Button` (label + leading icon) that opens an anchored
+ * `Dropdown` to change its value; the current option is marked with a check.
+ * A composed component built from `Button` + `Menu` + `Dropdown`. Controlled via
+ * `value` / `onChange`, or uncontrolled via `defaultValue`.
+ */
+export function SelectButton({
+  options,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder = 'Select',
+  placeholderIcon,
+  showSelectedIcon = true,
+  chevron = false,
+  variant = 'secondary',
+  size = 'sm',
+  fullWidth = false,
+  disabled = false,
+  anchorOrigin = {
+    vertical: 'bottom',
+    horizontal: 'left'
+  },
+  menuOrigin = {
+    vertical: 'top',
+    horizontal: 'left'
+  },
+  offset = 8,
+  menuWidth,
+  showDividers,
+  closeOnSelect = true,
+  open,
+  onOpenChange
+}) {
+  const theme = useTheme();
+  const isControlled = valueProp !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const value = isControlled ? valueProp : uncontrolled;
+  const selected = options.find(o => o.key === value);
+  const label = selected?.label ?? placeholder;
+  const triggerIcon = selected?.icon ?? placeholderIcon;
+  const fg = triggerForeground(theme, variant);
+  const iconSize = size === 'sm' ? 20 : 24;
+  const setValue = key => {
+    if (!isControlled) setUncontrolled(key);
+    onChange?.(key);
+  };
+  const rows = options.map(o => ({
+    key: o.key,
+    label: o.label,
+    disabled: o.disabled,
+    leading: o.icon ? {
+      kind: 'icon',
+      name: o.icon
+    } : undefined,
+    trailing: o.key === value ? {
+      kind: 'icon',
+      name: 'check',
+      color: theme.colors.feedback.success
+    } : undefined
+  }));
+  return /*#__PURE__*/_jsx(Menu, {
+    anchorOrigin: anchorOrigin,
+    menuOrigin: menuOrigin,
+    offset: offset,
+    open: open,
+    onOpenChange: onOpenChange,
+    triggerStyle: fullWidth ? {
+      alignSelf: 'stretch'
+    } : undefined,
+    renderTrigger: ({
+      toggle
+    }) => /*#__PURE__*/_jsx(Button, {
+      label: label,
+      variant: variant,
+      size: size,
+      fullWidth: fullWidth,
+      disabled: disabled,
+      onPress: toggle,
+      leftIcon: showSelectedIcon && triggerIcon ? /*#__PURE__*/_jsx(Icon, {
+        name: triggerIcon,
+        size: iconSize,
+        color: fg
+      }) : undefined,
+      rightIcon: chevron ? /*#__PURE__*/_jsx(Icon, {
+        name: "chevron-down",
+        size: iconSize,
+        color: fg
+      }) : undefined
+    }),
+    children: ({
+      close,
+      maxHeight
+    }) => /*#__PURE__*/_jsx(Dropdown, {
+      options: rows,
+      width: menuWidth,
+      maxHeight: maxHeight,
+      showDividers: showDividers,
+      onSelect: key => {
+        setValue(key);
+        if (closeOnSelect) close();
+      }
+    })
+  });
+}
+//# sourceMappingURL=SelectButton.js.map

package/lib/module/components/Menu/SelectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useTheme","Button","Dropdown","Icon","Menu","jsx","_jsx","triggerForeground","theme","variant","action","state","colors","secondaryForeground","inverseForeground","destructiveSubtleForeground","successForeground","successSubtleForeground","primaryForeground","SelectButton","options","value","valueProp","defaultValue","onChange","placeholder","placeholderIcon","showSelectedIcon","chevron","size","fullWidth","disabled","anchorOrigin","vertical","horizontal","menuOrigin","offset","menuWidth","showDividers","closeOnSelect","open","onOpenChange","isControlled","undefined","uncontrolled","setUncontrolled","selected","find","o","key","label","triggerIcon","icon","fg","iconSize","setValue","rows","map","leading","kind","name","trailing","color","feedback","success","triggerStyle","alignSelf","renderTrigger","toggle","onPress","leftIcon","rightIcon","children","close","maxHeight","width","onSelect"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/SelectButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Menu/SelectButton.stories.js

@@ -0,0 +1,112 @@
+"use strict";
+
+import { useState } from 'react';
+import { View } from 'react-native';
+import { SelectButton } from "./SelectButton.js";
+import { Text } from "../Text/Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Components/SelectButton',
+  component: SelectButton
+};
+export default meta;
+const ORDER_TYPES = [{
+  key: 'dine-in',
+  label: 'Dine in',
+  icon: 'dish'
+}, {
+  key: 'take-out',
+  label: 'Take out',
+  icon: 'shopping-bag'
+}, {
+  key: 'delivery',
+  label: 'Delivery',
+  icon: 'truck-delivery'
+}];
+
+/** The order-type selector from the mockup: leading icon, green check on the current value. */
+export const OrderType = {
+  render: () => {
+    const [value, setValue] = useState('dine-in');
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        padding: 24,
+        height: 340
+      },
+      children: [/*#__PURE__*/_jsx(SelectButton, {
+        options: ORDER_TYPES,
+        value: value,
+        onChange: setValue,
+        menuWidth: 300
+      }), /*#__PURE__*/_jsxs(Text, {
+        variant: "caption",
+        color: "secondary",
+        style: {
+          marginTop: 12
+        },
+        children: ["value: ", value]
+      })]
+    });
+  }
+};
+
+/** With a trailing chevron on the trigger. */
+export const WithChevron = {
+  render: () => {
+    const [value, setValue] = useState('dine-in');
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24,
+        height: 340
+      },
+      children: /*#__PURE__*/_jsx(SelectButton, {
+        options: ORDER_TYPES,
+        value: value,
+        onChange: setValue,
+        chevron: true,
+        menuWidth: 300
+      })
+    });
+  }
+};
+
+/** Uncontrolled with a placeholder (nothing selected initially). */
+export const Placeholder = {
+  render: () => /*#__PURE__*/_jsx(View, {
+    style: {
+      padding: 24,
+      height: 340
+    },
+    children: /*#__PURE__*/_jsx(SelectButton, {
+      options: ORDER_TYPES,
+      placeholder: "Order type",
+      placeholderIcon: "dish",
+      chevron: true,
+      menuWidth: 300,
+      onChange: () => {}
+    })
+  })
+};
+
+/** Full-width trigger (e.g. inside a form). */
+export const FullWidth = {
+  render: () => {
+    const [value, setValue] = useState('take-out');
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24,
+        height: 340,
+        width: 360
+      },
+      children: /*#__PURE__*/_jsx(SelectButton, {
+        options: ORDER_TYPES,
+        value: value,
+        onChange: setValue,
+        fullWidth: true,
+        chevron: true,
+        menuWidth: 312
+      })
+    });
+  }
+};
+//# sourceMappingURL=SelectButton.stories.js.map

package/lib/module/components/Menu/SelectButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","View","SelectButton","Text","jsx","_jsx","jsxs","_jsxs","meta","title","component","ORDER_TYPES","key","label","icon","OrderType","render","value","setValue","style","padding","height","children","options","onChange","menuWidth","variant","color","marginTop","WithChevron","chevron","Placeholder","placeholder","placeholderIcon","FullWidth","width","fullWidth"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/SelectButton.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Menu/SelectButton.test.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import { useState } from 'react';
+import { render, fireEvent, screen } from '@testing-library/react-native';
+import { ThemeProvider } from "../../theme/index.js";
+import { SelectButton } from "./SelectButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function wrap(ui) {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    children: ui
+  }));
+}
+const OPTIONS = [{
+  key: 'dine-in',
+  label: 'Dine in',
+  icon: 'dish'
+}, {
+  key: 'take-out',
+  label: 'Take out',
+  icon: 'shopping-bag'
+}, {
+  key: 'delivery',
+  label: 'Delivery',
+  icon: 'truck-delivery'
+}];
+function Controlled() {
+  const [value, setValue] = useState('dine-in');
+  return /*#__PURE__*/_jsx(SelectButton, {
+    options: OPTIONS,
+    value: value,
+    onChange: setValue
+  });
+}
+describe('SelectButton', () => {
+  it('shows the placeholder when nothing is selected', () => {
+    wrap(/*#__PURE__*/_jsx(SelectButton, {
+      options: OPTIONS,
+      placeholder: "Order type"
+    }));
+    expect(screen.getByText('Order type')).toBeTruthy();
+  });
+  it('shows the selected option label on the trigger', () => {
+    wrap(/*#__PURE__*/_jsx(SelectButton, {
+      options: OPTIONS,
+      value: "take-out"
+    }));
+    expect(screen.getByText('Take out')).toBeTruthy();
+  });
+  it('opens the menu and lists the options', () => {
+    wrap(/*#__PURE__*/_jsx(SelectButton, {
+      options: OPTIONS,
+      value: "dine-in"
+    }));
+    // The trigger shows "Dine in"; open the menu to reveal the rows.
+    fireEvent.press(screen.getByText('Dine in'));
+    expect(screen.getByText('Take out')).toBeTruthy();
+    expect(screen.getByText('Delivery')).toBeTruthy();
+  });
+  it('selecting a row calls onChange with its key and closes', () => {
+    const onChange = jest.fn();
+    wrap(/*#__PURE__*/_jsx(SelectButton, {
+      options: OPTIONS,
+      value: "dine-in",
+      onChange: onChange
+    }));
+    fireEvent.press(screen.getByText('Dine in'));
+    fireEvent.press(screen.getByText('Delivery'));
+    expect(onChange).toHaveBeenCalledWith('delivery');
+    expect(screen.queryByText('Take out')).toBeNull();
+  });
+  it('uncontrolled: the trigger reflects the new selection', () => {
+    wrap(/*#__PURE__*/_jsx(Controlled, {}));
+    fireEvent.press(screen.getByText('Dine in'));
+    fireEvent.press(screen.getByText('Delivery'));
+    // Trigger now shows Delivery; menu closed.
+    expect(screen.getByText('Delivery')).toBeTruthy();
+    expect(screen.queryByText('Take out')).toBeNull();
+  });
+});
+//# sourceMappingURL=SelectButton.test.js.map

package/lib/module/components/Menu/SelectButton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","render","fireEvent","screen","ThemeProvider","SelectButton","jsx","_jsx","wrap","ui","children","OPTIONS","key","label","icon","Controlled","value","setValue","options","onChange","describe","it","placeholder","expect","getByText","toBeTruthy","press","jest","fn","toHaveBeenCalledWith","queryByText","toBeNull"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/SelectButton.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Menu/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { Menu } from "./Menu.js";
+export { MenuButton } from "./MenuButton.js";
+export { SelectButton } from "./SelectButton.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Menu","MenuButton","SelectButton"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Menu/index.ts"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,WAAQ;AAQ7B,SAASC,UAAU,QAAQ,iBAAc;AAEzC,SAASC,YAAY,QAAQ,mBAAgB","ignoreList":[]}