@hortiview/shared-components 0.0.10589 → 0.0.11114

package/README.md

@@ -33,9 +33,11 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
 1. [Filter](#filter)
+1. [FormattedNumberDisplay] (#formattednumberdisplay)
 1. [FormComponents](#formcomponents)
    1. [FormCheckBox](#formcheckbox)
    1. [FormDatePicker](#formdatepicker)
+   1. [FormNumber] (#formnumber)
    1. [FormRadio](#formradio)
    1. [FormSelect](#formselect)
    1. [FormSlider](#formslider)
@@ -296,6 +298,22 @@ const MyComponent = () => {
 export default MyComponent;
 ```
 
+### FormattedNumberDisplay
+
+A component to display a formatted number based on the given language code, wrapped in a given typography component to style it as needed.
+
+The typography component that is passed to the FormattedNumberDisplay needs the "children" property to which the formatted number will be added.
+
+```jsx
+import { FormattedNumberDisplay } from '@hortiview/shared-components';
+
+const TypoDisplay3 = (props: { children: React.ReactNode }) => {
+  return <TypoDisplay level={3}>{props.children}</TypoDisplay>;
+};
+
+<FormattedNumberDisplay typographyComponent={TypoDisplay3} languageCode="en-MX" value={12345.67} />;
+```
+
 ### FormComponents
 
 The library provides some form components based on [react-hook-form](https://react-hook-form.com/). The components can only be use within a form provided by react-hook-form.
@@ -362,6 +380,36 @@ const { handleSubmit } = formMethods;
 </FormProvider>;
 ```
 
+#### FormNumber
+
+Number input field that formats the users input depending on the user language. The component automatically sets the language specific thousand separators and only allows the language specific decimal separators.
+
+```jsx
+import { FormNumber } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ birthday: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormNumber<{ price: number }>
+      propertyName='price'
+      label='module.price'
+      languageCode="es-MX"
+      decimalScale={5}
+      fixedDecimalScale={true}
+      allowNegative={false}
+      allowLeadingZeros={false}
+      prefix=" €"
+    />
+  </form>
+</FormProvider>;
+```
+
 #### FormRadio
 
 Provides a radio button form component
@@ -918,3 +966,14 @@ https://github.com/microsoft/TypeScript/issues/15300
 ```typescript
 const trimmedData = trimLeadingAndTrailingSpaces({ ...data });
 ```
+
+### getNumberAsLocaleString
+
+Receives a number and returns the value as a locale string.
+Note: Should only be used for displaying numbers, not for calculations or values that are supposed to be send to the backend.
+
+```typescript
+const userLocale = 'es-MX';
+
+const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t('squaremeter-unit')}`;
+```

package/dist/assets/formNumber.css

@@ -0,0 +1 @@
+._invalid_1dsbr_1+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{color:var(--lmnt-theme-danger)!important}

package/dist/components/Filter/Filter.js

@@ -33,10 +33,11 @@ import "../../loadingSpinner.module-CLtqSMWA.js";
 import "../Scrollbar/Scrollbar.js";
 import "react-hook-form";
 import "../../formDatePicker.module-BV3ma_7y.js";
+import "../../formNumber.module-BA05Gi6_.js";
 import "../../formSelect.module-PUiLDSD4.js";
 import "../../formText.module-C0by6_DK.js";
 import "../../isPlainObject-BlCDf1Kc.js";
-const Nt = ({
+const bt = ({
   clearFilterText: f,
   closeCallback: m,
   currentFilter: i,
@@ -180,5 +181,5 @@ const Nt = ({
   );
 };
 export {
-  Nt as Filter
+  bt as Filter
 };

package/dist/components/FormComponents/FormNumber/CustomTextField.d.ts

@@ -0,0 +1,34 @@
+import { TextfieldProps } from '@element/react-components';
+import { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
+import { InputAttributes, NumericFormatProps } from 'react-number-format';
+type CustomTextFieldProps<T extends FieldValues> = Pick<TextfieldProps, 'className' | 'disabled' | 'fullWidth' | 'helperText' | 'helperTextPersistent' | 'helperTextValidation' | 'label' | 'leadingIcon' | 'placeholder' | 'trailingIcon' | 'variant'> & {
+    /**
+     * the path to the property
+     * @example address.addressLine1
+     */
+    propertyName: Path<T>;
+    /** a suffix to be shown before the number */
+    suffix?: string;
+    /** a prefix to be shown after the number */
+    prefix?: string;
+    /**
+     * the trigger to validate the field
+     * @default 'none'
+     * @value 'onBlur' | 'onChange' | 'none'
+     */
+    additionalTrigger?: 'onBlur' | 'onChange' | 'none';
+    /** value to be used as default when no value is provided */
+    defaultValue?: string;
+    /**
+     * React Hook Form properties
+     */
+    formOnBlur: ControllerRenderProps<T>['onBlur'];
+    /**
+     * React Number Format properties
+     */
+    value: NumericFormatProps['value'];
+    onBlur?: InputAttributes['onBlur'];
+    onChange?: NumericFormatProps['onChange'];
+};
+export declare const CustomTextField: <T extends FieldValues>({ ...props }: CustomTextFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FormComponents/FormNumber/CustomTextField.js

@@ -0,0 +1,40 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Textfield as u } from "@element/react-components";
+import { get as d } from "lodash";
+import { useMemo as f } from "react";
+import { useFormContext as g } from "react-hook-form";
+import { s as v } from "../../../formNumber.module-BA05Gi6_.js";
+const s = ({ ...e }) => {
+  const {
+    getFieldState: r,
+    formState: { errors: n },
+    trigger: i,
+    watch: o
+  } = g(), a = o(e.propertyName), l = f(() => {
+    if (!(!a || e.value === null))
+      return e.value;
+  }, [a, e.value]);
+  return /* @__PURE__ */ m(
+    u,
+    {
+      ...e,
+      value: l,
+      "data-testid": `numeric-field-${e.propertyName}`,
+      fullWidth: !0,
+      inputMode: "decimal",
+      variant: "outlined",
+      onBlur: (t) => {
+        e.onBlur?.(t), e.formOnBlur(), e.additionalTrigger === "onBlur" && i(e.propertyName);
+      },
+      onChange: (t) => {
+        e.onChange?.(t), e.additionalTrigger === "onChange" && i(e.propertyName);
+      },
+      valid: !r(e.propertyName).invalid,
+      helperTextPersistent: d(n, e.propertyName) !== void 0 || e.helperTextPersistent,
+      className: r(e.propertyName).invalid ? v.invalid : ""
+    }
+  );
+};
+export {
+  s as CustomTextField
+};

package/dist/components/FormComponents/FormNumber/FormNumber.d.ts

@@ -0,0 +1,98 @@
+import { TextfieldProps } from '@element/react-components';
+import { FieldValues, Path } from 'react-hook-form';
+import { NumericFormatProps } from 'react-number-format';
+import { LANGUAGE_COUNTRY_CODES } from '../../../types/Languages';
+export type FormNumberProps<T extends FieldValues> = {
+    /**
+     * the language code to use for formatting the number
+     */
+    languageCode: LANGUAGE_COUNTRY_CODES;
+    /**
+     * the path to the property for React Hook Form
+     * @example address.addressLine1
+     */
+    propertyName: Path<T>;
+    /**
+     * an additional trigger to validate the field
+     * @default 'likeForm'
+     * @value 'onBlur' | 'onChange' | 'likeForm'
+     */
+    additionalTrigger?: 'onBlur' | 'onChange' | 'none';
+    /**
+     * the maximal allowed number input
+     */
+    maxValue?: number;
+} & Pick<TextfieldProps, 'className' | 'disabled' | 'helperText' | 'helperTextPersistent' | 'helperTextValidation' | 'label' | 'leadingIcon' | 'trailingIcon'> & Partial<Pick<NumericFormatProps, 
+/**
+ * limits the number of digits after the decimal point
+ */
+'decimalScale'
+/**
+ * @default false
+ * if true it adds 0s after the decimal separator to match given decimalScale
+ */
+ | 'fixedDecimalScale'
+/**
+ * @default true
+ * if false negative numbers are not allowed
+ */
+ | 'allowNegative'
+/**
+ * @default false
+ * By default, on blur of an input, leading zeros are removed
+ */
+ | 'allowLeadingZeros'
+/**
+ * A checker function to validate the input value.
+ * If this function returns false, the onChange method will not get triggered
+ * and the input value will not change.
+ * @example
+ * <NumericFormat
+ *  value={11}
+ *  isAllowed={(values) => {
+ *    const { floatValue } = values;
+ *    return floatValue < MAX_LIMIT;
+ *  }}
+ * />;
+ */
+ | 'isAllowed'
+/** a suffix to be shown before the number */
+ | 'suffix'
+/** a prefix to be shown after the number */
+ | 'prefix'>>;
+/**
+ * Number input field that formats the user input depending on the user language
+ * the input automatically sets the language specific thousand separators
+ * and only allows the language specific decimal separators.
+ * Note: This component is supposed to be used with react-hook-form.
+ *
+ * @param languageCode The language code for formatting the number. Supported values are 'de-DE', 'es-MX', 'fr-FR', 'en-US', 'de-CH'. Default is 'es-MX'.
+ * @param propertyName The path to the property for React Hook Form.
+ * @param additionalTrigger An additional trigger to validate the field. Supported values are 'onBlur', 'onChange', 'none'. Default is 'none'.
+ * @param maxValue The maximal allowed number input.
+ * @param decimalScale Limits the number of digits after the decimal point.
+ * @param allowNegative If false, negative numbers are not allowed. Default is true.
+ * @param fixedDecimalScale If true, it adds 0s after the decimal separator to match the given decimalScale. Default is false.
+ * @param allowLeadingZeros If true, leading zeros are allowed. Default is false.
+ * @param isAllowed A checker function to validate the input value. If this function returns false, the onChange method will not get triggered and the input value will not change.
+ * @example
+ * <NumericFormat
+ *  value={11}
+ *  isAllowed={(values) => {
+ *    const { floatValue } = values;
+ *    return floatValue < MAX_LIMIT;
+ *  }}
+ * @param suffix A suffix to be shown after the number.
+ * @param prefix A prefix to be shown before the number.
+ * @param className The class name for the component.
+ * @param disabled If true, the input will be disabled.
+ * @param helperText The helper text for the input.
+ * @param helperTextValidation The validation helper text for the input.
+ * @param helperTextPersistent If true, the helper text will persist. Default is true.
+ * @param label The label for the input.
+ * @param leadingIcon The leading icon for the input.
+ * @param placeholder The placeholder text for the input.
+ * @param trailingIcon The trailing icon for the input.
+ * @returns a JSX element that renders a number input field
+ */
+export declare const FormNumber: <T extends FieldValues>({ decimalScale, helperTextPersistent, languageCode, additionalTrigger, ...props }: FormNumberProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormComponents/FormNumber/FormNumber.js

@@ -0,0 +1,63 @@
+import { jsx as u } from "react/jsx-runtime";
+import { g as p } from "../../../get-BJn2Enx7.js";
+import { useMemo as h } from "react";
+import { useFormContext as S, Controller as T } from "react-hook-form";
+import { N as g } from "../../../react-number-format.es-BeIT_PM7.js";
+import { useDecimalSeparator as y, useThousandSeparator as F } from "../../../services/NumberService.js";
+import { CustomTextField as V } from "./CustomTextField.js";
+const B = ({
+  /**numeric format props */
+  decimalScale: l = 2,
+  /** TextField props */
+  helperTextPersistent: i = !0,
+  /** custom props */
+  languageCode: m = "es-MX",
+  additionalTrigger: s = "none",
+  ...e
+}) => {
+  const {
+    control: f,
+    formState: { errors: a }
+  } = S(), c = h(() => {
+    const o = p(a, e.propertyName);
+    if (o) {
+      const r = o.message;
+      return r || "Invalid input";
+    }
+    return e.helperText;
+  }, [a, e.propertyName, e.helperText]), d = y(m), x = F(m);
+  return /* @__PURE__ */ u(
+    T,
+    {
+      name: e.propertyName,
+      control: f,
+      render: ({ field: { value: o, onChange: r, onBlur: N } }) => /* @__PURE__ */ u(
+        g,
+        {
+          "data-testid": `form-number-${e.propertyName}`,
+          ...e,
+          valueIsNumericString: !0,
+          value: o,
+          onValueChange: (t) => {
+            t.value === "" ? r(null) : r(Number(t.value));
+          },
+          decimalSeparator: d,
+          thousandSeparator: x,
+          decimalScale: l,
+          customInput: V,
+          isAllowed: (t) => {
+            const { floatValue: n } = t;
+            return n ? e.maxValue && n > e.maxValue ? !1 : e.isAllowed?.(t) ?? !0 : !0;
+          },
+          formOnBlur: N,
+          additionalTrigger: s,
+          helperText: c,
+          helperTextPersistent: i
+        }
+      )
+    }
+  );
+};
+export {
+  B as FormNumber
+};

package/dist/components/FormComponents/FormNumber/FormNumber.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FormComponents/FormNumber/FormNumber.test.js

@@ -0,0 +1,51 @@
+import { jsx as o } from "react/jsx-runtime";
+import { a, s as n } from "../../../react.esm-CHvVvf3L.js";
+import { FormNumber as s } from "./FormNumber.js";
+import { v as e, d as m, t as f, g as r } from "../../../vi.JYQecGiw-BpOAB4v6.js";
+const l = e.fn();
+e.mock("react-hook-form", () => ({
+  ...e.importActual("react-hook-form"),
+  Controller: ({
+    render: t
+  }) => t({
+    field: {
+      ref: void 0,
+      onChange: l,
+      value: 12345
+    },
+    formState: { defaultValue: { "de-DE": 234 } }
+  }),
+  useFormContext: () => ({
+    watch: e.fn(),
+    control: {
+      register: e.fn(),
+      unregister: e.fn(),
+      getFieldState: e.fn(),
+      _names: {
+        array: new Set("test"),
+        mount: new Set("test"),
+        unMount: new Set("test"),
+        watch: new Set("test"),
+        focus: "test",
+        watchAll: !1
+      },
+      _subjects: {
+        watch: e.fn(),
+        array: e.fn(),
+        state: e.fn()
+      },
+      _getWatch: e.fn(),
+      _formValues: ["test"],
+      _defaultValues: ["test"]
+    },
+    formState: { errors: {} },
+    getFieldState: () => ({ invalid: !1 })
+  })
+}));
+m("FormNumber Test", () => {
+  f("render FormNumber with correct properties", () => {
+    a(/* @__PURE__ */ o(s, { languageCode: "de-DE", propertyName: "de-DE" }));
+    const t = n.getByRole("textbox");
+    r(t).toBeInTheDocument(), r(t).toHaveAttribute("type", "text"), r(t).toHaveAttribute("inputmode", "decimal");
+  });
+});

package/dist/components/FormattedNumberDisplay/FormattedNumberDisplay.d.ts

@@ -0,0 +1,57 @@
+import React, { PropsWithChildren } from 'react';
+import { NumericFormatProps } from 'react-number-format';
+import { LANGUAGE_COUNTRY_CODES } from '../../types/Languages';
+export type FormattedNumberDisplayProps = {
+    /**
+     * the number to format
+     */
+    value: number;
+    /**
+     * the language code to use for formatting the number
+     */
+    languageCode: LANGUAGE_COUNTRY_CODES;
+    /**
+     * the component that wraps the formatted number
+     * it should be used to apply styles to the number
+     */
+    typographyComponent: React.ComponentType<PropsWithChildren>;
+} & Pick<NumericFormatProps, 
+/**
+ * limits the number of digits after the decimal point
+ */
+'decimalScale'
+/**
+ * @default false
+ * if true it adds 0s after the decimal separator to match given decimalScale
+ */
+ | 'fixedDecimalScale'
+/** a suffix to be shown before the number */
+ | 'suffix'
+/** a prefix to be shown after the number */
+ | 'prefix'
+/**
+ * @default true
+ * if false negative numbers are not allowed
+ */
+ | 'allowNegative'
+/**
+ * @default false
+ * By default, on blur of an input, leading zeros are removed
+ */
+ | 'allowLeadingZeros'>;
+/**
+ * A component to display a formatted number based on the given language code,
+ * wrapped in a given typography component to style it as needed.
+ *
+ * @param languageCode - The language code to use for formatting the number.
+ * @param typographyComponent - The component that wraps the formatted number. It should be used to apply styles to the number.
+ * It has to be a component with child since the formatted number will be passed as a child.
+ * @param decimalScale - Limits the number of digits after the decimal point.
+ * @param fixedDecimalScale - If true, it adds 0s after the decimal separator to match the given decimalScale. Default is false.
+ * @param suffix - A suffix to be shown before the number.
+ * @param prefix - A prefix to be shown after the number.
+ * @param allowNegative If false, negative numbers are not allowed. Default is true.
+ * @param allowLeadingZeros If true, leading zeros are allowed. Default is false.
+ * @returns A formatted number wrapped in the specified typography component.
+ */
+export declare const FormattedNumberDisplay: ({ typographyComponent: TypographyComponent, decimalScale, languageCode, ...props }: FormattedNumberDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormattedNumberDisplay/FormattedNumberDisplay.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { N as i } from "../../react-number-format.es-BeIT_PM7.js";
+import { useDecimalSeparator as d, useThousandSeparator as n } from "../../services/NumberService.js";
+const y = ({
+  typographyComponent: a,
+  /**numeric format props */
+  decimalScale: o = 2,
+  /** custom props */
+  languageCode: r = "es-MX",
+  ...t
+}) => {
+  const m = d(r), p = n(r);
+  return /* @__PURE__ */ e(
+    i,
+    {
+      "data-testid": "formatted-number-display",
+      ...t,
+      value: t.value,
+      displayType: "text",
+      renderText: (s) => /* @__PURE__ */ e(a, { children: s }),
+      decimalSeparator: m,
+      thousandSeparator: p,
+      decimalScale: o
+    }
+  );
+};
+export {
+  y as FormattedNumberDisplay
+};

package/dist/components/GenericTable/GenericTable.js

@@ -31,12 +31,13 @@ import "../../loadingSpinner.module-CLtqSMWA.js";
 import "../Scrollbar/Scrollbar.js";
 import "react-hook-form";
 import "../../formDatePicker.module-BV3ma_7y.js";
+import "../../formNumber.module-BA05Gi6_.js";
 import "../../formSelect.module-PUiLDSD4.js";
 import "../../formText.module-C0by6_DK.js";
 import "../../isPlainObject-BlCDf1Kc.js";
 import { useGenerateColumns as x, useGenerateTableData as _ } from "./GenericTableService.js";
 import { GenericCardList as A } from "./Mobile/GenericCardList.js";
-const yr = ({
+const br = ({
   data: p = [],
   hiddenColumns: l = [],
   order: f = [],
@@ -119,5 +120,5 @@ const yr = ({
   ) });
 };
 export {
-  yr as GenericTable
+  br as GenericTable
 };

package/dist/formNumber.module-BA05Gi6_.js

@@ -0,0 +1,7 @@
+import "./assets/formNumber.css";
+const i = "_invalid_1dsbr_1", n = {
+  invalid: i
+};
+export {
+  n as s
+};

package/dist/main.d.ts

@@ -8,6 +8,7 @@ export { DeleteModal } from './components/DeleteModal/DeleteModal';
 export { Disclaimer } from './components/Disclaimer/Disclaimer';
 export { EmptyView } from './components/EmptyView/EmptyView';
 export { Filter } from './components/Filter/Filter';
+export { FormattedNumberDisplay } from './components/FormattedNumberDisplay/FormattedNumberDisplay';
 export { GenericTable } from './components/GenericTable/GenericTable';
 export { HashTabView } from './components/HashTabView/HashTabView';
 export { HeaderFilter } from './components/HeaderFilter/HeaderFilter';
@@ -23,6 +24,7 @@ export { SearchBar } from './components/SearchBar/SearchBar';
 export { VerticalDivider } from './components/VerticalDivider/VerticalDivider';
 export { FormCheckBox } from './components/FormComponents/FormCheckBox/FormCheckBox';
 export { FormDatePicker } from './components/FormComponents/FormDatePicker/FormDatePicker';
+export { FormNumber } from './components/FormComponents/FormNumber/FormNumber';
 export { FormRadio } from './components/FormComponents/FormRadio/FormRadio';
 export { FormSelect } from './components/FormComponents/FormSelect/FormSelect';
 export { FormSlider } from './components/FormComponents/FormSlider/FormSlider';
@@ -30,7 +32,7 @@ export { FormText } from './components/FormComponents/FormText/FormText';
 export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
 export { ThemeColor } from './enums/ThemeColor';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export { capitalizeFirstLetters, trimLeadingAndTrailingSpaces } from './services/UtilService';
+export { capitalizeFirstLetters, getNumberAsLocaleString, trimLeadingAndTrailingSpaces, } from './services/UtilService';
 export type { ActionProps } from './components/ContextMenu/ContextMenu';
 export type { FormSelectOption } from './components/FormComponents/FormSelect/FormSelect';
 export type { FormTextProps } from './components/FormComponents/FormText/FormText';
@@ -39,3 +41,5 @@ export type { FilterData, FilterOption, FilterSelection } from './types/Filter';
 export type { CellTemplate, CellTemplateProps, TableLayoutProps } from './types/GenericTable';
 export type { HashTab } from './types/HashTab';
 export type { BaseListElement, ListElement } from './types/ListElement';
+export { LANGUAGE_CODES_MAPPER } from './types/Languages';
+export type { LANGUAGE_CODES, LANGUAGE_COUNTRY_CODES } from './types/Languages';