jfs-components 0.0.55 → 0.0.57

package/lib/module/design-tokens/JFSThemeProvider.js

@@ -1,7 +1,8 @@
 "use strict";
 
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';
 import { getVariableByName } from './figma-variables-resolver';
+import * as Font from 'expo-font';
 
 /**
  * Shape of the TokenContext
@@ -22,7 +23,6 @@ export const JFSThemeProvider = ({
   children
 }) => {
   const value = useMemo(() => {
-    // We bind the current modes to getVariableByName so consumers don't have to pass it
     const getVariable = name => getVariableByName(name, modes);
     return {
       modes,
@@ -53,4 +53,36 @@ export const useTokens = () => {
     };
   }
   return context;
-};
+};
+
+/**
+ * Returns the JFS font map. The TTF is encapsulated within the package at
+ * src/assets/fonts/JioType Var.ttf (included via package.json "files").
+ * Call this inside load functions to avoid top-level require errors if font missing.
+ */
+export const getJFSFonts = () => ({
+  'JioType Var': require('../assets/fonts/JioType Var.ttf')
+});
+
+/**
+ * Hook for loading JFS fonts using expo-font. This improves Android font support by explicitly registering
+ * the custom 'JioType Var' font (encapsulated in the package) via Font.loadAsync before components render.
+ * Without it, Android defaults to Roboto. Call at app root (e.g. before JFSThemeProvider). Returns loaded state.
+ * See getJFSFonts() for direct use with Font.loadAsync. Handles missing font gracefully for web/Storybook.
+ */
+export function useJFSFonts() {
+  const [fontsLoaded, setFontsLoaded] = useState(false);
+  useEffect(() => {
+    async function loadJFSFonts() {
+      try {
+        await Font.loadAsync(getJFSFonts());
+        setFontsLoaded(true);
+      } catch (error) {
+        console.warn('Failed to load JFS fonts (this is common in web/Storybook or if font file missing):', error);
+        setFontsLoaded(true);
+      }
+    }
+    loadJFSFonts();
+  }, []);
+  return fontsLoaded;
+}