@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTStatus/README.md

@@ -0,0 +1,106 @@
+# UTStatus
+
+### Descripción
+
+Componente de estado que muestra un ícono y un texto. Soporta múltiples variantes de color, tipos visuales, tamaños, tooltip y adornos opcionales (badges e íconos).
+
+### Tamaños
+
+| Tamaño   | Fuente | Tamaño ícono | Padding |
+| -------- | ------ | ------------ | ------- |
+| `xsmall` | xsmall | 14px         | 2px 4px |
+| `small`  | xsmall | 14px         | 4px 8px |
+| `medium` | small  | 16px         | 4px 8px |
+| `large`  | body   | 20px         | 4px 8px |
+
+### Ícono
+
+Cada variante tiene un ícono por defecto. Puede sobreescribirse con la prop `Icon`, que acepta un nombre de Tabler Icons (string) o un componente React. El ícono puede ocultarse completamente con `withoutIcon`.
+
+### Área
+
+El área de fondo se muestra por defecto (`area={true}`). Puede ocultarse o cambiar su forma:
+
+- `areaType="SQUARE"`: border-radius 4px (por defecto).
+- `areaType="ROUNDED"`: border-radius 100px (forma de píldora).
+
+### Adornos
+
+Se pueden agregar badges o íconos adicionales a la izquierda o derecha del contenido mediante la prop `adornments`. Cada adorno debe indicar un `name` (`Badge` o `Icon`) y opcionalmente `props` para pasarle a ese componente.
+
+```jsx
+// Adorno simple (se ubica a la izquierda por defecto)
+adornments={[{ name: 'Badge', props: { colorTheme: 'success' } }]}
+
+// Posicionamiento explícito izquierda/derecha
+adornments={[
+  { left: { name: 'Icon', props: { name: 'IconStar' } } },
+  { right: { name: 'Badge', props: { colorTheme: 'information' } } }
+]}
+```
+
+### Tooltip
+
+Se puede mostrar un tooltip al hacer hover mediante la prop `tooltip` (string o ReactElement). Opciones adicionales de Tippy.js pueden pasarse con `tooltipProps`.
+
+### Props
+
+| Nombre          | Tipo                                                                                       | Default     | Descripción                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------ |
+| variant         | `'success'` \| `'error'` \| `'warning'` \| `'information'` \| `'accent'` \| `'unassigned'` | `'success'` | Variante de color del componente.                                                                      |
+| type            | `'default'` \| `'light'` \| `'accent'` \| `'negative'`                                     | `'default'` | Tipo visual que modifica el tratamiento del color.                                                     |
+| size            | `'xsmall'` \| `'small'` \| `'medium'` \| `'large'`                                         | `'medium'`  | Tamaño del componente.                                                                                 |
+| children        | string                                                                                     |             | Texto del estado.                                                                                      |
+| area            | bool                                                                                       | `true`      | Muestra el área de fondo.                                                                              |
+| areaType        | `'SQUARE'` \| `'ROUNDED'`                                                                  | `'SQUARE'`  | Forma del área de fondo.                                                                               |
+| Icon            | elementType \| string                                                                      |             | Sobreescribe el ícono por defecto de la variante. Acepta nombre de Tabler Icons o un componente React. |
+| withoutIcon     | bool                                                                                       | `false`     | Oculta el ícono.                                                                                       |
+| weight          | string                                                                                     | `'medium'`  | Peso tipográfico del texto.                                                                            |
+| adornments      | array                                                                                      | `[]`        | Array de adornos (`Badge` o `Icon`) para mostrar junto al estado.                                      |
+| tooltip         | string \| node                                                                             |             | Contenido del tooltip al hacer hover.                                                                  |
+| tooltipProps    | object                                                                                     | `{}`        | Props adicionales para el tooltip (Tippy.js).                                                          |
+| className       | string                                                                                     |             | Clase CSS adicional sobre el contenedor raíz.                                                          |
+| labelDataTestId | string                                                                                     |             | `data-testid` para el label interno.                                                                   |
+| title           | string                                                                                     |             | Atributo HTML `title` en el contenedor raíz.                                                           |
+
+### Ejemplo
+
+```jsx
+import React from 'react';
+import { UTStatus } from '@widergy/energy-ui';
+
+const App = () => (
+  <div>
+    <UTStatus variant="success">Activo</UTStatus>
+    <UTStatus variant="error" size="small">
+      Rechazado
+    </UTStatus>
+    <UTStatus variant="warning" type="light">
+      Pendiente
+    </UTStatus>
+    <UTStatus variant="information" size="xsmall">
+      Info
+    </UTStatus>
+    <UTStatus variant="success" area={false}>
+      Sin fondo
+    </UTStatus>
+    <UTStatus variant="unassigned" areaType="ROUNDED">
+      Redondeado
+    </UTStatus>
+    <UTStatus variant="information" Icon="IconStar">
+      Ícono personalizado
+    </UTStatus>
+    <UTStatus variant="error" withoutIcon>
+      Sin ícono
+    </UTStatus>
+    <UTStatus variant="warning" tooltip="Acción requerida">
+      Con tooltip
+    </UTStatus>
+    <UTStatus variant="success" adornments={[{ name: 'Badge', props: { colorTheme: 'success' } }]}>
+      Con badge
+    </UTStatus>
+  </div>
+);
+
+export default App;
+```

package/dist/esm/components/UTStatus/UTStatus.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTStatusStories from './UTStatus.stories.js';
+
+<Meta of={UTStatusStories} />
+
+<Title>UTStatus</Title>
+
+<Description of={UTStatusStories} />
+
+<Canvas of={UTStatusStories.Default} withToolbar />
+
+<ArgTypes exclude={['classes', 'title']} />

package/dist/esm/components/UTStatus/UTStatus.stories.js

@@ -0,0 +1,391 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { joinArgTypes } from 'stories/utils';
+import { DEFAULT_PROPS, SIZES, TYPES, VARIANTS, AREA_TYPES } from './constants';
+import UTStatus from '.';
+export default {
+  args: {
+    children: 'Información de estado',
+    size: DEFAULT_PROPS.size,
+    type: DEFAULT_PROPS.type,
+    variant: DEFAULT_PROPS.variant
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Texto a mostrar en el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    Icon: {
+      control: false,
+      description: 'Icono a mostrar en el componente. Sobreescribe el default. Solo se muestra si `withoutIcon` es `false`.',
+      table: {
+        defaultValue: {
+          summary: 'Detalles',
+          detail: 'Cada variant tiene su Icon default.'
+        },
+        type: {
+          summary: joinArgTypes(['ReactComponent', 'string'])
+        }
+      }
+    },
+    className: {
+      control: false,
+      description: 'Clase que recibe el contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Determina la variante del componente a usar.',
+      options: Object.keys(VARIANTS),
+      table: {
+        defaultValue: {
+          summary: 'success'
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(VARIANTS))
+        }
+      }
+    },
+    type: {
+      control: 'select',
+      description: 'Determina el tema a usar.',
+      options: Object.keys(TYPES),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.type
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(TYPES))
+        }
+      }
+    },
+    size: {
+      control: 'inline-radio',
+      description: 'Determina el tamaño del texto.',
+      options: Object.keys(SIZES),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.size
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(SIZES))
+        }
+      }
+    },
+    withoutIcon: {
+      control: 'boolean',
+      description: 'Determina si se debe mostrar u ocultar el icono.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Atributo title del elemento HTML para mostrar información adicional al hacer hover.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Contenido del tooltip que se muestra al hacer hover sobre el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: joinArgTypes(['string', 'ReactElement'])
+        }
+      }
+    },
+    tooltipProps: {
+      control: 'object',
+      description: 'Propiedades adicionales para personalizar el comportamiento del tooltip.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    labelDataTestId: {
+      control: 'text',
+      description: 'Identificador de test para el label del componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    adornments: {
+      control: 'object',
+      description: 'Array de adornos (badges e iconos) para mostrar junto al estado.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    area: {
+      control: 'boolean',
+      description: 'Determina si se debe mostrar el área de fondo del componente.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    areaType: {
+      control: 'select',
+      description: 'Determina el tipo de área a usar.',
+      options: Object.keys(AREA_TYPES),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.areaType
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(AREA_TYPES))
+        }
+      }
+    }
+  },
+  component: UTStatus,
+  parameters: {
+    controls: {
+      exclude: ['classes']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para mostrar estados con o sin iconos asociados. Soporta diferentes variantes de color, tipos de tema y tamaños. Incluye funcionalidad de tooltip y puede personalizarse con iconos personalizados.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTStatus'
+};
+export const Default = {
+  args: {
+    size: DEFAULT_PROPS.size,
+    type: DEFAULT_PROPS.type,
+    variant: DEFAULT_PROPS.variant,
+    withoutIcon: DEFAULT_PROPS.withoutIcon,
+    area: DEFAULT_PROPS.area,
+    areaType: DEFAULT_PROPS.areaType
+  },
+  name: 'Playground'
+};
+export const AllVariants = {
+  args: {
+    children: 'Estado del sistema',
+    size: 'medium',
+    type: 'default'
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      flexWrap: 'wrap'
+    }
+  }, Object.keys(VARIANTS).map(variant => /*#__PURE__*/React.createElement(UTStatus, _extends({
+    key: variant
+  }, args, {
+    variant: variant
+  })))),
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra todas las variantes disponibles del componente UTStatus con el tipo por defecto.'
+      }
+    }
+  }
+};
+export const AllTypes = {
+  args: {
+    children: 'Diferentes tipos',
+    size: 'medium',
+    variant: 'success'
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      flexWrap: 'wrap'
+    }
+  }, Object.keys(TYPES).map(type => /*#__PURE__*/React.createElement(UTStatus, _extends({
+    key: type
+  }, args, {
+    type: type
+  })))),
+  name: 'Todos los Tipos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra todos los tipos de tema disponibles del componente UTStatus con la variante success.'
+      }
+    }
+  }
+};
+export const AllSizes = {
+  args: {
+    type: 'default'
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px'
+    }
+  }, Object.keys(SIZES).map(size => /*#__PURE__*/React.createElement("div", {
+    key: size,
+    style: {
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center'
+    }
+  }, Object.keys(VARIANTS).map(variant => /*#__PURE__*/React.createElement(UTStatus, _extends({
+    key: variant
+  }, args, {
+    size: size,
+    variant: variant
+  }), variant))))),
+  name: 'Todos los Tamaños',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra todos los tamaños disponibles del componente UTStatus, con todas las variantes por fila.'
+      }
+    }
+  }
+};
+export const WithTooltip = {
+  args: {
+    children: 'Estado con tooltip',
+    variant: 'warning',
+    tooltip: 'Este es un mensaje de advertencia importante que requiere atención del usuario.'
+  },
+  name: 'Con Tooltip',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con tooltip personalizado y propiedades adicionales.'
+      }
+    }
+  }
+};
+export const WithoutIcon = {
+  args: {
+    children: 'Estado sin icono',
+    variant: 'unassigned',
+    withoutIcon: true
+  },
+  name: 'Sin Icono',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus sin icono, útil para casos donde solo se necesita mostrar el texto del estado.'
+      }
+    }
+  }
+};
+export const CustomIcon = {
+  args: {
+    children: 'Icono personalizado',
+    variant: 'information',
+    Icon: 'IconStar',
+    title: 'Estado destacado con icono personalizado'
+  },
+  name: 'Icono Personalizado',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con un icono personalizado que sobrescribe el icono por defecto de la variante.'
+      }
+    }
+  }
+};
+export const WithAdornments = {
+  args: {
+    children: 'Estado con adornos',
+    variant: 'success',
+    adornments: [{
+      name: 'Badge',
+      props: {
+        variant: 'information'
+      }
+    }]
+  },
+  name: 'Con Adornos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con adornos (badges e iconos) adicionales.'
+      }
+    }
+  }
+};
+export const WithoutArea = {
+  args: {
+    children: 'Estado sin área',
+    variant: 'warning',
+    area: false
+  },
+  name: 'Sin Área',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus sin el área de fondo, útil para integración en diseños más minimalistas.'
+      }
+    }
+  }
+};
+export const RoundedArea = {
+  args: {
+    children: 'Área redondeada',
+    variant: 'success',
+    areaType: 'full'
+  },
+  name: 'Área Redondeada',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con área completamente redondeada.'
+      }
+    }
+  }
+};

package/dist/esm/components/UTStatus/constants.js

@@ -0,0 +1,43 @@
+import UTBadge from '../UTBadge';
+import UTIcon from '../UTIcon';
+export const SIZES = {
+  large: 'large',
+  medium: 'medium',
+  small: 'small',
+  xlarge: 'xlarge',
+  xsmall: 'xsmall'
+};
+export const VARIANTS = {
+  accent: 'accent',
+  error: 'error',
+  information: 'information',
+  success: 'success',
+  unassigned: 'unassigned',
+  warning: 'warning'
+};
+export const TYPES = {
+  accent: 'accent',
+  default: 'default',
+  light: 'light',
+  negative: 'negative'
+};
+export const AREA_TYPES = {
+  SQUARE: 'SQUARE',
+  ROUNDED: 'ROUNDED'
+};
+export const DEFAULT_PROPS = {
+  areaType: AREA_TYPES.SQUARE,
+  size: 'medium',
+  type: 'default',
+  variant: 'success',
+  weight: 'medium',
+  withoutIcon: false
+};
+export const COMPONENT_KEYS = {
+  BADGE: 'Badge',
+  ICON: 'Icon'
+};
+export const COMPONENTS_MAPPER = {
+  [COMPONENT_KEYS.BADGE]: UTBadge,
+  [COMPONENT_KEYS.ICON]: UTIcon
+};

package/dist/esm/components/UTStatus/index.js

@@ -0,0 +1,142 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useMemo } from 'react';
+import { bool, string, objectOf, elementType, object, oneOfType, element, arrayOf } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import Skeleton from '../UTSkeleton';
+import UTTooltip from '../UTTooltip';
+import { defaultIconMapper, getColorTheme, getLabelVariant, retrieveStyle, validateProps } from './theme';
+import { AREA_TYPES, COMPONENTS_MAPPER, DEFAULT_PROPS, TYPES } from './constants';
+import { getAdornmentsThemeProps, getIconProps, validateAdornments } from './utils';
+import styles from './styles.module.scss';
+const UTStatus = _ref => {
+  let {
+    adornments = [],
+    area = true,
+    areaType = DEFAULT_PROPS.areaType,
+    children,
+    classes,
+    className,
+    Icon,
+    labelDataTestId,
+    size = DEFAULT_PROPS.size,
+    title,
+    tooltip,
+    tooltipProps = {},
+    truncate,
+    type = DEFAULT_PROPS.type,
+    variant = DEFAULT_PROPS.variant,
+    weight = DEFAULT_PROPS.weight,
+    withoutIcon
+  } = _ref;
+  const StatusIcon = Icon !== null && Icon !== void 0 ? Icon : defaultIconMapper(variant);
+  const {
+    leftAdornments,
+    rightAdornments
+  } = useMemo(() => {
+    const left = [];
+    const right = [];
+    if (!validateAdornments(adornments)) return {
+      leftAdornments: left,
+      rightAdornments: right
+    };
+    adornments.forEach((item, index) => {
+      if (item.left || item.right) {
+        if (item.left) left.push({
+          ...item.left,
+          key: item.left.key || "".concat(item.left.name, "-left-").concat(index)
+        });
+        if (item.right) right.push({
+          ...item.right,
+          key: item.right.key || "".concat(item.right.name, "-right-").concat(index)
+        });
+      } else {
+        left.push({
+          ...item,
+          key: item.key || "".concat(item.name, "-").concat(index)
+        });
+      }
+    });
+    return {
+      leftAdornments: left,
+      rightAdornments: right
+    };
+  }, [adornments]);
+  const useValidAdornments = leftAdornments.length > 0 || rightAdornments.length > 0;
+  const {
+    IconComponent,
+    ...iconProps
+  } = useMemo(() => getIconProps(validateProps({
+    className: classes.icon,
+    Icon: StatusIcon,
+    type,
+    variant,
+    size
+  })), [StatusIcon, type, variant, size, classes.icon]);
+  const showTooltip = !isEmpty(tooltip);
+  const colorTheme = getColorTheme(validateProps({
+    type,
+    variant
+  }));
+  const renderAdornment = useCallback(adornment => {
+    const Component = COMPONENTS_MAPPER[adornment.name];
+    const themeProps = getAdornmentsThemeProps({
+      area,
+      classes,
+      size,
+      adornmentName: adornment.name
+    });
+    const adornmentProps = {
+      variant,
+      ...((adornment === null || adornment === void 0 ? void 0 : adornment.props) || {}),
+      ...themeProps
+    };
+    return Component ? /*#__PURE__*/React.createElement(Component, _extends({}, adornmentProps, {
+      key: (adornment === null || adornment === void 0 ? void 0 : adornment.key) || adornment.name
+    })) : null;
+  }, [adornments, size, variant]);
+  const StatusRender = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.root, " ").concat(truncate ? styles.truncated : '', " ").concat(className || '', " ").concat(area ? '' : classes.withoutArea, " ").concat(areaType === AREA_TYPES.SQUARE ? '' : classes.roundedArea),
+    title: title
+  }, useValidAdornments && leftAdornments.map(renderAdornment), withoutIcon || useValidAdornments ? null : /*#__PURE__*/React.createElement(IconComponent, iconProps), /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(classes.label, " ").concat(truncate ? styles.truncatedLabel : ''),
+    colorTheme: colorTheme,
+    shade: type !== TYPES.negative ? '05' : undefined,
+    dataTestId: labelDataTestId,
+    variant: getLabelVariant({
+      size
+    }),
+    weight: weight
+  }, children), useValidAdornments && rightAdornments.map(renderAdornment));
+  return /*#__PURE__*/React.createElement(Skeleton, null, showTooltip ? /*#__PURE__*/React.createElement(UTTooltip, {
+    content: tooltip,
+    tippyProps: {
+      appendTo: () => document.body,
+      interactive: false,
+      arrow: false,
+      ...tooltipProps
+    }
+  }, StatusRender) : StatusRender);
+};
+UTStatus.defaultProps = DEFAULT_PROPS;
+UTStatus.propTypes = {
+  adornments: arrayOf(object),
+  area: bool,
+  areaType: string,
+  classes: objectOf(string),
+  className: string,
+  Icon: elementType,
+  iconProps: object,
+  labelDataTestId: string,
+  size: string,
+  title: string,
+  tooltip: oneOfType([string, element]),
+  tooltipProps: object,
+  truncate: bool,
+  type: string,
+  variant: string,
+  weight: string,
+  withoutIcon: bool
+};
+export default WithTheme(retrieveStyle)(UTStatus);