@m4l/components 9.1.19 → 9.1.20

package/@types/types.d.ts

@@ -135,6 +135,7 @@ import { AppBarSlotsType, AppBarOwnerState } from '../components/AppBar/types';
 import { DialogOwnerState, DialogType } from '../components/mui_extended/Dialog/types';
 import { LoadingButtonOwnerState, LoadingButtonSlotsType } from '../components/mui_extended/LoadingButton/types';
 
+import { BooleanFormatterOwnerState, PresentationType } from '../components/formatters/BooleanFormatter/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -175,6 +176,7 @@ declare module '@mui/material/styles' {
     M4LAppBar: AppBarSlotsType;
     M4LWiDialog: DialogType;
     M4LLoadingButton: LoadingButtonSlotsType;
+    M4LBooleanFormatter: PresentationType;
   }
 
   interface ComponentsPropsList {
@@ -215,6 +217,7 @@ declare module '@mui/material/styles' {
     M4LAppBar: Partial<AppBarOwnerState>;
     M4LWiDialog: Partial<DialogOwnerState>;
     M4LLoadingButton: Partial<LoadingButtonOwnerState>;
+    M4LBooleanFormatter: Partial<BooleanFormatterOwnerState>;
   }
 
   interface Components {
@@ -493,5 +496,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LLoadingButton'];
       variants?: ComponentsVariants['M4LLoadingButton'];
     };
+    M4LBooleanFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LBooleanFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LBooleanFormatter'];
+      variants?: ComponentsVariants['M4LBooleanFormatter'];
+    };
   }
-}
+}

package/components/DataGrid/formatters/ColumnBooleanFormatter/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
-import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/index.js";
+import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
 function ColumnBooleanFormatter(props) {
   const { fieldValue, presentationType, Component } = props;
   return (obProps) => {

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

@@ -0,0 +1,29 @@
+import { BooleanFormatterProps } from './types';
+/**
+ * BooleanFormatter
+ * A component for formatting boolean values (`true` or `false`) into various presentation styles such as text or checkbox.
+ * @param {BooleanFormatterProps} props - The properties for the component.
+ * presentationType
+ * Specifies how the boolean value should be represented:
+ * - `'string_yes_no'`: Displays "Yes" for `true` and "No" for `false`.
+ * - `'string_true_false'`: Displays "True" for `true` and "False" for `false`.
+ * - `'check'`: Displays an icon representing `true` or `false`.
+ * [value=false]
+ * The boolean value to be formatted.
+ * [Component=WrapperComponent]
+ * A custom wrapper component for the formatted output.
+ * [dataTestId]
+ * A unique identifier for testing purposes, used as a `data-testid` attribute.
+ * @example
+ * <BooleanFormatter presentationType="string_yes_no" value={true} />
+ * // Renders "Yes"
+ *
+ * <BooleanFormatter presentationType="check" value={false} />
+ * // Renders a false icon
+ * @returns JSX.Element
+ * @author cesar - automatic
+ * @createdAt 2024-12-06 15:57:50 - automatic
+ * @updatedAt 2024-12-10 14:11:20 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare function BooleanFormatter(props: BooleanFormatterProps): import("react/jsx-runtime").JSX.Element;

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { W as WrapperComponent } from "../../WrapperComponent/index.js";
+import { L as LABEL_BOOLEAN_YES, a as LABEL_BOOLEAN_NO, b as LABEL_BOOLEAN_TRUE, c as LABEL_BOOLEAN_FALSE } from "./dictionary.js";
+import clsx from "clsx";
+import { g as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { T as TextStyled, F as FormatterRootStyled, B as BooleanFormatterIconStyled } from "./slots/BooleanFormatterSlots.js";
+import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
+function BooleanFormatter(props) {
+  const { presentationType, value, Component = WrapperComponent, dataTestId } = 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`;
+  const ownerState = { isTrue: final_value };
+  const memoComponent = useMemo(() => {
+    if (presentationType === "string_yes_no") {
+      return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(TextStyled, { ownerState, children: final_value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO) }) });
+    }
+    if (presentationType === "string_true_false") {
+      return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(TextStyled, { ownerState, children: final_value ? getLabel(LABEL_BOOLEAN_TRUE) : getLabel(LABEL_BOOLEAN_FALSE) }) });
+    }
+    return /* @__PURE__ */ jsx(
+      FormatterRootStyled,
+      {
+        className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT)),
+        ...getPropDataTestId(BOOLEAN_FORMATTER_KEY_COMPONENT, BooleanFormatterSlots.booleanFormatterRoot, dataTestId),
+        role: "booleanStyled-role",
+        ownerState,
+        children: /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(
+          BooleanFormatterIconStyled,
+          {
+            ownerState,
+            src: final_value ? srcCheckTrue : srcCheckFalse
+          }
+        ) })
+      }
+    );
+  }, [final_value, getLabel, presentationType, srcCheckTrue, srcCheckFalse]);
+  return memoComponent;
+}
+export {
+  BooleanFormatter as B
+};

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

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

package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js

@@ -0,0 +1,18 @@
+const booleanFormatterStyles = {
+  /**
+   * Modal Dialog Root style
+   * @author cesar - automatic
+   * @createdAt 2024-12-10 14:11:55 - automatic
+   * @updatedAt 2024-12-10 14:11:55 - automatic
+   * @updatedUser cesar - automatic
+   */
+  text: ({ theme }) => ({
+    "& .MuiSkeleton-text": {
+      width: `${theme.vars.size.baseSpacings.sp7} !important`,
+      borderRadius: theme.vars.size.borderRadius.r1
+    }
+  })
+};
+export {
+  booleanFormatterStyles as b
+};

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

@@ -0,0 +1 @@
+export declare const BOOLEAN_FORMATTER_KEY_COMPONENT = "M4LBooleanFormatter";

package/components/formatters/BooleanFormatter/constants.js

@@ -0,0 +1,4 @@
+const BOOLEAN_FORMATTER_KEY_COMPONENT = "M4LBooleanFormatter";
+export {
+  BOOLEAN_FORMATTER_KEY_COMPONENT as B
+};

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

@@ -3,5 +3,5 @@ export declare const LABEL_BOOLEAN_YES = "boolean_formatter.boolean_yes";
 export declare const LABEL_BOOLEAN_NO = "boolean_formatter.boolean_no";
 export declare const LABEL_BOOLEAN_TRUE = "boolean_formatter.boolean_true";
 export declare const LABEL_BOOLEAN_FALSE = "boolean_formatter.boolean_false";
-export declare function getFormattersComponentsDictionary(): string;
+export declare function getFormattersComponentsDictionary(): string[];
 export declare const BOOLEAN_FORMATTER_DICTIONARY_LABELS: string[];

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

@@ -1,5 +1,7 @@
-import { BooleanFormatterProps } from './types';
-/**
- * TODO: Documentar
- */
-export declare function BooleanFormatter(props: BooleanFormatterProps): import("react/jsx-runtime").JSX.Element;
+export * from './BooleanFormatter.styles';
+export { BooleanFormatter } from './BooleanFormatter';
+export * from './constants';
+export * from './dictionary';
+export * from './slots/BooleanFormatterSlots';
+export * from './slots/BooleanFormatterEnum';
+export * from './types';

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum BooleanFormatterSlots {
+    booleanFormatterRoot = "booleanFormatterRoot",
+    booleanFormatterSkeleton = "booleanFormatterSkeleton",
+    booleanFormatterIcon = "booleanFormatterIcon",
+    text = "text"
+}

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.js

@@ -0,0 +1,10 @@
+var BooleanFormatterSlots = /* @__PURE__ */ ((BooleanFormatterSlots2) => {
+  BooleanFormatterSlots2["booleanFormatterRoot"] = "booleanFormatterRoot";
+  BooleanFormatterSlots2["booleanFormatterSkeleton"] = "booleanFormatterSkeleton";
+  BooleanFormatterSlots2["booleanFormatterIcon"] = "booleanFormatterIcon";
+  BooleanFormatterSlots2["text"] = "text";
+  return BooleanFormatterSlots2;
+})(BooleanFormatterSlots || {});
+export {
+  BooleanFormatterSlots as B
+};

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.d.ts

@@ -0,0 +1,12 @@
+export declare const FormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../FormatterRoot/types').FormatterRootProps, "children"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const BooleanFormatterIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon/types').IconProps, keyof import('../../../Icon/types').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const BooleanFormatterSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const TextStyled: 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('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.js

@@ -0,0 +1,29 @@
+import { styled } from "@mui/material/styles";
+import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "../constants.js";
+import { B as BooleanFormatterSlots } from "./BooleanFormatterEnum.js";
+import { b as booleanFormatterStyles } from "../BooleanFormatter.styles.js";
+import { F as FormatterRoot } from "../../FormatterRoot/index.js";
+import { S as Skeleton } from "../../../mui_extended/Skeleton/Skeleton.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+const FormatterRootStyled = styled(FormatterRoot, {
+  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
+  slot: BooleanFormatterSlots.booleanFormatterRoot
+})(booleanFormatterStyles?.booleanFormatterRoot);
+const BooleanFormatterIconStyled = styled(Icon, {
+  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
+  slot: BooleanFormatterSlots.booleanFormatterIcon
+})(booleanFormatterStyles?.booleanFormatterIcon);
+styled(Skeleton, {
+  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
+  slot: BooleanFormatterSlots.booleanFormatterSkeleton
+})(booleanFormatterStyles?.booleanFormatterSkeleton);
+const TextStyled = styled(Typography, {
+  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
+  slot: BooleanFormatterSlots.text
+})(booleanFormatterStyles?.text);
+export {
+  BooleanFormatterIconStyled as B,
+  FormatterRootStyled as F,
+  TextStyled as T
+};

package/components/formatters/BooleanFormatter/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BooleanFormatterSlots';
+export * from './BooleanFormatterEnum';

package/components/formatters/BooleanFormatter/slots/index.js

@@ -0,0 +1 @@
+

package/components/formatters/BooleanFormatter/tests/BooleanFormatter.test.d.ts

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

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

@@ -1,6 +1,38 @@
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { BooleanFormatterSlots } from './slots';
+import { BOOLEAN_FORMATTER_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+/**
+ * Defines the presentation type for the BooleanFormatter component.
+ * - `'string_yes_no'`: Displays "Yes" for `true` and "No" for `false`.
+ * - `'string_true_false'`: Displays "True" for `true` and "False" for `false`.
+ * - `'check'`: Displays an icon to represent the boolean value.
+ */
 export type PresentationType = 'string_yes_no' | 'string_true_false' | 'check';
+/**
+ * Maps to the keys in `BooleanFormatterSlots`, defining slot-specific styling or customization.
+ */
+export type BooleanFormatter = keyof typeof BooleanFormatterSlots;
+/**
+ * Properties for the `BooleanFormatter` component.
+ */
 export interface BooleanFormatterProps {
     Component?: React.ElementType;
     presentationType: PresentationType;
     value?: boolean;
+    dataTestId?: string;
 }
+/**
+ * State properties for the `BooleanFormatter` component.
+ */
+export interface BooleanFormatterOwnerState {
+    isTrue?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * Styles for customizing the `BooleanFormatter` component.
+ *
+ * This type allows partial overriding of the default styles through Material-UI's `OverridesStyleRules`.
+ * It integrates with the Material-UI `Theme` to ensure consistent theming.
+ */
+export type BooleanFormatterStyles = Partial<OverridesStyleRules<BooleanFormatter, typeof BOOLEAN_FORMATTER_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/formatters/index.d.ts

@@ -1,4 +1,4 @@
-export { BooleanFormatter } from './BooleanFormatter';
+export { BooleanFormatter } from './BooleanFormatter/BooleanFormatter';
 export { useFormatDate as getFormatDate, DateFormatter } from './DateFormatter';
 export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter';
 export { PointsFormatter, getFormatPoints } from './PointsFormatter';

package/index.js

@@ -42,7 +42,7 @@ import { R as R10 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
 import { R as R11 } from "./components/hook-form/RHFTextField/RHFTextField.js";
 import { R as R12 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
 import { R as R13 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
-import { B } from "./components/formatters/BooleanFormatter/index.js";
+import { B } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
 import { D as D2, u as u4 } from "./components/formatters/DateFormatter/index.js";
 import { U, g as g8 } from "./components/formatters/UncertaintyFormatter/index.js";
 import { P as P2, g as g9 } from "./components/formatters/PointsFormatter/index.js";

package/package.json

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

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

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BooleanFormatter } from '../../../../src/components/formatters/BooleanFormatter';
+declare const meta: Meta<typeof BooleanFormatter>;
+export default meta;
+type Story = StoryObj<typeof BooleanFormatter>;
+/**
+ * Default story for the BooleanFormatter component.
+ */
+export declare const Default: Story;
+/**
+ * Stories for the BooleanFormatter component with different values and presentation types.
+ */
+export declare const StringYes: Story;
+/**
+ * Stories for the BooleanFormatter component with different values and presentation types.
+ */
+export declare const StringNo: Story;
+/**
+ * Stories for the BooleanFormatter component with different values and presentation types.
+ */
+export declare const StringTrue: Story;
+/**
+ * Stories for the BooleanFormatter component with different values and presentation types.
+ */
+export declare const StringFalse: Story;
+/**
+ * Stories for the BooleanFormatter component with different values and presentation types.
+ */
+export declare const CheckTrue: Story;
+/**
+ * Stories for the BooleanFormatter component with different values and presentation types.
+ */
+export declare const CheckFalse: Story;
+/**
+ * Stories for the BooleanFormatter component with different values and presentation types.
+ */
+export declare const SkeletonCheck: Story;
+/**
+ * Stories for the BooleanFormatter component with different values and presentation types.
+ */
+export declare const SkeletonString: Story;

package/components/formatters/BooleanFormatter/index.js

@@ -1,40 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/Icon.js";
-import { W as WrapperComponent } from "../../WrapperComponent/index.js";
-import { L as LABEL_BOOLEAN_YES, a as LABEL_BOOLEAN_NO, b as LABEL_BOOLEAN_TRUE, c as LABEL_BOOLEAN_FALSE } from "./dictionary.js";
-import { f as formatterClasses } from "../classes/index.js";
-import clsx from "clsx";
-import { F as FormatterRoot } from "../FormatterRoot/index.js";
-function BooleanFormatter(props) {
-  const { presentationType, value, Component = WrapperComponent } = 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`;
-  const memoComponent = useMemo(() => {
-    if (presentationType === "string_yes_no") {
-      return /* @__PURE__ */ jsx(Component, { children: final_value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO) });
-    }
-    if (presentationType === "string_true_false") {
-      return /* @__PURE__ */ jsx(Component, { children: final_value ? getLabel(LABEL_BOOLEAN_TRUE) : getLabel(LABEL_BOOLEAN_FALSE) });
-    }
-    return /* @__PURE__ */ jsx(FormatterRoot, { children: /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        src: final_value ? srcCheckTrue : srcCheckFalse,
-        className: clsx(
-          formatterClasses.root,
-          formatterClasses.booleanFormatterIcon,
-          final_value && formatterClasses.booleanFormatterCheck
-        )
-      }
-    ) }) });
-  }, [final_value]);
-  return memoComponent;
-}
-export {
-  BooleanFormatter as B
-};