refactor(layout & components): update several layouts and component showcases

.gitignore

@@ -20,7 +20,6 @@ npm-debug.log
 
 # env
 env/index.js
-tsconfig.json
 
 # expo
 

env/tsconfig.dev.json

@@ -24,6 +24,9 @@
       ],
       "@ui-kitten/*": [
         "../react-native-ui-kitten/src/*"
+      ],
+      "@kitten/*": [
+        "../react-native-ui-kitten/src/components/*"
       ]
     }
   },

package.json

@@ -32,11 +32,11 @@
   "dependencies": {
     "@eva-design/eva": "^1.3.1",
     "@react-native-community/masked-view": "^0.1.5",
-    "@react-navigation/bottom-tabs": "^5.0.0-alpha.29",
-    "@react-navigation/drawer": "^5.0.0-alpha.36",
-    "@react-navigation/material-top-tabs": "^5.0.0-alpha.26",
-    "@react-navigation/native": "^5.0.0-alpha.22",
-    "@react-navigation/stack": "^5.0.0-alpha.48",
+    "@react-navigation/bottom-tabs": "^5.0.0-alpha.37",
+    "@react-navigation/drawer": "^5.0.0-alpha.39",
+    "@react-navigation/material-top-tabs": "^5.0.0-alpha.33",
+    "@react-navigation/native": "^5.0.0-alpha.27",
+    "@react-navigation/stack": "^5.0.0-alpha.61",
     "@ui-kitten/components": "^4.4.0-beta.1",
     "@ui-kitten/date-fns": "^4.4.0-beta.1",
     "@ui-kitten/eva-icons": "^4.4.0-beta.1",

src/components/icons.tsx

@@ -14,6 +14,10 @@ export const ColorPaletteIcon = (style: ImageStyle): IconElement => (
   <Icon {...style} name='color-palette-outline'/>
 );
 
+export const CloseIcon = (style: ImageStyle): IconElement => (
+  <Icon {...style} name='close'/>
+);
+
 export const GithubIcon = (style: ImageStyle): IconElement => (
   <Icon {...style} name='github'/>
 );

src/scenes/auth/sign-up-1/index.tsx

@@ -112,6 +112,7 @@ export default ({ navigation }): React.ReactElement => {
         <Datepicker
           style={styles.formInput}
           placeholder='18/10/1995'
+          label='Date of Birth'
           date={dob}
           onSelect={setDob}
         />

src/scenes/components/autocomplete/autocomplete.component.tsx

@@ -4,6 +4,7 @@ import { AutocompleteShowcase } from './autocomplete-showcase.component';
 import { autocompleteSettings, autocompleteShowcase, AutocompleteShowcaseOption } from './type';
 import { ShowcaseContainer } from '../../../components/showcase-container.component';
 
+
 export const AutocompleteScreen = ({ navigation }): React.ReactElement => {
 
   const renderItem = (props: AutocompleteProps<AutocompleteShowcaseOption>): AutocompleteElement => (

src/scenes/components/autocomplete/type.tsx

@@ -117,8 +117,6 @@ const settingsSection: ComponentShowcaseSection = {
 export const autocompleteShowcase: ComponentShowcase = {
   title: 'Autocomplete',
   sections: [
-    defaultSection,
-    defaultSection,
     defaultSection,
     accessoriesSection,
     settingsSection,

src/scenes/components/components.component.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { Divider, TopNavigation, Input } from '@ui-kitten/components';
 import { SafeAreaLayout } from '../../components/safe-area-layout.component';
 import { MenuGridList } from '../../components/menu-grid-list.component';
-import { SearchIcon } from '../../components/icons';
+import { CloseIcon, SearchIcon } from '../../components/icons';
 import { ComponentData, data } from './data';
 
 export const ComponentsScreen = (props): React.ReactElement => {
@@ -18,6 +18,10 @@ export const ComponentsScreen = (props): React.ReactElement => {
     props.navigation.navigate(displayData[index].route);
   };
 
+  const onInputIconPress = (): void => {
+    setQuery('');
+  };
+
   return (
     <SafeAreaLayout
       style={styles.safeArea}
@@ -33,7 +37,8 @@ export const ComponentsScreen = (props): React.ReactElement => {
         value={query}
         onChangeText={setQuery}
         placeholder='Search'
-        icon={SearchIcon}
+        icon={query ? CloseIcon : SearchIcon}
+        onIconPress={onInputIconPress}
       />
       <MenuGridList
         data={displayData}

src/scenes/components/datepicker/datepicker-showcase.component.tsx

@@ -11,7 +11,7 @@ export const DatepickerShowcase = (props: DatepickerShowcaseProps): DatepickerEl
   return (
     <Datepicker
       {...props}
-      style={styles.datepicker}
+      style={[styles.datepicker, props.style]}
       date={date}
       onSelect={setDate}
     />

src/scenes/components/datepicker/type.tsx

@@ -1,13 +1,52 @@
 import React from 'react';
 import { ComponentShowcase, ComponentShowcaseItem, ComponentShowcaseSection } from '../../../model/showcase.model';
+import { StarIcon } from '../../../components/icons';
 
 const now: Date = new Date();
 
 const defaultDatepicker: ComponentShowcaseItem = {
   title: 'Default',
+  props: {},
+};
+
+const iconDatepicker: ComponentShowcaseItem = {
+  title: 'Icon',
+  props: {
+    ...defaultDatepicker.props,
+    icon: StarIcon,
+  },
+};
+
+const labelDatepicker: ComponentShowcaseItem = {
+  title: 'Label',
+  props: {
+    ...defaultDatepicker.props,
+    label: 'Date of Birth',
+  },
+};
+
+const captionDatepicker: ComponentShowcaseItem = {
+  title: 'Caption',
+  props: {
+    ...defaultDatepicker.props,
+    caption: 'Place your text',
+  },
+};
+
+const captionIconDatepicker: ComponentShowcaseItem = {
+  title: 'Caption Icon',
   props: {
-    min: new Date(now.getFullYear() - 12, 0, 1),
-    max: new Date(now.getFullYear() + 12, 0, 1),
+    ...captionDatepicker.props,
+    captionIcon: StarIcon,
+  },
+};
+
+const boundsDatepicker: ComponentShowcaseItem = {
+  title: 'Date Bounds',
+  props: {
+    ...defaultDatepicker.props,
+    min: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1),
+    max: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1),
   },
 };
 
@@ -18,9 +57,28 @@ const defaultSection: ComponentShowcaseSection = {
   ],
 };
 
+const accessoriesSection: ComponentShowcaseSection = {
+  title: 'Accessories',
+  items: [
+    iconDatepicker,
+    labelDatepicker,
+    captionDatepicker,
+    captionIconDatepicker,
+  ],
+};
+
+const settingsSection: ComponentShowcaseSection = {
+  title: 'Settings',
+  items: [
+    boundsDatepicker,
+  ],
+};
+
 export const datepickerShowcase: ComponentShowcase = {
   title: 'Datepicker',
   sections: [
     defaultSection,
+    accessoriesSection,
+    settingsSection,
   ],
 };

src/scenes/components/input/input-showcase.component.tsx

@@ -3,7 +3,7 @@ import { Input, InputElement, InputProps } from '@ui-kitten/components';
 
 export const InputShowcase = (props?: InputProps): InputElement => {
 
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState<string>(null);
 
   return (
     <Input

src/scenes/components/modal/modal-showcase.component.tsx

@@ -1,40 +1,37 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { Button, Modal, ModalProps, Text } from '@ui-kitten/components';
 
 export const ModalShowcase = (props: ModalProps): React.ReactElement => {
 
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = React.useState<boolean>(false);
 
   const toggleModal = (): void => {
     setVisible(!visible);
   };
 
   return (
-    <View style={styles.container}>
+    <React.Fragment>
       <Button onPress={toggleModal}>
-        Show Modal
+        TOGGLE MODAL
       </Button>
       <Modal
         {...props}
         visible={visible}
         onBackdropPress={toggleModal}>
-        <Text>Hi! This is Modal</Text>
+        <Text>Hi! I'm Modal!</Text>
         <Button
           style={styles.button}
           onPress={toggleModal}>
-          Hide me
+          TOGGLE MODAL
         </Button>
       </Modal>
-    </View>
+    </React.Fragment>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'space-between',
-  },
   button: {
-    marginTop: 12,
+    marginTop: 4,
   },
 });

src/scenes/components/modal/type.ts

@@ -2,21 +2,17 @@ import { StyleSheet } from 'react-native';
 import { ComponentShowcase, ComponentShowcaseItem, ComponentShowcaseSection } from '../../../model/showcase.model';
 
 const styles = StyleSheet.create({
-  modal: {
-    backgroundColor: '#636e80',
-    width: 200,
-    height: 200,
-    padding: 12,
-    alignItems: 'center',
+  container: {
     justifyContent: 'center',
+    alignItems: 'center',
     borderRadius: 8,
+    padding: 8,
+    backgroundColor: '#8F9BB3',
   },
-  backdropStyle: {
-    backgroundColor: 'black',
-    opacity: 0.5,
+  backdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
-  customModalPosition: {
-    left: 100,
+  customPosition: {
     top: 100,
   },
 });
@@ -26,75 +22,50 @@ const defaultModal: ComponentShowcaseItem = {
   props: {},
 };
 
-const defaultSection: ComponentShowcaseSection = {
-  title: 'Default Modal',
-  items: [
-    defaultModal,
-  ],
-};
-
-const customStyledModal: ComponentShowcaseItem = {
+const styledModal: ComponentShowcaseItem = {
   title: 'Styled Modal',
   props: {
-    style: styles.modal,
+    ...defaultModal.props,
+    style: styles.container,
   },
 };
 
-const customStyledModalBackdrop: ComponentShowcaseItem = {
-  title: 'Styled Backdrop',
+const customPositionModal: ComponentShowcaseItem = {
+  title: 'Custom Position',
   props: {
-    style: styles.modal,
-    backdropStyle: styles.backdropStyle,
+    ...defaultModal.props,
+    style: [styles.container, styles.customPosition],
   },
 };
 
-const customModalPosition: ComponentShowcaseItem = {
-  title: 'Custom Position',
+const styledBackdropModal: ComponentShowcaseItem = {
+  title: 'Styled Backdrop',
   props: {
-    style: [styles.customModalPosition, styles.modal],
+    ...styledModal.props,
+    backdropStyle: styles.backdrop,
   },
 };
 
-const customStyledSection: ComponentShowcaseSection = {
-  title: 'Styling',
+const defaultSection: ComponentShowcaseSection = {
+  title: 'Default Modal',
   items: [
-    customStyledModal,
-    customStyledModalBackdrop,
-    customModalPosition,
+    defaultModal,
   ],
 };
 
-const customModalBackdropAllowed: ComponentShowcaseItem = {
-  title: 'Close On Backdrop: true',
-  props: {
-    allowBackdrop: true,
-    style: styles.modal,
-    backdropStyle: styles.backdropStyle,
-  },
-};
-
-const customModalBackdropNotAllowed: ComponentShowcaseItem = {
-  title: 'Close On Backdrop: false',
-  props: {
-    closeOnBackdrop: false,
-    style: styles.modal,
-    backdropStyle: styles.backdropStyle,
-  },
-};
-
-const customBackdropAllowingSection: ComponentShowcaseSection = {
-  title: 'Backdrop Closing Permissions',
+const stylingSection: ComponentShowcaseSection = {
+  title: 'Styling',
   items: [
-    customModalBackdropAllowed,
-    customModalBackdropNotAllowed,
+    styledModal,
+    styledBackdropModal,
+    customPositionModal,
   ],
 };
 
 export const modalShowcase: ComponentShowcase = {
   title: 'Modal',
   sections: [
     defaultSection,
-    customStyledSection,
-    customBackdropAllowingSection,
+    stylingSection,
   ],
 };

src/scenes/components/overflow-menu/type.tsx

@@ -70,7 +70,6 @@ const styledBackdropOverflowMenu: ComponentShowcaseItem = {
   title: 'Styled backdrop',
   props: {
     data: withIconMenuItems,
-    allowBackdrop: true,
     backdropStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
   },
 };

src/scenes/components/popover/popover-showcase.component.tsx

@@ -24,7 +24,7 @@ export const PopoverShowcase = (props: PopoverProps): PopoverElement => {
       content={renderPopoverContent()}
       onBackdropPress={togglePopover}>
       <Button onPress={togglePopover}>
-        SHOW POPOVER
+        TOGGLE POPOVER
       </Button>
     </Popover>
   );