@helpdice/ui 1.8.3 → 2.0.4

package/README.md

@@ -13,7 +13,7 @@
 2. import into project:
 
 ```jsx
-import { UiProvider, CssBaseline } from '@helpdice/ui'
+import { UiProvider, CssBaseline } from '@helpdice/theme'
 
 const Application = () => (
   <UiProvider>

package/dist/CurrencyInput/components/CurrencyInput.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CurrencyInputProps } from './CurrencyInputProps';
+export declare const InputCurrency: FC<Omit<CurrencyInputProps, 'ref'>>;
+export default InputCurrency;

package/dist/CurrencyInput/components/CurrencyInputProps.d.ts

@@ -0,0 +1,160 @@
+import React, { ElementType } from 'react';
+type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
+/**
+ * Value in different formats
+ *
+ * @experimental
+ */
+export type CurrencyInputOnChangeValues = {
+    /**
+     * Value as float or null if empty
+     *
+     * Example:
+     *   "1.99" > 1.99
+     *   "" > null
+     */
+    float: number | null;
+    /**
+     * Value after applying formatting
+     *
+     * Example: "1000000" > "1,000,0000"
+     */
+    formatted: string;
+    /**
+     * Non formatted value as string
+     */
+    value: string;
+};
+export type IntlConfig = {
+    locale: string;
+    currency?: string;
+};
+export type CurrencyInputProps = Overwrite<React.ComponentPropsWithRef<'input'>, {
+    /**
+     * Allow decimals
+     *
+     * Default = true
+     */
+    allowDecimals?: boolean;
+    /**
+     * Allow user to enter negative value
+     *
+     * Default = true
+     */
+    allowNegativeValue?: boolean;
+    /**
+     * Component id
+     */
+    id?: string;
+    /**
+     *  Maximum characters the user can enter
+     */
+    maxLength?: number;
+    /**
+     * Class names
+     */
+    className?: string;
+    /**
+     * Custom component
+     *
+     * Default = <input/>
+     */
+    customInput?: ElementType;
+    /**
+     * Limit length of decimals allowed
+     *
+     * Default = 2
+     */
+    decimalsLimit?: number;
+    /**
+     * Specify decimal scale for padding/trimming
+     *
+     * Example:
+     *   1.5 -> 1.50
+     *   1.234 -> 1.23
+     */
+    decimalScale?: number;
+    /**
+     * Default value if not passing in value via props
+     */
+    defaultValue?: number | string;
+    /**
+     * Disabled
+     *
+     * Default = false
+     */
+    disabled?: boolean;
+    /**
+     * Value will always have the specified length of decimals
+     *
+     * Example:
+     *   123 -> 1.23
+     *
+     * Note: This formatting only happens onBlur
+     */
+    fixedDecimalLength?: number;
+    /**
+     * Handle change in value
+     */
+    onValueChange?: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => void;
+    /**
+     * Placeholder if there is no value
+     */
+    placeholder?: string;
+    /**
+     * Include a prefix eg. £
+     */
+    prefix?: string;
+    /**
+     * Include a suffix eg. €
+     */
+    suffix?: string;
+    /**
+     * Incremental value change on arrow down and arrow up key press
+     */
+    step?: number;
+    /**
+     * Separator between integer part and fractional part of value.
+     *
+     * This cannot be a number
+     */
+    decimalSeparator?: string;
+    /**
+     * Separator between thousand, million and billion
+     *
+     * This cannot be a number
+     */
+    groupSeparator?: string;
+    /**
+     * Disable auto adding separator between values eg. 1000 -> 1,000
+     *
+     * Default = false
+     */
+    disableGroupSeparators?: boolean;
+    /**
+     * Disable abbreviations (m, k, b)
+     *
+     * Default = false
+     */
+    disableAbbreviations?: boolean;
+    /**
+     * International locale config, examples:
+     *   { locale: 'ja-JP', currency: 'JPY' }
+     *   { locale: 'en-IN', currency: 'INR' }
+     *
+     * Any prefix, groupSeparator or decimalSeparator options passed in
+     * will override Intl Locale config
+     */
+    intlConfig?: IntlConfig;
+    /**
+     * Transform the raw value form the input before parsing
+     */
+    transformRawValue?: (rawValue: string) => string;
+    /**
+     * When set to false, the formatValueOnBlur flag disables the application of the __onValueChange__ function
+     * specifically on blur events. If disabled or set to false, the onValueChange will not trigger on blur.
+     * Default = true
+     */
+    formatValueOnBlur?: boolean;
+}>;
+export {};

package/dist/CurrencyInput/components/utils/cleanValue.d.ts

@@ -0,0 +1,8 @@
+import { CurrencyInputProps } from '../CurrencyInputProps';
+export type CleanValueOptions = Pick<CurrencyInputProps, 'decimalSeparator' | 'groupSeparator' | 'allowDecimals' | 'decimalsLimit' | 'allowNegativeValue' | 'disableAbbreviations' | 'prefix' | 'transformRawValue'> & {
+    value: string;
+};
+/**
+ * Remove prefix, separators and extra decimals from value
+ */
+export declare const cleanValue: ({ value, groupSeparator, decimalSeparator, allowDecimals, decimalsLimit, allowNegativeValue, disableAbbreviations, prefix, transformRawValue }: CleanValueOptions) => string;

package/dist/CurrencyInput/components/utils/escapeRegExp.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Escape regex char
+ *
+ * See: https://stackoverflow.com/questions/17885855/use-dynamic-variable-string-as-regex-pattern-in-javascript
+ */
+export declare const escapeRegExp: (stringToGoIntoTheRegex: string) => string;

package/dist/CurrencyInput/components/utils/fixedDecimalValue.d.ts

@@ -0,0 +1 @@
+export declare const fixedDecimalValue: (value: string, decimalSeparator: string, fixedDecimalLength?: number) => string;

package/dist/CurrencyInput/components/utils/formatValue.d.ts

@@ -0,0 +1,49 @@
+import { IntlConfig } from '../CurrencyInputProps';
+export type FormatValueOptions = {
+    /**
+     * Value to format
+     */
+    value: string | undefined;
+    /**
+     * Decimal separator
+     *
+     * Default = '.'
+     */
+    decimalSeparator?: string;
+    /**
+     * Group separator
+     *
+     * Default = ','
+     */
+    groupSeparator?: string;
+    /**
+     * Turn off separators
+     *
+     * This will override Group separators
+     *
+     * Default = false
+     */
+    disableGroupSeparators?: boolean;
+    /**
+     * Intl locale currency config
+     */
+    intlConfig?: IntlConfig;
+    /**
+     * Specify decimal scale for padding/trimming
+     *
+     * Eg. 1.5 -> 1.50 or 1.234 -> 1.23
+     */
+    decimalScale?: number;
+    /**
+     * Prefix
+     */
+    prefix?: string;
+    /**
+     * Suffix
+     */
+    suffix?: string;
+};
+/**
+ * Format value with decimal separator, group separator and prefix
+ */
+export declare const formatValue: (options: FormatValueOptions) => string;

package/dist/CurrencyInput/components/utils/getLocaleConfig.d.ts

@@ -0,0 +1,13 @@
+import { IntlConfig } from '../CurrencyInputProps';
+type LocaleConfig = {
+    currencySymbol: string;
+    groupSeparator: string;
+    decimalSeparator: string;
+    prefix: string;
+    suffix: string;
+};
+/**
+ * Get locale config from input or default
+ */
+export declare const getLocaleConfig: (intlConfig?: IntlConfig) => LocaleConfig;
+export {};

package/dist/CurrencyInput/components/utils/getSuffix.d.ts

@@ -0,0 +1,6 @@
+type Options = {
+    decimalSeparator?: string;
+    groupSeparator?: string;
+};
+export declare const getSuffix: (value: string, { groupSeparator, decimalSeparator }: Options) => string | undefined;
+export {};

package/dist/CurrencyInput/components/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from './cleanValue';
+export * from './fixedDecimalValue';
+export * from './formatValue';
+export * from './getLocaleConfig';
+export * from './getSuffix';
+export * from './isNumber';
+export * from './padTrimValue';
+export * from './repositionCursor';

package/dist/CurrencyInput/components/utils/isNumber.d.ts

@@ -0,0 +1 @@
+export declare const isNumber: (input: string) => boolean;

package/dist/CurrencyInput/components/utils/padTrimValue.d.ts

@@ -0,0 +1 @@
+export declare const padTrimValue: (value: string, decimalSeparator?: string, decimalScale?: number) => string;

package/dist/CurrencyInput/components/utils/parseAbbrValue.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Abbreviate number eg. 1000 = 1k
+ *
+ * Source: https://stackoverflow.com/a/9345181
+ */
+export declare const abbrValue: (value: number, decimalSeparator?: string, _decimalPlaces?: number) => string;
+/**
+ * Parse a value with abbreviation e.g 1k = 1000
+ */
+export declare const parseAbbrValue: (value: string, decimalSeparator?: string) => number | undefined;

package/dist/CurrencyInput/components/utils/removeInvalidChars.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Remove invalid characters
+ */
+export declare const removeInvalidChars: (value: string, validChars: ReadonlyArray<string>) => string;

package/dist/CurrencyInput/components/utils/removeSeparators.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Remove group separator from value eg. 1,000 > 1000
+ */
+export declare const removeSeparators: (value: string, separator?: string) => string;

package/dist/CurrencyInput/components/utils/repositionCursor.d.ts

@@ -0,0 +1,16 @@
+type RepositionCursorProps = {
+    selectionStart?: number | null;
+    value: string;
+    lastKeyStroke: string | null;
+    stateValue?: string;
+    groupSeparator?: string;
+};
+/**
+ * Based on the last key stroke and the cursor position, update the value
+ * and reposition the cursor to the right place
+ */
+export declare const repositionCursor: ({ selectionStart, value, lastKeyStroke, stateValue, groupSeparator }: RepositionCursorProps) => {
+    modifiedValue: string;
+    cursorPosition: number | null | undefined;
+};
+export {};

package/dist/CurrencyInput/index.d.ts

@@ -0,0 +1,5 @@
+import CurrencyInput from './components/CurrencyInput';
+export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './components/CurrencyInputProps';
+export { formatValue } from './components/utils/formatValue';
+export { cleanValue } from './components/utils/cleanValue';
+export default CurrencyInput;