@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/DataTable/DataTable.tsx

@@ -1,266 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { View, ScrollView, StyleSheet, TouchableOpacity, Platform } from 'react-native';
-import Text from '../Text/Text';
-import Pagination from '../Pagination/Pagination';
-
-export interface DataTableColumn<T = any> {
-  key: string;
-  title: string;
-  dataIndex?: string;
-  width?: number;
-  align?: 'left' | 'center' | 'right';
-  sortable?: boolean;
-  render?: (text: any, record: T, index: number) => React.ReactNode;
-  fixed?: 'left' | 'right';
-}
-
-export interface DataTableProps<T = any> {
-  columns: DataTableColumn<T>[];
-  dataSource: T[];
-  rowKey?: string | ((record: T) => string | number);
-  loading?: boolean;
-  pagination?: {
-    current: number;
-    pageSize: number;
-    total: number;
-    onChange?: (page: number, pageSize: number) => void;
-  } | false;
-  onRow?: (record: T, index: number) => {
-    onPress?: () => void;
-  };
-  emptyText?: string;
-  style?: any;
-  headerStyle?: any;
-  rowStyle?: any;
-  maxHeight?: number;
-  /** Test ID for E2E testing */
-  testID?: string;
-}
-
-export function DataTable<T = any>({
-  columns,
-  dataSource,
-  rowKey = 'id',
-  loading = false,
-  pagination,
-  onRow,
-  emptyText = 'No data',
-  style,
-  headerStyle,
-  rowStyle,
-  maxHeight,
-  testID,
-}: DataTableProps<T>) {
-  const [sortKey, setSortKey] = useState<string | null>(null);
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
-
-  const handleSort = (columnKey: string) => {
-    if (sortKey === columnKey) {
-      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortKey(columnKey);
-      setSortOrder('asc');
-    }
-  };
-
-  const sortedData = useMemo(() => {
-    if (!sortKey) return dataSource;
-
-    return [...dataSource].sort((a, b) => {
-      const column = columns.find(col => col.key === sortKey);
-      if (!column) return 0;
-
-      const dataIndex = column.dataIndex || column.key;
-      const aValue = (a as Record<string, unknown>)[dataIndex];
-      const bValue = (b as Record<string, unknown>)[dataIndex];
-
-      if (aValue === bValue) return 0;
-
-      const comparison = (aValue as number | string) > (bValue as number | string) ? 1 : -1;
-      return sortOrder === 'asc' ? comparison : -comparison;
-    });
-  }, [dataSource, sortKey, sortOrder, columns]);
-
-  const getRowKey = (record: T, index: number): string | number => {
-    if (typeof rowKey === 'function') {
-      return rowKey(record);
-    }
-    return ((record as Record<string, unknown>)[rowKey as string] as string | number) || index;
-  };
-
-  return (
-    <View testID={testID} style={[styles.container, style]}>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={Platform.OS === 'web'}
-        style={maxHeight ? { maxHeight } : undefined}
-      >
-        <View>
-          {/* Table Header */}
-          <View style={[styles.header, headerStyle]}>
-            {columns.map((column) => (
-              <TouchableOpacity
-                key={column.key}
-                style={[
-                  styles.headerCell,
-                  { width: column.width || 150 },
-                  column.align && { 
-                    alignItems: column.align === 'left' ? 'flex-start' : column.align === 'right' ? 'flex-end' : 'center'
-                  },
-                ]}
-                onPress={() => column.sortable && handleSort(column.key)}
-                disabled={!column.sortable}
-              >
-                <Text style={styles.headerText}>
-                  {column.title}
-                  {column.sortable && sortKey === column.key && (
-                    <Text style={styles.sortIndicator}>
-                      {sortOrder === 'asc' ? ' ↑' : ' ↓'}
-                    </Text>
-                  )}
-                </Text>
-              </TouchableOpacity>
-            ))}
-          </View>
-
-          {/* Table Body */}
-          <ScrollView
-            style={maxHeight ? { maxHeight: maxHeight - 50 } : undefined}
-            showsVerticalScrollIndicator={Platform.OS === 'web'}
-          >
-            {loading ? (
-              <View style={styles.loadingRow}>
-                <Text>Loading...</Text>
-              </View>
-            ) : sortedData.length === 0 ? (
-              <View style={styles.emptyRow}>
-                <Text style={styles.emptyText}>{emptyText}</Text>
-              </View>
-            ) : (
-              sortedData.map((record, index) => {
-                const rowProps = onRow ? onRow(record, index) : {};
-                const key = getRowKey(record, index);
-
-                return (
-                  <TouchableOpacity
-                    key={key}
-                    style={[styles.row, rowStyle]}
-                    {...rowProps}
-                    disabled={!rowProps.onPress}
-                  >
-                    {columns.map((column) => {
-                      const dataIndex = column.dataIndex || column.key;
-                      const text = (record as Record<string, unknown>)[dataIndex];
-                      
-                      return (
-                        <View
-                          key={column.key}
-                          style={[
-                            styles.cell,
-                            { width: column.width || 150 },
-                            column.align && { 
-                              alignItems: column.align === 'left' ? 'flex-start' : column.align === 'right' ? 'flex-end' : 'center'
-                            },
-                          ]}
-                        >
-                          {column.render ? (
-                            column.render(text, record, index)
-                          ) : (
-                            <Text style={styles.cellText}>{text != null ? String(text) : '-'}</Text>
-                          )}
-                        </View>
-                      );
-                    })}
-                  </TouchableOpacity>
-                );
-              })
-            )}
-          </ScrollView>
-        </View>
-      </ScrollView>
-
-      {/* Pagination */}
-      {pagination !== false && pagination && (
-        <View style={styles.paginationContainer}>
-          <Pagination
-            totalCount={`${pagination.total} items`}
-            pageParams={{
-              page: pagination.current,
-              pageSize: pagination.pageSize,
-              totalItems: pagination.total,
-              totalPage: Math.ceil(pagination.total / pagination.pageSize),
-            }}
-            onPageChange={(params) => {
-              pagination.onChange?.(params.page, params.pageSize);
-            }}
-          />
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 8,
-    overflow: 'hidden',
-  },
-  header: {
-    flexDirection: 'row',
-    backgroundColor: '#F5F5F5',
-    borderBottomWidth: 2,
-    borderBottomColor: '#E0E0E0',
-  },
-  headerCell: {
-    padding: 12,
-    borderRightWidth: 1,
-    borderRightColor: '#E0E0E0',
-  },
-  headerText: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#2C3E50',
-  },
-  sortIndicator: {
-    color: '#FF6B00',
-    fontSize: 12,
-  },
-  row: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
-    backgroundColor: '#FFFFFF',
-  },
-  cell: {
-    padding: 12,
-    justifyContent: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#F0F0F0',
-  },
-  cellText: {
-    fontSize: 14,
-    color: '#2C3E50',
-  },
-  loadingRow: {
-    padding: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  emptyRow: {
-    padding: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  emptyText: {
-    fontSize: 14,
-    color: '#999',
-  },
-  paginationContainer: {
-    padding: 16,
-    borderTopWidth: 1,
-    borderTopColor: '#E0E0E0',
-    backgroundColor: '#FAFAFA',
-  },
-});
-

package/components/DataTable/index.tsx

@@ -1,3 +0,0 @@
-export { DataTable } from './DataTable';
-export type { DataTableProps, DataTableColumn } from './DataTable';
-

package/components/DeviceSelectionModal/DeviceSelectionModal.tsx

@@ -1,368 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Modal,
-  Text,
-  TouchableOpacity,
-  FlatList,
-  ActivityIndicator,
-} from 'react-native';
-import { withTheme, makeStyles, useTheme } from '@rneui/themed';
-
-export interface Device {
-  id: string;
-  name: string;
-  description?: string;
-}
-
-export interface DeviceSelectionModalProps {
-  visible: boolean;
-  devices: Device[];
-  selectedDeviceId?: string;
-  onClose: () => void;
-  onConfirm: (deviceId: string) => void;
-  title?: string;
-  isLoading?: boolean;
-  error?: string | null;
-  onRetry?: () => void;
-  // Localization props
-  selectDeviceText?: string;
-  pleaseSelectDeviceText?: string;
-  loadingDevicesText?: string;
-  noDevicesAvailableText?: string;
-  closeText?: string;
-  confirmText?: string;
-  retryText?: string;
-  testID?: string;
-}
-
-const DeviceSelectionModal: React.FC<DeviceSelectionModalProps> = ({
-  visible,
-  devices,
-  selectedDeviceId,
-  onClose,
-  onConfirm,
-  title,
-  isLoading = false,
-  error = null,
-  onRetry,
-  selectDeviceText = "Select Device",
-  pleaseSelectDeviceText = "Please select a device",
-  loadingDevicesText = "Loading devices...",
-  noDevicesAvailableText = "No devices available",
-  closeText = "Close",
-  confirmText = "Confirm",
-  retryText = "Retry",
-  testID,
-}) => {
-  const [localSelectedId, setLocalSelectedId] = useState<string | undefined>(
-    selectedDeviceId
-  );
-  const styles = useStyles();
-  const theme = useTheme();
-
-  const handleDeviceSelect = (deviceId: string) => {
-    setLocalSelectedId(deviceId);
-  };
-
-  const handleConfirm = () => {
-    if (localSelectedId) {
-      onConfirm(localSelectedId);
-    }
-  };
-
-  const handleClose = () => {
-    setLocalSelectedId(selectedDeviceId);
-    onClose();
-  };
-
-  const renderDeviceItem = ({ item }: { item: Device }) => {
-    const isSelected = item.id === localSelectedId;
-    
-    return (
-      <TouchableOpacity
-        style={[
-          styles.deviceItem,
-          isSelected && styles.selectedDeviceItem,
-        ]}
-        onPress={() => handleDeviceSelect(item.id)}
-      >
-        <View style={styles.radioContainer}>
-          <View style={[
-            styles.radioButton,
-            isSelected && styles.radioButtonSelected,
-          ]}>
-            {isSelected && <View style={styles.radioButtonInner} />}
-          </View>
-        </View>
-        <View style={styles.deviceInfo}>
-          <Text style={[
-            styles.deviceName,
-            isSelected && styles.selectedDeviceName,
-          ]}>
-            {item.name}
-          </Text>
-          {item.description && (
-            <Text style={styles.deviceDescription}>
-              {item.description}
-            </Text>
-          )}
-        </View>
-      </TouchableOpacity>
-    );
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="fade"
-      onRequestClose={handleClose}
-      testID={testID}
-    >
-      <View style={styles.overlay}>
-        <View style={styles.modalContainer}>
-          {/* Header */}
-          <View style={styles.header}>
-            <Text style={styles.title}>{title || selectDeviceText}</Text>
-            <Text style={styles.subtitle}>
-              {pleaseSelectDeviceText}
-            </Text>
-          </View>
-
-          {/* Device List */}
-          <View style={styles.deviceList}>
-            {isLoading ? (
-               <View style={styles.loadingContainer}>
-                 <ActivityIndicator size="large" color={theme.theme.colors.primary} />
-                 <Text style={styles.loadingText}>{loadingDevicesText}</Text>
-               </View>
-             ) : error ? (
-               <View style={styles.errorContainer}>
-                 <Text style={styles.errorText}>{error}</Text>
-                 {onRetry && (
-                   <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
-                     <Text style={styles.retryButtonText}>{retryText}</Text>
-                   </TouchableOpacity>
-                 )}
-               </View>
-             ) : (devices || []).length === 0 ? (
-               <View style={styles.emptyContainer}>
-                 <Text style={styles.emptyText}>{noDevicesAvailableText}</Text>
-               </View>
-            ) : (
-              <FlatList
-                data={devices}
-                keyExtractor={(item) => item.id}
-                renderItem={renderDeviceItem}
-                showsVerticalScrollIndicator={false}
-              />
-            )}
-          </View>
-
-          {/* Footer Buttons */}
-          <View style={styles.footer}>
-            <TouchableOpacity
-              style={styles.closeButton}
-              onPress={handleClose}
-            >
-              <Text style={styles.closeButtonText}>{closeText}</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[
-                styles.confirmButton,
-                !localSelectedId && styles.confirmButtonDisabled,
-              ]}
-              onPress={handleConfirm}
-              disabled={!localSelectedId}
-            >
-              <Text style={[
-                styles.confirmButtonText,
-                !localSelectedId && styles.confirmButtonTextDisabled,
-              ]}>
-                {confirmText}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContainer: {
-    backgroundColor: theme.colors.white,
-    borderRadius: 12,
-    width: '90%',
-    maxWidth: 400,
-    maxHeight: '80%',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.08,
-    shadowRadius: 24,
-    elevation: 8,
-  },
-  header: {
-    padding: 24,
-    paddingBottom: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.grey4,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: theme.colors.primary,
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: theme.colors.grey1,
-    fontWeight: '400',
-  },
-  deviceList: {
-    maxHeight: 300,
-    paddingHorizontal: 24,
-    paddingVertical: 16,
-  },
-  deviceItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 16,
-    paddingHorizontal: 12,
-    borderRadius: 8,
-    marginBottom: 8,
-  },
-  selectedDeviceItem: {
-    backgroundColor: theme.colors.grey3,
-  },
-  radioContainer: {
-    marginRight: 12,
-  },
-  radioButton: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    borderWidth: 2,
-    borderColor: theme.colors.greyOutline,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  radioButtonSelected: {
-    borderColor: theme.colors.primary,
-  },
-  radioButtonInner: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    backgroundColor: theme.colors.primary,
-  },
-  deviceInfo: {
-    flex: 1,
-  },
-  deviceName: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: theme.colors.primary,
-    marginBottom: 4,
-  },
-  selectedDeviceName: {
-    color: theme.colors.primary,
-  },
-  deviceDescription: {
-    fontSize: 12,
-    color: theme.colors.grey1,
-    fontWeight: '400',
-  },
-  footer: {
-    flexDirection: 'row',
-    padding: 24,
-    paddingTop: 16,
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.grey4,
-    gap: 12,
-  },
-  closeButton: {
-    flex: 1,
-    height: 48,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: theme.colors.greyOutline,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  closeButtonText: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: theme.colors.grey1,
-  },
-  confirmButton: {
-    flex: 1,
-    height: 48,
-    borderRadius: 8,
-    backgroundColor: theme.colors.primary,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  confirmButtonDisabled: {
-    backgroundColor: theme.colors.grey3,
-  },
-  confirmButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: theme.colors.white,
-  },
-  confirmButtonTextDisabled: {
-    color: theme.colors.grey1,
-  },
-  loadingContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 40,
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 14,
-    color: theme.colors.grey1,
-  },
-  errorContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 40,
-  },
-  errorText: {
-    fontSize: 14,
-    color: theme.colors.error || '#FF6B6B',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  retryButton: {
-    paddingHorizontal: 20,
-    paddingVertical: 8,
-    backgroundColor: theme.colors.primary,
-    borderRadius: 6,
-  },
-  retryButtonText: {
-    fontSize: 14,
-    color: theme.colors.white,
-    fontWeight: '500',
-  },
-  emptyContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 40,
-  },
-  emptyText: {
-    fontSize: 14,
-    color: theme.colors.grey1,
-    textAlign: 'center',
-  },
-}));
-
-export default withTheme(DeviceSelectionModal);

package/components/DraggableFlatList/DraggableFlatList.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import {View} from "react-native";
-
-interface Props {
-    testID?: string;
-}
-
-const DraggableFlatList: React.FC<Props> = ({ testID }) => {
-    return <View testID={testID}></View>
-}
-
-export default DraggableFlatList;