@helpdice/ui 1.8.3 → 2.0.4

package/esm/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/esm/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/esm/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/esm/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/esm/CurrencyInput/components/utils/fixedDecimalValue.d.ts

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

package/esm/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/esm/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/esm/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/esm/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/esm/CurrencyInput/components/utils/isNumber.d.ts

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

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

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

package/esm/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/esm/CurrencyInput/components/utils/removeInvalidChars.d.ts

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

package/esm/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/esm/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/esm/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;

package/esm/ITooltip/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Placement } from '@floating-ui/react-dom';
+type AnimationVariant = 'fade' | 'scale' | 'slide';
+export type TooltipProps = {
+    children: React.ReactNode;
+    text: React.ReactNode;
+    placement?: Placement;
+    delay?: number;
+    duration?: number;
+    animation?: AnimationVariant;
+};
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/esm/ITooltip/index.js

@@ -0,0 +1,97 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useState, useRef, useEffect } from 'react';
+import { useFloating, offset, flip, shift, arrow } from '@floating-ui/react-dom';
+import { useTheme } from '@helpdice/theme';
+import { createPortal } from 'react-dom';
+var Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+    text = _ref.text,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 200 : _ref$duration,
+    _ref$animation = _ref.animation,
+    animation = _ref$animation === void 0 ? 'fade' : _ref$animation;
+  var theme = useTheme();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    show = _useState4[0],
+    setShow = _useState4[1];
+  var arrowRef = useRef(null);
+  var _useFloating = useFloating({
+      placement: placement,
+      middleware: [offset(8), flip(), shift({
+        padding: 5
+      }), arrow({
+        element: arrowRef
+      })]
+    }),
+    x = _useFloating.x,
+    y = _useFloating.y,
+    refs = _useFloating.refs,
+    strategy = _useFloating.strategy;
+  useEffect(function () {
+    var timer;
+    if (open) {
+      timer = setTimeout(function () {
+        return setShow(true);
+      }, delay);
+    } else {
+      setShow(false);
+    }
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [open, delay]);
+  var handleMouseEnter = function handleMouseEnter() {
+    return setOpen(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    return setOpen(false);
+  };
+  var handleTouchStart = function handleTouchStart() {
+    setOpen(true);
+    setTimeout(function () {
+      return setOpen(false);
+    }, 2000); // auto-hide
+  };
+
+  // const staticSide = {
+  //   top: 'bottom',
+  //   right: 'left',
+  //   bottom: 'top',
+  //   left: 'right',
+  // }[finalPlacement.split('-')[0]];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: refs.setReference,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onTouchStart: handleTouchStart,
+    className: _JSXStyle.dynamic([["2501444323", [theme.palette.accents_7, duration, duration, duration]]]) + " " + "tooltip-reference"
+  }, children), show && x != null && y != null ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    ref: refs.setFloating,
+    style: {
+      position: strategy,
+      top: y !== null && y !== void 0 ? y : 0,
+      left: x !== null && x !== void 0 ? x : 0,
+      zIndex: 9999,
+      // opacity: show ? 1 : 0,
+      // visibility: x == null || y == null ? 'hidden' : 'visible',
+      transitionProperty: 'opacity, transform',
+      transitionDuration: "".concat(duration, "ms")
+    },
+    className: _JSXStyle.dynamic([["2501444323", [theme.palette.accents_7, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
+  }, text), document.body) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2501444323",
+    dynamic: [theme.palette.accents_7, duration, duration, duration]
+  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_7, ";color:white;padding:4px 10px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:9999;opacity:0;}.fade.__jsx-style-dynamic-selector{-webkit-animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}.scale.__jsx-style-dynamic-selector{-webkit-animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}.slide.__jsx-style-dynamic-selector{-webkit-animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}")));
+};
+export default Tooltip;

package/esm/Loadable/loader.js

@@ -0,0 +1,13 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import LinearProgress from "../LinearProgress";
+var Loader = function Loader(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-965707762" + " " + "loader-wrapper"
+  }, /*#__PURE__*/React.createElement(LinearProgress, {
+    color: color
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "965707762"
+  }, ".loader-wrapper.jsx-965707762{position:fixed;top:0;left:0;z-index:2001;width:100%;}.loader-wrapper.jsx-965707762 * + *{margin-top:16px;}"));
+};
+export default Loader;

package/esm/button/button.compact.js

@@ -1,13 +1,9 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { memo } from 'react';
 import Button from './button';
-// import { useTheme } from '@helpdice/theme';
-// import { getButtonColors } from './styles';
-
-// import useScale from 'components/use-scale';
-
+import { useTheme } from '@helpdice/theme';
 var CompactButton = function CompactButton(_ref) {
-  var _ref$color = _ref.color,
-    _color = _ref$color === void 0 ? 'default' : _ref$color,
+  var _color = _ref.color,
     _ref$to = _ref.to,
     to = _ref$to === void 0 ? '/' : _ref$to,
     children = _ref.children,
@@ -18,24 +14,16 @@ var CompactButton = function CompactButton(_ref) {
     type = _ref.type,
     style = _ref.style,
     a = _ref.a,
-    target = _ref.target,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? "_self" : _ref$target,
     onClick = _ref.onClick;
-  // const theme = useTheme();
-  // const { SCALES } = useScale();
-  // const [paddingLeft, paddingRight] = [
-  //   auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
-  //   auto ? SCALES.pr(1.15) : SCALES.pr(1.375),
-  // ]
-  // const { bg, border, color } = useMemo(
-  //       () => getButtonColors(theme.palette, {
-  //         color: _color
-  //       }),
-  //       [theme.palette],
-  //     )
+  var theme = useTheme();
   if (a) {
     return /*#__PURE__*/React.createElement(Button, {
       icon: icon,
-      style: style,
+      style: _extends({}, style, {
+        backgroundColor: theme.palette.background
+      }),
       type: type,
       onClick: function onClick() {
         return window.open(to, target);
@@ -44,74 +32,13 @@ var CompactButton = function CompactButton(_ref) {
       scale: scale,
       px: 0.6,
       iconRight: iconRight
-    }, children)
-    // <a
-    //     style={
-    //         {
-    //             all: 'unset',
-    //             boxSizing: 'border-box',
-    //             display: 'inline-block',
-    //             lineHeight: 'calc(2.5* 16px)',
-    //             fontWeight: '400',
-    //             fontSize: 'calc(0.875* 16px)',
-    //             textAlign: 'center',
-    //             whiteSpace: 'nowrap',
-    //             position: 'relative',
-    //             overflow: 'hidden',
-    //             color: color,
-    //             backgroundColor: bg,
-    //             border: `1px solid ${border}`,
-    //             cursor: 'pointer',
-    //             '--helpdice-ui-button-icon-padding': `${SCALES.pl(0.727)}`,
-    // '--helpdice-ui-button-height': `${SCALES.height(2.5)}`,
-    // '--helpdice-ui-button-color':`${color}`,
-    // '--helpdice-ui-button-bg': `${bg}`,
-    // minWidth: `${auto ? 'min-content' : SCALES.width(10.5)}`,
-    // width: `${auto ? 'auto' : 'initial'}`,
-    // height: `${SCALES.height(2.5)}`,
-    // padding:` ${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft}`,
-    // margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
-    //         } as React.CSSProperties
-    //     }
-    //     href={to}
-    //     target={target}
-    // >
-    //     <span
-    //         style={{
-    //             position: 'absolute',
-    //             right: 'auto',
-    //             left: 'var(--helpdice-ui-button-icon-padding)',
-    //             top: '50%',
-    //             transform: 'translateY(-50%)',
-    //             display: 'flex',
-    //             justifyContent: 'center',
-    //             alignItems: 'center',
-    //             color: 'var(--helpdice-ui-button-color)',
-    //             zIndex: 1
-    //         }}
-    //     >
-    //         {icon}
-    //     </span>
-    //     <div
-    //         style={{
-    //             display: 'inline-flex',
-    //             position: 'relative',
-    //             zIndex: 1,
-    //             justifyContent: 'center',
-    //             alignItems: 'center',
-    //             textAlign: 'center',
-    //             lineHeight: 'inherit',
-    //             paddingLeft: icon ? 'calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding)* .5)' : 0
-    //         }}
-    //     >
-    //         {children}
-    //     </div>
-    // </a>
-    ;
+    }, children);
   }
   return /*#__PURE__*/React.createElement(Button, {
     icon: icon,
-    style: style,
+    style: _extends({}, style, {
+      backgroundColor: theme.palette.background
+    }),
     type: type,
     onClick: onClick,
     auto: true,

package/esm/index.d.ts

@@ -93,8 +93,8 @@ export { default as Themes } from './themes';
 export type { HUIThemes, HUserTheme } from './themes';
 export { default as Toggle } from './toggle';
 export type { ToggleProps } from './toggle';
-export { default as Tooltip } from './tooltip';
-export type { TooltipProps } from './tooltip';
+export { default as Tooltip } from './ITooltip';
+export type { TooltipProps } from './ITooltip';
 export { default as Tree } from './tree';
 export type { TreeProps } from './tree';
 export { useTime, useTimer, useStopwatch } from './timer';
@@ -124,3 +124,5 @@ export { default as Swipe } from './swipe';
 export type { SwipeProps } from './swipe';
 export { Carousel } from './carousal';
 export type { CarouselProps } from './carousal';
+export { default as CurrencyInput } from './CurrencyInput';
+export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './CurrencyInput';

package/esm/index.js

@@ -55,7 +55,7 @@ export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as Themes } from './themes';
 export { default as Toggle } from './toggle';
-export { default as Tooltip } from './tooltip';
+export { default as Tooltip } from './ITooltip';
 export { default as Tree } from './tree';
 export { useTime, useTimer, useStopwatch } from './timer';
 export { default as User } from './user';
@@ -83,4 +83,6 @@ export * from './login-with';
 // Swipe
 export { default as Swipe } from './swipe';
 // Carousel
-export { Carousel } from './carousal';
+export { Carousel } from './carousal';
+// Currency Input
+export { default as CurrencyInput } from './CurrencyInput';