@adiraku/react-native-ui 0.1.14

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

@@ -0,0 +1,209 @@
+import * as React from 'react';
+import {
+  Animated,
+  FlatList,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+import { getStyle } from './RadioInput.style';
+import { Palettes } from '../../themes';
+import { IconChevronDown } from '../../icons';
+import { Button } from '../button/button.component';
+import { Typography } from '../typography/typography.component';
+import { BottomSheet } from '../BottomSheet/BottomSheet.component';
+import { RadioButton } from '../RadioButton/RadioButton.component';
+import { Divider } from '../Divider/Divider.component';
+
+import type { LayoutChangeEvent } from 'react-native';
+import type { RadioInputProps, RadioItemProps } from './RadioInput.type';
+
+const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
+  const {
+    value,
+    label,
+    errorMessage,
+    helperMessage,
+    isError,
+    disabled,
+    editable = true,
+    inputIcon = (
+      <IconChevronDown width={14} height={14} fill={Palettes.black[900]} />
+    ),
+    data,
+    onSaveInput = () => {},
+    saveInputLabel,
+    bottomSheetOpt,
+    onInputDismiss = () => {},
+  } = props;
+
+  const [labelWidth, setLabelWidth] = React.useState(0);
+  // const [inputVisibility, setInputVisibility] = React.useState(false);
+  const [selectedValue, setSelectedValue] = React.useState(value);
+
+  const computedStyle = getStyle(props);
+
+  type BottomSheetHandler = React.ElementRef<typeof BottomSheet>;
+  const ref = 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(() => {
+    return data?.find((obj) => {
+      return obj.value === value?.value;
+    })?.label;
+  }, [data, value]);
+
+  React.useEffect(() => {
+    if (selectedObject()) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [selectedObject, value]);
+
+  React.useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  const getLabelWidth = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width + 24);
+  };
+
+  const onRadioItemPress = (radioValue: RadioItemProps) => {
+    if (selectedValue?.value !== radioValue?.value) {
+      setSelectedValue(radioValue);
+    }
+  };
+
+  const handleOnSaveInput = () => {
+    onSaveInput(selectedValue);
+    onInputDismiss();
+    ref.current?.close();
+  };
+
+  const openBottomSheet = () => {
+    if (!disabled && editable) {
+      ref.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 && inputIcon}
+            </View>
+          </View>
+          {errorMessage || helperMessage ? (
+            <Typography variant="caption" style={computedStyle.messageHelper}>
+              {errorMessage || ((!isError && helperMessage) as string)}
+            </Typography>
+          ) : null}
+        </View>
+      </TouchableWithoutFeedback>
+      <BottomSheet onDismiss={onInputDismiss} ref={ref} {...bottomSheetOpt}>
+        <FlatList
+          data={data}
+          renderItem={(item) => (
+            <RadioItem
+              data={item}
+              selectedValue={selectedValue}
+              onItemPress={onRadioItemPress}
+            />
+          )}
+          // 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 RadioItem({
+  data,
+  selectedValue,
+  onItemPress = () => {},
+}: {
+  data: {
+    item: RadioItemProps;
+  };
+  selectedValue?: RadioItemProps;
+  onItemPress?: (value: RadioItemProps) => void;
+}) {
+  const { item } = data;
+  const computedStyle = getStyle({} as RadioInputProps);
+
+  return (
+    <TouchableHighlight
+      onPress={() => onItemPress(item)}
+      underlayColor={Palettes.whiteDark[100]}
+      disabled={item.disabled}
+    >
+      <View style={[computedStyle.radioItemWrapper]}>
+        <Typography variant="body2" numberOfLines={2}>
+          {item?.label}
+        </Typography>
+        <RadioButton
+          selected={item.value === selectedValue?.value}
+          disabled={item.disabled}
+        />
+      </View>
+    </TouchableHighlight>
+  );
+}
+
+export { RadioInput };

package/src/components/RadioInput/RadioInput.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 { RadioInputProps } from './RadioInput.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;
+  radioItemWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: RadioInputProps) => {
+  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.radioItemWrapper = {
+    paddingVertical: Spacing[16],
+    borderRadius: Radius[8],
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

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

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import { BottomSheetProps } from '../BottomSheet/BottomSheet.type';
+
+export interface RadioInputProps {
+  /**
+   * 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?: RadioItemProps;
+
+  editable?: boolean;
+  disabled?: boolean;
+
+  data?: RadioItemProps[];
+
+  onSaveInput?: (selectedValue?: RadioItemProps) => void;
+
+  saveInputLabel: string;
+
+  bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
+
+  onInputDismiss?: () => void;
+}
+
+export type RadioItemProps = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};

package/src/components/Snackbar/Snackbar.component.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Typography } from '../typography/typography.component';
+import { getStyle } from './Snakbar.style';
+
+import type { SnackbarProps } from './Snackbar.type';
+
+const Snackbar: React.FunctionComponent<SnackbarProps> = (props) => {
+  const { message = '', action = null, containerStyle } = props;
+
+  const computedStyle = getStyle();
+
+  return (
+    <View style={[computedStyle.container, containerStyle]}>
+      <Typography
+        variant="caption"
+        numberOfLines={3}
+        style={[computedStyle.message]}
+      >
+        {message}
+      </Typography>
+      {action && <View style={[computedStyle.actionWrapper]}>{action}</View>}
+    </View>
+  );
+};
+
+export { Snackbar };

package/src/components/Snackbar/Snackbar.type.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+export interface SnackbarProps {
+  message: string;
+
+  action?: ReactNode;
+
+  containerStyle?: ViewStyle;
+}

package/src/components/Snackbar/Snakbar.style.tsx

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Shadow, Spacing } from '../../themes';
+
+import type { ViewStyle, TextStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  message?: TextStyle;
+  actionWrapper?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    padding: Spacing[12],
+    borderRadius: Radius[8],
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: Palettes.blue[50],
+    ...Shadow['shadow-elevation-1'],
+  };
+
+  computedStyle.message = {
+    flex: 1,
+  };
+
+  computedStyle.actionWrapper = {
+    marginLeft: Spacing[16],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/StepperCounter/StepperCounter.component.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { getStyle } from './StepperCounter.style';
+import type { StepperCounterProps } from './StepperCounter.type';
+import { Typography } from '../typography/typography.component';
+import { LayoutChangeEvent } from 'react-native';
+
+const StepperCounter: React.FunctionComponent<StepperCounterProps> = (
+  props
+) => {
+  const {
+    labels = [],
+    activeStepIndex = 0,
+    activeStepIndicator = null,
+  } = props;
+
+  const [firstItemWidth, setFirstItemWidth] = React.useState(0);
+  const [lastItemWidth, setLastItemWidth] = React.useState(0);
+
+  const computedStyle = getStyle();
+
+  const getFirstAndLastWidthItem = (event: LayoutChangeEvent, idx: number) => {
+    const { width } = event.nativeEvent.layout;
+    if (idx === 0) {
+      setFirstItemWidth(width);
+    } else if (idx === labels.length - 1) {
+      setLastItemWidth(width);
+    }
+  };
+
+  const isCurrentStep = (idx: number) => {
+    return idx === activeStepIndex;
+  };
+
+  const isBeforeStep = (idx: number) => {
+    return idx < activeStepIndex;
+  };
+
+  const isAfterStep = (idx: number) => {
+    return idx > activeStepIndex;
+  };
+
+  const getStepNumber = (idx: number) => {
+    return idx.toLocaleString('en-US', {
+      minimumIntegerDigits: 2,
+      useGrouping: false,
+    });
+  };
+
+  return (
+    <View style={computedStyle.container}>
+      <View
+        style={[
+          computedStyle.lineContainer,
+          {
+            paddingLeft: firstItemWidth / 2,
+            paddingRight: lastItemWidth / 2,
+          },
+        ]}
+      >
+        {labels.length > 0 &&
+          [...Array(labels.length - 1)].map((_, idx) => (
+            <View
+              style={[
+                computedStyle.stepLine,
+                idx <= activeStepIndex - 1 && computedStyle.stepLineActive,
+              ]}
+            />
+          ))}
+      </View>
+      <View style={computedStyle.stepItemContainer}>
+        {labels.map((label, idx) => (
+          <View
+            style={computedStyle.stepItemWrapper}
+            onLayout={(event) => getFirstAndLastWidthItem(event, idx)}
+          >
+            <View
+              style={[
+                computedStyle.stepItem,
+                isCurrentStep(idx) && computedStyle.stepItemActive,
+                isAfterStep(idx) && computedStyle.stepItemInactive,
+              ]}
+            >
+              {isBeforeStep(idx) ? (
+                activeStepIndicator
+              ) : (
+                <Typography
+                  variant="caption2"
+                  style={[
+                    computedStyle.stepItemNumberActive,
+                    isAfterStep(idx) && computedStyle.stepItemNumberInactive,
+                  ]}
+                >
+                  {getStepNumber(idx + 1)}
+                </Typography>
+              )}
+            </View>
+            <Typography
+              variant="overline"
+              style={[isAfterStep(idx) && computedStyle.labelInactive]}
+            >
+              {label}
+            </Typography>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export { StepperCounter };

package/src/components/StepperCounter/StepperCounter.style.tsx

@@ -0,0 +1,96 @@
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  lineContainer?: ViewStyle;
+  stepLine?: ViewStyle;
+  stepLineActive?: ViewStyle;
+  stepItemWrapper?: ViewStyle;
+  stepItemContainer?: ViewStyle;
+  stepItem?: ViewStyle;
+  stepItemActive?: ViewStyle;
+  stepItemInactive?: ViewStyle;
+  stepItemNumberActive?: TextStyle;
+  stepItemNumberInactive?: TextStyle;
+  labelInactive?: TextStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    minHeight: 30,
+    borderRadius: 4,
+    width: '100%',
+    flexDirection: 'row',
+  };
+
+  computedStyle.lineContainer = {
+    position: 'absolute',
+    width: '100%',
+    flexDirection: 'row',
+    top: 10,
+  };
+
+  computedStyle.stepLine = {
+    height: 4,
+    flexGrow: 1,
+    backgroundColor: Palettes.grey[50],
+  };
+
+  computedStyle.stepLineActive = {
+    backgroundColor: Palettes.green[700],
+  };
+
+  computedStyle.stepItemContainer = {
+    padding: 0,
+    margin: 0,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    position: 'absolute',
+  };
+
+  computedStyle.stepItemWrapper = {
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.stepItem = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 24,
+    width: 24,
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.green[700],
+    borderWidth: 2,
+    borderColor: Palettes.green[700],
+    marginBottom: Spacing[4],
+  };
+
+  computedStyle.stepItemActive = {
+    backgroundColor: Palettes.white[50],
+  };
+
+  computedStyle.stepItemInactive = {
+    backgroundColor: Palettes.grey[50],
+    borderColor: Palettes.grey[50],
+  };
+
+  computedStyle.stepItemNumberActive = {
+    color: Palettes.green[700],
+  };
+
+  computedStyle.stepItemNumberInactive = {
+    color: Palettes.grey[500],
+  };
+
+  computedStyle.labelInactive = {
+    color: Palettes.grey[500],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/StepperCounter/StepperCounter.type.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+export interface StepperCounterProps {
+  /**
+   * A list of string that display the StepperCounter component.
+   */
+  labels?: string[];
+
+  /**
+   * Index that represent current active step.
+   */
+  activeStepIndex?: number;
+
+  /**
+   * A component that will be displayed if the step already passed.
+   */
+  activeStepIndicator?: ReactNode;
+}