@beppla/tapas-ui 1.0.46 → 1.0.48

package/components/DeviceSelectionModal/DeviceSelectionModal.tsx

@@ -0,0 +1,368 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,224 @@
+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);