@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/Theme/themed.d.ts

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

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

@@ -1,89 +0,0 @@
-/**
- * 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

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

@@ -1,170 +0,0 @@
-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;
-    /** Test ID for E2E testing (default: "toast") */
-    testID?: string;
-}
-
-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,
-                                           testID,
-                                           ...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={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);