@beppla/tapas-ui 1.2.0 → 1.2.2

package/components/SearchInput/SearchInput.tsx

@@ -1,122 +0,0 @@
-import React, { useEffect, useState, useCallback, useMemo } from "react";
-import { Platform, View, ViewProps } from "react-native";
-import { withTheme, makeStyles, useTheme } from "@rneui/themed";
-import TapasInput from "../Input/Input";
-import TapasIcon from "../Icons/TapasIcon";
-
-const inputStyle = Platform.select({
-  web: {
-    outlineStyle: "none",
-  },
-  default: {
-    borderWidth: 0,
-    height: 40,
-    width: 112,
-  },
-});
-
-export interface SearchInputProps extends ViewProps {
-  placeholder?: string;
-  value?: string;
-  height?: number;
-  width?: number;
-  onSearch?: (val?: string) => void;
-  attachSearch?: (val?: string) => void;
-}
-
-const TapasSearchInput: React.FC<SearchInputProps> = ({
-  style,
-  height = 40,
-  width = 168,
-  placeholder,
-  value,
-  onSearch,
-  attachSearch,
-  ...otherProps
-}) => {
-  const theme = useTheme();
-  const styles = useStyles();
-  const [searchValue, setSearchValue] = useState(value);
-
-  useEffect(() => {
-    setSearchValue(value);
-  }, [value]);
-
-  const handleSearch = useCallback((text?: string) => {
-    onSearch?.(text);
-    attachSearch?.(text);
-  }, [onSearch, attachSearch]);
-
-  const containerStyle = useMemo(() => [
-    styles.search, 
-    style, 
-    { width }
-  ], [styles.search, style, width]);
-
-  const inputContainerStyle = useMemo(() => [
-    styles.inputContainer,
-    { width, height, maxHeight: height, minHeight: height },
-  ], [styles.inputContainer, width, height]);
-
-  const inputInnerContainerStyle = useMemo(() => [
-    styles.inputInnerContainer,
-    { width: width - 56, height, maxHeight: height, minHeight: height },
-  ], [styles.inputInnerContainer, width, height]);
-
-  const inputStyleMemo = useMemo(() => [
-    inputStyle, 
-    { width: width - 56, height }
-  ], [width, height]);
-
-  return (
-    <View {...otherProps} style={containerStyle}>
-      <TapasInput
-        inputStyle={inputStyleMemo}
-        labelBg="transparent"
-        inputContainerStyle={inputInnerContainerStyle}
-        value={searchValue}
-        onChangeText={handleSearch}
-        containerStyle={inputContainerStyle}
-        leftIcon={
-          <TapasIcon
-            onPress={() => handleSearch(searchValue)}
-            name="search"
-            size={24}
-            color={theme.theme.colors.grey1}
-          />
-        }
-        placeholder={placeholder}
-      />
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  inputContainer: {
-    backgroundColor: theme?.colors?.grey4,
-    width: 168,
-    height: 40,
-    maxHeight: 40,
-    minHeight: 40,
-    borderRadius: 20,
-  },
-  inputInnerContainer: {
-    borderWidth: 0,
-    width: 112,
-    height: 40,
-    maxHeight: 40,
-    minHeight: 40,
-    borderBottomWidth: 0,
-  },
-  search: {
-    width: 168,
-    display: "flex",
-    overflow: "hidden",
-  },
-}));
-
-export default withTheme(TapasSearchInput);
-
-// Export aliases for compatibility
-export const SearchInput = withTheme(TapasSearchInput);
-export { TapasSearchInput };

package/components/SearchInput/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './SearchInput';
-export type { SearchInputProps } from './SearchInput';

package/components/SheetTitle/SheetTitle.tsx

@@ -1,84 +0,0 @@
-import React, { FC } from 'react';
-import {withTheme, makeStyles, Text} from "@rneui/themed";
-import {StyleProp, TouchableOpacity, View, ViewStyle} from "react-native";
-import Button from "../Button/Button";
-import Icon from '../Icons/TapasIcon';
-export interface Props {
-    title?: string,
-    icon?: React.ReactNode | string,
-    showClear?: Boolean,
-    showClose?: Boolean,
-    clearText?: string,
-    onClear?: () => void,
-    onClose?: () => void,
-    titleContainerStyle?: StyleProp<ViewStyle>,
-    titleStyle?: StyleProp<ViewStyle>,
-    clearStyle?: StyleProp<ViewStyle>,
-    closeStyle?: StyleProp<ViewStyle>,
-    testID?: string,
-}
-const useStyles = makeStyles((theme) => {
-    return {
-        titleContainer: {
-            backgroundColor: theme.colors.white,
-            height: 40,
-            width: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            paddingVertical: 8,
-            paddingLeft: 16,
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.greyOutline,
-            borderBottomStyle: 'solid'
-        },
-        title: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeL,
-            fontWeight: theme.fonts.weightL,
-            color: theme.colors.colorTextPrimary,
-            flex: 1,
-        },
-        clear: {
-            marginRight: 8,
-        },
-        close: {
-            width: 40,
-            height: 40,
-            justifyContent: 'center',
-            alignItems: 'center'
-        },
-        closeWrapper: {
-            display: 'flex',
-            flexDirection: 'row',
-        }
-    }
-});
-const SheetTitle:FC<Props>  = (props) => {
-    const {title, icon = 'close', showClose = true, showClear, onClose, clearText, clearStyle, onClear, titleContainerStyle, titleStyle, closeStyle, testID} = props;
-    const styles = useStyles(props);
-    return (
-        <View style={[styles.titleContainer, titleContainerStyle]} testID={testID}>
-            <Text style={[styles.title, titleStyle]} numberOfLines={1} ellipsizeMode="tail" >{title}</Text>
-            <View style={styles.closeWrapper}>
-                {
-                    showClear && <Button style={[styles.clear, clearStyle]} onPress={onClear} type={'clear'}>
-                        {
-                            clearText || 'Clear'
-                        }
-                    </Button>
-                }
-                {
-                    (showClose && icon) && (<TouchableOpacity style={[styles.close, closeStyle]} onPress={onClose}>
-                        {
-                            typeof icon === 'string' ? <Icon name={icon as string} size={20} /> : icon
-                        }
-                    </TouchableOpacity>)
-                }
-            </View>
-        </View>
-    )
-}
-
-export  default  withTheme(SheetTitle)

package/components/Shell/Shell.tsx

@@ -1,116 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { View, Animated } from "react-native";
-import { withTheme } from "@rneui/themed";
-import {
-  ShellDrawerProps,
-  ShellPorps,
-  ShellViewProps,
-  defaultDrawerWidth,
-} from "./types";
-import { styles } from "./styles";
-
-const Shell: React.FC<ShellPorps> & {
-  Main: React.FC<ShellViewProps>;
-  Drawer: React.FC<ShellDrawerProps>;
-} = ({
-  children,
-  border = true,
-  drawerWidth = defaultDrawerWidth,
-  style = {},
-  openDrawer = false,
-  testID,
-  ...props
-}: ShellPorps) => {
-  let mainContent = null;
-  let drawerContent = null;
-
-  const [open, setOpen] = useState<boolean>(openDrawer);
-  const animatedWidth = new Animated.Value(openDrawer ? drawerWidth : 0);
-
-  useEffect(() => {
-    setOpen(openDrawer);
-  }, [openDrawer]);
-
-  useEffect(() => {
-    Animated.spring(animatedWidth, {
-      toValue: open ? drawerWidth : 0,
-      tension: 300,
-      friction: 20,
-      useNativeDriver: false,
-    }).start();
-  }, [open, drawerWidth]);
-
-  React.Children.forEach(children, (child) => {
-    if (React.isValidElement(child)) {
-      if (child.type === Shell.Main) {
-        mainContent = child.props.children;
-      } else if (child.type === Shell.Drawer) {
-        drawerContent = child.props.children;
-      }
-    }
-  });
-
-  return (
-    <View style={{...styles.container, ...style}} testID={testID} {...props}>
-      <ShellView
-        style={{ ...styles.mainContainer, borderTopWidth: border ? 1 : 0 }}
-      >
-        {mainContent}
-      </ShellView>
-      <Animated.View style={{ ...styles.drawerContainer, width: animatedWidth }}>
-        <ShellDrawer
-          style={{
-            borderTopWidth: border ? 1 : 0,
-            borderLeftWidth: border ? 1 : 0,
-          }}
-        >
-          {drawerContent}
-        </ShellDrawer>
-      </Animated.View>
-    </View>
-  );
-};
-
-export const ShellView: React.FC<ShellViewProps> = ({
-  children,
-  style = {},
-  theme,
-}) => {
-  return (
-    <View
-      style={{
-        ...style,
-        borderTopColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderTopStyle: "solid",
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-export const ShellDrawer: React.FC<ShellDrawerProps> = ({
-  children,
-  style,
-  theme,
-}) => {
-  return (
-    <View
-      style={{
-        ...style,
-        ...styles.drawerInnerCon,
-        borderTopColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderTopStyle: "solid",
-        borderLeftColor: theme?.greyOutline ?? "rgba(0, 0, 0, 0.12)",
-        borderLeftStyle: "solid",
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-Shell.Main = withTheme(ShellView) as React.FC<ShellViewProps>;
-Shell.Drawer = withTheme(ShellDrawer) as React.FC<ShellDrawerProps>;
-
-export default Shell;

package/components/Shell/styles.ts

@@ -1,29 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-  container: {
-    display: "flex",
-    justifyContent: "flex-start",
-    flexDirection: "row",
-    flexGrow: 1,
-    overflow: "hidden",
-    height: "100%",
-    width: "100%",
-  },
-  mainContainer: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "hidden",
-  },
-  drawerContainer: {
-    display: "flex",
-    flexDirection: "column",
-    width: 150,
-  },
-  drawerInnerCon: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-  }
-});

package/components/Shell/types.ts

@@ -1,23 +0,0 @@
-export interface ShellPorps {
-    children?: React.ReactNode;
-    theme?: any;
-    border?: boolean;
-    style?: any;
-    drawerWidth?: number;
-    openDrawer?: boolean;
-    testID?: string;
-}
-
-export interface ShellViewProps {
-    children?: React.ReactNode;
-    style?: any;
-    theme?: any;
-}
-
-export interface ShellDrawerProps {
-    children?: React.ReactNode;
-    style?: any;
-    theme?:any;
-}
-
-export const defaultDrawerWidth = 150;

package/components/StatisticCard/StatisticCard.tsx

@@ -1,132 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import Text from '../Text/Text';
-import Card from '../Card/Card';
-
-export interface StatisticCardProps {
-  title: string;
-  value: string | number;
-  prefix?: string;
-  suffix?: string;
-  trend?: {
-    value: number;
-    isPositive?: boolean;
-  };
-  description?: string;
-  icon?: React.ReactNode;
-  color?: string;
-  onPress?: () => void;
-  loading?: boolean;
-  style?: any;
-}
-
-export const StatisticCard: React.FC<StatisticCardProps> = ({
-  title,
-  value,
-  prefix = '',
-  suffix = '',
-  trend,
-  description,
-  icon,
-  color = '#FF6B00',
-  onPress,
-  loading = false,
-  style,
-}) => {
-  const Container: any = onPress ? TouchableOpacity : View;
-
-  const getTrendColor = () => {
-    if (!trend) return undefined;
-    return trend.isPositive !== false ? '#00B894' : '#D63031';
-  };
-
-  const getTrendSymbol = () => {
-    if (!trend) return '';
-    return trend.isPositive !== false ? '+' : '';
-  };
-
-  return (
-    <Container onPress={onPress} disabled={!onPress} activeOpacity={0.7}>
-      <Card cardId="statistic-card" style={[styles.container, style]}>
-        <View style={styles.header}>
-          <Text style={styles.title}>{title}</Text>
-          {icon && <View style={styles.iconContainer}>{icon}</View>}
-        </View>
-
-        <View style={styles.content}>
-          {loading ? (
-            <Text style={styles.loading}>Loading...</Text>
-          ) : (
-            <>
-              <Text style={[styles.value, { color }]}>
-                {prefix}{value}{suffix}
-              </Text>
-
-              {trend && (
-                <View style={styles.trendContainer}>
-                  <Text style={[styles.trend, { color: getTrendColor() }]}>
-                    {getTrendSymbol()}{trend.value.toFixed(1)}%
-                  </Text>
-                </View>
-              )}
-
-              {description && (
-                <Text style={styles.description}>{description}</Text>
-              )}
-            </>
-          )}
-        </View>
-      </Card>
-    </Container>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    minHeight: 120,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  title: {
-    fontSize: 14,
-    color: '#7F8C8D',
-    fontWeight: '500',
-  },
-  iconContainer: {
-    width: 32,
-    height: 32,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    flex: 1,
-  },
-  value: {
-    fontSize: 32,
-    fontWeight: 'bold',
-    marginBottom: 4,
-  },
-  loading: {
-    fontSize: 16,
-    color: '#999',
-  },
-  trendContainer: {
-    marginTop: 4,
-    marginBottom: 8,
-  },
-  trend: {
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  description: {
-    fontSize: 12,
-    color: '#95A5A6',
-    marginTop: 4,
-  },
-});
-

package/components/StatisticCard/index.tsx

@@ -1,3 +0,0 @@
-export { StatisticCard } from './StatisticCard';
-export type { StatisticCardProps } from './StatisticCard';
-

package/components/Status/Status.tsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import {View, Text, StyleProp, ViewStyle} from 'react-native';
-import {withTheme, makeStyles} from "@rneui/themed";
-import defaultTheme from "../Theme/defaultTheme";
-import {capitalizeFirstLetter} from '../common';
-
-export type STATUS_TYPE = 'success' | 'error' | 'warning' | 'waiting' | 'unavailable' | 'disabled';
-
-export interface Props {
-  mode?: 'point' | 'solid';
-  tag: string;
-  type: STATUS_TYPE;
-  testID?: string;
-  styles?: StyleProp<ViewStyle>;
-}
-const useStyles = makeStyles((theme: typeof  defaultTheme) => {
-  return {
-    statusWrap: {
-      height: 24,
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-      alignItems: 'center'
-    },
-    base: {
-      width: 'auto',
-      fontFamily: theme?.fonts?.fontFamily,
-      fontSize: theme?.fonts.sizeM,
-      fontWeight: theme?.fonts.weightR,
-      paddingHorizontal: 6,
-      alignItems: 'center',
-      display: 'flex',
-      height: 24,
-      borderRadius: 4,
-      color: theme.colors.colorTextSecondary
-    },
-    unavailable: {
-      color: theme.colors.colorTextSecondary
-    },
-    disabled: {
-      backgroundColor: theme.colors.grey5
-    },
-    warning: {
-      backgroundColor: theme.colors.warning2
-    },
-    reserved: {
-      backgroundColor: theme.colors.colorStatusReserved
-    },
-    error: {
-      backgroundColor: theme.colors.colorStatusError
-    },
-    success: {
-      backgroundColor: theme.colors.colorStatusAvailable
-    },
-    waiting: {
-      borderColor: theme.colors.colorStatusAwaiting,
-      borderWidth: 1,
-      color: theme.colors.colorStatusAwaiting
-    },
-    point: {
-      borderRadius: 4,
-      height: 8,
-      width: 8
-    },
-    solid_disabled: {
-      borderColor: theme.colors.grey5,
-      borderWidth: 1,
-      color: theme.colors.grey5
-    },
-    solid_warning: {
-      borderColor: theme.colors.warning2,
-      borderWidth: 1,
-      color: theme.colors.warning2
-    },
-    solid_error: {
-      borderColor: theme.colors.colorStatusError,
-      borderWidth: 1,
-      color: theme.colors.colorStatusError
-    },
-    solid_success: {
-      borderColor: theme.colors.colorStatusAvailable,
-      borderWidth: 1,
-      color: theme.colors.colorStatusAvailable
-    },
-    solid_unavailable: {
-      color: theme.colors.colorTextSecondary,
-      borderColor: theme.colors.grey3,
-      borderWidth: 1
-    },
-    solid_waiting: {
-      color: theme.colors.colorStatusAwaiting,
-      borderColor: theme.colors.colorStatusAwaiting,
-      borderWidth: 1
-    },
-    solid_reserved: {
-      color: theme.colors.warning2,
-      borderColor: theme.colors.warning2,
-      borderWidth: 1
-    }
-  };
-});
-export const StatusTag: React.FC<Props> = ({tag, type, mode = 'point', ...props}) => {
-  const styles = useStyles(props);
-  const formattedTag = capitalizeFirstLetter(tag);
-  if (!tag) {
-    return null;
-  }
-  return (
-    <View testID={props?.testID} style={[styles.statusWrap, props.styles]}>
-      {mode === 'point' ? (
-        <>
-          <Text style={[styles.point, styles[type]]} />
-          <Text style={[styles.base]}>{formattedTag}</Text>
-        </>
-      ) : (
-        <Text style={[styles.base, styles[`solid_${type}`]]}>
-          {formattedTag}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-export default withTheme(StatusTag);