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

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

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

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

package/src/components/typography/typography.style.tsx

@@ -1,237 +1,237 @@
-import type { TextStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { Palettes } from '../../themes';
-import type { TypographyProps } from './typography.type';
-
-interface ComputedStyleProps {
-  'heading1-semibold'?: TextStyle;
-  'heading1-regular'?: TextStyle;
-  'heading2-semibold'?: TextStyle;
-  'heading2-regular'?: TextStyle;
-  'heading3-semibold'?: TextStyle;
-  'heading3-regular'?: TextStyle;
-  'heading4-semibold'?: TextStyle;
-  'heading4-regular'?: TextStyle;
-  'heading5-bold'?: TextStyle;
-  'heading5-semibold'?: TextStyle;
-  'heading5-regular'?: TextStyle;
-  'heading6-bold'?: TextStyle;
-  'heading6-semibold'?: TextStyle;
-  'heading6-regular'?: TextStyle;
-  'subheading'?: TextStyle;
-  'subtitle1'?: TextStyle;
-  'subtitle2'?: TextStyle;
-  'subtitle2-extrabold'?: TextStyle;
-  'body1'?: TextStyle;
-  'body2'?: TextStyle;
-  'body3'?: TextStyle;
-  'button'?: TextStyle;
-  'button-small'?: TextStyle;
-  'caption'?: TextStyle;
-  'caption2'?: TextStyle;
-  'overline'?: TextStyle;
-  'overline-small'?: TextStyle;
-}
-
-export const getStyle = (props: TypographyProps) => {
-  const { fontStyle, fontColor = Palettes.black[900] } = props;
-  const computedStyle: ComputedStyleProps = {};
-
-  const baseTextStyle: TextStyle = {
-    color: fontColor,
-    fontFamily:
-      fontStyle === 'italic' ? 'Montserrat-Italic' : 'Montserrat-Regular',
-  };
-
-  const textSemibold: TextStyle = {
-    fontFamily:
-      fontStyle === 'italic'
-        ? 'Montserrat-SemiBoldItalic'
-        : 'Montserrat-SemiBold',
-  };
-
-  const textBold: TextStyle = {
-    fontFamily:
-      fontStyle === 'italic' ? 'Montserrat-BoldItalic' : 'Montserrat-Bold',
-  };
-
-  computedStyle['heading1-semibold'] = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 92,
-    lineHeight: 144,
-  };
-
-  computedStyle['heading1-regular'] = {
-    ...baseTextStyle,
-    fontSize: 92,
-    lineHeight: 144,
-  };
-
-  computedStyle['heading2-semibold'] = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 60,
-    lineHeight: 90,
-  };
-
-  computedStyle['heading2-regular'] = {
-    ...baseTextStyle,
-    fontSize: 60,
-    lineHeight: 90,
-  };
-
-  computedStyle['heading3-semibold'] = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 48,
-    lineHeight: 72,
-  };
-
-  computedStyle['heading3-regular'] = {
-    ...baseTextStyle,
-    fontSize: 48,
-    lineHeight: 72,
-  };
-
-  computedStyle['heading4-semibold'] = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 34,
-    lineHeight: 51,
-  };
-
-  computedStyle['heading4-regular'] = {
-    ...baseTextStyle,
-    fontSize: 34,
-    lineHeight: 51,
-  };
-
-  computedStyle['heading5-bold'] = {
-    ...baseTextStyle,
-    ...textBold,
-    fontSize: 24,
-    lineHeight: 36,
-  };
-
-  computedStyle['heading5-semibold'] = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 24,
-    lineHeight: 36,
-  };
-
-  computedStyle['heading5-regular'] = {
-    ...baseTextStyle,
-    fontSize: 24,
-    lineHeight: 36,
-  };
-
-  computedStyle['heading6-bold'] = {
-    ...baseTextStyle,
-    ...textBold,
-    fontSize: 20,
-    lineHeight: 30,
-  };
-
-  computedStyle['heading6-semibold'] = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 20,
-    lineHeight: 30,
-  };
-
-  computedStyle['heading6-regular'] = {
-    ...baseTextStyle,
-    fontSize: 20,
-    lineHeight: 30,
-  };
-
-  computedStyle.subheading = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 18,
-    lineHeight: 27,
-  };
-
-  computedStyle.subtitle1 = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 16,
-    lineHeight: 24,
-  };
-
-  computedStyle.subtitle2 = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 14,
-    lineHeight: 21,
-  };
-
-  computedStyle['subtitle2-extrabold'] = {
-    ...baseTextStyle,
-    ...textBold,
-    fontSize: 14,
-    lineHeight: 21,
-  };
-
-  computedStyle.body1 = {
-    ...baseTextStyle,
-    fontSize: 16,
-    lineHeight: 24,
-  };
-
-  computedStyle.body2 = {
-    ...baseTextStyle,
-    fontSize: 14,
-    lineHeight: 21,
-  };
-
-  computedStyle.body3 = {
-    ...baseTextStyle,
-    fontSize: 12,
-    lineHeight: 21,
-  };
-
-  computedStyle.button = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 14,
-    lineHeight: 21,
-  };
-
-  computedStyle['button-small'] = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 12,
-    lineHeight: 18,
-  };
-
-  computedStyle.caption = {
-    ...baseTextStyle,
-    fontSize: 12,
-    lineHeight: 18,
-  };
-
-  computedStyle.caption2 = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 12,
-    lineHeight: 18,
-  };
-
-  computedStyle.overline = {
-    ...baseTextStyle,
-    ...textSemibold,
-    fontSize: 10,
-    lineHeight: 15,
-  };
-
-  computedStyle['overline-small'] = {
-    ...baseTextStyle,
-    fontSize: 10,
-    lineHeight: 15,
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes } from '../../themes';
+import type { TypographyProps } from './typography.type';
+
+interface ComputedStyleProps {
+  'heading1-semibold'?: TextStyle;
+  'heading1-regular'?: TextStyle;
+  'heading2-semibold'?: TextStyle;
+  'heading2-regular'?: TextStyle;
+  'heading3-semibold'?: TextStyle;
+  'heading3-regular'?: TextStyle;
+  'heading4-semibold'?: TextStyle;
+  'heading4-regular'?: TextStyle;
+  'heading5-bold'?: TextStyle;
+  'heading5-semibold'?: TextStyle;
+  'heading5-regular'?: TextStyle;
+  'heading6-bold'?: TextStyle;
+  'heading6-semibold'?: TextStyle;
+  'heading6-regular'?: TextStyle;
+  'subheading'?: TextStyle;
+  'subtitle1'?: TextStyle;
+  'subtitle2'?: TextStyle;
+  'subtitle2-extrabold'?: TextStyle;
+  'body1'?: TextStyle;
+  'body2'?: TextStyle;
+  'body3'?: TextStyle;
+  'button'?: TextStyle;
+  'button-small'?: TextStyle;
+  'caption'?: TextStyle;
+  'caption2'?: TextStyle;
+  'overline'?: TextStyle;
+  'overline-small'?: TextStyle;
+}
+
+export const getStyle = (props: TypographyProps) => {
+  const { fontStyle, fontColor = Palettes.black[900] } = props;
+  const computedStyle: ComputedStyleProps = {};
+
+  const baseTextStyle: TextStyle = {
+    color: fontColor,
+    fontFamily:
+      fontStyle === 'italic' ? 'Montserrat-Italic' : 'Montserrat-Regular',
+  };
+
+  const textSemibold: TextStyle = {
+    fontFamily:
+      fontStyle === 'italic'
+        ? 'Montserrat-SemiBoldItalic'
+        : 'Montserrat-SemiBold',
+  };
+
+  const textBold: TextStyle = {
+    fontFamily:
+      fontStyle === 'italic' ? 'Montserrat-BoldItalic' : 'Montserrat-Bold',
+  };
+
+  computedStyle['heading1-semibold'] = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 92,
+    lineHeight: 144,
+  };
+
+  computedStyle['heading1-regular'] = {
+    ...baseTextStyle,
+    fontSize: 92,
+    lineHeight: 144,
+  };
+
+  computedStyle['heading2-semibold'] = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 60,
+    lineHeight: 90,
+  };
+
+  computedStyle['heading2-regular'] = {
+    ...baseTextStyle,
+    fontSize: 60,
+    lineHeight: 90,
+  };
+
+  computedStyle['heading3-semibold'] = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 48,
+    lineHeight: 72,
+  };
+
+  computedStyle['heading3-regular'] = {
+    ...baseTextStyle,
+    fontSize: 48,
+    lineHeight: 72,
+  };
+
+  computedStyle['heading4-semibold'] = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 34,
+    lineHeight: 51,
+  };
+
+  computedStyle['heading4-regular'] = {
+    ...baseTextStyle,
+    fontSize: 34,
+    lineHeight: 51,
+  };
+
+  computedStyle['heading5-bold'] = {
+    ...baseTextStyle,
+    ...textBold,
+    fontSize: 24,
+    lineHeight: 36,
+  };
+
+  computedStyle['heading5-semibold'] = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 24,
+    lineHeight: 36,
+  };
+
+  computedStyle['heading5-regular'] = {
+    ...baseTextStyle,
+    fontSize: 24,
+    lineHeight: 36,
+  };
+
+  computedStyle['heading6-bold'] = {
+    ...baseTextStyle,
+    ...textBold,
+    fontSize: 20,
+    lineHeight: 30,
+  };
+
+  computedStyle['heading6-semibold'] = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 20,
+    lineHeight: 30,
+  };
+
+  computedStyle['heading6-regular'] = {
+    ...baseTextStyle,
+    fontSize: 20,
+    lineHeight: 30,
+  };
+
+  computedStyle.subheading = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 18,
+    lineHeight: 27,
+  };
+
+  computedStyle.subtitle1 = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 16,
+    lineHeight: 24,
+  };
+
+  computedStyle.subtitle2 = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 14,
+    lineHeight: 21,
+  };
+
+  computedStyle['subtitle2-extrabold'] = {
+    ...baseTextStyle,
+    ...textBold,
+    fontSize: 14,
+    lineHeight: 21,
+  };
+
+  computedStyle.body1 = {
+    ...baseTextStyle,
+    fontSize: 16,
+    lineHeight: 24,
+  };
+
+  computedStyle.body2 = {
+    ...baseTextStyle,
+    fontSize: 14,
+    lineHeight: 21,
+  };
+
+  computedStyle.body3 = {
+    ...baseTextStyle,
+    fontSize: 12,
+    lineHeight: 21,
+  };
+
+  computedStyle.button = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 14,
+    lineHeight: 21,
+  };
+
+  computedStyle['button-small'] = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 12,
+    lineHeight: 18,
+  };
+
+  computedStyle.caption = {
+    ...baseTextStyle,
+    fontSize: 12,
+    lineHeight: 18,
+  };
+
+  computedStyle.caption2 = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 12,
+    lineHeight: 18,
+  };
+
+  computedStyle.overline = {
+    ...baseTextStyle,
+    ...textSemibold,
+    fontSize: 10,
+    lineHeight: 15,
+  };
+
+  computedStyle['overline-small'] = {
+    ...baseTextStyle,
+    fontSize: 10,
+    lineHeight: 15,
+  };
+
+  return StyleSheet.create(computedStyle);
+};