@kiosinc/commons-rn 0.1.14 → 0.1.16

package/src/auth/screens/SignUp.tsx

@@ -12,16 +12,20 @@ import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
 import { Controller, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { signUpValidationSchema } from './validators';
+import {
+  signUpValidationSchemaWithBusinessName,
+  signUpValidationSchemaWithoutBusinessName,
+} from './validators';
 import { useAuthentication } from '../hooks/useAuthentication';
 import { Linking } from 'react-native';
 import { PRIVACY_POLICY, TERMS_OF_SERVICE } from '../../constants';
+import Config from 'react-native-config';
 
 export type TUserForm = {
   displayName: string;
   email: string;
   phoneNumber: string;
-  name: string;
+  name?: string;
 };
 
 export const SignUpScreen = () => {
@@ -36,7 +40,11 @@ export const SignUpScreen = () => {
     formState: { errors },
   } = useForm<TUserForm>({
     criteriaMode: 'all',
-    resolver: yupResolver(signUpValidationSchema),
+    resolver: yupResolver(
+      Config.APP_NAME === 'gusteau'
+        ? signUpValidationSchemaWithoutBusinessName
+        : signUpValidationSchemaWithBusinessName
+    ),
     defaultValues: {
       email: '',
       name: '',
@@ -45,13 +53,19 @@ export const SignUpScreen = () => {
     },
   });
 
+  console.log('Config.APP_NAME', Config.APP_NAME);
+
   const onSubmit = (data: TUserForm) => {
     checkRegistration(data);
   };
 
   return (
-    <ParentView px="16">
-      <KeyboardAvoidingView flex={1} justifyContent="center">
+    <ParentView px="16" justifyContent="center">
+      <KeyboardAvoidingView
+        alignSelf="center"
+        justifyContent={'center'}
+        width={{ phone: '100%', tablet: 372 }}
+      >
         <View alignItems="center">
           <Text pb="40" variant="titleLarge">
             {t('authentication.createAccountTitle')}
@@ -76,24 +90,26 @@ export const SignUpScreen = () => {
             }}
             name="displayName"
           />
-          <Controller
-            control={control}
-            render={({ field: { onChange, onBlur, value } }) => {
-              return (
-                <TextInput
-                  my="5"
-                  mode="outlined"
-                  error={!!errors.name?.message}
-                  errorMessage={errors.name?.message}
-                  onBlur={onBlur}
-                  onChangeText={onChange}
-                  value={value}
-                  label={t('authentication.businessName')}
-                />
-              );
-            }}
-            name="name"
-          />
+          {Config.APP_NAME !== 'gusteau' && (
+            <Controller
+              control={control}
+              render={({ field: { onChange, onBlur, value } }) => {
+                return (
+                  <TextInput
+                    my="5"
+                    mode="outlined"
+                    error={!!errors.name?.message}
+                    errorMessage={errors.name?.message}
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                    value={value}
+                    label={t('authentication.businessName')}
+                  />
+                );
+              }}
+              name="name"
+            />
+          )}
           <Controller
             control={control}
             render={({ field: { onChange, onBlur, value } }) => {

package/src/auth/screens/SignUpPassword.tsx

@@ -57,7 +57,11 @@ export const SignUpPassword: React.FC<SignUpPasswordProps> = ({ route }) => {
 
   return (
     <ParentView justifyContent="center" px="16">
-      <KeyboardAvoidingView>
+      <KeyboardAvoidingView
+        alignSelf="center"
+        justifyContent={'center'}
+        width={{ phone: '100%', tablet: 372 }}
+      >
         <View alignItems="center">
           <Text textAlign="center" variant="titleLarge">
             {t('authentication.createPassword')}

package/src/auth/screens/VerifyPhoneNumber.tsx

@@ -47,7 +47,11 @@ export const VerifyPhoneNumberScreen: React.FC<
 
   return (
     <ParentView justifyContent="center" px="16">
-      <KeyboardAvoidingView>
+      <KeyboardAvoidingView
+        alignSelf="center"
+        justifyContent={'center'}
+        width={{ phone: '100%', tablet: 372 }}
+      >
         <View alignItems="center">
           <Text pb="8" textAlign="center" variant="titleLarge">
             {t('authentication.verifyYourNumber')}

package/src/auth/screens/validators.ts

@@ -46,13 +46,19 @@ const newPassword = yup
 
 const code = yup.string().required().min(6);
 
-export const signUpValidationSchema = yup.object().shape({
+export const signUpValidationSchemaWithBusinessName = yup.object().shape({
   displayName,
   email: emailForSignup,
   phoneNumber,
   name: businessName,
 });
 
+export const signUpValidationSchemaWithoutBusinessName = yup.object().shape({
+  displayName,
+  email: emailForSignup,
+  phoneNumber,
+});
+
 export const loginValidationSchema = yup.object().shape({
   email: emailForLogin,
   password,

package/src/components/Switch.tsx

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

package/src/components/TouchableRipple.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  TouchableRipple as TR,
+  type TouchableRippleProps,
+} 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,
+  type ShadowProps,
+  shadow,
+  opacity,
+  type OpacityProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  ShadowProps<ThemeType> &
+  OpacityProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  shadow,
+  opacity,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps & TouchableRippleProps;
+
+export const TouchableRipple = ({ children, ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions, rest);
+
+  return (
+    <TR borderless {...props}>
+      {children}
+    </TR>
+  );
+};

package/src/components/index.ts

@@ -17,8 +17,10 @@ export { Searchbar } from './Searchbar';
 export { SelectionDialog } from './SelectionDialog';
 export { Snackbar } from './Snackbar';
 export { Surface } from './Surface';
+export { Switch } from './Switch';
 export { Text } from './Text';
 export { TextInput } from './TextInput';
 export { ToggleButton } from './ToggleButton';
+export { TouchableRipple } from './TouchableRipple';
 export { Video } from './Video';
 export { View } from './View';

package/src/theme/index.ts

@@ -26,6 +26,7 @@ export const generateRestyleComponentsTheme = ({
     spacing: units,
     breakpoints: {
       phone: 0,
+      tablet: 768,
     },
     zIndices: units,
     borderRadii: units,