fix: font for all platforms

lad-tech · Sep 26, 2024 · 78e04a3 · 78e04a3
1 parent f4228ba
commit 78e04a3
Show file tree

Hide file tree

Showing 33 changed files with 628 additions and 119 deletions.
diff --git a/app.config.js b/app.config.js
@@ -38,8 +38,8 @@ module.exports = {
         'expo-font',
         {
           fonts: [
-            'node_modules/@lad-tech/mobydick-core/src/typography/assets/fonts/Inter.ttf',
-            'node_modules/@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts/Neotis.ttf',
+            'node_modules/@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts',
+            'node_modules/expo-google-fonts/inter',
           ],
         },
       ],

diff --git a/docs/docs/guides/core/Introduction.mdx b/docs/docs/guides/core/Introduction.mdx
@@ -14,7 +14,7 @@ sidebar_position: 0
 npm install @lad-tech/mobydick-core react-native-svg react-native-svg-transformer react-native-safe-area-context
 ```
 
-## Font
+### Bare React Native
 
 To use typography font, you must install the font. To do this, in `react-native.config.js` you need to add the path to it to `assets`:
 
@@ -28,6 +28,9 @@ module.exports = {
     ...,
     // highlight-next-line
     'node_modules/@lad-tech/mobydick-core/src/typography/assets/fonts/',
+    // highlight-next-line
+    'node_modules/@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts/',
+
   ],
 };
 ```
@@ -38,27 +41,76 @@ and run the command
 npx react-native-asset
 ```
 
-## Icons
+### Expo
 
-To use font icons, you must install the font. To do this, in `react-native.config.js` you need to add the path to it to `assets`:
+add new fonts into `app.json` (`app.config.js`)
 
 ```js
-module.exports = {
-  project: {
-    ios: {},
-    android: {},
-  },
-    assets: [
-      ...,
-      // highlight-next-line
-      'node_modules/@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts/',
+plugins: [
+  ...
+  [
+    'expo-font',
+    {
+      fonts: [
+        // highlight-next-line
+        'node_modules/@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts',
+        // highlight-next-line
+        'node_modules/expo-google-fonts/inter',
+      ],
+    },
   ],
-};
+],
 ```
+and load them into `_layout.ts`
+
+```ts
+import {useFonts} from 'expo-font';
+import {SplashScreen} from 'expo-router';
+import {useEffect} from 'react';
+import {
+  Inter_100Thin,
+  Inter_200ExtraLight,
+  Inter_300Light,
+  Inter_400Regular,
+  Inter_500Medium,
+  Inter_600SemiBold,
+  Inter_700Bold,
+  Inter_800ExtraBold,
+  Inter_900Black,
+} from '@expo-google-fonts/inter';
+
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default () => {
+  const [loaded] = useFonts({
+    Inter_100Thin,
+    Inter_200ExtraLight,
+    Inter_300Light,
+    Inter_400Regular,
+    Inter_500Medium,
+    Inter_600SemiBold,
+    Inter_700Bold,
+    Inter_800ExtraBold,
+    Inter_900Black,
+    Neotis: require('@lad-tech/mobydick-core/src/styles/icons/font/assets/fonts/Neotis.ttf'),
+  });
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    ...
+  );
+};
 
-and run the command
-
-```bash
-npx react-native-asset
 ```
 
diff --git a/docs/docs/guides/core/Theme.mdx b/docs/docs/guides/core/Theme.mdx
@@ -10,13 +10,34 @@ You can control you theme by theme props in `ThemeProvider`
 import {
   CurrentTheme,
   defaultSpaces,
-  getShadows,
-  ThemeProvider,
+  getShadows,TFontWeight,
+  ThemeProvider
 } from '@lad-tech/mobydick-core';
 import {Navigation} from '@/pages/Navigation';
 import {themeColors} from '@/shared/lib/theme';
-import {fonts} from '@/shared/lib/theme/deafultFont';
-
+import { Platform } from 'react-native';
+
+export const fontResolver = (weight: TFontWeight) => {
+  const map = {
+    [TFontWeight.Bold]: Platform.select({
+      android: 'Inter_700Bold',
+      ios: 'Inter-Bold',
+    }),
+    [TFontWeight.SemiBold]: Platform.select({
+      android: 'Inter_600SemiBold',
+      ios: 'Inter-SemiBold',
+    }),
+    [TFontWeight.Medium]: Platform.select({
+      android: 'Inter_500Medium',
+      ios: 'Inter-Medium',
+    }),
+    [TFontWeight.Regular]: Platform.select({
+      android: 'Inter_400Regular',
+      ios: 'Inter-Regular',
+    }),
+  };
+  return map[weight];
+};
 
 function App() {
   return (
@@ -27,11 +48,11 @@ function App() {
         spaces: {
           ...defaultSpaces,
         },
-        fonts: fonts,
         shadows: getShadows({
           spaces: defaultSpaces,
           currentTheme: CurrentTheme.light,
         }),
+        customFontResolver: fontResolver
       }}>
         <Navigation />
     </ThemeProvider>
@@ -67,18 +88,18 @@ All possible colors group by theme
 
 All possible spaces
 
-### <div class="label required basic">Required</div>**`fonts`**
-
-| TYPE                                                                                                    |
-|:--------------------------------------------------------------------------------------------------------|
-| [fonts](https://github.com/lad-tech/mobydick/blob/main/packages/core/src/styles/constants/theme.ts#L31) |
-
-Map for font
-
 ### <div class="label required basic">Required</div>**`shadows`**
 
 | TYPE                                                                                                     |
 |:---------------------------------------------------------------------------------------------------------|
 | [shadow](https://github.com/lad-tech/mobydick/blob/main/packages/core/src/styles/constants/theme.ts#L69) |
 
 Map for shadow
+
+### **`customFontResolver`**
+
+| TYPE                                                                                                                                |
+|:------------------------------------------------------------------------------------------------------------------------------------|
+| [(weigth: string) => string)](https://github.com/lad-tech/mobydick/blob/main/packages/core/src/typography/utils/fontResolver.ts#L5) |
+
+Custom function for font resolve. (If your app need use another font instead of Inter)
diff --git a/jest.config.js b/jest.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    'preset': 'react-native',
+    "preset": "jest-expo",
     'moduleFileExtensions': [
         'ts',
         'tsx',
@@ -10,8 +10,8 @@ module.exports = {
     ],
     testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(ts|tsx?)$',
     "setupFiles": ["@shopify/react-native-skia/jestSetup.js", "./node_modules/react-native-gesture-handler/jestSetup.js"],
-    'transformIgnorePatterns': [
-        'node_modules/(?!(jest-)?react-native|@react-native-community|@react-native|@react-navigation/.*|@shopify/react-native-skia)',
+    "transformIgnorePatterns": [
+        "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)"
     ],
     'setupFilesAfterEnv': [
         '<rootDir>/__mocks__/globalMock.ts',

diff --git a/package.json b/package.json
@@ -31,11 +31,11 @@
     "packages/*"
   ],
   "dependencies": {
+    "@expo-google-fonts/inter": "^0.2.3",
     "@react-navigation/bottom-tabs": "^6.5.18",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@shopify/react-native-skia": "1.2.3",
-    "add": "^2.0.6",
     "expo": "~51.0.34",
     "expo-linking": "^6.3.1",
     "expo-router": "^3.5.23",
@@ -68,7 +68,7 @@
     "@semantic-release/npm": "^11.0.2",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^9.1.0",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/react": "^18.2.6",
     "@types/react-native": "^0.67.3",
     "@types/react-test-renderer": "^18.0.0",
@@ -79,6 +79,7 @@
     "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.56.0",
     "jest": "^29.7.0",
+    "jest-expo": "^51.0.4",
     "jest-sonar-reporter": "^2.0.0",
     "lefthook": "^1.7.16",
     "prettier": "^3.2.4",

diff --git a/packages/chart/package.json b/packages/chart/package.json
@@ -35,8 +35,9 @@
     "react-native": ">=0.66.4",
     "react": ">=17.0.2",
     "@lad-tech/mobydick-core": "7.35.0-next.7",
+    "@expo-google-fonts/inter": "^0.2.3",
     "@shopify/react-native-skia": ">=0.1.234",
     "react-native-reanimated": ">=3.6.1",
     "react-native-gesture-handler": ">=2.14.1"
   }
-}
+}
diff --git a/packages/chart/src/BarChart/index.tsx b/packages/chart/src/BarChart/index.tsx
@@ -12,6 +12,7 @@ import {useSafeAreaFrame} from 'react-native-safe-area-context';
 import {useDerivedValue, useSharedValue} from 'react-native-reanimated';
 import {useTheme, View} from '@lad-tech/mobydick-core';
 import {StyleProp, ViewStyle} from 'react-native';
+import {Inter_400Regular} from '@expo-google-fonts/inter';
 
 import {
   IDataset,
@@ -47,11 +48,7 @@ export const BarChart = ({
   formatterY,
   formatterX,
 }: IBarChartProps) => {
-  const font = useFont(
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('@lad-tech/mobydick-core/src/typography/assets/fonts/Inter-Regular.ttf'),
-    12,
-  );
+  const font = useFont(Inter_400Regular, 12);
   const {colors, spaces} = useTheme();
   const ref = useCanvasRef();
 

diff --git a/packages/chart/src/LineChart/index.tsx b/packages/chart/src/LineChart/index.tsx
@@ -19,6 +19,17 @@ import {
   GestureDetector,
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
+import {
+  Inter_100Thin,
+  Inter_200ExtraLight,
+  Inter_300Light,
+  Inter_400Regular,
+  Inter_500Medium,
+  Inter_600SemiBold,
+  Inter_700Bold,
+  Inter_800ExtraBold,
+  Inter_900Black,
+} from '@expo-google-fonts/inter';
 
 import Coordinates from '../components/Coordinates';
 import {
@@ -70,17 +81,19 @@ export const LineChart = ({
   const {colors, spaces} = useTheme();
   const fontMgr = useFonts({
     Inter: [
-      require('@lad-tech/mobydick-core/src/typography/assets/fonts/Inter-Bold.ttf'),
-      require('@lad-tech/mobydick-core/src/typography/assets/fonts/Inter-Italic.ttf'),
-      require('@lad-tech/mobydick-core/src/typography/assets/fonts/Inter-Regular.ttf'),
+      Inter_100Thin,
+      Inter_200ExtraLight,
+      Inter_300Light,
+      Inter_400Regular,
+      Inter_500Medium,
+      Inter_600SemiBold,
+      Inter_700Bold,
+      Inter_800ExtraBold,
+      Inter_900Black,
     ],
   });
 
-  const font = useFont(
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('@lad-tech/mobydick-core/src/typography/assets/fonts/Inter-Medium.ttf'),
-    12,
-  );
+  const font = useFont(Inter_500Medium, 12);
 
   const ref = useCanvasRef();
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -37,6 +37,7 @@
     "react-native-svg-transformer": ">=1.0.0"
   },
   "dependencies": {
+    "@expo-google-fonts/inter": "^0.2.3",
     "@tabler/icons-react-native": "^3.7.0"
   }
-}
+}
diff --git a/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -202,7 +202,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly destructive 1`] = `
         [
           {
             "color": "#2B78EE",
-            "fontFamily": "Inter",
+            "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
             "fontWeight": "600",
             "lineHeight": 20,
@@ -868,7 +868,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 3`] = `
         [
           {
             "color": "#2B78EE",
-            "fontFamily": "Inter",
+            "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
             "fontWeight": "600",
             "lineHeight": 20,
@@ -957,7 +957,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 4`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter",
+            "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
             "fontWeight": "600",
             "lineHeight": 20,
@@ -1046,7 +1046,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 5`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter",
+            "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
             "fontWeight": "600",
             "lineHeight": 20,
@@ -1199,7 +1199,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 7`] = `
         [
           {
             "color": "#2B78EE",
-            "fontFamily": "Inter",
+            "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
             "fontWeight": "600",
             "lineHeight": 20,
@@ -1288,7 +1288,7 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 8`] = `
         [
           {
             "color": "#2B78EE",
-            "fontFamily": "Inter",
+            "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
             "fontWeight": "600",
             "lineHeight": 20,