@adiraku/react-native-ui 0.1.14

package/src/components/rounded-tab/rounded-tab.style.tsx

@@ -0,0 +1,66 @@
+import { StyleSheet } from 'react-native';
+
+import type { ViewStyle } from 'react-native';
+
+import type { RoundedTabProps, TabItemProps } from './rounded-tab.type';
+import { Palettes, Radius, Spacing } from '../../themes';
+import { TextStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  itemSeparator?: ViewStyle;
+}
+
+export const getStyle = (props: RoundedTabProps) => {
+  const {} = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+    alignItems: 'center',
+  };
+
+  computedStyle.itemSeparator = {
+    width: Spacing[12],
+  };
+
+  return StyleSheet.create(computedStyle);
+};
+
+interface TabItemStyleProps {
+  container?: ViewStyle;
+  label?: TextStyle;
+  leadingWrapper?: ViewStyle;
+  trailingWrapper?: ViewStyle;
+}
+
+export const getTabItemStyle = (props: TabItemProps) => {
+  const { isSelected = false } = props;
+
+  const computedStyle: TabItemStyleProps = {};
+
+  computedStyle.container = {
+    borderRadius: Radius.full,
+    borderWidth: 1,
+    borderColor: isSelected ? Palettes.yellow[600] : Palettes.grey[500],
+    paddingHorizontal: Spacing[16],
+    paddingVertical: Spacing[8],
+    backgroundColor: isSelected ? Palettes.yellow[600] : Palettes.white[50],
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.label = {};
+
+  computedStyle.leadingWrapper = {
+    marginRight: Spacing[8],
+  };
+
+  computedStyle.trailingWrapper = {
+    marginLeft: Spacing[8],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/rounded-tab/rounded-tab.type.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export interface RoundedTabProps {
+  data: {
+    label: string;
+    value: string;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+  }[];
+  selectedValue: string;
+  onTabItemPress: (value: string) => void;
+}
+
+export type TabItemProps = {
+  label: string;
+  value: string;
+  isSelected: boolean;
+  onPress: (value: string) => void;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+};

package/src/components/slider-indicator/slider-indicator.component.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { FunctionComponent, useState, useEffect } from 'react';
+import { View } from 'react-native';
+import { getStyle } from './slider-indicator.style';
+import type {
+  SliderIndicatorProps,
+  SliderItemProps,
+} from './slider-indicator.type';
+import { Animated } from 'react-native';
+import { Easing } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+
+const SliderIndicator: FunctionComponent<SliderIndicatorProps> = (props) => {
+  const {
+    sliderCount = 0,
+    activeItem = 0,
+    onIndicatorPress = () => null,
+  } = props;
+
+  const computedStyle = getStyle();
+
+  const getActiveIndex = () => {
+    if (activeItem < 0) {
+      return 0;
+    } else if (activeItem > sliderCount - 1) {
+      return sliderCount - 1;
+    }
+
+    return activeItem;
+  };
+
+  const renderSliderItem = () => {
+    const sliders = [...Array(sliderCount)];
+
+    return sliders.map((_, index) => (
+      <TouchableOpacity key={index} onPress={() => onIndicatorPress(index)}>
+        <SliderItem isActive={getActiveIndex() === index} />
+      </TouchableOpacity>
+    ));
+  };
+
+  return <View style={[computedStyle.container]}>{renderSliderItem()}</View>;
+};
+
+const SliderItem: FunctionComponent<SliderItemProps> = (props) => {
+  const { isActive = false } = props;
+
+  const computedStyle = getStyle();
+
+  const indicatorWidth = useState(new Animated.Value(4))[0];
+
+  useEffect(() => {
+    if (isActive) {
+      Animated.timing(indicatorWidth, {
+        toValue: 24,
+        easing: Easing.ease,
+        useNativeDriver: false,
+        duration: 300,
+      }).start();
+    } else {
+      Animated.timing(indicatorWidth, {
+        toValue: 4,
+        easing: Easing.ease,
+        useNativeDriver: false,
+        duration: 300,
+      }).start();
+    }
+  }, [isActive, indicatorWidth]);
+
+  return (
+    <Animated.View
+      style={[
+        computedStyle.sliderItem,
+        isActive && computedStyle.activeSlider,
+        { width: indicatorWidth },
+      ]}
+    />
+  );
+};
+
+export { SliderIndicator };

package/src/components/slider-indicator/slider-indicator.style.tsx

@@ -0,0 +1,31 @@
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  sliderItem?: ViewStyle;
+  activeSlider?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+    gap: Spacing[4],
+  };
+
+  computedStyle.sliderItem = {
+    height: 4,
+    width: 4,
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.grey[500],
+  };
+
+  computedStyle.activeSlider = {
+    backgroundColor: Palettes.black[900],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/slider-indicator/slider-indicator.type.ts

@@ -0,0 +1,23 @@
+export interface SliderIndicatorProps {
+  /**
+   * The total item of slider to be displayed
+   */
+  sliderCount?: number;
+
+  /**
+   * Current active slider item
+   */
+  activeItem?: number;
+
+  /**
+   * Receive index as parameter, could be used for changing the slider index programatically
+   */
+  onIndicatorPress?: (index: number) => void;
+}
+
+export interface SliderItemProps {
+  /**
+   * Indicate if current slider item active or not
+   */
+  isActive?: boolean;
+}

package/src/components/switch/switch.component.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Animated, View, TouchableWithoutFeedback } from 'react-native';
+import { getStyle } from './switch.style';
+import type { SwitchProps } from './switch.type';
+
+const Switch: React.FunctionComponent<SwitchProps> = (props) => {
+  const { value = false, onPress = () => {}, disabled = false } = props;
+
+  const computedStyle = getStyle(props);
+
+  const animatedCircle = React.useRef(new Animated.Value(value ? 1 : 0));
+
+  const position = animatedCircle.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 20],
+  });
+
+  React.useEffect(() => {
+    if (value) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [value]);
+
+  const animate = (toValue: 0 | 1) =>
+    Animated.spring(animatedCircle.current, {
+      useNativeDriver: true,
+      toValue,
+    }).start();
+
+  const handleOnSwitchPress = () => {
+    if (!disabled) {
+      onPress();
+    }
+  };
+
+  return (
+    <TouchableWithoutFeedback onPress={handleOnSwitchPress}>
+      <View style={[computedStyle.container]}>
+        <View style={[computedStyle.slider]} />
+        <Animated.View
+          style={[
+            computedStyle.circle,
+            { transform: [{ translateX: position }] },
+          ]}
+        />
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export { Switch };

package/src/components/switch/switch.style.tsx

@@ -0,0 +1,52 @@
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { SwitchProps } from './switch.type';
+import { Palettes, Radius, Shadow } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  circle?: ViewStyle;
+  slider?: ViewStyle;
+}
+
+export const getStyle = (props: SwitchProps) => {
+  const { value = false, disabled = false } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  let itemColor = {
+    slider: Palettes.grey[500],
+    circle: Palettes.white[50],
+  };
+  if (disabled) {
+    itemColor.slider = Palettes.grey[100];
+    itemColor.circle = Palettes.grey[100];
+  } else if (value) {
+    itemColor.slider = '#ffcd1876';
+    itemColor.circle = Palettes.yellow[600];
+  }
+
+  computedStyle.container = {
+    justifyContent: 'center',
+    width: 36,
+  };
+
+  computedStyle.slider = {
+    height: 10,
+    width: 24,
+    marginHorizontal: 6,
+    borderRadius: Radius.full,
+    backgroundColor: itemColor.slider,
+    position: 'absolute',
+  };
+
+  computedStyle.circle = {
+    height: 16,
+    width: 16,
+    backgroundColor: itemColor.circle,
+    borderRadius: Radius.full,
+    ...Shadow['shadow-elevation-1'],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/switch/switch.type.ts

@@ -0,0 +1,7 @@
+export interface SwitchProps {
+  value: boolean;
+
+  disabled?: boolean;
+
+  onPress: () => void;
+}

package/src/components/textlink/textlink.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { TextLinkProps } from './textlink.type';
+import { Typography } from '../typography/typography.component';
+import { TouchableOpacity } from 'react-native';
+import { getStyle } from './textlink.style';
+
+export const TextLink: React.FunctionComponent<TextLinkProps> = (props) => {
+  const {
+    label = '',
+    textStyles,
+    trailing,
+    leading,
+    containerStyles,
+    numberOfLines,
+    ...rest
+  } = props;
+
+  const hasTrailing = !!trailing;
+  const hasLeading = !!leading;
+
+  const computedStyle = getStyle();
+
+  return (
+    <TouchableOpacity
+      style={[computedStyle.container, containerStyles]}
+      {...rest}
+    >
+      {hasLeading && leading}
+      <Typography
+        variant="button"
+        style={[
+          computedStyle.label,
+          hasLeading && computedStyle.hasLeading,
+          hasTrailing && computedStyle.hasTrailing,
+          textStyles,
+        ]}
+        numberOfLines={numberOfLines}
+      >
+        {label}
+      </Typography>
+      {hasTrailing && trailing}
+    </TouchableOpacity>
+  );
+};

package/src/components/textlink/textlink.style.tsx

@@ -0,0 +1,36 @@
+import type { ViewStyle } from 'react-native';
+import type { TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  hasLeading?: TextStyle;
+  hasTrailing?: TextStyle;
+  label?: TextStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  };
+
+  computedStyle.label = {
+    color: Palettes.blueDark[600],
+    textDecorationLine: 'none',
+  };
+
+  computedStyle.hasLeading = {
+    marginLeft: Spacing[8],
+  };
+
+  computedStyle.hasTrailing = {
+    marginRight: Spacing[8],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/textlink/textlink.type.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { TouchableOpacityProps, TextStyle, ViewStyle } from 'react-native';
+
+export interface TextLinkProps extends TouchableOpacityProps {
+  /**
+   * The text content of the button
+   */
+  label?: string;
+  /**
+   * The leading that comes before the label, could be Icon, ReactNode, etc;
+   */
+  leading?: ReactNode;
+  /**
+   * The trailing that follow the after the label, could be Icon, ReactNode, etc;
+   */
+  trailing?: ReactNode;
+  /**
+   * The styles of the text inside button, extended from TextStyle
+   */
+  textStyles?: TextStyle;
+  /**
+   * The styles of the container containing the text, extended from ViewStyle
+   */
+  containerStyles?: ViewStyle;
+  numberOfLines?: number;
+}

package/src/components/typography/typography.component.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { getStyle } from './typography.style';
+import type { TypographyProps } from './typography.type';
+
+const Typography: React.FunctionComponent<TypographyProps> = (props) => {
+  const {
+    variant = 'body1',
+    children = null,
+    textStyles,
+    style,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <Text
+      style={[computedStyle[variant] || computedStyle.body1, textStyles, style]}
+      {...rest}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export { Typography };