@m4l/components 0.1.8 → 0.1.10

package/components/animate/variants/container.d.ts

@@ -3,7 +3,7 @@ export declare type Props = {
     delayIn?: number;
     staggerOut?: number;
 };
-export declare const varContainer: (props?: Props | undefined) => {
+export declare const varContainer: (props?: Props) => {
     animate: {
         transition: {
             staggerChildren: number;

package/components/animate/variants/fade.d.ts

@@ -1,5 +1,5 @@
 import { VariantsType } from '../type';
-export declare const varFade: (props?: VariantsType | undefined) => {
+export declare const varFade: (props?: VariantsType) => {
     in: {
         initial: {
             opacity: number;

package/components/animate/variants/transition.d.ts

@@ -1,13 +1,13 @@
 import { TranHoverType, TranEnterType, TranExitType } from '../type';
-export declare const varTranHover: (props?: TranHoverType | undefined) => {
+export declare const varTranHover: (props?: TranHoverType) => {
     duration: number;
     ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };
-export declare const varTranEnter: (props?: TranEnterType | undefined) => {
+export declare const varTranEnter: (props?: TranEnterType) => {
     duration: number;
     ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };
-export declare const varTranExit: (props?: TranExitType | undefined) => {
+export declare const varTranExit: (props?: TranExitType) => {
     duration: number;
     ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };

package/components/formatters/BooleanFormatter/index.js

@@ -1,32 +1,52 @@
-import require$$0 from "react";
-import { useModuleDictionary } from "@m4l/core";
-import { Checkbox } from "@mui/material";
+import { useModuleDictionary, useEnvironment, getPropertyByString } from "@m4l/core";
+import React from "react";
+import { I as Icon } from "../../Icon/index.js";
 import { jsx } from "react/jsx-runtime";
 function BooleanFormatter(props) {
   const {
     presentationType,
     value,
-    Component = require$$0.Fragment
+    Component = React.Fragment
   } = props;
   const {
     getLabel
   } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const final_value = value ?? false;
+  const srcCheckTrue = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`;
+  const srcCheckFalse = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
   if (presentationType === "string_yes_no") {
     return /* @__PURE__ */ jsx(Component, {
-      children: value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
+      children: final_value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
     });
   }
   if (presentationType === "string_true_false") {
     return /* @__PURE__ */ jsx(Component, {
-      children: value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
+      children: final_value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
     });
   }
-  return /* @__PURE__ */ jsx(Checkbox, {
-    checked: value !== void 0 ? value : false,
-    size: "small",
-    readOnly: true,
-    disableFocusRipple: true,
-    disableRipple: true
+  return /* @__PURE__ */ jsx(Component, {
+    children: /* @__PURE__ */ jsx(Icon, {
+      src: final_value ? srcCheckTrue : srcCheckFalse,
+      bgColor: "action.disabled"
+    })
   });
 }
-export { BooleanFormatter as B };
+function columnBooleanFormatter(props) {
+  const {
+    fieldValue,
+    presentationType,
+    Component = React.Fragment
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(BooleanFormatter, {
+      presentationType,
+      value: getPropertyByString(obProps, fieldValue),
+      Component
+    });
+  };
+}
+export { BooleanFormatter as B, columnBooleanFormatter as c };

package/components/formatters/BooleanFormatter/types.d.ts

@@ -1,7 +1,7 @@
-import { ComponentForrmaterType } from '../types';
+import { ComponentType } from 'react';
 export declare type PresentationType = 'string_yes_no' | 'string_true_false' | 'check';
 export interface BooleanFormatterProps {
-    Component?: ComponentForrmaterType;
+    Component?: ComponentType;
     presentationType: PresentationType;
-    value: boolean;
+    value?: boolean;
 }

package/components/formatters/DateFormatter/index.js

@@ -1,12 +1,14 @@
-import { useEnvironment, useHostTools } from "@m4l/core";
-import require$$0 from "react";
+import React from "react";
+import { useEnvironment, useHostTools, getPropertyByString } from "@m4l/core";
+import "../../Icon/index.js";
+import "@mui/material/styles";
 import { jsx, Fragment } from "react/jsx-runtime";
 function DateFormatter(props) {
   const {
     presentationType,
     value,
     format,
-    Component = require$$0.Fragment
+    Component = React.Fragment
   } = props;
   const {
     dfnsFormat
@@ -43,20 +45,22 @@ function DateFormatter(props) {
   } catch (e) {
     result = "err_typing";
   }
-  switch (Component) {
-    case "div":
-      return /* @__PURE__ */ jsx("div", {
-        className: "DateFormatter",
-        children: result
-      });
-    case "span":
-      return /* @__PURE__ */ jsx("span", {
-        className: "DateFormatter",
-        children: result
-      });
-  }
   return /* @__PURE__ */ jsx(Component, {
     children: result
   });
 }
-export { DateFormatter as D };
+function columnDateFormatter(props) {
+  const {
+    fieldValue,
+    presentationType,
+    Component = React.Fragment
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(DateFormatter, {
+      presentationType,
+      value: getPropertyByString(obProps, fieldValue),
+      Component
+    });
+  };
+}
+export { DateFormatter as D, columnDateFormatter as c };

package/components/formatters/DateFormatter/types.d.ts

@@ -1,8 +1,8 @@
 import { Maybe } from '@m4l/core';
-import { ComponentForrmaterType } from '../types';
+import { ComponentType } from 'react';
 export declare type PresentationType = 'date' | 'datetime' | 'time';
 export interface DateFormatterProps {
-    Component?: ComponentForrmaterType;
+    Component?: ComponentType;
     presentationType: PresentationType;
     format?: string;
     value: Maybe<Date | string | number>;

package/components/formatters/PointsFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PointsFormatterProps } from './types';
+export declare function PointsFormatter(props: PointsFormatterProps): JSX.Element;

package/components/formatters/PointsFormatter/types.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react';
+export declare type CalibrationPoint = number | null;
+export interface PointsFormatterProps {
+    Component?: ComponentType;
+    unit?: string;
+    value?: Array<CalibrationPoint>;
+}

package/components/formatters/PriceFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PriceFormatterProps } from './types';
+export declare function PriceFormatter(props: PriceFormatterProps): JSX.Element;

package/components/formatters/PriceFormatter/types.d.ts

@@ -0,0 +1,5 @@
+import { ComponentForrmaterType } from '../types';
+export interface PriceFormatterProps {
+    Component?: ComponentForrmaterType;
+    value?: number;
+}

package/components/formatters/UncertaintyFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { UncertaintyFormatterProps } from './types';
+export declare function UncertaintyFormatter(props: UncertaintyFormatterProps): JSX.Element;

package/components/formatters/UncertaintyFormatter/types.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+export interface UncertaintyRange {
+    cmc_min_closed: boolean;
+    cmc_min: number;
+    cmc_max_closed: boolean;
+    cmc_max: number;
+    cmc_uncertainty: number;
+}
+export interface UncertaintyFormatterProps {
+    Component?: ComponentType;
+    symbol?: string;
+    unit?: string;
+    value?: Array<UncertaintyRange>;
+}

package/components/formatters/index.d.ts

@@ -1,2 +1,6 @@
 export { BooleanFormatter } from './BooleanFormatter';
 export { DateFormatter } from './DateFormatter';
+export { UncertaintyFormatter } from './UncertaintyFormatter';
+export { PointsFormatter } from './PointsFormatter';
+export { PriceFormatter } from './PriceFormatter';
+export type { UncertaintyRange } from './UncertaintyFormatter/types';

package/components/formatters/index.js

@@ -1,7 +1,62 @@
-import "react";
-import "@m4l/core";
-import "@mui/material";
-import "react/jsx-runtime";
+import React from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import "../Icon/index.js";
+import "@mui/material/styles";
+function UncertaintyFormatter(props) {
+  const {
+    value,
+    unit,
+    symbol,
+    Component = React.Fragment
+  } = props;
+  if (value === void 0 || value === null || !Array.isArray(value)) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: ""
+    });
+  }
+  let result = "";
+  value.map((obj, idx) => {
+    const cmc_min_closed = obj.cmc_min_closed != true ? "<" : "\u2264";
+    const cmc_max_closed = obj.cmc_max_closed != true ? "<" : "\u2264";
+    result = result.concat(`${idx > 0 ? " " : ""}`, obj.cmc_min !== obj.cmc_max ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} \xB1 ${obj.cmc_uncertainty}]` : `[${obj.cmc_min}${unit} \xB1 ${obj.cmc_uncertainty}]`);
+  });
+  return /* @__PURE__ */ jsx(Component, {
+    children: result
+  });
+}
+function PointsFormatter(props) {
+  const {
+    value,
+    unit,
+    Component = React.Fragment
+  } = props;
+  console.log("points", value);
+  if (value === void 0 || value === null || !Array.isArray(value)) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: "[]"
+    });
+  }
+  let result = "";
+  value.map((point) => {
+    if (point) {
+      console.log("point", point);
+      result = result.concat(`[${point}${unit}]`);
+    }
+  });
+  return /* @__PURE__ */ jsx(Component, {
+    children: result
+  });
+}
+function PriceFormatter(props) {
+  const {
+    value,
+    Component = React.Fragment
+  } = props;
+  return /* @__PURE__ */ jsx(Component, {
+    children: `${value}$Cop`
+  });
+}
 function getFormattersComponentsDictionary() {
   return ["formatters"];
 }
@@ -13,4 +68,46 @@ const defaultFormattersDictionary = {
     boolean_false: "False"
   }
 };
-export { defaultFormattersDictionary as d, getFormattersComponentsDictionary as g };
+function columnUncertaintyFormatter(props) {
+  const {
+    fieldUnit,
+    fieldValue,
+    fieldSymbol,
+    Component
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(UncertaintyFormatter, {
+      Component,
+      value: getPropertyByString(obProps, fieldValue),
+      unit: getPropertyByString(obProps, fieldUnit),
+      symbol: getPropertyByString(obProps, fieldSymbol)
+    });
+  };
+}
+function columnPointsFormatter(props) {
+  const {
+    fieldUnit,
+    fieldValue,
+    Component
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(PointsFormatter, {
+      Component,
+      value: getPropertyByString(obProps, fieldValue),
+      unit: getPropertyByString(obProps, fieldUnit)
+    });
+  };
+}
+function columnNestedValueFormatter(props) {
+  const {
+    fieldValue,
+    Component = React.Fragment
+  } = props;
+  return (obProps) => {
+    console.log("columnNestedValueFormatter", obProps, fieldValue);
+    return /* @__PURE__ */ jsx(Component, {
+      children: getPropertyByString(obProps, fieldValue)
+    });
+  };
+}
+export { PointsFormatter as P, UncertaintyFormatter as U, PriceFormatter as a, columnPointsFormatter as b, columnUncertaintyFormatter as c, defaultFormattersDictionary as d, columnNestedValueFormatter as e, getFormattersComponentsDictionary as g };

package/components/hook-form/FormProvider/index.js

@@ -18,25 +18,37 @@ function FormProvider(props) {
     children,
     onSubmit,
     values,
-    validationSchema
+    validationSchema,
+    statusLoad = "ready"
   } = props;
   const methods = useForm({
     resolver: o(validationSchema),
     defaultValues: values
   });
   useEffect(() => {
-    if (values.initial) {
+    console.log("useEffect FormProvider reload_values_provider===", statusLoad);
+    if (statusLoad === "reload_values_provider") {
+      const keys = Object.keys(values);
+      keys.forEach((key) => {
+        methods.setValue(key, values[key], {
+          shouldValidate: false,
+          shouldDirty: false,
+          shouldTouch: false
+        });
+      });
       return;
     }
-    const keys = Object.keys(values);
-    keys.forEach((key) => {
-      methods.setValue(key, values[key], {
+  }, [methods, statusLoad, values]);
+  useEffect(() => {
+    if (statusLoad === "ready") {
+      console.log("useEffect FormProvider Ready", statusLoad);
+      methods.setValue("statusLoad", "ready", {
         shouldValidate: false,
         shouldDirty: false,
         shouldTouch: false
       });
-    });
-  }, [methods, values]);
+    }
+  }, [statusLoad]);
   return /* @__PURE__ */ jsx(FormProvider$1, {
     ...methods,
     children: /* @__PURE__ */ jsx(WrapperFormProvider, {

package/components/hook-form/FormProvider/types.d.ts

@@ -1,8 +1,11 @@
 import { ReactNode } from 'react';
 import { FieldValues } from 'react-hook-form';
+export declare type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
+export declare type FormInitialValues = FieldValues;
 export interface FormProviderProps {
     children: ReactNode;
     onSubmit: (data: FieldValues) => void;
-    values: FieldValues;
+    values: FormInitialValues;
     validationSchema: any;
+    statusLoad?: FormStatusLoad;
 }

package/components/hook-form/RHFAutocompleteAsync/index.js

@@ -156,7 +156,6 @@ function RHFAutocompleteAsync(props) {
         setOpen(false);
       },
       onChange: (_e, val) => {
-        console.log("onChante  auto", _e, val);
         onChange(val);
       },
       disabled,

package/components/hook-form/RHFCheckbox/index.js

@@ -1,20 +1,19 @@
 import { useFormContext, Controller } from "react-hook-form";
 import { styled } from "@mui/material/styles";
 import { Skeleton, FormControlLabel, Checkbox } from "@mui/material";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 const WrapperSKTRHFCheckbox = styled("div")(() => ({
-  display: "flex"
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+}));
+const SKTCheckSkeleton = styled(Skeleton)(() => ({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px"
 }));
-function SKTRHFCheckbox() {
-  return /* @__PURE__ */ jsx(WrapperSKTRHFCheckbox, {
-    children: /* @__PURE__ */ jsx(Skeleton, {
-      variant: "rectangular",
-      width: 16,
-      height: 16
-    })
-  });
-}
 const ErrorLabel = styled("p")(({
   theme
 }) => ({
@@ -32,29 +31,35 @@ function RHFCheckbox({
     control
   } = useFormContext();
   const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ jsx(Controller, {
-        name,
-        control,
-        render: ({
-          field,
-          fieldState: {
-            error
-          }
-        }) => isSkeleton ? /* @__PURE__ */ jsx(SKTRHFCheckbox, {}) : /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsx(FormControlLabel, {
+    control: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field,
+        fieldState: {
+          error
+        }
+      }) => {
+        if (isSkeleton) {
+          return /* @__PURE__ */ jsx(WrapperSKTRHFCheckbox, {
+            children: /* @__PURE__ */ jsx(SKTCheckSkeleton, {
+              variant: "rectangular"
+            })
+          });
+        }
+        return /* @__PURE__ */ jsxs(Fragment, {
           children: [/* @__PURE__ */ jsx(Checkbox, {
             size: sizeCheck,
             ...field,
             checked: field.value
-          }), console.log("Error1", error?.message), error?.message && /* @__PURE__ */ jsx(ErrorLabel, {
+          }), error?.message && /* @__PURE__ */ jsx(ErrorLabel, {
             children: error?.message + ""
           })]
-        })
-      }),
-      ...other
-    }
-  );
+        });
+      }
+    }),
+    ...other
+  });
 }
 export { RHFCheckbox as R };

package/components/hook-form/RHFCheckbox/styles.d.ts

@@ -1,2 +1,13 @@
 /// <reference types="react" />
-export declare const WrapperSKTRHFCheckbox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperSKTRHFCheckbox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTCheckSkeleton: import("@emotion/styled").StyledComponent<{
+    animation?: false | "wave" | "pulse" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SkeletonClasses> | undefined;
+    height?: string | number | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "rectangular" | "rounded" | "circular" | undefined;
+    width?: string | number | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "width" | "height" | "animation" | "children" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/hook-form/RHFPeriod/dictionary.d.ts

@@ -0,0 +1,3 @@
+import { Dictionary } from '@m4l/core';
+export declare function getPeriodComponetsDictionary(): string[];
+export declare const defaultPeriodDictionary: Dictionary;

package/components/hook-form/RHFPeriod/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RHFPeriodProps } from './types';
+export declare const RHFPeriod: (props: RHFPeriodProps) => JSX.Element;