react-native-shared-components 0.3.3 → 0.3.5

package/src/components/BaseButton/index.tsx

@@ -6,9 +6,10 @@ import {
   type ViewStyle,
   type TextStyle,
   type TouchableOpacityProps,
+  Text,
 } from 'react-native';
 import { Colors } from '../../constants/Colors';
-import { BaseText, type BaseTextType } from '../BaseText';
+import { useTheme } from '../../core';
 
 export type ButtonVariant = 'primary' | 'link-subtle' | 'red' | 'brand-subtle';
 export type ButtonSize = 'small' | 'regular' | 'large';
@@ -40,37 +41,24 @@ export const BaseButton: React.FC<BaseButtonProps> = ({
   ...props
 }) => {
   const sizeStyle = styles[`size_${size}`];
-  const textSizeStyle = styles[`text_${size}`];
   const variantStyle = disabled
     ? styles.variant_disabled
     : styles[`variant_${variant}`];
   const textVariantStyle = disabled
     ? styles.text_disabled
     : styles[`text_variant_${variant}`];
+  const { typography } = useTheme();
 
-  const getTextType = (): BaseTextType => {
+  const getFontSize = () => {
     switch (size) {
-      case 'small':
-        return 'Medium';
-      case 'regular':
-        return 'SemiBold';
       case 'large':
-        return 'Bold';
-      default:
-        return 'SemiBold';
-    }
-  };
-
-  const getTextSize = (): number => {
-    switch (size) {
-      case 'small':
-        return 14;
+        return typography['fontSize/fs16'];
       case 'regular':
-        return 16;
-      case 'large':
-        return 20;
+        return typography['fontSize/fs14'];
+      case 'small':
+        return typography['fontSize/fs12'];
       default:
-        return 16;
+        return typography['fontSize/fs14'];
     }
   };
 
@@ -129,13 +117,11 @@ export const BaseButton: React.FC<BaseButtonProps> = ({
         <>
           {icon && iconPosition === 'left' && icon}
           {label && (
-            <BaseText
-              type={getTextType()}
-              size={getTextSize()}
-              style={[textSizeStyle, textVariantStyle, textStyle]}
+            <Text
+              style={[textVariantStyle, textStyle, { fontSize: getFontSize() }]}
             >
               {label}
-            </BaseText>
+            </Text>
           )}
           {icon && iconPosition === 'right' && icon}
         </>
@@ -213,13 +199,4 @@ const styles = StyleSheet.create({
   'text_disabled': {
     color: Colors.text_disabled_tertiary_light,
   },
-  'text_small': {
-    fontSize: 14,
-  },
-  'text_regular': {
-    fontSize: 16,
-  },
-  'text_large': {
-    fontSize: 20,
-  },
 });

package/src/components/BaseContainer/index.tsx

@@ -8,11 +8,11 @@ import {
   type TextStyle,
   type ViewStyle,
   type KeyboardAvoidingViewProps,
+  Text,
 } from 'react-native';
 import { type ReactNode } from 'react';
 import { styles } from './styles';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { BaseText, type BaseTextType } from '../BaseText';
 
 export interface IBaseContainer {
   title?: string;
@@ -31,7 +31,6 @@ export interface IBaseContainer {
   backgroundColorStatusBar?: ColorValue | undefined;
   edges?: Array<'top' | 'bottom' | 'left' | 'right'>;
   keyboardAvoidingViewProps?: Omit<KeyboardAvoidingViewProps, 'children'>;
-  type?: BaseTextType;
 }
 
 export const BaseContainer = ({
@@ -51,7 +50,6 @@ export const BaseContainer = ({
   styleHeader,
   edges,
   keyboardAvoidingViewProps,
-  type = 'Medium',
 }: IBaseContainer) => {
   return (
     <KeyboardAvoidingView
@@ -82,9 +80,7 @@ export const BaseContainer = ({
                   {center}
                 </TouchableOpacity>
               ) : title ? (
-                <BaseText type={type} style={styleTitle}>
-                  {title}
-                </BaseText>
+                <Text style={styleTitle}>{title}</Text>
               ) : (
                 <View />
               )}

package/src/components/BaseText/index.tsx

@@ -1,43 +1,65 @@
-import React from 'react';
-import { Text, StyleSheet, type TextProps } from 'react-native';
+import { Text, type TextProps, type TextStyle } from 'react-native';
+import { useMemo, type ReactNode } from 'react';
+import { useTheme } from '../../core';
 
-export type BaseTextType = 'ExtraBold' | 'Bold' | 'SemiBold' | 'Medium';
-
-export interface BaseTextProps extends TextProps {
-  type?: BaseTextType;
-  size?: number;
-  children: React.ReactNode;
+export const BaseTextTypes = {
+  'text12/normal': 'text12/normal',
+  'text12/medium': 'text12/medium',
+  'text12/semiBold': 'text12/semiBold',
+  'text12/bold': 'text12/bold',
+  'text14/normal': 'text14/normal',
+  'text14/medium': 'text14/medium',
+  'text14/semiBold': 'text14/semiBold',
+  'text14/bold': 'text14/bold',
+  'text16/normal': 'text16/normal',
+  'text16/medium': 'text16/medium',
+  'text16/semiBold': 'text16/semiBold',
+  'text16/bold': 'text16/bold',
+  'text18/normal': 'text18/normal',
+  'text18/medium': 'text18/medium',
+  'text18/semiBold': 'text18/semiBold',
+  'text18/bold': 'text18/bold',
+  'text20/normal': 'text20/normal',
+  'text20/medium': 'text20/medium',
+  'text20/semiBold': 'text20/semiBold',
+  'text20/bold': 'text20/bold',
+  'text24/normal': 'text24/normal',
+  'text24/medium': 'text24/medium',
+  'text24/semiBold': 'text24/semiBold',
+  'text24/bold': 'text24/bold',
+  'text30/normal': 'text30/normal',
+  'text30/medium': 'text30/medium',
+  'text30/semiBold': 'text30/semiBold',
+  'text30/bold': 'text30/bold',
+  'text36/normal': 'text36/normal',
+  'text36/medium': 'text36/medium',
+  'text36/semiBold': 'text36/semiBold',
+  'text36/bold': 'text36/bold',
+};
+export type EBaseTextType = keyof typeof BaseTextTypes;
+interface IBaseText extends TextProps {
+  type: string | EBaseTextType;
+  children?: ReactNode;
+  styleText?: TextStyle;
 }
-
-export const BaseText: React.FC<BaseTextProps> = ({
-  type = 'Medium',
-  size,
-  style,
+export const BaseText = ({
   children,
+  type,
+  styleText,
   ...props
-}) => {
+}: IBaseText) => {
+  const { typography } = useTheme();
+  const textStyle = useMemo(() => {
+    return {
+      fontSize: typography[typography[type].fontSize],
+      fontWeight: typography[typography[type].fontWeight],
+      fontFamily: typography[typography[type].fontFamily],
+    };
+  }, [type, typography]);
+
   return (
-    <Text
-      allowFontScaling={false}
-      style={[styles[type], { fontSize: size }, style]}
-      {...props}
-    >
+    <Text style={{ ...textStyle, ...styleText }} {...props}>
       {children}
     </Text>
   );
 };
-
-const styles = StyleSheet.create({
-  ExtraBold: {
-    fontWeight: '700',
-  },
-  Bold: {
-    fontWeight: '600',
-  },
-  SemiBold: {
-    fontWeight: '500',
-  },
-  Medium: {
-    fontWeight: '400',
-  },
-});

package/src/core/KadoProvider/index.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, useContext } from 'react';
+import { typographyDefault } from '../../assets/theme';
+
+type dynamicType = {
+  [key: string]: any;
+};
+interface ThemeDynamicPart {
+  [key: string]: dynamicType;
+}
+
+export interface ThemeContextType extends ThemeDynamicPart {
+  typography: dynamicType;
+}
+export interface IThemeProvider {
+  children: React.ReactNode;
+  value: ThemeContextType;
+}
+
+const DefaultTheme = {
+  typography: typographyDefault,
+};
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(
+  DefaultTheme
+);
+
+export const ThemeProvider = ({ children, value }: IThemeProvider) => {
+  if (!value) return null;
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

package/src/core/index.tsx

@@ -0,0 +1 @@
+export * from './KadoProvider';

package/src/index.tsx

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './constants';
 export * from './utils';
+export * from './core';