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

package/eslint.config.mjs

@@ -0,0 +1,205 @@
+import { default as eslintJs } from '@eslint/js';
+import importPlugin from 'eslint-plugin-import';
+import perfectionistPlugin from 'eslint-plugin-perfectionist';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import unusedImportsPlugin from 'eslint-plugin-unused-imports';
+import globals from 'globals';
+import eslintTs from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+/**
+ * @rules common
+ * from 'react', 'eslint-plugin-react-hooks'...
+ */
+const commonRules = () => ({
+  ...reactHooksPlugin.configs.recommended.rules,
+  'arrow-body-style': [2, 'as-needed', { requireReturnForObjectLiteral: false }],
+  'class-methods-use-this': 0,
+  'consistent-return': 2,
+  'default-case-last': 2,
+  'default-case': [2, { commentPattern: '^no default$' }],
+  'func-names': 1,
+  'jsx-a11y/anchor-is-valid': 0,
+  'jsx-a11y/control-has-associated-label': 0,
+  'lines-around-directive': [2, { before: 'always', after: 'always' }],
+  'no-alert': 0,
+  'no-bitwise': 2,
+  'no-console': 0,
+  'no-constant-condition': 1,
+  'no-param-reassign': 0,
+  'no-promise-executor-return': 0,
+  'no-restricted-exports': 0,
+  'no-restricted-syntax': ['error', 'WithStatement'],
+  'no-underscore-dangle': 0,
+  'no-unused-vars': 0,
+  'no-useless-rename': 1,
+  'object-shorthand': 1,
+  'prefer-destructuring': [1, { object: true, array: false }],
+
+  camelcase: 0,
+  // react
+  'react/display-name': 0,
+  'react/function-component-definition': 0,
+  'react/jsx-boolean-value': 2,
+  'react/jsx-curly-brace-presence': [2, { props: 'never', children: 'never' }],
+  'react/jsx-key': 0,
+  'react/jsx-no-duplicate-props': [1, { ignoreCase: false }],
+  'react/jsx-no-useless-fragment': [1, { allowExpressions: true }],
+  'react/jsx-props-no-spreading': 0,
+  'react/no-array-index-key': 0,
+  'react/no-children-prop': 0,
+  'react/no-unstable-nested-components': [1, { allowAsProps: true }],
+  'react/prop-types': 0,
+  'react/react-in-jsx-scope': 0,
+  'react/require-default-props': 0,
+  'react/self-closing-comp': 2,
+  // typescript
+  '@typescript-eslint/await-thenable': 0,
+  '@typescript-eslint/consistent-type-imports': 1,
+  '@typescript-eslint/naming-convention': 0,
+  '@typescript-eslint/no-empty-object-type': 0,
+  '@typescript-eslint/no-explicit-any': 0,
+  '@typescript-eslint/no-floating-promises': 0,
+  '@typescript-eslint/no-require-imports': 0,
+  '@typescript-eslint/no-shadow': 2,
+  '@typescript-eslint/no-unused-vars': [1, { args: 'none' }],
+  '@typescript-eslint/no-use-before-define': 0,
+  '@typescript-eslint/no-duplicate-enum-values': 0,
+});
+
+/**
+ * @rules import
+ * from 'eslint-plugin-import'.
+ */
+const importRules = () => ({
+  ...importPlugin.configs.recommended.rules,
+  'import/named': 0,
+  'import/export': 0,
+  'import/default': 0,
+  'import/namespace': 0,
+  'import/no-named-as-default': 0,
+  'import/newline-after-import': 2,
+  'import/no-named-as-default-member': 0,
+  'import/prefer-default-export': 0,
+  'import/no-cycle': [
+    0, // disabled if slow
+    { maxDepth: '∞', ignoreExternal: false, allowUnsafeDynamicCyclicDependency: false },
+  ],
+});
+
+/**
+ * @rules unused imports
+ * from 'eslint-plugin-unused-imports'.
+ */
+const unusedImportsRules = () => ({
+  'unused-imports/no-unused-imports': 0,
+  'unused-imports/no-unused-vars': [
+    0,
+    { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
+  ],
+});
+
+/**
+ * @rules sort or imports/exports
+ * from 'eslint-plugin-perfectionist'.
+ */
+const sortImportsRules = () => {
+  return {
+    'perfectionist/sort-named-imports': [1, { order: 'asc' }],
+    'perfectionist/sort-named-exports': [1, { order: 'asc' }],
+    'perfectionist/sort-exports': [
+      1,
+      {
+        order: 'asc',
+
+        groupKind: 'values-first',
+      },
+    ],
+    'perfectionist/sort-imports': [
+      2,
+      {
+        order: 'asc',
+        ignoreCase: true,
+        environment: 'node',
+        maxLineLength: undefined,
+        newlinesBetween: 'always',
+        groups: [
+          'style',
+          'side-effect',
+          'type',
+          ['builtin', 'external'],
+          'internal',
+          ['parent', 'sibling', 'index'],
+          ['parent-type', 'sibling-type', 'index-type'],
+          'object',
+          'unknown',
+        ],
+      },
+    ],
+  };
+};
+
+/**
+ * Custom ESLint configuration.
+ */
+export const customConfig = {
+  plugins: {
+    'react-hooks': reactHooksPlugin,
+    'unused-imports': unusedImportsPlugin,
+    perfectionist: perfectionistPlugin,
+    import: importPlugin,
+  },
+  settings: {
+    // https://www.npmjs.com/package/eslint-import-resolver-typescript
+    ...importPlugin.configs.typescript.settings,
+    'import/resolver': {
+      typescript: { project: './tsconfig.json', alwaysTryTypes: true },
+      ...importPlugin.configs.typescript.settings['import/resolver'],
+    },
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: { ...commonRules(), ...importRules(), ...unusedImportsRules(), ...sortImportsRules() },
+};
+
+// ----------------------------------------------------------------------
+
+const eslintIgnore = globalIgnores([
+  '.expo/',
+  '.storybook/',
+  '.yarn/',
+  '**/*.d.ts',
+  '**/node_modules',
+  'dist/',
+  'eslint.config.mjs',
+  'prettier.config.mjs',
+]);
+
+export default defineConfig([
+  { files: ['**/*.{ts,tsx}'] },
+  eslintIgnore,
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+        project: './tsconfig.json',
+        warnOnUnsupportedTypeScriptVersion: true,
+      },
+    },
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+      },
+    },
+  },
+  eslintJs.configs.recommended,
+  ...eslintTs.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+  customConfig,
+  { files: ['*.tsx'], rules: { '@typescript-eslint/no-floating-promises': 0 } },
+]);

package/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useDebounce } from './useDebounce';
+export { default as useLoadFonts } from './useLoadFonts';

package/{lib/hooks/useDebounce.js → hooks/useDebounce.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 
-const useDebounce = (callback, delay) => {
-  const latestCallback = useRef();
-  const latestTimeout = useRef();
+const useDebounce = (callback: () => void, delay: number | undefined) => {
+  const latestCallback = useRef<() => void>(null);
+  const latestTimeout = useRef<ReturnType<typeof setTimeout>>(null);
 
   useEffect(() => {
     latestCallback.current = callback;
@@ -14,7 +14,9 @@ const useDebounce = (callback, delay) => {
     }
 
     latestTimeout.current = setTimeout(() => {
-      latestCallback.current();
+      if (latestCallback.current) {
+        latestCallback.current();
+      }
     }, delay);
   };
 };

package/hooks/useLoadFonts.tsx

@@ -0,0 +1,13 @@
+import { useFonts } from 'expo-font';
+
+const useLoadFonts = () => {
+  const [loaded, error] = useFonts({
+    poppins_bold: require('../assets/fonts/Poppins-Bold.ttf'),
+    poppins_regular: require('../assets/fonts/Poppins-Regular.ttf'),
+    poppins_semiBold: require('../assets/fonts/Poppins-SemiBold.ttf'),
+  });
+
+  return { error, loaded };
+};
+
+export default useLoadFonts;

package/index.js

@@ -1,3 +1,4 @@
-export {asyncLoadFont} from './configs/loadFonts';
-export {Colors, MapStyle, ConstantsWS, HiringStatus, CouponStatus, NotificationsTypes} from './configs/constants';
 export * from './components';
+export { Colors, ConstantsWS, CouponStatus, HiringStatus, MapStyle, NotificationsTypes } from './configs/constants';
+export * from './configs/types';
+export { useDebounce, useLoadFonts } from './hooks';

package/lib/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.ts

@@ -0,0 +1,111 @@
+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/lib/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.ts

@@ -0,0 +1,34 @@
+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/lib/components/ConfirmationModal/index.tsx

@@ -0,0 +1,104 @@
+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/lib/components/ConfirmationModal/style.tsx

@@ -0,0 +1,53 @@
+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/lib/components/Container/index.tsx

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