@m4l/components 9.2.23 → 9.2.25

package/components/PrintingSystem/subcomponents/PropertyValueNode/index.d.ts

@@ -1,5 +1,8 @@
 import { PropertyValueNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente PropertyValueNode
+ *
+ * Este componente se utiliza para renderizar el valor de una propiedad.
+ * @param {PropertyValueNodeProps} props - Propiedades del componente.
  */
 export declare const PropertyValueNode: (props: PropertyValueNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/PropertyValueNode/index.js

@@ -1,12 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
 import { g as getSize } from "../../utils/getSize/index.js";
-import clsx from "clsx";
+import { j as PropertyValueNodeRootStyled, k as PropertyValueNodeTitleStyled, l as PropertyValueNodeContentStyled } from "../../slots/PrintingSystemSlots.js";
 const PropertyValueNode = (props) => {
   const {
-    style = {},
-    className = "",
     property,
     children,
     direction,
@@ -15,21 +12,14 @@ const PropertyValueNode = (props) => {
   const { unitSize, mainColor, sourceData } = useBase();
   const propertyFormated = evaluateWithContext(sourceData, property);
   return /* @__PURE__ */ jsxs(
-    "div",
+    PropertyValueNodeRootStyled,
     {
-      className: clsx(
-        classes.propertyValueNodeRoot,
-        direction === "column" ? classes.propertyValueNodeHorizontal : classes.propertyValueNodeVertical,
-        className
-      ),
-      style: {
-        ...style
-      },
+      ownerState: { direction },
       children: [
         /* @__PURE__ */ jsx(
-          "div",
+          PropertyValueNodeTitleStyled,
           {
-            className: classes.propertyValueNodeTitle,
+            ownerState: {},
             style: {
               width: getSize(propertyWidth, unitSize),
               minWidth: getSize(propertyWidth, unitSize),
@@ -38,7 +28,13 @@ const PropertyValueNode = (props) => {
             children: propertyFormated
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: classes.propertyValueNodeContent, children })
+        /* @__PURE__ */ jsx(
+          PropertyValueNodeContentStyled,
+          {
+            ownerState: {},
+            children
+          }
+        )
       ]
     }
   );

package/components/PrintingSystem/subcomponents/QRImageNode/index.d.ts

@@ -1,5 +1,8 @@
 import { QRImageNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente QRImageNode
+ *
+ * Este componente se utiliza para renderizar un código QR.
+ * @param {QRImageNodeProps} props - Propiedades del componente.
  */
 export declare const QRImageNode: (props: QRImageNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/SectionNode/index.d.ts

@@ -1,5 +1,5 @@
 import { SectionNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Sección de impresión que contiene el contenido de la sección.
  */
 export declare const SectionNode: (props: SectionNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/SectionNode/index.js

@@ -1,12 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
 import { g as getSize } from "../../utils/getSize/index.js";
+import { S as SectionNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 const SectionNode = (props) => {
   const {
     children,
-    className,
     direction = "row",
     gap = "unset",
     style,
@@ -22,9 +20,9 @@ const SectionNode = (props) => {
   } = props;
   const { unitSize } = useBase();
   return /* @__PURE__ */ jsx(
-    "div",
+    SectionNodeRootStyled,
     {
-      className: clsx(classes.sectionNodeRoot, className),
+      ownerState: {},
       style: {
         flexDirection: direction,
         gap: getSize(gap, unitSize),

package/components/PrintingSystem/subcomponents/TextBoxNode/index.d.ts

@@ -1,5 +1,8 @@
 import { TextBoxNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente TextBoxNode
+ *
+ * Este componente se utiliza para renderizar un texto.
+ * @param {TextBoxNodeProps} props - Propiedades del componente.
  */
 export declare const TextBoxNode: (props: TextBoxNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/TextBoxNode/index.js

@@ -1,19 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
+import { T as TextBoxNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 const TextBoxNode = (props) => {
-  const { variant = "body", style, className, textAlign = "start", children } = props;
+  const { variant = "body", style, textAlign = "start", children } = props;
   const { sourceData } = useBase();
   const textFormated = evaluateWithContext(sourceData, children[1]);
   return /* @__PURE__ */ jsx(
-    "span",
+    TextBoxNodeRootStyled,
     {
-      className: clsx(
-        classes.textBoxNodeRoot,
-        className,
-        `${classes.textBoxNodeVariant}-${variant}`
-      ),
+      ownerState: { variant },
       style: { textAlign, ...style },
       children: textFormated
     }

package/components/PrintingSystem/tests/PrintingSystem.test.d.ts

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

package/components/PrintingSystem/tests/mocks/sourceData.d.ts

@@ -0,0 +1,440 @@
+export declare const sourceData: {
+    data: {
+        id: number;
+        code: string;
+        order: {
+            id: number;
+            due_date: string;
+            confirmation_date: string;
+            billing_customer_name: string;
+            billing_customer_email: string;
+            billing_customer_city_name: string;
+            billing_customer_state_name: string;
+            billing_customer_country_name: string;
+            billing_customer_address: string;
+            billing_customer_phone_number: string;
+        };
+        instrument: {
+            id: number;
+            version: number;
+            active: boolean;
+            type_name: string;
+            magnitude: {
+                id: number;
+                name: string;
+                unit: string;
+                symbol: string;
+                image_url: string;
+            };
+            location: string;
+            serie: string;
+            reference: string;
+            manufacturer: string;
+            model: string;
+            measure_range_min: number;
+            measure_range_max: number;
+            measure_resolution: number;
+        };
+        calibration: {
+            id: number;
+            status: {
+                id: number;
+                name: string;
+            };
+            technician: {
+                id: number;
+                first_name: string;
+                last_name: string;
+            };
+            started_at: string;
+            ended_at: string;
+        };
+        results: {
+            environment_temperature_min_corrected: number;
+            environment_temperature_max_corrected: number;
+            environment_humidity_min_corrected: number;
+            environment_humidity_max_corrected: number;
+            points: {
+                set_point_value: number;
+                avg: number;
+                correction: number;
+                uncertainty: number;
+                coverage_factor: number;
+            }[];
+        };
+    };
+    global_info: {
+        domain: {
+            name: string;
+            slogan: string;
+        };
+        domain_country: {
+            name: string;
+            address: string;
+            phone: string;
+        };
+    };
+};
+export declare const dataIncludeDictionary: {
+    dictionary: {
+        certificate: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            type: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        applicant: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            name: {
+                primary: string;
+                secondary: string;
+            };
+            address: {
+                primary: string;
+                secondary: string;
+            };
+            city: {
+                primary: string;
+                secondary: string;
+            };
+            state: {
+                primary: string;
+                secondary: string;
+            };
+            country: {
+                primary: string;
+                secondary: string;
+            };
+            number: {
+                primary: string;
+                secondary: string;
+            };
+            email: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        calibrated_instrument: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            thermohygrometer: {
+                primary: string;
+                secondary: string;
+            };
+            manufacturer: {
+                primary: string;
+                secondary: string;
+            };
+            model: {
+                primary: string;
+                secondary: string;
+            };
+            serie: {
+                primary: string;
+                secondary: string;
+            };
+            reference: {
+                primary: string;
+                secondary: string;
+            };
+            interval_measure: {
+                primary: string;
+                secondary: string;
+            };
+            interval_calibration: {
+                primary: string;
+                secondary: string;
+            };
+            resolution: {
+                primary: string;
+                secondary: string;
+            };
+            location: {
+                primary: string;
+                secondary: string;
+            };
+            calibration_site: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        method_calibration: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            reception_date: {
+                primary: string;
+                secondary: string;
+            };
+            date: {
+                primary: string;
+                secondary: string;
+            };
+            issue_date: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        calibrated_by: {
+            primary: string;
+            secondary: string;
+        };
+        calibrated_by_role: {
+            primary: string;
+            secondary: string;
+        };
+        approver_by: {
+            primary: string;
+            secondary: string;
+        };
+        approver_by_role: {
+            primary: string;
+            secondary: string;
+        };
+        environment_condition: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            min_tempeture: {
+                primary: string;
+                secondary: string;
+            };
+            max_tempeture: {
+                primary: string;
+                secondary: string;
+            };
+            min_humidity: {
+                primary: string;
+                secondary: string;
+            };
+            max_humedity: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        traceability_measurements: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            id: {
+                primary: string;
+                secondary: string;
+            };
+            certification: {
+                primary: string;
+                secondary: string;
+            };
+            laboratory: {
+                primary: string;
+                secondary: string;
+            };
+            uncertainty: {
+                primary: string;
+                secondary: string;
+            };
+            propertyPatterns: {
+                primary: string;
+                secondary: string;
+            };
+            propertyIsothermal: {
+                primary: string;
+                secondary: string;
+            };
+            grid: {
+                instrument: {
+                    primary: string;
+                    secondary: string;
+                };
+                identification_code: {
+                    primary: string;
+                    secondary: string;
+                };
+                certification_number: {
+                    primary: string;
+                    secondary: string;
+                };
+                laboratory: {
+                    primary: string;
+                    secondary: string;
+                };
+            };
+        };
+        measurement_uncertainty: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        measurement_results: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        temperature: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            grid: {
+                standard_average_temperature: {
+                    primary: string;
+                    secondary: string;
+                };
+                ibc_average_temperature: {
+                    primary: string;
+                    secondary: string;
+                };
+                correction: {
+                    primary: string;
+                    secondary: string;
+                };
+                coverage_factor_k: {
+                    primary: string;
+                    secondary: string;
+                };
+                expanded_uncertainty: {
+                    primary: string;
+                    secondary: string;
+                };
+            };
+        };
+        uncertainty_graph: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            message_x: {
+                primary: string;
+                secondary: string;
+            };
+            message_y: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        humidity_relative: {
+            title: {
+                primary: string;
+                secondary: string;
+            };
+            grid: {
+                standard_average_humidity: {
+                    primary: string;
+                    secondary: string;
+                };
+                standard_average_humidity_ibc: {
+                    primary: string;
+                    secondary: string;
+                };
+                correction: {
+                    primary: string;
+                    secondary: string;
+                };
+                coverage_factor_k: {
+                    primary: string;
+                    secondary: string;
+                };
+                expanded_uncertainty: {
+                    primary: string;
+                    secondary: string;
+                };
+            };
+        };
+        observations: {
+            primary: string;
+            secondary: string;
+        };
+        end_certificate: {
+            primary: string;
+            secondary: string;
+        };
+    };
+    data: {
+        id: number;
+        code: string;
+        order: {
+            id: number;
+            due_date: string;
+            confirmation_date: string;
+            billing_customer_name: string;
+            billing_customer_email: string;
+            billing_customer_city_name: string;
+            billing_customer_state_name: string;
+            billing_customer_country_name: string;
+            billing_customer_address: string;
+            billing_customer_phone_number: string;
+        };
+        instrument: {
+            id: number;
+            version: number;
+            active: boolean;
+            type_name: string;
+            magnitude: {
+                id: number;
+                name: string;
+                unit: string;
+                symbol: string;
+                image_url: string;
+            };
+            location: string;
+            serie: string;
+            reference: string;
+            manufacturer: string;
+            model: string;
+            measure_range_min: number;
+            measure_range_max: number;
+            measure_resolution: number;
+        };
+        calibration: {
+            id: number;
+            status: {
+                id: number;
+                name: string;
+            };
+            technician: {
+                id: number;
+                first_name: string;
+                last_name: string;
+            };
+            started_at: string;
+            ended_at: string;
+        };
+        results: {
+            environment_temperature_min_corrected: number;
+            environment_temperature_max_corrected: number;
+            environment_humidity_min_corrected: number;
+            environment_humidity_max_corrected: number;
+            points: {
+                set_point_value: number;
+                avg: number;
+                correction: number;
+                uncertainty: number;
+                coverage_factor: number;
+            }[];
+        };
+    };
+    global_info: {
+        domain: {
+            name: string;
+            slogan: string;
+        };
+        domain_country: {
+            name: string;
+            address: string;
+            phone: string;
+        };
+    };
+};

package/components/PrintingSystem/tests/mocks/templateData.d.ts

@@ -0,0 +1,2 @@
+import { RootNode } from '../../types';
+export declare const templateData: RootNode;

package/components/PrintingSystem/types.d.ts

@@ -1,4 +1,4 @@
-import { TypographyVariants } from '@m4l/styles';
+import { Sizes, TypographyVariants } from '@m4l/styles';
 import { CSSProperties, ReactNode } from 'react';
 import { PageNodeProps } from './subcomponents/PageNode/types';
 import { SectionNodeProps } from './subcomponents/SectionNode/types';
@@ -9,6 +9,10 @@ import { PaperNodeProps } from './subcomponents/PaperNode/types';
 import { PropertyValueNodeProps } from './subcomponents/PropertyValueNode/types';
 import { GridNodeProps } from './subcomponents/GridNode/types';
 import { ChartNodeProps } from './subcomponents/ChartNode/types';
+import { Theme } from '@mui/material';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { PRINTING_SYSTEM_KEY_COMPONENT } from './constants';
+import { PrintingSystemSlots } from './slots/PrintingSystemEnum';
 export interface BaseProviderPrintSystem {
     pageId: number;
     unitSize: string;
@@ -82,6 +86,18 @@ export interface RootNode {
 export interface PageNode extends BaseNode, PaddingProperties, SizeProperty {
     type: 'page';
     gap?: number | string;
+    rows?: Array<{
+        key: string;
+        cols: Array<{
+            key: string;
+            cells: Array<{
+                key: string;
+                component: string;
+                props: Record<string, any>;
+                styles?: CSSProperties;
+            }>;
+        }>;
+    }>;
 }
 /**
  * SectionNode: Componente para distrubir elementos de NodeType en fila.
@@ -213,8 +229,17 @@ export interface PrintingSystemProps {
     templateData: RootNode;
     sourceData: any;
     className?: string;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    variant?: Extract<TypographyVariants, 'body' | 'bodyDens' | 'subtitle' | 'subtitleDens' | 'title' | 'titleDens' | 'h1' | 'h3'>;
+    dataTestId?: string;
 }
 export interface PrintingSystemRef {
     GoPrint: () => void;
 }
+export type printingSystemType = keyof typeof PrintingSystemSlots;
+export type PrintingSystemOwnerState = Pick<PrintingSystemProps, 'size'> & {
+    variant?: PrintingSystemProps['variant'];
+    size?: PrintingSystemProps['size'];
+};
+export type PrintingSystemStyles = OverridesStyleRules<printingSystemType, typeof PRINTING_SYSTEM_KEY_COMPONENT, Theme>;
 export {};

package/package.json

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

package/storybook/components/PrintingSystem/PrintingSystem.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PrintingSystem } from '../../../src/components/PrintingSystem/PrintingSystem';
+declare const meta: Meta<typeof PrintingSystem>;
+export default meta;
+type Story = StoryObj<typeof PrintingSystem>;
+export declare const Base: Story;

package/components/PrintingSystem/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material";
-const PrintingSystemRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LPrintingSystem?.styleOverrides || {}
-}));
-export {
-  PrintingSystemRoot as P
-};