@uxf/localize 10.0.0-beta.42 → 10.0.0-beta.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/localize",
-  "version": "10.0.0-beta.42",
+  "version": "10.0.0-beta.44",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/format-datetime.d.ts

@@ -0,0 +1,2 @@
+import { DateTimes, FormatDatetimeComponent, LocalizeConfigMap } from "../types";
+export declare function createFormatDatetimeComponent<DT extends DateTimes, Locales extends string>(localizeConfigs: LocalizeConfigMap<DT, Locales>): FormatDatetimeComponent<DT>;

package/src/components/format-datetime.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFormatDatetimeComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../context/context");
+const format_datetime_1 = require("../format-datetime/format-datetime");
+function createFormatDatetimeComponent(localizeConfigs) {
+    const Component = (props) => {
+        const locale = (0, context_1._useLocalizeContext)();
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_datetime_1.createFormatDatetime)(localizeConfigs)(locale, props.value, props.format));
+    };
+    return Component;
+}
+exports.createFormatDatetimeComponent = createFormatDatetimeComponent;

package/src/components/format-money.d.ts

@@ -0,0 +1,2 @@
+import { DateTimes, FormatMoneyComponent, LocalizeConfigMap } from "../types";
+export declare function createFormatMoneyComponent<DT extends DateTimes, Locales extends string>(localizeConfigs: LocalizeConfigMap<DT, Locales>): FormatMoneyComponent;

package/src/components/format-money.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFormatMoneyComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../context/context");
+const format_money_1 = require("../format-money/format-money");
+function createFormatMoneyComponent(localizeConfigs) {
+    const Component = (props) => {
+        const locale = (0, context_1._useLocalizeContext)();
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_money_1.createFormatMoney)(localizeConfigs)(locale, props.money, props.options));
+    };
+    return Component;
+}
+exports.createFormatMoneyComponent = createFormatMoneyComponent;

package/src/components/format-number.d.ts

@@ -0,0 +1,2 @@
+import { DateTimes, FormatNumberComponent, LocalizeConfigMap } from "../types";
+export declare function createFormatNumberComponent<DT extends DateTimes, Locales extends string>(localizeConfigs: LocalizeConfigMap<DT, Locales>): FormatNumberComponent;

package/src/components/format-number.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFormatNumberComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../context/context");
+const format_number_1 = require("../format-number/format-number");
+function createFormatNumberComponent(localizeConfigs) {
+    const Component = (props) => {
+        const locale = (0, context_1._useLocalizeContext)();
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_number_1.createFormatNumber)(localizeConfigs)(locale, props.value, props.options));
+    };
+    return Component;
+}
+exports.createFormatNumberComponent = createFormatNumberComponent;

package/src/components/format-percentage.d.ts

@@ -0,0 +1,2 @@
+import { DateTimes, FormatPercentageComponent, LocalizeConfigMap } from "../types";
+export declare function createFormatPercentageComponent<DT extends DateTimes, Locales extends string>(localizeConfigs: LocalizeConfigMap<DT, Locales>): FormatPercentageComponent;

package/src/components/format-percentage.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFormatPercentageComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../context/context");
+const format_percentage_1 = require("../format-percentage/format-percentage");
+function createFormatPercentageComponent(localizeConfigs) {
+    const Component = (props) => {
+        const locale = (0, context_1._useLocalizeContext)();
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, format_percentage_1.createFormatPercentage)(localizeConfigs)(locale, props.value, props.roundingType, props.options));
+    };
+    return Component;
+}
+exports.createFormatPercentageComponent = createFormatPercentageComponent;

package/src/format-money/format-money.d.ts

@@ -1,3 +1,3 @@
 import { DateTimes, FormatMoneyFunction, LocalizeConfigMap } from "../types";
 export declare function createFormatMoney<DT extends DateTimes, Locales extends string>(localizeConfigs: LocalizeConfigMap<DT, Locales>): FormatMoneyFunction<Locales>;
-export declare function createUseFormatMoney<DT extends DateTimes, Locales extends string>(localizeConfigs: LocalizeConfigMap<DT, Locales>): () => (value: number, currency: "CHF" | "AED" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "AUD" | "AWG" | "AZN" | "BAM" | "BBD" | "BDT" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYN" | "BZD" | "CAD" | "CDF" | "CHE" | "CHW" | "CLF" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "CUC" | "CUP" | "CVE" | "CZK" | "DJF" | "DKK" | "DOP" | "DZD" | "EGP" | "ERN" | "ETB" | "EUR" | "FJD" | "FKP" | "GBP" | "GEL" | "GHS" | "GIP" | "GMD" | "GNF" | "GTQ" | "GYD" | "HKD" | "HNL" | "HTG" | "HUF" | "IDR" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LYD" | "MAD" | "MDL" | "MGA" | "MKD" | "MMK" | "MNT" | "MOP" | "MRU" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZN" | "NAD" | "NGN" | "NIO" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PYG" | "QAR" | "RON" | "RSD" | "RUB" | "RWF" | "SAR" | "SBD" | "SCR" | "SDG" | "SEK" | "SGD" | "SHP" | "SLE" | "SLL" | "SOS" | "SRD" | "SSP" | "STN" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMT" | "TND" | "TOP" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "UYI" | "UYU" | "UYW" | "UZS" | "VED" | "VES" | "VND" | "VUV" | "WST" | "XAF" | "XCD" | "XOF" | "XPF" | "YER" | "ZAR" | "ZMW" | "ZWL", options?: import("../types").FormatMoneyOptions | undefined) => string;
+export declare function createUseFormatMoney<DT extends DateTimes, Locales extends string>(localizeConfigs: LocalizeConfigMap<DT, Locales>): () => (money: import("../types").Money, options?: import("../types").FormatMoneyOptions | undefined) => string;

package/src/format-money/format-money.js

@@ -11,16 +11,16 @@ const map_options_1 = require("../utils/map-options");
 const data_1 = require("../utils/data");
 const react_1 = require("react");
 function createFormatMoney(localizeConfigs) {
-    return (locale, value, currency, options) => {
+    return (locale, money, options) => {
         var _a, _b, _c;
         const precision = (_a = options === null || options === void 0 ? void 0 : options.precision) !== null && _a !== void 0 ? _a : 0;
-        const symbol = (options === null || options === void 0 ? void 0 : options.preferIsoCode) ? currency : data_1.CURRENCIES[currency].symbol;
+        const symbol = (options === null || options === void 0 ? void 0 : options.preferIsoCode) ? money.currency : data_1.CURRENCIES[money.currency].symbol;
         const formatOptions = { ...(0, map_options_1._mapOptions)(localizeConfigs[locale].currency), precision, symbol };
         if (options === null || options === void 0 ? void 0 : options.hideSymbol) {
             formatOptions.pattern = (_b = formatOptions.pattern) === null || _b === void 0 ? void 0 : _b.replace("!", "").trim();
             formatOptions.negativePattern = (_c = formatOptions.negativePattern) === null || _c === void 0 ? void 0 : _c.replace("!", "").trim();
         }
-        return (0, currency_js_1.default)(value, { precision }).format(formatOptions);
+        return (0, currency_js_1.default)(money.amount, { precision }).format(formatOptions);
     };
 }
 exports.createFormatMoney = createFormatMoney;

package/src/format-money/format-money.test.js

@@ -9,23 +9,23 @@ const en_1 = __importDefault(require("../../locale/en"));
 describe("money formatter", function () {
     const formatMoneyWithLocales = (0, format_money_1.createFormatMoney)({ cs: cs_1.default, en: en_1.default });
     it("format money with 'cs' locale", function () {
-        expect(formatMoneyWithLocales("cs", 2000.78, "CZK")).toBe("2\xa0001\xa0Kč");
-        expect(formatMoneyWithLocales("cs", 2000.78, "CZK", { precision: 1 })).toBe("2\xa0000,8\xa0Kč");
-        expect(formatMoneyWithLocales("cs", 2000.78, "CZK", { precision: 1, preferIsoCode: true })).toBe("2\xa0000,8\xa0CZK");
-        expect(formatMoneyWithLocales("cs", 2000.78, "CZK", { precision: 1, hideSymbol: true })).toBe("2\xa0000,8");
-        expect(formatMoneyWithLocales("cs", 2000.78, "USD")).toBe("2\xa0001\xa0$");
-        expect(formatMoneyWithLocales("cs", 2000.78, "USD", { precision: 1 })).toBe("2\xa0000,8\xa0$");
-        expect(formatMoneyWithLocales("cs", 2000.78, "USD", { precision: 1, preferIsoCode: true })).toBe("2\xa0000,8\xa0USD");
-        expect(formatMoneyWithLocales("cs", 2000.78, "USD", { precision: 1, hideSymbol: true })).toBe("2\xa0000,8");
+        expect(formatMoneyWithLocales("cs", { amount: "2000.78", currency: "CZK" })).toBe("2\xa0001\xa0Kč");
+        expect(formatMoneyWithLocales("cs", { amount: "2000.78", currency: "CZK" }, { precision: 1 })).toBe("2\xa0000,8\xa0Kč");
+        expect(formatMoneyWithLocales("cs", { amount: "2000.78", currency: "CZK" }, { precision: 1, preferIsoCode: true })).toBe("2\xa0000,8\xa0CZK");
+        expect(formatMoneyWithLocales("cs", { amount: "2000.78", currency: "CZK" }, { precision: 1, hideSymbol: true })).toBe("2\xa0000,8");
+        expect(formatMoneyWithLocales("cs", { amount: "2000.78", currency: "USD" })).toBe("2\xa0001\xa0$");
+        expect(formatMoneyWithLocales("cs", { amount: "2000.78", currency: "USD" }, { precision: 1 })).toBe("2\xa0000,8\xa0$");
+        expect(formatMoneyWithLocales("cs", { amount: "2000.78", currency: "USD" }, { precision: 1, preferIsoCode: true })).toBe("2\xa0000,8\xa0USD");
+        expect(formatMoneyWithLocales("cs", { amount: "2000.78", currency: "USD" }, { precision: 1, hideSymbol: true })).toBe("2\xa0000,8");
     });
     it("format money with 'en' locale", function () {
-        expect(formatMoneyWithLocales("en", 2000.78, "CZK")).toBe("Kč2,001");
-        expect(formatMoneyWithLocales("en", 2000.78, "CZK", { precision: 1 })).toBe("Kč2,000.8");
-        expect(formatMoneyWithLocales("en", 2000.78, "CZK", { precision: 1, preferIsoCode: true })).toBe("CZK2,000.8");
-        expect(formatMoneyWithLocales("en", 2000.78, "CZK", { precision: 1, hideSymbol: true })).toBe("2,000.8");
-        expect(formatMoneyWithLocales("en", 2000.78, "USD")).toBe("$2,001");
-        expect(formatMoneyWithLocales("en", 2000.78, "USD", { precision: 1 })).toBe("$2,000.8");
-        expect(formatMoneyWithLocales("en", 2000.78, "USD", { precision: 1, preferIsoCode: true })).toBe("USD2,000.8");
-        expect(formatMoneyWithLocales("en", 2000.78, "USD", { precision: 1, hideSymbol: true })).toBe("2,000.8");
+        expect(formatMoneyWithLocales("en", { amount: "2000.78", currency: "CZK" })).toBe("Kč2,001");
+        expect(formatMoneyWithLocales("en", { amount: "2000.78", currency: "CZK" }, { precision: 1 })).toBe("Kč2,000.8");
+        expect(formatMoneyWithLocales("en", { amount: "2000.78", currency: "CZK" }, { precision: 1, preferIsoCode: true })).toBe("CZK2,000.8");
+        expect(formatMoneyWithLocales("en", { amount: "2000.78", currency: "CZK" }, { precision: 1, hideSymbol: true })).toBe("2,000.8");
+        expect(formatMoneyWithLocales("en", { amount: "2000.78", currency: "USD" })).toBe("$2,001");
+        expect(formatMoneyWithLocales("en", { amount: "2000.78", currency: "USD" }, { precision: 1 })).toBe("$2,000.8");
+        expect(formatMoneyWithLocales("en", { amount: "2000.78", currency: "USD" }, { precision: 1, preferIsoCode: true })).toBe("USD2,000.8");
+        expect(formatMoneyWithLocales("en", { amount: "2000.78", currency: "USD" }, { precision: 1, hideSymbol: true })).toBe("2,000.8");
     });
 });

package/src/index.js

@@ -20,6 +20,10 @@ const format_number_1 = require("./format-number/format-number");
 const format_percentage_1 = require("./format-percentage/format-percentage");
 const format_datetime_1 = require("./format-datetime/format-datetime");
 const format_money_1 = require("./format-money/format-money");
+const format_money_2 = require("./components/format-money");
+const format_percentage_2 = require("./components/format-percentage");
+const format_number_2 = require("./components/format-number");
+const format_datetime_2 = require("./components/format-datetime");
 __exportStar(require("./get-currency-symbol/get-currency-symbol"), exports);
 function createLocalize(config) {
     return {
@@ -28,6 +32,10 @@ function createLocalize(config) {
         formatNumber: (0, format_number_1.createFormatNumber)(config),
         formatPercentage: (0, format_percentage_1.createFormatPercentage)(config),
         formatMoney: (0, format_money_1.createFormatMoney)(config),
+        FormatDateTime: (0, format_datetime_2.createFormatDatetimeComponent)(config),
+        FormatNumber: (0, format_number_2.createFormatNumberComponent)(config),
+        FormatPercentage: (0, format_percentage_2.createFormatPercentageComponent)(config),
+        FormatMoney: (0, format_money_2.createFormatMoneyComponent)(config),
         useFormatDateTime: (0, format_datetime_1.createUseFormatDatetime)(config),
         useFormatNumber: (0, format_number_1.createUseFormatNumber)(config),
         useFormatPercentage: (0, format_percentage_1.createUseFormatPercentage)(config),

package/src/types.d.ts

@@ -1,5 +1,5 @@
 import { CURRENCIES } from "./utils/data";
-import { Provider } from "react";
+import { FC, Provider } from "react";
 export type DateTimes = "timeShort" | "timeFull" | "dateShort" | "dateMedium" | "dateLong" | "dateShortNoYear" | "dateLongNoYear" | "dateTimeShort" | "dateTimeMedium" | "dateTimeLong";
 export type LocalizeConfig<DT extends DateTimes> = {
     number: {
@@ -17,25 +17,50 @@ export type LocalizeConfig<DT extends DateTimes> = {
 export type LocalizeConfigMap<DT extends DateTimes, Locales extends string> = Record<Locales, LocalizeConfig<DT>>;
 export type LocalizeProviderType = Provider<string>;
 export type UseLocaleConfigType<DT extends DateTimes> = () => LocalizeConfig<DT>;
+export type Money = {
+    amount: string;
+    currency: Currency;
+};
 export type FormatNumberFunction<Locales extends string> = (locale: Locales, value: number, options?: FormatNumberOptions) => string;
 export type UseFormatNumberFunction = () => (value: number, options?: FormatNumberOptions) => string;
-export type FormatMoneyFunction<Locales extends string> = (locale: Locales, value: number, currency: Currency, options?: FormatMoneyOptions) => string;
-export type UseFormatMoneyFunction = () => (value: number, currency: Currency, options?: FormatMoneyOptions) => string;
+export type FormatNumberComponent = FC<{
+    value: number;
+    options?: FormatNumberOptions;
+}>;
+export type FormatMoneyFunction<Locales extends string> = (locale: Locales, money: Money, options?: FormatMoneyOptions) => string;
+export type UseFormatMoneyFunction = () => (money: Money, options?: FormatMoneyOptions) => string;
+export type FormatMoneyComponent = FC<{
+    money: Money;
+    options?: FormatMoneyOptions;
+}>;
 export type FormatPercentageFunction<Locales extends string> = (locale: Locales, value: number, roundingType?: RoundingType | null, options?: FormatPercentageOptions) => string;
 export type UseFormatPercentageFunction = () => (value: number, roundingType?: RoundingType | null, options?: FormatPercentageOptions) => string;
+export type FormatPercentageComponent = FC<{
+    value: number;
+    roundingType?: RoundingType | null;
+    options?: FormatPercentageOptions;
+}>;
 export type FormatDatetimeFunction<DT extends DateTimes, Locales extends string> = (locale: Locales, value: Date, format: DT) => string;
 export type UseFormatDatetimeFunction<DT extends DateTimes> = () => (value: Date, format: DT) => string;
+export type FormatDatetimeComponent<DT extends DateTimes> = FC<{
+    value: Date;
+    format: DT;
+}>;
 export type CreateLocalizeReturn<DT extends DateTimes, Locales extends string> = {
     LocalizeProvider: LocalizeProviderType;
     useLocaleConfig: UseLocaleConfigType<DT>;
     formatNumber: FormatNumberFunction<Locales>;
     useFormatNumber: UseFormatNumberFunction;
+    FormatNumber: FormatNumberComponent;
     formatMoney: FormatMoneyFunction<Locales>;
     useFormatMoney: UseFormatMoneyFunction;
+    FormatMoney: FormatMoneyComponent;
     formatPercentage: FormatPercentageFunction<Locales>;
     useFormatPercentage: UseFormatPercentageFunction;
+    FormatPercentage: FormatPercentageComponent;
     formatDateTime: FormatDatetimeFunction<DT, Locales>;
     useFormatDateTime: UseFormatDatetimeFunction<DT>;
+    FormatDateTime: FormatDatetimeComponent<DT>;
 };
 export type Currency = keyof typeof CURRENCIES;
 export type FormatMoneyOptions = {