@janbox/storefront-ui 3.0.2 → 3.0.4

package/dist/hooks/use-formatter/index.d.ts

@@ -1,7 +1,9 @@
-import { FormatPriceOptions, FormatDateTimeOptions, FormatNumberOptions } from '../../utils';
+import { FormatPriceOptions, FormatDateTimeOptions, FormatNumberOptions, GetCurrencyDisplayNameOptions, GetLanguageDisplayNameOptions } from '../../utils';
 import { SetOptional } from 'type-fest';
 export declare const useFormatter: () => {
     formatNumber: (value: number, options?: Partial<FormatNumberOptions>) => string;
-    formatDateTime: (value: Date | string | number, options: SetOptional<FormatDateTimeOptions, "lng">) => string;
-    formatPrice: (value: number, options: SetOptional<FormatPriceOptions, "lng">) => string;
+    formatDateTime: (value: Date | string | number, options?: SetOptional<FormatDateTimeOptions, "locale">) => string;
+    formatPrice: (value: number, options: SetOptional<FormatPriceOptions, "locale">) => string;
+    getLanguageDisplayName: (code: string, options?: GetLanguageDisplayNameOptions) => string;
+    getCurrencyDisplayName: (code: string, options?: SetOptional<GetCurrencyDisplayNameOptions, "locale">) => string;
 };

package/dist/hooks/use-formatter/index.js

@@ -1,29 +1,41 @@
-import { formatNumber, formatDateTime, formatPrice } from "../../utils/index.js";
+import { formatNumber, formatDateTime, formatPrice, getLanguageDisplayName, getCurrencyDisplayName } from "../../utils/index.js";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "../../i18n/index.js";
 const useFormatter = () => {
   const { locale } = useTranslation();
   const formatNumberFn = useCallback(
     (value, options) => {
-      return formatNumber(value, { lng: locale, ...options });
+      return formatNumber(value, { ...options, locale: (options == null ? void 0 : options.locale) ?? locale });
     },
     [locale]
   );
   const formatDateTimeFn = useCallback(
-    (value, options) => {
+    (value, options = {}) => {
       const hasStyleOption = options.dateStyle !== void 0 || options.timeStyle !== void 0;
       const defaults = hasStyleOption ? {} : { day: "2-digit", month: "2-digit", year: "numeric", hour: "numeric", minute: "2-digit", hour12: false };
       return formatDateTime(value, {
         ...defaults,
         ...options,
-        lng: options.lng ?? locale
+        locale: options.locale ?? locale
       });
     },
     [locale]
   );
   const formatPriceFn = useCallback(
     (value, options) => {
-      return formatPrice(value, { ...options, lng: options.lng ?? locale });
+      return formatPrice(value, { ...options, locale: options.locale ?? locale });
+    },
+    [locale]
+  );
+  const getLanguageDisplayNameFn = useCallback(
+    (code, options = {}) => {
+      return getLanguageDisplayName(code, { ...options, locale: (options == null ? void 0 : options.locale) ?? locale });
+    },
+    [locale]
+  );
+  const getCurrencyDisplayNameFn = useCallback(
+    (code, options = {}) => {
+      return getCurrencyDisplayName(code, { ...options, locale: (options == null ? void 0 : options.locale) ?? locale });
     },
     [locale]
   );
@@ -31,9 +43,11 @@ const useFormatter = () => {
     () => ({
       formatNumber: formatNumberFn,
       formatDateTime: formatDateTimeFn,
-      formatPrice: formatPriceFn
+      formatPrice: formatPriceFn,
+      getLanguageDisplayName: getLanguageDisplayNameFn,
+      getCurrencyDisplayName: getCurrencyDisplayNameFn
     }),
-    [formatNumberFn, formatDateTimeFn, formatPriceFn]
+    [formatNumberFn, formatDateTimeFn, formatPriceFn, getLanguageDisplayNameFn, getCurrencyDisplayNameFn]
   );
 };
 export {

package/dist/lib/count-up/README.md

@@ -15,7 +15,7 @@ import { CountUp } from '@janbox/storefront-ui';
 | `to*` | `number` | - | Số đích cần đếm tới |
 | `from` | `number` | 0 | Số bắt đầu đếm |
 | `duration` | `number` | 2 | Thời gian animation tính bằng giây |
-| `formatNumberOptions` | `FormatNumberOptions` | - | Tùy chọn format số (mở rộng từ `Intl.NumberFormatOptions` với thuộc tính `lng`). Kiểm soát số chữ số thập phân, format tiền tệ và các tùy chọn hiển thị số theo locale |
+| `formatNumberOptions` | `FormatNumberOptions` | - | Tùy chọn format số (mở rộng từ `Intl.NumberFormatOptions` với thuộc tính `locale`). Kiểm soát số chữ số thập phân, format tiền tệ và các tùy chọn hiển thị số theo locale |
 | `ref` | `React.Ref<HTMLSpanElement>` | - | Ref tới phần tử span bên dưới |
 
 *Prop bắt buộc

package/dist/lib/count-up/count-up.js

@@ -15,7 +15,7 @@ const CountUp = ({ from = 0, to, duration = 2, formatNumberOptions, ref, ...prop
   const rounded = useTransform(
     count,
     (latest) => formatNumber(latest, {
-      lng: locale,
+      locale,
       ...formatNumberOptions,
       maximumFractionDigits
     })

package/dist/utils/common.d.ts

@@ -8,9 +8,9 @@ export declare const normalizeSearchText: (str?: string, options?: {
 }) => string;
 export declare const matchSearch: (text: string | string[], searchText: string, options?: Parameters<typeof normalizeSearchText>[1]) => boolean;
 export type FormatNumberOptions = Intl.NumberFormatOptions & {
-    lng: string;
+    locale: string;
 };
-export declare const formatNumber: (value: number, { lng, ...options }: FormatNumberOptions) => string;
+export declare const formatNumber: (value: number, { locale, ...options }: FormatNumberOptions) => string;
 export declare const getDecimalDigits: (value: number) => number;
 export declare const parseNumber: (text?: string | number, type?: "int" | "float", separator?: string) => number | undefined;
 export declare function omitEmpty<T extends object>(obj?: T): T;

package/dist/utils/index.d.ts

@@ -39,14 +39,34 @@ export declare const getResponsiveProp: <O extends object, P extends Paths<O>, R
     condition?: (value?: R) => boolean;
 }) => R;
 export type FormatNumberOptions = Intl.NumberFormatOptions & {
-    lng: string;
+    locale: string;
 };
-export declare const formatNumber: (value: number, { lng, ...options }: FormatNumberOptions) => string;
+export declare const formatNumber: (value: number, { locale, ...options }: FormatNumberOptions) => string;
 export type FormatPriceOptions = SetRequired<Intl.NumberFormatOptions, 'currency'> & {
-    lng: string;
+    locale: string;
 };
-export declare const formatPrice: (value: number, { lng, ...options }: FormatPriceOptions) => string;
+export declare const formatPrice: (value: number, { locale, ...options }: FormatPriceOptions) => string;
 export type FormatDateTimeOptions = Intl.DateTimeFormatOptions & {
-    lng: string;
+    locale: string;
 };
-export declare const formatDateTime: (value: Date | string | number, { lng, ...options }: FormatDateTimeOptions) => string;
+export type GetLanguageDisplayNameOptions = Omit<Intl.DisplayNamesOptions, 'type'> & {
+    /** Ngôn ngữ hiển thị tên, mặc định là chính code đó (self-naming) */
+    locale?: string;
+};
+/**
+ * Trả về tên đầy đủ của ngôn ngữ dựa trên language code.
+ * VD: getLanguageDisplayName('vi') → 'Tiếng Việt'
+ *     getLanguageDisplayName('en', { locale: 'vi' }) → 'Tiếng Anh'
+ */
+export declare const getLanguageDisplayName: (code: string, options?: GetLanguageDisplayNameOptions) => string;
+/**
+ * Trả về tên đầy đủ của tiền tệ dựa trên currency code.
+ * VD: getCurrencyDisplayName('VND', { locale: 'vi' }) → 'Đồng Việt Nam'
+ *     getCurrencyDisplayName('USD', { locale: 'en' }) → 'US Dollar'
+ */
+export type GetCurrencyDisplayNameOptions = Omit<Intl.DisplayNamesOptions, 'type'> & {
+    /** Ngôn ngữ hiển thị tên */
+    locale: string;
+};
+export declare const getCurrencyDisplayName: (code: string, options: GetCurrencyDisplayNameOptions) => string;
+export declare const formatDateTime: (value: Date | string | number, { locale, ...options }: FormatDateTimeOptions) => string;

package/dist/utils/index.js

@@ -167,9 +167,9 @@ const getResponsiveProp = (record, field, screen, options) => {
   });
   return getByScreen(smallerScreen ?? screen);
 };
-const formatNumber = (value, { lng, ...options }) => {
+const formatNumber = (value, { locale, ...options }) => {
   try {
-    return new Intl.NumberFormat(lng, {
+    return new Intl.NumberFormat(locale, {
       minimumFractionDigits: 0,
       ...options
     }).format(value);
@@ -177,9 +177,9 @@ const formatNumber = (value, { lng, ...options }) => {
     return value.toString();
   }
 };
-const formatPrice = (value, { lng, ...options }) => {
+const formatPrice = (value, { locale, ...options }) => {
   try {
-    return new Intl.NumberFormat(lng, {
+    return new Intl.NumberFormat(locale, {
       style: "currency",
       minimumFractionDigits: 0,
       currencyDisplay: "narrowSymbol",
@@ -189,7 +189,25 @@ const formatPrice = (value, { lng, ...options }) => {
     return [value, options.currency].filter(Boolean).join(" ");
   }
 };
-const formatDateTime = (value, { lng, ...options }) => {
+const getLanguageDisplayName = (code, options) => {
+  const { locale, ...rest } = options ?? {};
+  try {
+    const displayNames = new Intl.DisplayNames([locale ?? code], { ...rest, type: "language" });
+    return displayNames.of(code) ?? code;
+  } catch {
+    return code;
+  }
+};
+const getCurrencyDisplayName = (code, options) => {
+  const { locale, ...rest } = options;
+  try {
+    const displayNames = new Intl.DisplayNames([locale], { ...rest, type: "currency" });
+    return displayNames.of(code.toUpperCase()) ?? code;
+  } catch {
+    return code;
+  }
+};
+const formatDateTime = (value, { locale, ...options }) => {
   const dateObject = (() => {
     if (isString(value)) {
       const hasTimezone = /([zZ]|[+-]\d{2}:\d{2})$/.test(value);
@@ -201,7 +219,7 @@ const formatDateTime = (value, { lng, ...options }) => {
     return value;
   })();
   try {
-    return new Intl.DateTimeFormat(lng, {
+    return new Intl.DateTimeFormat(locale, {
       day: "2-digit",
       month: "2-digit",
       year: "numeric",
@@ -229,8 +247,10 @@ export {
   formatNumber,
   formatPrice,
   getColorShadesByVariant,
+  getCurrencyDisplayName,
   getDecimalDigits,
   getEnumValues,
+  getLanguageDisplayName,
   getResponsiveProp,
   getSizeVariantState,
   matchSearch,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [