@adiraku/react-native-ui 1.2.3-snapshot.5 → 1.2.3-snapshot.7

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

@@ -1,106 +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);
-};
+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

@@ -1,73 +1,74 @@
-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';
-
-export interface RadioInputProps extends TouchableWithoutFeedbackProps {
-  /**
-   * 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;
-
-  saveInputProps?: ButtonProps;
-
-  bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
-
-  onInputDismiss?: () => void;
-
-  customRadioInput?: (props: RadioItemPropsComponent) => any;
-
-  customItemSeparator?: any;
-}
-
-export type RadioItemProps = {
-  label: string;
-  value: string;
-  disabled?: boolean;
-} & TouchableHighlightProps;
-
-export interface RadioItemPropsComponent extends TouchableHighlightProps {
-  data: {
-    item: RadioItemProps;
-  };
-  selectedValue?: RadioItemProps;
-  onItemPress?: (value: RadioItemProps) => void;
-}
+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 extends TouchableWithoutFeedbackProps {
+  /**
+   * 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;
+  helperMessageProps?: TypographyProps;
+  /**
+   * 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;
+
+  saveInputProps?: ButtonProps;
+
+  bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
+
+  onInputDismiss?: () => void;
+
+  customRadioInput?: (props: RadioItemPropsComponent) => any;
+
+  customItemSeparator?: any;
+}
+
+export type RadioItemProps = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+} & TouchableHighlightProps;
+
+export interface RadioItemPropsComponent extends TouchableHighlightProps {
+  data: {
+    item: RadioItemProps;
+  };
+  selectedValue?: RadioItemProps;
+  onItemPress?: (value: RadioItemProps) => void;
+}

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

@@ -1,79 +1,79 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import RNToast, {
-  ToastProps,
-  ToastShowParams,
-  ToastHideParams,
-} from 'react-native-toast-message';
-
-import { Typography } from '../typography/typography.component';
-import { getStyle } from './Snakbar.style';
-
-import type { SnackbarProps } from './Snackbar.type';
-
-const SnackbarUI: 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>
-  );
-};
-
-function SnackbarComponent(props: ToastProps) {
-  const computedStyle = getStyle();
-
-  return (
-    <RNToast
-      {...props}
-      config={{
-        ...props.config,
-        // eslint-disable-next-line react/no-unstable-nested-components
-        aleph_toast: ({ props: toastProps }: { props: SnackbarProps }) => {
-          const { message, action } = toastProps;
-
-          return (
-            <View style={[computedStyle.snackbarWrapper]}>
-              <SnackbarUI message={message} action={action} />
-            </View>
-          );
-        },
-      }}
-      type="aleph_toast"
-      position="bottom"
-    />
-  );
-}
-
-const Snackbar = {
-  show: (
-    params: Omit<ToastShowParams, 'props' | 'text1' | 'text2' | 'type'> & {
-      message: string;
-      action?: React.ReactNode;
-    }
-  ) => {
-    const { message = '', action } = params;
-    RNToast.show({
-      ...params,
-      props: {
-        message,
-        action,
-      },
-    });
-  },
-  hide: (params: ToastHideParams) => {
-    RNToast.hide(params);
-  },
-};
-
-export { Snackbar, SnackbarComponent };
+import * as React from 'react';
+import { View } from 'react-native';
+import RNToast, {
+  ToastProps,
+  ToastShowParams,
+  ToastHideParams,
+} from 'react-native-toast-message';
+
+import { Typography } from '../typography/typography.component';
+import { getStyle } from './Snakbar.style';
+
+import type { SnackbarProps } from './Snackbar.type';
+
+const SnackbarUI: 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>
+  );
+};
+
+function SnackbarComponent(props: ToastProps) {
+  const computedStyle = getStyle();
+
+  return (
+    <RNToast
+      {...props}
+      config={{
+        ...props.config,
+        // eslint-disable-next-line react/no-unstable-nested-components
+        aleph_toast: ({ props: toastProps }: { props: SnackbarProps }) => {
+          const { message, action } = toastProps;
+
+          return (
+            <View style={[computedStyle.snackbarWrapper]}>
+              <SnackbarUI message={message} action={action} />
+            </View>
+          );
+        },
+      }}
+      type="aleph_toast"
+      position="bottom"
+    />
+  );
+}
+
+const Snackbar = {
+  show: (
+    params: Omit<ToastShowParams, 'props' | 'text1' | 'text2' | 'type'> & {
+      message: string;
+      action?: React.ReactNode;
+    }
+  ) => {
+    const { message = '', action } = params;
+    RNToast.show({
+      ...params,
+      props: {
+        message,
+        action,
+      },
+    });
+  },
+  hide: (params: ToastHideParams) => {
+    RNToast.hide(params);
+  },
+};
+
+export { Snackbar, SnackbarComponent };

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

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-
-export interface SnackbarProps {
-  message: string;
-
-  action?: ReactNode;
-
-  containerStyle?: ViewStyle;
-}
+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

@@ -1,41 +1,41 @@
-import { StyleSheet } from 'react-native';
-
-import { Palettes, Radius, Shadow, Spacing } from '../../themes';
-
-import type { ViewStyle, TextStyle } from 'react-native';
-
-interface ComputedStyleProps {
-  container?: ViewStyle;
-  snackbarWrapper?: 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.snackbarWrapper = {
-    width: '100%',
-    paddingHorizontal: Spacing[16],
-  };
-
-  computedStyle.message = {
-    flex: 1,
-  };
-
-  computedStyle.actionWrapper = {
-    marginLeft: Spacing[16],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Shadow, Spacing } from '../../themes';
+
+import type { ViewStyle, TextStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  snackbarWrapper?: 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.snackbarWrapper = {
+    width: '100%',
+    paddingHorizontal: Spacing[16],
+  };
+
+  computedStyle.message = {
+    flex: 1,
+  };
+
+  computedStyle.actionWrapper = {
+    marginLeft: Spacing[16],
+  };
+
+  return StyleSheet.create(computedStyle);
+};