@adiraku/react-native-ui 1.2.0 → 1.2.2

package/src/components/Appbar/Appbar.style.tsx

@@ -1,25 +1,32 @@
 import { StyleSheet } from 'react-native';
 
 import { Palettes, Radius, Spacing } from '../../themes';
+import { AppbarProps } from './Appbar.type';
 
 import type { ViewStyle } from 'react-native';
 import { TextStyle } from 'react-native';
 
 interface ComputedStyleProps {
   container?: ViewStyle;
+  wrapperContainer?: ViewStyle;
   iconWrapper?: ViewStyle;
   contentWrapper?: ViewStyle;
   title?: TextStyle;
 }
 
-export const getStyle = () => {
+export const getStyle = (props: AppbarProps) => {
+  const { statusBarHeight = 0, backgroundColor = Palettes.white[50] } = props;
   const computedStyle: ComputedStyleProps = {};
 
   computedStyle.container = {
+    paddingTop: statusBarHeight,
+    backgroundColor,
+  };
+
+  computedStyle.wrapperContainer = {
     width: '100%',
     height: 56,
     padding: Spacing[16],
-    backgroundColor: Palettes.white[50],
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',

package/src/components/Appbar/Appbar.type.ts

@@ -18,8 +18,12 @@ export interface AppbarProps {
 
   containerStyle?: ViewStyle;
 
+  backgroundColor?: ViewStyle['backgroundColor'];
+
   withShadow?: boolean;
 
+  statusBarHeight?: number;
+
   buttonActions?: {
     icon: ReactNode;
     onPress: () => void;

package/src/components/BottomSheet/BottomSheet.component.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
-import { Animated, Dimensions, PanResponder, View } from 'react-native';
+import {
+  Animated,
+  Dimensions,
+  PanResponder,
+  TouchableHighlight,
+  View,
+} from 'react-native';
 import Modal from 'react-native-modal';
 
 import { getStyle } from './BottomSheet.style';
 import { Typography } from '../typography/typography.component';
 
 import type { BottomSheetProps } from './BottomSheet.type';
-import { TouchableHighlight } from 'react-native';
 
 type BottomSheetRefHandle = {
   open: () => void;
@@ -108,61 +113,35 @@ const BottomSheet = React.forwardRef<BottomSheetRefHandle, BottomSheetProps>(
       return (
         <View style={[computedStyle.sheetHeaderWrapper]}>
           <View style={[computedStyle.sheetHeader]}>
-            <View
-              style={[
-                {
-                  maxWidth: ((deviceWindow.width - 32) / 8) * 2,
-                  minWidth: ((deviceWindow.width - 32) / 8) * 2,
-                },
-              ]}
-            >
-              {!!dismissIcon && (
-                <TouchableHighlight
-                  onPress={handleDismiss}
-                  style={[computedStyle.sheetDismissIconWrapper]}
-                  underlayColor={'transparent'}
-                  {...dismissIconProps}
-                >
-                  {dismissIcon}
-                </TouchableHighlight>
-              )}
-            </View>
-            <View
-              style={[
-                {
-                  maxWidth: ((deviceWindow.width - 32) / 8) * 4,
-                  minWidth: ((deviceWindow.width - 32) / 8) * 4,
-                },
-              ]}
-            >
-              {!!title && (
-                <Typography
-                  variant="subtitle1"
-                  style={[computedStyle.textCenter]}
-                  numberOfLines={2}
-                  {...titleProps}
-                >
-                  {title}
-                </Typography>
-              )}
-            </View>
-            <View
-              style={[
-                {
-                  maxWidth: ((deviceWindow.width - 32) / 8) * 2,
-                  minWidth: ((deviceWindow.width - 32) / 8) * 2,
-                },
-                computedStyle.sheetActionWrapper,
-              ]}
-            >
-              {action || null}
-            </View>
+            {!!dismissIcon && (
+              <TouchableHighlight
+                onPress={handleDismiss}
+                style={[computedStyle.sheetDismissIconWrapper]}
+                underlayColor={'transparent'}
+                {...dismissIconProps}
+              >
+                {dismissIcon}
+              </TouchableHighlight>
+            )}
+            {!!title && (
+              <Typography
+                variant="subtitle1"
+                style={[computedStyle.textCenter]}
+                numberOfLines={2}
+                {...titleProps}
+              >
+                {title}
+              </Typography>
+            )}
+            {action && (
+              <View style={[computedStyle.sheetActionWrapper]}>{action}</View>
+            )}
           </View>
           {!!subtitle && (
             <Typography
               variant="body2"
               numberOfLines={2}
-              style={[computedStyle.textCenter]}
+              style={[computedStyle.textCenter, computedStyle.subtitleText]}
               {...subtitleProps}
             >
               {subtitle}
@@ -186,7 +165,7 @@ const BottomSheet = React.forwardRef<BottomSheetRefHandle, BottomSheetProps>(
           {!!dismissIcon && (
             <TouchableHighlight
               onPress={handleDismiss}
-              style={[computedStyle.sheetDismissIconWrapper, { position: 'absolute', left: 16, zIndex:99 }]}
+              style={[computedStyle.sheetDismissIconWrapper]}
               underlayColor={'transparent'}
               {...dismissIconProps}
             >

package/src/components/BottomSheet/BottomSheet.style.tsx

@@ -18,6 +18,7 @@ interface ComputedStyleProps {
   sheetActionWrapper?: ViewStyle;
   largeIconContainer?: ViewStyle;
   largeIconAbsoluteWrapper?: ViewStyle;
+  subtitleText?: TextStyle;
 }
 
 export const getStyle = () => {
@@ -57,7 +58,7 @@ export const getStyle = () => {
   computedStyle.sheetHeader = {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
   };
 
   computedStyle.sheetHeaderWrapper = {
@@ -66,10 +67,14 @@ export const getStyle = () => {
   };
   computedStyle.sheetDismissIconWrapper = {
     padding: 4,
+    position: 'absolute',
+    left: 0,
+    zIndex: 99,
   };
   computedStyle.sheetActionWrapper = {
-    flexDirection: 'row',
     justifyContent: 'flex-end',
+    position: 'absolute',
+    right: 0,
   };
 
   computedStyle.textCenter = {
@@ -85,5 +90,9 @@ export const getStyle = () => {
     bottom: 0,
   };
 
+  computedStyle.subtitleText = {
+    marginTop: Spacing[8],
+  };
+
   return StyleSheet.create(computedStyle);
 };

package/src/components/BottomSheet/BottomSheet.type.ts

@@ -3,12 +3,13 @@ import { ReactNode } from 'react';
 import type { TextProps, TouchableHighlightProps } from 'react-native';
 import type { ModalProps } from 'react-native-modal';
 
-export interface BottomSheetProps extends Omit<ModalProps, 'isVisible'> {
+export interface BottomSheetProps
+  extends Omit<Partial<ModalProps>, 'isVisible'> {
   onDismiss?: () => void;
 
   sheetHeader?: ReactNode;
 
-  title: string;
+  title?: string;
 
   titleProps?: TextProps;
 

package/src/components/CheckBoxInput/CheckBoxInput.component.tsx

@@ -31,6 +31,7 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
     label,
     errorMessage,
     helperMessage,
+    helperMessageProps,
     isError,
     disabled,
     editable = true,
@@ -46,6 +47,8 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
     onInputDismiss = () => {},
     customCheckboxInput,
     customItemSeparator = <Divider />,
+    testID = '',
+    ...rest
   } = props;
 
   const [labelWidth, setLabelWidth] = React.useState(0);
@@ -149,7 +152,11 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
 
   return (
     <>
-      <TouchableWithoutFeedback onPress={openBottomSheet}>
+      <TouchableWithoutFeedback
+        onPress={openBottomSheet}
+        testID={testID}
+        {...rest}
+      >
         <View style={computedStyle.fieldWrapper}>
           <View style={computedStyle.fieldContainer}>
             {!!label && (
@@ -180,7 +187,11 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
             </View>
           </View>
           {errorMessage || helperMessage ? (
-            <Typography variant="caption" style={computedStyle.messageHelper}>
+            <Typography
+              variant="caption"
+              style={computedStyle.messageHelper}
+              {...helperMessageProps}
+            >
               {errorMessage || ((!isError && helperMessage) as string)}
             </Typography>
           ) : null}
@@ -207,6 +218,7 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
                 data={item}
                 selectedValue={selectedValue}
                 onItemPress={onCheckboxItemPress}
+                testID={`${testID}_checkbox_item_${item.index}`}
               />
             );
           }}
@@ -232,6 +244,8 @@ function CheckboxItem({
   data,
   selectedValue,
   onItemPress = () => {},
+  testID,
+  ...rest
 }: CheckboxItemPropsComponent) {
   const { item } = data;
   const { label, value, disabled } = item;
@@ -242,6 +256,7 @@ function CheckboxItem({
       onPress={() => onItemPress(item)}
       underlayColor={Palettes.whiteDark[100]}
       disabled={disabled}
+      {...rest}
       {...item}
     >
       <View style={[computedStyle.checkboxItemWrapper]}>
@@ -253,6 +268,7 @@ function CheckboxItem({
             !!selectedValue?.some((selected) => selected.value === value)
           }
           disabled={disabled}
+          testID={testID}
         />
       </View>
     </TouchableHighlight>

package/src/components/CheckBoxInput/CheckBoxInput.type.ts

@@ -1,11 +1,13 @@
 import type { ReactNode } from 'react';
 
 import type { TouchableHighlightProps } from 'react-native';
+import type { TouchableWithoutFeedbackProps } from 'react-native';
 
 import type { BottomSheetProps } from '../BottomSheet/BottomSheet.type';
 import type { ButtonProps } from '../button/button.type';
+import { TypographyProps } from '../typography/typography.type';
 
-export interface CheckboxInputProps {
+export interface CheckboxInputProps extends TouchableWithoutFeedbackProps {
   /**
    * A string that specifies the label text for the input field.
    */
@@ -17,7 +19,7 @@ export interface CheckboxInputProps {
    * guidance to the user, such as formatting requirements or error messages.
    */
   helperMessage?: string;
-
+  helperMessageProps?: TypographyProps;
   /**
    * Indicate error state
    */
@@ -46,7 +48,7 @@ export interface CheckboxInputProps {
 
   saveInputLabel: string;
 
-  saveInputProps: ButtonProps;
+  saveInputProps?: ButtonProps;
 
   bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
 
@@ -65,10 +67,10 @@ export type CheckboxItemProps = {
   disabled?: boolean;
 } & TouchableHighlightProps;
 
-export type CheckboxItemPropsComponent = {
+export interface CheckboxItemPropsComponent extends TouchableHighlightProps {
   data: {
     item: CheckboxItemProps;
   };
   selectedValue?: CheckboxItemProps[];
   onItemPress?: (value: CheckboxItemProps) => void;
-};
+}

package/src/components/Checkbox/Checkbox.component.tsx

@@ -8,7 +8,7 @@ import { IconTick } from '../../icons';
 import { Palettes } from '../../themes';
 
 const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {
-  const { selected, disabled } = props;
+  const { selected, disabled, ...rest } = props;
 
   const computedStyle = getStyle();
 
@@ -20,6 +20,7 @@ const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {
           selected && computedStyle.outerSelected,
           disabled && computedStyle.outerDisabled,
         ]}
+        {...rest}
       >
         {selected && (
           <IconTick

package/src/components/Checkbox/Checkbox.type.ts

@@ -1,4 +1,6 @@
-export interface CheckboxProps {
+import { type ViewProps } from 'react-native';
+
+export interface CheckboxProps extends ViewProps {
   selected?: boolean;
 
   disabled?: boolean;

package/src/components/RadioButton/RadioButton.component.tsx

@@ -6,7 +6,7 @@ import { getStyle } from './RadioButton.style';
 import type { RadioButtonProps } from './RadioButton.type';
 
 const RadioButton: React.FunctionComponent<RadioButtonProps> = (props) => {
-  const { selected, disabled } = props;
+  const { selected, disabled, ...rest } = props;
 
   const computedStyle = getStyle();
 
@@ -14,6 +14,7 @@ const RadioButton: React.FunctionComponent<RadioButtonProps> = (props) => {
     <>
       <View
         style={[computedStyle.outer, disabled && computedStyle.outerDisabled]}
+        {...rest}
       >
         <View
           style={[

package/src/components/RadioButton/RadioButton.type.ts

@@ -1,4 +1,6 @@
-export interface RadioButtonProps {
+import { type ViewProps } from 'react-native';
+
+export interface RadioButtonProps extends ViewProps {
   selected?: boolean;
 
   disabled?: boolean;

package/src/components/RadioInput/RadioInput.component.tsx

@@ -29,6 +29,7 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
     label,
     errorMessage,
     helperMessage,
+    helperMessageProps,
     isError,
     disabled,
     editable = true,
@@ -43,6 +44,8 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
     onInputDismiss = () => {},
     customRadioInput,
     customItemSeparator = <Divider />,
+    testID,
+    ...rest
   } = props;
 
   const [labelWidth, setLabelWidth] = React.useState(0);
@@ -121,7 +124,11 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
 
   return (
     <>
-      <TouchableWithoutFeedback onPress={openBottomSheet}>
+      <TouchableWithoutFeedback
+        onPress={openBottomSheet}
+        testID={testID}
+        {...rest}
+      >
         <View style={computedStyle.fieldWrapper}>
           <View style={computedStyle.fieldContainer}>
             {!!label && (
@@ -152,7 +159,11 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
             </View>
           </View>
           {errorMessage || helperMessage ? (
-            <Typography variant="caption" style={computedStyle.messageHelper}>
+            <Typography
+              variant="caption"
+              style={computedStyle.messageHelper}
+              {...helperMessageProps}
+            >
               {errorMessage || ((!isError && helperMessage) as string)}
             </Typography>
           ) : null}
@@ -179,6 +190,7 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
                 data={item}
                 selectedValue={selectedValue}
                 onItemPress={onRadioItemPress}
+                testID={`${testID}_item_radio_${item.index}`}
               />
             );
           }}
@@ -204,6 +216,8 @@ function RadioItem({
   data,
   selectedValue,
   onItemPress = () => {},
+  testID,
+  ...rest
 }: RadioItemPropsComponent) {
   const { item } = data;
   const { label, value, disabled } = item;
@@ -214,6 +228,7 @@ function RadioItem({
       onPress={() => onItemPress(item)}
       underlayColor={Palettes.whiteDark[100]}
       disabled={disabled}
+      {...rest}
       {...item}
     >
       <View style={[computedStyle.radioItemWrapper]}>
@@ -223,6 +238,7 @@ function RadioItem({
         <RadioButton
           selected={value === selectedValue?.value}
           disabled={disabled}
+          testID={testID}
         />
       </View>
     </TouchableHighlight>

package/src/components/RadioInput/RadioInput.type.ts

@@ -1,11 +1,13 @@
 import type { ReactNode } from 'react';
 
 import type { TouchableHighlightProps } from 'react-native';
+import type { TouchableWithoutFeedbackProps } from 'react-native';
 
 import type { BottomSheetProps } from '../BottomSheet/BottomSheet.type';
 import type { ButtonProps } from '../button/button.type';
+import { TypographyProps } from '../typography/typography.type';
 
-export interface RadioInputProps {
+export interface RadioInputProps extends TouchableWithoutFeedbackProps {
   /**
    * A string that specifies the label text for the input field.
    */
@@ -17,7 +19,7 @@ export interface RadioInputProps {
    * guidance to the user, such as formatting requirements or error messages.
    */
   helperMessage?: string;
-
+  helperMessageProps?: TypographyProps;
   /**
    * Indicate error state
    */
@@ -46,7 +48,7 @@ export interface RadioInputProps {
 
   saveInputLabel: string;
 
-  saveInputProps: ButtonProps;
+  saveInputProps?: ButtonProps;
 
   bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
 
@@ -63,10 +65,10 @@ export type RadioItemProps = {
   disabled?: boolean;
 } & TouchableHighlightProps;
 
-export type RadioItemPropsComponent = {
+export interface RadioItemPropsComponent extends TouchableHighlightProps {
   data: {
     item: RadioItemProps;
   };
   selectedValue?: RadioItemProps;
   onItemPress?: (value: RadioItemProps) => void;
-};
+}

package/src/components/Tabs/Tabs.component.tsx

@@ -72,6 +72,7 @@ const Tabs: React.FunctionComponent<TabsProps> = (props) => {
     <View style={[computedStyle.container]}>
       {labels.map((label, idx) => (
         <TouchableOpacity
+          key={idx}
           onPress={() => onTabPress(idx)}
           style={[computedStyle.tabContainer]}
           onLayout={(event) => onLayout(event, idx)}

package/src/components/TextArea/TextArea.component.tsx

@@ -17,6 +17,7 @@ const TextArea: React.FunctionComponent<TextAreaProps> = (props) => {
     helperMessage = '',
     counter = 0,
     errorMessage,
+    helperMessageProps,
     isError,
     onBlur = () => null,
     onFocus = () => null,
@@ -67,7 +68,11 @@ const TextArea: React.FunctionComponent<TextAreaProps> = (props) => {
         )}
       </View>
       {errorMessage || helperMessage ? (
-        <Typography variant="caption" style={computedStyle.messageHelper}>
+        <Typography
+          variant="caption"
+          style={computedStyle.messageHelper}
+          {...helperMessageProps}
+        >
           {errorMessage || ((!isError && helperMessage) as string)}
         </Typography>
       ) : null}

package/src/components/TextArea/TextArea.type.ts

@@ -1,4 +1,5 @@
 import type { TextInput } from 'react-native';
+import { TypographyProps } from '../typography/typography.type';
 
 export interface TextAreaProps extends React.ComponentProps<typeof TextInput> {
   /**
@@ -12,6 +13,7 @@ export interface TextAreaProps extends React.ComponentProps<typeof TextInput> {
    * guidance to the user, such as formatting requirements or error messages.
    */
   helperMessage?: string;
+  helperMessageProps?: TypographyProps;
 
   /**
    * Indicate error state

package/src/components/TextInput/TextInput.component.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { getStyle } from './TextInput.style';
 import type { TextInputProps } from './TextInput.type';
-import { TextInput as RNTextInput } from 'react-native';
+import MaskInput from 'react-native-mask-input';
 import { Typography } from '../typography/typography.component';
 import { Animated } from 'react-native';
 import { Palettes } from '../../themes';
@@ -18,6 +18,7 @@ const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
     onFocus = () => null,
     errorMessage,
     helperMessage,
+    helperMessageProps,
     isError,
     counter = 0,
     inputIcon = null,
@@ -95,7 +96,7 @@ const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
           </Animated.View>
         )}
         <View style={computedStyle.inputWrapper}>
-          <RNTextInput
+          <MaskInput
             value={value}
             style={[computedStyle.textField]}
             onFocus={handleOnFocus}
@@ -113,7 +114,11 @@ const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
         </View>
       </View>
       {errorMessage || helperMessage ? (
-        <Typography variant="caption" style={computedStyle.messageHelper}>
+        <Typography
+          variant="caption"
+          style={computedStyle.messageHelper}
+          {...helperMessageProps}
+        >
           {errorMessage || ((!isError && helperMessage) as string)}
         </Typography>
       ) : null}

package/src/components/TextInput/TextInput.type.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
-import type { TextInput } from 'react-native';
+import { MaskInputProps } from 'react-native-mask-input';
+import { TypographyProps } from '../typography/typography.type';
 
-export interface TextInputProps extends React.ComponentProps<typeof TextInput> {
+export interface TextInputProps extends MaskInputProps {
   /**
    * A string that specifies the label text for the input field.
    */
@@ -13,6 +14,7 @@ export interface TextInputProps extends React.ComponentProps<typeof TextInput> {
    * guidance to the user, such as formatting requirements or error messages.
    */
   helperMessage?: string;
+  helperMessageProps?: TypographyProps;
 
   /**
    * Indicate error state

package/src/components/index.ts

@@ -15,6 +15,7 @@ export {
   BottomSheet,
   BottomSheetHandler,
 } from './BottomSheet/BottomSheet.component';
+export { SearchInput } from './search-input/search-input.component';
 export { RadioInput } from './RadioInput/RadioInput.component';
 export { CheckBoxInput } from './CheckBoxInput/CheckBoxInput.component';
 export { Checkbox } from './Checkbox/Checkbox.component';
@@ -25,6 +26,17 @@ export { Dot } from './dot/dot.component';
 export { InformationBox } from './information-box/information-box.component';
 export { RoundedTab } from './rounded-tab/rounded-tab.component';
 export { Countdown } from './countdown/countdown.component';
+export {
+  Mask,
+  MaskArray,
+  MaskInputProps,
+  MaskItem,
+  Masks,
+  UseMaskedInputProps,
+  createNumberMask,
+  formatWithMask,
+  useMaskedInputProps,
+} from 'react-native-mask-input';
 
 export type { ButtonProps } from './button/button.type';
 export type { TextInputProps } from './TextInput/TextInput.type';
@@ -36,3 +48,4 @@ export type { TextAreaProps } from './TextArea/TextArea.type';
 export type { StepperCounterProps } from './StepperCounter/StepperCounter.type';
 export type { DividerProps } from './Divider/Divider.type';
 export type { TabsProps } from './Tabs/Tabs.type';
+export type { SearchInputProps } from './search-input/search-input.type';