react-native-shared-components 0.3.2 → 0.3.4

package/src/assets/theme.ts

@@ -0,0 +1,285 @@
+export const typographyDefault = {
+  'fontFamilies/productFont': 'Manrope',
+
+  'fontSizes/fs11': 11,
+
+  'fontSizes/fs12': 12,
+
+  'fontSizes/fs13': 12,
+
+  'fontSizes/fs14': 14,
+
+  'fontSizes/fs16': 16,
+
+  'fontSizes/fs18': 18,
+
+  'fontSizes/fs20': 20,
+
+  'fontSizes/fs24': 24,
+
+  'fontSizes/fs28': 28,
+
+  'fontSizes/fs30': 30,
+
+  'fontSizes/fs36': 36,
+
+  'fontSizes/fs38': 38,
+
+  'fontWeights/regular': '400',
+
+  'fontWeights/medium': '500',
+
+  'fontWeights/semiBold': '600',
+
+  'fontWeights/bold': '700',
+
+  'lineHeights/lh16': 16,
+
+  'lineHeights/lh18': 18,
+
+  'lineHeights/lh20': 20,
+
+  'lineHeights/lh24': 24,
+
+  'lineHeights/lh26': 26,
+
+  'lineHeights/lh28': 28,
+
+  'lineHeights/lh30': 30,
+
+  'lineHeights/lh32': 32,
+
+  'lineHeights/lh38': 38,
+
+  'lineHeights/lh44': 44,
+
+  'lineHeights/lh60': 60,
+
+  'lineHeights/lh90': 90,
+
+  'lineHeights/lh72': 72,
+
+  'text12/normal': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/regular',
+    lineHeight: 'lineHeights/lh16',
+    fontSize: 'fontSizes/fs13',
+  },
+
+  'text12/medium': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/medium',
+    lineHeight: 'lineHeights/lh16',
+    fontSize: 'fontSizes/fs12',
+  },
+
+  'text12/semiBold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/semiBold',
+    lineHeight: 'lineHeights/lh16',
+    fontSize: 'fontSizes/fs12',
+  },
+
+  'text12/bold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/bold',
+    lineHeight: 'lineHeights/lh16',
+    fontSize: 'fontSizes/fs12',
+  },
+
+  'tex14/normal': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/regular',
+    lineHeight: 'lineHeights/lh20',
+    fontSize: 'fontSizes/fs14',
+  },
+
+  'tex14/medium': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/medium',
+    lineHeight: 'lineHeights/lh20',
+    fontSize: 'fontSizes/fs14',
+  },
+
+  'tex14/semiBold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/semiBold',
+    lineHeight: 'lineHeights/lh20',
+    fontSize: 'fontSizes/fs14',
+  },
+
+  'tex14/bold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/bold',
+    lineHeight: 'lineHeights/lh20',
+    fontSize: 'fontSizes/fs14',
+  },
+
+  'text16/normal': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/regular',
+    lineHeight: 'lineHeights/lh24',
+    fontSize: 'fontSizes/fs16',
+  },
+
+  'text16/medium': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/medium',
+    lineHeight: 'lineHeights/lh24',
+    fontSize: 'fontSizes/fs16',
+  },
+
+  'text16/semiBold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/semiBold',
+    lineHeight: 'lineHeights/lh24',
+    fontSize: 'fontSizes/fs16',
+  },
+
+  'text16/bold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/bold',
+    lineHeight: 'lineHeights/lh24',
+    fontSize: 'fontSizes/fs16',
+  },
+
+  'text18/normal': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/regular',
+    lineHeight: 'lineHeights/lh26',
+    fontSize: 'fontSizes/fs18',
+  },
+
+  'text18/medium': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/medium',
+    lineHeight: 'lineHeights/lh26',
+    fontSize: 'fontSizes/fs18',
+  },
+
+  'text18/semiBold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/semiBold',
+    lineHeight: 'lineHeights/lh26',
+    fontSize: 'fontSizes/fs18',
+  },
+
+  'text18/bold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/bold',
+    lineHeight: 'lineHeights/lh26',
+    fontSize: 'fontSizes/fs18',
+  },
+
+  'text20/normal': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/regular',
+    lineHeight: 'lineHeights/lh28',
+    fontSize: 'fontSizes/fs20',
+  },
+
+  'text20/medium': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/medium',
+    lineHeight: 'lineHeights/lh28',
+    fontSize: 'fontSizes/fs20',
+  },
+
+  'text20/semiBold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/semiBold',
+    lineHeight: 'lineHeights/lh28',
+    fontSize: 'fontSizes/fs20',
+  },
+
+  'text20/bold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/bold',
+    lineHeight: 'lineHeights/lh28',
+    fontSize: 'fontSizes/fs20',
+  },
+
+  'text24/normal': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/regular',
+    lineHeight: 'lineHeights/lh32',
+    fontSize: 'fontSizes/fs24',
+  },
+
+  'text24/medium': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/medium',
+    lineHeight: 'lineHeights/lh32',
+    fontSize: 'fontSizes/fs24',
+  },
+
+  'text24/semiBold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/semiBold',
+    lineHeight: 'lineHeights/lh32',
+    fontSize: 'fontSizes/fs24',
+  },
+
+  'text24/bold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/bold',
+    lineHeight: 'lineHeights/lh32',
+    fontSize: 'fontSizes/fs24',
+  },
+
+  'text30/normal': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/regular',
+    fontSize: 'fontSizes/fs30',
+    lineHeight: 'lineHeights/lh38',
+  },
+
+  'text30/medium': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/medium',
+    lineHeight: 'lineHeights/lh38',
+    fontSize: 'fontSizes/fs30',
+  },
+
+  'text30/semiBold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/semiBold',
+    lineHeight: 'lineHeights/lh38',
+    fontSize: 'fontSizes/fs30',
+  },
+
+  'text30/bold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/bold',
+    lineHeight: 'lineHeights/lh38',
+    fontSize: 'fontSizes/fs30',
+  },
+
+  'tex36/normal': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/regular',
+    lineHeight: 'lineHeights/lh44',
+    fontSize: 'fontSizes/fs36',
+  },
+
+  'tex36/medium': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/medium',
+    lineHeight: 'lineHeights/lh44',
+    fontSize: 'fontSizes/fs36',
+  },
+
+  'tex36/semiBold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/semiBold',
+    lineHeight: 'lineHeights/lh44',
+    fontSize: 'fontSizes/fs36',
+  },
+
+  'tex36/bold': {
+    fontFamily: 'fontFamilies/productFont',
+    fontWeight: 'fontWeights/bold',
+    lineHeight: 'lineHeights/lh44',
+    fontSize: 'fontSizes/fs36',
+  },
+};

package/src/components/BaseButton/index.tsx

@@ -7,14 +7,14 @@ import {
   type TextStyle,
   type TouchableOpacityProps,
 } from 'react-native';
-import BaseText, { type BaseTextType } from '../BaseText';
 import { Colors } from '../../constants/Colors';
+import { BaseText, type EBaseTextType } from '../BaseText';
 
 export type ButtonVariant = 'primary' | 'link-subtle' | 'red' | 'brand-subtle';
 export type ButtonSize = 'small' | 'regular' | 'large';
 export type ButtonType = 'common' | 'icon';
 
-interface BaseButtonProps extends Omit<TouchableOpacityProps, 'style'> {
+export interface BaseButtonProps extends Omit<TouchableOpacityProps, 'style'> {
   type?: ButtonType;
   variant?: ButtonVariant;
   size?: ButtonSize;
@@ -26,7 +26,7 @@ interface BaseButtonProps extends Omit<TouchableOpacityProps, 'style'> {
   textStyle?: TextStyle;
 }
 
-const BaseButton: React.FC<BaseButtonProps> = ({
+export const BaseButton: React.FC<BaseButtonProps> = ({
   type = 'common',
   variant = 'primary',
   size = 'regular',
@@ -40,7 +40,6 @@ 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}`];
@@ -48,29 +47,16 @@ const BaseButton: React.FC<BaseButtonProps> = ({
     ? styles.text_disabled
     : styles[`text_variant_${variant}`];
 
-  const getTextType = (): BaseTextType => {
+  const getTextType = (): EBaseTextType => {
     switch (size) {
       case 'small':
-        return 'Medium';
+        return 'tex14/medium';
       case 'regular':
-        return 'SemiBold';
+        return 'text16/semiBold';
       case 'large':
-        return 'Bold';
+        return 'text20/semiBold';
       default:
-        return 'SemiBold';
-    }
-  };
-
-  const getTextSize = (): number => {
-    switch (size) {
-      case 'small':
-        return 14;
-      case 'regular':
-        return 16;
-      case 'large':
-        return 20;
-      default:
-        return 16;
+        return 'text16/semiBold';
     }
   };
 
@@ -131,8 +117,7 @@ const BaseButton: React.FC<BaseButtonProps> = ({
           {label && (
             <BaseText
               type={getTextType()}
-              size={getTextSize()}
-              style={[textSizeStyle, textVariantStyle, textStyle]}
+              style={[textVariantStyle, textStyle]}
             >
               {label}
             </BaseText>
@@ -213,15 +198,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,
-  },
 });
-
-export default BaseButton;

package/src/components/BaseContainer/index.tsx

@@ -8,13 +8,13 @@ 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';
 
-interface IBaseContainer {
+export interface IBaseContainer {
   title?: string;
   center?: ReactNode;
   right?: ReactNode;
@@ -31,7 +31,6 @@ 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,45 +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';
-
-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',
+  'tex14/normal': 'tex14/normal',
+  'tex14/medium': 'tex14/medium',
+  'tex14/semiBold': 'tex14/semiBold',
+  'tex14/bold': 'tex14/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',
+  'tex36/normal': 'tex36/normal',
+  'tex36/medium': 'tex36/medium',
+  'tex36/semiBold': 'tex36/semiBold',
+  'tex36/bold': 'tex36/bold',
+};
+export type EBaseTextType = keyof typeof BaseTextTypes;
+interface IBaseText extends TextProps {
+  type: string | EBaseTextType;
+  children?: ReactNode;
+  styleText?: TextStyle;
 }
-
-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',
-  },
-});
-
-export default BaseText;

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';