@beppla/tapas-ui 1.5.13 → 1.5.15

package/components/Theme/themed.d.ts

@@ -0,0 +1,160 @@
+
+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;
+        colorTextWarning: 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;
+        colorInvertBorder1: string;
+        colorErrorBorder: string;
+        colorActiveBorder: string;
+        colorNormalIcon: string;
+        colorActiveIcon: string;
+        colorDisabledIcon: string;
+        colorInvertNormalIcon: string;
+        colorInvertActiveIcon: string;
+        colorInvertDisabledIcon: string;
+        colorAccentIcon: string;
+        colorBrandIcon: string;
+        colorBrandBorder: string;
+        colorStatusAvailable: string;
+        colorStatusAvailableBg: string;
+        colorStatusOccupied: string;
+        colorStatusCleaning: string;
+        colorStatusReserved: string;
+        colorStatusCompleted: string;
+        colorStatusPromoted: string;
+        colorStatusAwaiting: string;
+        colorStatusWarning: string;
+        colorStatusError: string;
+        colorStatusErrorBg: string;
+        colorStatusPositiveBg: string;
+        colorStatusWarningBg: string;
+        colorStatusNegativeBg: string;
+        colorStatusInformativeBg: string;
+        colorStatusAccentBg: string;
+        colorToastPositive: string;
+        colorToastInformative: string;
+        colorToastNatural: string;
+        colorToastNegative: string;
+        colorDivider: string;
+        colorChartCategoryTeal: string;
+        colorChartProductBrown: string;
+        colorChartWastageGold: string;
+        colorChartWastageOrange: string;
+        colorTableBorder: 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;
+        // Figma naming aliases
+        spacingNone: number;
+        spacing2xs: number;
+        spacingXs: number;
+        spacingSm: number;
+        spacingRg: number;
+        spacingMd: number;
+        spacingLg: number;
+        spacingXl: number;
+        spacingBlg: number;
+        spacingBlgger: number;
+    }
+    export interface  Radius {
+        mini: number;
+        rounded: number;
+        full: number;
+    }
+
+    export interface Fonts {
+        fontFamily: string;
+        fontFamilyBold: string;
+        fontFamilyCN: string;
+        fontFamilyCNFallback: string;
+        h1: number;
+        h2: number;
+        h3: number;
+        h4: number;
+        figmaH1: number;
+        figmaH2: number;
+        sizeL: number;
+        sizeM: number;
+        sizeS: number;
+        sizeXs: number;
+        weightL: FontWeights;
+        weightM: FontWeights;
+        weightR: FontWeights;
+        weightS: FontWeights;
+        weightXs: FontWeights;
+        letterSpacingL: number;
+        letterSpacingM: number;
+        letterSpacingR: number;
+        letterSpacingS: number;
+        lineHeightH1: number;
+        lineHeightH2: number;
+        lineHeightH3: number;
+        lineHeightH4: number;
+        lineHeightL: number;
+        lineHeightM: number;
+        lineHeightS: number;
+        lineHeightXs: number;
+    }
+
+    export interface ElevationStyle {
+        shadowColor: string;
+        shadowOffset: { width: number; height: number };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    }
+
+    export interface Elevation {
+        e1: ElevationStyle;
+        e2: ElevationStyle;
+        e3: ElevationStyle;
+        e4: ElevationStyle;
+    }
+
+    export interface Theme {
+        radius: Radius;
+        fonts: Fonts;
+        elevation: Elevation;
+    }
+}

package/components/Theme/types.ts

@@ -0,0 +1,21 @@
+export interface ThemeOptions {
+  mode?: 'light' | 'dark';
+}
+
+export interface TapasElevationStyle {
+  shadowColor: string;
+  shadowOffset: { width: number; height: number };
+  shadowOpacity: number;
+  shadowRadius: number;
+  elevation: number;
+}
+
+export interface TapasTheme {
+  mode: string;
+  colors: Record<string, string>;
+  darkColors: Record<string, string>;
+  spacing: Record<string, number>;
+  radius: { mini: number; rounded: number; full: number };
+  fonts: Record<string, string | number>;
+  elevation: Record<string, TapasElevationStyle>;
+}

package/components/Theme/withTheme.tsx

@@ -0,0 +1,89 @@
+/**
+ * React 19 compatible withTheme HOC
+ *
+ * Replaces @rneui/themed's withTheme which uses Context.Consumer (render props pattern)
+ * that crashes in React 19. This version uses useContext hook instead.
+ */
+import React, { forwardRef, useContext } from 'react';
+import deepmerge from 'deepmerge';
+// @ts-ignore -- hoist-non-react-statics has no type declarations in this project
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { ThemeContext } from '@rneui/themed/dist/config/ThemeProvider';
+
+const isClassComponent = (Component: any) =>
+  Boolean(Component?.prototype?.isReactComponent);
+
+const combineByStyles = (propName = '') => {
+  if (propName.endsWith('Style') || propName.endsWith('style')) {
+    return (prop1: any, prop2: any) => [prop1, prop2].flat();
+  }
+  return undefined;
+};
+
+const ThemedComponent = (
+  WrappedComponent: React.ComponentType<any>,
+  themeKey?: string,
+  displayName?: string
+) => {
+  const Component = (props: any, forwardedRef: any) => {
+    const { children, ...rest } = props;
+    const context = useContext(ThemeContext);
+    const { theme, updateTheme, replaceTheme } = context as any;
+
+    if (!theme) {
+      const newProps = {
+        ...rest,
+        theme: { colors: {}, spacing: {} },
+        children,
+      };
+      return <WrappedComponent ref={forwardedRef} {...newProps} />;
+    }
+
+    const themeObj = theme as Record<string, any>;
+    const { components: comps, ...restTheme } = themeObj;
+    const themedProps =
+      typeof comps?.[themeKey as string] === 'function'
+        ? comps[themeKey as string](rest, restTheme)
+        : comps?.[themeKey as string];
+
+    const merged = deepmerge(themedProps || {}, rest as Record<string, any>, {
+      customMerge: combineByStyles,
+      clone: false,
+    }) as Record<string, any>;
+
+    const newProps = {
+      theme: restTheme,
+      updateTheme,
+      replaceTheme,
+      ...(merged as Record<string, any>),
+      children,
+    };
+
+    return <WrappedComponent ref={forwardedRef} {...newProps} />;
+  };
+
+  Component.displayName = displayName;
+  return Component;
+};
+
+export function withTheme<P = {}>(
+  WrappedComponent: React.ComponentType<P & { theme?: any }>,
+  themeKey?: string
+): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>> {
+  const name = themeKey
+    ? `Themed.${themeKey}`
+    : `Themed.${(WrappedComponent as any).displayName || (WrappedComponent as any).name || 'Component'}`;
+
+  const Component = ThemedComponent(WrappedComponent as any, themeKey, name);
+
+  if (isClassComponent(WrappedComponent)) {
+    return hoistNonReactStatics(
+      forwardRef(Component) as any,
+      WrappedComponent as any
+    ) as any;
+  }
+
+  return forwardRef(Component) as any;
+}
+
+export default withTheme;

package/components/Timeline/Timeline.tsx

@@ -0,0 +1,231 @@
+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-expect-error onPress is handled by Hoverable at runtime
+                    onPress={() => {handlePressItem(item)}}
+                    accessibilityRole="button"
+                    accessibilityLabel={item.description}
+                >
+                    <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
+          style={styles.title as Record<string, unknown>}>{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,167 @@
+import React, {  useEffect } from 'react';
+import {TouchableOpacity, View, Platform} from 'react-native';
+import {Text,  makeStyles,  withTheme} from '@rneui/themed';
+import Icon from '../Icons/TapasIcon'
+
+
+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 (<View 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>
+        </View>)
+    }
+
+    return (
+        visible && renderMessage()
+    );
+};
+
+
+export default withTheme(Toast);