@bacon-pos/ui 0.9.0 → 0.11.0

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,320 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { BaconLogo } from '../brand/BaconLogo';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { IconButton } from '../IconButton/IconButton';
+import { Text } from '../Text/Text';
+import { ScrollArea } from '../_internal/ScrollArea';
+
+export interface SidebarItem {
+  /** Stable key; also the active identifier. */
+  key: string;
+  /** Button text (hidden when collapsed). */
+  label: string;
+  /** Leading icon. When omitted, expanded reserves the icon space and collapsed shows the label's initial. */
+  icon?: IconName;
+  /** Optional icon shown when the item is active (e.g. a filled variant). */
+  activeIcon?: IconName;
+  /** Press handler. */
+  onPress?: () => void;
+  /** Dim and block the item. */
+  disabled?: boolean;
+}
+
+export interface SidebarProps {
+  /** Navigation items — rendered top-to-bottom. Defaults to none. */
+  items?: SidebarItem[];
+  /** Active item key (controlled). */
+  activeKey?: string;
+  /** Active item key for the uncontrolled case. */
+  defaultActiveKey?: string;
+  /** Called with the pressed item's key. */
+  onChange?: (key: string) => void;
+
+  /** Collapsed (icons only) state — controlled. */
+  collapsed?: boolean;
+  /** Initial collapsed state (uncontrolled). Defaults to false. */
+  defaultCollapsed?: boolean;
+  /** Called when the collapse state changes. */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Show the built-in expand/collapse toggle. Defaults to true. */
+  showToggle?: boolean;
+
+  /** Logo shown at the top. Defaults to the Bacon mark. */
+  logo?: ReactNode;
+  /** Bottom supporting text (e.g. a version). Defaults to none. */
+  footer?: string;
+
+  /** Expanded width. Defaults to 284 (Figma). */
+  expandedWidth?: number;
+  /** Collapsed width. Defaults to 122 (Figma). */
+  collapsedWidth?: number;
+  /** Scroll indicator color. Defaults to a subtle neutral. */
+  scrollbarColor?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+const ITEM_HEIGHT = 74;
+const ITEM_GAP = 16;
+const PADDING = 24;
+const TOGGLE_SIZE = 40; // IconButton size "sm"
+
+function SidebarButton({
+  item,
+  active,
+  collapsed,
+  onPress,
+}: {
+  item: SidebarItem;
+  active: boolean;
+  collapsed: boolean;
+  onPress: () => void;
+}) {
+  const theme = useTheme();
+  const [hovered, setHovered] = useState(false);
+  const disabled = item.disabled;
+
+  const backgroundColor = active
+    ? theme.colors.action.secondary
+    : hovered && !disabled
+      ? theme.colors.background.muted
+      : 'transparent';
+  const contentColor = active
+    ? theme.colors.action.secondaryForeground
+    : theme.colors.text.secondary;
+  const iconColor = active ? theme.colors.action.secondaryForeground : 'secondary';
+  const iconName = active && item.activeIcon ? item.activeIcon : item.icon;
+  const initial = item.label.trim().charAt(0).toUpperCase();
+
+  // Leading slot is always a fixed 24×24 box (flexShrink: 0) so the icon never
+  // shrinks next to a long label and labels stay aligned with or without an icon.
+  // No icon → reserve the space when expanded; show the initial when collapsed.
+  const leadingBox: ViewStyle = {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+  const leading = (
+    <View style={leadingBox}>
+      {iconName ? (
+        <Icon name={iconName} size={24} color={iconColor} />
+      ) : collapsed ? (
+        <Text variant="bodyLarge" weight="medium" color={contentColor}>
+          {initial}
+        </Text>
+      ) : null}
+    </View>
+  );
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      disabled={disabled}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active, disabled }}
+      accessibilityLabel={item.label}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: collapsed ? 'center' : 'flex-start',
+        gap: 10,
+        height: ITEM_HEIGHT,
+        paddingHorizontal: PADDING,
+        borderRadius: theme.radii.pill,
+        borderWidth: active ? 1 : 0,
+        borderColor: active ? theme.colors.border.default : 'transparent',
+        backgroundColor,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      {leading}
+      {!collapsed ? (
+        <Text
+          variant="bodyLarge"
+          weight="medium"
+          color={contentColor}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={{ flexShrink: 1, minWidth: 0 }}
+        >
+          {item.label}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+/**
+ * Sidebar — the app's main navigation drawer (Figma "Sidebar"). Expands/collapses
+ * between a labelled and an icon-only rail (animated width). The logo defaults to
+ * the Bacon mark (override via `logo`); an optional `footer` shows supporting text
+ * at the bottom. Items are dynamic buttons (icon + label via props); the list
+ * scrolls with an elegant auto-hiding indicator when it overflows, leaving the
+ * footer pinned. Buttons have hover and active states to mark the current section.
+ */
+export function Sidebar({
+  items = [],
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  showToggle = true,
+  logo,
+  footer,
+  expandedWidth = 284,
+  collapsedWidth = 122,
+  scrollbarColor,
+  style,
+}: SidebarProps) {
+  const theme = useTheme();
+
+  const activeControlled = activeKey !== undefined;
+  const [activeInternal, setActiveInternal] = useState(defaultActiveKey);
+  const active = activeControlled ? activeKey : activeInternal;
+
+  const collapseControlled = collapsedProp !== undefined;
+  const [collapsedInternal, setCollapsedInternal] = useState(defaultCollapsed);
+  const collapsed = collapseControlled ? collapsedProp : collapsedInternal;
+
+  const width = useRef(new Animated.Value(collapsed ? collapsedWidth : expandedWidth)).current;
+  // `visualCollapsed` drives the layout (labels, alignment, footer). It lags on
+  // collapse — labels stay mounted (clipped by overflow) until the width finishes
+  // shrinking — and leads on expand, so both directions animate without a jump.
+  const [visualCollapsed, setVisualCollapsed] = useState(collapsed);
+  useEffect(() => {
+    if (!collapsed) setVisualCollapsed(false);
+    const anim = Animated.timing(width, {
+      toValue: collapsed ? collapsedWidth : expandedWidth,
+      duration: 220,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false, // width
+    });
+    anim.start(({ finished }) => {
+      if (finished && collapsed) setVisualCollapsed(true);
+    });
+    return () => anim.stop();
+  }, [collapsed, collapsedWidth, expandedWidth, width]);
+
+  // The toggle arrow spins in place (0° → 180°) instead of moving, so collapsing
+  // never nudges it. Driven by intent (`collapsed`), in sync with the width.
+  const arrowRot = useRef(new Animated.Value(collapsed ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = Animated.timing(arrowRot, {
+      toValue: collapsed ? 1 : 0,
+      duration: 220,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [collapsed, arrowRot]);
+  const arrowRotate = arrowRot.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] });
+
+  // Glide the toggle from flush-left (expanded) to centered on the icon axis
+  // (collapsed), tracking the width so it never jumps.
+  const toggleTranslateX = width.interpolate({
+    inputRange: [collapsedWidth, expandedWidth],
+    outputRange: [Math.max(0, (collapsedWidth - 2 * PADDING - TOGGLE_SIZE) / 2), 0],
+    extrapolate: 'clamp',
+  });
+
+  const selectItem = (item: SidebarItem) => {
+    if (!activeControlled) setActiveInternal(item.key);
+    item.onPress?.();
+    onChange?.(item.key);
+  };
+
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    if (!collapseControlled) setCollapsedInternal(next);
+    onCollapsedChange?.(next);
+  };
+
+  const logoNode = logo ?? <BaconLogo height={visualCollapsed ? 36 : 40} />;
+  const toggle = showToggle ? (
+    <Animated.View style={{ transform: [{ translateX: toggleTranslateX }] }}>
+      <Animated.View style={{ transform: [{ rotate: arrowRotate }] }}>
+        <IconButton
+          icon="arrow-left"
+          accessibilityLabel={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          variant="ghost"
+          size="sm"
+          onPress={toggleCollapsed}
+        />
+      </Animated.View>
+    </Animated.View>
+  ) : null;
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width,
+          height: '100%',
+          backgroundColor: theme.colors.background.default,
+          paddingTop: 48,
+          paddingBottom: PADDING,
+          paddingHorizontal: PADDING,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      {/* Logo */}
+      <View
+        style={{
+          minHeight: 56,
+          alignItems: visualCollapsed ? 'center' : 'flex-start',
+          justifyContent: 'center',
+        }}
+      >
+        {logoNode}
+      </View>
+
+      {/* Tabs (scrolls when overflowing; footer stays pinned below) */}
+      <ScrollArea
+        style={{ flex: 1, marginTop: 32 }}
+        indicatorColor={scrollbarColor ?? theme.colors.border.strong}
+        contentContainerStyle={{ gap: ITEM_GAP, paddingBottom: 8 }}
+      >
+        {items.map((item) => (
+          <SidebarButton
+            key={item.key}
+            item={item}
+            active={item.key === active}
+            collapsed={visualCollapsed}
+            onPress={() => selectItem(item)}
+          />
+        ))}
+      </ScrollArea>
+
+      {/* Bottom: supporting footer + fixed collapse/expand toggle */}
+      <View style={{ marginTop: 28, gap: 16 }}>
+        {footer && !visualCollapsed ? (
+          <Text variant="bodySmall" color="tertiary" numberOfLines={1} style={{ marginLeft: 8 }}>
+            {footer}
+          </Text>
+        ) : null}
+        {toggle ? (
+          <View style={{ alignItems: 'flex-start' }}>{toggle}</View>
+        ) : null}
+      </View>
+    </Animated.View>
+  );
+}

package/src/components/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarItem } from './Sidebar';

package/src/components/StatTile/StatTile.tsx

@@ -0,0 +1,98 @@
+import { type ReactNode } from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+export interface StatTileProps {
+  /** Small label above the value. */
+  label: string;
+  /** The value — a string/number, or a node for custom formatting/color. */
+  value: ReactNode;
+  /** Optional leading icon. */
+  icon?: IconName;
+  /** Fixed width. Omit to fill the parent (works in a flex/grid row of tiles). */
+  width?: number;
+  /** Make the tile pressable. */
+  onPress?: () => void;
+  /** Tile background. Defaults to `background.subtle`. */
+  backgroundColor?: string;
+  /** Label color. Defaults to `secondary`. */
+  labelColor?: string;
+  /** Value color (when `value` is text). Defaults to `primary`. */
+  valueColor?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/**
+ * StatTile — a compact KPI card: a small label over a prominent value (Figma
+ * "info card"). Fills its parent by default (so a row/grid of tiles sizes evenly)
+ * or takes a fixed `width`. `value` accepts a node for custom color/formatting.
+ */
+export function StatTile({
+  label,
+  value,
+  icon,
+  width,
+  onPress,
+  backgroundColor,
+  labelColor,
+  valueColor,
+  style,
+  accessibilityLabel,
+}: StatTileProps) {
+  const theme = useTheme();
+
+  const content = (
+    <>
+      {icon ? (
+        <View style={{ width: 24, height: 24, flexShrink: 0 }}>
+          <Icon name={icon} size={24} color="secondary" />
+        </View>
+      ) : null}
+      <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
+        <Text variant="bodySmall" color={labelColor ?? 'secondary'} numberOfLines={1}>
+          {label}
+        </Text>
+        {typeof value === 'string' || typeof value === 'number' ? (
+          <Text variant="bodyLarge" weight="semibold" color={valueColor ?? 'primary'} numberOfLines={1}>
+            {String(value)}
+          </Text>
+        ) : (
+          value
+        )}
+      </View>
+    </>
+  );
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    padding: 12,
+    borderRadius: theme.radii.lg,
+    backgroundColor: backgroundColor ?? theme.colors.background.subtle,
+    ...(width != null ? { width } : { alignSelf: 'stretch' }),
+  };
+
+  if (!onPress) {
+    return (
+      <View accessibilityLabel={accessibilityLabel} style={[containerStyle, style]}>
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={({ pressed }) => [containerStyle, { opacity: pressed ? 0.96 : 1 }, style]}
+    >
+      {content}
+    </Pressable>
+  );
+}

package/src/components/StatTile/index.ts

@@ -0,0 +1,2 @@
+export { StatTile } from './StatTile';
+export type { StatTileProps } from './StatTile';

package/src/components/Table/DataTable.tsx

@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Button } from '../Button/Button';
+import { ChipGroup } from '../Chip/ChipGroup';
+import { EmptyState, type EmptyStateProps } from '../EmptyState/EmptyState';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { IconButton } from '../IconButton/IconButton';
+import { Input } from '../Input/Input';
+import { Text } from '../Text/Text';
+import { Table, type TableProps } from './Table';
+
+export interface DataTableTab {
+  value: string;
+  label: string;
+  icon?: IconName;
+}
+
+export interface DataTablePagination {
+  /** 1-based current page. */
+  page: number;
+  pageSize: number;
+  /** Total row count (across pages). */
+  total: number;
+  onPageChange: (page: number) => void;
+  /** Customize the range label. Defaults to `${from}–${to} of ${total}`. */
+  formatRange?: (from: number, to: number, total: number) => string;
+}
+
+export interface DataTableProps<T> extends Omit<TableProps<T>, 'empty'> {
+  /** Tabs above the toolbar (reuses `ChipGroup`). */
+  tabs?: DataTableTab[];
+  /** Active tab (controlled). */
+  activeTab?: string;
+  defaultTab?: string;
+  onTabChange?: (value: string) => void;
+
+  /** Show the search field. */
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+
+  /** Show a create button on the right of the toolbar. */
+  createLabel?: string;
+  onCreate?: () => void;
+  createIcon?: IconName;
+
+  /** Structured empty state (alternative to Table's `empty` node). */
+  emptyState?: EmptyStateProps;
+  /** Raw empty node (wins over `emptyState`). */
+  empty?: React.ReactNode;
+
+  /** Pagination controls below the table. */
+  pagination?: DataTablePagination;
+
+  /** Gap between toolbar sections. Defaults to 16. */
+  gap?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * 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<T>({
+  tabs,
+  activeTab,
+  defaultTab,
+  onTabChange,
+  searchable = false,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'Search…',
+  createLabel,
+  onCreate,
+  createIcon = 'plus',
+  emptyState,
+  empty,
+  pagination,
+  gap = 16,
+  containerStyle,
+  ...tableProps
+}: DataTableProps<T>) {
+  const theme = useTheme();
+
+  const tabControlled = activeTab !== undefined;
+  const [tabInternal, setTabInternal] = useState<string | null>(defaultTab ?? tabs?.[0]?.value ?? null);
+  const currentTab = tabControlled ? activeTab : tabInternal;
+  const setTab = (value: string | null) => {
+    if (value == null) return; // tabs are not deselectable
+    if (!tabControlled) setTabInternal(value);
+    onTabChange?.(value);
+  };
+
+  const emptyNode = empty ?? (emptyState ? <EmptyState {...emptyState} /> : undefined);
+
+  const showToolbar = searchable || !!createLabel;
+
+  return (
+    <View style={[{ gap }, containerStyle]}>
+      {tabs && tabs.length > 0 ? (
+        <ChipGroup
+          tone="dark"
+          options={tabs.map((t) => ({ value: t.value, label: t.label, icon: t.icon }))}
+          value={currentTab}
+          onChange={setTab}
+        />
+      ) : null}
+
+      {showToolbar ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+          {searchable ? (
+            <View style={{ flex: 1, minWidth: 220 }}>
+              <Input
+                value={searchValue}
+                onChangeText={onSearchChange}
+                placeholder={searchPlaceholder}
+                leftIcon={<Icon name="search" size={24} color="tertiary" />}
+              />
+            </View>
+          ) : null}
+          {createLabel ? (
+            <Button
+              label={createLabel}
+              variant="inverse"
+              size="md"
+              onPress={onCreate}
+              leftIcon={<Icon name={createIcon} size={24} color={theme.colors.action.inverseForeground} />}
+            />
+          ) : null}
+        </View>
+      ) : null}
+
+      <Table {...tableProps} empty={emptyNode} />
+
+      {pagination ? <Paginator {...pagination} /> : null}
+    </View>
+  );
+}
+
+function Paginator({ page, pageSize, total, onPageChange, formatRange }: DataTablePagination) {
+  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 (
+    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 12 }}>
+      <Text variant="bodySmall" color="secondary">
+        {formatRange ? formatRange(from, to, total) : `${from}–${to} of ${total}`}
+      </Text>
+      <IconButton
+        icon="arrow-left"
+        accessibilityLabel="Previous page"
+        variant="secondary"
+        size="sm"
+        disabled={page <= 1}
+        onPress={() => onPageChange(page - 1)}
+      />
+      <IconButton
+        icon="arrow-right"
+        accessibilityLabel="Next page"
+        variant="secondary"
+        size="sm"
+        disabled={page >= totalPages}
+        onPress={() => onPageChange(page + 1)}
+      />
+    </View>
+  );
+}