@adiraku/react-native-ui 1.2.3-snapshot.2 → 1.2.3-snapshot.4

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

@@ -1,124 +1,124 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { getStyle } from './TextInput.style';
-import type { TextInputProps } from './TextInput.type';
-import MaskInput from 'react-native-mask-input';
-import { Typography } from '../typography/typography.component';
-import { Animated } from 'react-native';
-import { Palettes } from '../../themes';
-import type { LayoutChangeEvent } from 'react-native';
-import type { NativeSyntheticEvent } from 'react-native';
-import type { TextInputFocusEventData } from 'react-native';
-
-const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
-  const {
-    value,
-    label,
-    onBlur = () => null,
-    onFocus = () => null,
-    errorMessage,
-    helperMessage,
-    isError,
-    counter = 0,
-    inputIcon = null,
-    ...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 handleOnFocus = (
-    event: NativeSyntheticEvent<TextInputFocusEventData>
-  ) => {
-    setFocused(true);
-    onFocus(event);
-  };
-  const handleOnBlur = (
-    event: NativeSyntheticEvent<TextInputFocusEventData>
-  ) => {
-    onBlur(event);
-    setFocused(false);
-  };
-
-  const getLabelWidth = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    setLabelWidth(width + 24);
-  };
-
-  return (
-    <View style={computedStyle.fieldWrapper}>
-      <View style={computedStyle.fieldContainer}>
-        {!!label && (
-          <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}>
-          <MaskInput
-            value={value}
-            style={[computedStyle.textField]}
-            onFocus={handleOnFocus}
-            onBlur={handleOnBlur}
-            placeholderTextColor={focused ? Palettes.black[500] : 'transparent'}
-            {...rest}
-          />
-          {inputIcon || counter > 0
-            ? inputIcon || (
-                <Typography style={computedStyle.counter} variant="caption">
-                  {`${value?.length}/${counter}`}
-                </Typography>
-              )
-            : null}
-        </View>
-      </View>
-      {errorMessage || helperMessage ? (
-        <Typography variant="caption" style={computedStyle.messageHelper}>
-          {errorMessage || ((!isError && helperMessage) as string)}
-        </Typography>
-      ) : null}
-    </View>
-  );
-};
-
-export { TextInput };
+import * as React from 'react';
+import { View } from 'react-native';
+import { getStyle } from './TextInput.style';
+import type { TextInputProps } from './TextInput.type';
+import MaskInput from 'react-native-mask-input';
+import { Typography } from '../typography/typography.component';
+import { Animated } from 'react-native';
+import { Palettes } from '../../themes';
+import type { LayoutChangeEvent } from 'react-native';
+import type { NativeSyntheticEvent } from 'react-native';
+import type { TextInputFocusEventData } from 'react-native';
+
+const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
+  const {
+    value,
+    label,
+    onBlur = () => null,
+    onFocus = () => null,
+    errorMessage,
+    helperMessage,
+    isError,
+    counter = 0,
+    inputIcon = null,
+    ...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 handleOnFocus = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    setFocused(true);
+    onFocus(event);
+  };
+  const handleOnBlur = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    onBlur(event);
+    setFocused(false);
+  };
+
+  const getLabelWidth = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width + 24);
+  };
+
+  return (
+    <View style={computedStyle.fieldWrapper}>
+      <View style={computedStyle.fieldContainer}>
+        {!!label && (
+          <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}>
+          <MaskInput
+            value={value}
+            style={[computedStyle.textField]}
+            onFocus={handleOnFocus}
+            onBlur={handleOnBlur}
+            placeholderTextColor={focused ? Palettes.black[500] : 'transparent'}
+            {...rest}
+          />
+          {inputIcon || counter > 0
+            ? inputIcon || (
+                <Typography style={computedStyle.counter} variant="caption">
+                  {`${value?.length}/${counter}`}
+                </Typography>
+              )
+            : null}
+        </View>
+      </View>
+      {errorMessage || helperMessage ? (
+        <Typography variant="caption" style={computedStyle.messageHelper}>
+          {errorMessage || ((!isError && helperMessage) as string)}
+        </Typography>
+      ) : null}
+    </View>
+  );
+};
+
+export { TextInput };

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

@@ -1,95 +1,95 @@
-import type { TextStyle } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import type { TextInputProps } from './TextInput.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;
-}
-
-export const getStyle = (props: TextInputProps, isFocused: boolean) => {
-  const { editable = true, isError, errorMessage } = props;
-
-  const stateColor =
-    isError || errorMessage
-      ? { text: Palettes.red[500], border: Palettes.red[500] }
-      : {
-          text: Palettes.black[900],
-          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.labelContainer = {
-    zIndex: 99,
-    position: 'absolute',
-  };
-
-  computedStyle.label = {
-    color: stateColor.text,
-    backgroundColor: !editable ? 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 ? 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],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { TextInputProps } from './TextInput.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;
+}
+
+export const getStyle = (props: TextInputProps, isFocused: boolean) => {
+  const { editable = true, isError, errorMessage } = props;
+
+  const stateColor =
+    isError || errorMessage
+      ? { text: Palettes.red[500], border: Palettes.red[500] }
+      : {
+          text: Palettes.black[900],
+          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.labelContainer = {
+    zIndex: 99,
+    position: 'absolute',
+  };
+
+  computedStyle.label = {
+    color: stateColor.text,
+    backgroundColor: !editable ? 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 ? 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],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

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

@@ -1,38 +1,38 @@
-import type { ReactNode } from 'react';
-import { MaskInputProps } from 'react-native-mask-input';
-
-export interface TextInputProps extends MaskInputProps {
-  /**
-   * 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;
-
-  /**
-   * A number that spesified tha max character to be input, hidden if inputIcon props available.
-   */
-  counter?: number;
-
-  /**
-   * Show Icon at the end of TextInput.
-   */
-  inputIcon?: ReactNode;
-}
+import type { ReactNode } from 'react';
+import { MaskInputProps } from 'react-native-mask-input';
+
+export interface TextInputProps extends MaskInputProps {
+  /**
+   * 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;
+
+  /**
+   * A number that spesified tha max character to be input, hidden if inputIcon props available.
+   */
+  counter?: number;
+
+  /**
+   * Show Icon at the end of TextInput.
+   */
+  inputIcon?: ReactNode;
+}

package/src/components/base/base.component.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import { Palettes } from '../../themes';
-import { getStyle } from './base.style';
-import type { BaseProps } from './base.type';
-
-const BaseComponent: React.FunctionComponent<BaseProps> = (props) => {
-  const { label = 'Base component', variant = 'dark' } = props;
-
-  const computedStyle = getStyle(props);
-
-  return (
-    <View style={{ backgroundColor: Palettes.red[500] }}>
-      <Text style={computedStyle.label}>{`${variant}: ${label}`}</Text>
-    </View>
-  );
-};
-
-export { BaseComponent };
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Palettes } from '../../themes';
+import { getStyle } from './base.style';
+import type { BaseProps } from './base.type';
+
+const BaseComponent: React.FunctionComponent<BaseProps> = (props) => {
+  const { label = 'Base component', variant = 'dark' } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <View style={{ backgroundColor: Palettes.red[500] }}>
+      <Text style={computedStyle.label}>{`${variant}: ${label}`}</Text>
+    </View>
+  );
+};
+
+export { BaseComponent };

package/src/components/base/base.style.tsx

@@ -1,27 +1,27 @@
-import type { TextStyle } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import type { BaseProps } from './base.type';
-
-interface ComputedStyleProps {
-  container?: ViewStyle;
-  label?: TextStyle;
-}
-
-export const getStyle = (props: BaseProps) => {
-  const { variant } = props;
-
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.container = {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: variant === 'dark' ? 'black' : 'white',
-  };
-
-  computedStyle.label = {
-    color: variant === 'dark' ? 'white' : 'black',
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { BaseProps } from './base.type';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  label?: TextStyle;
+}
+
+export const getStyle = (props: BaseProps) => {
+  const { variant } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: variant === 'dark' ? 'black' : 'white',
+  };
+
+  computedStyle.label = {
+    color: variant === 'dark' ? 'white' : 'black',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/base/base.type.ts

@@ -1,15 +1,15 @@
-export interface BaseProps {
-  /**
-   * The text content of the component
-   */
-  label: string;
-
-  /**
-   * The variant of the component
-   * - `dark`: Dark Component description
-   * - `light`: Light Component description
-   *
-   * @default "dark"
-   */
-  variant: 'dark' | 'light';
-}
+export interface BaseProps {
+  /**
+   * The text content of the component
+   */
+  label: string;
+
+  /**
+   * The variant of the component
+   * - `dark`: Dark Component description
+   * - `light`: Light Component description
+   *
+   * @default "dark"
+   */
+  variant: 'dark' | 'light';
+}