@computools/react-native-template-controller 0.0.3 → 0.0.4

package/template/src/app/infrastructure/auth/screens/login/Login.screen.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import * as yup from 'yup';
+import {yupResolver} from '@hookform/resolvers/yup';
+import {useLocalObservable} from 'mobx-react-lite';
+import {View, Text, StyleSheet} from 'react-native';
+import {CommonActions} from '@react-navigation/native';
+import {useForm, Controller, ControllerProps} from 'react-hook-form';
+import {type NativeStackScreenProps} from '@react-navigation/native-stack';
+
+import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
+import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+import {InputField} from '@ui-kit/InputField.component';
+import {Button} from '@ui-kit/buttons/Button.component';
+import {LoginController} from './login.controller';
+
+enum LoginField {
+  UserName = 'username',
+  Password = 'password',
+}
+
+interface Form {
+  [LoginField.UserName]: string;
+  [LoginField.Password]: string;
+}
+
+const minPassLength = 8;
+const schema = yup
+  .object({
+    [LoginField.UserName]: yup.string().required('username is required'),
+    [LoginField.Password]: yup.string().required('password is required').min(minPassLength, 'min 8 chars'),
+  })
+  .required();
+
+export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainStackRoutes.Login>> = ({navigation}) => {
+  const controller = useLocalObservable(() => new LoginController());
+  const {control, handleSubmit, getValues} = useForm<Form>({
+    mode: 'onBlur',
+    resolver: yupResolver(schema),
+    defaultValues: {
+      [LoginField.UserName]: '',
+      [LoginField.Password]: '',
+    },
+  });
+
+  const onLogin = async (data: Form) => {
+    try {
+      const token = await controller.login(data[LoginField.UserName], data[LoginField.Password]);
+      if (token) {
+        // TODO navigate to next flow
+        navigation.dispatch(CommonActions.navigate({name: MainStackRoutes.Onboarding}));
+      }
+    } catch {
+      // TODO: use setError from react-hook-form
+    }
+  };
+
+  const onSignUp = () => {
+    const values = getValues();
+    navigation.navigate(MainStackRoutes.SignUp, {username: values[LoginField.UserName], password: values[LoginField.Password]});
+  };
+
+  const renderUsername: ControllerProps<Form, LoginField.UserName>['render'] = ({fieldState, field}) => (
+    <InputField {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Username, Mobile Number" />
+  );
+
+  const renderPassword: ControllerProps<Form, LoginField.Password>['render'] = ({fieldState, field}) => (
+    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Password" />
+  );
+
+  return (
+    <View style={styles.screen}>
+      <View style={[styles.headerContainer, styles.row]}>
+        <View style={styles.iconWrapper}>
+          <Computools />
+        </View>
+        <Text style={styles.headerText}>Welcome 🤩 we glad to see you in computools rn template</Text>
+      </View>
+      <Controller name={LoginField.UserName} control={control} render={renderUsername} />
+      <Controller name={LoginField.Password} control={control} render={renderPassword} />
+      <Text style={[styles.forgetPassword, styles.row]}>Forget password?</Text>
+      <Button style={styles.row} onPress={handleSubmit(onLogin)} text="Login" />
+      <Button style={styles.row} onPress={onSignUp} text="Sign Up" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 30,
+    paddingTop: 25,
+  },
+  headerContainer: {
+    alignItems: 'center',
+  },
+  iconWrapper: {
+    padding: 20,
+    backgroundColor: '#CDFF3A',
+    borderRadius: 15,
+  },
+  headerText: {
+    paddingTop: 10,
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  row: {
+    marginBottom: 25,
+  },
+  forgetPassword: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});

package/template/src/app/infrastructure/auth/screens/login/login.controller.ts

@@ -0,0 +1,27 @@
+import {makeAutoObservable} from 'mobx';
+
+import {injector} from '@config/injector';
+import {AuthService} from '@infra/auth/auth.service';
+
+export class LoginController {
+  private auth: AuthService = injector.get(AuthService);
+
+  private loginProcessing: boolean = false;
+
+  public constructor() {
+    makeAutoObservable(this);
+  }
+
+  public get isProcessing() {
+    return this.loginProcessing;
+  }
+
+  public async login(username: string, password: string) {
+    this.loginProcessing = true;
+    try {
+      return await this.auth.login(username, password);
+    } finally {
+      this.loginProcessing = false;
+    }
+  }
+}

package/template/src/app/infrastructure/auth/screens/sign-up/SignUp.screen.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import * as yup from 'yup';
+import {yupResolver} from '@hookform/resolvers/yup';
+import {useForm, Controller, ControllerProps} from 'react-hook-form';
+import {View, Text, StyleSheet, Alert, SafeAreaView} from 'react-native';
+import {type NativeStackScreenProps} from '@react-navigation/native-stack';
+
+import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
+import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+import {InputField} from '@ui-kit/InputField.component';
+import {Button} from '@ui-kit/buttons/Button.component';
+import {HeaderBack} from '@ui-kit/HeaderBack.component';
+
+enum SignUpField {
+  UserName = 'username',
+  Password = 'password',
+  RepeatPassword = 'RepeatPassword',
+}
+
+interface Form {
+  [SignUpField.UserName]: string;
+  [SignUpField.Password]: string;
+  [SignUpField.RepeatPassword]: string;
+}
+
+const minPassLength = 8;
+const schema = yup
+  .object({
+    [SignUpField.UserName]: yup.string().required('username is required'),
+    [SignUpField.Password]: yup.string().required('password is required').min(minPassLength, 'min 8 chars'),
+    [SignUpField.RepeatPassword]: yup
+      .string()
+      .required('password is required')
+      .min(minPassLength, 'min 8 chars')
+      .oneOf([yup.ref(SignUpField.Password)], 'Passwords do not match'),
+  })
+  .required();
+
+export const SignUp: React.FC<NativeStackScreenProps<MainStackParamsList, MainStackRoutes.SignUp>> = ({route, navigation}) => {
+  const {username, password} = route.params || {username: '', password: ''};
+  const {control, handleSubmit} = useForm<Form>({
+    mode: 'onBlur',
+    resolver: yupResolver(schema),
+    defaultValues: {
+      [SignUpField.UserName]: username,
+      [SignUpField.Password]: password,
+      [SignUpField.RepeatPassword]: password,
+    },
+  });
+
+  const onSignUp = (data: Form) => {
+    // TODO: handle SignUP
+    Alert.alert(JSON.stringify(data));
+  };
+
+  const renderUsername: ControllerProps<Form, SignUpField.UserName>['render'] = ({fieldState, field}) => (
+    <InputField {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Username, Mobile Number" />
+  );
+
+  const renderPassword: ControllerProps<Form, SignUpField.Password>['render'] = ({fieldState, field}) => (
+    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Password" />
+  );
+
+  const renderRepeatPassword: ControllerProps<Form, SignUpField.RepeatPassword>['render'] = ({fieldState, field}) => (
+    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Repeat password" />
+  );
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <HeaderBack goBack={navigation.goBack} />
+      <View style={styles.screen}>
+        <View style={[styles.headerContainer, styles.row]}>
+          <View style={styles.iconWrapper}>
+            <Computools />
+          </View>
+          <Text style={styles.headerText}>Welcome 🤩 we glad to see you in computools rn template</Text>
+        </View>
+        <Controller name={SignUpField.UserName} control={control} render={renderUsername} />
+        <Controller name={SignUpField.Password} control={control} render={renderPassword} />
+        <Controller name={SignUpField.RepeatPassword} control={control} render={renderRepeatPassword} />
+        <Button style={styles.row} onPress={handleSubmit(onSignUp)} text="Sign Up" />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 30,
+    paddingTop: 25,
+  },
+  headerContainer: {
+    alignItems: 'center',
+  },
+  iconWrapper: {
+    padding: 20,
+    backgroundColor: '#CDFF3A',
+    borderRadius: 15,
+  },
+  headerText: {
+    paddingTop: 10,
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  row: {
+    marginBottom: 25,
+  },
+  forgetPassword: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});

package/template/src/app/infrastructure/init-logic.ts

@@ -0,0 +1,18 @@
+import {Http} from '@config/http';
+import {AuthRepo} from './auth/auth.repo';
+import {injector} from '@config/injector';
+import {AuthService} from './auth/auth.service';
+import {AuthRepoImpl} from './auth/auth.repo.impl';
+import {Memory, MMKVMemory} from '@config/memory';
+
+export const initLogic = () => {
+  injector.set(Http, new Http());
+  injector.set(Memory, new MMKVMemory());
+
+  injector.set(AuthRepo, new AuthRepoImpl());
+
+  const authService = new AuthService();
+  injector.set(AuthService, authService);
+
+  authService.authInit();
+};

package/template/src/app/infrastructure/onboarding/Onboarding.screen.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {Dimensions, ScrollView, StyleSheet, View} from 'react-native';
+import {type NativeStackScreenProps} from '@react-navigation/native-stack';
+
+import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
+import {Button} from '@ui-kit/buttons/Button.component';
+import {Step} from './Step.component';
+
+const {width} = Dimensions.get('window');
+
+export const Onboarding: React.FC<NativeStackScreenProps<MainStackParamsList, MainStackRoutes.Onboarding>> = ({navigation}) => {
+  const onSkip = () => navigation.push(MainStackRoutes.Login);
+
+  return (
+    <View style={styles.wrapper}>
+      <ScrollView
+        horizontal
+        snapToInterval={width}
+        showsHorizontalScrollIndicator={false}
+        decelerationRate="fast"
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}>
+        <Step text="UNLOCK TOMORROW 1" />
+        <Step text="UNLOCK TOMORROW 2" />
+        <Step text="UNLOCK TOMORROW 3" />
+      </ScrollView>
+      <View style={styles.controllsWrapper}>
+        <Button onPress={onSkip} text="Skip" />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  scroll: {
+    flex: 0.75,
+  },
+  scrollContent: {
+    alignItems: 'center',
+  },
+  controllsWrapper: {
+    flex: 0.15,
+  },
+});

package/template/src/app/infrastructure/onboarding/Step.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Dimensions, StyleSheet, Text, View} from 'react-native';
+
+import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+
+interface StepProps {
+  text: string;
+}
+
+export const Step: React.FC<StepProps> = ({text}) => (
+  <View style={styles.container}>
+    <View style={styles.iconWrapper}>
+      <Computools />
+    </View>
+    <Text style={styles.text}>{text}</Text>
+  </View>
+);
+
+const {width} = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    width,
+    alignItems: 'center',
+    paddingHorizontal: 40,
+  },
+  iconWrapper: {
+    padding: 20,
+    backgroundColor: '#CDFF3A',
+    borderRadius: 15,
+  },
+  text: {
+    textAlign: 'center',
+    paddingTop: 10,
+    fontSize: 16,
+  },
+});

package/template/src/app/types/any-json.ts

@@ -0,0 +1,5 @@
+import {Primitives} from './primitives';
+
+export interface AnyJson extends Record<string, Primitives | AnyJson | AnyArray> {}
+
+type AnyArray = (Primitives | AnyJson)[];

package/template/src/app/types/primitives.ts

@@ -0,0 +1 @@
+export type Primitives = string | number | bigint | boolean | undefined | symbol | null;

package/template/src/app/ui-kit/HeaderBack.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {StyleSheet, TouchableWithoutFeedback, View, ViewProps} from 'react-native';
+
+import {BackChevron} from './icons/back-chevron/BackChevron.component';
+
+interface HeaderBackProps extends ViewProps {
+  goBack: () => void;
+}
+
+export const HeaderBack: React.FC<HeaderBackProps> = ({goBack, style, ...rest}) => (
+  <View {...rest} style={[styles.wrapper, style]}>
+    <TouchableWithoutFeedback onPress={goBack}>
+      <BackChevron />
+    </TouchableWithoutFeedback>
+    <View style={styles.emptyArea} />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+    paddingHorizontal: 15,
+  },
+  emptyArea: {
+    flex: 1,
+  },
+});

package/template/src/app/ui-kit/InputField.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {TextInput, TextInputProps, StyleSheet, Text, View, ViewStyle, StyleProp, TextStyle} from 'react-native';
+
+interface Props extends Omit<TextInputProps, 'onChange'> {
+  containerStyle?: StyleProp<ViewStyle>;
+  errorStyle?: StyleProp<TextStyle>;
+  onBlur: () => void;
+  onChange: (text: string) => void;
+  error?: {message?: string};
+}
+
+export const InputField: React.FC<Props> = React.forwardRef<TextInput, Props>(
+  ({style, containerStyle, onChange, errorStyle, error, ...rest}, ref) => (
+    <View style={containerStyle}>
+      <TextInput ref={ref} {...rest} onChangeText={onChange} style={[styles.input, style]} />
+      <Text style={[styles.error, errorStyle]}>{error?.message}</Text>
+    </View>
+  ),
+);
+
+const styles = StyleSheet.create({
+  input: {
+    padding: 14,
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+  },
+  error: {
+    marginTop: 1,
+    color: 'red',
+    fontSize: 12,
+  },
+});

package/template/src/app/ui-kit/buttons/Button.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Pressable, PressableProps, StyleProp, StyleSheet, Text, ViewStyle} from 'react-native';
+
+interface ButtonProps extends PressableProps {
+  style?: StyleProp<ViewStyle>;
+  text?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({text, style, children, ...rest}) => (
+  <Pressable {...rest} style={[styles.wrapper, style]}>
+    {text ? <Text style={styles.text}>{text}</Text> : children}
+  </Pressable>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 20,
+    paddingHorizontal: 30,
+    borderRadius: 5,
+    backgroundColor: '#CDFF3A',
+  },
+  text: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+});

package/template/src/app/ui-kit/icons/back-chevron/BackChevron.component.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import Svg, {SvgProps, Path} from 'react-native-svg';
+
+export const BackChevron: React.FC<SvgProps> = props => (
+  <Svg width={30} height={30} viewBox="0 0 512 512" {...props}>
+    <Path fill="none" stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={48} d="M328 112 184 256l144 144" />
+  </Svg>
+);

package/template/src/app/ui-kit/icons/computools/Computools.icon.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Svg, {Path, SvgProps} from 'react-native-svg';
+
+import {path} from './path.json';
+
+export const Computools: React.FC<SvgProps> = props => (
+  <Svg width={56} height={44} fill="none" {...props}>
+    <Path d={path} fill="#000" />
+  </Svg>
+);

package/template/src/app/ui-kit/icons/computools/path.json

@@ -0,0 +1,3 @@
+{
+    "path": "M54.349 30.19c-1.118-1.117-2.79-1.174-5.652-1.177-2.937-.021-4.05-.6-5.184-1.735-1.15-1.149-1.735-2.293-1.735-5.349 0-3.078-.03-4.797-1.177-5.946-1.177-1.176-2.978-1.177-5.963-1.177s-4.788 0-5.964 1.177c-1.176 1.177-1.177 2.993-1.178 5.997-.001 3.004-.59 4.15-1.734 5.294-1.1 1.1-2.154 1.666-4.872 1.728-2.133-.047-3.472-.326-4.874-1.728-1.123-1.123-1.699-2.221-1.732-5.088.03-2.888.607-3.99 1.732-5.117 1.15-1.15 2.293-1.733 5.35-1.733 2.68 0 4.38-.07 5.487-1.177C28.03 12.98 28.03 11.2 28.03 7.966c0-3.234 0-5.015-1.178-6.192C25.674.597 23.876.6 20.889.6c-2.987 0-4.786 0-5.963 1.178-1.178 1.179-1.178 2.931-1.178 6.125v.476c-.008 2.57-.09 4.207-1.154 5.271-.969.97-2.344 1.14-5.058 1.156H6.85c-2.875 0-4.561.067-5.672 1.178C0 17.162 0 18.943 0 22.177c0 3.234 0 5.015 1.178 6.192 1.11 1.11 2.793 1.175 5.664 1.178h.63c2.48.012 4.063.097 5.122 1.155 1.151 1.152 1.155 2.914 1.155 6.108v.033c0 2.947.057 4.614 1.178 5.735 1.177 1.176 2.978 1.177 5.963 1.177s4.788 0 5.964-1.177c1.176-1.177 1.178-2.96 1.178-6.193v-.21c.006-2.68.064-4.379 1.156-5.47 1.063-1.064 2.701-1.147 5.27-1.155h.157c2.683 0 4.384.064 5.475 1.154 1.063 1.064 1.145 2.702 1.155 5.272v.476c0 3.191.008 4.957 1.177 6.126 1.17 1.17 2.979 1.177 5.964 1.177 2.985 0 4.787 0 5.964-1.177 1.176-1.177 1.177-2.962 1.177-6.195 0-3.234 0-5.014-1.178-6.193Z"
+}

package/template/src/app/ui-kit/icons/icons.md

@@ -0,0 +1,8 @@
+# Icons
+
+- Best way to use icons in mobile: prepare specific font with this icons (then we can change size that not depend on density + that custom font contain only with icons that we need). To generate font we can use [this].
+- Meanwhile we can use [react-native-svg] and additional [resources] to convert svg markup to react-native-svg.
+
+[this]: <https://icomoon.io/app>
+[react-native-svg]: <https://www.npmjs.com/package/react-native-svg>
+[resources]: <https://react-svgr.com/playground/?native=true&typescript=true>

package/template/src/assets/fonts/fonts.md

@@ -0,0 +1,5 @@
+# Custom Fonts
+
+We can use this [package], to add custom fonts in RN app.
+
+[package]: <https://www.npmjs.com/package/react-native-asset>

package/template/src/assets/images/images.md

@@ -0,0 +1,5 @@
+# Images
+
+[Check] RN doc how to work with images.
+
+[Check]: <https://reactnative.dev/docs/images>

package/template/src/environments/env.json

@@ -0,0 +1,3 @@
+{
+    "api": "https://rn-food-delivery.hasura.app/api/rest"
+}

package/template/src/environments/env.md

@@ -0,0 +1,7 @@
+# Environments
+We can use [.env] file.
+Or if we need configure diff env also for package name & bundle id we can go with [this] approach.
+
+
+[.env]: <https://www.npmjs.com/package/react-native-dotenv>
+[this]: <https://medium.com/simform-engineering/how-to-set-up-different-environments-in-react-native-9f7902ebf282>

package/template/tsconfig.json

@@ -1,3 +1,16 @@
 {
-  "extends": "@tsconfig/react-native/tsconfig.json"
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "*": ["./*"],
+      "@app/*": ["src/app/*"],
+      "@config/*": ["src/app/config/*"],
+      "@infra/*": ["src/app/infrastructure/*"],
+      "@types/*": ["src/app/types/*"],
+      "@ui-kit/*": ["src/app/ui-kit/*"],
+    }
+  }
 }

package/template.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-  placeholderName: "ReactNativeTemplate",
-  templateDir: "./template",
-};
+  placeholderName: 'ReactNativeTemplate',
+  templateDir: './template',
+}

package/template/.ruby-version

@@ -1 +0,0 @@
-2.7.6