@m4l/components 0.1.13 → 0.1.15

package/components/animate/variants/fade.js

@@ -0,0 +1,61 @@
+import { v as varTranEnter, a as varTranExit } from "./transition.js";
+const varFade = (props) => {
+  const distance = props?.distance || 120;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+  return {
+    in: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1, transition: varTranEnter },
+      exit: { opacity: 0, transition: varTranExit }
+    },
+    inUp: {
+      initial: { y: distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inDown: {
+      initial: { y: -distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inLeft: {
+      initial: { x: -distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inRight: {
+      initial: { x: distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    out: {
+      initial: { opacity: 1 },
+      animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outUp: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outDown: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outLeft: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outRight: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    }
+  };
+};
+export { varFade as v };

package/components/animate/variants/transition.js

@@ -0,0 +1,16 @@
+const varTranHover = (props) => {
+  const duration = props?.duration || 0.32;
+  const ease = props?.ease || [0.43, 0.13, 0.23, 0.96];
+  return { duration, ease };
+};
+const varTranEnter = (props) => {
+  const duration = props?.durationIn || 0.64;
+  const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96];
+  return { duration, ease };
+};
+const varTranExit = (props) => {
+  const duration = props?.durationOut || 0.48;
+  const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96];
+  return { duration, ease };
+};
+export { varTranExit as a, varTranHover as b, varTranEnter as v };

package/components/formatters/BooleanFormatter/index.js

@@ -0,0 +1,52 @@
+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 = 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: final_value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
+    });
+  }
+  if (presentationType === "string_true_false") {
+    return /* @__PURE__ */ jsx(Component, {
+      children: final_value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
+    });
+  }
+  return /* @__PURE__ */ jsx(Component, {
+    children: /* @__PURE__ */ jsx(Icon, {
+      src: final_value ? srcCheckTrue : srcCheckFalse,
+      bgColor: "action.disabled"
+    })
+  });
+}
+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/DateFormatter/index.js

@@ -0,0 +1,66 @@
+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 = React.Fragment
+  } = props;
+  const {
+    dfnsFormat
+  } = useEnvironment();
+  const {
+    formatDate
+  } = useHostTools();
+  let finalFormat = format || dfnsFormat.datetime_format;
+  let result;
+  let resultDate;
+  if (value === void 0 || value === null) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: "-"
+    });
+  }
+  switch (presentationType) {
+    case "datetime":
+      finalFormat = format || dfnsFormat.datetime_format;
+      break;
+    case "date":
+      finalFormat = format || dfnsFormat.date_format;
+      break;
+    case "time":
+      finalFormat = format || dfnsFormat.time_format;
+      break;
+  }
+  try {
+    if (typeof value === "number" || typeof value === "string") {
+      resultDate = new Date(value);
+    } else {
+      resultDate = value;
+    }
+    result = formatDate(resultDate, finalFormat);
+  } catch (e) {
+    result = "err_typing";
+  }
+  return /* @__PURE__ */ jsx(Component, {
+    children: result
+  });
+}
+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/index.js

@@ -0,0 +1,112 @@
+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"];
+}
+const defaultFormattersDictionary = {
+  pager: {
+    boolean_yes: "Yes",
+    boolean_no: "No",
+    boolean_true: "True",
+    boolean_false: "False"
+  }
+};
+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) => {
+    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

@@ -0,0 +1,61 @@
+import { useEffect } from "react";
+import { useForm, FormProvider as FormProvider$1 } from "react-hook-form";
+import { o } from "../../../node_modules.js";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const WrapperFormProvider = styled("form")(({
+  theme
+}) => ({
+  display: "flex",
+  paddingTop: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+  flexDirection: "column",
+  width: "100%",
+  overflow: "scroll"
+}));
+function FormProvider(props) {
+  const {
+    children,
+    onSubmit,
+    values,
+    validationSchema,
+    statusLoad = "ready"
+  } = props;
+  const methods = useForm({
+    resolver: o(validationSchema),
+    defaultValues: values
+  });
+  useEffect(() => {
+    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;
+    }
+  }, [methods, statusLoad, values]);
+  useEffect(() => {
+    if (statusLoad === "ready") {
+      console.log("useEffect FormProvider Ready", statusLoad);
+      methods.setValue("statusLoad", "ready", {
+        shouldValidate: false,
+        shouldDirty: false,
+        shouldTouch: false
+      });
+    }
+  }, [statusLoad]);
+  return /* @__PURE__ */ jsx(FormProvider$1, {
+    ...methods,
+    children: /* @__PURE__ */ jsx(WrapperFormProvider, {
+      id: "formProvider",
+      onSubmit: methods.handleSubmit(onSubmit),
+      children
+    })
+  });
+}
+export { FormProvider as F };

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

@@ -0,0 +1,144 @@
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, Autocomplete, TextField } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SKTRHFAutocompleteWrapper = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingRight: `${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    justifyContent: "flex-start"
+  }
+}));
+const SKTInputText = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  "& .MuiAutocomplete-root": {
+    width: "100%"
+  }
+}));
+function RHFAutocomplete(props) {
+  const {
+    name,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonProps = {},
+    options,
+    disabled,
+    ...other
+  } = props;
+  const {
+    width = 100,
+    height = "18px"
+  } = skeletonProps;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control,
+    getValues
+  } = useFormContext();
+  const initialValue = getValues(name);
+  const getOptionLabelLocal = (option) => {
+    if (option === void 0 || option === null) {
+      return "";
+    }
+    return getOptionLabel(option);
+  };
+  const isOptionEqualToValueLocal = (option, value) => {
+    if (value === void 0 || value === null || option === null) {
+      return false;
+    }
+    return isOptionEqualToValue(option, value);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTRHFAutocompleteWrapper, {
+      children: /* @__PURE__ */ jsxs(SKTInputText, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width,
+          height
+        }, "sk1"), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 16,
+          height: 16
+        }, "sk2")]
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          options,
+          getOptionLabel: getOptionLabelLocal,
+          defaultValue: initialValue,
+          isOptionEqualToValue: isOptionEqualToValueLocal,
+          disableClearable: true,
+          value: value || null,
+          onChange: (_e, val) => {
+            onChange(val);
+          },
+          loadingText: "",
+          disabled,
+          noOptionsText: getLabel("rhf_autocomplete.component_no_options"),
+          renderInput: (params) => {
+            return /* @__PURE__ */ jsx(TextField, {
+              ...params,
+              label,
+              fullWidth: true,
+              SelectProps: {
+                native: true
+              },
+              InputProps: {
+                ...params.InputProps
+              },
+              autoComplete: "off",
+              error: !!error,
+              helperText: error?.message,
+              ...other
+            }, `tx_async_${params.id}`);
+          }
+        }
+      );
+    }
+  });
+}
+export { RHFAutocomplete as R };

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

@@ -0,0 +1,191 @@
+import { useState, useEffect, Fragment } from "react";
+import { useModuleDictionary, useModuleSkeleton, useNetwork, getPropertyByString } from "@m4l/core";
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, Autocomplete, TextField, CircularProgress } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SKTRHFAutocompleteAsyncWrapper = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingRight: `${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    justifyContent: "flex-start"
+  }
+}));
+const SKTInputText = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+function RHFAutocompleteAsync(props) {
+  const {
+    name,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    endPoint,
+    timeout = 5e3,
+    parms,
+    resultField = "data",
+    skeletonProps = {},
+    isRemote = true,
+    disabled,
+    ...other
+  } = props;
+  const {
+    width = 100,
+    height = "18px"
+  } = skeletonProps;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control,
+    getValues,
+    setValue
+  } = useFormContext();
+  const {
+    networkOperation
+  } = useNetwork();
+  const initialValue = getValues(name);
+  const [options, setOptions] = useState(initialValue === null ? [] : [initialValue]);
+  const [open, setOpen] = useState(false);
+  const [optionsLoaded, setOptionsLoaded] = useState(false);
+  const loading = open && !optionsLoaded && !!endPoint && !isSkeleton;
+  useEffect(() => {
+    if (optionsLoaded) {
+      setOptionsLoaded(false);
+      setOptions([]);
+      setValue(name, null);
+    }
+  }, [parms, endPoint]);
+  useEffect(() => {
+    if (!optionsLoaded && initialValue) {
+      setOptions([initialValue]);
+    }
+  }, [initialValue, optionsLoaded]);
+  const getOptionLabelLocal = (option) => {
+    if (option === void 0 || option === null) {
+      return "";
+    }
+    return getOptionLabel(option);
+  };
+  const isOptionEqualToValueLocal = (option, value) => {
+    if (value === void 0 || value === null || option === null) {
+      return false;
+    }
+    return isOptionEqualToValue(option, value);
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (!loading) {
+      return void 0;
+    }
+    networkOperation({
+      method: "GET",
+      endPoint,
+      timeout,
+      parms,
+      isRemote
+    }).then((response) => {
+      if (mounted) {
+        setOptions(getPropertyByString(response, resultField));
+        setOptionsLoaded(true);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [loading]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTRHFAutocompleteAsyncWrapper, {
+      children: /* @__PURE__ */ jsxs(SKTInputText, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width,
+          height
+        }, "sk1"), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 16,
+          height: 16
+        }, "sk2")]
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsx(Autocomplete, {
+      options,
+      getOptionLabel: getOptionLabelLocal,
+      defaultValue: initialValue,
+      isOptionEqualToValue: isOptionEqualToValueLocal,
+      disableClearable: true,
+      value: value || null,
+      onOpen: () => {
+        setOpen(true);
+      },
+      onClose: () => {
+        setOpen(false);
+      },
+      onChange: (_e, val) => {
+        onChange(val);
+      },
+      disabled,
+      loading,
+      loadingText: "",
+      noOptionsText: getLabel("rhf_autocomplete.component_no_options"),
+      renderInput: (params) => {
+        return /* @__PURE__ */ jsx(TextField, {
+          ...params,
+          label,
+          fullWidth: true,
+          SelectProps: {
+            native: true
+          },
+          InputProps: {
+            ...params.InputProps,
+            endAdornment: /* @__PURE__ */ jsxs(Fragment, {
+              children: [loading ? /* @__PURE__ */ jsx(CircularProgress, {
+                color: "primary",
+                size: 20
+              }, `cp_async${params.id}`) : null, params.InputProps.endAdornment]
+            }, `fr_async_${params.id}`)
+          },
+          autoComplete: "off",
+          error: !!error,
+          helperText: error?.message,
+          ...other
+        }, `tx_async_${params.id}`);
+      }
+    }, "at_async")
+  });
+}
+export { RHFAutocompleteAsync as R };