@adiraku/react-native-ui 1.2.7 → 1.2.8-canary-1

package/lib/typescript/icons/vehicles/IconMinus.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { IconProps } from '../../types';
-export declare const IconMinus: (props: IconProps) => JSX.Element;
-export declare const IconMinusFilled: (props: IconProps) => JSX.Element;
+export declare const IconMinus: (props: IconProps) => React.JSX.Element;
+export declare const IconMinusFilled: (props: IconProps) => React.JSX.Element;
 //# sourceMappingURL=IconMinus.d.ts.map

package/lib/typescript/icons/vehicles/IconMinus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMinus.d.ts","sourceRoot":"","sources":["../../../../src/icons/vehicles/IconMinus.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,eAAO,MAAM,SAAS,UAAW,SAAS,gBAyBzC,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,SAAS,gBAyB/C,CAAC"}
+{"version":3,"file":"IconMinus.d.ts","sourceRoot":"","sources":["../../../../src/icons/vehicles/IconMinus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,eAAO,MAAM,SAAS,UAAW,SAAS,sBAyBzC,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,SAAS,sBAyB/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adiraku/react-native-ui",
-  "version": "1.2.7",
+  "version": "1.2.8-canary-1",
   "description": "UI library for Adiraku apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -108,7 +108,15 @@
   },
   "eslintIgnore": [
     "node_modules/",
-    "lib/"
+    "lib/",
+    "example/node_modules/",
+    "example/storybook-static/",
+    "example/android/",
+    "example/ios/",
+    "storybookwebpreview/node_modules/",
+    "storybookwebpreview/storybook-static/",
+    "storybookwebpreview/android/",
+    "storybookwebpreview/ios/"
   ],
   "react-native-builder-bob": {
     "source": "src",

package/src/components/ActionList/ActionList.component.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, TouchableHighlight } from 'react-native';
+
+import { Typography } from '../typography/typography.component';
+import { getStyle } from './ActionList.styles';
+
+import type { ActionListProps } from './ActionList.type';
+import { Palettes } from '../../themes';
+
+const ActionList: React.FC<ActionListProps> = (props) => {
+  const {
+    onPress = () => {},
+    title,
+    description,
+    textStyles,
+    disabled = false,
+    leadingComponent,
+    trailingComponent,
+    containerStyle,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyle({
+    ...props,
+  });
+
+  return (
+    <TouchableHighlight
+      onPress={onPress}
+      disabled={disabled}
+      {...rest}
+      underlayColor={Palettes.grey[50]}
+    >
+      <View style={[computedStyle.container, containerStyle]}>
+        {leadingComponent && (
+          <View style={computedStyle.leadingWrapper}>{leadingComponent}</View>
+        )}
+        <View style={computedStyle.textContainer}>
+          <Typography
+            variant={'subtitle2'}
+            textStyles={{ ...computedStyle.title, ...textStyles }}
+          >
+            {title}
+          </Typography>
+          <Typography
+            variant={'body2'}
+            textStyles={{ ...computedStyle.description, ...textStyles }}
+          >
+            {description}
+          </Typography>
+        </View>
+        {trailingComponent && (
+          <View style={computedStyle.trailingWrapper}>{trailingComponent}</View>
+        )}
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+export { ActionList };

package/src/components/ActionList/ActionList.styles.tsx

@@ -0,0 +1,66 @@
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Spacing } from '../../themes';
+import type { ActionListProps } from './ActionList.type';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  title?: TextStyle;
+  description?: TextStyle;
+  textContainer?: TextStyle;
+  leadingWrapper?: ViewStyle;
+  trailingWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: ActionListProps) => {
+  const { disabled, isLast } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    paddingVertical: 16,
+    paddingHorizontal: disabled ? 16 : 0,
+    borderBottomColor: Palettes.black[400],
+    borderBottomWidth: disabled || isLast ? 0 : 0.5,
+    backgroundColor: disabled ? Palettes.grey[50] : 'transparent',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+    minWidth: 350,
+  };
+  computedStyle.title = {
+    textAlign: 'center',
+    fontWeight: '600',
+    fontSize: 14,
+    lineHeight: 21,
+    color: disabled ? Palettes.grey[500] : Palettes.black[900],
+  };
+  computedStyle.description = {
+    textAlign: 'center',
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: 21,
+    color: disabled ? Palettes.grey[500] : Palettes.black[900],
+  };
+
+  computedStyle.textContainer = {
+    alignItems: 'flex-start',
+    flex: 1,
+  };
+
+  computedStyle.leadingWrapper = {
+    marginRight: Spacing[16],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.trailingWrapper = {
+    marginLeft: Spacing[16],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/ActionList/ActionList.type.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import {
+  TouchableWithoutFeedbackProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+export type ActionListProps = {
+  /**
+   * Title of the component
+   * @requires
+   */
+  title: String;
+  /**
+   * Subtitle of the component
+   * @requires
+   */
+  description: String;
+  /**
+   * The description text of the content
+   * @default null
+   */
+  /**
+   * A slot placed on the left side of the component. Could be used to pass a custom Icon or component
+   * @default null
+   */
+  leadingComponent?: ReactNode;
+  /**
+   * A slot placed on the right side of the component. Could be used to pass a custom Icon or component
+   * @default null
+   */
+  trailingComponent?: ReactNode;
+  /**
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * A mark to determine if the action is on the last index of the list
+   * @default false
+   */
+  isLast?: boolean;
+  textStyles?: TextStyle;
+  containerStyle?: ViewStyle;
+} & Omit<TouchableWithoutFeedbackProps, 'style'>;

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

@@ -175,7 +175,14 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
                 </Typography>
               </Animated.View>
             )}
-            <View style={computedStyle.inputWrapper}>
+            <View
+              style={[
+                computedStyle.inputWrapper,
+                !!selectedObject() &&
+                  !isError &&
+                  !errorMessage && { borderColor: Palettes.black[900] },
+              ]}
+            >
               <Typography
                 variant="body2"
                 style={[computedStyle.textField]}

package/src/components/CheckBoxInput/CheckBoxInput.style.tsx

@@ -48,7 +48,7 @@ export const getStyle = (props: CheckboxInputProps) => {
   computedStyle.label = {
     color: stateColor.text,
     backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
+      !editable || disabled ? Palettes.grey[50] : Palettes.white[50],
     paddingHorizontal: Spacing[4],
     borderRadius: Radius[4],
     marginLeft: Spacing[8],
@@ -62,7 +62,7 @@ export const getStyle = (props: CheckboxInputProps) => {
     borderWidth: Radius.border,
     borderColor: stateColor.border,
     backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
+      !editable || disabled ? Palettes.grey[50] : Palettes.white[50],
     borderRadius: Radius[8],
     padding: Spacing[8],
     width: '100%',

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

@@ -45,6 +45,7 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
     customRadioInput,
     customItemSeparator = <Divider />,
     testID,
+    onShow,
     ...rest
   } = props;
 
@@ -119,6 +120,9 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
   const openBottomSheet = () => {
     if (!disabled && editable) {
       ref.current?.open();
+      if (onShow) {
+        onShow();
+      }
     }
   };
 
@@ -147,7 +151,14 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
                 </Typography>
               </Animated.View>
             )}
-            <View style={computedStyle.inputWrapper}>
+            <View
+              style={[
+                computedStyle.inputWrapper,
+                !!selectedObject() &&
+                  !isError &&
+                  !errorMessage && { borderColor: Palettes.black[900] },
+              ]}
+            >
               <Typography
                 variant="body2"
                 style={[computedStyle.textField]}

package/src/components/RadioInput/RadioInput.style.tsx

@@ -48,7 +48,7 @@ export const getStyle = (props: RadioInputProps) => {
   computedStyle.label = {
     color: stateColor.text,
     backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
+      !editable || disabled ? Palettes.grey[50] : Palettes.white[50],
     paddingHorizontal: Spacing[4],
     borderRadius: Radius[4],
     marginLeft: Spacing[8],
@@ -62,7 +62,7 @@ export const getStyle = (props: RadioInputProps) => {
     borderWidth: Radius.border,
     borderColor: stateColor.border,
     backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
+      !editable || disabled ? Palettes.grey[50] : Palettes.white[50],
     borderRadius: Radius[8],
     padding: Spacing[8],
     width: '100%',

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

@@ -57,6 +57,12 @@ export interface RadioInputProps extends TouchableWithoutFeedbackProps {
   customRadioInput?: (props: RadioItemPropsComponent) => any;
 
   customItemSeparator?: any;
+
+  /**
+   * 
+   * A Callback that called on modal option show
+   */
+  onShow?: () => void;
 }
 
 export type RadioItemProps = {

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

@@ -1,33 +1,73 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { TextInput } from 'react-native';
-
 import { getStyle } from './TextArea.style';
-import { Palettes } from '../../themes';
-import { Typography } from '../typography/typography.component';
-
 import type { TextAreaProps } from './TextArea.type';
+import MaskInput from 'react-native-mask-input';
+import { Typography } from '../typography/typography.component';
+import { Animated } from 'react-native';
+import { Palettes, Spacing } from '../../themes';
+import type { LayoutChangeEvent } from 'react-native';
 import type { NativeSyntheticEvent } from 'react-native';
 import type { TextInputFocusEventData } from 'react-native';
 
 const TextArea: React.FunctionComponent<TextAreaProps> = (props) => {
   const {
-    label = '',
-    value = '',
-    helperMessage = '',
-    counter = 0,
+    value,
+    label,
+    onBlur = () => null,
+    onFocus = () => null,
     errorMessage,
+    helperMessage,
     helperMessageProps,
     isError,
-    onBlur = () => null,
-    onFocus = () => null,
+    counter = 0,
+    numberOfLines = 3,
     ...rest
   } = props;
 
+  const [labelWidth, setLabelWidth] = React.useState(0);
   const [focused, setFocused] = React.useState(false);
 
   const computedStyle = getStyle(props, focused);
 
+  const animation = React.useRef(new Animated.Value(0));
+  const scale = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0.8],
+  });
+  const translateY = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -30],
+  });
+  const translateX = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, labelWidth * -0.1],
+  });
+
+  const animate = (toValue: 0 | 1) =>
+    Animated.spring(animation.current, {
+      useNativeDriver: true,
+      toValue,
+    }).start();
+
+  React.useEffect(() => {
+    if (focused || !!value) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [value, focused]);
+
+  const getNumberOfLines = React.useMemo(() => {
+    const defaultNumberOfLines = 3;
+    if (numberOfLines < 2) {
+      console.warn('numberOfLines should not be lower than 2, Please use TextInput instead')
+      return defaultNumberOfLines
+    }
+    
+    return numberOfLines
+  }, [numberOfLines])
+
   const handleOnFocus = (
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
@@ -37,35 +77,59 @@ const TextArea: React.FunctionComponent<TextAreaProps> = (props) => {
   const handleOnBlur = (
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
-    if (value === '') {
-      onBlur(event);
-    }
+    onBlur(event);
     setFocused(false);
   };
 
+  const getLabelWidth = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width + 24);
+  };
+
   return (
-    <View style={computedStyle.fieldContainer}>
-      <Typography variant="body2" style={computedStyle.label}>
-        {label}
-      </Typography>
-      <View style={computedStyle.fieldWrapper}>
-        <TextInput
-          numberOfLines={3}
-          multiline={true}
-          textAlignVertical="top"
-          style={computedStyle.TextInput}
-          value={value}
-          placeholderTextColor={Palettes.grey[500]}
-          onBlur={handleOnBlur}
-          onFocus={handleOnFocus}
-          {...rest}
-        />
-        {counter > 0 && (
-          <Typography
-            variant="caption"
-            style={computedStyle.counter}
-          >{`${value.length}/${counter}`}</Typography>
+    <View style={computedStyle.fieldWrapper}>
+      <View style={computedStyle.fieldContainer}>
+        {!!label && (
+          <View style={computedStyle.labelAnimationContainer}>
+            <Animated.View
+              style={[
+                computedStyle.labelContainer,
+                {
+                  transform: [{ scale }, { translateY }, { translateX }],
+                },
+              ]}
+              onLayout={getLabelWidth}
+              pointerEvents="none"
+            >
+              <Typography variant="body2" style={computedStyle.label}>
+                {label}
+              </Typography>
+            </Animated.View>
+          </View>
         )}
+        <View
+          style={[
+            computedStyle.inputWrapper,
+            { height: 11 + Spacing[8] * 2 + numberOfLines * 17 },
+            !!value && { borderColor: Palettes.black[900] },
+          ]}
+        >
+          <MaskInput
+            value={value}
+            style={[computedStyle.textField]}
+            onFocus={handleOnFocus}
+            onBlur={handleOnBlur}
+            placeholderTextColor={focused ? Palettes.black[500] : 'transparent'}
+            numberOfLines={getNumberOfLines}
+            multiline
+            {...rest}
+          />
+          {counter > 0 && (
+            <Typography style={computedStyle.counter} variant="caption">
+              {`${value?.length}/${counter}`}
+            </Typography>
+          )}
+        </View>
       </View>
       {errorMessage || helperMessage ? (
         <Typography

package/src/components/TextArea/TextArea.style.tsx

@@ -5,11 +5,13 @@ import type { TextAreaProps } from './TextArea.type';
 import { Palettes, Radius, Spacing } from '../../themes';
 
 interface ComputedStyleProps {
+  fieldWrapper?: ViewStyle;
   fieldContainer?: ViewStyle;
-  container?: ViewStyle;
+  labelContainer?: ViewStyle;
+  labelAnimationContainer?: ViewStyle;
   label?: TextStyle;
-  fieldWrapper?: ViewStyle;
-  TextInput?: TextStyle;
+  inputWrapper?: ViewStyle;
+  textField?: TextStyle;
   messageHelper?: TextStyle;
   counter?: TextStyle;
   inputIconWrapper?: ViewStyle;
@@ -18,8 +20,6 @@ interface ComputedStyleProps {
 export const getStyle = (props: TextAreaProps, isFocused: boolean) => {
   const { editable = true, isError, errorMessage } = props;
 
-  const computedStyle: ComputedStyleProps = {};
-
   const stateColor =
     isError || errorMessage
       ? { text: Palettes.red[500], border: Palettes.red[500] }
@@ -28,40 +28,75 @@ export const getStyle = (props: TextAreaProps, isFocused: boolean) => {
           border: isFocused ? Palettes.grey[900] : Palettes.grey[200],
         };
 
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.fieldWrapper = {
+    width: '100%',
+  };
+
   computedStyle.fieldContainer = {
+    alignItems: 'flex-start',
+    justifyContent: 'center',
     width: '100%',
   };
 
+  computedStyle.labelAnimationContainer = {
+    height: 48,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 99,
+  };
+
+  computedStyle.labelContainer = {
+    zIndex: 99,
+    position: 'absolute',
+  };
+
   computedStyle.label = {
-    color: Palettes.black[900],
+    color: editable ? Palettes.black[900] : Palettes.grey[500],
+    backgroundColor: !editable ? Palettes.grey[50] : Palettes.white[50],
+    paddingHorizontal: Spacing[4],
+    borderRadius: Radius[4],
+    marginLeft: Spacing[8],
   };
 
-  computedStyle.fieldWrapper = {
+  computedStyle.inputWrapper = {
     borderWidth: Radius.border,
-    borderRadius: Radius[8],
     borderColor: stateColor.border,
-    padding: Spacing[12],
-    backgroundColor: editable ? Palettes.white[50] : Palettes.grey[50],
-    marginVertical: Spacing[8],
+    backgroundColor: !editable ? Palettes.grey[50] : Palettes.white[50],
+    borderRadius: Radius[8],
+    padding: Spacing[8],
+    width: '100%',
   };
 
-  computedStyle.TextInput = {
-    height: 72,
+  computedStyle.textField = {
+    flex: 1,
+    color: editable ? Palettes.black[900] : Palettes.grey[500],
     padding: 0,
     margin: 0,
     overflow: 'visible',
     fontSize: 14,
     lineHeight: Platform.OS === 'ios' ? 0 : 21,
     fontFamily: 'Montserrat-Regular',
-    color: Palettes.black[900],
+    textAlignVertical: 'top',
+  };
+
+  computedStyle.messageHelper = {
+    alignSelf: 'flex-start',
+    marginTop: Spacing[8],
+    color: stateColor.text,
   };
 
   computedStyle.counter = {
+    color: isFocused ? Palettes.black[900] : Palettes.grey[500],
     textAlign: 'right',
   };
 
-  computedStyle.messageHelper = {
-    color: stateColor.text,
+  computedStyle.inputIconWrapper = {
+    marginLeft: Spacing[4],
   };
 
   return StyleSheet.create(computedStyle);

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

@@ -1,7 +1,7 @@
-import type { TextInput } from 'react-native';
+import { MaskInputProps } from 'react-native-mask-input';
 import { TypographyProps } from '../typography/typography.type';
 
-export interface TextAreaProps extends React.ComponentProps<typeof TextInput> {
+export interface TextAreaProps extends MaskInputProps {
   /**
    * A string that specifies the label text for the input field.
    */
@@ -28,7 +28,7 @@ export interface TextAreaProps extends React.ComponentProps<typeof TextInput> {
   errorMessage?: string;
 
   /**
-   * A number that spesified tha max character to be input.
+   * A number that spesified tha max character to be input, hidden if inputIcon props available.
    */
   counter?: number;
 }

package/src/components/TextInput/TextInput.style.tsx

@@ -45,8 +45,8 @@ export const getStyle = (props: TextInputProps, isFocused: boolean) => {
   };
 
   computedStyle.label = {
-    color: stateColor.text,
-    backgroundColor: !editable ? Palettes.grey[50] : Palettes.whiteDark[50],
+    color: editable ? Palettes.black[900] : Palettes.grey[500],
+    backgroundColor: !editable ? Palettes.grey[50] : Palettes.white[50],
     paddingHorizontal: Spacing[4],
     borderRadius: Radius[4],
     marginLeft: Spacing[8],
@@ -59,7 +59,7 @@ export const getStyle = (props: TextInputProps, isFocused: boolean) => {
     alignItems: 'center',
     borderWidth: Radius.border,
     borderColor: stateColor.border,
-    backgroundColor: !editable ? Palettes.grey[50] : Palettes.whiteDark[50],
+    backgroundColor: !editable ? Palettes.grey[50] : Palettes.white[50],
     borderRadius: Radius[8],
     padding: Spacing[8],
     width: '100%',
@@ -67,7 +67,7 @@ export const getStyle = (props: TextInputProps, isFocused: boolean) => {
 
   computedStyle.textField = {
     flex: 1,
-    color: Palettes.black[900],
+    color: editable ? Palettes.black[900] : Palettes.grey[500],
     padding: 0,
     margin: 0,
     overflow: 'visible',
@@ -78,13 +78,13 @@ export const getStyle = (props: TextInputProps, isFocused: boolean) => {
 
   computedStyle.messageHelper = {
     alignSelf: 'flex-start',
-    marginLeft: 12,
+    marginTop: Spacing[8],
     color: stateColor.text,
   };
 
   computedStyle.counter = {
     marginLeft: Spacing[4],
-    color: Palettes.grey[500],
+    color: isFocused ? Palettes.black[900] : Palettes.grey[500],
   };
 
   computedStyle.inputIconWrapper = {

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { ActionList } from './ActionList/ActionList.component';
 export { Button } from './button/button.component';
 export { Label } from './label/label.component';
 export { BaseComponent } from './base/base.component';
@@ -37,7 +38,9 @@ export {
   formatWithMask,
   useMaskedInputProps,
 } from 'react-native-mask-input';
+export { SelectionCard } from './selection-card/SelectionCard.component';
 
+export type { ActionListProps } from './ActionList/ActionList.type';
 export type { ButtonProps } from './button/button.type';
 export type { TextInputProps } from './TextInput/TextInput.type';
 export type { SliderIndicatorProps } from './slider-indicator/slider-indicator.type';
@@ -49,3 +52,4 @@ 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';
+export type { SelectionCardProps } from './selection-card/SelectionCard.type';