@bacon-pos/ui 0.9.0 → 0.10.0

package/lib/commonjs/components/Table/Table.stories.js

@@ -0,0 +1,385 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithActions = exports.SortableSelectable = exports.Scrollable = exports.Loading = exports.Expandable = exports.Empty = exports.Base = exports.Alignment = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _Table = require("./Table.js");
+var _Badge = require("../Badge/Badge.js");
+var _EmptyState = require("../EmptyState/EmptyState.js");
+var _IconButton = require("../IconButton/IconButton.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const meta = {
+  title: 'Components/Table',
+  component: _Table.Table
+};
+var _default = exports.default = meta;
+const SHIFTS = [{
+  id: '1',
+  date: 'Wed 07/29/26',
+  in: '06:30 AM',
+  breaks: 'No breaks',
+  out: '07:07 h.',
+  total: '7:07 h.',
+  active: true
+}, {
+  id: '2',
+  date: 'Thu 07/30/26',
+  in: '07:15 AM',
+  breaks: '1 break',
+  out: '02:01 PM',
+  total: '6:45 h.'
+}, {
+  id: '3',
+  date: 'Fri 07/31/26',
+  in: '06:45 AM',
+  breaks: '1 break',
+  out: '01:18 PM',
+  total: '5:30 h.'
+}, {
+  id: '4',
+  date: 'Sat 08/01/26',
+  in: '08:00 AM',
+  breaks: '2 breaks',
+  out: '11:58 AM',
+  total: '4:50 h.'
+}];
+
+/** Base table (Figma) with a Badge cell. */
+const Base = exports.Base = {
+  render: () => {
+    const columns = [{
+      key: 'date',
+      header: 'Date'
+    }, {
+      key: 'in',
+      header: 'In'
+    }, {
+      key: 'breaks',
+      header: 'Breaks'
+    }, {
+      key: 'out',
+      header: 'Out',
+      render: r => r.active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.Badge, {
+        label: "Active"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+        variant: "bodyMedium",
+        children: r.out
+      })
+    }, {
+      key: 'total',
+      header: 'Total'
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 900
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        columns: columns,
+        data: SHIFTS,
+        keyExtractor: r => r.id
+      })
+    });
+  }
+};
+
+/** Expandable (accordion) rows — tap a row to reveal detail; single open at a time. */
+const Expandable = exports.Expandable = {
+  render: () => {
+    const columns = [{
+      key: 'date',
+      header: 'Date'
+    }, {
+      key: 'in',
+      header: 'In'
+    }, {
+      key: 'out',
+      header: 'Out'
+    }, {
+      key: 'total',
+      header: 'Total'
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 900
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        columns: columns,
+        data: SHIFTS,
+        keyExtractor: r => r.id,
+        expandable: true,
+        renderExpanded: r => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.Text, {
+          variant: "bodyMedium",
+          color: "secondary",
+          children: ["Breaks: ", r.breaks, " \xB7 Clocked in at ", r.in, ", out at ", r.out, "."]
+        })
+      })
+    });
+  }
+};
+const ITEMS = [{
+  id: '1',
+  name: 'Spicy Mango Salsa',
+  category: 'Starter',
+  price: '$4.25'
+}, {
+  id: '2',
+  name: 'Creamy Garlic Pasta',
+  category: 'Starter',
+  price: '$5.75'
+}, {
+  id: '3',
+  name: 'Zesty Lemon Chicken',
+  category: 'Starter',
+  price: '$7.10'
+}, {
+  id: '4',
+  name: 'Grilled Vegetable Skewers',
+  category: 'Main plates',
+  price: '$6.50'
+}];
+
+/**
+ * Actions column (edit / delete). A whole-row press can coexist with the action
+ * buttons — tapping a button runs its own handler; tapping elsewhere runs the row
+ * action (here it opens detail; can be the same as an action button or different).
+ */
+const WithActions = exports.WithActions = {
+  render: () => {
+    const [log, setLog] = (0, _react.useState)('—');
+    const columns = [{
+      key: 'name',
+      header: 'Item name',
+      flex: 2
+    }, {
+      key: 'category',
+      header: 'Category'
+    }, {
+      key: 'price',
+      header: 'Price',
+      align: 'right'
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 900,
+        gap: 8
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        columns: columns,
+        data: ITEMS,
+        keyExtractor: r => r.id,
+        onRowPress: r => setLog(`row: ${r.name}`),
+        renderActions: r => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+            icon: "edit",
+            accessibilityLabel: "Edit",
+            variant: "ghost",
+            size: "sm",
+            onPress: () => setLog(`edit: ${r.name}`)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+            icon: "trash",
+            accessibilityLabel: "Delete",
+            variant: "ghost",
+            size: "sm",
+            onPress: () => setLog(`delete: ${r.name}`)
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.Text, {
+        variant: "caption",
+        color: "secondary",
+        children: ["last: ", log]
+      })]
+    });
+  }
+};
+
+/** Column alignment: left / center / right. */
+const Alignment = exports.Alignment = {
+  render: () => {
+    const columns = [{
+      key: 'name',
+      header: 'Left',
+      flex: 2,
+      align: 'left'
+    }, {
+      key: 'category',
+      header: 'Center',
+      align: 'center'
+    }, {
+      key: 'price',
+      header: 'Right',
+      align: 'right'
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 900
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        columns: columns,
+        data: ITEMS,
+        keyExtractor: r => r.id
+      })
+    });
+  }
+};
+
+/** Sortable headers + row selection. */
+const SortableSelectable = exports.SortableSelectable = {
+  render: () => {
+    const [selected, setSelected] = (0, _react.useState)(['2']);
+    const columns = [{
+      key: 'name',
+      header: 'Item name',
+      flex: 2,
+      sortable: true,
+      sortAccessor: r => r.name
+    }, {
+      key: 'category',
+      header: 'Category',
+      sortable: true,
+      sortAccessor: r => r.category
+    }, {
+      key: 'price',
+      header: 'Price',
+      align: 'right',
+      sortable: true,
+      sortAccessor: r => Number(r.price.replace('$', ''))
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 900
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        columns: columns,
+        data: ITEMS,
+        keyExtractor: r => r.id,
+        selectable: true,
+        selectedKeys: selected,
+        onSelectionChange: setSelected,
+        defaultSort: {
+          key: 'price',
+          direction: 'asc'
+        }
+      })
+    });
+  }
+};
+
+/** Long list — sticky header, body scrolls (elegant indicator). */
+const Scrollable = exports.Scrollable = {
+  render: () => {
+    const many = Array.from({
+      length: 25
+    }).map((_, i) => ({
+      id: String(i),
+      name: `Menu item ${i + 1}`,
+      category: i % 2 ? 'Main plates' : 'Starter',
+      price: `$${(i + 1) * 1.5}`
+    }));
+    const columns = [{
+      key: 'name',
+      header: 'Item name',
+      flex: 2
+    }, {
+      key: 'category',
+      header: 'Category'
+    }, {
+      key: 'price',
+      header: 'Price',
+      align: 'right'
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 900
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        columns: columns,
+        data: many,
+        keyExtractor: r => r.id,
+        maxHeight: 360
+      })
+    });
+  }
+};
+const LOADING_COLS = [{
+  key: 'name',
+  header: 'Item name',
+  flex: 2
+}, {
+  key: 'category',
+  header: 'Category'
+}, {
+  key: 'price',
+  header: 'Price',
+  align: 'right'
+}];
+
+/** Empty state. */
+const Empty = exports.Empty = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      padding: 24,
+      width: 900
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      columns: LOADING_COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      empty: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyState.EmptyState, {
+        icon: "dish",
+        title: "No items yet",
+        description: "Create your first one to get started.",
+        action: {
+          label: 'Create item',
+          icon: 'plus',
+          onPress: () => {}
+        }
+      })
+    })
+  })
+};
+
+/** Loading: spinner (with/without text) and skeleton. */
+const Loading = exports.Loading = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      padding: 24,
+      width: 900,
+      gap: 24
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      columns: LOADING_COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      loading: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      columns: LOADING_COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      loading: true,
+      loadingText: "Fetching menu\u2026"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      columns: LOADING_COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      loading: true,
+      loadingText: null
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      columns: LOADING_COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      loading: true,
+      loadingVariant: "skeleton"
+    })]
+  })
+};
+//# sourceMappingURL=Table.stories.js.map

package/lib/commonjs/components/Table/Table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_Table","_Badge","_EmptyState","_IconButton","_Text","_jsxRuntime","meta","title","component","Table","_default","exports","default","SHIFTS","id","date","in","breaks","out","total","active","Base","render","columns","key","header","r","jsx","Badge","label","Text","variant","children","View","style","padding","width","data","keyExtractor","Expandable","expandable","renderExpanded","jsxs","color","ITEMS","name","category","price","WithActions","log","setLog","useState","flex","align","gap","onRowPress","renderActions","Fragment","IconButton","icon","accessibilityLabel","size","onPress","Alignment","SortableSelectable","selected","setSelected","sortable","sortAccessor","Number","replace","selectable","selectedKeys","onSelectionChange","defaultSort","direction","Scrollable","many","Array","from","length","map","_","i","String","maxHeight","LOADING_COLS","Empty","empty","EmptyState","description","action","Loading","loading","loadingText","loadingVariant"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Table/Table.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Table/Table.test.js

@@ -0,0 +1,278 @@
+"use strict";
+
+var _reactNative = require("@testing-library/react-native");
+var _reactNative2 = require("react-native");
+var _index = require("../../theme/index.js");
+var _IconButton = require("../IconButton/IconButton.js");
+var _Table = require("./Table.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function wrap(ui) {
+  return (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+    children: ui
+  }));
+}
+const DATA = [{
+  id: 'a',
+  name: 'Alpha',
+  price: '$3'
+}, {
+  id: 'b',
+  name: 'Beta',
+  price: '$1'
+}, {
+  id: 'c',
+  name: 'Gamma',
+  price: '$2'
+}];
+const COLS = [{
+  key: 'name',
+  header: 'Name'
+}, {
+  key: 'price',
+  header: 'Price'
+}];
+// mobileBreakpoint={0} forces the desktop layout regardless of the test window.
+const desktop = {
+  mobileBreakpoint: 0
+};
+describe('Table', () => {
+  it('renders headers and cell values', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id
+    }));
+    expect(_reactNative.screen.getByText('Name')).toBeTruthy();
+    expect(_reactNative.screen.getByText('Alpha')).toBeTruthy();
+    expect(_reactNative.screen.getByText('$3')).toBeTruthy();
+  });
+  it('renders a custom cell node', () => {
+    const cols = [{
+      key: 'name',
+      header: 'Name'
+    }, {
+      key: 'price',
+      header: 'Price',
+      render: r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
+        children: `price:${r.price}`
+      })
+    }];
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: cols,
+      data: DATA,
+      keyExtractor: r => r.id
+    }));
+    expect(_reactNative.screen.getByText('price:$3')).toBeTruthy();
+  });
+  it('fires onRowPress', () => {
+    const onRowPress = jest.fn();
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id,
+      onRowPress: onRowPress
+    }));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Alpha'));
+    expect(onRowPress).toHaveBeenCalledWith(DATA[0], 0);
+  });
+  it('expands a row on press and collapses the previous one (single mode)', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id,
+      expandable: true,
+      renderExpanded: r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
+        children: `detail-${r.id}`
+      })
+    }));
+    expect(_reactNative.screen.queryByText('detail-a')).toBeNull();
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Alpha'));
+    expect(_reactNative.screen.getByText('detail-a')).toBeTruthy();
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Beta'));
+    expect(_reactNative.screen.queryByText('detail-a')).toBeNull();
+    expect(_reactNative.screen.getByText('detail-b')).toBeTruthy();
+  });
+  it('renders an actions column', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id,
+      renderActions: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
+        children: "row-action"
+      })
+    }));
+    expect(_reactNative.screen.getAllByText('row-action').length).toBe(DATA.length);
+  });
+  it('row press coexists with the actions column (buttons keep their own handlers)', () => {
+    const onRowPress = jest.fn();
+    const onEdit = jest.fn();
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id,
+      onRowPress: onRowPress,
+      renderActions: r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+        icon: "edit",
+        accessibilityLabel: `edit-${r.id}`,
+        variant: "ghost",
+        size: "sm",
+        onPress: () => onEdit(r.id)
+      })
+    }));
+    // Pressing the action button runs its handler, not the row's.
+    _reactNative.fireEvent.press(_reactNative.screen.getByLabelText('edit-a'));
+    expect(onEdit).toHaveBeenCalledWith('a');
+    expect(onRowPress).not.toHaveBeenCalled();
+    // Pressing a cell runs the row handler.
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Alpha'));
+    expect(onRowPress).toHaveBeenCalledWith(DATA[0], 0);
+  });
+  it('shows a spinner with default loading text, a custom text, or none', () => {
+    const {
+      rerender
+    } = wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      loading: true
+    }));
+    expect(_reactNative.screen.getByText('Loading data')).toBeTruthy();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        ...desktop,
+        columns: COLS,
+        data: [],
+        keyExtractor: r => r.id,
+        loading: true,
+        loadingText: "Fetching\u2026"
+      })
+    }));
+    expect(_reactNative.screen.getByText('Fetching…')).toBeTruthy();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        ...desktop,
+        columns: COLS,
+        data: [],
+        keyExtractor: r => r.id,
+        loading: true,
+        loadingText: null
+      })
+    }));
+    expect(_reactNative.screen.queryByText('Loading data')).toBeNull();
+  });
+  it('renders a skeleton without the loading text', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      loading: true,
+      loadingVariant: "skeleton"
+    }));
+    expect(_reactNative.screen.queryByText('Loading data')).toBeNull();
+    // Header is still shown while skeleton loads.
+    expect(_reactNative.screen.getByText('Name')).toBeTruthy();
+  });
+  it('selects rows and select-all', () => {
+    const onSelectionChange = jest.fn();
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id,
+      selectable: true,
+      selectedKeys: [],
+      onSelectionChange: onSelectionChange
+    }));
+    const checkboxes = _reactNative.screen.getAllByRole('checkbox');
+    // [0] = header select-all, [1..] = rows
+    _reactNative.fireEvent.press(checkboxes[1]);
+    expect(onSelectionChange).toHaveBeenCalledWith(['a']);
+    _reactNative.fireEvent.press(checkboxes[0]);
+    expect(onSelectionChange).toHaveBeenCalledWith(['a', 'b', 'c']);
+  });
+  it('emits sort changes from a sortable header (controlled)', () => {
+    const onSortChange = jest.fn();
+    const cols = [{
+      key: 'name',
+      header: 'Name',
+      sortable: true,
+      sortAccessor: r => r.name
+    }, {
+      key: 'price',
+      header: 'Price'
+    }];
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: cols,
+      data: DATA,
+      keyExtractor: r => r.id,
+      sort: {
+        key: 'price',
+        direction: 'asc'
+      },
+      onSortChange: onSortChange
+    }));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Name'));
+    expect(onSortChange).toHaveBeenCalledWith({
+      key: 'name',
+      direction: 'asc'
+    });
+  });
+  it('sorts internally by the column accessor', () => {
+    const cols = [{
+      key: 'name',
+      header: 'Name'
+    }, {
+      key: 'price',
+      header: 'Price',
+      sortable: true,
+      sortAccessor: r => Number(r.price.replace('$', ''))
+    }];
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: cols,
+      data: DATA,
+      keyExtractor: r => r.id,
+      defaultSort: {
+        key: 'price',
+        direction: 'asc'
+      }
+    }));
+    // Ascending by price: Beta ($1), Gamma ($2), Alpha ($3)
+    const names = _reactNative.screen.getAllByText(/Alpha|Beta|Gamma/).map(n => n.props.children);
+    expect(names).toEqual(['Beta', 'Gamma', 'Alpha']);
+  });
+  it('shows the empty slot when there is no data', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...desktop,
+      columns: COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      empty: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
+        children: "Nothing here"
+      })
+    }));
+    expect(_reactNative.screen.getByText('Nothing here')).toBeTruthy();
+  });
+  it('renders a card layout below the mobile breakpoint (no header row)', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      mobileBreakpoint: 99999,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id
+    }));
+    // Values still render; header labels appear inside each card.
+    expect(_reactNative.screen.getByText('Alpha')).toBeTruthy();
+    // "Name" header label appears once per card (3), not once as a table header.
+    expect(_reactNative.screen.getAllByText('Name').length).toBe(DATA.length);
+  });
+});
+//# sourceMappingURL=Table.test.js.map