@kiosinc/commons-rn 0.1.7

package/src/components/IconButton.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { IconButton as I, type IconButtonProps } from 'react-native-paper';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps & IconButtonProps;
+
+export const IconButton = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  return <I {...props} />;
+};

package/src/components/Image.tsx

@@ -0,0 +1,78 @@
+import { View } from './View';
+import React, { useState } from 'react';
+import { ActivityIndicator } from 'react-native-paper';
+import { IconButton } from './IconButton';
+
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+import FastImage, { type FastImageProps } from 'react-native-fast-image';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps & FastImageProps;
+
+export const Image = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions, rest);
+
+  const [status, setStatus] = useState<'loading' | 'failed' | 'success'>(
+    'loading'
+  );
+  return (
+    <View flex={1}>
+      <View
+        top={0}
+        bottom={0}
+        right={0}
+        left={0}
+        position="absolute"
+        alignItems="center"
+        justifyContent="center"
+      >
+        {status === 'loading' && <ActivityIndicator />}
+        {status === 'failed' && <IconButton icon="image-broken-variant" />}
+      </View>
+      <FastImage
+        {...props}
+        onLoad={() => {
+          setStatus('success');
+        }}
+        onError={() => {
+          setStatus('failed');
+        }}
+      />
+    </View>
+  );
+};

package/src/components/KeyboardAvoidingView.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  KeyboardAvoidingView as KV,
+  type KeyboardAvoidingViewProps,
+} from 'react-native';
+
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps & KeyboardAvoidingViewProps;
+
+export const KeyboardAvoidingView = ({ children, ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions, rest);
+
+  return (
+    <KV behavior="padding" {...props}>
+      {children}
+    </KV>
+  );
+};

package/src/components/LineLoader.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+
+type LineLoaderPropsType = {
+  backgroundColor?: string;
+  foregroundColor?: string;
+  height?: number;
+  progress: number;
+};
+
+export const LineLoader: React.FC<LineLoaderPropsType> = ({
+  backgroundColor,
+  foregroundColor,
+  height = 4,
+  progress = 0,
+}) => {
+  const theme = useTheme();
+  const animatedProgress = useSharedValue(0);
+
+  useEffect(() => {
+    animatedProgress.value = withTiming(progress, {
+      duration: 500,
+      easing: Easing.linear,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progress]);
+
+  const lineStyle = useAnimatedStyle(() => {
+    return {
+      width: `${animatedProgress.value * 100}%`,
+      backgroundColor: foregroundColor ?? theme.colors.primary,
+      height,
+    };
+  });
+
+  return (
+    <View style={[styles.container, { height }]}>
+      <View
+        style={[
+          styles.background,
+          {
+            backgroundColor: backgroundColor ?? theme.colors.onSurfaceDisabled,
+          },
+        ]}
+      />
+      <Animated.View style={[styles.line, lineStyle]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  background: {
+    flex: 1,
+  },
+  line: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+});

package/src/components/LinkButton.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Button as B, type ButtonProps } from 'react-native-paper';
+import {
+  useRestyle,
+  spacing,
+  border,
+  composeRestyleFunctions,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  backgroundColor,
+  backgroundColorShorthand,
+  layout,
+  position,
+  spacingShorthand,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+import { StyleSheet } from 'react-native';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type TextProps = Omit<RestyleProps, 'variant'> & ButtonProps;
+
+export const LinkButton: React.FC<TextProps> = ({ children, ...rest }) => {
+  const restyleProps = useRestyle(restyleFunctions, rest);
+
+  return (
+    <B
+      labelStyle={{
+        ...styles.underline,
+        ...((restyleProps.labelStyle as object)
+          ? (restyleProps.labelStyle as object)
+          : {}),
+      }}
+      {...restyleProps}
+    >
+      {children}
+    </B>
+  );
+};
+
+const styles = StyleSheet.create({
+  underline: { textDecorationLine: 'underline' },
+});

package/src/components/OtpInputs.tsx

@@ -0,0 +1,149 @@
+import { InteractionManager, Keyboard, StyleSheet } from 'react-native';
+import React, { useEffect } from 'react';
+import {
+  TextInput as T,
+  type TextInputProps,
+  useTheme,
+} from 'react-native-paper';
+import { View, Text } from '../index';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps &
+  TextInputProps & {
+    errorMessage?: string;
+  };
+
+export const TextInput = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  return <T {...props} />;
+};
+
+type OtpInputsPropsType = {
+  handleChange?: (value: string) => void;
+  numberOfInputs?: number;
+  error?: boolean;
+  code?: string;
+};
+
+export const OtpInputs = ({
+  handleChange = () => {},
+  numberOfInputs = 4,
+  error = false,
+  code = '',
+}: OtpInputsPropsType) => {
+  const inputRef = React.useRef<any>();
+  const theme = useTheme();
+
+  useEffect(() => {
+    // Must run after animations for keyboard to automatically open
+    InteractionManager.runAfterInteractions(() => {
+      if (inputRef?.current) {
+        inputRef.current.focus();
+      }
+    });
+  }, [inputRef]);
+
+  return (
+    <View overflow="hidden">
+      <View alignItems="center" flexDirection="row" justifyContent="center">
+        {Array(numberOfInputs)
+          .fill('')
+          .map((_number, index) => (
+            <View
+              key={index}
+              borderColor={code[index] ? 'primary' : 'outline'}
+              borderWidth={1}
+              margin="2"
+              borderRadius="8"
+              backgroundColor="background"
+              justifyContent="center"
+              alignItems="center"
+              minHeight={42}
+              minWidth={42}
+            >
+              <Text
+                borderColor="primary"
+                // @ts-ignore
+                accessibilityLabel="otp"
+                color={error ? 'error' : 'onBackground'}
+                fontSize={20}
+                style={theme.fonts.bodyLarge}
+              >
+                {code[index] || ''}
+              </Text>
+            </View>
+          ))}
+        <TextInput
+          textContentType="oneTimeCode"
+          autoFocus
+          keyboardType="phone-pad"
+          ref={inputRef}
+          mode="flat"
+          autoComplete="one-time-code"
+          selectionColor="transparent"
+          value={code || ''}
+          onChangeText={(value: string) => {
+            if (!isNaN(Number(value))) {
+              if (value.length <= numberOfInputs) {
+                handleChange && handleChange(value);
+              }
+
+              if (value.length >= numberOfInputs) {
+                return Keyboard.dismiss();
+              }
+            }
+
+            return null;
+          }}
+          style={styles.hiddenFont}
+          backgroundColor="transparent"
+          bottom={-10}
+          width="100%"
+          height={60}
+          position="absolute"
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  hiddenFont: { fontSize: 0.001 },
+});

package/src/components/ParentView.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+
+import {
+  StatusBar,
+  Keyboard,
+  StyleSheet,
+  type StatusBarStyle,
+} from 'react-native';
+import {
+  type Edges,
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+import { View } from '../components';
+import { useTheme } from 'react-native-paper';
+
+import { type ViewProps } from 'react-native';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps &
+  ViewProps & {
+    barStyle?: StatusBarStyle;
+    children?: React.ReactNode;
+    shouldDismissKeyboardOnTap?: boolean;
+    topInset?: boolean;
+    rightInset?: boolean;
+    leftInset?: boolean;
+    bottomInset?: boolean;
+  };
+
+export function useKeyboard() {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  function onKeyboardDidShow(e: any) {
+    setKeyboardHeight(e.endCoordinates.height);
+  }
+
+  function onKeyboardDidHide() {
+    setKeyboardHeight(0);
+  }
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      onKeyboardDidShow
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      onKeyboardDidHide
+    );
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}
+
+export const ParentView = ({
+  children,
+  bg,
+  topInset = true,
+  rightInset = true,
+  leftInset = true,
+  bottomInset = true,
+  shouldDismissKeyboardOnTap = true,
+  ...rest
+}: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  const keyboardHeight = useKeyboard();
+  const safeAreaViewProps = {
+    edges: [
+      ...(topInset ? ['top'] : []),
+      ...(rightInset ? ['right'] : []),
+      ...(leftInset ? ['left'] : []),
+    ] as Edges,
+  };
+
+  const insets = useSafeAreaInsets();
+
+  const handleOnTouchStart = (e: any) => {
+    if (
+      keyboardHeight &&
+      e?.target?._internalFiberInstanceHandleDEV?.elementType?.indexOf(
+        'TextInput'
+      ) === -1
+    ) {
+      Keyboard.dismiss();
+    }
+  };
+
+  const theme = useTheme();
+
+  return (
+    <SafeAreaView
+      style={[style.safeAreaView, { backgroundColor: theme.colors.background }]}
+      {...safeAreaViewProps}
+    >
+      <StatusBar
+        barStyle={theme.dark ? 'light-content' : 'dark-content'}
+        translucent
+        backgroundColor="transparent"
+      />
+      <View
+        flex={1}
+        bg={bg ?? 'background'}
+        {...(props as any)}
+        {...(bottomInset && { pb: insets.bottom })}
+        {...(shouldDismissKeyboardOnTap
+          ? { onTouchStart: handleOnTouchStart }
+          : {})}
+      >
+        {children}
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const style = StyleSheet.create({
+  safeAreaView: {
+    flex: 1,
+  },
+});

package/src/components/Searchbar.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Searchbar as S, type SearchbarProps } from 'react-native-paper';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps & SearchbarProps;
+
+export const Searchbar = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  return <S {...props} right={null as any} />;
+};