@bacon-pos/ui 0.9.0 → 0.11.0

package/lib/module/components/Table/DataTable.js

@@ -0,0 +1,145 @@
+"use strict";
+
+import { useState } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { Button } from "../Button/Button.js";
+import { ChipGroup } from "../Chip/ChipGroup.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { Icon } from "../Icon/Icon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Input } from "../Input/Input.js";
+import { Text } from "../Text/Text.js";
+import { Table } from "./Table.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — the turnkey management table (Figma): optional tabs (`ChipGroup`),
+ * a search + create toolbar, the `Table` body, a structured `EmptyState`, and
+ * optional pagination — assembled with consistent spacing. For bespoke layouts,
+ * compose `Table` + `EmptyState` yourself.
+ */
+export function DataTable({
+  tabs,
+  activeTab,
+  defaultTab,
+  onTabChange,
+  searchable = false,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'Search…',
+  createLabel,
+  onCreate,
+  createIcon = 'plus',
+  emptyState,
+  empty,
+  pagination,
+  gap = 16,
+  containerStyle,
+  ...tableProps
+}) {
+  const theme = useTheme();
+  const tabControlled = activeTab !== undefined;
+  const [tabInternal, setTabInternal] = useState(defaultTab ?? tabs?.[0]?.value ?? null);
+  const currentTab = tabControlled ? activeTab : tabInternal;
+  const setTab = value => {
+    if (value == null) return; // tabs are not deselectable
+    if (!tabControlled) setTabInternal(value);
+    onTabChange?.(value);
+  };
+  const emptyNode = empty ?? (emptyState ? /*#__PURE__*/_jsx(EmptyState, {
+    ...emptyState
+  }) : undefined);
+  const showToolbar = searchable || !!createLabel;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap
+    }, containerStyle],
+    children: [tabs && tabs.length > 0 ? /*#__PURE__*/_jsx(ChipGroup, {
+      tone: "dark",
+      options: tabs.map(t => ({
+        value: t.value,
+        label: t.label,
+        icon: t.icon
+      })),
+      value: currentTab,
+      onChange: setTab
+    }) : null, showToolbar ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        flexWrap: 'wrap'
+      },
+      children: [searchable ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1,
+          minWidth: 220
+        },
+        children: /*#__PURE__*/_jsx(Input, {
+          value: searchValue,
+          onChangeText: onSearchChange,
+          placeholder: searchPlaceholder,
+          leftIcon: /*#__PURE__*/_jsx(Icon, {
+            name: "search",
+            size: 24,
+            color: "tertiary"
+          })
+        })
+      }) : null, createLabel ? /*#__PURE__*/_jsx(Button, {
+        label: createLabel,
+        variant: "inverse",
+        size: "md",
+        onPress: onCreate,
+        leftIcon: /*#__PURE__*/_jsx(Icon, {
+          name: createIcon,
+          size: 24,
+          color: theme.colors.action.inverseForeground
+        })
+      }) : null]
+    }) : null, /*#__PURE__*/_jsx(Table, {
+      ...tableProps,
+      empty: emptyNode
+    }), pagination ? /*#__PURE__*/_jsx(Paginator, {
+      ...pagination
+    }) : null]
+  });
+}
+function Paginator({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  formatRange
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, total);
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: 12
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "bodySmall",
+      color: "secondary",
+      children: formatRange ? formatRange(from, to, total) : `${from}–${to} of ${total}`
+    }), /*#__PURE__*/_jsx(IconButton, {
+      icon: "arrow-left",
+      accessibilityLabel: "Previous page",
+      variant: "secondary",
+      size: "sm",
+      disabled: page <= 1,
+      onPress: () => onPageChange(page - 1)
+    }), /*#__PURE__*/_jsx(IconButton, {
+      icon: "arrow-right",
+      accessibilityLabel: "Next page",
+      variant: "secondary",
+      size: "sm",
+      disabled: page >= totalPages,
+      onPress: () => onPageChange(page + 1)
+    })]
+  });
+}
+//# sourceMappingURL=DataTable.js.map

package/lib/module/components/Table/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","View","useTheme","Button","ChipGroup","EmptyState","Icon","IconButton","Input","Text","Table","jsx","_jsx","jsxs","_jsxs","DataTable","tabs","activeTab","defaultTab","onTabChange","searchable","searchValue","onSearchChange","searchPlaceholder","createLabel","onCreate","createIcon","emptyState","empty","pagination","gap","containerStyle","tableProps","theme","tabControlled","undefined","tabInternal","setTabInternal","value","currentTab","setTab","emptyNode","showToolbar","style","children","length","tone","options","map","t","label","icon","onChange","flexDirection","alignItems","flexWrap","flex","minWidth","onChangeText","placeholder","leftIcon","name","size","color","variant","onPress","colors","action","inverseForeground","Paginator","page","pageSize","total","onPageChange","formatRange","totalPages","Math","max","ceil","from","to","min","justifyContent","accessibilityLabel","disabled"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Table/DataTable.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Table/DataTable.stories.js

@@ -0,0 +1,210 @@
+"use strict";
+
+import { useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { DataTable } from "./DataTable.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Components/DataTable',
+  component: DataTable
+};
+export default meta;
+const ALL = [{
+  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: 'Savory Mushroom Risotto',
+  category: 'Starter',
+  price: '$8.99'
+}, {
+  id: '5',
+  name: 'Grilled Vegetable Skewers',
+  category: 'Main plates',
+  price: '$6.50'
+}, {
+  id: '6',
+  name: 'Honey Glazed Salmon',
+  category: 'Main plates',
+  price: '$3.99'
+}, {
+  id: '7',
+  name: 'Classic Beef Tacos',
+  category: 'Main plates',
+  price: '$11.20'
+}, {
+  id: '8',
+  name: 'Rich Chocolate Mousse',
+  category: 'Desserts',
+  price: '$12.30'
+}, {
+  id: '9',
+  name: 'Fresh Berry Parfait',
+  category: 'Soups',
+  price: '$10.90'
+}];
+const TABS = [{
+  value: 'menu',
+  label: 'Menu items'
+}, {
+  value: 'categories',
+  label: 'Categories'
+}, {
+  value: 'modes',
+  label: 'Modes sets'
+}, {
+  value: 'addons',
+  label: 'Add-ons sets'
+}, {
+  value: 'inventory',
+  label: 'Inventory control'
+}];
+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('$', ''))
+}];
+
+/** Full data table (Figma): tabs + search + create + actions. */
+export const Full = {
+  render: () => {
+    const [tab, setTab] = useState('menu');
+    const [search, setSearch] = useState('');
+    const data = useMemo(() => ALL.filter(r => r.name.toLowerCase().includes(search.toLowerCase())), [search]);
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24,
+        width: 980
+      },
+      children: /*#__PURE__*/_jsx(DataTable, {
+        tabs: TABS,
+        activeTab: tab,
+        onTabChange: setTab,
+        searchable: true,
+        searchValue: search,
+        onSearchChange: setSearch,
+        searchPlaceholder: "Search item from menu list\u2026",
+        createLabel: "Create new item",
+        onCreate: () => {},
+        columns: COLUMNS,
+        data: data,
+        keyExtractor: r => r.id,
+        renderActions: r => /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            icon: "edit",
+            accessibilityLabel: `Edit ${r.name}`,
+            variant: "ghost",
+            size: "sm",
+            onPress: () => {}
+          }), /*#__PURE__*/_jsx(IconButton, {
+            icon: "trash",
+            accessibilityLabel: `Delete ${r.name}`,
+            variant: "ghost",
+            size: "sm",
+            onPress: () => {}
+          })]
+        }),
+        emptyState: {
+          icon: 'dish',
+          title: 'No items yet',
+          description: 'Categories group your menu items, like Mains or Drinks. Create your first one to get started.',
+          action: {
+            label: 'Create item',
+            icon: 'plus',
+            onPress: () => {}
+          }
+        }
+      })
+    });
+  }
+};
+
+/** Empty state through the toolbar. */
+export const EmptyState = {
+  render: () => {
+    const [tab, setTab] = useState('categories');
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24,
+        width: 980
+      },
+      children: /*#__PURE__*/_jsx(DataTable, {
+        tabs: TABS,
+        activeTab: tab,
+        onTabChange: setTab,
+        searchable: true,
+        createLabel: "Create item",
+        onCreate: () => {},
+        columns: COLUMNS,
+        data: [],
+        keyExtractor: r => r.id,
+        emptyState: {
+          icon: 'dish',
+          title: 'No items yet',
+          description: 'Categories group your menu items, like Mains or Drinks, and give each a color on the POS.',
+          action: {
+            label: 'Create item',
+            icon: 'plus',
+            onPress: () => {}
+          }
+        }
+      })
+    });
+  }
+};
+
+/** With pagination. */
+export const Paginated = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    const pageSize = 4;
+    const pageData = ALL.slice((page - 1) * pageSize, page * pageSize);
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: 24,
+        width: 980
+      },
+      children: /*#__PURE__*/_jsx(DataTable, {
+        searchable: true,
+        createLabel: "Create new item",
+        onCreate: () => {},
+        columns: COLUMNS,
+        data: pageData,
+        keyExtractor: r => r.id,
+        pagination: {
+          page,
+          pageSize,
+          total: ALL.length,
+          onPageChange: setPage
+        }
+      })
+    });
+  }
+};
+//# sourceMappingURL=DataTable.stories.js.map

package/lib/module/components/Table/DataTable.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useState","View","DataTable","IconButton","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","meta","title","component","ALL","id","name","category","price","TABS","value","label","COLUMNS","key","header","flex","sortable","sortAccessor","r","align","Number","replace","Full","render","tab","setTab","search","setSearch","data","filter","toLowerCase","includes","style","padding","width","children","tabs","activeTab","onTabChange","searchable","searchValue","onSearchChange","searchPlaceholder","createLabel","onCreate","columns","keyExtractor","renderActions","icon","accessibilityLabel","variant","size","onPress","emptyState","description","action","EmptyState","Paginated","page","setPage","pageSize","pageData","slice","pagination","total","length","onPageChange"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Table/DataTable.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Table/DataTable.test.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import { useState } from 'react';
+import { render, fireEvent, screen } from '@testing-library/react-native';
+import { ThemeProvider } from "../../theme/index.js";
+import { DataTable } from "./DataTable.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function wrap(ui) {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    children: ui
+  }));
+}
+const DATA = [{
+  id: 'a',
+  name: 'Alpha',
+  price: '$3'
+}, {
+  id: 'b',
+  name: 'Beta',
+  price: '$1'
+}];
+const COLS = [{
+  key: 'name',
+  header: 'Name'
+}, {
+  key: 'price',
+  header: 'Price'
+}];
+const TABS = [{
+  value: 'menu',
+  label: 'Menu items'
+}, {
+  value: 'cats',
+  label: 'Categories'
+}];
+const desktop = {
+  mobileBreakpoint: 0
+};
+describe('DataTable', () => {
+  it('renders tabs, search, create and the table', () => {
+    wrap(/*#__PURE__*/_jsx(DataTable, {
+      ...desktop,
+      tabs: TABS,
+      searchable: true,
+      createLabel: "Create new item",
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id
+    }));
+    expect(screen.getByText('Menu items')).toBeTruthy();
+    expect(screen.getByText('Create new item')).toBeTruthy();
+    expect(screen.getByText('Alpha')).toBeTruthy();
+  });
+  it('changes tab on press', () => {
+    const onTabChange = jest.fn();
+    wrap(/*#__PURE__*/_jsx(DataTable, {
+      ...desktop,
+      tabs: TABS,
+      activeTab: "menu",
+      onTabChange: onTabChange,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id
+    }));
+    fireEvent.press(screen.getByText('Categories'));
+    expect(onTabChange).toHaveBeenCalledWith('cats');
+  });
+  it('emits search text', () => {
+    const onSearchChange = jest.fn();
+    wrap(/*#__PURE__*/_jsx(DataTable, {
+      ...desktop,
+      searchable: true,
+      searchValue: "",
+      onSearchChange: onSearchChange,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id,
+      searchPlaceholder: "Search\u2026"
+    }));
+    fireEvent.changeText(screen.getByPlaceholderText('Search…'), 'alp');
+    expect(onSearchChange).toHaveBeenCalledWith('alp');
+  });
+  it('fires create', () => {
+    const onCreate = jest.fn();
+    wrap(/*#__PURE__*/_jsx(DataTable, {
+      ...desktop,
+      createLabel: "Create",
+      onCreate: onCreate,
+      columns: COLS,
+      data: DATA,
+      keyExtractor: r => r.id
+    }));
+    fireEvent.press(screen.getByText('Create'));
+    expect(onCreate).toHaveBeenCalledTimes(1);
+  });
+  it('shows the structured empty state when there is no data', () => {
+    wrap(/*#__PURE__*/_jsx(DataTable, {
+      ...desktop,
+      columns: COLS,
+      data: [],
+      keyExtractor: r => r.id,
+      emptyState: {
+        title: 'No items yet',
+        action: {
+          label: 'Create item',
+          onPress: () => {}
+        }
+      }
+    }));
+    expect(screen.getByText('No items yet')).toBeTruthy();
+    expect(screen.getByText('Create item')).toBeTruthy();
+  });
+  it('paginates', () => {
+    function Paged() {
+      const [page, setPage] = useState(1);
+      const all = Array.from({
+        length: 5
+      }).map((_, i) => ({
+        id: String(i),
+        name: `N${i}`,
+        price: '$1'
+      }));
+      const data = all.slice((page - 1) * 2, page * 2);
+      return /*#__PURE__*/_jsx(DataTable, {
+        ...desktop,
+        columns: COLS,
+        data: data,
+        keyExtractor: r => r.id,
+        pagination: {
+          page,
+          pageSize: 2,
+          total: all.length,
+          onPageChange: setPage
+        }
+      });
+    }
+    wrap(/*#__PURE__*/_jsx(Paged, {}));
+    expect(screen.getByText('1–2 of 5')).toBeTruthy();
+    fireEvent.press(screen.getByLabelText('Next page'));
+    expect(screen.getByText('3–4 of 5')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=DataTable.test.js.map

package/lib/module/components/Table/DataTable.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","render","fireEvent","screen","ThemeProvider","DataTable","jsx","_jsx","wrap","ui","children","DATA","id","name","price","COLS","key","header","TABS","value","label","desktop","mobileBreakpoint","describe","it","tabs","searchable","createLabel","columns","data","keyExtractor","r","expect","getByText","toBeTruthy","onTabChange","jest","fn","activeTab","press","toHaveBeenCalledWith","onSearchChange","searchValue","searchPlaceholder","changeText","getByPlaceholderText","onCreate","toHaveBeenCalledTimes","emptyState","title","action","onPress","Paged","page","setPage","all","Array","from","length","map","_","i","String","slice","pagination","pageSize","total","onPageChange","getByLabelText"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Table/DataTable.test.tsx"],"mappings":"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","ignoreList":[]}