@adiraku/react-native-ui 1.2.9-canary-7 → 2.0.0-canary-2

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

@@ -1,480 +1,25 @@
-import type { TextStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { Palettes } from '../../themes';
 import type { TypographyProps } from './typography.type';
+import { makeStyles } from '../../config';
 
-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 useStyles = makeStyles((themes, props: TypographyProps) => {
+  const { Fonts, FontFamilyStyle } = themes;
+  const { variant = 'body1', fontStyle = 'normal' } = props;
 
-  // Heading
-  'text-heading-h1-semibold'?: TextStyle;
-  'text-heading-h1-regular'?: TextStyle;
-  'text-heading-h2-semibold'?: TextStyle;
-  'text-heading-h2-regular'?: TextStyle;
-  'text-heading-h3-bold'?: TextStyle;
-  'text-heading-h3-regular'?: TextStyle;
-  'text-heading-h4-semibold'?: TextStyle;
-  'text-heading-h4-regular'?: TextStyle;
-  'text-heading-h5-bold'?: TextStyle;
-  'text-heading-h5-semibold'?: TextStyle;
-  'text-heading-h5-regular'?: TextStyle;
-  'text-heading-h6-bold'?: TextStyle;
-  'text-heading-h6-semibold'?: TextStyle;
-  'text-heading-h6-regular'?: TextStyle;
-  // Subheading
-  'text-sub-heading-semibold'?: TextStyle;
-  // Subtitle
-  'text-subtitle-primary-semibold'?: TextStyle;
-  'text-subtitle-secondary-bold'?: TextStyle;
-  'text-subtitle-secondary-semibold'?: TextStyle;
-  // Button
-  'text-button-default-semibold'?: TextStyle;
-  'text-button-small-semibold'?: TextStyle;
-  // Caption
-  'text-caption-semibold'?: TextStyle;
-  'text-caption-regular'?: TextStyle;
-  // Overline
-  'text-overline-semibold'?: TextStyle;
-  'text-overline-regular'?: TextStyle;
-  'text-overline-strike'?: TextStyle;
-  // Body
-  'text-body-primary-regular'?: TextStyle;
-  'text-body-secondary-regular'?: TextStyle;
-  'text-body-tertiary-regular'?: TextStyle;
-}
+  const baseStyle = FontFamilyStyle[variant] ?? FontFamilyStyle.body1;
 
-export const getStyle = (props: TypographyProps) => {
-  const { fontStyle, fontColor = Palettes.black[900] } = props;
-  const computedStyle: ComputedStyleProps = {};
+  if (!baseStyle.fontFamily) {
+    // Apply appropriate font based on its font style
+    const fontType = baseStyle.fontType ?? 'regular';
+    const isItalic = fontStyle === 'italic' || baseStyle.fontStyle === 'italic';
+    const fontKey = (fontType +
+      (isItalic ? 'Italic' : '')) as keyof typeof Fonts;
 
-  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,
-  };
+    baseStyle.fontFamily = Fonts[fontKey];
+  }
 
-  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,
-  };
+  delete baseStyle.fontType;
 
-  computedStyle['heading6-regular'] = {
-    ...baseTextStyle,
-    fontSize: 20,
-    lineHeight: 30,
+  return {
+    base: baseStyle,
   };
-
-  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,
-  };
-
-  // -===== New Token update =====-
-  const textSemiboldV2: TextStyle = {
-    fontFamily:
-      fontStyle === 'italic'
-        ? 'Montserrat-SemiBoldItalic'
-        : 'Montserrat-SemiBold',
-    fontSize: 600,
-  };
-
-  const textBoldV2: TextStyle = {
-    fontFamily:
-      fontStyle === 'italic' ? 'Montserrat-BoldItalic' : 'Montserrat-Bold',
-    fontSize: 700,
-  };
-
-  // Heading
-  computedStyle['text-heading-h1-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 96,
-    lineHeight: 96,
-  };
-
-  computedStyle['text-heading-h1-regular'] = {
-    ...baseTextStyle,
-    fontSize: 96,
-    lineHeight: 96,
-  };
-
-  computedStyle['text-heading-h2-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 60,
-    lineHeight: 60,
-  };
-
-  computedStyle['text-heading-h2-regular'] = {
-    ...baseTextStyle,
-    fontSize: 60,
-    lineHeight: 60,
-  };
-
-  computedStyle['text-heading-h3-bold'] = {
-    ...baseTextStyle,
-    ...textBoldV2,
-    fontSize: 48,
-    lineHeight: 48,
-  };
-
-  computedStyle['text-heading-h3-regular'] = {
-    ...baseTextStyle,
-    fontSize: 48,
-    lineHeight: 48,
-  };
-
-  computedStyle['text-heading-h4-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 34,
-    lineHeight: 34,
-  };
-
-  computedStyle['text-heading-h4-regular'] = {
-    ...baseTextStyle,
-    fontSize: 34,
-    lineHeight: 34,
-  };
-
-  computedStyle['text-heading-h5-bold'] = {
-    ...baseTextStyle,
-    ...textBoldV2,
-    fontSize: 24,
-    lineHeight: 24,
-  };
-
-  computedStyle['text-heading-h5-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 24,
-    lineHeight: 24,
-  };
-
-  computedStyle['text-heading-h5-regular'] = {
-    ...baseTextStyle,
-    fontSize: 24,
-    lineHeight: 24,
-  };
-
-  computedStyle['text-heading-h6-bold'] = {
-    ...baseTextStyle,
-    ...textBoldV2,
-    fontSize: 20,
-    lineHeight: 20,
-  };
-
-  computedStyle['text-heading-h6-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 20,
-    lineHeight: 20,
-  };
-
-  computedStyle['text-heading-h6-regular'] = {
-    ...baseTextStyle,
-    fontSize: 20,
-    lineHeight: 20,
-  };
-
-  // Sub Heading
-  computedStyle['text-sub-heading-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 14,
-    lineHeight: 14,
-  };
-
-  // Subtitle
-  computedStyle['text-subtitle-primary-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 16,
-    lineHeight: 16,
-  };
-
-  computedStyle['text-subtitle-secondary-bold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 14,
-    lineHeight: 14,
-  };
-
-  computedStyle['text-subtitle-secondary-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 14,
-    lineHeight: 14,
-  };
-
-  // Button
-  computedStyle['text-button-default-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 14,
-    lineHeight: 14,
-  };
-
-  computedStyle['text-button-small-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 12,
-    lineHeight: 12,
-  };
-
-  // Caption
-  computedStyle['text-caption-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 12,
-    lineHeight: 12,
-  };
-
-  computedStyle['text-caption-regular'] = {
-    ...baseTextStyle,
-    fontSize: 12,
-    lineHeight: 12,
-  };
-
-  // Overline
-  computedStyle['text-overline-semibold'] = {
-    ...baseTextStyle,
-    ...textSemiboldV2,
-    fontSize: 10,
-    lineHeight: 10,
-  };
-
-  computedStyle['text-overline-regular'] = {
-    ...baseTextStyle,
-    fontSize: 12,
-    lineHeight: 12,
-  };
-
-  computedStyle['text-overline-strike'] = {
-    ...baseTextStyle,
-    textDecorationLine: 'line-through',
-    fontSize: 12,
-    lineHeight: 12,
-  };
-
-  // Body
-  computedStyle['text-body-primary-regular'] = {
-    ...baseTextStyle,
-    fontSize: 16,
-    lineHeight: 16,
-  };
-
-  computedStyle['text-body-secondary-regular'] = {
-    ...baseTextStyle,
-    fontSize: 14,
-    lineHeight: 14,
-  };
-
-  computedStyle['text-body-tertiary-regular'] = {
-    ...baseTextStyle,
-    fontSize: 12,
-    lineHeight: 12,
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+});

package/src/components/typography/typography.type.ts

@@ -1,5 +1,7 @@
 import type { ColorValue, TextStyle, TextProps } from 'react-native';
 
+import { ColorTokenType } from '../../config';
+
 export interface TypographyProps extends TextProps {
   // children: string | null;
   /**
@@ -74,6 +76,7 @@ export interface TypographyProps extends TextProps {
   /**
    * The color of the Text
    * @default Palettes.Black.900 | #112639
+   * @deprecated Deprecated, please use color props instead
    */
   fontColor?: ColorValue;
 
@@ -81,4 +84,10 @@ export interface TypographyProps extends TextProps {
    * The style of the text, extended from TextStyle
    */
   textStyles?: TextStyle;
+
+  /**
+   * Color of the Text component, using design token variant
+   * @default text-primary
+   */
+  color?: Extract<keyof ColorTokenType, `text-${string}`>;
 }

package/src/config/index.ts

@@ -0,0 +1,4 @@
+export * from './theme.default';
+export * from './theme.type';
+export * from './theme.provider';
+export * from './makeStyles';

package/src/config/makeStyles.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { useAppTheme } from './theme.provider';
+import { AppThemeColor } from './theme.type';
+
+export const makeStyles =
+  <T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>, V>(
+    styles: T | ((theme: AppThemeColor, props: V) => T)
+  ) =>
+  (props?: V): T => {
+    const {
+      colors,
+      Border,
+      FontFamilyStyle,
+      Fonts,
+      Radius,
+      Shadow,
+      Spacing,
+      colorScheme,
+    } = useAppTheme();
+
+    return useMemo(() => {
+      const theme = {
+        colors,
+        Border,
+        FontFamilyStyle,
+        Fonts,
+        Radius,
+        Shadow,
+        Spacing,
+        colorScheme,
+      };
+
+      const css =
+        typeof styles === 'function'
+          ? styles(theme, props ?? ({} as any))
+          : styles;
+
+      return StyleSheet.create(css);
+    }, [
+      Border,
+      FontFamilyStyle,
+      Fonts,
+      Radius,
+      Shadow,
+      Spacing,
+      colorScheme,
+      colors,
+      props,
+    ]);
+  };