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

package/package.json

@@ -1,91 +1,104 @@
 {
+  "version": "0.7.1",
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.102",
   "license": "MIT",
   "files": [
     "lib",
     "index.js"
   ],
-  "homepage": "https://bitbucket.org/d4fitwearapps/holper-storybook",
+  "packageManager": "yarn@4.5.0",
+  "homepage": "https://github.com/holperapp/holper-storybook",
   "repository": {
     "type": "git",
-    "url": "https://bitbucket.org/d4fitwearapps/holper-storybook.git"
+    "url": "https://github.com/holperapp/holper-storybook.git"
   },
   "bugs": {
-    "url": "https://bitbucket.org/d4fitwearapps/holper-storybook/issues",
+    "url": "https://github.com/holperapp/holper-storybook/issues",
     "email": "d4fitwear@gmail.com"
   },
   "scripts": {
-    "start": "npx expo start",
+    "start": "expo start",
     "build-dev": "eas build --profile development",
-    "build-preview": "eas build --profile preview",
-    "eject": "expo eject",
     "clear": "watchman watch-del-all",
-    "storybook": "start-storybook -p 7007",
-    "storybook-publish": "./build.sh"
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint:debug": "TIMING=all eslint -c ./eslint.config.mjs --debug",
+    "lint:fix": "eslint -c ./eslint.config.mjs --fix",
+    "lint": "eslint -c ./eslint.config.mjs",
+    "format:check": "prettier . --check --config prettier.config.mjs",
+    "format": "prettier . --write --config prettier.config.mjs",
+    "storybook:android": "cross-env STORYBOOK_ENABLED='true' expo start --android",
+    "storybook:generate": "sb-rn-get-stories -js",
+    "storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo start --ios",
+    "storybook:publish": "./build.sh",
+    "storybook:start": "cross-env STORYBOOK_ENABLED='true' expo start",
+    "type:check": "tsc --extendedDiagnostics",
+    "verify:fix": "yarn lint:fix && yarn format && yarn type:check",
+    "verify": "yarn lint && yarn format:check && yarn type:check"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "2.1.2",
-    "@react-native-community/datetimepicker": "8.3.0",
-    "@react-native-community/slider": "4.5.6",
-    "expo": "^53.0.10",
-    "expo-asset": "~11.1.5",
-    "expo-camera": "~16.1.7",
-    "expo-font": "~13.3.1",
-    "expo-image": "~2.2.0",
+    "@expo/metro-runtime": "~5.0.4",
+    "@expo/vector-icons": "^14.1.0",
+    "@react-native-picker/picker": "2.11.1",
+    "@types/react": "~19.0.10",
+    "dayjs": "^1.11.13",
+    "expo": "^53.0.19",
+    "expo-camera": "~16.1.10",
+    "expo-constants": "~17.1.7",
+    "expo-dev-client": "~5.2.4",
+    "expo-font": "~13.3.2",
     "expo-image-manipulator": "~13.1.7",
     "expo-image-picker": "~16.1.4",
     "expo-media-library": "~17.1.7",
-    "expo-status-bar": "~2.2.3",
-    "moment": "^2.30.1",
-    "prop-types": "^15.8.1",
+    "expo-splash-screen": "~0.30.10",
+    "lodash": "^4.17.21",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-native": "0.79.3",
-    "react-native-countdown-circle-timer": "^3.2.1",
-    "react-native-deck-swiper": "^2.0.16",
-    "react-native-dropdown-picker": "^5.4.6",
-    "react-native-flash-message": "^0.4.2",
+    "react-native": "0.79.5",
+    "react-native-deck-swiper": "^2.0.18",
     "react-native-maps": "1.20.1",
-    "react-native-maps-directions": "1.9.0",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-status-bar-height": "^2.6.0",
-    "react-native-svg": "15.11.2",
-    "react-native-vector-icons": "^10.0.3",
-    "react-native-web": "^0.20.0"
+    "react-native-picker-select": "^9.3.1",
+    "react-native-screens": "~4.11.1",
+    "react-native-web": "^0.20.0",
+    "sonner-native": "^0.21.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/traverse": "^7.26.9",
-    "@storybook/addon-actions": "^7.6.11",
-    "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.6.11",
-    "@storybook/addon-ondevice-actions": "^7.6.11",
-    "@storybook/addon-ondevice-knobs": "^7.6.11",
-    "@storybook/preview-api": "^7.6.11",
-    "@storybook/react-native": "^6.5.7",
-    "@storybook/react-native-server": "^6.5.8",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-class-static-block": "^7.27.1",
+    "@eslint/js": "^9.31.0",
+    "@gorhom/bottom-sheet": "^4.6.4",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/datetimepicker": "8.4.1",
+    "@react-native-community/slider": "4.5.6",
+    "@storybook/addon-ondevice-actions": "^8.3.5",
+    "@storybook/addon-ondevice-controls": "^8.3.5",
+    "@storybook/react-native": "^8.3.5",
+    "@types/lodash": "^4.17.20",
     "babel-loader": "^9.1.3",
-    "expo-dev-client": "~5.2.0"
-  },
-  "peerDependencies": {
-    "expo-camera": ">=13.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "react-native": ">=0.71.0"
+    "cross-env": "^7.0.3",
+    "eslint": "^9.30.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-perfectionist": "^4.15.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.3.0",
+    "lint-staged": "^16.1.2",
+    "prettier": "^3.6.2",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-svg": "15.11.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.37.0"
   },
-  "expo": {
-    "doctor": {
-      "reactNativeDirectoryCheck": {
-        "exclude": [
-          "react-native-maps",
-          "react-native-maps-directions",
-          "react-native-status-bar-height"
-        ],
-        "listUnknownPackages": false
-      }
-    }
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,json,css,md}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   }
 }

package/lib/components/Button/index.js

@@ -1,104 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { TouchableOpacity, ActivityIndicator } from 'react-native';
-import withPreventDoubleClick from './../PreventDoubleClick';
-import { Colors } from '../../configs/constants';
-import style from './style';
-
-const Button = ({
-  onPress,
-  disabled,
-  isLoading,
-  bordered,
-  variant = 'primary',
-  size = 'medium',
-  noShadow,
-  style: customStyle,
-  debounceDelay = 0,
-  children,
-}) => {
-  const [isDisabled, setIsDisabled] = useState(disabled);
-
-  useEffect(() => setIsDisabled(disabled), [disabled]);
-
-  const getSpinnerColor = () => {
-    switch (variant) {
-      case 'primary':
-      case 'inverted':
-      case 'error':
-        return Colors.white;
-      default:
-        return Colors.darkblue;
-    }
-  };
-
-  const handleTap = () => {
-    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>
-  );
-};
-
-Button.defaultProps = {
-  children: null,
-  disabled: false,
-  isLoading: false,
-  bordered: false,
-  noShadow: false,
-  variant: 'primary',
-  size: 'medium',
-  style: {},
-  onPress: () => {},
-  debounceDelay: 0,
-};
-
-Button.propTypes = {
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  bordered: PropTypes.bool,
-  noShadow: PropTypes.bool,
-  variant: PropTypes.oneOf([
-    'brightblue',
-    'brightviolet',
-    'darkyellow',
-    'dim',
-    'electricblue',
-    'error',
-    'inverted',
-    'light',
-    'lightgreen',
-    'primary',
-    'secondary',
-  ]),
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'fit', 'icon']),
-  style: PropTypes.any,
-  onPress: PropTypes.func,
-  debounceDelay: PropTypes.number,
-};
-
-export default withPreventDoubleClick(Button);

package/lib/components/Card/index.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, TouchableOpacity } from 'react-native';
-import withPreventDoubleClick from '../PreventDoubleClick';
-import style from './style';
-
-const TappedTouchableOpacity = withPreventDoubleClick(TouchableOpacity);
-
-const Card = (
-  { children, isButton, onPress, noShadow, style: customStyle },
-  ...props
-) => (
-  <>
-    {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>
-    )}
-  </>
-);
-
-Card.defaultProps = {
-  style: {},
-  children: null,
-  isButton: false,
-  noShadow: false,
-  onPress: () => {},
-};
-
-Card.propTypes = {
-  style: PropTypes.any,
-  children: PropTypes.node,
-  isButton: PropTypes.bool,
-  noShadow: PropTypes.bool,
-  onPress: PropTypes.func,
-};
-
-export default Card;

package/lib/components/DeckSwiper/index.js

@@ -1,118 +0,0 @@
-import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { View, Image } from 'react-native';
-import Swiper from 'react-native-deck-swiper';
-import Entypo from 'react-native-vector-icons/Entypo';
-import Text from '../Text';
-import Button from '../Button';
-import { Colors } from '../../configs/constants';
-import style from './style';
-
-const DeckSwiper = ({ data, inverted, nextText, onChange, onFinish }) => {
-  const swiper = useRef(null);
-  const [finished, setFinished] = useState(false);
-  const [index, setIndex] = useState(0);
-
-  const renderDots = () =>
-    data.map((d, i) => (
-      <Entypo
-        name='dot-single'
-        size={36}
-        key={`dot-${i}`}
-        style={style[index === i ? 'dotSelected' : 'dot']}
-      />
-    ));
-
-  return (
-    <>
-      <Swiper
-        ref={swiper}
-        cards={data}
-        renderCard={(card) => {
-          if (!card) {
-            return null;
-          }
-          return (
-            <View style={style.card}>
-              <View style={style.imageContainer}>
-                <Image
-                  style={style.imageResponsive}
-                  source={card.image}
-                  progressiveRenderingEnabled
-                  resizeMode='contain'
-                />
-              </View>
-              <View style={style.textContainer}>
-                <Text size='extra-large' style={style.title}>
-                  {card.title}
-                </Text>
-                <Text size='large' align='center'>
-                  {card.description}
-                </Text>
-              </View>
-            </View>
-          );
-        }}
-        onSwipedAll={() => {
-          setFinished(true);
-          onFinish();
-        }}
-        onSwipedRight={(index) => {
-          setIndex(index - 1);
-          onChange(index - 1);
-        }}
-        onSwipedLeft={(index) => {
-          setIndex(index + 1);
-          onChange(index + 1);
-        }}
-        cardIndex={index}
-        backgroundColor={Colors.white}
-        stackSize={2}
-        verticalSwipe={false}
-        showSecondCard={true}
-        disableRightSwipe={index === 0}
-        goBackToPreviousCardOnSwipeRight={true}
-        childrenOnTop
-      >
-        {!finished && (
-          <>
-            <View style={style.dotsContainer}>{renderDots()}</View>
-            <View style={style.container}>
-              <Button
-                variant={inverted ? 'inverted' : 'primary'}
-                onPress={() => swiper.current.swipeLeft()}
-              >
-                <Text color='white'>{nextText}</Text>
-              </Button>
-            </View>
-          </>
-        )}
-      </Swiper>
-    </>
-  );
-};
-
-DeckSwiper.defaultProps = {
-  data: [],
-  inverted: false,
-  nextText: ' ',
-  useUri: false,
-  onChange: () => {},
-  onfinish: () => {},
-};
-
-DeckSwiper.propTypes = {
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      image: PropTypes.string,
-      title: PropTypes.string,
-      description: PropTypes.string,
-    })
-  ),
-  inverted: PropTypes.bool,
-  nextText: PropTypes.string,
-  onChange: PropTypes.func,
-  onFinish: PropTypes.func,
-};
-
-export default DeckSwiper;

package/lib/components/FlashMessage/index.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import RNFlashMessage, {
-  showMessage,
-  renderFlashMessageIcon,
-} from 'react-native-flash-message';
-import { Colors } from '../../configs/constants';
-
-export const customRenderFlashMessageIcon = (
-  icon = 'success',
-  style = {},
-  customProps = {}
-) => {
-  switch (icon) {
-    case 'success':
-      return (
-        <Ionicons
-          name='checkmark-circle-outline'
-          color={Colors.darkblue}
-          size={30}
-        />
-      );
-    case 'error':
-      return (
-        <Ionicons
-          name='alert-circle-outline'
-          color={Colors.darkblue}
-          size={30}
-        />
-      );
-  }
-
-  // it's good to inherit the original method...
-  return renderFlashMessageIcon(icon, style, customProps);
-};
-
-const statusBarHeight = Platform.OS === 'android' ? { statusBarHeight: 5 } : {};
-
-export const sendMessage = ({ variant, message, description }) => {
-  return showMessage({
-    position: 'top',
-    message,
-    description,
-    icon: variant,
-    type: variant,
-    backgroundColor: variant === 'success' ? Colors.green : Colors.lightred,
-    color: Colors.darkblue,
-    hideOnPress: true,
-    ...statusBarHeight,
-  });
-};
-
-sendMessage.defaultProps = {
-  options: {
-    variant: 'success',
-    message: ' ',
-    description: ' ',
-  },
-};
-
-sendMessage.propTypes = {
-  options: PropTypes.shape({
-    variant: PropTypes.oneOf(['success', 'error']),
-    message: PropTypes.string,
-    description: PropTypes.string,
-  }),
-};
-
-const FlashMessage = () => {
-  return (
-    <RNFlashMessage
-      renderFlashMessageIcon={customRenderFlashMessageIcon}
-      titleStyle={{ fontFamily: 'poppins_bold' }}
-      textStyle={{ fontFamily: 'poppins_regular' }}
-    />
-  );
-};
-
-export default FlashMessage;

package/lib/components/FloatingContainer/index.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  View,
-  ScrollView,
-  RefreshControl,
-  KeyboardAvoidingView,
-  Platform,
-} from 'react-native';
-import style from './style';
-
-const FloatingContainer = ({
-  useRefreshControl,
-  onRefresh,
-  isRefreshing,
-  children,
-  floatingComponent,
-  centered,
-  floatingContainerStyle,
-  disableScroll,
-}) => (
-  <KeyboardAvoidingView
-    style={style.floatingContainer}
-    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-  >
-    <ScrollView
-      contentContainerStyle={centered ? style.centered : {}}
-      fadingEdgeLength={150}
-      keyboardShouldPersistTaps='handled'
-      showsVerticalScrollIndicator={false}
-      scrollEnabled={!disableScroll}
-      keyboardDismissMode='on-drag'
-      refreshControl={
-        useRefreshControl ? (
-          <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
-        ) : null
-      }
-    >
-      {children}
-    </ScrollView>
-    <View style={[style.container, floatingContainerStyle]}>
-      {floatingComponent}
-    </View>
-  </KeyboardAvoidingView>
-);
-
-FloatingContainer.defaultProps = {
-  useRefreshControl: false,
-  isRefreshing: false,
-  centered: false,
-  onRefresh: () => {},
-  children: null,
-  floatingComponent: null,
-  disableScroll: false,
-  floatingContainerStyle: {},
-};
-
-FloatingContainer.propTypes = {
-  useRefreshControl: PropTypes.bool,
-  isRefreshing: PropTypes.bool,
-  centered: PropTypes.bool,
-  onRefresh: PropTypes.func,
-  children: PropTypes.node,
-  floatingComponent: PropTypes.node,
-  disableScroll: PropTypes.bool,
-  floatingContainerStyle: PropTypes.any,
-};
-
-export default FloatingContainer;

package/lib/components/Footer/index.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, TouchableOpacity } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import { Colors } from '../../configs/constants';
-import Text from '../Text';
-import style from './style';
-
-const Footer = ({ inverted, tabs }) => {
-  const renderTab = () =>
-    tabs.map((tab, index) => (
-      <TouchableOpacity
-        key={`tab-${index}`}
-        style={style.tab}
-        onPress={tab.onPress}
-      >
-        <Ionicons
-          name={tab.icon}
-          size={20}
-          color={inverted ? Colors.white : Colors.darkblue}
-        />
-        <Text color={inverted ? 'white' : 'dark'} size='small'>
-          {tab.text}
-        </Text>
-        {tab.badge && tab.badge > 0 && (
-          <View style={style.badge}>
-            <Text color='white' size='tiny' weight='semiBold' align='center'>
-              {tab.badge > 9 ? '+9' : tab.badge}
-            </Text>
-          </View>
-        )}
-      </TouchableOpacity>
-    ));
-
-  return (
-    <View
-      style={[style.footerContainer, style[inverted ? 'inverted' : 'default']]}
-    >
-      {renderTab()}
-    </View>
-  );
-};
-
-Footer.defaultProps = {
-  inverted: false,
-  tabs: [],
-};
-
-Footer.propTypes = {
-  inverted: PropTypes.bool,
-  tabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      onPress: PropTypes.func,
-      text: PropTypes.string,
-      icon: PropTypes.string,
-      badge: PropTypes.number,
-    })
-  ),
-};
-
-export default Footer;