@beppla/tapas-ui 1.0.45 → 1.0.47

package/components/Theme/themed.d.ts

@@ -0,0 +1,102 @@
+
+import '@rneui/themed';
+
+type FontWeights = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined
+
+declare module '@rneui/themed' {
+    export interface Colors {
+        bg1: string;
+        colorTextPrimary: string;
+        colorTextSecondary: string;
+        colorTextPlaceholder: string;
+        colorTextInvert:string;
+        colorTextInvert1: string;
+        colorTextInvert2: string;
+        colorTextBrand: string;
+        colorTextError: string;
+        colorTextAccent: string;
+        colorSurface: string;
+        colorSurface1: string;
+        colorSurface2: string;
+        colorSurface3: string;
+        colorSurface4: string;
+        colorSurface5: string;
+        colorSurface6: string;
+        colorSurface7: string;
+        colorSurface8: string;
+        colorSurface9: string;
+        colorSurface10: string;
+        colorSurface11: string;
+        colorPrimaryBorder: string;
+        colorBorder1: string;
+        colorBorder2: string;
+        colorInvertBorder: string;
+        colorInvert1Border: string;
+        colorErrorBorder: string;
+        colorActiveBorder: string;
+        colorNormalIcon: string;
+        colorActiveIcon: string;
+        colorDisabledIcon: string;
+        colorInvertNormalIcon: string;
+        colorInvertActiveIcon: string;
+        colorInvertDisabledIcon: string;
+        colorAccentIcon:string;
+        colorStatusAvailable: string;
+        colorStatusOccupied: string;
+        colorStatusCleaning: string;
+        colorStatusReserved: string;
+        colorStatusCompleted: string;
+        colorStatusPromoted: string;
+        colorStatusAwaiting: string;
+        colorStatusWarning: string;
+        colorStatusError: string;
+        colorToastPositive: string;
+        colorToastInformative: string;
+        colorToastNatural:string;
+        colorToastNegative: string;
+        divider1: string;
+        divider2: string;
+        info: string;
+    }
+    export interface ThemeSpacing {
+        tp2xs: number;
+        tpXs: number;
+        tpSm: number;
+        tpRg: number;
+        tpMd: number;
+        tpLg: number;
+        tpXl: number;
+        tp2xl: number;
+        tp3xl: number;
+    }
+    export interface  Radius {
+        mini: number;
+        rounded: number;
+        full: number;
+    }
+
+    export interface Fonts {
+        h1: number;
+        h2: number;
+        h3: number;
+        h4: number;
+        sizeL: number;
+        sizeM: number;
+        sizeS: number;
+        sizeXs: number;
+        fontFamily: string;
+        weightL: FontWeights;
+        weightM: FontWeights;
+        weightR: FontWeights;
+        weightS: FontWeights;
+        weightXs: FontWeights;
+        letterSpacingL: number;
+        letterSpacingM: number;
+        letterSpacingR: number;
+        letterSpacingS: number;
+    }
+    export interface Theme {
+        radius: Radius;
+        fonts: Fonts;
+    }
+}

package/components/Timeline/Timeline.tsx

@@ -0,0 +1,230 @@
+import React, {FC, useState, useRef} from 'react';
+import {makeStyles, withTheme, Text as RNText} from "@rneui/themed";
+import {ScrollView, StyleProp,  View, ViewStyle} from "react-native";
+import TapasIcon from "../Icons/TapasIcon";
+import Hoverable from '../Hoverable/Hoverable';
+
+type Item  = {
+    id: string,
+    time: string;
+    description: string;
+    selected?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+}
+export interface IData {
+    title: string;
+    items: Item[]
+}
+export interface Props {
+    data: IData;
+    itemContainerStyle: StyleProp<ViewStyle>;
+    onPress?: (item: Item) => void;
+    selected?: boolean;
+    disabled?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+const useStyles = makeStyles((theme) => {
+
+    return {
+        container: {
+            width: 192,
+        },
+        itemContainer: {
+            minHeight: 100
+        },
+        title: {
+            fontSize: theme.fonts.sizeL,
+            fontWeight: theme.fonts.weightL,
+            color: '#000',
+            // textOverflow: 'ellipsis', // Not supported in React Native
+            // whiteSpace: 'nowrap', // Not supported in React Native
+            justifyContent: "flex-start",
+            alignItems: "center",
+            display: "flex",
+            lineHeight: 'normal',
+            flexGrow: 1,
+            marginBottom: 16,
+        },
+        titleContainer: {
+            display: 'flex',
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            alignItems: "center",
+        },
+        descriptionContainer: {
+            display: 'flex',
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            alignItems: "center",
+        },
+
+        pointContainer: {
+            width: 20,
+            height: 20,
+            display: 'flex',
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center"
+        },
+        lineContainer: {
+            width: 20,
+            display: 'flex',
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        point: {
+            width: 6,
+            height: 6,
+            borderRadius: 6,
+            borderColor: theme.colors.grey2,
+            borderWidth: 1,
+        },
+        pointError: {
+            borderColor: theme.colors.error,
+            backgroundColor: theme.colors.error,
+        },
+        pointDisabled: {
+            borderColor: theme.colors.grey4,
+        },
+        pointSelected: {
+            borderColor: theme.colors.colorTextBrand,
+            backgroundColor: theme.colors.colorTextBrand,
+        },
+        line: {
+            minHeight: 64,
+            borderLeftWidth: 1,
+            borderColor: theme.colors.grey2,
+        },
+        lineError: {
+            borderColor: theme.colors.error,
+        },
+        lineDisabled: {
+            borderColor: theme.colors.grey4,
+            borderStyle: "dashed",
+        },
+        lineSelected: {
+            borderColor: theme.colors.colorTextBrand,
+        },
+        itemTitle:{
+            fontSize: theme.fonts.sizeS,
+            fontWeight: theme.fonts.weightL,
+            color: theme.colors.secondary,
+            // textOverflow: 'ellipsis', // Not supported in React Native
+            // whiteSpace: 'nowrap', // Not supported in React Native
+            justifyContent: "flex-start",
+            alignItems: "center",
+            display: "flex",
+            lineHeight: 'normal',
+            flexGrow: 1,
+        },
+        titleError: {
+            color: theme.colors.error,
+        },
+        titleDisabled: {
+            color: theme.colors.grey2,
+        },
+        titleSelected: {
+            color: theme.colors.colorTextBrand,
+        },
+        description: {
+            fontSize: theme.fonts.sizeM,
+            fontWeight: theme.fonts.weightR,
+            color: theme.colors.secondary,
+            // textOverflow: 'ellipsis', // Not supported in React Native
+            // whiteSpace: 'nowrap', // Not supported in React Native
+            justifyContent: "flex-start",
+            alignItems: "center",
+            display: "flex",
+            lineHeight: 'normal',
+            flexGrow: 1,
+            height: 40,
+            borderRadius: theme.radius.rounded,
+            paddingHorizontal: 12,
+        },
+        descriptionError: {
+            color: theme.colors.error,
+        },
+        descriptionDisabled: {
+            color: theme.colors.grey2,
+        },
+        descriptionSelected: {
+            color: theme.colors.primary,
+        },
+        error: {
+            color: theme.colors.error,
+            marginRight: 4,
+        },
+        itemHover: {
+            backgroundColor: theme.colors.grey4,
+        }
+    }
+});
+
+
+const Timeline: FC<Props> = ({containerStyle,data, selected = false, disabled,onPress, testID,  ...props}) => {
+    const styles = useStyles(props);
+    const [isHovered, setIsHovered] = useState(false);
+    const hoverItemIndex = useRef('')
+
+    const handleMouseEnter = (index: number) => {
+        setIsHovered(true);
+        hoverItemIndex.current = `${index}`;
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+        hoverItemIndex.current = '';
+    };
+  const handlePressItem = (item: Item) => {
+        onPress && onPress(item);
+  }
+    const renderItem = (item: Item, index: number) => {
+        return <View key={index}>
+            <View style={styles.titleContainer}>
+                <View style={styles.pointContainer}>
+                    <View style={[styles.point, item.disabled && styles.pointDisabled, item.selected && styles.pointSelected, item.error && styles.pointError]} />
+                </View>
+                {
+                    item.error &&  <TapasIcon name={'error'} size={20} style={styles.error} />
+                }
+                <RNText style={[styles.itemTitle, item.disabled && styles.titleDisabled, item.selected && styles.titleSelected, item.error && styles.titleError]}>
+                    {item.time}
+                </RNText>
+            </View>
+                <Hoverable
+                    onHoverIn={() => {
+                        handleMouseEnter(index)
+                    }}
+                    onHoverOut={handleMouseLeave}
+                    style={styles.descriptionContainer}
+                    //@ts-ignore
+                    onPress={() => {handlePressItem(item)}}
+                >
+                    <View style={styles.lineContainer}>
+                        <View style={[styles.line, item.disabled && styles.lineDisabled, item.selected  && styles.lineSelected, item.error && styles.lineError]}></View>
+                    </View>
+                    <RNText style={[styles.description, item.disabled && styles.descriptionDisabled, item.selected && styles.descriptionSelected, item.error && styles.descriptionError, (isHovered && +hoverItemIndex.current === index)  && styles.itemHover]}>
+                        {item.description}
+                    </RNText>
+                </Hoverable>
+        </View>
+    }
+
+  return <View style={[styles.container, containerStyle]} testID={testID}>
+      <RNText
+          //@ts-ignore
+          style={styles.title}>{data?.title}</RNText>
+      <ScrollView style={[styles.itemContainer, props.itemContainerStyle]}>
+          {
+              data?.items.map((item, index) => {
+                  return renderItem(item, index);
+              })
+          }
+      </ScrollView>
+  </View>
+}
+
+export default withTheme(Timeline);

package/components/Toast/Toast.tsx

@@ -0,0 +1,168 @@
+import React, {  useEffect } from 'react';
+import {TouchableOpacity, View, Platform} from 'react-native';
+import {Text,  makeStyles,  withTheme} from '@rneui/themed';
+import Icon from '../Icons/TapasIcon'
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+
+const isWeb = Platform.OS === 'web';
+
+const useStyles = makeStyles((theme) => {
+    return {
+        toastWrapper: {
+            zIndex: 99999,
+            height: 40,
+            textAlign: 'center',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center'
+        },
+        toastContainer: {
+            fontFamily: theme.fonts.fontFamily,
+            flexDirection: 'row',
+            alignItems: 'center',
+            height: 40,
+            backgroundColor: theme.colors.primary,
+            paddingVertical: 8,
+            paddingRight: 16,
+            paddingLeft: 12,
+            borderRadius: theme.radius.rounded,
+            maxWidth: isWeb ? 450 : 375,
+            minWidth: 168,
+        },
+        hasActionText: {
+            flex: 1,
+        },
+        messageContainer: {
+            flexGrow: 1,
+            flexShrink: 1,
+            flexBasis: 'auto',
+            justifyContent: 'center',
+            maxWidth: '100%',
+        },
+        messageText: {
+            fontSize: 14,
+            color: theme.colors.white,
+            // whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            // textOverflow: 'ellipsis',
+            maxWidth: '100%',
+        },
+        discText: {
+            fontSize: 12,
+            color: theme.colors.colorInvertNormalIcon,
+            // whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            // textOverflow: 'ellipsis',
+            maxWidth: '100%',
+        },
+        actionText: {
+            fontSize: 14,
+            color: theme.colors.white,
+            paddingHorizontal: 12,
+        },
+        iconContainer: {
+            paddingRight: 8,
+        },
+        Success: {
+            color: theme.colors.success,
+        },
+        Error: {
+            color: theme.colors.error,
+        },
+        Warning: {
+            color: theme.colors.warning,
+        },
+        Info: {
+            color: theme.colors.info,
+        },
+    }
+});
+
+export interface Props{
+    visible: boolean;
+    message: string;
+    duration?: number;
+    actionText?: string;
+    description?: string;
+    type?: 'Error' | 'Warning' |'Success' | 'Info';
+    onActionPress?: () => void;
+    hideToast?: () => void;
+    style?: any;
+}
+
+enum ToastType {
+    Success = 'check_circle_filled',
+    Error = 'warning_filled',
+    Warning = 'warning_filled',
+    Info = 'warning_filled',
+}
+
+export const Toast: React.FC<Props> = ({
+                                           visible = false,
+                                           message,
+                                           duration = 2000,
+                                           type = 'Info',
+                                           actionText,
+                                           onActionPress,
+                                           description,
+                                           hideToast,
+                                           style,
+                                           ...props
+                                       }) => {
+    const styles = useStyles(props);
+    useEffect((): any => {
+        if (visible) {
+            const timer = setTimeout(() => {
+                hideToast && hideToast();
+            }, duration);
+            return () => {
+                clearTimeout(timer)
+            };
+        }
+    }, [visible]);
+
+    const renderMessage = () => {
+        return (<SafeAreaProvider style={[styles.toastWrapper, style ]}>
+            <View style={[styles.toastContainer, actionText ? styles.hasActionText : {} ]} testID="toast">
+                <View style={styles.iconContainer}>
+                    <Icon style={styles[type]}  name={ToastType[type]} size={24} />
+                </View>
+                {
+                    (message || description) && (
+                        <View style={styles.messageContainer}>
+                            {
+                                message && (
+                                    <Text style={styles.messageText}>
+                                        {message}
+                                    </Text>
+                                )
+                            }
+                            {
+                                description && (
+                                    <Text style={styles.discText}>
+                                        {description}
+                                    </Text>
+                                )
+                            }
+                        </View>
+                    )
+                }
+                {
+                    actionText && (
+                        <TouchableOpacity onPress={onActionPress}>
+                            <Text style={styles.actionText}>{actionText}</Text>
+                        </TouchableOpacity>
+                    )
+                }
+            </View>
+        </SafeAreaProvider>)
+    }
+
+    return (
+        visible && renderMessage()
+    );
+};
+
+
+export default withTheme(Toast);