@m4l/components 0.1.11 → 0.1.13

package/components/PropertyValue/index.js

@@ -1,142 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { Skeleton } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useModuleSkeleton } from "@m4l/core";
-const WrapperPropertyValue = styled("div", {
-  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
-})(({
-  propertyWidth,
-  isForm,
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "1fr",
-  alignItems: "flex-start",
-  width: "100%",
-  padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-  ":hover": {
-    backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
-  },
-  borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
-  flexDirection: "column",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
-    gap: theme.spacing(2),
-    alignItems: "center"
-  }
-}));
-const Property = styled("div", {
-  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
-})(({
-  propertyWidth,
-  isForm,
-  theme
-}) => ({
-  width: "100%",
-  minWidth: "100%",
-  ...theme.typography.subtitle2,
-  color: theme.palette.text.primary,
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  position: "relative",
-  [theme.breakpoints.up("sm")]: {
-    borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
-    paddingRight: theme.spacing(2),
-    textAlign: "right",
-    width: propertyWidth || "150px",
-    minWidth: propertyWidth || "150px",
-    justifyContent: "flex-end"
-  },
-  overflow: "hidden",
-  overflowWrap: "break-word"
-}));
-const Value = styled("div", {
-  shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
-})(({
-  valueWidth,
-  valueHeight,
-  theme
-}) => ({
-  flexGrow: "1",
-  ...theme.typography.body2,
-  color: theme.palette.text.secondary,
-  position: "relative",
-  padding: "1px",
-  maxWidth: `${valueWidth}%`,
-  width: `${valueWidth}%`,
-  height: valueHeight,
-  marginTop: theme.spacing(1),
-  [theme.breakpoints.up("sm")]: {
-    marginTop: "0px"
-  },
-  overflow: "hidden",
-  overflowWrap: "break-word"
-}));
-const SKTWrapperProperty = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "flex-end"
-}));
-function SKTProperty() {
-  return /* @__PURE__ */ jsx(SKTWrapperProperty, {
-    children: /* @__PURE__ */ jsx(Skeleton, {
-      variant: "text",
-      width: 68,
-      height: 14
-    })
-  });
-}
-function PropertyValue(props) {
-  const {
-    property,
-    value,
-    propertyWidth = 200,
-    valueHeight = "auto",
-    valueWidth = "100",
-    isForm
-  } = props;
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const getValueW = () => {
-    if (valueWidth === "75" && isDesktop) {
-      return "75";
-    } else if (valueWidth === "75" && !isDesktop) {
-      return "100";
-    }
-    if (valueWidth === "50" && isDesktop) {
-      return "50";
-    } else if (valueWidth === "50" && !isDesktop) {
-      return "100";
-    }
-    if (valueWidth === "25" && isDesktop || valueWidth === "12.5" && isDesktop) {
-      return `${valueWidth}`;
-    }
-    if (valueWidth === "25" && !isDesktop) {
-      return "50";
-    }
-    if (valueWidth === "12.5" && !isDesktop) {
-      return "25";
-    }
-    return "100";
-  };
-  const valueW = getValueW();
-  return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
-    id: "WrapperPropertyValue",
-    isForm,
-    propertyWidth,
-    children: [/* @__PURE__ */ jsx(Property, {
-      id: "Property",
-      isForm,
-      propertyWidth,
-      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
-    }), /* @__PURE__ */ jsx(Value, {
-      id: "Value",
-      valueWidth: valueW,
-      valueHeight,
-      children: value
-    })]
-  });
-}
-export { PropertyValue as P };

package/components/ScrollBar/index.js

@@ -1,52 +0,0 @@
-import SimpleBarReact from "simplebar-react";
-import { styled, alpha } from "@mui/material/styles";
-import { Box } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-const RootStyle = styled("div")(() => ({
-  flexGrow: 1,
-  height: "100%",
-  overflow: "hidden"
-}));
-const SimpleBarStyle = styled(SimpleBarReact)(({
-  theme
-}) => ({
-  maxHeight: "100%",
-  "& .simplebar-scrollbar": {
-    "&:before": {
-      backgroundColor: alpha(theme.palette.grey[600], 0.48)
-    },
-    "&.simplebar-visible:before": {
-      opacity: 1
-    }
-  },
-  "& .simplebar-track.simplebar-vertical": {
-    width: 10
-  },
-  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
-    height: 6
-  },
-  "& .simplebar-mask": {
-    zIndex: "inherit"
-  }
-}));
-function ScrollBar({
-  children
-}) {
-  const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
-  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(Box, {
-      sx: {
-        overflowX: "auto"
-      },
-      children
-    });
-  }
-  return /* @__PURE__ */ jsx(RootStyle, {
-    children: /* @__PURE__ */ jsx(SimpleBarStyle, {
-      autoHide: false,
-      children
-    })
-  });
-}
-export { ScrollBar as S };

package/components/ScrollToTop/index.js

@@ -1,10 +0,0 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-function ScrollToTop() {
-  const { pathname } = useLocation();
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
-  return null;
-}
-export { ScrollToTop as S };

package/components/animate/MotionContainer/index.js

@@ -1,31 +0,0 @@
-import { m } from "framer-motion";
-import { Box } from "@mui/material";
-import { v as varContainer } from "../variants/container.js";
-import { jsx } from "react/jsx-runtime";
-function MotionContainer({
-  animate,
-  action = false,
-  children,
-  ...other
-}) {
-  if (action) {
-    return /* @__PURE__ */ jsx(Box, {
-      component: m.div,
-      initial: false,
-      animate: animate ? "animate" : "exit",
-      variants: varContainer(),
-      ...other,
-      children
-    });
-  }
-  return /* @__PURE__ */ jsx(Box, {
-    component: m.div,
-    initial: "initial",
-    animate: "animate",
-    exit: "exit",
-    variants: varContainer(),
-    ...other,
-    children
-  });
-}
-export { MotionContainer as M };

package/components/animate/MotionLazyContainer/index.js

@@ -1,13 +0,0 @@
-import { LazyMotion } from "framer-motion";
-import { jsx } from "react/jsx-runtime";
-const loadFeatures = () => import("../features.js").then((res) => res.default);
-function MotionLazyContainer({
-  children
-}) {
-  return /* @__PURE__ */ jsx(LazyMotion, {
-    strict: true,
-    features: loadFeatures,
-    children
-  });
-}
-export { MotionLazyContainer as M };

package/components/animate/features.js

@@ -1,2 +0,0 @@
-import { domMax } from "framer-motion";
-export { domMax as default } from "framer-motion";

package/components/animate/variants/container.js

@@ -1,20 +0,0 @@
-const varContainer = (props) => {
-  const staggerIn = props?.staggerIn || 0.05;
-  const delayIn = props?.staggerIn || 0.05;
-  const staggerOut = props?.staggerIn || 0.05;
-  return {
-    animate: {
-      transition: {
-        staggerChildren: staggerIn,
-        delayChildren: delayIn
-      }
-    },
-    exit: {
-      transition: {
-        staggerChildren: staggerOut,
-        staggerDirection: -1
-      }
-    }
-  };
-};
-export { varContainer as v };

package/components/animate/variants/fade.js

@@ -1,61 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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 };