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

package/components/Input/style.ts

@@ -1,91 +0,0 @@
-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/components/InputPin/index.tsx

@@ -1,21 +0,0 @@
-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/components/InputPin/style.ts

@@ -1,22 +0,0 @@
-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/components/MenuItem/index.tsx

@@ -1,25 +0,0 @@
-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/components/MenuItem/style.ts

@@ -1,44 +0,0 @@
-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/components/NavigationTitle/index.tsx

@@ -1,53 +0,0 @@
-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/components/NavigationTitle/style.ts

@@ -1,49 +0,0 @@
-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/components/Notification/index.tsx

@@ -1,44 +0,0 @@
-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/components/Notification/style.ts

@@ -1,50 +0,0 @@
-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/components/PreventDoubleClick/index.tsx

@@ -1,28 +0,0 @@
-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/components/Select/index.tsx

@@ -1,51 +0,0 @@
-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/components/Select/style.ts

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