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

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

@@ -1,50 +1,50 @@
-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 = 'small',
-    containerStyles,
-    textStyles,
-    enablePressWhenDisabled = false,
-    disabled = false,
-    ...rest
-  } = props;
-
-  const computedStyle = getStyle({
-    ...props,
-    variant,
-    label,
-    size,
-  });
-
-  return (
-    <TouchableHighlight
-      onPress={onPress}
-      style={[computedStyle.container, containerStyles]}
-      underlayColor={
-        variant !== 'primary' ? Palettes.blue[50] : Palettes.black[800]
-      }
-      disabled={!enablePressWhenDisabled && disabled}
-      {...rest}
-    >
-      <Typography
-        variant={size === 'large' ? 'button' : 'button-small'}
-        textStyles={{ ...computedStyle.label, ...textStyles }}
-      >
-        {label}
-      </Typography>
-    </TouchableHighlight>
-  );
-};
-
-export { Button };
+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 = 'small',
+    containerStyles,
+    textStyles,
+    enablePressWhenDisabled = false,
+    disabled = false,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyle({
+    ...props,
+    variant,
+    label,
+    size,
+  });
+
+  return (
+    <TouchableHighlight
+      onPress={onPress}
+      style={[computedStyle.container, containerStyles]}
+      underlayColor={
+        variant !== 'primary' ? Palettes.blue[50] : Palettes.black[800]
+      }
+      disabled={!enablePressWhenDisabled && disabled}
+      {...rest}
+    >
+      <Typography
+        variant={size === 'large' ? 'button' : 'button-small'}
+        textStyles={{ ...computedStyle.label, ...textStyles }}
+      >
+        {label}
+      </Typography>
+    </TouchableHighlight>
+  );
+};
+
+export { Button };

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

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

@@ -1,35 +1,35 @@
-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;
-
-  /**
-   * Enable the Press action, when the button state is disabled.
-   * Usable for logging the user press on disabled button etc.
-   */
-  enablePressWhenDisabled?: boolean;
-}
+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;
+
+  /**
+   * Enable the Press action, when the button state is disabled.
+   * Usable for logging the user press on disabled button etc.
+   */
+  enablePressWhenDisabled?: boolean;
+}

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

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

@@ -1,80 +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',
-  };
-
-  computedStyle.title = {
-    flex: 1,
-    marginRight: Spacing[16],
-  };
-
-  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);
-};
+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',
+  };
+
+  computedStyle.title = {
+    flex: 1,
+    marginRight: Spacing[16],
+  };
+
+  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

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