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

package/.yarnrc.yml

@@ -1,3 +0,0 @@
-yarnPath: .yarn/releases/yarn-4.5.0.cjs
-
-nodeLinker: node-modules

package/App.jsx

@@ -1,29 +0,0 @@
-import { LogBox, StyleSheet, View } from 'react-native';
-import Constants from 'expo-constants';
-import { Text } from './components';
-LogBox.ignoreAllLogs();
-
-function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-    </View>
-  );
-}
-
-let AppEntryPoint = App;
-
-if (Constants.expoConfig.extra.storybookEnabled === 'true') {
-  AppEntryPoint = require('./.storybook').default;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default AppEntryPoint;

package/app.config.js

@@ -1,77 +0,0 @@
-export default ({ config }) => ({
-  ...config,
-  android: {
-    adaptiveIcon: {
-      backgroundColor: '#FFFFFF',
-      foregroundImage: './assets/adaptive-icon.png',
-    },
-    package: 'com.psksx1.holperstorybook',
-  },
-  assetBundlePatterns: ['**/*'],
-  extra: {
-    eas: {
-      projectId: 'e8ab23b4-2f23-4e60-86da-4be317b4600e',
-    },
-    storybookEnabled: process.env.STORYBOOK_ENABLED,
-  },
-  icon: './assets/icon.png',
-  ios: {
-    bundleIdentifier: 'holper.storybook.app',
-    config: {
-      googleMapsApiKey: 'AIzaSyC7J4gQm2F8i2EakaQluAY19uYhkQLWCDk',
-    },
-    infoPlist: {
-      ITSAppUsesNonExemptEncryption: false,
-    },
-    privacyManifests: {
-      NSPrivacyAccessedAPITypes: [
-        {
-          NSPrivacyAccessedAPIType: 'NSPrivacyAccessedAPICategoryUserDefaults',
-          NSPrivacyAccessedAPITypeReasons: ['CA92.1'],
-        },
-      ],
-    },
-  },
-  name: 'Holper Storybook',
-  orientation: 'portrait',
-  owner: 'holper',
-  platforms: ['ios', 'android'],
-  plugins: [
-    'expo-font',
-    [
-      'expo-image-picker',
-      {
-        photosPermission: 'The app need access to your photos.',
-      },
-    ],
-    [
-      'expo-camera',
-      {
-        cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera',
-        microphonePermission: 'Allow $(PRODUCT_NAME) to access your microphone',
-        recordAudioAndroid: true,
-      },
-    ],
-    [
-      'expo-media-library',
-      {
-        isAccessMediaLocationEnabled: true,
-        photosPermission: 'Allow $(PRODUCT_NAME) to access your photos.',
-        savePhotosPermission: 'Allow $(PRODUCT_NAME) to save photos.',
-      },
-    ],
-  ],
-  slug: 'holper-storybook',
-  splash: {
-    backgroundColor: '#ffffff',
-    image: './assets/splash.png',
-    resizeMode: 'contain',
-  },
-  updates: {
-    fallbackToCacheTimeout: 0,
-  },
-  version: '1.0.0',
-  web: {
-    favicon: './assets/favicon.png',
-  },
-});

package/babel.config.js

@@ -1,7 +0,0 @@
-module.exports = (api) => {
-  api.cache(true);
-  return {
-    plugins: ['@babel/plugin-transform-class-static-block'],
-    presets: ['babel-preset-expo'],
-  };
-};

package/build.sh

@@ -1,11 +0,0 @@
-#!/usr/bin/env bash
-
-rm -rf ./lib
-mkdir lib
-mkdir lib/assets
-cp -r ./components/. ./lib/components
-cp -r ./configs/. ./lib/configs/
-cp -r ./hooks/. ./lib/hooks/
-cp -r ./assets/fonts/. ./lib/assets/fonts
-cp ./index.js ./lib
-npm publish

package/components/Button/index.tsx

@@ -1,66 +0,0 @@
-import { useEffect, useState } from 'react';
-import { ActivityIndicator, TouchableOpacity } from 'react-native';
-
-import { Colors } from '../../configs/constants';
-import withPreventDoubleClick from './../PreventDoubleClick';
-import style from './style';
-
-import type { ButtonProps } from '../../configs/types';
-
-const Button = ({
-  onPress,
-  disabled,
-  isLoading,
-  bordered,
-  variant = 'primary',
-  size = 'medium',
-  noShadow,
-  style: customStyle,
-  debounceDelay = 0,
-  children,
-}: ButtonProps) => {
-  const [isDisabled, setIsDisabled] = useState<boolean>(disabled || false);
-
-  useEffect(() => setIsDisabled(disabled || false), [disabled]);
-
-  const getSpinnerColor = () => {
-    switch (variant) {
-      case 'primary':
-      case 'inverted':
-      case 'error':
-        return Colors.white;
-      default:
-        return Colors.darkblue;
-    }
-  };
-
-  const handleTap = () => {
-    if (onPress) {
-      onPress();
-    }
-    setIsDisabled(true);
-    setTimeout(() => {
-      setIsDisabled(false);
-    }, debounceDelay);
-  };
-
-  return (
-    <TouchableOpacity
-      style={[
-        style.button,
-        style[variant],
-        style[size],
-        bordered ? style.bordered : {},
-        isDisabled ? style.disabled : {},
-        noShadow ? style.noShadow : {},
-        customStyle,
-      ]}
-      disabled={isLoading || isDisabled}
-      onPress={handleTap}
-    >
-      {isLoading ? <ActivityIndicator color={getSpinnerColor()} size={28} /> : children}
-    </TouchableOpacity>
-  );
-};
-
-export default withPreventDoubleClick(Button);

package/components/Button/style.ts

@@ -1,111 +0,0 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
-import { borderRadius, Colors } from '../../configs/constants';
-
-const { width } = Dimensions.get('window');
-
-export default StyleSheet.create({
-  // Default button shape
-  button: {
-    height: 50,
-    marginVertical: 8,
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    borderRadius,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.4,
-    shadowRadius: 3,
-    elevation: 5,
-  },
-  // Variants
-  primary: {
-    borderColor: Colors.darkgray,
-    backgroundColor: Colors.darkgray,
-    shadowColor: Colors.darkgray,
-  },
-  secondary: {
-    borderColor: Colors.lightblue,
-    backgroundColor: Colors.white,
-    shadowColor: Colors.lightblue,
-  },
-  dim: {
-    borderColor: Colors.dimgray,
-    backgroundColor: Colors.dimgray,
-    shadowColor: Colors.dimgray,
-  },
-  light: {
-    borderColor: Colors.gray,
-    backgroundColor: Colors.gray,
-    shadowColor: Colors.gray,
-  },
-  brightblue: {
-    borderColor: Colors.brightblue,
-    backgroundColor: Colors.brightblue,
-    shadowColor: Colors.brightblue,
-  },
-  lightgreen: {
-    borderColor: Colors.lightgreen,
-    backgroundColor: Colors.lightgreen,
-    shadowColor: Colors.lightgreen,
-  },
-  inverted: {
-    borderColor: Colors.violet,
-    backgroundColor: Colors.violet,
-    shadowColor: Colors.violet,
-  },
-  darkyellow: {
-    borderColor: Colors.darkyellow,
-    backgroundColor: Colors.darkyellow,
-    shadowColor: Colors.darkyellow,
-  },
-  brightviolet: {
-    borderColor: Colors.brightviolet,
-    backgroundColor: Colors.brightviolet,
-    shadowColor: Colors.brightviolet,
-  },
-  electricblue: {
-    borderColor: Colors.electricblue,
-    backgroundColor: Colors.electricblue,
-    shadowColor: Colors.electricblue,
-  },
-  error: {
-    borderColor: Colors.red,
-    backgroundColor: Colors.red,
-    shadowColor: Colors.red,
-  },
-  // Bordered
-  bordered: {
-    shadowColor: Colors.transparent,
-    backgroundColor: Colors.white,
-    elevation: 0,
-  },
-  // Sizes
-  tiny: {
-    width: width * 0.25,
-  },
-  small: {
-    width: width * 0.35,
-  },
-  medium: {
-    width: width * 0.6,
-  },
-  fit: {
-    width: '100%',
-  },
-  icon: {
-    width: 55,
-  },
-  // Disabled
-  disabled: {
-    opacity: 0.5,
-  },
-  // NoShadow
-  noShadow: {
-    shadowColor: Colors.transparent,
-    elevation: 0,
-  },
-});

package/components/Card/index.tsx

@@ -1,33 +0,0 @@
-import type { TouchableOpacityProps, ViewProps } from 'react-native';
-
-import { TouchableOpacity, View } from 'react-native';
-
-import withPreventDoubleClick from '../PreventDoubleClick';
-import style from './style';
-
-import type { CardProps } from '../../configs/types';
-
-const TappedTouchableOpacity = withPreventDoubleClick(TouchableOpacity);
-
-const Card = (
-  { children, isButton, onPress, noShadow, style: customStyle }: CardProps,
-  ...props: (TouchableOpacityProps & ViewProps)[]
-) => (
-  <>
-    {isButton ? (
-      <TappedTouchableOpacity
-        onPress={onPress}
-        style={[style.card, customStyle, noShadow ? style.noShadow : {}]}
-        {...props}
-      >
-        {children}
-      </TappedTouchableOpacity>
-    ) : (
-      <View style={[style.card, customStyle, noShadow ? style.noShadow : {}]} {...props}>
-        {children}
-      </View>
-    )}
-  </>
-);
-
-export default Card;

package/components/Card/style.ts

@@ -1,34 +0,0 @@
-import { Dimensions, Platform, StyleSheet } from 'react-native';
-
-import { borderRadius, Colors } from '../../configs/constants';
-
-const { width } = Dimensions.get('window');
-const isAndroid = Platform.OS === 'android';
-
-export default StyleSheet.create({
-  card: {
-    margin: 8,
-    minHeight: 50,
-    width: width - 60,
-    backgroundColor: Colors.white,
-    minWidth: 220,
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    borderRadius,
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'center',
-    borderColor: isAndroid ? Colors.transparent : Colors.lightblue,
-    borderWidth: 1,
-    shadowOffset: { width: 2, height: 4 },
-    shadowOpacity: 0.4,
-    shadowRadius: 3,
-    shadowColor: Colors.gray,
-    elevation: 5,
-  },
-  noShadow: {
-    shadowColor: Colors.transparent,
-    elevation: 0,
-    borderColor: Colors.lightblue,
-  },
-});

package/components/ConfirmationModal/index.tsx

@@ -1,104 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import {
-  Keyboard,
-  KeyboardAvoidingView,
-  Modal,
-  Platform,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-
-import { Colors } from '../../configs/constants';
-import Button from '../Button';
-import Text from '../Text';
-import style from './style';
-
-import type { ConfirmationModalProps } from '../../configs/types';
-
-const ConfirmationModal = ({
-  visible,
-  title,
-  confirmText,
-  cancelText,
-  onConfirm,
-  onCancel,
-  closeButton,
-  onClose,
-  alertMode,
-  infoMode,
-  inverted,
-  isPrime,
-  children,
-}: ConfirmationModalProps) => (
-  <Modal animationType="slide" transparent visible={visible} onRequestClose={() => {}}>
-    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
-        <View style={style.container}>
-          <View style={style.content}>
-            <View style={alertMode && !closeButton ? {} : style.title}>
-              <Text
-                style={alertMode && !closeButton ? {} : style.titleText}
-                size="large"
-                align={alertMode && !closeButton ? 'center' : 'left'}
-                weight="semiBold"
-                numberOfLines={1}
-              >
-                {title}
-              </Text>
-              {(!alertMode || closeButton) && (
-                <TouchableOpacity
-                  onPress={() => {
-                    if (onClose) {
-                      onClose();
-                    } else {
-                      if (onCancel) {
-                        onCancel();
-                      }
-                    }
-                  }}
-                  style={style.button}
-                >
-                  <Ionicons name="close-outline" size={24} color={Colors.darkblue} />
-                </TouchableOpacity>
-              )}
-            </View>
-
-            <View style={infoMode ? style.bodyInfo : style.body}>{children}</View>
-
-            {!infoMode && (
-              <>
-                {alertMode ? (
-                  <Button size="fit" variant={inverted ? 'inverted' : 'primary'} onPress={onConfirm}>
-                    <Text size="large" color={isPrime ? 'lightgold' : 'white'}>
-                      {confirmText}
-                    </Text>
-                  </Button>
-                ) : (
-                  <View style={style.buttons}>
-                    {onCancel && (
-                      <Button size="small" bordered variant={inverted ? 'inverted' : 'primary'} onPress={onCancel}>
-                        <Text size="large">{cancelText}</Text>
-                      </Button>
-                    )}
-                    <Button
-                      variant={inverted ? 'inverted' : 'primary'}
-                      size={onCancel ? 'small' : 'fit'}
-                      onPress={onConfirm}
-                    >
-                      <Text size="large" color={isPrime ? 'lightgold' : 'white'}>
-                        {confirmText}
-                      </Text>
-                    </Button>
-                  </View>
-                )}
-              </>
-            )}
-          </View>
-        </View>
-      </TouchableWithoutFeedback>
-    </KeyboardAvoidingView>
-  </Modal>
-);
-
-export default ConfirmationModal;

package/components/ConfirmationModal/style.tsx

@@ -1,53 +0,0 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
-import { Colors } from '../../configs/constants';
-
-const { width, height } = Dimensions.get('window');
-
-export default StyleSheet.create({
-  container: {
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    height,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    width: width - 60,
-    backgroundColor: Colors.white,
-    padding: 20,
-    borderRadius: 20,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.4,
-    shadowRadius: 3,
-    elevation: 5,
-    shadowColor: Colors.gray,
-  },
-  title: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  titleText: {
-    width: '90%',
-  },
-  body: {
-    marginTop: 20,
-    marginBottom: 35,
-  },
-  bodyInfo: {
-    marginTop: 20,
-  },
-  buttons: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  button: {
-    height: 30,
-    width: 30,
-    borderRadius: 15,
-    backgroundColor: Colors.lightblue,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/components/Container/index.tsx

@@ -1,33 +0,0 @@
-import { Keyboard, ScrollView, TouchableWithoutFeedback, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-import style from './style';
-
-import type { ContainerProps } from '../../configs/types';
-
-const Container = ({
-  fullScreen = true,
-  enableScroll,
-  style: customStyle,
-  scrollStyle,
-  children,
-  ...props
-}: ContainerProps) => (
-  <SafeAreaView {...props} style={[fullScreen ? style.fullScreen : {}, customStyle]}>
-    {enableScroll ? (
-      <ScrollView
-        contentContainerStyle={scrollStyle}
-        showsVerticalScrollIndicator={false}
-        keyboardDismissMode="on-drag"
-      >
-        {children}
-      </ScrollView>
-    ) : (
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <View style={customStyle}>{children}</View>
-      </TouchableWithoutFeedback>
-    )}
-  </SafeAreaView>
-);
-
-export default Container;

package/components/Container/style.ts

@@ -1,13 +0,0 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
-import { Colors } from '../../configs/constants';
-
-const { width } = Dimensions.get('window');
-
-export default StyleSheet.create({
-  fullScreen: {
-    flex: 1,
-    width,
-    backgroundColor: Colors.white,
-  },
-});

package/components/CustomChatView/index.tsx

@@ -1,65 +0,0 @@
-import { Alert, Linking, Platform, TouchableOpacity } from 'react-native';
-import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
-
-import { MapStyle } from '../../configs/constants';
-import styles from './style';
-
-import type { CustomChatViewProps } from '../../configs/types';
-
-const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }: CustomChatViewProps) => {
-  const openMapAsync = async () => {
-    const { location } = currentMessage || {};
-
-    if (!location) {
-      Alert.alert('Location data is missing.');
-      return null;
-    }
-
-    const mapScheme = Platform.select({
-      ios: 'maps:0,0?q=',
-      android: 'geo:0,0?q=',
-    });
-    const latLng = `${location.latitude},${location.longitude}`;
-    const label = `${currentMessage?.user?.name ?? ''}`;
-
-    const url = Platform.select({
-      ios: `${mapScheme}${label}@${latLng}`,
-      android: `${mapScheme}${latLng}(${label})`,
-    }) as string;
-
-    try {
-      const supported = await Linking.canOpenURL(url);
-      if (supported) {
-        return Linking.openURL(url);
-      }
-      Alert.alert('Opening the map is not supported.');
-    } catch ({ message }) {
-      Alert.alert(message);
-    }
-    return null;
-  };
-
-  if (currentMessage?.location) {
-    return (
-      <TouchableOpacity style={[styles.container, containerStyle]} onPress={openMapAsync}>
-        <MapView
-          style={[styles.mapView, mapViewStyle]}
-          region={{
-            latitude: currentMessage.location.latitude,
-            longitude: currentMessage.location.longitude,
-            latitudeDelta: currentMessage.location.latitudeDelta || 0.0922,
-            longitudeDelta: currentMessage.location.longitudeDelta || 0.0421,
-          }}
-          customMapStyle={MapStyle}
-          provider={PROVIDER_GOOGLE}
-          scrollEnabled={false}
-          zoomEnabled={false}
-        />
-      </TouchableOpacity>
-    );
-  }
-
-  return null;
-};
-
-export default CustomChatView;

package/components/CustomChatView/style.ts

@@ -1,10 +0,0 @@
-export default {
-  container: {},
-  mapView: {
-    flexDirection: 'column-reverse',
-    width: 250,
-    height: 150,
-    borderRadius: 13,
-    margin: 3,
-  },
-};