@adiraku/react-native-ui 0.1.14

package/src/components/Tabs/Tabs.component.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  View,
+  LayoutChangeEvent,
+  TouchableOpacity,
+} from 'react-native';
+
+import { getStyle } from './Tabs.style';
+import { Typography } from '../typography/typography.component';
+
+import type { TabsProps } from './Tabs.type';
+
+type LabelsLayoutType = {
+  [number: string]: number;
+};
+
+const Tabs: React.FunctionComponent<TabsProps> = (props) => {
+  const { labels = [], onTabPress = () => {}, activeIndex = 0 } = props;
+
+  const computedStyle = getStyle();
+
+  const [labelsLayout, setLabelsLayout] = React.useState<LabelsLayoutType>({});
+  const indicatorWidth = React.useState(new Animated.Value(0))[0];
+  const indicatorOffsetX = React.useState(new Animated.Value(0))[0];
+
+  React.useEffect(() => {
+    const getActiveIndex = () => {
+      if (activeIndex < 0) {
+        return 0;
+      } else if (activeIndex > labels.length - 1) {
+        return labels.length - 1;
+      } else {
+        return activeIndex;
+      }
+    };
+
+    if (Object.keys(labelsLayout).length !== 0) {
+      const currentActiveIndex = getActiveIndex();
+      let indicatorOffset = 0;
+      for (let i = 0; i < currentActiveIndex; i++) {
+        indicatorOffset += labelsLayout[i] ?? 0;
+      }
+
+      const updatedWith = labelsLayout[currentActiveIndex] ?? 0;
+      Animated.timing(indicatorOffsetX, {
+        toValue: indicatorOffset,
+        easing: Easing.ease,
+        useNativeDriver: false,
+        duration: 300,
+      }).start();
+      Animated.timing(indicatorWidth, {
+        toValue: updatedWith,
+        easing: Easing.ease,
+        useNativeDriver: false,
+        duration: 300,
+      }).start();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex, labels, labelsLayout]);
+
+  const onLayout = (event: LayoutChangeEvent, idx: number) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelsLayout({
+      ...labelsLayout,
+      [idx]: width,
+    });
+  };
+
+  return (
+    <View style={[computedStyle.container]}>
+      {labels.map((label, idx) => (
+        <TouchableOpacity
+          onPress={() => onTabPress(idx)}
+          style={[computedStyle.tabContainer]}
+          onLayout={(event) => onLayout(event, idx)}
+        >
+          <Typography key={idx} variant="subtitle2">
+            {label}
+          </Typography>
+        </TouchableOpacity>
+      ))}
+      <Animated.View
+        style={[
+          computedStyle.bottomMarker,
+          { width: indicatorWidth, left: indicatorOffsetX },
+        ]}
+      />
+    </View>
+  );
+};
+
+export { Tabs };

package/src/components/Tabs/Tabs.style.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+import type { ViewStyle } from 'react-native';
+
+import { Palettes, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  tabContainer?: ViewStyle;
+  bottomMarker?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+  };
+
+  computedStyle.tabContainer = {
+    paddingHorizontal: Spacing[16],
+    paddingVertical: Spacing[8],
+  };
+
+  computedStyle.bottomMarker = {
+    position: 'absolute',
+    height: 4,
+    bottom: 0,
+    left: 0,
+    backgroundColor: Palettes.yellow[600],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/Tabs/Tabs.type.ts

@@ -0,0 +1,16 @@
+export interface TabsProps {
+  /**
+   * Labels of the tabs, should be an array of string
+   */
+  labels: string[];
+  /**
+   * Accept an index of the active label
+   */
+  activeIndex: number;
+
+  /**
+   * The function run when tab label clicked, receive the index of the currently
+   * pressed tab label
+   */
+  onTabPress: (idx: number) => void;
+}

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

@@ -0,0 +1,78 @@
+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 type { NativeSyntheticEvent } from 'react-native';
+import type { TextInputFocusEventData } from 'react-native';
+
+const TextArea: React.FunctionComponent<TextAreaProps> = (props) => {
+  const {
+    label = '',
+    value = '',
+    helperMessage = '',
+    counter = 0,
+    errorMessage,
+    isError,
+    onBlur = () => null,
+    onFocus = () => null,
+    ...rest
+  } = props;
+
+  const [focused, setFocused] = React.useState(false);
+
+  const computedStyle = getStyle(props, focused);
+
+  const handleOnFocus = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    setFocused(true);
+    onBlur(event);
+  };
+  const handleOnBlur = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    if (value === '') {
+      onFocus(event);
+    }
+    setFocused(false);
+  };
+
+  return (
+    <View style={computedStyle.fieldContainer}>
+      <Typography variant="subtitle2" 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>
+      {errorMessage || helperMessage ? (
+        <Typography variant="caption" style={computedStyle.messageHelper}>
+          {errorMessage || ((!isError && helperMessage) as string)}
+        </Typography>
+      ) : null}
+    </View>
+  );
+};
+
+export { TextArea };

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

@@ -0,0 +1,69 @@
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { TextAreaProps } from './TextArea.type';
+import { Palettes, Radius, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  fieldContainer?: ViewStyle;
+  container?: ViewStyle;
+  label?: TextStyle;
+  fieldWrapper?: ViewStyle;
+  TextInput?: TextStyle;
+  messageHelper?: TextStyle;
+  counter?: TextStyle;
+  inputIconWrapper?: ViewStyle;
+}
+
+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] }
+      : {
+          text: Palettes.black[900],
+          border: isFocused ? Palettes.grey[900] : Palettes.grey[200],
+        };
+
+  computedStyle.fieldContainer = {
+    width: '100%',
+    gap: Spacing[8],
+  };
+
+  computedStyle.label = {
+    color: Palettes.black[900],
+  };
+
+  computedStyle.fieldWrapper = {
+    borderWidth: Radius.border,
+    borderRadius: Radius[8],
+    borderColor: stateColor.border,
+    padding: Spacing[12],
+    backgroundColor: editable ? Palettes.white[50] : Palettes.grey[50],
+  };
+
+  computedStyle.TextInput = {
+    height: 72,
+    padding: 0,
+    margin: 0,
+    overflow: 'visible',
+    fontSize: 14,
+    lineHeight: 21,
+    fontFamily: 'Montserrat-Regular',
+    color: Palettes.black[900],
+    verticalAlign: 'top',
+  };
+
+  computedStyle.counter = {
+    textAlign: 'right',
+  };
+
+  computedStyle.messageHelper = {
+    color: stateColor.text,
+  };
+
+  return StyleSheet.create(computedStyle);
+};

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

@@ -0,0 +1,32 @@
+import type { TextInput } from 'react-native';
+
+export interface TextAreaProps extends React.ComponentProps<typeof TextInput> {
+  /**
+   * 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.
+   */
+  counter?: number;
+}

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

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { getStyle } from './TextInput.style';
+import type { TextInputProps } from './TextInput.type';
+import { TextInput as RNTextInput } from 'react-native';
+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 (value) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [value]);
+
+  const handleOnFocus = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    animate(1);
+    setFocused(true);
+    onBlur(event);
+  };
+  const handleOnBlur = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    if (value === '') {
+      animate(0);
+      onFocus(event);
+    }
+    setFocused(false);
+  };
+
+  const getLabelWidth = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width + 24);
+  };
+
+  return (
+    <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}>
+          <RNTextInput
+            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

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

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import type { TextInput } from 'react-native';
+
+export interface TextInputProps extends React.ComponentProps<typeof TextInput> {
+  /**
+   * 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

@@ -0,0 +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 };

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

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

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

@@ -0,0 +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';
+}

package/src/components/button/button.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { TouchableHighlight } from 'react-native';
+
+import { Palettes } from '../../themes';
+import { Typography } from '../typography/typography.component';
+import { getStyle } from './button.styles';
+
+import type { ButtonProps } from './button.type';
+
+const Button: React.FC<ButtonProps> = (props) => {
+  const {
+    onPress = () => {},
+    variant = 'primary',
+    label = 'Default',
+    size = 'large',
+    containerStyles,
+    textStyles,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <TouchableHighlight
+      onPress={onPress}
+      style={[computedStyle.container, containerStyles]}
+      underlayColor={
+        variant === 'primary' ? Palettes.black[800] : Palettes.blue[50]
+      }
+      {...rest}
+    >
+      <Typography
+        variant={size === 'large' ? 'button' : 'button-small'}
+        textStyles={{ ...computedStyle.label, ...textStyles }}
+      >
+        {label}
+      </Typography>
+    </TouchableHighlight>
+  );
+};
+
+export { Button };