@beppla/tapas-ui 1.4.32 → 1.4.34

package/components/Card/Card.tsx

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

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

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

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

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