@adiraku/react-native-ui 0.1.14

package/src/components/button/button.styles.ts

@@ -0,0 +1,76 @@
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius, Spacing } from '../../themes';
+import type { ButtonProps } from './button.type';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  label?: TextStyle;
+}
+
+export const getStyle = (props: ButtonProps) => {
+  const { variant, size, disabled = false } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  const getLabelColor = () => {
+    if (disabled) {
+      return Palettes.grey[500];
+    }
+
+    if (variant === 'primary') {
+      return Palettes.white[50];
+    }
+
+    return Palettes.blueDark[600];
+  };
+
+  const getBackgroundColor = () => {
+    if (disabled) {
+      return variant === 'primary' ? Palettes.grey[100] : 'transparent';
+    }
+
+    if (variant === 'primary') {
+      return Palettes.black[900];
+    }
+
+    return 'transparent';
+  };
+
+  computedStyle.container = {
+    borderColor: 'transparent',
+    borderWidth: Radius.border,
+    backgroundColor: getBackgroundColor(),
+    paddingHorizontal: Spacing[20],
+    paddingVertical: Spacing[8],
+    borderRadius: Radius[8],
+  };
+
+  if (variant !== 'tertiary') {
+    computedStyle.container = {
+      ...computedStyle.container,
+      borderColor: disabled
+        ? Palettes.grey[100]
+        : variant === 'primary'
+        ? Palettes.black[900]
+        : Palettes.blueDark[600],
+    };
+  }
+
+  if (size === 'large') {
+    computedStyle.container = {
+      ...computedStyle.container,
+      paddingHorizontal: Spacing[16],
+      paddingVertical: Spacing[8],
+      width: '100%',
+    };
+  }
+
+  computedStyle.label = {
+    color: getLabelColor(),
+    textAlign: 'center',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/button/button.type.ts

@@ -0,0 +1,29 @@
+import type { TextStyle, TouchableOpacityProps, ViewStyle } from 'react-native';
+
+export interface ButtonProps extends TouchableOpacityProps {
+  /**
+   * The text content of the button
+   */
+  label?: string;
+  /**
+   * The variant of the button
+   * - primary: Button with filled background
+   * - secondary: Button with border only
+   * - tertiary: Button without padding, similar to TextButton
+   */
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  /**
+   * The size of the button
+   * - large: full width
+   * - small
+   */
+  size?: 'large' | 'small';
+  /**
+   * The styles of the button, extended from ViewStyle
+   */
+  containerStyles?: ViewStyle;
+  /**
+   * The styles of the text inside button, extended from TextStyle
+   */
+  textStyles?: TextStyle;
+}

package/src/components/coachmark/coachmark.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
+import { Typography } from '../typography/typography.component';
+import { getStyle } from './coachmark.style';
+import type { CoachmarkProps } from './coachmark.type';
+
+export const Coachmark: React.FunctionComponent<CoachmarkProps> = (props) => {
+  const {
+    title = '',
+    description = '',
+    titleStyles,
+    descriptionStyles,
+  } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <View style={[computedStyle.container]}>
+      <View style={[computedStyle.arrowPointer]} />
+      <View style={[computedStyle.headerContainer]}>
+        <Typography
+          variant="subtitle1"
+          style={[computedStyle.title, titleStyles]}
+        >
+          {title}
+        </Typography>
+        <TouchableOpacity>
+          <Typography variant="caption">Back</Typography>
+        </TouchableOpacity>
+      </View>
+      <Typography variant="caption" style={[descriptionStyles]}>
+        {description}
+      </Typography>
+    </View>
+  );
+};

package/src/components/coachmark/coachmark.style.tsx

@@ -0,0 +1,80 @@
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius, Shadow, Spacing } from '../../themes';
+import type { CoachmarkProps } from './coachmark.type';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  headerContainer?: ViewStyle;
+  arrowPointer?: ViewStyle;
+  title?: TextStyle;
+  description?: TextStyle;
+}
+
+export const getStyle = (props: CoachmarkProps) => {
+  const {
+    arrowPosition = 'top',
+    anchorArrowTo = 'left',
+    arrowFromCorner = 16,
+  } = props;
+  const isArrowTop = arrowPosition === 'top';
+
+  const getArrowPosition =
+    arrowPosition === 'top'
+      ? {
+          top: -8,
+        }
+      : {
+          bottom: -8,
+        };
+
+  const getAnchorArrowPosition =
+    anchorArrowTo === 'left'
+      ? {
+          left: arrowFromCorner,
+        }
+      : {
+          right: arrowFromCorner,
+        };
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    padding: Spacing[16],
+    backgroundColor: Palettes.white[50],
+    borderRadius: Radius[8],
+    width: '100%',
+    ...Shadow['shadow-elevation-1'],
+  };
+
+  computedStyle.headerContainer = {
+    flexDirection: 'row',
+    gap: Spacing[16],
+  };
+
+  computedStyle.title = {
+    flex: 1,
+  };
+
+  computedStyle.arrowPointer = {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    borderStyle: 'solid',
+    backgroundColor: 'transparent',
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderLeftWidth: 6,
+    borderRightWidth: 6,
+    borderBottomWidth: 0,
+    borderTopWidth: 8,
+    borderTopColor: Palettes.white[50],
+    borderBottomColor: 'transparent',
+    transform: [{ rotate: isArrowTop ? '180deg' : '0deg' }],
+    ...getArrowPosition,
+    ...getAnchorArrowPosition,
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/coachmark/coachmark.type.ts

@@ -0,0 +1,32 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+export interface CoachmarkProps {
+  /**
+   * The title of the coachmark, max 2 lines
+   */
+  title?: string;
+  /**
+   * The description inside coachmark, max 3 lines
+   */
+  description?: string;
+  /**
+   * Where the arrow pointer will be presented, could be top or bottom
+   * - top: At the top of the coachmark
+   * - bottom: At the bottom of the coachmark
+   */
+  arrowPosition?: 'top' | 'bottom';
+  anchorArrowTo?: 'right' | 'left';
+  arrowFromCorner?: number;
+  /**
+   * The styles of the button, extended from ViewStyle
+   */
+  containerStyles?: ViewStyle;
+  /**
+   * The styles of the coachmark title
+   */
+  titleStyles?: TextStyle;
+  /**
+   * The styles of the coachmark description
+   */
+  descriptionStyles?: TextStyle;
+}

package/src/components/dot/dot.component.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { getStyle } from './dot.style';
+import type { DotProps } from './dot.type';
+import { Typography } from '../typography/typography.component';
+
+const Dot: React.FunctionComponent<DotProps> = (props) => {
+  const { label = '', containerStyle = {} } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <View style={[computedStyle.container, containerStyle]}>
+      {label ? (
+        <Typography variant="caption2" style={[computedStyle.label]}>
+          {label}
+        </Typography>
+      ) : null}
+    </View>
+  );
+};
+
+export { Dot };

package/src/components/dot/dot.style.tsx

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius } from '../../themes';
+
+import type { DotProps } from './dot.type';
+import type { TextStyle, ViewStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  label?: TextStyle;
+}
+
+export const getStyle = (props: DotProps) => {
+  const { label = '' } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    minWidth: label ? 18 : 8,
+    height: label ? 18 : 8,
+    paddingHorizontal: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.red[500],
+  };
+
+  computedStyle.label = {
+    color: Palettes.white[50],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/dot/dot.type.ts

@@ -0,0 +1,6 @@
+import type { ViewStyle } from 'react-native';
+
+export interface DotProps {
+  label?: string;
+  containerStyle?: ViewStyle;
+}

package/src/components/index.ts

@@ -0,0 +1,34 @@
+export { Button } from './button/button.component';
+export { Label } from './label/label.component';
+export { BaseComponent } from './base/base.component';
+export { Typography } from './typography/typography.component';
+export { Coachmark } from './coachmark/coachmark.component';
+export { TextLink } from './textlink/textlink.component';
+export { SliderIndicator } from './slider-indicator/slider-indicator.component';
+export { TextInput } from './TextInput/TextInput.component';
+export { TextArea } from './TextArea/TextArea.component';
+export { StepperCounter } from './StepperCounter/StepperCounter.component';
+export { Divider } from './Divider/Divider.component';
+export { Tabs } from './Tabs/Tabs.component';
+export { RadioButton } from './RadioButton/RadioButton.component';
+export { BottomSheet } from './BottomSheet/BottomSheet.component';
+export { RadioInput } from './RadioInput/RadioInput.component';
+export { CheckBoxInput } from './CheckBoxInput/CheckBoxInput.component';
+export { Checkbox } from './Checkbox/Checkbox.component';
+export { Appbar } from './Appbar/Appbar.component';
+export { Snackbar } from './Snackbar/Snackbar.component';
+export { Switch } from './switch/switch.component';
+export { Dot } from './dot/dot.component';
+export { InformationBox } from './information-box/information-box.component';
+export { RoundedTab } from './rounded-tab/rounded-tab.component';
+
+export type { ButtonProps } from './button/button.type';
+export type { TextInputProps } from './TextInput/TextInput.type';
+export type { SliderIndicatorProps } from './slider-indicator/slider-indicator.type';
+export type { TextLinkProps } from './textlink/textlink.type';
+export type { TypographyProps } from './typography/typography.type';
+export type { CoachmarkProps } from './coachmark/coachmark.type';
+export type { TextAreaProps } from './TextArea/TextArea.type';
+export type { StepperCounterProps } from './StepperCounter/StepperCounter.type';
+export type { DividerProps } from './Divider/Divider.type';
+export type { TabsProps } from './Tabs/Tabs.type';

package/src/components/information-box/information-box.component.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { getStyle } from './information-box.style';
+import { Typography } from '../typography/typography.component';
+import { IconInfo } from '../../icons';
+
+import type { InformationBoxProps } from './information-box.type';
+
+const InformationBox: React.FunctionComponent<
+  React.PropsWithChildren<InformationBoxProps>
+> = (props) => {
+  const {
+    text = '',
+    showIcon = true,
+    informationIcon = null,
+    actionComponent = null,
+  } = props;
+
+  const computedStyle = getStyle(props);
+
+  const renderInformationText = () => {
+    if (typeof text === 'string') {
+      return (
+        <Typography
+          variant="caption"
+          numberOfLines={3}
+          style={[computedStyle.text]}
+        >
+          {text}
+        </Typography>
+      );
+    }
+
+    return text;
+  };
+
+  return (
+    <View style={computedStyle.container}>
+      <View style={[computedStyle.informationContainer]}>
+        {showIcon && (
+          <View style={[computedStyle.iconWrapper]}>
+            {informationIcon || <IconInfo width={16} height={16} />}
+          </View>
+        )}
+        {renderInformationText()}
+      </View>
+      {actionComponent && (
+        <View style={[computedStyle.actionWrapper]}>{actionComponent}</View>
+      )}
+    </View>
+  );
+};
+
+export { InformationBox };

package/src/components/information-box/information-box.style.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Spacing } from '../../themes';
+
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { InformationBoxProps } from './information-box.type';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  text?: TextStyle;
+  informationContainer?: ViewStyle;
+  iconWrapper?: ViewStyle;
+  actionWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: InformationBoxProps) => {
+  const { severity = 'default' } = props;
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    width: '100%',
+    paddingVertical: Spacing[8],
+    paddingHorizontal: Spacing[12],
+    borderRadius: Radius[8],
+    backgroundColor:
+      severity !== 'default' ? Palettes.red[50] : Palettes.blue[50],
+  };
+
+  computedStyle.informationContainer = {
+    flexDirection: 'row',
+    alignItems: 'center',
+  };
+
+  computedStyle.iconWrapper = {
+    marginRight: Spacing[8],
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  computedStyle.actionWrapper = {
+    marginTop: Spacing[8],
+  };
+
+  computedStyle.text = {
+    flex: 1,
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/information-box/information-box.type.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+export interface InformationBoxProps {
+  /**
+   * The text content of the component
+   */
+  text: string | ReactNode;
+
+  title?: string;
+
+  subtitle?: string;
+
+  showIcon?: boolean;
+
+  informationIcon?: ReactNode;
+
+  actionComponent?: ReactNode;
+
+  severity?: 'critical' | 'default';
+}

package/src/components/label/label.component.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { View } from 'react-native';
+import type { LabelProps } from './label.type';
+import { getStyle } from './label.style';
+
+const Label: React.FunctionComponent<LabelProps> = (props) => {
+  const { label = 'Default label' } = props;
+
+  const computedStyle = getStyle();
+
+  return (
+    <View>
+      <Text style={computedStyle.label}>{label}</Text>
+    </View>
+  );
+};
+
+export { Label };

package/src/components/label/label.style.tsx

@@ -0,0 +1,16 @@
+import type { TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+interface ComputedStyleProps {
+  label?: TextStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.label = {
+    color: 'red',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/label/label.type.ts

@@ -0,0 +1,14 @@
+export interface LabelProps {
+  /**
+   * The text content of the label
+   */
+  label: string;
+
+  /**
+   * The variant of the label
+   * - `normal`: description
+   *
+   * @default: "normal"
+   */
+  variant: string;
+}

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

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { getStyle, getTabItemStyle } from './rounded-tab.style';
+
+import type { RoundedTabProps, TabItemProps } from './rounded-tab.type';
+import { TouchableWithoutFeedback } from 'react-native';
+import { Typography } from '../typography/typography.component';
+import { Animated } from 'react-native';
+import { FlatList } from 'react-native';
+
+const RoundedTab: React.FunctionComponent<RoundedTabProps> = (props) => {
+  const { data = [], selectedValue = '', onTabItemPress = () => null } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <View style={[computedStyle.container]}>
+      <FlatList
+        horizontal={true}
+        data={data}
+        renderItem={({ item }) => (
+          <TabItem
+            label={item.label}
+            value={item.value}
+            isSelected={selectedValue === item.value}
+            leading={item.leading}
+            trailing={item.trailing}
+            onPress={onTabItemPress}
+          />
+        )}
+        // eslint-disable-next-line react/no-unstable-nested-components
+        ItemSeparatorComponent={() => (
+          <View style={[computedStyle.itemSeparator]} />
+        )}
+      />
+    </View>
+  );
+};
+
+function TabItem(props: TabItemProps): JSX.Element {
+  const {
+    label = '',
+    value,
+    isSelected = false,
+    onPress = () => null,
+    leading = null,
+    trailing = null,
+  } = props;
+
+  const computedStyle = getTabItemStyle(props);
+
+  const animatedButtonScale = new Animated.Value(1);
+
+  const onPressIn = () => {
+    if (!isSelected) {
+      Animated.spring(animatedButtonScale, {
+        toValue: 0.9,
+        useNativeDriver: true,
+      }).start();
+    }
+  };
+
+  const onPressOut = () => {
+    if (!isSelected) {
+      Animated.spring(animatedButtonScale, {
+        toValue: 1,
+        useNativeDriver: true,
+      }).start();
+    }
+  };
+
+  const animatedScaleStyle = {
+    transform: [{ scale: animatedButtonScale }],
+  };
+
+  const onTabItemPress = () => {
+    if (!isSelected) {
+      onPress(value);
+    }
+  };
+
+  return (
+    <TouchableWithoutFeedback
+      onPress={onTabItemPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+    >
+      <Animated.View style={[computedStyle.container, animatedScaleStyle]}>
+        {leading && (
+          <View style={[computedStyle.leadingWrapper]}>{leading}</View>
+        )}
+        <Typography
+          variant="button-small"
+          numberOfLines={1}
+          style={[computedStyle.label]}
+        >
+          {label}
+        </Typography>
+        {trailing && (
+          <View style={[computedStyle.trailingWrapper]}>{trailing}</View>
+        )}
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+}
+
+export { RoundedTab };