@beppla/tapas-ui 1.1.1 → 1.1.2

package/components/SearchInput/SearchInput.tsx

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

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

package/components/SheetTitle/SheetTitle.tsx

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

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

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

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

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

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

package/components/Status/Status.tsx

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