@idealyst/components 1.1.7 → 1.1.9

package/src/Table/Table.native.tsx

@@ -1,9 +1,140 @@
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo, ReactNode } from 'react';
 import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
 import { tableStyles } from './Table.styles';
-import type { TableProps, TableColumn } from './types';
+import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
 
+// ============================================================================
+// Sub-component Props
+// ============================================================================
+
+interface TRProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  clickable?: boolean;
+  onPress?: () => void;
+  testID?: string;
+}
+
+interface THProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+}
+
+interface TDProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+}
+
+// ============================================================================
+// TR Component
+// ============================================================================
+
+function TR({
+  children,
+  size = 'md',
+  type = 'standard',
+  clickable = false,
+  onPress,
+  testID,
+}: TRProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    clickable,
+  });
+
+  const rowStyle = (tableStyles.row as any)({});
+  const RowComponent = clickable ? TouchableOpacity : View;
+
+  return (
+    <RowComponent
+      style={rowStyle}
+      onPress={clickable ? onPress : undefined}
+      testID={testID}
+    >
+      <View style={{ flexDirection: 'row' }}>
+        {children}
+      </View>
+    </RowComponent>
+  );
+}
+
+// ============================================================================
+// TH Component
+// ============================================================================
+
+function TH({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+}: THProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const headerCellStyle = (tableStyles.headerCell as any)({});
+
+  return (
+    <View
+      style={[
+        headerCellStyle,
+        { width, flex: width ? undefined : 1 },
+      ]}
+    >
+      <Text style={headerCellStyle}>
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+// ============================================================================
+// TD Component
+// ============================================================================
+
+function TD({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+}: TDProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const cellStyle = (tableStyles.cell as any)({});
+
+  return (
+    <View
+      style={[
+        cellStyle,
+        { width, flex: width ? undefined : 1 },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+// ============================================================================
+// Main Table Component
+// ============================================================================
+
 function TableInner<T = any>({
   columns,
   data,
@@ -37,7 +168,8 @@ function TableInner<T = any>({
       accessibilityHidden,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
-  // Apply variants
+
+  // Apply variants for container
   tableStyles.useVariants({
     type,
     size,
@@ -50,6 +182,13 @@ function TableInner<T = any>({
     marginHorizontal,
   });
 
+  // Call styles as functions to get theme-reactive styles
+  const containerStyle = (tableStyles.container as any)({});
+  const tableStyle = (tableStyles.table as any)({});
+  const theadStyle = (tableStyles.thead as any)({});
+  const tbodyStyle = (tableStyles.tbody as any)({});
+  const cellStyle = (tableStyles.cell as any)({});
+
   // Helper to get cell value
   const getCellValue = (column: TableColumn<T>, row: T, rowIndex: number) => {
     if (column.render) {
@@ -57,7 +196,7 @@ function TableInner<T = any>({
       return column.render(value, row, rowIndex);
     }
     const value = column.dataIndex ? (row as any)[column.dataIndex] : '';
-    return <Text style={tableStyles.cell}>{String(value)}</Text>;
+    return <Text style={cellStyle}>{String(value)}</Text>;
   };
 
   const isClickable = !!onRowPress;
@@ -67,79 +206,52 @@ function TableInner<T = any>({
       ref={ref}
       nativeID={id}
       horizontal
-      style={[(tableStyles.container as any)({}), style]}
+      style={[containerStyle, style]}
       testID={testID}
       {...nativeA11yProps}
     >
-      <View style={tableStyles.table}>
+      <View style={tableStyle}>
         {/* Header */}
-        <View style={tableStyles.thead}>
+        <View style={theadStyle}>
           <View style={{ flexDirection: 'row' }}>
-            {columns.map((column) => {
-              tableStyles.useVariants({
-                size,
-                align: column.align || 'left',
-                type,
-              });
-
-              return (
-                <View
-                  key={column.key}
-                  style={[
-                    tableStyles.headerCell,
-                    { width: column.width, flex: column.width ? undefined : 1 },
-                  ]}
-                >
-                  <Text style={tableStyles.headerCell}>
-                    {column.title}
-                  </Text>
-                </View>
-              );
-            })}
+            {columns.map((column) => (
+              <TH
+                key={column.key}
+                size={size}
+                type={type}
+                align={column.align}
+                width={column.width}
+              >
+                {column.title}
+              </TH>
+            ))}
           </View>
         </View>
 
         {/* Body */}
-        <View style={tableStyles.tbody}>
-          {data.map((row, rowIndex) => {
-            tableStyles.useVariants({
-              type,
-              clickable: isClickable,
-            });
-
-            const RowComponent = isClickable ? TouchableOpacity : View;
-
-            return (
-              <RowComponent
-                key={rowIndex}
-                style={tableStyles.row}
-                onPress={isClickable ? () => onRowPress?.(row, rowIndex) : undefined}
-                testID={`${testID}-row-${rowIndex}`}
-              >
-                <View style={{ flexDirection: 'row' }}>
-                  {columns.map((column) => {
-                    tableStyles.useVariants({
-                      size,
-                      align: column.align || 'left',
-                      type,
-                    });
-
-                    return (
-                      <View
-                        key={column.key}
-                        style={[
-                          tableStyles.cell,
-                          { width: column.width, flex: column.width ? undefined : 1 },
-                        ]}
-                      >
-                        {getCellValue(column, row, rowIndex)}
-                      </View>
-                    );
-                  })}
-                </View>
-              </RowComponent>
-            );
-          })}
+        <View style={tbodyStyle}>
+          {data.map((row, rowIndex) => (
+            <TR
+              key={rowIndex}
+              size={size}
+              type={type}
+              clickable={isClickable}
+              onPress={() => onRowPress?.(row, rowIndex)}
+              testID={testID ? `${testID}-row-${rowIndex}` : undefined}
+            >
+              {columns.map((column) => (
+                <TD
+                  key={column.key}
+                  size={size}
+                  type={type}
+                  align={column.align}
+                  width={column.width}
+                >
+                  {getCellValue(column, row, rowIndex)}
+                </TD>
+              ))}
+            </TR>
+          ))}
         </View>
       </View>
     </ScrollView>

package/src/Table/Table.styles.old.tsx

@@ -0,0 +1,311 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type TableType = 'default' | 'bordered' | 'striped';
+
+type TableRowVariants = {
+    type: TableType;
+    clickable: boolean;
+}
+/**
+ * Create type variants for container
+ */
+function createContainerTypeVariants(theme: Theme) {
+    return {
+        standard: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            overflow: 'hidden',
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        bordered: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            overflow: 'hidden',
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        striped: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            overflow: 'hidden',
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+    } as const;
+}
+
+/**
+ * Create type variants for row
+ */
+function createRowTypeVariants(theme: Theme) {
+    return {
+        standard: {},
+        bordered: {
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: theme.colors.border.primary,
+            _web: {
+                borderBottom: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        striped: {
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: theme.colors.border.primary,
+            _web: {
+                borderBottom: `1px solid ${theme.colors.border.primary}`,
+                ':nth-child(even)': {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
+            },
+        },
+    } as const;
+}
+
+/**
+ * Create compound variants for row
+ */
+function createRowCompoundVariants(theme: Theme): CompoundVariants<keyof TableRowVariants> {
+    return [
+        {
+            type: 'striped',
+            clickable: true,
+            styles: {
+                _web: {
+                    _hover: {
+                        backgroundColor: theme.colors.surface.tertiary,
+                    },
+                },
+            },
+        },
+    ] as const;
+}
+
+/**
+ * Create size variants for header cell
+ */
+function createHeaderCellSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'table', (size) => ({
+        padding: size.padding,
+        fontSize: size.fontSize,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+/**
+ * Create type variants for header cell
+ */
+function createHeaderCellTypeVariants(theme: Theme) {
+    return {
+        standard: {},
+        bordered: {
+            borderRightWidth: 1,
+            borderRightStyle: 'solid',
+            borderRightColor: theme.colors.border.primary,
+            _web: {
+                borderRight: `1px solid ${theme.colors.border.primary}`,
+                ':last-child': {
+                    borderRight: 'none',
+                },
+            },
+        },
+        striped: {},
+    } as const;
+}
+
+/**
+ * Create size variants for cell
+ */
+function createCellSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'table', (size) => ({
+        padding: size.padding,
+        fontSize: size.fontSize,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+/**
+ * Create type variants for cell
+ */
+function createCellTypeVariants(theme: Theme) {
+    return {
+        standard: {},
+        bordered: {
+            borderRightWidth: 1,
+            borderRightStyle: 'solid',
+            borderRightColor: theme.colors.border.primary,
+            _web: {
+                borderRight: `1px solid ${theme.colors.border.primary}`,
+                ':last-child': {
+                    borderRight: 'none',
+                },
+            },
+        },
+        striped: {},
+    } as const;
+}
+
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        width: '100%',
+        _web: {
+            overflow: 'auto',
+        },
+        variants: {
+            type: createContainerTypeVariants(theme),
+            // Spacing variants from ContainerStyleProps
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+const createTableStyles = (theme: Theme) => {
+    return {
+        width: '100%',
+        _web: {
+            borderCollapse: 'collapse',
+        },
+    } as const;
+}
+
+const createTheadStyles = (theme: Theme) => {
+    return {
+        backgroundColor: theme.colors.surface.secondary,
+        variants: {
+            sticky: {
+                true: {
+                    _web: {
+                            position: 'sticky',
+                            top: 0,
+                            zIndex: 10,
+                    }
+                },
+                false: {},
+            },
+        },
+    } as const;
+}
+
+const createRowStyles = (theme: Theme) => {
+    return {
+        variants: {
+            type: createRowTypeVariants(theme),
+            clickable: {
+                true: {
+                    _web: {
+                        cursor: 'pointer',
+                        _hover: {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                    },
+                },
+                false: {},
+            },
+        },
+        compoundVariants: createRowCompoundVariants(theme),
+        _web: {
+            transition: 'background-color 0.2s ease',
+        },
+    } as const;
+}
+
+const createHeaderCellStyles = (theme: Theme) => {
+    return {
+        flexDirection: 'row',
+        alignItems: 'center',
+        textAlign: 'left',
+        fontWeight: '600',
+        color: theme.colors.text.primary,
+        borderBottomWidth: 2,
+        borderBottomStyle: 'solid',
+        borderBottomColor: theme.colors.border.primary,
+        _web: {
+            borderBottom: `2px solid ${theme.colors.border.primary}`,
+        },
+        variants: {
+            size: createHeaderCellSizeVariants(theme),
+            align: {
+                left: {
+                    textAlign: 'left',
+                    justifyContent: 'flex-start',
+                },
+                center: {
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                },
+                right: {
+                    textAlign: 'right',
+                    justifyContent: 'flex-end',
+                },
+            },
+            type: createHeaderCellTypeVariants(theme),
+        },
+    } as const;
+}
+
+const createCellStyles = (theme: Theme) => {
+    return {
+        flexDirection: 'row',
+        alignItems: 'center',
+        textAlign: 'left',
+        color: theme.colors.text.primary,
+        variants: {
+            size: createCellSizeVariants(theme),
+            align: {
+                left: {
+                    textAlign: 'left',
+                    justifyContent: 'flex-start',
+                },
+                center: {
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                },
+                right: {
+                    textAlign: 'right',
+                    justifyContent: 'flex-end',
+                },
+            },
+            type: createCellTypeVariants(theme),
+        },
+    } as const;
+}
+
+export const tableStyles = StyleSheet.create((theme: Theme) => {
+    return applyExtensions('Table', theme, {
+        container: createContainerStyles(theme),
+        table: createTableStyles(theme),
+        thead: createTheadStyles(theme),
+        tbody: {},
+        row: createRowStyles(theme),
+        headerCell: createHeaderCellStyles(theme),
+        cell: createCellStyles(theme),
+    });
+});