@teamnhz/rn-ui-toolkit 1.4.2 → 1.4.4

package/dist/styles/typography.js

@@ -1,93 +1,59 @@
-import { I18nManager } from 'react-native';
-import { moderateScale } from './scale';
-// Usedo english font family
-const UE_FONT_LIGHT = 'Rubik-Light';
-const UE_FONT_REGULAR = 'Rubik-Regular';
-const UE_FONT_BOLD = 'Rubik-Bold';
-// Usedo arabic font family
-const UA_FONT_LIGHT = 'HelveticaNeueLTArabic-Light';
-const UA_FONT_REGULAR = 'HelveticaNeueLTArabic-Roman';
-const UA_FONT_BOLD = 'HelveticaNeueLTArabic-Bold';
-// sizes
-const xSmall = () => ({
-    fontSize: moderateScale(12),
-});
-const smallU = () => ({
-    fontSize: moderateScale(14),
-});
-const regularU = () => ({
-    fontSize: moderateScale(16),
-});
-const mediumU = () => ({
-    fontSize: moderateScale(18),
-});
-const largeU = () => ({
-    fontSize: moderateScale(20),
-});
-// weights
-const lightU = () => ({
-    fontFamily: I18nManager.isRTL ? UA_FONT_LIGHT : UE_FONT_LIGHT,
-});
-// comment for testing
-const normalU = () => ({
-    fontFamily: I18nManager.isRTL ? UA_FONT_REGULAR : UE_FONT_REGULAR,
-});
-const boldU = () => ({
-    fontFamily: I18nManager.isRTL ? UA_FONT_BOLD : UE_FONT_BOLD,
-});
-// styles
-const header1 = () => ({
-    ...largeU(), // 20
-    ...boldU(),
-});
-const header2 = () => ({
-    ...largeU(), // 20
-    ...normalU(),
-});
-const header3 = () => ({
-    ...mediumU(), // 18
-    ...normalU(),
-});
-const header3Bold = () => ({
-    ...mediumU(), // 18
-    ...boldU(),
-});
-const standardU = () => ({
-    ...regularU(), // 16
-    ...normalU(),
-});
-const standardLight = () => ({
-    ...regularU(), // 16
-    ...lightU(),
-});
-const standardBold = () => ({
-    ...regularU(), // 16
-    ...boldU(),
-});
-const subTextU = () => ({
-    ...smallU(), // 14
-    ...normalU(),
-});
-const subTextBold = () => ({
-    ...smallU(), // 14
-    ...boldU(),
-});
-const subTextLight = () => ({
-    ...smallU(), // 14
-    ...lightU(),
-});
-const smallTextU = () => ({
-    ...xSmall(), // 12
-    ...normalU(),
-});
-const smallTextBold = () => ({
-    ...xSmall(), // 12
-    ...boldU(),
-});
-const smallTextLight = () => ({
-    ...xSmall(), // 12
-    ...lightU(),
-});
+import { moderateScale } from "./scale";
+import { getFont, getLanguage } from "./appConfig";
+// -------------------------------------
+const lang = getLanguage();
+// -------------------------------------
+const FONT = {
+    thin: getFont(lang, "thin"),
+    extraLight: getFont(lang, "extraLight"),
+    light: getFont(lang, "light"),
+    regular: getFont(lang, "regular"),
+    medium: getFont(lang, "medium"),
+    semiBold: getFont(lang, "semiBold"),
+    bold: getFont(lang, "bold"),
+    extraBold: getFont(lang, "extraBold"),
+    black: getFont(lang, "black"),
+};
+// -------------------------------------
+// SIZES
+// -------------------------------------
+const xSmall = () => ({ fontSize: moderateScale(12) });
+const smallU = () => ({ fontSize: moderateScale(14) });
+const regularU = () => ({ fontSize: moderateScale(16) });
+const mediumU = () => ({ fontSize: moderateScale(18) });
+const largeU = () => ({ fontSize: moderateScale(20) });
+// -------------------------------------
+// WEIGHTS
+// -------------------------------------
+const thin = () => ({ fontFamily: FONT.thin });
+const extraLight = () => ({ fontFamily: FONT.extraLight });
+const lightU = () => ({ fontFamily: FONT.light });
+const normalU = () => ({ fontFamily: FONT.regular });
+const mediumW = () => ({ fontFamily: FONT.medium });
+const semiBold = () => ({ fontFamily: FONT.semiBold });
+const boldU = () => ({ fontFamily: FONT.bold });
+const extraBold = () => ({ fontFamily: FONT.extraBold });
+const black = () => ({ fontFamily: FONT.black });
+// -------------------------------------
+// STYLES
+// -------------------------------------
+const header1 = () => ({ ...largeU(), ...boldU() });
+const header2 = () => ({ ...largeU(), ...normalU() });
+const header3 = () => ({ ...mediumU(), ...normalU() });
+const standardU = () => ({ ...regularU(), ...normalU() });
+const standardBold = () => ({ ...regularU(), ...boldU() });
+const standardLight = () => ({ ...regularU(), ...lightU() });
+// Small text
+const smallTextU = () => ({ ...xSmall(), ...normalU() });
+const smallTextBold = () => ({ ...xSmall(), ...boldU() });
+const smallTextLight = () => ({ ...xSmall(), ...lightU() });
+// Sub text
+const subTextU = () => ({ ...smallU(), ...normalU() });
+const subTextBold = () => ({ ...smallU(), ...boldU() });
+const subTextLight = () => ({ ...smallU(), ...lightU() });
+// -------------------------------------
+// EXPORT
+// -------------------------------------
 export default {
     size: {
         xSmall,
@@ -96,28 +62,388 @@ export default {
         mediumU,
         largeU,
     },
+    weights: {
+        thin,
+        extraLight,
+        lightU,
+        normalU,
+        mediumW,
+        semiBold,
+        boldU,
+        extraBold,
+        black,
+    },
     style: {
         header1,
         header2,
         header3,
-        header3Bold,
         standardU,
-        standardLight,
         standardBold,
-        subTextU,
-        subTextBold,
-        subTextLight,
+        standardLight,
         smallTextU,
         smallTextBold,
         smallTextLight,
+        subTextU,
+        subTextBold,
+        subTextLight,
     },
-    weights: {
-        lightU,
-        boldU,
-        normalU,
-    },
-    fonts: {
-        en: UE_FONT_REGULAR,
-        ar: UA_FONT_REGULAR,
-    },
+    fonts: FONT,
 };
+// // src/styles/typography.ts
+// import { I18nManager } from 'react-native';
+// import { moderateScale } from './scale';
+// // --- Types ---
+// export type Lang = 'en' | 'ar';
+// export type TypographySizes = {
+//   xSmall: number;
+//   smallU: number;
+//   regularU: number;
+//   mediumU: number;
+//   largeU: number;
+// };
+// export type TypographyFonts = {
+//   en: {
+//     light?: string;
+//     regular?: string;
+//     bold?: string;
+//   };
+//   ar: {
+//     light?: string;
+//     regular?: string;
+//     bold?: string;
+//   };
+// };
+// export type TypographyConfig = {
+//   fonts?: Partial<TypographyFonts>;
+//   sizes?: Partial<TypographySizes>;
+//   // optional custom scaling function (receives numeric size and returns scaled value)
+//   scaleFn?: (size: number) => number;
+// };
+// // --- Defaults (your original values) ---
+// const DEFAULT_FONTS: TypographyFonts = {
+//   en: {
+//     light: 'Rubik-Light',
+//     regular: 'Rubik-Regular',
+//     bold: 'Rubik-Bold',
+//   },
+//   ar: {
+//     light: 'HelveticaNeueLTArabic-Light',
+//     regular: 'HelveticaNeueLTArabic-Roman',
+//     bold: 'HelveticaNeueLTArabic-Bold',
+//   },
+// };
+// const DEFAULT_SIZES: TypographySizes = {
+//   xSmall: 12,
+//   smallU: 14,
+//   regularU: 16,
+//   mediumU: 18,
+//   largeU: 20,
+// };
+// // --- Internal mutable config (will be mutated by setTypographyConfig) ---
+// let _config: TypographyConfig = {
+//   fonts: DEFAULT_FONTS,
+//   sizes: DEFAULT_SIZES,
+//   scaleFn: moderateScale,
+// };
+// // Helper to merge partial config into _config safely
+// export function setTypographyConfig(cfg: TypographyConfig) {
+//   _config = {
+//     fonts: {
+//       en: {
+//         ...DEFAULT_FONTS.en,
+//         ...(cfg.fonts && cfg.fonts.en ? cfg.fonts.en : {}),
+//       },
+//       ar: {
+//         ...DEFAULT_FONTS.ar,
+//         ...(cfg.fonts && cfg.fonts.ar ? cfg.fonts.ar : {}),
+//       },
+//     },
+//     sizes: {
+//       ...DEFAULT_SIZES,
+//       ...(cfg.sizes || {}),
+//     },
+//     scaleFn: cfg.scaleFn || moderateScale,
+//   };
+// }
+// // Optional getter if needed
+// export function getTypographyConfig(): TypographyConfig {
+//   // return a shallow copy to avoid external mutation
+//   return {
+//     fonts: JSON.parse(JSON.stringify(_config.fonts)),
+//     sizes: { ...( _config.sizes as TypographySizes ) },
+//     scaleFn: _config.scaleFn,
+//   };
+// }
+// // Utility to pick font by weight and RTL:
+// function fontFor(weight: 'light' | 'regular' | 'bold') {
+//   const isRTL = I18nManager.isRTL;
+//   const langKey: Lang = isRTL ? 'ar' : 'en';
+//   const fonts = _config.fonts as TypographyFonts;
+//   return fonts && fonts[langKey] && (fonts[langKey] as any)[weight]
+//     ? (fonts[langKey] as any)[weight]
+//     : // fallback: regular from en
+//       DEFAULT_FONTS.en.regular;
+// }
+// // Scale helper
+// function scale(sizeNumber: number) {
+//   const fn = _config.scaleFn || moderateScale;
+//   return fn(sizeNumber);
+// }
+// // --- Size helpers (return style objects like your original file) ---
+// const xSmall = () => ({ fontSize: scale((_config.sizes as TypographySizes).xSmall) });
+// const smallU = () => ({ fontSize: scale((_config.sizes as TypographySizes).smallU) });
+// const regularU = () => ({ fontSize: scale((_config.sizes as TypographySizes).regularU) });
+// const mediumU = () => ({ fontSize: scale((_config.sizes as TypographySizes).mediumU) });
+// const largeU = () => ({ fontSize: scale((_config.sizes as TypographySizes).largeU) });
+// // --- Weight helpers ---
+// const lightU = () => ({ fontFamily: fontFor('light') });
+// const normalU = () => ({ fontFamily: fontFor('regular') });
+// const boldU = () => ({ fontFamily: fontFor('bold') });
+// // --- Combined styles (same API as your original) ---
+// const header1 = () => ({ ...largeU(), ...boldU() });
+// const header2 = () => ({ ...largeU(), ...normalU() });
+// const header3 = () => ({ ...mediumU(), ...normalU() });
+// const header3Bold = () => ({ ...mediumU(), ...boldU() });
+// const standardU = () => ({ ...regularU(), ...normalU() });
+// const standardLight = () => ({ ...regularU(), ...lightU() });
+// const standardBold = () => ({ ...regularU(), ...boldU() });
+// const subTextU = () => ({ ...smallU(), ...normalU() });
+// const subTextBold = () => ({ ...smallU(), ...boldU() });
+// const subTextLight = () => ({ ...smallU(), ...lightU() });
+// const smallTextU = () => ({ ...xSmall(), ...normalU() });
+// const smallTextBold = () => ({ ...xSmall(), ...boldU() });
+// const smallTextLight = () => ({ ...xSmall(), ...lightU() });
+// // --- Fonts quick map (expose the currently used regular font per language) ---
+// const currentFonts = () => ({
+//   en: (_config.fonts as TypographyFonts).en.regular,
+//   ar: (_config.fonts as TypographyFonts).ar.regular,
+// });
+// // --- Exported object (same shape as your original API) ---
+// const Typography = {
+//   // size functions
+//   size: {
+//     xSmall,
+//     smallU,
+//     regularU,
+//     mediumU,
+//     largeU,
+//   },
+//   // styles
+//   style: {
+//     header1,
+//     header2,
+//     header3,
+//     header3Bold,
+//     standardU,
+//     standardLight,
+//     standardBold,
+//     subTextU,
+//     subTextBold,
+//     subTextLight,
+//     smallTextU,
+//     smallTextBold,
+//     smallTextLight,
+//   },
+//   // weight helpers
+//   weights: {
+//     lightU,
+//     boldU,
+//     normalU,
+//   },
+//   // quick fonts map
+//   fonts: currentFonts,
+//   // exposed config helpers
+//   __internal: {
+//     setTypographyConfig,
+//     getTypographyConfig,
+//   },
+// };
+// export default Typography;
+// src/styles/typography.ts
+// import { moderateScale } from "./scale";
+// // --- Types ---
+// export type Lang = "en" | "hi";
+// // Allow UNLIMITED font weights
+// export type FontWeightMap = {
+//   [weightName: string]: string; // e.g. medium: "Poppins-Medium"
+// };
+// // Accept numeric or named size keys in config
+// export type TypographySizes = {
+//   // numeric keys still allowed
+//   [key: number]: number;
+// } & {
+//   // named keys like "SIZE12": 12
+//   [key: string]: number;
+// };
+// export type TypographyFonts = {
+//   en: FontWeightMap;
+//   hi: FontWeightMap;
+// };
+// // Config for user customization
+// export type TypographyConfig = {
+//   fonts?: Partial<TypographyFonts>;
+//   // allow either numeric keys or named keys like "SIZE12"
+//   sizes?: Partial<TypographySizes>;
+//   lang?: Lang; // active language
+//   scaleFn?: (size: number) => number;
+// };
+// // --- SizeKey constants ---
+// // Export constants to use in code like Typography.style.size(SizeKey.SIZE16)
+// export const SizeKey = (() => {
+//   const map: { [k: string]: string } = {};
+//   for (let i = 10; i <= 50; i += 2) {
+//     // create keys SIZE10, SIZE12, ... SIZE50
+//     map[`SIZE${i}`] = `SIZE${i}`;
+//   }
+//   return map as { [K in `SIZE${number}`]: `SIZE${number}` };
+// })();
+// // --- DEFAULT FONTS ---
+// const DEFAULT_FONTS: TypographyFonts = {
+//   en: {
+//     regular: "Poppins-Regular",
+//     light: "Poppins-Light", // corrected from Medium
+//     semibold: "Poppins-SemiBold",
+//     extrabold: "Poppins-ExtraBold",
+//     black: "Poppins-Black",
+//     bold: "Poppins-Bold",
+//   },
+//   hi: {
+//     regular: "Poppins-Regular",
+//     light: "Poppins-Light",
+//     semibold: "Poppins-SemiBold",
+//     extrabold: "Poppins-ExtraBold",
+//     black: "Poppins-Black",
+//     bold: "Poppins-Bold",
+//   },
+// };
+// // --- DEFAULT_SIZES as numeric map (10..50 step 2) ---
+// const DEFAULT_SIZES: TypographySizes = {};
+// for (let i = 10; i <= 50; i += 2) {
+//   DEFAULT_SIZES[i] = i;
+//   // also add named keys
+//   (DEFAULT_SIZES as any)[`SIZE${i}`] = i;
+// }
+// // --- Internal config (mutable) ---
+// let _config: Required<TypographyConfig> = {
+//   fonts: DEFAULT_FONTS,
+//   sizes: DEFAULT_SIZES,
+//   lang: "en",
+//   scaleFn: moderateScale,
+// };
+// // Utility: normalize incoming sizes map (merge numeric and named keys)
+// function normalizeSizes(sizes?: Partial<TypographySizes>) {
+//   const out: TypographySizes = { ...(DEFAULT_SIZES as TypographySizes) };
+//   if (!sizes) return out;
+//   Object.keys(sizes).forEach((k) => {
+//     const v = (sizes as any)[k];
+//     if (v == null) return;
+//     // if key is numeric string like "16" or number-like, coerce to number index AND also keep named if provided
+//     const asNumber = Number(k);
+//     if (!Number.isNaN(asNumber)) {
+//       out[asNumber] = v;
+//       // also add corresponding named key for parity (e.g. "SIZE16")
+//       out[`SIZE${asNumber}`] = v;
+//     } else {
+//       // named key (e.g. "SIZE16")
+//       out[k] = v;
+//       // if it matches SIZE<number>, add numeric index too
+//       const m = k.match(/^SIZE(\d+)$/i);
+//       if (m) {
+//         out[Number(m[1])] = v;
+//       }
+//     }
+//   });
+//   return out;
+// }
+// // Update config safely
+// export function setTypographyConfig(cfg: TypographyConfig) {
+//   _config = {
+//     fonts: {
+//       en: { ...DEFAULT_FONTS.en, ...(cfg.fonts?.en || {}) },
+//       hi: { ...DEFAULT_FONTS.hi, ...(cfg.fonts?.hi || {}) },
+//     },
+//     sizes: normalizeSizes(cfg.sizes),
+//     lang: cfg.lang || _config.lang,
+//     scaleFn: cfg.scaleFn || moderateScale,
+//   };
+// }
+// // --- Get config ---
+// export function getTypographyConfig(): TypographyConfig {
+//   return JSON.parse(JSON.stringify(_config));
+// }
+// // --- Helpers ---
+// function fontFor(weight: string) {
+//   const lang: Lang = _config.lang;
+//   const fontSet = _config.fonts[lang];
+//   return (fontSet[weight] as string) || fontSet["regular"] || DEFAULT_FONTS.en.regular;
+// }
+// function scale(size: number) {
+//   return _config.scaleFn(size);
+// }
+// // --- Style Generator ---
+// // Accept either number or string key (like "SIZE16" or SizeKey.SIZE16)
+// type SizeInput = number | string;
+// function resolveSizeValue(size: SizeInput) {
+//   // If number → try direct lookup; if not present use the number
+//   if (typeof size === "number") {
+//     const v = (_config.sizes as any)[size];
+//     return typeof v === "number" ? v : size;
+//   }
+//   // If string:
+//   // - if it's "SIZE16" try named lookup
+//   // - if it's numeric string "16" coerce
+//   const numeric = Number(size);
+//   if (!Number.isNaN(numeric)) {
+//     const v = (_config.sizes as any)[numeric];
+//     return typeof v === "number" ? v : numeric;
+//   }
+//   // named like "SIZE16"
+//   const named = (_config.sizes as any)[size];
+//   if (typeof named === "number") return named;
+//   // try pattern SIZExx
+//   const m = String(size).match(/^SIZE(\d+)$/i);
+//   if (m) {
+//     const num = Number(m[1]);
+//     const v = (_config.sizes as any)[num] || (_config.sizes as any)[`SIZE${num}`];
+//     return typeof v === "number" ? v : num;
+//   }
+//   // fallback: try parsing any trailing number
+//   const m2 = String(size).match(/(\d+)$/);
+//   if (m2) {
+//     const num = Number(m2[1]);
+//     const v = (_config.sizes as any)[num];
+//     return typeof v === "number" ? v : num;
+//   }
+//   // final fallback
+//   return 14; // safe default base size
+// }
+// function fontSize(size: SizeInput) {
+//   const resolved = resolveSizeValue(size);
+//   return { fontSize: scale(resolved) };
+// }
+// function fontWeight(weight: string) {
+//   return { fontFamily: fontFor(weight) };
+// }
+// // --- Predefined Style Helpers ---
+// const typographyStyle = {
+//   // Generic dynamic size (user can pass any 10–50 or named SizeKey)
+//   size: (num: SizeInput) => fontSize(num),
+//   // Predefined patterns (use named keys to keep consistency)
+//   header1: () => ({ ...fontSize(`SIZE28`), ...fontWeight("bold") }),
+//   header2: () => ({ ...fontSize(`SIZE24`), ...fontWeight("regular") }),
+//   standardU: () => ({ ...fontSize(`SIZE16`), ...fontWeight("regular") }),
+//   standardBold: () => ({ ...fontSize(`SIZE16`), ...fontWeight("bold") }),
+//   standardLight: () => ({ ...fontSize(`SIZE16`), ...fontWeight("light") }),
+//   small: () => ({ ...fontSize(`SIZE12`), ...fontWeight("regular") }),
+//   smallBold: () => ({ ...fontSize(`SIZE12`), ...fontWeight("bold") }),
+// };
+// // Export
+// const Typography = {
+//   fontSize, // dynamic 10–50 (or named keys)
+//   fontWeight,
+//   style: typographyStyle,
+//   __internal: { setTypographyConfig, getTypographyConfig },
+//   // export SizeKey so consumers can use named keys
+//   SizeKey,
+// };
+// export default Typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [