@adiraku/react-native-ui 0.1.14

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

@@ -0,0 +1,245 @@
+import * as React from 'react';
+import {
+  Animated,
+  FlatList,
+  View,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+import { getStyle } from './CheckBoxInput.style';
+import { Typography } from '../typography/typography.component';
+import { BottomSheet } from '../BottomSheet/BottomSheet.component';
+import { Button } from '../button/button.component';
+import { Palettes } from '../../themes';
+import { IconChevronDown } from '../../icons';
+import { Divider } from '../Divider/Divider.component';
+
+import type {
+  CheckboxInputProps,
+  CheckboxItemProps,
+} from './CheckBoxInput.type';
+import { Checkbox } from '../Checkbox/Checkbox.component';
+
+import type { BottomSheetHandler } from '../BottomSheet/BottomSheet.component';
+import type { LayoutChangeEvent } from 'react-native';
+
+const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
+  const {
+    value,
+    label,
+    errorMessage,
+    helperMessage,
+    isError,
+    disabled,
+    editable = true,
+    inputIcon = (
+      <IconChevronDown width={14} height={14} fill={Palettes.black[900]} />
+    ),
+    data,
+    onSaveInput = () => {},
+    saveInputLabel,
+    bottomSheetOpt,
+    selectionLimit,
+    onInputDismiss = () => {},
+  } = props;
+
+  const [labelWidth, setLabelWidth] = React.useState(0);
+  const [selectedValue, setSelectedValue] = React.useState<
+    CheckboxItemProps[] | undefined
+  >(value);
+
+  const computedStyle = getStyle(props);
+
+  const bottomSheetref = React.useRef<BottomSheetHandler>(null);
+
+  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();
+
+  const selectedObject = React.useCallback(() => {
+    const labels = value?.map((check) => {
+      const checkbox = data?.find((obj) => {
+        return obj.value === check.value;
+      });
+
+      return checkbox ? checkbox.label : null;
+    });
+
+    return labels?.join(', ');
+  }, [data, value]);
+
+  React.useEffect(() => {
+    if (selectedObject()) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [selectedObject]);
+
+  React.useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  const getLabelWidth = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width + 24);
+  };
+
+  const onCheckboxItemPress = (checkboxValue: CheckboxItemProps) => {
+    const index = selectedValue?.some(
+      (selected) => selected.value === checkboxValue.value
+    );
+    if (index) {
+      const arr = selectedValue?.filter(
+        (item) => item.value !== checkboxValue.value
+      );
+      setSelectedValue(arr);
+    } else {
+      if (
+        selectionLimit &&
+        selectionLimit > 0 &&
+        selectedValue?.length === selectionLimit
+      ) {
+        let temp = selectedValue;
+        temp.splice(0, 1);
+        setSelectedValue([...(temp || []), checkboxValue]);
+      } else {
+        setSelectedValue([...(selectedValue || []), checkboxValue]);
+      }
+    }
+  };
+
+  const handleOnSaveInput = () => {
+    onSaveInput(selectedValue);
+    onInputDismiss();
+    bottomSheetref.current?.close();
+  };
+
+  const openBottomSheet = () => {
+    if (!disabled && editable) {
+      bottomSheetref.current?.open();
+    }
+  };
+
+  return (
+    <>
+      <TouchableWithoutFeedback onPress={openBottomSheet}>
+        <View style={computedStyle.fieldWrapper}>
+          <View style={computedStyle.fieldContainer}>
+            <Animated.View
+              style={[
+                computedStyle.labelContainer,
+                {
+                  transform: [{ scale }, { translateY }, { translateX }],
+                },
+              ]}
+              onLayout={getLabelWidth}
+              pointerEvents="none"
+            >
+              <Typography variant="body2" style={computedStyle.label}>
+                {label}
+              </Typography>
+            </Animated.View>
+            <View style={computedStyle.inputWrapper}>
+              <Typography
+                variant="body2"
+                style={[computedStyle.textField]}
+                numberOfLines={1}
+              >
+                {selectedObject()}
+              </Typography>
+              {inputIcon}
+            </View>
+          </View>
+          {errorMessage || helperMessage ? (
+            <Typography variant="caption" style={computedStyle.messageHelper}>
+              {errorMessage || ((!isError && helperMessage) as string)}
+            </Typography>
+          ) : null}
+        </View>
+      </TouchableWithoutFeedback>
+      <BottomSheet
+        ref={bottomSheetref}
+        onDismiss={onInputDismiss}
+        {...bottomSheetOpt}
+      >
+        <FlatList
+          data={data}
+          renderItem={(item) => (
+            <CheckboxItem
+              data={item}
+              selectedValue={selectedValue}
+              onItemPress={onCheckboxItemPress}
+            />
+          )}
+          // eslint-disable-next-line react-native/no-inline-styles
+          contentContainerStyle={{ padding: 16 }}
+          // eslint-disable-next-line react/no-unstable-nested-components
+          ItemSeparatorComponent={() => <Divider />}
+        />
+        {/* eslint-disable-next-line react-native/no-inline-styles */}
+        <View style={{ padding: 16, backgroundColor: 'transparent' }}>
+          <Button
+            variant="primary"
+            label={saveInputLabel}
+            onPress={handleOnSaveInput}
+          />
+        </View>
+      </BottomSheet>
+    </>
+  );
+};
+
+function CheckboxItem({
+  data,
+  selectedValue,
+  onItemPress = () => {},
+}: {
+  data: {
+    item: CheckboxItemProps;
+  };
+  selectedValue?: CheckboxItemProps[];
+  onItemPress?: (value: CheckboxItemProps) => void;
+}) {
+  const { item } = data;
+  const computedStyle = getStyle({} as CheckboxInputProps);
+
+  return (
+    <TouchableHighlight
+      onPress={() => onItemPress(item)}
+      underlayColor={Palettes.whiteDark[100]}
+      disabled={item.disabled}
+    >
+      <View style={[computedStyle.checkboxItemWrapper]}>
+        <Typography variant="body2" numberOfLines={2}>
+          {item?.label}
+        </Typography>
+        <Checkbox
+          selected={
+            !!selectedValue?.some((selected) => selected.value === item.value)
+          }
+          disabled={item.disabled}
+        />
+      </View>
+    </TouchableHighlight>
+  );
+}
+
+export { CheckBoxInput };

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

@@ -0,0 +1,106 @@
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { CheckboxInputProps } from './CheckBoxInput.type';
+import { Palettes, Radius, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  fieldWrapper?: ViewStyle;
+  fieldContainer?: ViewStyle;
+  labelContainer?: ViewStyle;
+  label?: TextStyle;
+  inputWrapper?: ViewStyle;
+  textField?: TextStyle;
+  messageHelper?: TextStyle;
+  counter?: TextStyle;
+  inputIconWrapper?: ViewStyle;
+  checkboxItemWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: CheckboxInputProps) => {
+  const { editable = true, disabled = false, isError, errorMessage } = props;
+
+  const stateColor =
+    isError || errorMessage
+      ? { text: Palettes.red[500], border: Palettes.red[500] }
+      : {
+          text: Palettes.black[900],
+          border: Palettes.grey[200],
+        };
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.fieldWrapper = {
+    width: '100%',
+  };
+
+  computedStyle.fieldContainer = {
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    width: '100%',
+  };
+
+  computedStyle.labelContainer = {
+    zIndex: 99,
+    position: 'absolute',
+  };
+
+  computedStyle.label = {
+    color: stateColor.text,
+    backgroundColor:
+      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
+    paddingHorizontal: Spacing[4],
+    borderRadius: Radius[4],
+    marginLeft: Spacing[8],
+  };
+
+  computedStyle.inputWrapper = {
+    height: 48,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: Radius.border,
+    borderColor: stateColor.border,
+    backgroundColor:
+      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
+    borderRadius: Radius[8],
+    padding: Spacing[8],
+    width: '100%',
+  };
+
+  computedStyle.textField = {
+    flex: 1,
+    color: Palettes.black[900],
+    padding: 0,
+    margin: 0,
+    overflow: 'visible',
+    fontSize: 14,
+    lineHeight: 21,
+    fontFamily: 'Montserrat-Regular',
+  };
+
+  computedStyle.messageHelper = {
+    alignSelf: 'flex-start',
+    marginLeft: 12,
+    color: stateColor.text,
+  };
+
+  computedStyle.counter = {
+    marginLeft: Spacing[4],
+    color: Palettes.grey[500],
+  };
+
+  computedStyle.inputIconWrapper = {
+    marginLeft: Spacing[4],
+  };
+
+  computedStyle.checkboxItemWrapper = {
+    paddingVertical: Spacing[16],
+    borderRadius: Radius[8],
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

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

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import { BottomSheetProps } from '../BottomSheet/BottomSheet.type';
+
+export interface CheckboxInputProps {
+  /**
+   * A string that specifies the label text for the input field.
+   */
+  label: string;
+
+  /**
+   * A string that specifies a helper message to be displayed below the input field.
+   * This message can be used to provide additional information or
+   * guidance to the user, such as formatting requirements or error messages.
+   */
+  helperMessage?: string;
+
+  /**
+   * Indicate error state
+   */
+  isError?: boolean;
+
+  /**
+   * A string that specifies an error message to be displayed below the input field.
+   * When this prop is present, it will replace the helperMessage prop with the
+   * specified error message, regardless of the value of the isError prop.
+   */
+  errorMessage?: string;
+
+  /**
+   * Show Icon at the end of TextInput.
+   */
+  inputIcon?: ReactNode;
+
+  value?: CheckboxItemProps[];
+
+  editable?: boolean;
+  disabled?: boolean;
+
+  data?: CheckboxItemProps[];
+
+  onSaveInput?: (selectedValue?: CheckboxItemProps[]) => void;
+
+  saveInputLabel: string;
+
+  bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
+
+  selectionLimit?: number;
+
+  onInputDismiss?: () => void;
+}
+
+export type CheckboxItemProps = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { getStyle } from './Checkbox.style';
+
+import type { CheckboxProps } from './Checkbox.type';
+import { IconTick } from '../../icons';
+import { Palettes } from '../../themes';
+
+const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {
+  const { selected, disabled } = props;
+
+  const computedStyle = getStyle();
+
+  return (
+    <>
+      <View
+        style={[
+          computedStyle.outer,
+          selected && computedStyle.outerSelected,
+          disabled && computedStyle.outerDisabled,
+        ]}
+      >
+        {selected && (
+          <IconTick
+            height={14}
+            width={14}
+            fill={disabled ? Palettes.white[50] : Palettes.black[900]}
+          />
+        )}
+      </View>
+    </>
+  );
+};
+
+export { Checkbox };

package/src/components/Checkbox/Checkbox.style.tsx

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius } from '../../themes';
+
+import type { ViewStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  outer?: ViewStyle;
+  inner?: ViewStyle;
+  outerSelected?: ViewStyle;
+  innerSelected?: ViewStyle;
+  outerDisabled?: ViewStyle;
+  innerDisabled?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.outer = {
+    height: 18,
+    width: 18,
+    borderRadius: Radius[4],
+    borderWidth: 2,
+    borderColor: Palettes.black[900],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.outerSelected = {
+    backgroundColor: Palettes.yellow[600],
+    borderColor: Palettes.yellow[600],
+  };
+
+  computedStyle.outerDisabled = {
+    borderColor: Palettes.grey[100],
+    backgroundColor: Palettes.grey[100],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

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

@@ -0,0 +1,5 @@
+export interface CheckboxProps {
+  selected?: boolean;
+
+  disabled?: boolean;
+}

package/src/components/Divider/Divider.component.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { getStyle } from './Divider.style';
+import type { DividerProps } from './Divider.type';
+
+const Divider: React.FunctionComponent<DividerProps> = (props) => {
+  const { orientation = 'horizontal', style, ...rest } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <View
+      style={[
+        computedStyle.base,
+        computedStyle[orientation] || computedStyle.horizontal,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+};
+
+export { Divider };

package/src/components/Divider/Divider.style.tsx

@@ -0,0 +1,34 @@
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { DividerProps } from './Divider.type';
+import { Palettes } from '../../themes';
+
+interface ComputedStyleProps {
+  base?: ViewStyle;
+  vertical?: ViewStyle;
+  horizontal?: ViewStyle;
+}
+
+export const getStyle = (props: DividerProps) => {
+  const { thickness = null, color = Palettes.grey[100] } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  const dividerThickness = thickness || 1;
+
+  computedStyle.base = {
+    backgroundColor: color,
+  };
+
+  computedStyle.vertical = {
+    width: dividerThickness,
+    height: '100%',
+  };
+
+  computedStyle.horizontal = {
+    width: '100%',
+    height: dividerThickness,
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/Divider/Divider.type.ts

@@ -0,0 +1,18 @@
+import { ViewProps } from 'react-native';
+
+export interface DividerProps extends ViewProps {
+  /**
+   * The orientation of the divider, could be vertical or horizontal
+   */
+  orientation?: 'vertical' | 'horizontal';
+
+  /**
+   * Customize the thickness of the divider
+   */
+  thickness?: number | null;
+
+  /**
+   * Color of the divider, accept string of color
+   */
+  color?: string;
+}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { getStyle } from './RadioButton.style';
+
+import type { RadioButtonProps } from './RadioButton.type';
+
+const RadioButton: React.FunctionComponent<RadioButtonProps> = (props) => {
+  const { selected, disabled } = props;
+
+  const computedStyle = getStyle();
+
+  return (
+    <>
+      <View
+        style={[computedStyle.outer, disabled && computedStyle.outerDisabled]}
+      >
+        <View
+          style={[
+            computedStyle.inner,
+            selected && computedStyle.innerSelected,
+            selected && disabled && computedStyle.innerDisabled,
+          ]}
+        />
+      </View>
+    </>
+  );
+};
+
+export { RadioButton };

package/src/components/RadioButton/RadioButton.style.tsx

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius } from '../../themes';
+
+import type { ViewStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  outer?: ViewStyle;
+  inner?: ViewStyle;
+  innerSelected?: ViewStyle;
+  outerDisabled?: ViewStyle;
+  innerDisabled?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.outer = {
+    height: 18,
+    width: 18,
+    padding: 2,
+    borderRadius: Radius.full,
+    borderWidth: 2,
+    borderColor: Palettes.black[900],
+  };
+
+  computedStyle.inner = {
+    flex: 1,
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.white[50],
+  };
+
+  computedStyle.innerSelected = {
+    backgroundColor: Palettes.yellow[600],
+  };
+
+  computedStyle.outerDisabled = {
+    borderColor: Palettes.grey[100],
+  };
+
+  computedStyle.innerDisabled = {
+    backgroundColor: Palettes.grey[100],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

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

@@ -0,0 +1,5 @@
+export interface RadioButtonProps {
+  selected?: boolean;
+
+  disabled?: boolean;
+}