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

package/.yarnrc.yml

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

package/App.jsx

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

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Chromatic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/{readme.md → README.md}

@@ -8,31 +8,29 @@ To: `"main": "lib/index.js",`
 
 And revert the change after publish.
 
-
-
 #### Publish the library for npm
 
 Run the command: `npm publish` this will build the lib before publishing.
 
 #### How to set up
+
 `import { asyncLoadFont } from  from 'react-native-holper-storybook';` and call the `asyncLoadFont` function in your app entry point.
 
 ```
-import React, { useEffect, useState } from 'react';
-import { asyncLoadFont } from 'react-native-holper-storybook';
+import { useEffect, useState } from 'react';
+import { useLoadFonts } from 'react-native-holper-storybook';
 
 export default function App() {
-  const [fontsLoaded, setFontsLoaded] = useState(false);
+  const { loaded, error } = useLoadFonts();
 
   useEffect(() => {
-    (async function() {
-      await asyncLoadFont;
-      setFontsLoaded(true);
-    })();
-  }, []);
-
-  if (!fontsLoaded) {
-    return <View/>;
+    if (loaded || error) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded, error]);
+
+  if (!loaded && !error) {
+    return null;
   }
 
   return (
@@ -41,25 +39,26 @@ export default function App() {
 }
 ```
 
-#### Using FlashMessage
-This library uses https://www.npmjs.com/package/react-native-flash-message, in order to use it, include `<FlashMessage/>` in you root component.
+#### Using Toast
+
+This library uses https://github.com/gunnartorfis/sonner-native, in order to use it, include `<Toaster />` in you root component.
 
 ```
 import React from 'react';
 import { View } from 'react-native';
-import { FlashMessage } from 'react-native-holper-storybook';
+import { Toaster } from 'react-native-holper-storybook';
 
 export default function App() {
   return (
     <View>
         ...
-        <FlashMessage />
+        <Toaster />
     </View>
   );
 }
 ```
 
-###### Sending a messages
+#### Sending a messages
 
 ```
 import React from 'react';
@@ -79,4 +78,4 @@ export default MyComponent = () => {
     </View>
   );
 }
-```
+```

package/app.config.js

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

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

package/build.sh

@@ -0,0 +1,11 @@
+#!/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

@@ -0,0 +1,66 @@
+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/{lib/components/Button/style.js → components/Button/style.ts}

@@ -1,9 +1,10 @@
-import { Dimensions } from 'react-native';
-import { Colors, borderRadius } from '../../configs/constants';
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { borderRadius, Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   // Default button shape
   button: {
     height: 50,
@@ -37,9 +38,9 @@ export default {
     shadowColor: Colors.dimgray,
   },
   light: {
-    borderColor: Colors.lightblue,
-    backgroundColor: Colors.lightblue,
-    shadowColor: Colors.lightblue,
+    borderColor: Colors.gray,
+    backgroundColor: Colors.gray,
+    shadowColor: Colors.gray,
   },
   brightblue: {
     borderColor: Colors.brightblue,
@@ -107,4 +108,4 @@ export default {
     shadowColor: Colors.transparent,
     elevation: 0,
   },
-};
+});

package/components/Card/index.tsx

@@ -0,0 +1,33 @@
+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/{lib/components/Card/style.js → components/Card/style.ts}

@@ -1,10 +1,11 @@
-import { Dimensions, Platform } from 'react-native';
-import { Colors, borderRadius } from '../../configs/constants';
+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 {
+export default StyleSheet.create({
   card: {
     margin: 8,
     minHeight: 50,
@@ -30,4 +31,4 @@ export default {
     elevation: 0,
     borderColor: Colors.lightblue,
   },
-};
+});

package/{lib/components/ConfirmationModal/index.js → components/ConfirmationModal/index.tsx}

@@ -1,20 +1,21 @@
-import React from 'react';
+import { Ionicons } from '@expo/vector-icons';
 import {
+  Keyboard,
+  KeyboardAvoidingView,
   Modal,
+  Platform,
   TouchableOpacity,
-  View,
-  Keyboard,
   TouchableWithoutFeedback,
-  Platform,
-  KeyboardAvoidingView,
+  View,
 } from 'react-native';
-import PropTypes from 'prop-types';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import Text from '../Text';
-import Button from '../Button';
+
 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,
@@ -29,25 +30,18 @@ const ConfirmationModal = ({
   inverted,
   isPrime,
   children,
-}) => (
-  <Modal
-    animationType='slide'
-    transparent={true}
-    visible={visible}
-    onRequestClose={() => {}}
-  >
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
+}: 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'
+                size="large"
                 align={alertMode && !closeButton ? 'center' : 'left'}
-                weight='semiBold'
+                weight="semiBold"
                 numberOfLines={1}
               >
                 {title}
@@ -58,46 +52,33 @@ const ConfirmationModal = ({
                     if (onClose) {
                       onClose();
                     } else {
-                      onCancel();
+                      if (onCancel) {
+                        onCancel();
+                      }
                     }
                   }}
                   style={style.button}
                 >
-                  <Ionicons
-                    name='close-outline'
-                    size={24}
-                    color={Colors.darkblue}
-                  />
+                  <Ionicons name="close-outline" size={24} color={Colors.darkblue} />
                 </TouchableOpacity>
               )}
             </View>
 
-            <View style={infoMode ? style.bodyInfo : style.body}>
-              {children}
-            </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'}>
+                  <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 size="small" bordered variant={inverted ? 'inverted' : 'primary'} onPress={onCancel}>
+                        <Text size="large">{cancelText}</Text>
                       </Button>
                     )}
                     <Button
@@ -105,10 +86,7 @@ const ConfirmationModal = ({
                       size={onCancel ? 'small' : 'fit'}
                       onPress={onConfirm}
                     >
-                      <Text
-                        size='large'
-                        color={isPrime ? 'lightgold' : 'white'}
-                      >
+                      <Text size="large" color={isPrime ? 'lightgold' : 'white'}>
                         {confirmText}
                       </Text>
                     </Button>
@@ -123,36 +101,4 @@ const ConfirmationModal = ({
   </Modal>
 );
 
-ConfirmationModal.defaultProps = {
-  visible: false,
-  title: ' ',
-  confirmText: ' ',
-  cancelText: ' ',
-  onCancel: () => {},
-  onConfirm: () => {},
-  onClose: null,
-  alertMode: false,
-  closeButton: false,
-  infoMode: false,
-  inverted: false,
-  isPrime: false,
-  children: null,
-};
-
-ConfirmationModal.propTypes = {
-  visible: PropTypes.bool,
-  title: PropTypes.string,
-  confirmText: PropTypes.string,
-  cancelText: PropTypes.string,
-  onCancel: PropTypes.func,
-  onConfirm: PropTypes.func,
-  onClose: PropTypes.func,
-  alertMode: PropTypes.bool,
-  closeButton: PropTypes.bool,
-  infoMode: PropTypes.bool,
-  inverted: PropTypes.bool,
-  isPrime: PropTypes.bool,
-  children: PropTypes.node,
-};
-
 export default ConfirmationModal;

package/{lib/components/ConfirmationModal/style.js → components/ConfirmationModal/style.tsx}

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