@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Table/Table.utils.test.ts

@@ -1,82 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { getColumnMinWidth, getColumnStyle, getMinTableWidth } from './Table.utils';
-
-describe('getColumnMinWidth', () => {
-  it('returns the configured fixed width when it is larger than the minimum', () => {
-    expect(getColumnMinWidth(180, 120)).toBe(180);
-  });
-
-  it('clamps fixed widths to the minimum column width', () => {
-    expect(getColumnMinWidth(80, 120)).toBe(120);
-  });
-
-  it('returns the minimum width for flexible and unspecified columns', () => {
-    expect(getColumnMinWidth('2fr', 120)).toBe(120);
-    expect(getColumnMinWidth({ flex: 3 }, 120)).toBe(120);
-    expect(getColumnMinWidth(undefined, 120)).toBe(120);
-  });
-});
-
-describe('getMinTableWidth', () => {
-  it('adds fixed widths and minimum widths for flexible columns', () => {
-    expect(getMinTableWidth(4, [180, '2fr', { flex: 3 }], 120)).toBe(540);
-  });
-
-  it('uses the minimum width for unspecified trailing columns', () => {
-    expect(getMinTableWidth(3, [200], 120)).toBe(440);
-  });
-});
-
-describe('getColumnStyle', () => {
-  it('returns a fixed-width style for numeric column widths', () => {
-    expect(getColumnStyle(180, 120)).toEqual({
-      width: 180,
-      minWidth: 180,
-      flexGrow: 0,
-      flexShrink: 0,
-    });
-  });
-
-  it('maps fr values to flexGrow', () => {
-    expect(getColumnStyle('2fr', 120)).toEqual({
-      minWidth: 120,
-      flexBasis: 0,
-      flexGrow: 2,
-      flexShrink: 0,
-    });
-  });
-
-  it('supports fractional fr values', () => {
-    expect(getColumnStyle('0.5fr', 120)).toEqual({
-      minWidth: 120,
-      flexBasis: 0,
-      flexGrow: 0.5,
-      flexShrink: 0,
-    });
-  });
-
-  it('uses flex weights from object column widths', () => {
-    expect(getColumnStyle({ flex: 3 }, 120)).toEqual({
-      minWidth: 120,
-      flexBasis: 0,
-      flexGrow: 3,
-      flexShrink: 0,
-    });
-  });
-
-  it('falls back to a single flexible column for invalid flexible values', () => {
-    expect(getColumnStyle('invalid' as `${number}fr`, 120)).toEqual({
-      minWidth: 120,
-      flexBasis: 0,
-      flexGrow: 1,
-      flexShrink: 0,
-    });
-
-    expect(getColumnStyle({ flex: 0 }, 120)).toEqual({
-      minWidth: 120,
-      flexBasis: 0,
-      flexGrow: 1,
-      flexShrink: 0,
-    });
-  });
-});

package/src/components/Table/Table.utils.ts

@@ -1,72 +0,0 @@
-import type { ViewStyle } from 'react-native';
-import type { TableColumnWidth } from './Table.props';
-
-const FR_UNIT_PATTERN = /^(\d*\.?\d+)fr$/;
-
-const parseFractionUnit = (columnWidth?: TableColumnWidth): number | null => {
-  if (typeof columnWidth !== 'string') {
-    return null;
-  }
-
-  const match = columnWidth.match(FR_UNIT_PATTERN);
-  if (!match) {
-    return null;
-  }
-
-  const parsedValue = Number(match[1]);
-  return Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : null;
-};
-
-const getFlexGrow = (columnWidth?: TableColumnWidth): number => {
-  if (!columnWidth || typeof columnWidth === 'number') {
-    return 1;
-  }
-
-  if (typeof columnWidth === 'string') {
-    return parseFractionUnit(columnWidth) ?? 1;
-  }
-
-  return Number.isFinite(columnWidth.flex) && columnWidth.flex > 0 ? columnWidth.flex : 1;
-};
-
-export const getColumnMinWidth = (
-  columnWidth: TableColumnWidth | undefined,
-  minColumnWidth: number
-): number => {
-  if (typeof columnWidth === 'number') {
-    return Math.max(columnWidth, minColumnWidth);
-  }
-
-  return minColumnWidth;
-};
-
-export const getMinTableWidth = (
-  columnCount: number,
-  columnWidths: TableColumnWidth[],
-  minColumnWidth: number
-): number => {
-  return Array.from({ length: columnCount }).reduce<number>((totalWidth, _, index) => {
-    return totalWidth + getColumnMinWidth(columnWidths[index], minColumnWidth);
-  }, 0);
-};
-
-export const getColumnStyle = (
-  columnWidth: TableColumnWidth | undefined,
-  minColumnWidth: number
-): ViewStyle => {
-  if (typeof columnWidth === 'number') {
-    return {
-      width: columnWidth,
-      minWidth: columnWidth,
-      flexGrow: 0,
-      flexShrink: 0,
-    };
-  }
-
-  return {
-    minWidth: minColumnWidth,
-    flexBasis: 0,
-    flexGrow: getFlexGrow(columnWidth),
-    flexShrink: 0,
-  };
-};

package/src/components/Table/TableBody.tsx

@@ -1,25 +0,0 @@
-import { Children, cloneElement, isValidElement } from 'react';
-import { View } from 'react-native';
-import { TableBodyProps } from './Table.props';
-
-const TableBody = ({ children, ...props }: TableBodyProps) => {
-  const items = Children.toArray(children);
-
-  return (
-    <View {...props}>
-      {items.map((child, index) => {
-        if (!isValidElement(child)) {
-          return child;
-        }
-
-        return cloneElement(child as React.ReactElement<{ isLastRow?: boolean }>, {
-          isLastRow: index === items.length - 1,
-        });
-      })}
-    </View>
-  );
-};
-
-TableBody.displayName = 'TableBody';
-
-export default TableBody;

package/src/components/Table/TableCell.tsx

@@ -1,67 +0,0 @@
-import { ReactNode } from 'react';
-import { View, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useTableContext } from './Table.context';
-import { TableCellProps } from './Table.props';
-import { getColumnStyle } from './Table.utils';
-
-const renderContent = (children?: ReactNode, weight: 'regular' | 'semibold' = 'regular') => {
-  if (typeof children === 'string' || typeof children === 'number') {
-    return (
-      <BodyText size="md" weight={weight}>
-        {children}
-      </BodyText>
-    );
-  }
-
-  return children;
-};
-
-const TableCell = ({
-  children,
-  style,
-  ...props
-}: TableCellProps & { columnIndex?: number; isLast?: boolean; isLastRow?: boolean }) => {
-  const { columnWidths, container, hasPagination } = useTableContext();
-  const { columnIndex = 0, isLast, isLastRow, ...rest } = props;
-  const removeBottomBorder = Boolean(isLastRow && container !== 'none' && !hasPagination);
-  const columnStyle = getColumnStyle(columnWidths[columnIndex], 120);
-
-  return (
-    <View
-      {...rest}
-      style={[
-        styles.cell,
-        columnStyle,
-        isLast && styles.lastCell,
-        removeBottomBorder && styles.lastRowCell,
-        style as ViewStyle,
-      ]}
-    >
-      {renderContent(children)}
-    </View>
-  );
-};
-
-TableCell.displayName = 'TableCell';
-
-const styles = StyleSheet.create(theme => ({
-  cell: {
-    minHeight: theme.components.table.cell.minHeight,
-    justifyContent: 'center',
-    padding: theme.components.table.cell.padding,
-    borderRightWidth: theme.components.table.cell.borderWidth,
-    borderBottomWidth: theme.components.table.cell.borderWidth,
-    borderColor: theme.color.border.subtle,
-    backgroundColor: theme.color.surface.neutral.strong,
-  },
-  lastCell: {
-    borderRightWidth: 0,
-  },
-  lastRowCell: {
-    borderBottomWidth: 0,
-  },
-}));
-
-export default TableCell;

package/src/components/Table/TableHeader.tsx

@@ -1,41 +0,0 @@
-import { Children, cloneElement, isValidElement } from 'react';
-import { View, ViewStyle } from 'react-native';
-import { TableHeaderProps } from './Table.props';
-
-const TableHeader = ({ children, color = 'purple', style, ...props }: TableHeaderProps) => {
-  const items = Children.toArray(children);
-
-  return (
-    <View {...props} style={[styles.header, style as ViewStyle]}>
-      {items.map((child, index) => {
-        if (!isValidElement(child)) {
-          return child;
-        }
-
-        return cloneElement(
-          child as React.ReactElement<{
-            color?: 'purple' | 'white';
-            columnIndex?: number;
-            isLast?: boolean;
-          }>,
-          {
-            color,
-            columnIndex: index,
-            isLast: index === items.length - 1,
-          }
-        );
-      })}
-    </View>
-  );
-};
-
-TableHeader.displayName = 'TableHeader';
-
-const styles = {
-  header: {
-    flexDirection: 'row' as const,
-    width: '100%' as const,
-  },
-};
-
-export default TableHeader;

package/src/components/Table/TableHeaderCell.tsx

@@ -1,145 +0,0 @@
-import { cloneElement, isValidElement, ReactNode } from 'react';
-import { View, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useTableContext } from './Table.context';
-import type { TableHeaderCellProps } from './Table.props';
-import { getColumnStyle } from './Table.utils';
-
-const renderContent = (
-  children?: ReactNode,
-  weight: 'regular' | 'semibold' = 'semibold',
-  color: 'purple' | 'white' = 'white'
-) => {
-  styles.useVariants({ color });
-  if (typeof children === 'string' || typeof children === 'number') {
-    return (
-      <BodyText size="md" weight={weight} style={styles.text}>
-        {children}
-      </BodyText>
-    );
-  }
-
-  return children;
-};
-
-const TableHeaderCell = ({
-  children,
-  color = 'white',
-  row = false,
-  style,
-  trailingContent,
-  ...props
-}: TableHeaderCellProps & { columnIndex?: number; isLast?: boolean; isLastRow?: boolean }) => {
-  const { columnWidths, container, hasPagination } = useTableContext();
-  const { columnIndex = 0, isLast, isLastRow, ...rest } = props;
-  const removeBottomBorder = Boolean(row && isLastRow && container !== 'none' && !hasPagination);
-  const columnStyle = getColumnStyle(columnWidths[columnIndex], 120);
-
-  styles.useVariants({ color, row });
-
-  const trailingElement =
-    trailingContent && isValidElement(trailingContent)
-      ? (trailingContent as React.ReactElement<{ inverted?: boolean }>)
-      : null;
-
-  const resolvedTrailingContent =
-    trailingElement && !row && 'inverted' in (trailingElement.props ?? {})
-      ? cloneElement(trailingElement, {
-          inverted: color === 'purple',
-        })
-      : trailingContent;
-
-  return (
-    <View
-      {...rest}
-      style={[
-        styles.cell,
-        columnStyle,
-        isLast && styles.lastCell,
-        removeBottomBorder && styles.lastRowCell,
-        style as ViewStyle,
-      ]}
-    >
-      <View style={styles.content}>
-        {renderContent(children, 'semibold', color)}
-        {resolvedTrailingContent ? (
-          <View style={styles.trailing}>{resolvedTrailingContent}</View>
-        ) : null}
-      </View>
-    </View>
-  );
-};
-
-TableHeaderCell.displayName = 'TableHeaderCell';
-
-const styles = StyleSheet.create(theme => ({
-  cell: {
-    minHeight: theme.components.table.headerCell.height,
-    justifyContent: 'center',
-    paddingHorizontal: theme.components.table.headerCell.paddingHorizontal,
-    paddingVertical: theme.components.table.headerCell.paddingVertical,
-    borderRightWidth: theme.components.table.headerCell.borderWidth,
-    borderBottomWidth: theme.components.table.headerCell.borderWidth,
-    borderColor: theme.color.border.subtle,
-    backgroundColor: theme.color.surface.neutral.strong,
-    variants: {
-      color: {
-        purple: {
-          borderColor: theme.color.interactive.brand.foreground.strong,
-          backgroundColor: theme.color.surface.brand.default,
-        },
-        white: {
-          borderColor: theme.color.border.subtle,
-          backgroundColor: theme.color.surface.neutral.strong,
-        },
-      },
-      row: {
-        true: {
-          minHeight: theme.components.table.cell.minHeight,
-          paddingHorizontal: theme.components.table.cell.padding,
-          paddingVertical: theme.components.table.cell.padding,
-          borderRightWidth: theme.components.table.cell.borderWidth,
-          borderBottomWidth: theme.components.table.cell.borderWidth,
-          borderColor: theme.color.border.subtle,
-          backgroundColor: theme.color.surface.neutral.strong,
-        },
-      },
-    },
-  },
-  lastCell: {
-    borderRightWidth: 0,
-  },
-  lastRowCell: {
-    borderBottomWidth: 0,
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: theme.components.table.headerCell.gap,
-  },
-  trailing: {
-    flexShrink: 0,
-  },
-  text: {
-    flexShrink: 1,
-    variants: {
-      row: {
-        true: {
-          color: theme.color.text.primary,
-        },
-      },
-      color: {
-        purple: {
-          color: theme.components.table.headerCell.foregoundColorInverted,
-        },
-        white: {
-          color: theme.components.table.headerCell.foregoundColor,
-        },
-      },
-    },
-  },
-}));
-
-export default TableHeaderCell;

package/src/components/Table/TablePagination.tsx

@@ -1,10 +0,0 @@
-import { Pagination } from '../Pagination';
-import type { TablePaginationProps } from './Table.props';
-
-const TablePagination = (props: TablePaginationProps) => {
-  return <Pagination {...props} />;
-};
-
-TablePagination.displayName = 'TablePagination';
-
-export default TablePagination;

package/src/components/Table/TableRow.tsx

@@ -1,42 +0,0 @@
-import { Children, cloneElement, isValidElement } from 'react';
-import { View } from 'react-native';
-import { TableRowProps } from './Table.props';
-
-const TableRow = ({ children, ...props }: TableRowProps & { isLastRow?: boolean }) => {
-  const items = Children.toArray(children);
-  const { isLastRow = false, ...rest } = props;
-
-  return (
-    <View {...rest} style={[styles.row, rest.style]}>
-      {items.map((child, index) => {
-        if (!isValidElement(child)) {
-          return child;
-        }
-
-        return cloneElement(
-          child as React.ReactElement<{
-            columnIndex?: number;
-            isLast?: boolean;
-            isLastRow?: boolean;
-          }>,
-          {
-            isLast: index === items.length - 1,
-            columnIndex: index,
-            isLastRow,
-          }
-        );
-      })}
-    </View>
-  );
-};
-
-TableRow.displayName = 'TableRow';
-
-const styles = {
-  row: {
-    flexDirection: 'row' as const,
-    width: '100%' as const,
-  },
-};
-
-export default TableRow;

package/src/components/Table/index.ts

@@ -1,16 +0,0 @@
-export { default as Table } from './Table';
-export type {
-  TableBodyProps,
-  TableCellProps,
-  TableHeaderCellProps,
-  TableHeaderProps,
-  TablePaginationProps,
-  TableProps,
-  TableRowProps,
-} from './Table.props';
-export { default as TableBody } from './TableBody';
-export { default as TableCell } from './TableCell';
-export { default as TableHeader } from './TableHeader';
-export { default as TableHeaderCell } from './TableHeaderCell';
-export { default as TablePagination } from './TablePagination';
-export { default as TableRow } from './TableRow';

package/src/components/Tabs/Tab.figma.tsx

@@ -1,21 +0,0 @@
-import figma from '@figma/code-connect';
-import { Tab } from '..';
-
-figma.connect(
-  Tab,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6464-2288&m=dev',
-  {
-    props: {
-      label: figma.string('Label'),
-      icon: figma.boolean('Icon?', {
-        true: figma.instance('Icon-20'),
-      }),
-      tabs: figma.children('Tab item'),
-    },
-    example: props => (
-      <Tab value={props.label} icon={props.icon}>
-        {props.label}
-      </Tab>
-    ),
-  }
-);

package/src/components/Tabs/Tab.props.ts

@@ -1,16 +0,0 @@
-import type { ComponentType, ReactNode } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
-
-export interface TabProps extends PressableProps {
-  /** Unique value for the tab */
-  value: string;
-  /** Tab label */
-  children: ReactNode;
-  /** Optional leading icon */
-  icon?: ComponentType<any>;
-  /** Whether the tab is disabled */
-  disabled?: boolean;
-  style?: ViewProps['style'];
-}
-
-export default TabProps;

package/src/components/Tabs/Tab.tsx

@@ -1,114 +0,0 @@
-import { createPressable } from '@gluestack-ui/pressable';
-import { useCallback, useRef } from 'react';
-import { Platform, Pressable, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { Icon } from '../Icon';
-import type TabProps from './Tab.props';
-import { useTabsContext } from './Tabs.context';
-
-const Tab = ({
-  value,
-  children,
-  icon,
-  disabled,
-  style,
-  states,
-  ...props
-}: TabProps & { states?: { active?: boolean; disabled?: boolean } }) => {
-  const {
-    value: active,
-    select,
-    size,
-    disabled: allDisabled,
-    registerTabLayout,
-  } = useTabsContext();
-  const { active: pressed } = states || { active: false };
-  const isActive = active === value;
-  styles.useVariants({ size, pressed });
-  const ref = useRef<View | null>(null);
-  const handlePress = () => {
-    if (disabled || allDisabled) return;
-    select(value);
-  };
-  const handleLayout = useCallback(
-    (e: any) => {
-      const { x, y, width, height } = e.nativeEvent.layout;
-      registerTabLayout(value, { x, y, width, height });
-    },
-    [value, registerTabLayout]
-  );
-  return (
-    <Pressable
-      ref={ref}
-      accessibilityRole="tab"
-      accessibilityState={{ selected: isActive, disabled: !!(disabled || allDisabled) }}
-      onPress={handlePress}
-      onLayout={handleLayout}
-      style={[styles.tab, style]}
-      {...(Platform.OS === 'web'
-        ? { id: `tab-${value}`, 'aria-controls': `tabpanel-${value}` }
-        : null)}
-      {...props}
-    >
-      <View style={styles.content}>
-        {icon ? <Icon as={icon} /> : null}
-        <BodyText size={size} weight="semibold">
-          {children}
-        </BodyText>
-      </View>
-    </Pressable>
-  );
-};
-
-Tab.displayName = 'Tab';
-
-const styles = StyleSheet.create(theme => ({
-  tab: {
-    position: 'relative',
-    backgroundColor: 'transparent',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: theme.components.tabs.item.paddingHorizontal,
-    paddingVertical: theme.components.tabs.item.paddingVertical,
-    _web: {
-      _hover: {
-        backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
-      },
-      // '_focus-visible': {
-      //   ...theme.helpers.focusVisible,
-      //   outlineOffset: -2,
-      //   borderRadius: theme.borderRadius.sm,
-      // },
-      _active: {
-        backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
-      },
-    },
-    variants: {
-      size: {
-        md: { minHeight: theme.components.tabs.md.height },
-        lg: { minHeight: theme.components.tabs.lg.height },
-      },
-      pressed: {
-        true: {
-          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
-        },
-        false: {},
-      },
-    },
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.components.tabs.item.gap,
-  },
-  badge: {
-    marginLeft: theme.space[25],
-  },
-}));
-
-const PressableTab = createPressable({ Root: Tab });
-
-PressableTab.displayName = 'Tab';
-
-export default PressableTab;

package/src/components/Tabs/TabPanel.props.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ViewProps } from 'react-native';
-
-export interface TabPanelProps extends ViewProps {
-  value: string;
-  children: ReactNode;
-  keepMounted?: boolean;
-}
-
-export default TabPanelProps;