@kiosinc/commons-rn 0.1.7

package/src/auth/screens/validators.ts

@@ -0,0 +1,73 @@
+import { t } from 'i18next';
+import * as yup from 'yup';
+
+export const EMAIL_REGEX =
+  /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$|^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[^@\s]+\.[^@\s]+$/;
+
+const displayName = yup
+  .string()
+  .required(t('authentication.displayNameRequired'))
+  .label(t('authentication.displayNameRequired'));
+
+const businessName = yup
+  .string()
+  .required(t('authentication.businessNameRequired'))
+  .label(t('authentication.businessName'));
+
+const emailForLogin = yup
+  .string()
+  .required(t('authentication.requiredEmailForLogin'))
+  .matches(EMAIL_REGEX, t('authentication.validEmail'))
+  .label(t('authentication.email'));
+
+const emailForSignup = yup
+  .string()
+  .required(t('authentication.requiredEmailForSignUp'))
+  .matches(EMAIL_REGEX, t('authentication.validEmail'))
+  .label(t('authentication.email'));
+
+const phoneNumber = yup
+  .string()
+  .required(t('authentication.requiredPhoneNumber'))
+  .label(t('authentication.phoneNumber'));
+
+const password = yup
+  .string()
+  .required(t('authentication.requiredPassword'))
+  .label(t('authentication.password'));
+
+const newPassword = yup
+  .string()
+  .required()
+  .min(8, t('authentication.minLength'))
+  .matches(/[a-z]/, t('authentication.1lowerChar'))
+  .matches(/[A-Z]/, t('authentication.1upperChar'))
+  .matches(/[0-9]/, t('authentication.1number'))
+  .matches(/[!@#$%^&*(),.?":{}|<>]/, t('authentication.1special'))
+  .label(t('authentication.password'));
+
+const code = yup.string().required().min(6);
+
+export const signUpValidationSchema = yup.object().shape({
+  displayName,
+  email: emailForSignup,
+  phoneNumber,
+  name: businessName,
+});
+
+export const loginValidationSchema = yup.object().shape({
+  email: emailForLogin,
+  password,
+});
+
+export const resetPasswordValidationSchema = yup.object().shape({
+  email: emailForLogin,
+});
+
+export const verificationValidationSchema = yup.object().shape({
+  code,
+});
+
+export const passwordVerificationSchema = yup.object().shape({
+  password: newPassword,
+});

package/src/components/Alert.tsx

@@ -0,0 +1,157 @@
+import React, { useState, useCallback } from 'react';
+import { Dialog, Text, useTheme } from 'react-native-paper';
+import { t } from 'i18next';
+import { Button } from './Button';
+
+interface ButtonProps {
+  label: string;
+  onPress?: () => void;
+  mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal';
+}
+
+interface AlertParams {
+  title?: string;
+  description?: string;
+  isDismissable?: boolean;
+  buttons?: ButtonProps[];
+}
+
+interface AlertHandle {
+  show: (params: AlertParams) => void;
+}
+
+const useAlertHook = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [params, setParams] = useState<AlertParams>({});
+  const {
+    title = '',
+    description = '',
+    isDismissable = true,
+    buttons = [],
+  } = params;
+
+  const show = useCallback((parameters: AlertParams) => {
+    setParams(parameters);
+    setIsVisible(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  return {
+    isVisible,
+    show,
+    hide,
+    title,
+    description,
+    isDismissable,
+    buttons,
+  };
+};
+
+let rootLevelRef: AlertHandle | null = null;
+
+export const Alert = () => {
+  const { isVisible, show, hide, buttons, isDismissable, title, description } =
+    useAlertHook();
+  const theme = useTheme();
+
+  const [
+    button1 = {
+      label: t('ok'),
+      onPress: () => {},
+      mode: 'text',
+    },
+    button2,
+    button3,
+  ] = buttons;
+
+  const ref: any = React.useRef(null);
+
+  React.useImperativeHandle(
+    ref,
+    React.useCallback(
+      () => ({
+        show,
+      }),
+      [show]
+    )
+  );
+
+  React.useEffect(() => {
+    rootLevelRef = ref.current;
+  }, [ref]);
+
+  return (
+    <Dialog
+      style={{
+        backgroundColor: theme.colors.background,
+      }}
+      dismissable={isDismissable}
+      dismissableBackButton={isDismissable}
+      onDismiss={() => {
+        if (isVisible) {
+          hide();
+        }
+      }}
+      visible={isVisible}
+    >
+      {Boolean(title) && (
+        <Dialog.Content>
+          <Text variant="titleMedium">{title}</Text>
+        </Dialog.Content>
+      )}
+      {Boolean(description) && (
+        <Dialog.Content>
+          <Text variant="bodyMedium">{description}</Text>
+        </Dialog.Content>
+      )}
+      <Dialog.Actions>
+        {button3 && (
+          <Button
+            mx="8"
+            mode={button3?.mode || 'text'}
+            onPress={() => {
+              hide();
+              button3?.onPress?.();
+            }}
+          >
+            {button3.label}
+          </Button>
+        )}
+        {button2 && (
+          <Button
+            ml="2"
+            mode={button2?.mode || 'text'}
+            onPress={() => {
+              hide();
+              button2?.onPress?.();
+            }}
+          >
+            {button2?.label}
+          </Button>
+        )}
+        {button1 && (
+          <Button
+            ml="2"
+            mode={button1?.mode || 'text'}
+            onPress={() => {
+              hide();
+              button1?.onPress?.();
+            }}
+          >
+            {button1.label}
+          </Button>
+        )}
+      </Dialog.Actions>
+    </Dialog>
+  );
+};
+
+Alert.displayName = 'Alert';
+
+//@ts-ignore
+Alert.show = (params: AlertParams) => {
+  rootLevelRef?.show(params);
+};

package/src/components/Badge.tsx

@@ -0,0 +1,50 @@
+import { Badge as B, type BadgeProps } from 'react-native-paper';
+
+import {
+  backgroundColor,
+  backgroundColorShorthand,
+  type BackgroundColorProps,
+  border,
+  type BorderProps,
+  type ColorProps,
+  composeRestyleFunctions,
+  layout,
+  type LayoutProps,
+  position,
+  type PositionProps,
+  spacing,
+  type SpacingProps,
+  spacingShorthand,
+  type SpacingShorthandProps,
+  useRestyle,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+
+import { type ThemeType } from '../theme';
+import React from 'react';
+
+type RestyleProps = ColorProps<ThemeType> &
+  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 propsType = RestyleProps & BadgeProps;
+
+export const Badge = ({ children, ...rest }: propsType) => {
+  const props = useRestyle(restyleFunctions, rest);
+  return <B {...props}>{children}</B>;
+};

package/src/components/BottomSheet.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import { useTheme } from 'react-native-paper';
+import { ParentView, View } from '../components';
+import BS, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { StyleSheet } from 'react-native';
+
+export const BottomSheet = React.forwardRef<
+  typeof BS,
+  {
+    children: React.ReactNode;
+    pressBehavior?: 'close' | 'collapse' | 'none';
+    snapPoints: Array<string>;
+  }
+>(({ children, pressBehavior = 'none', snapPoints, ...rest }, ref) => {
+  const theme = useTheme();
+
+  const renderBackdrop = useCallback(
+    (props: any) => (
+      <BottomSheetBackdrop
+        {...props}
+        pressBehavior={pressBehavior}
+        disappearsOnIndex={-1}
+        appearsOnIndex={1}
+      >
+        <View
+          style={[
+            styles.backdrop,
+            {
+              backgroundColor: theme.colors.backdrop,
+            },
+          ]}
+        />
+      </BottomSheetBackdrop>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <BS
+      android_keyboardInputMode="adjustPan"
+      keyboardBlurBehavior="restore"
+      handleStyle={[
+        styles.handleStyle,
+        {
+          backgroundColor: theme.colors.background,
+        },
+      ]}
+      handleIndicatorStyle={{
+        backgroundColor: theme.colors.onBackground,
+      }}
+      backdropComponent={renderBackdrop}
+      enablePanDownToClose={true}
+      snapPoints={snapPoints}
+      ref={ref as any}
+      index={-1}
+      {...rest}
+    >
+      <ParentView topInset={false}>{children}</ParentView>
+    </BS>
+  );
+});
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+  },
+  handleStyle: {
+    borderTopRightRadius: 10,
+    borderTopLeftRadius: 10,
+  },
+});

package/src/components/Button.tsx

@@ -0,0 +1,47 @@
+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';
+
+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 Button: React.FC<TextProps> = ({ children, ...rest }) => {
+  const restyleProps = useRestyle(restyleFunctions, rest);
+
+  return <B {...restyleProps}>{children}</B>;
+};

package/src/components/Card.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Card as C, type CardProps } 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 & CardProps;
+
+export const Card = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  return <C {...(props as any)} />;
+};

package/src/components/Divider.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Divider as D, type DividerProps } 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 & DividerProps;
+
+export const Divider = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  return <D {...props} />;
+};

package/src/components/FAB.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { FAB as F, type FABProps } 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 & FABProps;
+
+export const FAB = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  return <F {...props} />;
+};

package/src/components/Header.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { Text } from '../components';
+import { Appbar, Menu, useTheme } from 'react-native-paper';
+import { IconButton } from '../components';
+import { View } from '../components';
+import { useNavigation } from '@react-navigation/native';
+import { type GestureResponderEvent, 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 & {
+    textAlign?: 'center' | 'right' | 'left';
+    title?: string;
+    customRightOptions?: React.ReactNode;
+    menuOptions?: Array<{
+      leadingIcon: string;
+      title: string;
+      onPress: (e?: GestureResponderEvent) => void;
+    }>;
+  };
+
+export const Header: React.FC<Props> = ({
+  title,
+  menuOptions,
+  textAlign = 'center',
+  customRightOptions = null,
+  ...rest
+}) => {
+  const props = useRestyle(restyleFunctions, rest);
+
+  const navigation = useNavigation();
+  const [visible, setVisible] = React.useState(false);
+  const theme = useTheme();
+
+  const openMenu = () => setVisible(true);
+  const closeMenu = () => setVisible(false);
+
+  return (
+    <View
+      height={60}
+      flexDirection="row"
+      alignItems="center"
+      {...(props as ViewProps)}
+    >
+      {navigation.canGoBack() ? (
+        <IconButton icon="arrow-left" onPress={navigation.goBack} />
+      ) : (
+        <View width={40} />
+      )}
+      <Text flex={1} textAlign={textAlign} variant="titleMedium">
+        {title}
+      </Text>
+      {menuOptions && (
+        <Menu
+          style={{
+            backgroundColor: theme.colors.background,
+          }}
+          contentStyle={{
+            backgroundColor: theme.colors.background,
+          }}
+          visible={visible}
+          onDismiss={closeMenu}
+          anchor={<Appbar.Action icon="dots-vertical" onPress={openMenu} />}
+        >
+          {menuOptions.map((menuOption) => {
+            const onPress = () => {
+              closeMenu();
+              menuOption.onPress();
+            };
+            return (
+              <Menu.Item
+                style={{
+                  backgroundColor: theme.colors.background,
+                }}
+                key={menuOption.title}
+                {...menuOption}
+                onPress={onPress}
+              />
+            );
+          })}
+        </Menu>
+      )}
+      {customRightOptions}
+      {!menuOptions && !customRightOptions && <View width={40} />}
+    </View>
+  );
+};