jp-composter 0.1.0

package/src/SliceUI/table/TableRow.tsx

@@ -0,0 +1,218 @@
+import React, {useMemo, useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  Platform,
+  type ViewStyle,
+} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {setTestId} from '../automation/helper';
+import {
+  getTableBackgroundColor,
+  getTableBorderColor,
+  getRowKey,
+} from './helper';
+import type {TableRowProps} from './Type';
+import type {ExtendedTheme} from '../colors/Type';
+import TableCell from './TableCell';
+import Checkbox from '../checkbox/Checkbox';
+import Typography from '../typography/Typography';
+
+const isWeb = Platform.OS === 'web';
+
+const TableRow: React.FC<TableRowProps> = ({
+  record,
+  index,
+  columns,
+  selection,
+  selected = false,
+  onSelect,
+  onRow,
+  style,
+  hover = true,
+  striped = false,
+}) => {
+  const {theme} = useSliceTheme();
+  const {isDebugBuildType, automationBaseid} = theme;
+  const [isHovered, setIsHovered] = useState(false);
+
+  const rowStyle = useMemo((): ViewStyle => {
+    let backgroundColor = theme.colors?.colorBackgroundPrimary || '#ffffff';
+
+    if (selected) {
+      backgroundColor = theme.colors?.colorBackgroundAccentAlpha || '#e3f2fd';
+    } else if (isHovered && hover) {
+      backgroundColor = theme.colors?.colorBackgroundLight || '#f9f9f9';
+    } else if (striped && index % 2 === 1) {
+      backgroundColor = theme.colors?.colorBackgroundLight || '#f9f9f9';
+    }
+
+    const borderColor = theme.colors?.colorBorderSubtle || '#e0e0e0';
+
+    return {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor,
+      borderBottomWidth: 1,
+      borderBottomColor: borderColor,
+      minHeight: 60,
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+    };
+  }, [theme, selected, isHovered, hover, striped, index]);
+
+  const handleRowPress = () => {
+    const rowHandlers = onRow?.(record, index);
+    rowHandlers?.onClick?.();
+  };
+
+  const handleRowDoublePress = () => {
+    const rowHandlers = onRow?.(record, index);
+    rowHandlers?.onDoubleClick?.();
+  };
+
+  const handleSelect = () => {
+    if (onSelect) {
+      onSelect(!selected);
+    }
+  };
+
+  const renderSelectionColumn = () => {
+    if (!selection) return null;
+
+    const checkboxProps = selection.getCheckboxProps?.(record) || {};
+
+    return (
+      <View style={[styles.selectionCell, {width: 48, minWidth: 48}]}>
+        <Checkbox
+          checked={selected}
+          onChange={handleSelect}
+          size="medium"
+          disabled={checkboxProps.disabled}
+          style={styles.checkbox}
+        />
+      </View>
+    );
+  };
+
+  const renderDataCell = (column: any, cellIndex: number) => {
+    const value = column.dataIndex
+      ? record[column.dataIndex]
+      : record[column.key];
+    const cellStyle = column.onCell?.(record, index);
+
+    let cellContent = value;
+    if (column.render) {
+      cellContent = column.render(value, record, index);
+    }
+
+    const alignStyle = {
+      justifyContent:
+        column.align === 'center'
+          ? 'center'
+          : column.align === 'right'
+          ? 'flex-end'
+          : 'flex-start',
+    };
+
+    return (
+      <View
+        key={column.key}
+        style={[
+          styles.dataCell,
+          {
+            width: column.width || 'auto',
+            minWidth: column.minWidth || 100,
+            flex: column.width ? 0 : 1,
+          },
+          alignStyle,
+          cellStyle,
+        ]}>
+        {typeof cellContent === 'string' || typeof cellContent === 'number' ? (
+          <Typography
+            variant="body2"
+            style={{textAlign: column.align || 'left', flex: 1}}>
+            {String(cellContent)}
+          </Typography>
+        ) : (
+          <View style={{flex: 1}}>{cellContent}</View>
+        )}
+      </View>
+    );
+  };
+
+  const combinedRowStyle = useMemo(
+    () => StyleSheet.flatten([rowStyle, style]),
+    [rowStyle, style],
+  );
+
+  const rowHandlers = onRow?.(record, index);
+  const hasRowHandlers =
+    rowHandlers && (rowHandlers.onClick || rowHandlers.onDoubleClick);
+
+  if (hasRowHandlers) {
+    return (
+      <Pressable
+        onPress={handleRowPress}
+        onLongPress={handleRowDoublePress}
+        style={({pressed}) => [combinedRowStyle, pressed && styles.pressedRow]}
+        {...(isWeb && {
+          onMouseEnter: () => {
+            setIsHovered(true);
+            rowHandlers?.onMouseEnter?.();
+          },
+          onMouseLeave: () => {
+            setIsHovered(false);
+            rowHandlers?.onMouseLeave?.();
+          },
+        })}
+        {...(isDebugBuildType && automationBaseid
+          ? setTestId(automationBaseid, 'table', `row-${index}`)
+          : {})}>
+        {renderSelectionColumn()}
+        {columns.map(renderDataCell)}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      style={combinedRowStyle}
+      {...(isWeb && {
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+      })}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, 'table', `row-${index}`)
+        : {})}>
+      {renderSelectionColumn()}
+      {columns.map(renderDataCell)}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  selectionCell: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  checkbox: {
+    margin: 0,
+  },
+  dataCell: {
+    paddingHorizontal: 8,
+    paddingVertical: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden',
+    minHeight: 60,
+    justifyContent: 'flex-start',
+  },
+  pressedRow: {
+    opacity: 0.7,
+  },
+});
+
+export default React.memo(TableRow);

package/src/SliceUI/table/Token.ts

@@ -0,0 +1,252 @@
+import {spacing} from '../values/Spacing';
+import {borderRadius} from '../values/BorderRadius';
+import type {TableThemeSize, TableSize, TableVariant} from './Type';
+import {TYPOGRAPHY_STYLES} from '../typography/Token';
+import type {ViewStyle, TextStyle} from 'react-native';
+
+// Base table styles
+const baseTableStyles = {
+  container: {
+    borderRadius: borderRadius.borderRadius40,
+    overflow: 'hidden' as const,
+  },
+  header: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    borderBottomWidth: 1,
+  },
+  headerCell: {
+    flex: 1,
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
+  },
+  headerText: {
+    fontWeight: '600' as const,
+  },
+  body: {
+    flex: 1,
+  },
+  row: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    borderBottomWidth: 1,
+  },
+  cell: {
+    flex: 1,
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+  },
+  cellText: {
+    flex: 1,
+  },
+  footer: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
+    borderTopWidth: 1,
+  },
+  sortIcon: {
+    marginLeft: spacing.space50,
+  },
+  checkbox: {
+    marginRight: spacing.space100,
+  },
+  loading: {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  },
+  empty: {
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    minHeight: 200,
+  },
+  emptyText: {
+    textAlign: 'center' as const,
+    opacity: 0.6,
+  },
+} as const;
+
+// Size-specific padding and dimensions
+const sizePaddings = {
+  small: {
+    paddingVertical: spacing.space100,
+    paddingHorizontal: spacing.space150,
+    minHeight: 32,
+  },
+  medium: {
+    paddingVertical: spacing.space150,
+    paddingHorizontal: spacing.space200,
+    minHeight: 40,
+  },
+  large: {
+    paddingVertical: spacing.space200,
+    paddingHorizontal: spacing.space250,
+    minHeight: 48,
+  },
+} as const;
+
+// Typography variants for different sizes
+const sizeTypography = {
+  small: {
+    headerText: TYPOGRAPHY_STYLES.captionBold,
+    cellText: TYPOGRAPHY_STYLES.caption,
+    emptyText: TYPOGRAPHY_STYLES.body2,
+  },
+  medium: {
+    headerText: TYPOGRAPHY_STYLES.body2Bold,
+    cellText: TYPOGRAPHY_STYLES.body2,
+    emptyText: TYPOGRAPHY_STYLES.body1,
+  },
+  large: {
+    headerText: TYPOGRAPHY_STYLES.body1Bold,
+    cellText: TYPOGRAPHY_STYLES.body1,
+    emptyText: TYPOGRAPHY_STYLES.heading6,
+  },
+} as const;
+
+// Helper function to create styles for a given size and variant
+const createTableTheme = (size: TableSize, variant: TableVariant) => {
+  const sizePadding = sizePaddings[size];
+  const typography = sizeTypography[size];
+
+  const baseTheme = {
+    container: {
+      ...baseTableStyles.container,
+      ...(variant === 'bordered' && {
+        borderWidth: 1,
+      }),
+    },
+    header: {
+      ...baseTableStyles.header,
+      ...sizePadding,
+    },
+    headerCell: {
+      ...baseTableStyles.headerCell,
+    },
+    headerText: {
+      ...baseTableStyles.headerText,
+      ...typography.headerText,
+    } as TextStyle,
+    body: {
+      ...baseTableStyles.body,
+    },
+    row: {
+      ...baseTableStyles.row,
+      ...sizePadding,
+      ...(variant === 'striped' && {
+        '&:nth-child(even)': {
+          backgroundColor: 'rgba(0, 0, 0, 0.02)',
+        },
+      }),
+    },
+    cell: {
+      ...baseTableStyles.cell,
+    },
+    cellText: {
+      ...baseTableStyles.cellText,
+      ...typography.cellText,
+    } as TextStyle,
+    footer: {
+      ...baseTableStyles.footer,
+      ...sizePadding,
+    },
+    sortIcon: {
+      ...baseTableStyles.sortIcon,
+    },
+    checkbox: {
+      ...baseTableStyles.checkbox,
+    },
+    loading: {
+      ...baseTableStyles.loading,
+    },
+    empty: {
+      ...baseTableStyles.empty,
+    },
+    emptyText: {
+      ...baseTableStyles.emptyText,
+      ...typography.emptyText,
+    } as TextStyle,
+  };
+
+  return baseTheme;
+};
+
+// Generate all size and variant combinations
+const createAllTableStyles = (): TableThemeSize => {
+  const sizes: TableSize[] = ['small', 'medium', 'large'];
+  const variants: TableVariant[] = ['default', 'bordered', 'striped'];
+  
+  const result = {} as TableThemeSize;
+  
+  sizes.forEach(size => {
+    result[size] = {} as any;
+    variants.forEach(variant => {
+      result[size][variant] = createTableTheme(size, variant);
+    });
+  });
+  
+  return result;
+};
+
+export const TABLE_STYLES: TableThemeSize = createAllTableStyles();
+
+// Export individual style tokens for customization
+export const TABLE_SPACING = {
+  cellPadding: {
+    small: sizePaddings.small,
+    medium: sizePaddings.medium,
+    large: sizePaddings.large,
+  },
+  borderRadius: borderRadius.borderRadius40,
+  borderWidth: 1,
+} as const;
+
+export const TABLE_TYPOGRAPHY = sizeTypography;
+
+// Color tokens will be handled by the theme system
+export const TABLE_COLOR_TOKENS = {
+  default: {
+    background: 'colorBackgroundPrimary',
+    headerBackground: 'colorBackgroundSecondary',
+    border: 'colorBorderSubtle',
+    text: 'colorForegroundPrimary',
+    headerText: 'colorForegroundPrimary',
+    hoverBackground: 'colorBackgroundLight',
+    selectedBackground: 'colorBackgroundAccentAlpha',
+    stripedBackground: 'colorBackgroundLight',
+  },
+  bordered: {
+    background: 'colorBackgroundPrimary',
+    headerBackground: 'colorBackgroundSecondary',
+    border: 'colorBorderMedium',
+    text: 'colorForegroundPrimary',
+    headerText: 'colorForegroundPrimary',
+    hoverBackground: 'colorBackgroundLight',
+    selectedBackground: 'colorBackgroundAccentAlpha',
+    stripedBackground: 'colorBackgroundLight',
+  },
+  striped: {
+    background: 'colorBackgroundPrimary',
+    headerBackground: 'colorBackgroundSecondary',
+    border: 'colorBorderSubtle',
+    text: 'colorForegroundPrimary',
+    headerText: 'colorForegroundPrimary',
+    hoverBackground: 'colorBackgroundLight',
+    selectedBackground: 'colorBackgroundAccentAlpha',
+    stripedBackground: 'colorBackgroundLight',
+  },
+} as const;
+
+// Animation tokens
+export const TABLE_ANIMATIONS = {
+  sortTransition: 200,
+  hoverTransition: 150,
+  expandTransition: 300,
+} as const;

package/src/SliceUI/table/Type.ts

@@ -0,0 +1,213 @@
+import type {ViewStyle, TextStyle} from 'react-native';
+import type {ReactNode} from 'react';
+
+export type TableSize = 'small' | 'medium' | 'large';
+export type TableVariant = 'default' | 'bordered' | 'striped';
+export type ColumnAlign = 'left' | 'center' | 'right';
+export type SortDirection = 'asc' | 'desc' | null;
+
+export interface TableColumn<T = any> {
+  key: string;
+  title: string;
+  dataIndex?: keyof T;
+  sortable?: boolean;
+  align?: ColumnAlign;
+  width?: number | string;
+  minWidth?: number;
+  maxWidth?: number;
+  fixed?: 'left' | 'right';
+  render?: (value: any, record: T, index: number) => ReactNode;
+  headerRender?: () => ReactNode;
+  sorter?: boolean | ((a: T, b: T) => number);
+  onHeaderCell?: () => ViewStyle;
+  onCell?: (record: T, index: number) => ViewStyle;
+}
+
+export interface TableRowData {
+  key?: string | number;
+  [key: string]: any;
+}
+
+export interface TableSelection<T = any> {
+  selectedRowKeys?: (string | number)[];
+  onChange?: (selectedRowKeys: (string | number)[], selectedRows: T[]) => void;
+  onSelect?: (record: T, selected: boolean, selectedRows: T[], nativeEvent: any) => void;
+  onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
+  getCheckboxProps?: (record: T) => {disabled?: boolean};
+  type?: 'checkbox' | 'radio';
+  fixed?: boolean;
+  columnWidth?: number | string;
+  columnTitle?: string | ReactNode;
+  hideSelectAll?: boolean;
+}
+
+export interface TablePagination {
+  current?: number;
+  pageSize?: number;
+  total?: number;
+  showSizeChanger?: boolean;
+  pageSizeOptions?: string[];
+  showQuickJumper?: boolean;
+  showTotal?: (total: number, range: [number, number]) => ReactNode;
+  onChange?: (page: number, pageSize?: number) => void;
+  onShowSizeChange?: (current: number, size: number) => void;
+  position?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+  size?: 'default' | 'small';
+}
+
+export interface TableProps<T = any> {
+  screenName?: string;
+  id?: string | number;
+  columns: TableColumn<T>[];
+  dataSource: T[];
+  size?: TableSize;
+  variant?: TableVariant;
+  loading?: boolean;
+  pagination?: false | TablePagination;
+  rowSelection?: TableSelection<T>;
+  scroll?: {
+    x?: number | string | true;
+    y?: number | string;
+  };
+  bordered?: boolean;
+  showHeader?: boolean;
+  title?: () => ReactNode;
+  footer?: () => ReactNode;
+  expandable?: {
+    expandedRowRender?: (record: T, index: number, indent: number, expanded: boolean) => ReactNode;
+    expandedRowKeys?: (string | number)[];
+    defaultExpandedRowKeys?: (string | number)[];
+    onExpand?: (expanded: boolean, record: T) => void;
+    onExpandedRowsChange?: (expandedKeys: (string | number)[]) => void;
+  };
+  rowKey?: string | ((record: T) => string | number);
+  onRow?: (record: T, index?: number) => {
+    onClick?: () => void;
+    onDoubleClick?: () => void;
+    onContextMenu?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+  };
+  onHeaderRow?: (columns: TableColumn<T>[], index?: number) => {
+    onClick?: () => void;
+    onDoubleClick?: () => void;
+    onContextMenu?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+  };
+  sortDirections?: SortDirection[];
+  defaultSortOrder?: SortDirection;
+  showSorterTooltip?: boolean;
+  tableStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  bodyStyle?: ViewStyle;
+  footerStyle?: ViewStyle;
+  rowStyle?: ViewStyle;
+  cellStyle?: ViewStyle;
+  emptyText?: ReactNode;
+  locale?: {
+    emptyText?: string;
+    filterTitle?: string;
+    filterConfirm?: string;
+    filterReset?: string;
+    selectAll?: string;
+    selectInvert?: string;
+    selectionAll?: string;
+    sortTitle?: string;
+    expand?: string;
+    collapse?: string;
+  };
+}
+
+export interface TableCellProps {
+  children?: ReactNode;
+  align?: ColumnAlign;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  width?: number | string;
+  minWidth?: number;
+  maxWidth?: number;
+  fixed?: 'left' | 'right';
+  ellipsis?: boolean;
+  onPress?: () => void;
+}
+
+export interface TableHeaderProps {
+  columns: TableColumn[];
+  selection?: TableSelection;
+  sortedInfo?: {
+    columnKey?: string;
+    order?: SortDirection;
+  };
+  onSort?: (columnKey: string, direction: SortDirection) => void;
+  onSelectAll?: (selected: boolean) => void;
+  allSelected?: boolean;
+  indeterminate?: boolean;
+  style?: ViewStyle;
+}
+
+export interface TableRowProps<T = any> {
+  record: T;
+  index: number;
+  columns: TableColumn<T>[];
+  selection?: TableSelection<T>;
+  selected?: boolean;
+  onSelect?: (selected: boolean) => void;
+  onRow?: (record: T, index?: number) => any;
+  style?: ViewStyle;
+  hover?: boolean;
+  striped?: boolean;
+}
+
+export interface TableFooterProps {
+  pagination?: TablePagination;
+  style?: ViewStyle;
+}
+
+// Theme-related types
+export interface TableTheme {
+  container: ViewStyle;
+  header: ViewStyle;
+  headerCell: ViewStyle;
+  headerText: TextStyle;
+  body: ViewStyle;
+  row: ViewStyle;
+  cell: ViewStyle;
+  cellText: TextStyle;
+  footer: ViewStyle;
+  sortIcon: ViewStyle;
+  checkbox: ViewStyle;
+  loading: ViewStyle;
+  empty: ViewStyle;
+  emptyText: TextStyle;
+}
+
+export type TableThemeVariant = {
+  [key in TableVariant]: TableTheme;
+};
+
+export type TableThemeSize = {
+  [key in TableSize]: TableThemeVariant;
+};
+
+export interface TableSortState {
+  columnKey?: string;
+  order?: SortDirection;
+}
+
+export interface TableFilterState {
+  [key: string]: any;
+}
+
+export interface TableState<T = any> {
+  sortedInfo: TableSortState;
+  filteredInfo: TableFilterState;
+  selectedRowKeys: (string | number)[];
+  selectedRows: T[];
+  expandedRowKeys: (string | number)[];
+  pagination: {
+    current: number;
+    pageSize: number;
+    total: number;
+  };
+}