@holper/react-native-holper-storybook 0.6.101 → 0.7.0

package/lib/components/Input/index.tsx

@@ -0,0 +1,62 @@
+import { Text, TextInput, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+import type { InputProps } from '../../configs/types';
+
+const Input = ({
+  variant = 'default',
+  size = 'fixed',
+  disabled,
+  leftIcon,
+  leftIconWide,
+  showLabel,
+  label,
+  count,
+  rightIcon,
+  value,
+  maxLength = 100,
+  ...props
+}: InputProps) => (
+  <View style={style.container}>
+    {showLabel && <Text style={style.label}>{label}</Text>}
+    <View style={style.inputWrapper}>
+      <TextInput
+        style={[
+          style.input,
+          style[variant],
+          style[`${size}Size`],
+          leftIcon ? style.leftIcon : {},
+          leftIconWide ? style.leftIconWide : {},
+          disabled ? style.disabled : {},
+        ]}
+        editable={!disabled}
+        allowFontScaling={false}
+        placeholderTextColor={Colors.midblue}
+        value={value}
+        maxLength={maxLength}
+        {...props}
+      />
+      {leftIcon && (
+        <View
+          style={[
+            style.leftIconContainer,
+            leftIconWide ? style.leftWideIconContainer : {},
+            disabled ? style.disabled : {},
+          ]}
+        >
+          {leftIcon}
+        </View>
+      )}
+      {rightIcon && <View style={style.rightIconContainer}>{rightIcon}</View>}
+    </View>
+    {count && (
+      <Text style={style.count}>
+        {value?.length || 0}/{maxLength}
+      </Text>
+    )}
+  </View>
+);
+
+export default Input;

package/lib/components/Input/style.ts

@@ -0,0 +1,91 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { borderRadius, Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    marginVertical: 8,
+  },
+  label: {
+    marginBottom: 4,
+    fontSize: 14,
+    fontFamily: 'poppins_regular',
+    color: Colors.darkblue,
+    fontWeight: 'bold',
+  },
+  inputWrapper: {
+    position: 'relative',
+  },
+  input: {
+    height: 50,
+    borderRadius,
+    borderWidth: 1,
+    paddingHorizontal: 20,
+    color: Colors.darkblue,
+    fontFamily: 'poppins_regular',
+    backgroundColor: Colors.white,
+    marginVertical: 6,
+  },
+  fixedSize: {
+    width: width - 60,
+  },
+  fitSize: {
+    width: '100%',
+  },
+  default: {
+    borderColor: Colors.midblue,
+  },
+  completed: {
+    borderColor: Colors.green,
+  },
+  error: {
+    borderColor: Colors.red,
+    color: Colors.red,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  leftIcon: {
+    paddingLeft: 40,
+  },
+  rightIcon: {
+    paddingRight: 40,
+  },
+  leftIconWide: {
+    paddingLeft: 70,
+  },
+  rightIconWide: {
+    paddingRight: 70,
+  },
+  rightIconContainer: {
+    position: 'absolute',
+    right: 10,
+    top: 10,
+    height: 42,
+    justifyContent: 'center',
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 10,
+    top: 10,
+    height: 42,
+    justifyContent: 'center',
+  },
+  rightWideIconContainer: {
+    paddingLeft: 2,
+    borderLeftWidth: 1,
+  },
+  leftWideIconContainer: {
+    paddingRight: 2,
+    borderRightWidth: 1,
+  },
+  count: {
+    textAlign: 'right',
+    fontSize: 12,
+    color: Colors.gray,
+    fontFamily: 'poppins_regular',
+    width: '100%',
+  },
+});

package/lib/components/InputPin/index.tsx

@@ -0,0 +1,21 @@
+import { times } from 'lodash';
+import { View } from 'react-native';
+
+import Text from '../Text';
+import style from './style';
+
+import type { InputPinProps } from '../../configs/types';
+
+const InputPin = ({ values = [] }: InputPinProps) => (
+  <View style={style.container}>
+    {times(4, (index) => (
+      <View style={style.input} key={`value-${index}`}>
+        <Text size="large" weight="semiBold">
+          {values[index]}
+        </Text>
+      </View>
+    ))}
+  </View>
+);
+
+export default InputPin;

package/lib/components/InputPin/style.ts

@@ -0,0 +1,22 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: width - 60,
+  },
+  input: {
+    borderColor: Colors.gray,
+    borderWidth: 1,
+    borderRadius: 15,
+    width: width / 6,
+    height: width / 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/lib/components/MenuItem/index.tsx

@@ -0,0 +1,25 @@
+import { Feather } from '@expo/vector-icons';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import Text from '../Text';
+import style from './style';
+
+import type { MenuItemProps } from '../../configs/types';
+
+const MenuItem = ({ icon, text, disabled, onPress, last }: MenuItemProps) => (
+  <TouchableOpacity
+    style={[style.menuItem, last ? style.last : {}, disabled ? style.disabled : {}]}
+    onPress={onPress}
+    disabled={disabled}
+  >
+    <View style={style.left}>
+      {icon}
+      <Text style={style.text}>{text}</Text>
+    </View>
+
+    <Feather name="chevron-right" size={16} color={Colors.darkblue} style={style.rightIcon} />
+  </TouchableOpacity>
+);
+
+export default MenuItem;

package/lib/components/MenuItem/style.ts

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+export default StyleSheet.create({
+  // Default MenuItem
+  menuItem: {
+    backgroundColor: Colors.white,
+    width: '100%',
+    height: 50,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.lightblue,
+  },
+  left: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  text: {
+    marginLeft: 10,
+  },
+  rightIcon: {
+    height: 20,
+    width: 20,
+    backgroundColor: Colors.lightblue,
+    borderRadius: 10,
+    paddingLeft: 3,
+    paddingTop: 2,
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  last: {
+    borderBottomColor: Colors.transparent,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/lib/components/NavigationTitle/index.tsx

@@ -0,0 +1,53 @@
+import { Ionicons } from '@expo/vector-icons';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import Text from '../Text';
+import style from './style';
+
+import type { NavigationTitleProps } from '../../configs/types';
+
+const NavigationTitle = ({
+  type = 'close',
+  title,
+  noShadow,
+  xlarge,
+  blockNavigation,
+  onPress,
+}: NavigationTitleProps) => (
+  <View
+    style={[
+      style.container,
+      type === 'close' ? style.containerClose : style.containerBack,
+      noShadow ? style.noShadow : {},
+    ]}
+  >
+    {!blockNavigation && (
+      <>
+        {type === 'back' && (
+          <TouchableOpacity onPress={onPress} style={style.buttonBack}>
+            <Ionicons name="arrow-back-outline" size={20} color={Colors.darkblue} />
+          </TouchableOpacity>
+        )}
+      </>
+    )}
+    {typeof title === 'string' ? (
+      <Text size={xlarge ? 'extra-large' : 'large'} weight="semiBold">
+        {title}
+      </Text>
+    ) : (
+      <>{title}</>
+    )}
+    {!blockNavigation && (
+      <>
+        {type === 'close' && (
+          <TouchableOpacity onPress={onPress} style={style.button}>
+            <Ionicons name="close-outline" size={24} color={Colors.darkblue} />
+          </TouchableOpacity>
+        )}
+      </>
+    )}
+  </View>
+);
+
+export default NavigationTitle;

package/lib/components/NavigationTitle/style.ts

@@ -0,0 +1,49 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 60,
+    backgroundColor: Colors.white,
+    paddingHorizontal: 20,
+    borderRadius: 10,
+    width,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.4,
+    shadowRadius: 3,
+    elevation: 5,
+    shadowColor: Colors.lightblue,
+  },
+  noShadow: {
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  containerClose: {
+    justifyContent: 'space-between',
+  },
+  containerBack: {
+    justifyContent: 'flex-start',
+  },
+  button: {
+    height: 30,
+    width: 30,
+    borderRadius: 15,
+    backgroundColor: Colors.lightblue,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonBack: {
+    height: 30,
+    width: 30,
+    borderRadius: 15,
+    marginRight: 10,
+    backgroundColor: Colors.lightblue,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/lib/components/Notification/index.tsx

@@ -0,0 +1,44 @@
+import { Ionicons } from '@expo/vector-icons';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import ImageResponsive from '../ImageResponsive';
+import Text from '../Text';
+import style from './style';
+
+import type { NotificationProps } from '../../configs/types';
+
+dayjs.extend(relativeTime);
+
+const Notification = ({
+  first,
+  active,
+  hideAvatar,
+  avatar,
+  title,
+  description,
+  date = dayjs().fromNow(),
+  onPress,
+}: NotificationProps) => (
+  <TouchableOpacity style={[style.container, first ? style.first : {}, active ? style.active : {}]} onPress={onPress}>
+    {!hideAvatar && <ImageResponsive source={avatar} avatar style={style.avatar} />}
+    <View style={style.textContainer}>
+      <View style={style.text}>
+        <View style={style.textInner}>
+          <Text weight="semiBold">{title}</Text>
+          {active && <Ionicons name="ellipse" color={Colors.green} size={12} style={style.icon} />}
+        </View>
+        <Text color="light" size="tiny" style={style.time}>
+          {dayjs(date).fromNow()}
+        </Text>
+      </View>
+      <Text color="light" size="small" ellipsizeMode="tail" numberOfLines={3}>
+        {description}
+      </Text>
+    </View>
+  </TouchableOpacity>
+);
+
+export default Notification;

package/lib/components/Notification/style.ts

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.lightblue,
+    paddingVertical: 8,
+    borderLeftWidth: 6,
+    borderLeftColor: Colors.transparent,
+    paddingHorizontal: 10,
+  },
+  first: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.lightblue,
+  },
+  active: {
+    borderLeftColor: Colors.green,
+  },
+  avatar: {
+    height: 60,
+    width: 60,
+    borderWidth: 1,
+    borderColor: Colors.lightblue,
+    marginRight: 15,
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: 'space-evenly',
+    height: 60,
+  },
+  text: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  textInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  time: {
+    alignSelf: 'flex-start',
+  },
+  icon: {
+    marginLeft: 5,
+    marginTop: 2,
+  },
+});

package/lib/components/PreventDoubleClick/index.tsx

@@ -0,0 +1,28 @@
+import type { ComponentType } from 'react';
+
+import { debounce } from 'lodash';
+import { PureComponent } from 'react';
+
+import type { withPreventDoubleClickProps } from '../../configs/types';
+
+function withPreventDoubleClick<P extends withPreventDoubleClickProps>(WrappedComponent: ComponentType<P>) {
+  class PreventDoubleClick extends PureComponent<P> {
+    debouncedOnPress = () => {
+      if (this.props.onPress) {
+        this.props.onPress();
+      }
+    };
+
+    onPress = debounce(this.debouncedOnPress, 300, { leading: true, trailing: false });
+    static displayName: string;
+
+    render() {
+      return <WrappedComponent {...this.props} onPress={this.onPress} />;
+    }
+  }
+
+  PreventDoubleClick.displayName = `withPreventDoubleClick(${WrappedComponent.displayName || WrappedComponent.name})`;
+  return PreventDoubleClick;
+}
+
+export default withPreventDoubleClick;

package/lib/components/Select/index.tsx

@@ -0,0 +1,51 @@
+import { Feather } from '@expo/vector-icons';
+import { View } from 'react-native';
+import RNPickerSelect from 'react-native-picker-select';
+
+import style from './style';
+
+import type { SelectProps } from '../../configs/types';
+
+const Select = ({
+  disabled,
+  fitToContainer,
+  items = [],
+  onValueChange,
+  placeholder,
+  value = '',
+  variant = 'default',
+}: SelectProps) => (
+  <View style={[style.container, disabled ? style.disabled : {}, fitToContainer ? style.fit : {}]}>
+    <RNPickerSelect
+      value={value}
+      onValueChange={(val) => onValueChange?.(val)}
+      disabled={disabled}
+      placeholder={{
+        label: placeholder,
+        value: '',
+        color: style.placeholderStyle.color,
+      }}
+      items={items}
+      Icon={() => <Feather name="chevron-down" size={24} style={style.iconStyle} />}
+      useNativeAndroidPickerStyle={false}
+      pickerProps={{ mode: 'dropdown', enabled: !disabled, itemStyle: style.itemStyle }}
+      style={{
+        inputIOSContainer: { pointerEvents: 'none', ...style.basicStyle, ...style[`${variant}Container`] },
+        inputAndroidContainer: { ...style.basicStyle, ...style[`${variant}Container`] },
+        inputIOS: {
+          ...style.fontStyle,
+          ...(variant === 'error' ? style.errorFontStyle : {}),
+        },
+        inputAndroid: {
+          ...style.fontStyle,
+          ...(variant === 'error' ? style.errorFontStyle : {}),
+        },
+        placeholder: style.placeholderStyle,
+        chevronUp: style.selectIcon,
+        chevronDown: style.selectIcon,
+      }}
+    />
+  </View>
+);
+
+export default Select;

package/lib/components/Select/style.ts

@@ -0,0 +1,64 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { borderRadius, Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    width: width - 60,
+    position: 'relative',
+  },
+  fit: {
+    width: '100%',
+    position: 'relative',
+  },
+  selectIcon: {
+    marginTop: 20,
+    marginRight: 15,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  basicStyle: {
+    height: 50,
+    width: '100%',
+    borderRadius,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    backgroundColor: Colors.white,
+    marginVertical: 6,
+  },
+  defaultContainer: {
+    borderColor: Colors.midblue,
+  },
+  completedContainer: {
+    borderColor: Colors.green,
+  },
+  errorContainer: {
+    borderColor: Colors.red,
+  },
+  fontStyle: {
+    flex: 1,
+    color: Colors.darkblue,
+    fontFamily: 'poppins_regular',
+  },
+  errorFontStyle: {
+    color: Colors.red,
+  },
+  placeholderStyle: {
+    fontSize: 14,
+    fontFamily: 'poppins_regular',
+    color: Colors.midblue,
+  },
+  iconStyle: {
+    marginRight: 10,
+    marginTop: 12,
+    color: Colors.darkblue,
+  },
+  itemStyle: {
+    color: Colors.darkblue,
+    fontFamily: 'poppins_regular',
+    fontSize: 16,
+  },
+});