Merge pull request #11 from AbdullahQureshi1080/components

feat(src): added FormDateSelector Component
AbdullahQureshi1080 · Nov 3, 2022 · 7226487 · 7226487
2 parents 33f6edc + ee1fb30
commit 7226487
Show file tree

Hide file tree

Showing 25 changed files with 15,725 additions and 10,490 deletions.
diff --git a/Readme.md b/Readme.md
@@ -23,6 +23,9 @@ We broke down the formik form usage into multiple components each with its uniqu
 <img src="docs/superform.gif" width="300" height="600" style=" border-radius:3px; margin-top: 10px; margin-bottom:10px "/>
 
 
+<br/>
+
+
 
 
 <br/>
@@ -34,22 +37,45 @@ npm i @superforms/superforms-rn
 ```
 **Note:** Make sure to have react version ```>=16.13.1```
 
+
+## **Date Picker Usage**  📅
+
+```bash
+npm i react-native-date-picker
+``````
+To use ```<FormDateSelector/>``` you must have to install this, you can skip it if you do not need the date picker, but it would be great to install this so that you do not run into issues later. 
+
+<br/>
+
 <br/>
 
 ## **How it works** 💻
 
 ```js
 import React from 'react';
 import {SafeAreaView} from 'react-native';
-import {Form, FormField, SubmitButton} from '@superforms/superforms-rn';
+import {
+  Form,
+  FormField,
+  SubmitButton,
+  FormDateSelector,
+  DatePickerEnums,
+} from '@superforms/superforms-rn';
 import * as Yup from 'yup';
 
 const App = () => {
 
 const validationSchema = Yup.object().shape({
   email: Yup.string().required('Email is required').email().label('Email'),
-  password: Yup.string().required('Password is required').label('Password').min(5),
+  password: Yup.string()
+    .required('Password is required')
+    .label('Password')
+    .min(5),
   fullName: Yup.string().required('Name is required').label('Full Name'),
+  datepicker: Yup.date()
+    .required('Date is required')
+    .label('Birthdate')
+    .nullable(),
 });
 
   const handleSubmit = (values) => {
@@ -58,16 +84,27 @@ const validationSchema = Yup.object().shape({
 
   return (
     <SafeAreaView style={{backgroundColor: '#f8f8f8', flex: 1}}>
-      <Form
-        initialValues={{email: '', fullName: '', password: ''}}
+     <Form
+        initialValues={{
+          email: '',
+          fullName: '',
+          password: '',
+          datepicker: null,
+        }}
         validationSchema={validationSchema}
         onSubmit={handleSubmit}
-        enableReinitialize={true}>
-          <FormField name="email" label="Email" />
-          <FormField name="password" label="Password" />
-          <FormField name="fullName" label="Full Name" />
-          <SubmitButton name="Login" />
-      </Form>
+      >
+        <FormField name="email" label="Email" />
+        <FormField name="password" label="Password" />
+        <FormField name="fullName" label="Full Name" disabled={true} />
+        <FormDateSelector
+          label="Birthdate"
+          name="datepicker"
+          date={new Date()}
+          mode={DatePickerEnums.DATE}
+        />
+        <SubmitButton name="Login" />
+     </Form>
     </SafeAreaView>
   );
 };
@@ -84,7 +121,6 @@ export default App;
 
 * ### **Form**
 
-    <br/>
 
     | Property | Type | Description | Required 
     | ----------- | :----: |:-------------- | :------------|
@@ -96,8 +132,6 @@ export default App;
 
 * ### **FormField**
 
-    <br/>
-
     | Property | Type | Description | Required 
     | ----------- | :----: |:-------------- | :------------|
     | name  | ```String```  | The name of the form field, it could be any string value.            | Yes
@@ -107,6 +141,20 @@ export default App;
     <br/>
 
 
+* ### **FormDateSelector**
+
+
+  | Property | Type | Description | Required 
+  | ----------- | :----: |:-------------- | :------------|
+  | name  | ```String```  |  The name of the form field, it could be any string value.             | Yes
+  | date  | ```Date```  | The initial date for the date picker to begin with. This can be any  ```new Date()``` object.  | Yes
+
+  ``` More <FormDateSelector/> ``` [props](docs/components.md)
+
+ 
+ 
+<br/>
+
 * ### **Submit Button**
 
     <br/>

diff --git a/__tests__/Date-Text.tsx b/__tests__/Date-Text.tsx
@@ -0,0 +1,20 @@
+/**
+ * @format
+ */
+
+import React from "react";
+import "react-native";
+
+// jest.useFakeTimers();
+jest.mock("Dimensions");
+
+// Note: test renderer must be required after react-native.
+import { render } from "@testing-library/react-native";
+
+import { View } from "react-native";
+
+describe("Date", () => {
+  test("Date Picker Renders Correctly", () => {
+    render(<View testID="date-picker-test"></View>);
+  });
+});
diff --git a/__tests__/Form-test.tsx b/__tests__/Form-test.tsx
@@ -23,7 +23,6 @@ import * as Yup from "yup";
 import Form from "../src/Form/Form";
 import FormField from "../src/Form/FormField/FormField";
 import SubmitButton from "../src/Form/SubmitButton/SubmitButton";
-import { Button } from "../src";
 
 describe("Form", () => {
   const initialValues = {
@@ -40,7 +39,6 @@ describe("Form", () => {
     fullName: Yup.string().required("Name is required").label("Full Name"),
   });
   const mockSubmitHandler = jest.fn();
-  const mockButton = jest.fn();
 
   test("Success: Form Renders correctly", () => {
     const { getByTestId } = render(
@@ -74,7 +72,6 @@ describe("Form", () => {
           useSubmitForm={true}
           onPress={mockSubmitHandler}
         />
-        <Button name="test" onPress={mockButton} testID="test-button" />
       </Form>
     );
     const emailField = getByTestId("email-test-field");

diff --git a/docs/components.md b/docs/components.md
@@ -12,54 +12,85 @@
 
 ## **Form Field**
 
-* ### **Funtional Props**
 
-    | Property | Type | Description | Required 
-    | ----------- | :----: |:-------------- | :------------|
-    | name  | ```String```  | The name of the form field, it could be any string value.            | Yes
-    | label  | ```String``` | The label for the input field     | No
-    | hideLabel  |  ```Boolean``` | The prop to hide label for a form field, though you do not need this if you do not give a label but for a case where you do but still want to hide it, sounds silly but you have it.     | No
-    | renderIcon  |  ```()=><ReactNode/>``` | With this prop you can render a Icon within the formfield besides the input.    | No
-    | iconPlacement  |  ```LEFT or RIGHT``` | With this prop you can position the icon either on th left or the right side of the input field. Default value is ```LEFT```    | No
-    | placeholder  |  ```String``` | The placeholder value for the form field.    | No
-    | showErrorMessage  |  ```Boolean``` | The prop to hide the error message of the form field, although with this there will be no error message but still the form field will be highlighted in error state if there is a validation error.  | No
-    | assistiveText  |  ```String``` | The prop to show assistive text under the text input, the error message overrides the assistive text when there is a validation error. | No
+| Property | Type | Description | Required 
+| ----------- | :----: |:-------------- | :------------|
+| name  | ```String```  | The name of the form field, it could be any string value.            | Yes
+| label  | ```String``` | The label for the input field     | No
+| renderIcon  |  ```()=><ReactNode/>``` | With this prop you can render a Icon within the formfield besides the input.    | No
+| iconPlacement  |  ```LEFT or RIGHT``` | With this prop you can position the icon either on th left or the right side of the input field. Default value is ```LEFT```    | No
+| placeholder  |  ```String``` | The placeholder value for the form field.    | No
+| inputStyle  | ```StyleProp<any>```  | The styles for form ```<TextInput/>```  | No | [Styles](../src/Common/Input/InputStyles.tsx)
 
-* ### **Style Props**
+<!-- | showErrorMessage  |  ```Boolean``` | The prop to hide the error message of the form field, although with this there will be no error message but still the form field will be highlighted in error state if there is a validation error.  | No
+| assistiveText  |  ```String``` | The prop to show assistive text under the text input, the error message overrides the assistive text when there is a validation error. | No -->
+
+<!-- * ### **Style Props**
 
     | Property | Type | Description | Required  | Default  
     | ----------- | :----: |:-------------- | :------------| :------------|
     | labelStyle  | ```StyleProp<any>```  | The styles for the form label   | No | [Styles](../src/Common/Input/InputStyles.tsx)
     | containerStyle  | ```StyleProp<any>```  | The styles for form input container, the ```<TextInput/>``` is inside a ```View``` with these styles.  | No | [Styles](../src/Common/Input/InputStyles.tsx)
     | inputStyle  | ```StyleProp<any>```  | The styles for form ```<TextInput/>```  | No | [Styles](../src/Common/Input/InputStyles.tsx)
-    | assistiveTextStyle  | ```StyleProp<any>```  | The styles for assistive text or error message. | No | [Styles](../src/Common/Input/InputStyles.tsx)
+    | assistiveTextStyle  | ```StyleProp<any>```  | The styles for assistive text or error message. | No | [Styles](../src/Common/Input/InputStyles.tsx) -->
 
 
 **Note:** Other than these custom props, all the props for ```<TextInput/>``` are supported, but as  ```value``` and ```onChangeText``` are configured to automatically get, set and update, you cannot use these. 
 
 
-## **Submit Button**
+<br/>
 
-* ### **Funtional Props**
+## **Form Date Selector**
+| Property | Type | Description | Required 
+| ----------- | :----: |:-------------- | :------------|
+| name  | ```String```  | The name of the form field, it could be any string value.            | Yes
+| date  | ```Date```  |The initial date for the date picker to begin with. This can be any  ```new Date()``` object.| Yes
+| dateFormat  | ```String```  | This can be any [moment](https://momentjs.com/) formated [value](https://momentjs.com/docs/#/parsing/string-format/). | No
+| mode  | ```String```  | Modes can be of three types, ```date, datetime``` or ```time```, if you like you can use these [enums](../src/Common/Date/DatePickerEnums.ts), ```Default``` mode is ```date``` | No
+| placeholderStyle  | ``StyleProp<any>``  | Styles for placeholder of the form date selector | No
 
-    | Property | Type | Description | Required 
-    | ----------- | :----: |:-------------- | :------------|
-    | name  | ```String```  | The name of the button, it could be any string value.            | Yes    
-    | type  | ```String``` | The type of the button, this translates to button size mainly affecting the width of the button, you can set it by using [button enums](../src/Common/Button/ButtonEnums.ts).   | No 
-   | disabled  | ```Boolean``` | The prop that disables interactions for the button  | No 
-   | loading  | ```Boolean``` | The prop that adds a ```<ActivityIndicator/>``` to the button, this can be used when to show progress for the form submit action | No    
-    | renderIcon  |  ```()=><ReactNode/>``` | With this prop you can render a Icon within the form button.    | No
-    | iconPlacement  |  ```LEFT or RIGHT``` | With this prop you can position the icon either on the left or the right side of the form button.  Default value is ```RIGHT```.   |  No
-     | iconOnly  |  ```Boolean``` | With this prop you can only show icon on the form submit button. **Note:** please make sure to render a icon if this is true otherwise the form button will throw a warning but yes it should work.  | No
-     | useSubmitForm  |  ```Boolean``` | Instead of using formik's handle submit use submitForm instead  | No
+<br/>
 
+## **Submit Button**
 
-* ### **Style Props**
+<!-- * ### **Funtional Props** -->
+
+| Property | Type | Description | Required 
+| ----------- | :----: |:-------------- | :------------|
+| name  | ```String```  | The name of the button, it could be any string value.            | Yes    
+| type  | ```String``` | The type of the button, this translates to button size mainly affecting the width of the button, you can set it by using [button enums](../src/Common/Button/ButtonEnums.ts).   | No 
+| disabled  | ```Boolean``` | The prop that disables interactions for the button  | No 
+| loading  | ```Boolean``` | The prop that adds a ```<ActivityIndicator/>``` to the button, this can be used when to show progress for the form submit action | No    
+| renderIcon  |  ```()=><ReactNode/>``` | With this prop you can render a Icon within the form button.    | No
+| iconPlacement  |  ```LEFT or RIGHT``` | With this prop you can position the icon either on the left or the right side of the form button.  Default value is ```RIGHT```.   |  No
+| iconOnly  |  ```Boolean``` | With this prop you can only show icon on the form submit button. **Note:** please make sure to render a icon if this is true otherwise the form button will throw a warning but yes it should work.  | No
+| useSubmitForm  |  ```Boolean``` | Instead of using formik's handle submit use submitForm instead  | No
+| contentStyle  | ```StyleProp<any>```  | The styles for the inner content of the form button such as icon or the button label/name view.  | No | [Styles](../src/Common/Input/InputStyles.tsx)
+
+<!-- * ### **Style Props**
 
     | Property | Type | Description | Required  | Default  
     | ----------- | :----: |:-------------- | :------------| :------------|
     | labelStyle  | ```StyleProp<any>```  | The styles for the form button label/name.   | No | [Styles](../src/Common/Button/ButtonStyles.tsx)
     | containerStyle  | ```StyleProp<any>```  | The styles for form submit button. | No | [Styles](../src/Common/Button/ButtonStyles.tsx)
-    | contentStyle  | ```StyleProp<any>```  | The styles for the inner content of the form button such as icon or the button label/name view.  | No | [Styles](../src/Common/Input/InputStyles.tsx)
+    | contentStyle  | ```StyleProp<any>```  | The styles for the inner content of the form button such as icon or the button label/name view.  | No | [Styles](../src/Common/Input/InputStyles.tsx) -->
+
+**Note:** Other than these custom props, all the props for ```<TouchableOpacity/>``` are supported, but as  ```onPress```  is configured to handle form submit you cannot use this. 
+
+<br>
+
+## **Common Field Props**
+| Property | Type | Description | Required 
+| ----------- | :----: |:-------------- | :------------|
+| labelStyle  | ```StyleProp<any>```  | The styles for the form label   | No | [Styles](../src/Common/Input/InputStyles.tsx)
+| containerStyle  | ```StyleProp<any>```  | The styles for form input container, the ```<TextInput/>``` is inside a ```View``` with these styles.  | No | [Styles](../src/Common/Input/InputStyles.tsx)
+| inputStyle  | ```StyleProp<any>```  | The styles for form ```<TextInput/>```  | No | [Styles](../src/Common/Input/InputStyles.tsx)
+| assistiveTextStyle  | ```StyleProp<any>```  | The styles for assistive text or error message. | No | [Styles](../src/Common/Input/InputStyles.tsx
+| showErrorMessage  |  ```Boolean``` | The prop to hide the error message of the form field, although with this there will be no error message but still the form field will be highlighted in error state if there is a validation error.  | No
+| assistiveText  |  ```String``` | The prop to show assistive text under the text input, the error message overrides the assistive text when there is a validation error. | No
+| placeholder  |  ```String``` | The placeholder for form fields | No
+| placeholderColor  |  ```String``` | Any hex ```code```, ```Default``` value is ```#929AAB```  | No
+| hideLabel  |  ```Boolean``` | The prop to hide label for a form field, though you do not need this if you do not give a label but for a case where you do but still want to hide it, sounds silly but you have it.     | No
+| label  | ```String``` | The label for the form field     | No
+| disabled  | ```Boolean``` | The prop that disables interactions for the field  | No 
 
-**Note:** Other than these custom props, all the props for ```<TouchableOpacity/>``` are supported, but as  ```onPress```  is configured to handle form submit you cannot use this. 
diff --git a/docs/superform.gif b/docs/superform.gif
diff --git a/example/.eslintrc.js b/example/.eslintrc.js
@@ -1,6 +1,7 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: ['@react-native-community/eslint-config', 'eslint-config-prettier'],
+  // extends: '@react-native-community',
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   overrides: [
@@ -13,4 +14,7 @@ module.exports = {
       },
     },
   ],
+  rules: {
+    'prettier/prettier': 0,
+  },
 };
diff --git a/example/App.tsx b/example/App.tsx
@@ -24,7 +24,14 @@ import * as Yup from 'yup';
 
 import {FormikValues} from 'formik';
 
-import {Form, FormField, SubmitButton} from '@superforms/superforms-rn';
+import {
+  Form,
+  FormField,
+  SubmitButton,
+  FormDateSelector,
+  DatePickerEnums,
+} from '@superforms/superforms-rn';
+import DatePicker from './src/Build/BaseComponent';
 
 const validationSchema = Yup.object().shape({
   email: Yup.string().required('Email is required').email().label('Email'),
@@ -33,6 +40,10 @@ const validationSchema = Yup.object().shape({
     .label('Password')
     .min(5),
   fullName: Yup.string().required('Name is required').label('Full Name'),
+  datepicker: Yup.date()
+    .required('Date is required')
+    .label('Birthdate')
+    .nullable(),
 });
 
 const App = () => {
@@ -50,13 +61,24 @@ const App = () => {
         <Text style={{color: '#000'}}>renders:{renders}</Text>
         <View style={{marginTop: 20, marginBottom: 20}}>
           <Form
-            initialValues={{email: '', fullName: '', password: ''}}
+            initialValues={{
+              email: '',
+              fullName: '',
+              password: '',
+              datepicker: null,
+            }}
             validationSchema={validationSchema}
             onSubmit={handleSubmit}
             enableReinitialize={true}>
             <FormField name="email" label="Email" />
             <FormField name="password" label="Password" />
-            <FormField name="fullName" label="Full Name" />
+            <FormField name="fullName" label="Full Name" disabled={true} />
+            <FormDateSelector
+              label="Birthdate"
+              name="datepicker"
+              date={new Date()}
+              mode={DatePickerEnums.DATE}
+            />
             <SubmitButton name="Login" />
           </Form>
         </View>