@beppla/tapas-ui 1.4.35 → 1.5.0

package/components/Card/Card.tsx

@@ -1,276 +0,0 @@
-import React, { useState } from "react";
-import {
-  View,
-  ViewProps,
-  Text,
-  TouchableWithoutFeedback,
-  Pressable,
-} from "react-native";
-import { withTheme, makeStyles, useTheme } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-
-export interface CardProps extends ViewProps {
-  title?: string;
-  subTitle?: string;
-  icon?: string;
-  showMore?: boolean;
-  cardId: string;
-  path?: string;
-  moreBtnIcon?: string;
-  actions?: Action[];
-  showNavBtn?: boolean;
-  navBtnIcon?: string;
-  state?: "normal" | "warning" | "error" | "success";
-  stateText?: string;
-  width?: number;
-  onPress?: (key: string) => void;
-  showMoreOptions?: (key: string) => void;
-}
-
-export interface Action {
-  key: string;
-  name: string;
-  icon: string;
-}
-
-const Card: React.FC<CardProps> = ({
-  style,
-  icon,
-  state,
-  stateText,
-  showMore,
-  title,
-  subTitle,
-  moreBtnIcon = "more_vert",
-  actions,
-  cardId,
-  path,
-  showNavBtn,
-  width = 285,
-  navBtnIcon = "back",
-  onPress,
-  showMoreOptions,
-  ...otherProps
-}) => {
-  const theme = useTheme();
-  const styles = useStyles();
-  const stateColors: { [key: string]: string } = {
-    error_bg: (theme.theme.colors as any).colorStatusErrorBg || "#FFE6E6",
-    error_text: (theme.theme.colors as any).colorStatusError || "#FF4444",
-    warning_bg: (theme.theme.colors as any).colorStatusWarningBg || "#FFF3E0",
-    warning_text: (theme.theme.colors as any).colorStatusWarning || "#FF9800",
-    success_bg: (theme.theme.colors as any).colorStatusSuccessBg || "#E8F5E8",
-    success_text: (theme.theme.colors as any).colorStatusSuccess || "#4CAF50",
-  };
-  const [hover, setHover] = useState(false);
-
-  return (
-    <TouchableWithoutFeedback
-      onPressIn={() => setHover(true)}
-      onPressOut={() => setHover(false)}
-      onPress={() => onPress && onPress(`${path}--${cardId}`)}
-    >
-      <View
-        {...otherProps}
-        style={[
-          styles.container,
-          style,
-          { width: width || 285 },
-          hover && styles.hoverStyle,
-        ]}
-      >
-        <View style={styles.inner}>
-          <View style={styles.header}>
-            <View style={styles.left}>
-              {icon && (
-                <TapasIcon
-                  size={24}
-                  color={theme.theme.colors.primary}
-                  name={icon}
-                />
-              )}
-              {state && stateText && (
-                <View
-                  style={[
-                    styles.stateCon,
-                    { backgroundColor: stateColors[state + "_bg"] },
-                  ]}
-                >
-                  <Text
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                    style={[
-                      styles.stateText,
-                      { color: stateColors[state + "_text"] }
-                    ]}
-                  >
-                    {stateText}
-                  </Text>
-                </View>
-              )}
-            </View>
-            <View style={styles.right}>
-              {showMore && moreBtnIcon && (
-                <Pressable
-                  onPress={(e) => {
-                    e.stopPropagation();
-                    if (showMoreOptions) {
-                      showMoreOptions(cardId);
-                    }
-                  }}
-                >
-                  <TapasIcon 
-                    size={20} 
-                    color={theme.theme.colors.primary} 
-                    name={moreBtnIcon} 
-                  />
-                </Pressable>
-              )}
-            </View>
-          </View>
-          <View style={styles.main}>
-            <View
-              style={[
-                styles.left,
-                {
-                  flexDirection: "column",
-                  width: width - 32 - (showNavBtn ? 38 : 0),
-                  overflow: "hidden",
-                },
-              ]}
-            >
-              <Text
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                style={styles.subTitle}
-              >
-                {subTitle || ""}
-              </Text>
-              <Text numberOfLines={1} ellipsizeMode="tail" style={styles.title}>
-                {title || ""}
-              </Text>
-            </View>
-            <View style={styles.right}>
-              {showNavBtn && (
-                <Pressable
-                  onPress={() => onPress && onPress(cardId)}
-                  style={styles.navBtn}
-                >
-                  <TapasIcon
-                    size={20}
-                    style={{ alignSelf: "center" }}
-                    color={theme.theme.colors.primary}
-                    name={navBtnIcon}
-                  />
-                </Pressable>
-              )}
-            </View>
-          </View>
-        </View>
-      </View>
-    </TouchableWithoutFeedback>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-start",
-    width: 285,
-    height: 128,
-    borderRadius: 12,
-    overflow: "hidden",
-    backgroundColor: theme.colors.white,
-    cursor: "pointer",
-  },
-  hoverStyle: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.08,
-    shadowRadius: 24,
-    elevation: 12,
-  },
-  inner: {
-    marginTop: 10,
-    marginBottom: 16,
-    marginRight: 16,
-    marginLeft: 16,
-    display: "flex",
-    flexGrow: 1,
-    overflow: "hidden",
-    flexDirection: "column",
-    justifyContent: "space-between",
-  },
-  header: {
-    height: 32,
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    overflow: "hidden",
-    justifyContent: "space-between",
-    gap: 8,
-  },
-  left: {
-    display: "flex",
-    flexDirection: "row",
-    flexGrow: 1,
-    overflow: "hidden",
-    justifyContent: "flex-start",
-  },
-  right: {
-    display: "flex",
-    flexDirection: "row",
-    overflow: "hidden",
-    justifyContent: "flex-end",
-  },
-  stateCon: {
-    display: "flex",
-    flexDirection: "row",
-    height: 24,
-    alignSelf: "center",
-    paddingLeft: 8,
-    paddingRight: 8,
-    borderRadius: 12,
-  },
-  stateText: {
-    fontSize: 10,
-    fontWeight: "700",
-    lineHeight: 24,
-  },
-  main: {
-    display: "flex",
-    flexDirection: "row",
-    height: 40,
-    justifyContent: "space-between",
-    overflow: "hidden",
-    width: "100%",
-    gap: 8,
-  },
-  navBtn: {
-    display: "flex",
-    flexDirection: "column",
-    width: 28,
-    height: 28,
-    justifyContent: "center",
-    alignSelf: "center",
-    borderRadius: 14,
-    borderColor: theme.colors.greyOutline,
-    borderWidth: 1,
-    transform: "rotate(180deg)",
-    borderStyle: "solid",
-  },
-  subTitle: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: theme.colors.grey1,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: theme.colors.primary,
-    overflow: "hidden",
-  },
-}));
-
-export default withTheme(Card);

package/components/CheckBox/CheckBox.tsx

@@ -1,157 +0,0 @@
-import React, {FC, useEffect, useState} from 'react';
-import {makeStyles, withTheme, Text as RNText, TextProps} from "@rneui/themed";
-import {Platform, StyleProp, TouchableOpacity, ViewStyle} from "react-native";
-import Icon from '../Icons/TapasIcon';
-import Hoverable from '../Hoverable/Hoverable';
-export interface Props extends TextProps {
-    children?: React.ReactNode;
-    label?: string;
-    hoverStyle?: StyleProp<ViewStyle>;
-    onPress?: () => void;
-    checked?: boolean;
-    disabled?: boolean;
-    type?: 'checkbox' | 'radio',
-    mode?: 'dark' | 'light',
-    full?: boolean,
-}
-// @ts-ignore
-const useStyles = makeStyles((theme, ...props) => {
-    // @ts-ignore
-    const { disabled , mode} = props[0];
-    return {
-        textItem: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeM,
-            fontWeight: theme.fonts.weightR,
-            color: theme.colors.colorTextPrimary,
-            // textOverflow: 'ellipsis', // Not supported in React Native
-            // whiteSpace: 'nowrap', // Not supported in React Native
-            justifyContent: "center",
-            alignItems: "center",
-            display: "flex",
-            minWidth: 80,
-        },
-        checkBoxContainer: {
-            backgroundColor: mode === 'dark'? theme.colors.grey4 : theme.colors.white,
-            paddingLeft: 12,
-            paddingRight: 16,
-            paddingVertical: 8,
-            height: 40,
-            minWidth: 80,
-            borderRadius: theme.radius.rounded,
-            marginBottom: 8,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-        },
-        disabledText: {
-            color: theme.colors.disabled,
-        },
-        hovered: {
-            backgroundColor: mode === 'dark' && theme.colors.grey3,
-        },
-        selected: {
-            backgroundColor: mode === 'dark' && theme.colors.primary,
-        },
-        textHovered: {
-            color:  mode === 'light' && theme.colors.grey1,
-        },
-        textSelected: {
-            color:  mode === 'dark' ? theme.colors.white : theme.colors.primary,
-        },
-        checkBox: {
-            marginRight: 8,
-            color: disabled ? theme.colors.disabled : theme.colors.colorTextPrimary
-        },
-        checkedBox: {
-            color:mode === 'dark' ?  theme.colors.white : theme.colors.primary,
-        },
-        uncheckedBox: {
-            color: theme.colors.colorTextPrimary
-        },
-        disabledBox: {
-            color: theme.colors.disabled,
-        },
-    }
-});
-
-
-const CheckBox: FC<Props> = (props) => {
-    const styles = useStyles(props);
-    const {children, label, checked = false, disabled ,style ,onPress, hoverStyle, full = true} = props;
-    const [isHovered, setIsHovered] = useState(false);
-    const [isSelected, setIsSelected] = useState(checked);
-    const handleItemPress = () => {
-        setIsSelected(!isSelected);
-        onPress && onPress();
-    };
-
-    const handleMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    useEffect(() => {
-        setIsSelected(checked);
-    }, [checked]);
-    const renderText = () => {
-        return (!disabled ?<TouchableOpacity style={[
-            //@ts-ignore
-            styles.checkBoxContainer,
-            //@ts-ignore
-            isHovered && styles.hovered,
-            isHovered && hoverStyle,
-            //@ts-ignore
-            isSelected && styles.selected,
-            style
-        ]} onPress={handleItemPress}>
-            <RNText style={[
-                //@ts-ignore
-                styles.textItem,
-                //@ts-ignore
-                isHovered && styles.textHovered,
-                //@ts-ignore
-                isSelected && styles.textSelected,
-            ]} numberOfLines={1} ellipsizeMode="tail" {...props}>
-                <Icon
-                    // @ts-ignore
-                    style={[styles.checkBox, isSelected && styles.checkedBox, !isSelected && styles.uncheckedBox]}  name={isSelected ? (full ? 'check_box' : 'indeterminate_check_box') : 'check_box_outline_blank'} size={20}  />
-                {label}
-                {children}
-            </RNText>
-        </TouchableOpacity> : <RNText style={[
-            //@ts-ignore
-            styles.checkBoxContainer,
-            //@ts-ignore
-            styles.textItem,
-            //@ts-ignore
-            disabled && styles.disabledText,
-            style
-        ]} numberOfLines={1} ellipsizeMode="tail" {...props}>
-            <Icon
-                // @ts-ignore
-                style={[styles.checkBox]}  name={isSelected ? 'check_box' : 'check_box_outline_blank'} size={24}  />
-            {label}
-            {children}
-        </RNText>)
-    }
-
-
-    return (
-        Platform.OS === 'web' ? (
-            <Hoverable
-                onHoverIn={handleMouseEnter}
-                onHoverOut={handleMouseLeave}
-            >
-                {
-                    renderText()
-                }
-            </Hoverable>
-        ): renderText()
-    )
-}
-
-export default withTheme(CheckBox);

package/components/CheckBox/CheckBoxItem.tsx

@@ -1,133 +0,0 @@
-import React, {useState} from 'react';
-import {ListItem, makeStyles, withTheme, ListItemProps} from '@rneui/themed';
-import Hoverable from '../Hoverable/Hoverable';
-
-import Icon from "../Icons/TapasIcon";
-
-
-
-export type CheckBoxItemProps = {
-    value: string;
-    title: string;
-    disabled?: boolean;
-}
-
-export interface Props extends ListItemProps {
-    selected: boolean;
-    item: CheckBoxItemProps;
-    key: number | string;
-    onItemPress: (item: { value: string; title: string , disabled?: boolean }) => void;
-    disabled?: boolean;
-}
-
-const useStyle = makeStyles((theme, ...props) => {
-    //@ts-ignore
-    const { disabled } = props[0];
-    return{
-        listItemContainer: {
-            backgroundColor: theme.colors.grey5,
-            padding: 0,
-            width: '100%',
-        },
-        itemContainer: {
-            backgroundColor: theme.colors.white,
-            display: 'flex',
-            justifyContent: 'flex-start',
-            flexDirection: 'row',
-            padding:0,
-            width: '100%',
-            height: 48,
-            alignItems: 'center',
-            flex: 1,
-        },
-        selectedItem: {
-            backgroundColor: theme.colors.grey5,
-        },
-        hovered: {
-            backgroundColor: theme.colors.grey4,
-        },
-        title: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeM,
-            fontWeight: theme.fonts.weightR,
-            color: theme.colors.colorTextPrimary,
-        },
-        icon: {
-            color: theme.colors.colorTextAccent,
-            fontSize: 20,
-            marginRight: 8,
-        },
-        disabled: {
-            backgroundColor: theme.colors.white,
-        },
-        disabledTitle: {
-            color: theme.colors.disabled,
-        },
-        disabledSelectedContainer: {
-            backgroundColor: theme.colors.grey5,
-        },
-        checkedBox: {
-            color: theme.colors.colorTextPrimary
-        },
-        uncheckedBox: {
-            color: theme.colors.colorTextPrimary
-        },
-        disabledBox: {
-            color: theme.colors.disabled,
-        },
-        itemWrapper: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            flex: 1,
-            height: 48,
-            backgroundColor: 'transparent',
-            paddingHorizontal: 16,
-        },
-    }
-});
-
-
-const CheckBoxItem: React.FC<Props> = ({ item, key, onItemPress, ...props}) => {
-    const styles = useStyle(props);
-    const { selected, disabled } = props;
-    const [isHovered, setIsHovered] = useState(false);
-    // const hasSelected = (currentItem: CheckBoxItemProps) => {
-    //    return  selected.some(i =>  i.value === currentItem.value)
-    // }
-
-    const handleMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    return (
-
-        <ListItem containerStyle={[styles.listItemContainer, disabled && styles.disabled, selected && disabled && styles.disabledSelectedContainer]} style={{width: '100%'}} key={key}  >
-            <ListItem.Content style={[styles.itemContainer, selected ? styles.selectedItem : {}]}>
-                <Hoverable
-                    onHoverIn={handleMouseEnter}
-                    onHoverOut={handleMouseLeave}
-                    style={[styles.itemWrapper, isHovered && !disabled && styles.hovered]}
-                    key={key}
-                    // @ts-ignore
-                    onPress={() => {
-                        onItemPress(item);
-                    }}
-                >
-                    <Icon
-                        //@ts-ignore
-                        style={[styles.icon, selected ? styles.checkedBox : styles.uncheckedBox, disabled && styles.disabledBox]} name={selected ? 'check_box' : 'check_box_outline_blank'} size={20} />
-                    <ListItem.Title style={[styles.title, disabled && styles.disabledTitle ]}>
-                        {item.title}
-                    </ListItem.Title>
-                </Hoverable>
-            </ListItem.Content>
-        </ListItem>
-    );
-};
-
-export default withTheme(CheckBoxItem);

package/components/CheckBox/GroupCheckBox.tsx

@@ -1,87 +0,0 @@
-import React, {useEffect, useState } from "react";
-import {makeStyles, withTheme} from "@rneui/themed";
-import TapasCheckBoxItem from "./CheckBoxItem";
-import {View, Text} from "react-native";
-
-
-const useStyles = makeStyles((theme) => {
-  return {
-    groupContainer: {
-      display: "flex",
-      flexDirection: "column",
-    },
-    categoryTitle: {
-      marginTop: 8,
-      marginBottom: 8,
-      paddingHorizontal: 16,
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeS,
-      fontWeight: theme.fonts.weightR,
-      color: theme.colors.colorTextSecondary,
-    }
-  }
-})
-
-export interface item {
-  title: string;
-  value: string;
-  disabled?: boolean;
-  id: string;
-}
-
-export interface OptionItem {
-  groupName?: string;
-  items: item[]
-}
-
-export interface Props {
-  options:  OptionItem[],
-  selectedValues?: string[];
-  onChange: (value: string[]) => void;
-}
-
-const GroupCheckBox: React.FC<Props> = ({ options, onChange, selectedValues, ...props }) => {                                                                     // GroupCheckBox component
-  const styles = useStyles(props);                                                                                                                             // styles for the component
-  const [selected, setSelected] = useState(selectedValues || []);                                                                                                    // useState hook to manage the selected values
-
-    useEffect(() => {
-        setSelected(selectedValues || []);
-    }, [selectedValues])
-  const getValues = ({groupName, value, id}: {groupName?: string, value: string, id: string}) => {
-    return groupName ? `${groupName}__${value}__${id}` : `${value}__${id}`;
-
-  }
-  const handleItemPressed = (value: string, groupName: string, id: string): string[] => {
-     const currentValue = getValues({groupName, value, id});
-     let currentSelected;
-     if(selected.includes(currentValue)) {
-       currentSelected = selected.filter(item => item!== currentValue)
-     } else {
-       currentSelected = [...selected, currentValue]
-     }
-     setSelected(currentSelected);
-     return currentSelected
-  }
-
-      return options.map((option, index) => {
-        return <View style={styles.groupContainer} key={index}>
-          <Text style={styles.categoryTitle}>
-            {option.groupName}
-          </Text>
-          {
-            option.items.map((item, subIndex) => {
-              return <TapasCheckBoxItem
-                  key={`${index}_${subIndex}`}
-                  item={item}
-                  selected={selected.includes(getValues({groupName: option.groupName, value: item.value, id: item.id}))}
-                  onItemPress={(currentItem: any)=> {
-                    const selectedTemp = handleItemPressed(currentItem.value, option?.groupName || "", currentItem?.id);
-                    onChange(selectedTemp);
-                  }} />
-            })
-          }
-        </View>
-      });
-};
-
-export default withTheme(GroupCheckBox);

package/components/CircularProgress/CircularProgress.tsx

@@ -1,45 +0,0 @@
-import React, {FC} from 'react';
-import { StyleSheet, View } from 'react-native';
-import { CircularProgress, CircularProgressProps } from 'react-native-circular-progress';
-import {withTheme} from "@rneui/themed";
-
-export interface Props extends CircularProgressProps{
-    showFillText?: boolean,
-    theme?: any,
-    testID?: string,
-}
-
-const CircularProgressExample: FC<Props> = ({size, fill, width, backgroundColor,theme, tintColor, rotation, lineCap, testID}) => {
-    return (
-        <View style={styles.container} testID={testID}>
-            <CircularProgress
-                size={size}
-                fill={fill}
-                width={width}
-                backgroundColor={backgroundColor || theme?.colors.grey3}
-                tintColor={tintColor || theme?.colors.success}
-                rotation={rotation || 0}
-                lineCap={lineCap || 'round'}
-            >
-            </CircularProgress>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        display: "flex",
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        flexDirection: 'row',
-    },
-    title: {
-        fontSize: 24,
-        fontWeight: 'bold',
-    },
-    rightContent: {
-        paddingLeft: 8
-    }
-});
-
-export default withTheme(CircularProgressExample);