@beppla/tapas-ui 1.0.64 → 1.0.66

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;

package/components/Drawer/Drawer.tsx

@@ -1,224 +0,0 @@
-import {Overlay, withTheme, makeStyles} from '@rneui/themed';
-import {
-  Text,
-  View,
-  ScrollView,
-  StyleProp,
-  ViewStyle,
-  TouchableOpacity,
-  Platform
-} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React from 'react';
-import Button from '../Button/Button';
-import Icon from '../Icons/TapasIcon';
-import Status, { STATUS_TYPE } from '../Status/Status';
-
-export interface Props {
-  title?: string;
-  titleIcon?: string;
-  titleIconOnPress?: () => void;
-  titleStatus?: string;
-  statusType?: STATUS_TYPE;
-  visible: boolean;
-  showHeader?: boolean;
-  showFooter?: boolean;
-  overlayStyle?: StyleProp<ViewStyle>;
-  onClose?: () => void;
-  clearDisable?: boolean;
-  onClear?: () => void;
-  clearText?: string;
-  children?: React.ReactNode;
-  middleSectionStyle?: StyleProp<ViewStyle>;
-  leftButtonText?: string;
-  leftButtonTextStyle?: StyleProp<ViewStyle>;
-  rightButtonText?: string;
-  rightButtonStyle?: StyleProp<ViewStyle>;
-  leftButtonOnPress?: () => void;
-  rightButtonOnPress?: () => void;
-  component?: React.ReactNode;
-  footerComponent?: React.ReactNode;
-  headerComponent?: React.ReactNode;
-  testID?: string;
-}
-
-const useStyles = makeStyles((theme) => ({
-  overlay: {
-    width: Platform.OS === 'web' ? '55%' : '100%',
-    height: '100%',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    justifyContent: 'center',
-    alignItems: 'flex-end',
-    paddingVertical: 0,
-    paddingHorizontal: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  flx: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start'
-  },
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    height: 64,
-    width: '100%',
-    alignItems: 'center',
-    paddingHorizontal: theme.spacing.tpRg
-  },
-  middleSection: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: theme.spacing.tpRg,
-    fontFamily: theme.fonts.fontFamily,
-    paddingBottom: theme.spacing.tpMd
-  },
-  title: {
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: theme.fonts.h4,
-    letterSpacing: theme.fonts.letterSpacingS,
-    color: theme.colors.primary,
-    fontWeight: theme.fonts.weightM
-  },
-  clear: {
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: theme.fonts.sizeM,
-    fontWeight: theme.fonts.weightM,
-    color: theme.colors.grey3
-  },
-  footer: {
-    paddingHorizontal: theme.spacing.tpRg,
-    paddingVertical: theme.spacing.tpMd,
-    color: 'red',
-    width: '100%',
-    justifyContent: 'flex-end',
-    flexDirection: 'row',
-    alignItems: 'center',
-    fontSize: theme.fonts.sizeS,
-    fontWeight: theme.fonts.weightM,
-    borderTopColor: theme.colors.grey3,
-    borderTopWidth: 1
-  },
-  leftButton: {},
-  leftButtonText: {
-    fontFamily: theme.fonts.fontFamily,
-    fontWeight: theme.fonts.weightM,
-    color: theme.colors.primary
-  },
-  rightButton: {
-    marginLeft: theme.spacing.tpXs
-  },
-  icon: {
-    width: 40,
-  },
-  rightButtonText: {
-    // color: 'blue',
-  }
-}));
-
-const Drawer: React.FC<Props> = ({
-  visible = false,
-  onClear,
-  clearText,
-  onClose,
-  title,
-  titleIcon,
-  titleIconOnPress,
-  titleStatus,
-  statusType = 'unavailable',
-  overlayStyle,
-  children,
-  showHeader = true,
-  showFooter = false,
-  middleSectionStyle,
-  leftButtonText,
-  leftButtonTextStyle,
-  rightButtonStyle,
-  rightButtonText,
-  leftButtonOnPress,
-  rightButtonOnPress,
-  component,
-  footerComponent,
-  headerComponent,
-  clearDisable = true,
-  testID,
-  ...props
-}) => {
-  const styles = useStyles(props);
-  const getSaveArea = () => {
-    if (Platform.OS === 'web') {
-      return null;
-    }
-    const insets = useSafeAreaInsets();
-    return {
-      paddingTop: insets.top
-    };
-  };
-
-  return (
-    <Overlay
-      isVisible={visible}
-      onBackdropPress={onClose}
-      overlayStyle={[styles.overlay, getSaveArea(), overlayStyle]}
-      testID={testID}
-    >
-      {showHeader && (
-        <View style={styles.header}>
-          {headerComponent ? (
-            <>{headerComponent}</>
-          ) : (
-            <>
-              <View style={[styles.flx, {gap: 8}]}>
-                {titleIcon && (
-                  <TouchableOpacity
-                    onPress={() => {
-                      titleIconOnPress && titleIconOnPress();
-                    }}
-                  >
-                    <Icon name={titleIcon} size={32} style={styles.icon} />
-                  </TouchableOpacity>
-                )}
-                <Text style={styles.title}>{title}</Text>
-                {titleStatus && (
-                  <Status
-                    mode={'solid'}
-                    type={statusType}
-                    tag={titleStatus}
-                  />
-                )}
-              </View>
-              <Button
-                onPress={onClear ?? onClose}
-                type={'clear'}
-                disabled={clearDisable}
-                title={clearText}
-              />
-            </>
-          )}
-        </View>
-      )}
-      <ScrollView style={[styles.middleSection, middleSectionStyle]}>
-        {component}
-        {children}
-      </ScrollView>
-      {showFooter && (
-        <View style={[styles.footer]}>
-          <TouchableOpacity style={styles.leftButton} onPress={leftButtonOnPress}>
-            <Text style={[styles.leftButtonText, leftButtonTextStyle]}>{leftButtonText}</Text>
-          </TouchableOpacity>
-          <Button style={[styles.rightButton, rightButtonStyle]} onPress={rightButtonOnPress}>
-            {rightButtonText}
-          </Button>
-        </View>
-      )}
-      {footerComponent && <View style={styles.footer}>{footerComponent}</View>}
-    </Overlay>
-  );
-};
-
-export default withTheme(Drawer);