@idealyst/components 1.0.82 → 1.0.84

package/src/Table/Table.native.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef } from 'react';
+import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
+import { tableStyles } from './Table.styles';
+import type { TableProps, TableColumn } from './types';
+
+function TableInner<T = any>({
+  columns,
+  data,
+  type = 'standard',
+  size = 'md',
+  stickyHeader = false,
+  onRowPress,
+  style,
+  testID,
+}: TableProps<T>, ref: React.Ref<ScrollView>) {
+  // Apply variants
+  tableStyles.useVariants({
+    type,
+    size,
+  });
+
+  // Helper to get cell value
+  const getCellValue = (column: TableColumn<T>, row: T, rowIndex: number) => {
+    if (column.render) {
+      const value = column.dataIndex ? (row as any)[column.dataIndex] : row;
+      return column.render(value, row, rowIndex);
+    }
+    const value = column.dataIndex ? (row as any)[column.dataIndex] : '';
+    return <Text style={tableStyles.cell}>{String(value)}</Text>;
+  };
+
+  const isClickable = !!onRowPress;
+
+  return (
+    <ScrollView
+      ref={ref}
+      horizontal
+      style={[tableStyles.container, style]}
+      testID={testID}
+    >
+      <View style={tableStyles.table}>
+        {/* Header */}
+        <View style={tableStyles.thead}>
+          <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>
+              );
+            })}
+          </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>
+      </View>
+    </ScrollView>
+  );
+}
+
+const Table = forwardRef(TableInner) as <T = any>(
+  props: TableProps<T> & { ref?: React.Ref<ScrollView> }
+) => React.ReactElement;
+
+(Table as any).displayName = 'Table';
+
+export default Table;

package/src/Table/Table.styles.tsx

@@ -0,0 +1,283 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+
+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;
+}
+
+const createContainerStyles = (theme: Theme) => {
+    return {
+        width: '100%',
+        _web: {
+            overflow: 'auto',
+        },
+        variants: {
+            type: createContainerTypeVariants(theme),
+        },
+    } as const;
+}
+
+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 {
+        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',
+                },
+                center: {
+                    textAlign: 'center',
+                },
+                right: {
+                    textAlign: 'right',
+                },
+            },
+            type: createHeaderCellTypeVariants(theme),
+        },
+    } as const;
+}
+
+const createCellStyles = (theme: Theme) => {
+    return {
+        textAlign: 'left',
+        color: theme.colors.text.primary,
+        variants: {
+            size: createCellSizeVariants(theme),
+            align: {
+                left: {
+                    textAlign: 'left',
+                },
+                center: {
+                    textAlign: 'center',
+                },
+                right: {
+                    textAlign: 'right',
+                },
+            },
+            type: createCellTypeVariants(theme),
+        },
+    } as const;
+}
+
+export const tableStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: createContainerStyles(theme),
+        table: createTableStyles(theme),
+        thead: createTheadStyles(theme),
+        tbody: {},
+        row: createRowStyles(theme),
+        headerCell: createHeaderCellStyles(theme),
+        cell: createCellStyles(theme),
+    } as const;
+});

package/src/Table/Table.web.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { tableStyles } from './Table.styles';
+import type { TableProps, TableColumn } from './types';
+
+function Table<T = any>({
+  columns,
+  data,
+  type = 'standard',
+  size = 'md',
+  stickyHeader = false,
+  onRowPress,
+  style,
+  testID,
+}: TableProps<T>) {
+  // Apply variants
+  tableStyles.useVariants({
+    type,
+    size,
+  });
+
+  const containerProps = getWebProps([tableStyles.container, style as any]);
+  const tableProps = getWebProps([tableStyles.table]);
+
+  // Helper to get cell value
+  const getCellValue = (column: TableColumn<T>, row: T, rowIndex: number) => {
+    if (column.render) {
+      const value = column.dataIndex ? (row as any)[column.dataIndex] : row;
+      return column.render(value, row, rowIndex);
+    }
+    return column.dataIndex ? (row as any)[column.dataIndex] : '';
+  };
+
+  const isClickable = !!onRowPress;
+
+  return (
+    <div {...containerProps} data-testid={testID}>
+      <table {...tableProps}>
+        <thead {...getWebProps([tableStyles.thead])}>
+          <tr>
+            {columns.map((column) => {
+              tableStyles.useVariants({
+                size,
+                align: column.align || 'left',
+                type,
+              });
+
+              const headerCellProps = getWebProps([tableStyles.headerCell]);
+
+              return (
+                <th
+                  key={column.key}
+                  {...headerCellProps}
+                  style={{
+                    width: column.width,
+                  }}
+                >
+                  {column.title}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody {...getWebProps([tableStyles.tbody])}>
+          {data.map((row, rowIndex) => {
+            tableStyles.useVariants({
+              size,
+              align: 'left',
+              type,
+              clickable: isClickable,
+            });
+
+            const rowProps = getWebProps([tableStyles.row]);
+
+            return (
+              <tr
+                key={rowIndex}
+                {...rowProps}
+                onClick={() => onRowPress?.(row, rowIndex)}
+                data-testid={`${testID}-row-${rowIndex}`}
+              >
+                {columns.map((column) => {
+                  tableStyles.useVariants({
+                    size,
+                    align: column.align || 'left',
+                    type,
+                  });
+
+                  const cellProps = getWebProps([tableStyles.cell]);
+
+                  return (
+                    <td
+                      key={column.key}
+                      {...cellProps}
+                      style={{
+                        width: column.width,
+                      }}
+                    >
+                      {getCellValue(column, row, rowIndex)}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

package/src/Table/index.native.tsx

@@ -0,0 +1,3 @@
+export { default } from './Table.native';
+export { default as Table } from './Table.native';
+export * from './types';

package/src/Table/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Table.web';
+export { default as Table } from './Table.web';
+export * from './types';

package/src/Table/index.web.tsx

@@ -0,0 +1,3 @@
+export { default } from './Table.web';
+export { default as Table } from './Table.web';
+export * from './types';

package/src/Table/types.ts

@@ -0,0 +1,28 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { ReactNode } from 'react';
+import { Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type TableSizeVariant = Size;
+export type TableType = 'standard' | 'bordered' | 'striped';
+export type TableAlignVariant = 'left' | 'center' | 'right';
+
+export interface TableColumn<T = any> {
+  key: string;
+  title: string;
+  dataIndex?: string;
+  render?: (value: any, row: T, index: number) => ReactNode;
+  width?: number | string;
+  align?: TableAlignVariant;
+}
+
+export interface TableProps<T = any> {
+  columns: TableColumn<T>[];
+  data: T[];
+  type?: TableType;
+  size?: TableSizeVariant;
+  stickyHeader?: boolean;
+  onRowPress?: (row: T, index: number) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/Text/Text.native.tsx

@@ -1,36 +1,37 @@
-import React from 'react';
-import { StyleSheet } from 'react-native-unistyles';
+import React, { forwardRef } from 'react';
 import { Text as RNText } from 'react-native';
 import { TextProps } from './types';
-import textStyles from './Text.styles';
+import { textStyles } from './Text.styles';
 
-const Text: React.FC<TextProps> = ({
+const Text = forwardRef<RNText, TextProps>(({
   children,
-  size = 'medium',
+  size = 'md',
   weight = 'normal',
   color,
   align = 'left',
   style,
   testID,
-}) => {
+}, ref) => {
   textStyles.useVariants({
     size,
     weight,
     align,
-    color: color
   });
 
   return (
-    <RNText 
+    <RNText
+      ref={ref}
       style={[
-        textStyles.text,
+        textStyles.text({ color }),
         style,
-      ]} 
+      ]}
       testID={testID}
     >
       {children}
     </RNText>
   );
-};
+});
+
+Text.displayName = 'Text';
 
 export default Text;