@m4l/components 9.1.115 → 9.1.117

package/@types/types.d.ts

@@ -133,6 +133,7 @@ import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-
 import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
 import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
 import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
+import { CourseFormatterOwnerState, CourseFormatterSlotsType } from '../components/formatters/CourseFormatter/types';
 import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/NoItemSelected/types';
 import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
 
@@ -201,6 +202,7 @@ declare module '@mui/material/styles' {
     M4LStack: StackSlotsType;
     M4LDateTimePicker: DateTimePickerSlotsType;
     M4LDivider: DividerSlotsType;
+    M4LCourseFormatter: CourseFormatterSlotsType;
     M4LNoItemSelected: NoItemSelectedSlotsType;
     M4LActionFormIntro: ActionFormIntroSlotsType;
   }
@@ -267,6 +269,7 @@ declare module '@mui/material/styles' {
     M4LStack: Partial<StackOwnerState>;
     M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
     M4LDivider: Partial<DividerOwnerState>;
+    M4LCourseFormatter: Partial<CourseFormatterOwnerState>;
     M4LNoItemSelected: Partial<NoItemSelectedOwnerState>;
     M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
   }
@@ -586,6 +589,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];
       variants?: ComponentsVariants['M4LDivider'];
     };
-   }
-
-}
+    M4LCourseFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LCourseFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCourseFormatter'];
+      variants?: ComponentsVariants['M4LCourseFormatter'];
+    };
+  }
+ }

package/components/PaperForm/PaperForm.js

@@ -4,6 +4,7 @@ import { P as PaperFormRootStyled, C as ContentStyled } from "./slots/PaperFormS
 import { useRef } from "react";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { P as PAPER_FORM_KEY } from "./constants.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { P as PropertyValue } from "../PropertyValue/PropertyValue.js";
 const isPropertyValue = (child) => typeof child === "object" && child !== null && "property" in child && "value" in child;
 const renderChildren = (children) => {
@@ -25,14 +26,22 @@ function PaperForm(props) {
     isForm = false,
     variant = "standard"
   } = props;
+  const { currentSize } = useComponentSize(size);
   const paperFormRef = useRef(null);
   const rootClass = getComponentSlotRoot(PAPER_FORM_KEY);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const ownerState = {
+    size: adjustedSize,
+    color,
+    isForm,
+    paperFormVariant: variant
+  };
   return /* @__PURE__ */ jsxs(
     PaperFormRootStyled,
     {
       className: rootClass,
       ref: paperFormRef,
-      ownerState: { isForm, color, variant },
+      ownerState: { ...ownerState },
       ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {},
       children: [
         /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size }),

package/components/PaperForm/styles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const paperFormStyles = {
   /**
    *************************************************************
@@ -11,8 +12,7 @@ const paperFormStyles = {
     border: `${theme.size.borderStroke.container}`,
     borderColor: theme.vars.palette.border.default,
     width: "100%",
-    height: "auto",
-    overflow: "hidden"
+    height: "auto"
   }),
   /**
    * ************************************************************
@@ -26,10 +26,15 @@ const paperFormStyles = {
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1,
     overflow: "hidden",
-    height: "auto",
-    padding: `${theme.vars.size.baseSpacings.sp2}`,
+    padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp2}`,
     borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
-    background: theme.vars.palette[ownerState.color ?? "default"].hoverOpacity
+    background: theme.vars.palette[ownerState.color ?? "default"].hoverOpacity,
+    alignSelf: "stretch",
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "container"
+    )
   }),
   /**
    * ************************************************************
@@ -43,8 +48,7 @@ const paperFormStyles = {
     fontSize: theme.typography.body,
     variants: [],
     display: "inline-flex",
-    alignItems: "center",
-    marginTop: "1px"
+    alignItems: "center"
   }),
   /**
    * ************************************************************

package/components/PaperForm/types.d.ts

@@ -25,7 +25,7 @@ interface CommonsProps {
     paperFormVariant?: PaperFormProps['variant'];
 }
 export type HeaderProps = Omit<PaperFormProps, 'children' | 'isForm' | 'variant'> & CommonsProps;
-export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color'> & CommonsProps;
+export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color' | 'size'> & CommonsProps;
 /**
  * ***********************************
  * Slots para los estilos utilizados

package/components/formatters/CourseFormatter/CourseFormatter.d.ts

@@ -1,5 +1,14 @@
 import { CourseFormatterProps } from './types';
 /**
- * TODO: Documentar
+ * "CourseFormatter" que se encarga de visualizar el Curse Over Ground (Sentido manecilla del reloj, 0grados = Norte )
+ *  a (Sentido contrario manecillas del reloj 0grados = East).
+ * Curso: 0  => 90 - Norte
+ * Curso: 90 => 0  - Este
+ * Curso: 180 => 270 - Sur
+ * Curso: 270 => 180 - Oeste
+ *
+ */
+/**
+ * CourseFormatter Component
  */
 export declare const CourseFormatter: (props: CourseFormatterProps) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/CourseFormatter/CourseFormatter.js

@@ -1,32 +1,32 @@
 import { jsx } from "react/jsx-runtime";
-import { useModuleDictionary } from "@m4l/core";
 import { C as CFRootStyled } from "./slots/CourseFormatterSlots.js";
-import { C as CF_DICCTIONARY } from "./dictionary.js";
+import { g as getCardinalDirection } from "./helper.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { C as CourseFormatterSlots } from "./slots/CourseFormatterEnum.js";
+import { C as COMPONET_KEY_COMPONENT, D as DEFAULT_GAP_ANGLE } from "./constants.js";
 import { c as courseToCartesianAngle } from "../../maps/utils/courseToCartesianAngle.js";
-const DEFAULT_GAP_ANGLE = 5;
 const CourseFormatter = (props) => {
-  const { course, gapAngle: gap = DEFAULT_GAP_ANGLE } = props;
-  const { getLabel } = useModuleDictionary();
+  const {
+    course,
+    gapAngle: gap = DEFAULT_GAP_ANGLE,
+    size = "medium",
+    dataTestId
+  } = props;
+  const ownerState = {
+    size,
+    variant: "standard"
+  };
   const angle = courseToCartesianAngle(course);
-  let ret;
-  if (angle >= 0 + gap && angle < 90 - gap) {
-    ret = getLabel(CF_DICCTIONARY.LABEL_NORTH_EAST);
-  } else if (angle >= 90 - gap && angle < 90 + gap) {
-    ret = getLabel(CF_DICCTIONARY.LABEL_NORTH);
-  } else if (angle >= 90 + gap && angle < 180 - gap) {
-    ret = getLabel(CF_DICCTIONARY.LABEL_NORTH_WEST);
-  } else if (angle >= 180 - gap && angle < 180 + gap) {
-    ret = getLabel(CF_DICCTIONARY.LABEL_WEST);
-  } else if (angle >= 180 + gap && angle < 270 - gap) {
-    ret = getLabel(CF_DICCTIONARY.LABEL_SOUTH_WEST);
-  } else if (angle >= 270 - gap && angle < 270 + gap) {
-    ret = getLabel(CF_DICCTIONARY.LABEL_SOUTH);
-  } else if (angle >= 270 + gap && angle < 360 - gap) {
-    ret = getLabel(CF_DICCTIONARY.LABEL_SOUTH_EAST);
-  } else {
-    ret = getLabel(CF_DICCTIONARY.LABEL_EAST);
-  }
-  return /* @__PURE__ */ jsx(CFRootStyled, { children: ret });
+  const ret = getCardinalDirection(angle, gap);
+  return /* @__PURE__ */ jsx(
+    CFRootStyled,
+    {
+      ownerState: { ...ownerState },
+      ...getPropDataTestId(COMPONET_KEY_COMPONENT, CourseFormatterSlots.root, dataTestId),
+      skeletonWidth: "10%",
+      children: ret
+    }
+  );
 };
 export {
   CourseFormatter as C

package/components/formatters/CourseFormatter/CourseFormatter.styles.js

@@ -1,5 +1,22 @@
+import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
 const courseFormatterStyles = {
-  root: () => ({})
+  /** Styles applied to the root element. */
+  root: ({ theme, ownerState }) => ({
+    "&.MuiTypography-root": {
+      "&.M4lclassCssSpecificity": {
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState.size || "medium",
+          "body"
+        ),
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState.size || "small",
+          "body"
+        )
+      }
+    }
+  })
 };
 export {
   courseFormatterStyles as c

package/components/formatters/CourseFormatter/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const COMPONENT_TEST_ID = "M4LCourseFormatter";
 export declare const COMPONET_KEY_COMPONENT = "M4LCourseFormatter";
+export declare const DEFAULT_GAP_ANGLE = 5;

package/components/formatters/CourseFormatter/constants.js

@@ -1,4 +1,6 @@
 const COMPONET_KEY_COMPONENT = "M4LCourseFormatter";
+const DEFAULT_GAP_ANGLE = 5;
 export {
-  COMPONET_KEY_COMPONENT as C
+  COMPONET_KEY_COMPONENT as C,
+  DEFAULT_GAP_ANGLE as D
 };

package/components/formatters/CourseFormatter/dictionary.d.ts

@@ -1,12 +1,12 @@
-export declare const CF_DICTIONARY_ID = "course_formmater";
+export declare const CF_DICTIONARY_ID = "course_formatter";
 export declare function getCourseFormatterComponentsDictionary(): string[];
 export declare const CF_DICCTIONARY: {
-    readonly LABEL_NORTH: "course_formmater.label_north";
-    readonly LABEL_SOUTH: "course_formmater.label_south";
-    readonly LABEL_EAST: "course_formmater.label_east";
-    readonly LABEL_WEST: "course_formmater.label_west";
-    readonly LABEL_NORTH_EAST: "course_formmater.label_north_east";
-    readonly LABEL_NORTH_WEST: "course_formmater.label_north_west";
-    readonly LABEL_SOUTH_EAST: "course_formmater.label_south_east";
-    readonly LABEL_SOUTH_WEST: "course_formmater.label_south_west";
+    readonly LABEL_NORTH: "course_formatter.label_north";
+    readonly LABEL_SOUTH: "course_formatter.label_south";
+    readonly LABEL_EAST: "course_formatter.label_east";
+    readonly LABEL_WEST: "course_formatter.label_west";
+    readonly LABEL_NORTH_EAST: "course_formatter.label_north_east";
+    readonly LABEL_NORTH_WEST: "course_formatter.label_north_west";
+    readonly LABEL_SOUTH_EAST: "course_formatter.label_south_east";
+    readonly LABEL_SOUTH_WEST: "course_formatter.label_south_west";
 };

package/components/formatters/CourseFormatter/dictionary.js

@@ -1,4 +1,4 @@
-const CF_DICTIONARY_ID = "course_formmater";
+const CF_DICTIONARY_ID = "course_formatter";
 function getCourseFormatterComponentsDictionary() {
   return [CF_DICTIONARY_ID];
 }

package/components/formatters/CourseFormatter/helper.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Helper function to get the cardinal direction from an angle.
+ */
+export declare const getCardinalDirection: (angle: number, gap?: number) => string;

package/components/formatters/CourseFormatter/helper.js

@@ -0,0 +1,28 @@
+import { useModuleDictionary } from "@m4l/core";
+import { C as CF_DICCTIONARY } from "./dictionary.js";
+import { D as DEFAULT_GAP_ANGLE } from "./constants.js";
+const getCardinalDirection = (angle, gap = DEFAULT_GAP_ANGLE) => {
+  const { getLabel } = useModuleDictionary();
+  let ret;
+  if (angle >= 0 + gap && angle < 90 - gap) {
+    ret = getLabel(CF_DICCTIONARY.LABEL_NORTH_EAST);
+  } else if (angle >= 90 - gap && angle < 90 + gap) {
+    ret = getLabel(CF_DICCTIONARY.LABEL_NORTH);
+  } else if (angle >= 90 + gap && angle < 180 - gap) {
+    ret = getLabel(CF_DICCTIONARY.LABEL_NORTH_WEST);
+  } else if (angle >= 180 - gap && angle < 180 + gap) {
+    ret = getLabel(CF_DICCTIONARY.LABEL_WEST);
+  } else if (angle >= 180 + gap && angle < 270 - gap) {
+    ret = getLabel(CF_DICCTIONARY.LABEL_SOUTH_WEST);
+  } else if (angle >= 270 - gap && angle < 270 + gap) {
+    ret = getLabel(CF_DICCTIONARY.LABEL_SOUTH);
+  } else if (angle >= 270 + gap && angle < 360 - gap) {
+    ret = getLabel(CF_DICCTIONARY.LABEL_SOUTH_EAST);
+  } else {
+    ret = getLabel(CF_DICCTIONARY.LABEL_EAST);
+  }
+  return ret;
+};
+export {
+  getCardinalDirection as g
+};

package/components/formatters/CourseFormatter/slots/CourseFormatterSlots.d.ts

@@ -1 +1,3 @@
-export declare const CFRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const CFRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').CourseFormatterOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').CourseFormatterOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/formatters/CourseFormatter/slots/CourseFormatterSlots.js

@@ -1,8 +1,9 @@
 import { styled } from "@mui/material/styles";
 import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
 import { c as courseFormatterStyles } from "../CourseFormatter.styles.js";
-import { C as CourseFormatterSlots } from "./slots.js";
-const CFRootStyled = styled("span", {
+import { C as CourseFormatterSlots } from "./CourseFormatterEnum.js";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+const CFRootStyled = styled(Typography, {
   name: COMPONET_KEY_COMPONENT,
   slot: CourseFormatterSlots.root
 })(courseFormatterStyles?.root);

package/components/formatters/CourseFormatter/test/CourserFormatter.test.d.ts

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

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

@@ -1,18 +1,24 @@
 import { Theme } from '@mui/material/styles';
 import { COMPONET_KEY_COMPONENT } from './constants';
-import { CourseFormatterSlots } from './slots/slots';
+import { CourseFormatterSlots } from './slots/CourseFormatterEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Sizes } from '@m4l/styles';
 export type CourseFormatterProps = {
-    /**
-     * "course" curso sobre tierra donde el norte es 0 grados, y el sur es 180 grados.
-     */
+    /** "course" curso sobre tierra donde el norte es 0 grados, y el sur es 180 grados en sentido horario */
     course: number;
-    /**
-     * "gapAngle" es el angulo que permite definir un estado Norte,Este,Oeste,etc no necesariamente
-     * por que el valor es exacto, si no por que se encuentra en un rango de valores, dado por el gap.
-     */
+    /** "gapAngle" es el angulo que permite definir un estado Norte,Este,Oeste,etc no necesariamente por que el valor es exacto, si no por que se encuentra en un rango de valores, dado por el gap. */
     gapAngle?: number;
+    /** Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'. */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /** Define el tamaño del skeleton. */
+    skeletonWidth?: string | number;
+    /** data-testid para pruebas unitarias. */
+    dataTestId?: string;
 };
 export type CourseFormatterSlotsType = keyof typeof CourseFormatterSlots;
-export type CourseFormatterOwnerState = {};
-export type CourseFormatterStyles = Partial<OverridesStyleRules<CourseFormatterSlotsType, typeof COMPONET_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type CourseFormatterOwnerState = {
+    variant: 'standard';
+    color?: 'default';
+    size?: Extract<Sizes, 'small' | 'medium'>;
+};
+export type CourseFormatterStyles = OverridesStyleRules<CourseFormatterSlotsType, typeof COMPONET_KEY_COMPONENT, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.115",
+  "version": "9.1.117",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/storybook/components/formatters/CourseFormatter/CourseFormatter.stories.d.ts

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/react';
+import { CourseFormatter } from '../../../../src/components/formatters/CourseFormatter/CourseFormatter';
+import { StoryCourseFormatterType } from './types';
+declare const meta: Meta<typeof CourseFormatter>;
+export default meta;
+/**
+ * Norte: curso entre 95° -  85° -> 0°
+ */
+export declare const Norte: StoryCourseFormatterType;
+/**
+ * Oriente: curso entre 85° - 95° -> 90°
+ */
+export declare const Oriente: StoryCourseFormatterType;
+/**
+ * Sur: curso entre 175° - 185° -> 180°
+ */
+export declare const Sur: StoryCourseFormatterType;
+/**
+ * Occidente: curso entre 265° - 275° -> 270°
+ */
+export declare const Occidente: StoryCourseFormatterType;
+/**
+ * Skeleton del CourseFormatter
+ */
+export declare const Esqueleto: StoryCourseFormatterType;

package/{components/formatters/CourseFormatter/stories → storybook/components/formatters/CourseFormatter}/types.d.ts

@@ -1,3 +1,3 @@
 import { StoryObj } from '@storybook/react';
-import { CourseFormatter } from '../CourseFormatter';
+import { CourseFormatter } from '../../../../src/components/formatters/CourseFormatter/CourseFormatter';
 export type StoryCourseFormatterType = StoryObj<typeof CourseFormatter>;

package/components/formatters/CourseFormatter/stories/basic.stories.d.ts

@@ -1,45 +0,0 @@
-import { Meta } from '@storybook/react';
-import { CourseFormatter } from '../CourseFormatter';
-import { StoryCourseFormatterType } from './types';
-declare const meta: Meta<typeof CourseFormatter>;
-export default meta;
-/**
- * CourseFormatter , con Course: 3 grados -> 87 Grados cartesianos, gapAngle: 5grados
- *
- */
-export declare const BaseNorth: StoryCourseFormatterType;
-/**
- * CourseFormatter , con Course 25 grados -> 65 Grados cartesianos, gapAngle: 5grados
- *
- */
-export declare const BaseNorthEast: StoryCourseFormatterType;
-/**
- * CourseFormatter , con Course 87 grados -> 3 Grados cartesianos, gapAngle: 5grados
- *
- */
-export declare const BaseEast: StoryCourseFormatterType;
-/**
- * CourseFormatter , con Course 96 grados -> 65 Grados cartesianos, gapAngle: 5grados
- *
- */
-export declare const BaseSouthEast: StoryCourseFormatterType;
-/**
- * CourseFormatter , con Course 178 grados -> -78 Grados cartesianos, gapAngle: 5grados
- *
- */
-export declare const BaseSouth: StoryCourseFormatterType;
-/**
- * CourseFormatter , con Course 200 grados -> 250 Grados cartesianos, gapAngle: 5grados
- *
- */
-export declare const BaseSouthWest: StoryCourseFormatterType;
-/**
- * CourseFormatter , con Course 271 grados -> 179 Grados cartesianos, gapAngle: 5grados
- *
- */
-export declare const BaseWest: StoryCourseFormatterType;
-/**
- * CourseFormatter , con Course 325 grados -> 125 Grados cartesianos, gapAngle: 5grados
- *
- */
-export declare const BaseNorthWest: StoryCourseFormatterType;

package/components/formatters/CourseFormatter/stories/subcomponents/WithCFProvider.d.ts

@@ -1,5 +0,0 @@
-import { StoryContext, StoryFn } from '@storybook/react';
-/**
- * TODO: Documentar
- */
-export declare const WithCFProvider: (MyStory: StoryFn, { args }: StoryContext) => import("react/jsx-runtime").JSX.Element;