@commercelayer/app-elements 0.0.34 → 0.0.36

package/dist/ui/forms/InputCurrency/index.d.ts

@@ -0,0 +1,44 @@
+import { type InputWrapperBaseProps } from '../../forms/InputWrapper';
+import { type CurrencyInputProps } from 'react-currency-input-field';
+import { type CurrencyCode } from './currencies';
+export interface InputCurrencyProps extends InputWrapperBaseProps, Pick<CurrencyInputProps, 'onBlur' | 'onClick' | 'disabled'> {
+    /**
+     * HTML input id
+     */
+    id?: string;
+    /**
+     * Field name
+     */
+    name?: string;
+    /**
+     * Input placeholder
+     */
+    placeholder?: string;
+    /**
+     * optional css class names used for the input element
+     */
+    className?: string;
+    /**
+     * Valid 3-digit iso currency code (eg: EUR, USD, GBP)
+     */
+    currencyCode: Uppercase<CurrencyCode>;
+    /**
+     * Value in cents
+     */
+    cents?: number | null;
+    /**
+     * onChange callback triggered when during typing
+     */
+    onChange: (cents: number | null, formatted: string) => void;
+}
+declare const InputCurrency: import("react").ForwardRefExoticComponent<InputCurrencyProps & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * Format cents to currency.
+ * Useful to display the returned value from `<InputCurrency>` component.
+ *
+ * Example: formatCentsToCurrency(100, 'EUR') -> €1,00
+ * Example: formatCentsToCurrency(100000, 'USD') -> $1,000.00
+ * Example: formatCentsToCurrency(100, 'JPY') -> ¥100
+ **/
+declare function formatCentsToCurrency(cents: number, currencyCode: Uppercase<CurrencyCode>): string;
+export { InputCurrency, formatCentsToCurrency };

package/dist/ui/forms/InputCurrency/utils.d.ts

@@ -0,0 +1,26 @@
+import { type Currency, type CurrencyCode } from './currencies';
+/**
+ *  Returns a currency object for a given currency code
+ */
+export declare function getCurrency(currencyCode: Uppercase<CurrencyCode> | CurrencyCode): Currency | undefined;
+/**
+ *  Returns the number of decimals for a given currency
+ */
+export declare function getDecimalLength(currency: Currency): number;
+/**
+ * Add currency symbol to formatted value based on currency.symbol_first.
+ * Some currencies have symbol as prefix, some as suffix.
+ * Example: EUR -> € 1.000,00
+ * Example: LRD -> 1,000.00 $  (:iberian dollar)
+ */
+export declare function addCurrencySymbol({ formattedValue, currency }: {
+    formattedValue: string;
+    currency: Currency;
+}): string;
+/**
+ * Create a placeholder based on the currency decimal length.
+ * Example: EUR -> 0,00
+ * Example: JPY -> 0
+ * Example: CLF -> 0,0000
+ */
+export declare function makePlaceholder(currency: Currency): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "type": "module",
   "files": [
     "dist"
@@ -29,6 +29,7 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
+    "react-currency-input-field": "^3.6.10",
     "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
     "react-select": "^5.7.2",