@idealyst/datagrid 1.0.40 → 1.0.44

package/src/DataGrid/SimpleDataGrid.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+interface SimpleColumn {
+  key: string;
+  header: string;
+  width?: number;
+}
+
+interface SimpleDataGridProps {
+  data: any[];
+  columns: SimpleColumn[];
+}
+
+export const SimpleDataGrid: React.FC<SimpleDataGridProps> = ({ data, columns }) => {
+  return (
+    <div style={{ 
+      border: '1px solid #ccc',
+      borderRadius: '4px',
+      overflow: 'hidden'
+    }}>
+      <table style={{
+        width: '100%',
+        borderCollapse: 'collapse',
+        tableLayout: 'fixed'
+      }}>
+        <thead>
+          <tr style={{ 
+            backgroundColor: '#f5f5f5',
+            borderBottom: '2px solid #ddd'
+          }}>
+            {columns.map(column => (
+              <th 
+                key={column.key}
+                style={{
+                  padding: '12px 8px',
+                  textAlign: 'left',
+                  fontWeight: 'bold',
+                  borderRight: '1px solid #ddd',
+                  ...(column.width ? { width: column.width } : {})
+                }}
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, index) => (
+            <tr 
+              key={index}
+              style={{ 
+                borderBottom: '1px solid #eee',
+                backgroundColor: index % 2 === 0 ? '#fafafa' : '#fff'
+              }}
+            >
+              {columns.map(column => (
+                <td 
+                  key={column.key}
+                  style={{
+                    padding: '12px 8px',
+                    borderRight: '1px solid #eee',
+                    verticalAlign: 'middle'
+                  }}
+                >
+                  {row[column.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/DataGrid/index.native.ts

@@ -0,0 +1,2 @@
+export { DataGrid } from './DataGrid.native';
+export type { DataGridProps, Column, CellProps, RowProps, HeaderCellProps } from './types';

package/src/DataGrid/index.web.ts

@@ -0,0 +1,2 @@
+export { DataGrid } from './DataGrid';
+export type { DataGridProps, Column, CellProps, RowProps, HeaderCellProps } from './types';

package/src/examples/BasicExample.tsx

@@ -122,7 +122,7 @@ export function BasicExample() {
         data={data}
         columns={columns}
         height={500}
-        virtualized={true}
+        virtualized={false}
         selectedRows={selectedRows}
         onSelectionChange={setSelectedRows}
         multiSelect={true}

package/src/examples/DataGridShowcase.tsx

@@ -0,0 +1,296 @@
+import React, { useState } from 'react';
+import { View, Text, Button, Screen, Card, Badge } from '@idealyst/components';
+import { DataGrid } from '../DataGrid';
+import type { Column } from '../DataGrid/types';
+
+interface Product {
+  id: number;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+  status: 'in-stock' | 'low-stock' | 'out-of-stock';
+  vendor: string;
+  lastUpdated: string;
+}
+
+const generateSampleProducts = (count: number = 100): Product[] => {
+  const categories = ['Electronics', 'Clothing', 'Food', 'Books', 'Toys', 'Sports'];
+  const vendors = ['Vendor A', 'Vendor B', 'Vendor C', 'Vendor D'];
+  const products: Product[] = [];
+  
+  for (let i = 1; i <= count; i++) {
+    const stock = Math.floor(Math.random() * 100);
+    products.push({
+      id: i,
+      name: `Product ${i}`,
+      category: categories[Math.floor(Math.random() * categories.length)],
+      price: parseFloat((Math.random() * 999 + 1).toFixed(2)),
+      stock,
+      status: stock === 0 ? 'out-of-stock' : stock < 10 ? 'low-stock' : 'in-stock',
+      vendor: vendors[Math.floor(Math.random() * vendors.length)],
+      lastUpdated: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+    });
+  }
+  
+  return products;
+};
+
+interface DataGridShowcaseProps {
+  /** Number of sample products to generate */
+  productCount?: number;
+  /** Whether to show all columns (false hides vendor and lastUpdated) */
+  showAllColumns?: boolean;
+  /** Height of the DataGrid */
+  height?: number;
+}
+
+export function DataGridShowcase({ 
+  productCount = 100, 
+  showAllColumns = true,
+  height = 500
+}: DataGridShowcaseProps = {}) {
+  const [products, setProducts] = useState<Product[]>(() => generateSampleProducts(productCount));
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [virtualized, setVirtualized] = useState(false);
+  
+  const baseColumns: Column<Product>[] = [
+    {
+      key: 'id',
+      header: 'ID',
+      width: showAllColumns ? 60 : 50,
+      sortable: true,
+    },
+    {
+      key: 'name',
+      header: showAllColumns ? 'Product Name' : 'Product',
+      width: showAllColumns ? 150 : 120,
+      sortable: true,
+    },
+    {
+      key: 'category',
+      header: 'Category',
+      width: showAllColumns ? 120 : 100,
+      sortable: true,
+      render: (value) => (
+        <Badge variant="outlined" size="small">
+          {value}
+        </Badge>
+      ),
+    },
+    {
+      key: 'price',
+      header: 'Price',
+      width: showAllColumns ? 100 : 80,
+      sortable: true,
+      render: (value) => (
+        <Text weight="semibold" size={showAllColumns ? 'medium' : 'small'}>
+          ${value.toFixed(2)}
+        </Text>
+      ),
+    },
+    {
+      key: 'stock',
+      header: 'Stock',
+      width: showAllColumns ? 80 : 60,
+      sortable: true,
+      render: (value, row) => (
+        <Text
+          size="small"
+          style={{ 
+            color: row.status === 'out-of-stock' ? '#ef4444' : 
+                   row.status === 'low-stock' ? '#f59e0b' : '#22c55e' 
+          }}
+        >
+          {value}
+        </Text>
+      ),
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      width: showAllColumns ? 120 : 100,
+      render: (value) => {
+        const intent = value === 'in-stock' ? 'success' : 
+                       value === 'low-stock' ? 'warning' : 'error';
+        return (
+          <Badge variant="filled" intent={intent} size="small">
+            {value}
+          </Badge>
+        );
+      },
+    },
+  ];
+
+  const additionalColumns: Column<Product>[] = showAllColumns ? [
+    {
+      key: 'vendor',
+      header: 'Vendor',
+      width: 100,
+      sortable: true,
+    },
+    {
+      key: 'lastUpdated',
+      header: 'Last Updated',
+      width: 120,
+      sortable: true,
+    },
+  ] : [];
+
+  const columns = [...baseColumns, ...additionalColumns];
+  
+  const handleSort = (column: Column<Product>, direction: 'asc' | 'desc') => {
+    const sorted = [...products].sort((a, b) => {
+      const aVal = a[column.key as keyof Product];
+      const bVal = b[column.key as keyof Product];
+      
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return direction === 'asc' ? aVal - bVal : bVal - aVal;
+      }
+      
+      const aStr = String(aVal);
+      const bStr = String(bVal);
+      return direction === 'asc' 
+        ? aStr.localeCompare(bStr)
+        : bStr.localeCompare(aStr);
+    });
+    setProducts(sorted);
+  };
+  
+  const handleDeleteSelected = () => {
+    const newProducts = products.filter((_, index) => !selectedRows.includes(index));
+    setProducts(newProducts);
+    setSelectedRows([]);
+  };
+  
+  const handleResetData = () => {
+    setProducts(generateSampleProducts(productCount));
+    setSelectedRows([]);
+  };
+  
+  return (
+    <Screen background="primary" safeArea scrollable={false}>
+      <View spacing={showAllColumns ? "lg" : "md"} style={{ padding: showAllColumns ? 16 : 12, flex: 1 }}>
+        <Text size={showAllColumns ? "xlarge" : "large"} weight="bold">
+          DataGrid {showAllColumns ? 'Component ' : ''}Showcase
+        </Text>
+        
+        <Card variant="outlined">
+          <View spacing={showAllColumns ? "md" : "sm"}>
+            <Text weight="semibold" size="medium">Controls</Text>
+            
+            <View 
+              spacing="sm" 
+              style={{ 
+                flexDirection: showAllColumns ? 'row' : 'column',
+                alignItems: showAllColumns ? 'center' : 'stretch',
+                flexWrap: showAllColumns ? 'wrap' : 'nowrap',
+                gap: 8 
+              }}
+            >
+              <Button
+                variant="outlined"
+                size="small"
+                onPress={() => setVirtualized(!virtualized)}
+              >
+                {virtualized ? 'Disable' : 'Enable'} Virtualization
+              </Button>
+              
+              {!showAllColumns && (
+                <View style={{ flexDirection: 'row', gap: 8 }}>
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    onPress={() => setSelectedRows([])}
+                    disabled={selectedRows.length === 0}
+                  >
+                    Clear ({selectedRows.length})
+                  </Button>
+                  
+                  <Button
+                    variant="outlined"
+                    intent="error"
+                    size="small"
+                    onPress={handleDeleteSelected}
+                    disabled={selectedRows.length === 0}
+                  >
+                    Delete Selected
+                  </Button>
+                </View>
+              )}
+
+              {showAllColumns && (
+                <>
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    onPress={() => setSelectedRows([])}
+                    disabled={selectedRows.length === 0}
+                  >
+                    Clear Selection ({selectedRows.length})
+                  </Button>
+                  
+                  <Button
+                    variant="outlined"
+                    intent="error"
+                    size="small"
+                    onPress={handleDeleteSelected}
+                    disabled={selectedRows.length === 0}
+                  >
+                    Delete Selected
+                  </Button>
+                </>
+              )}
+              
+              <Button
+                variant="outlined"
+                size="small"
+                onPress={handleResetData}
+              >
+                Reset Data
+              </Button>
+            </View>
+            
+            <View spacing="xs">
+              <Text size="small">• {showAllColumns ? 'Total ' : ''}Products: {products.length}</Text>
+              <Text size="small">• Selected: {selectedRows.length}</Text>
+              <Text size="small">• Virtualization: {virtualized ? (showAllColumns ? 'Enabled' : 'On') : (showAllColumns ? 'Disabled' : 'Off')}</Text>
+            </View>
+          </View>
+        </Card>
+        
+        <Card variant="elevated" style={{ flex: 1, overflow: 'hidden' }}>
+          <DataGrid
+            data={products}
+            columns={columns}
+            height={height}
+            virtualized={virtualized}
+            selectedRows={selectedRows}
+            onSelectionChange={setSelectedRows}
+            multiSelect={true}
+            onSort={handleSort}
+            stickyHeader={true}
+            rowHeight={showAllColumns ? 48 : 44}
+            headerHeight={48}
+            rowStyle={(row, index) => ({
+              backgroundColor: index % 2 === 0 ? '#fafafa' : '#ffffff',
+            })}
+          />
+        </Card>
+        
+        <Card variant="outlined">
+          <View spacing={showAllColumns ? "sm" : "xs"}>
+            <Text weight="semibold" size="medium">Features {showAllColumns ? 'Demonstrated' : ''}</Text>
+            <Text size="small">✓ Virtualized rendering{showAllColumns ? ` with ${productCount} rows` : ''}</Text>
+            <Text size="small">✓ Sortable columns{showAllColumns ? ' (ID, Name, Category, Price, Stock, Vendor, Date)' : ''}</Text>
+            <Text size="small">✓ Multi-row selection{showAllColumns ? ' with visual feedback' : ''}</Text>
+            <Text size="small">✓ Custom cell rendering{showAllColumns ? ' (badges, colored text)' : ''}</Text>
+            <Text size="small">✓ Sticky header{showAllColumns ? ' while scrolling' : ''}</Text>
+            <Text size="small">✓ Alternating row colors</Text>
+            {showAllColumns && <Text size="small">✓ Responsive column widths</Text>}
+          </View>
+        </Card>
+      </View>
+    </Screen>
+  );
+}

package/src/examples/index.ts

@@ -1 +1,2 @@
-export { BasicExample } from './BasicExample';
+export { BasicExample } from './BasicExample';
+export { DataGridShowcase } from './DataGridShowcase';

package/src/index.native.ts

@@ -1,2 +1,2 @@
-export { DataGrid } from './DataGrid';
+export { DataGrid } from './DataGrid/DataGrid.native';
 export type { DataGridProps, Column, CellProps, RowProps, HeaderCellProps } from './DataGrid/types';

package/src/primitives/Cell/Cell.native.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+
+interface CellProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export const Cell: React.FC<CellProps> = ({ children, style }) => {
+  return (
+    <View style={[{ justifyContent: 'center' }, style]}>
+      {children}
+    </View>
+  );
+};

package/src/primitives/Cell/Cell.web.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+interface CellProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export const Cell: React.FC<CellProps> = ({ children, style }) => {
+  // Handle function-based styles (Unistyles 3) with proper theme access
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      console.warn('Error resolving Cell style:', error);
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  const combinedStyle = {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    justifyContent: 'center',
+    alignItems: 'stretch',
+    ...resolvedStyle,
+  };
+  
+  return (
+    <div style={combinedStyle}>
+      {children}
+    </div>
+  );
+};

package/src/primitives/Cell/index.native.ts

@@ -0,0 +1 @@
+export { Cell } from './Cell.native';

package/src/primitives/Cell/index.ts

@@ -0,0 +1 @@
+export { Cell } from './Cell.web';

package/src/primitives/Row/Row.native.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+interface RowProps {
+  children: React.ReactNode;
+  style?: any;
+  onPress?: () => void;
+}
+
+export const Row: React.FC<RowProps> = ({ children, style, onPress }) => {
+  const Wrapper = onPress ? TouchableOpacity : View;
+  
+  return (
+    <Wrapper 
+      style={[{ flexDirection: 'row' }, style]}
+      onPress={onPress}
+    >
+      {children}
+    </Wrapper>
+  );
+};

package/src/primitives/Row/Row.web.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+interface RowProps {
+  children: React.ReactNode;
+  style?: any;
+  onPress?: () => void;
+}
+
+export const Row: React.FC<RowProps> = ({ children, style, onPress }) => {
+  // Handle function-based styles (Unistyles 3) with proper theme access
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      console.warn('Error resolving Row style:', error);
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  const combinedStyle = {
+    display: 'flex',
+    flexDirection: 'row' as const,
+    width: '100%',
+    boxSizing: 'border-box' as const,
+    ...resolvedStyle,
+  };
+  
+  return (
+    <div 
+      style={combinedStyle} 
+      onClick={onPress}
+      role={onPress ? 'button' : undefined}
+      tabIndex={onPress ? 0 : undefined}
+      onKeyDown={onPress ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onPress();
+        }
+      } : undefined}
+    >
+      {children}
+    </div>
+  );
+};

package/src/primitives/Row/index.native.ts

@@ -0,0 +1 @@
+export { Row } from './Row.native';

package/src/primitives/Row/index.ts

@@ -0,0 +1 @@
+export { Row } from './Row.web';

package/src/primitives/ScrollView/ScrollView.web.tsx

@@ -20,6 +20,9 @@ export const ScrollView: React.FC<ScrollViewProps> = ({
   onScroll,
   showsHorizontalScrollIndicator = true,
   showsVerticalScrollIndicator = true,
+  scrollEventThrottle: _scrollEventThrottle, // native property
+  bounces: _bounces, // native property
+  directionalLockEnabled: _directionalLockEnabled, // native property
   ...props
 }) => {
   const scrollStyle = {

package/src/primitives/Table/Table.native.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+interface TableProps {
+  children: React.ReactNode;
+  style?: any;
+}
+
+export const Table: React.FC<TableProps> = ({ children, style }) => {
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  return (
+    <View style={[
+      { flex: 1 },
+      resolvedStyle,
+      // If width is specified, don't flex
+      resolvedStyle?.width ? { flex: 0 } : {}
+    ]}>
+      {children}
+    </View>
+  );
+};
+
+interface TableRowProps {
+  children: React.ReactNode;
+  style?: any;
+  onPress?: () => void;
+}
+
+export const TableRow: React.FC<TableRowProps> = ({ children, style, onPress }) => {
+  const Wrapper = onPress ? TouchableOpacity : View;
+  
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  // Ensure flexDirection is always 'row' - force it with !important-like behavior
+  const finalStyle = [resolvedStyle, { flexDirection: 'row', display: 'flex' }];
+  
+  return (
+    <Wrapper 
+      style={finalStyle}
+      onPress={onPress}
+    >
+      {children}
+    </Wrapper>
+  );
+};
+
+interface TableCellProps {
+  children: React.ReactNode;
+  style?: any;
+  width?: number | string;
+  colSpan?: number;
+}
+
+export const TableCell: React.FC<TableCellProps> = ({ children, style, width, colSpan }) => {
+  const flexValue = colSpan ? colSpan : 1;
+  
+  let resolvedStyle = {};
+  if (typeof style === 'function') {
+    try {
+      resolvedStyle = style(UnistylesRuntime.theme);
+    } catch (error) {
+      resolvedStyle = {};
+    }
+  } else if (style) {
+    resolvedStyle = style;
+  }
+  
+  const combinedStyle = [
+    { justifyContent: 'center' },
+    width ? { width, flex: 0 } : { flex: flexValue },
+    resolvedStyle
+  ];
+  
+  return (
+    <View style={combinedStyle}>
+      {children}
+    </View>
+  );
+};