@widergy/energy-ui 3.158.1 → 3.160.0

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

@@ -0,0 +1,547 @@
+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 { useArgs } from '@storybook/preview-api';
+import { joinArgTypes } from 'stories/utils';
+import { SPACING } from '../UTCheckbox/versions/V1/constants';
+import { RADIO_VARIANTS } from './versions/V1/components/Radio/constants';
+import UTRadioGroup from '.';
+const defaultOptions = [{
+  name: 'Opción 1',
+  value: '1',
+  icon: 'IconBeach',
+  prefix: 'Prefijo',
+  suffix: 'Sufijo',
+  description: 'Descripción'
+}, {
+  name: 'Opción 2',
+  value: '2'
+}, {
+  name: 'Opción 3',
+  value: '3',
+  disabled: true
+}];
+export default {
+  args: {
+    version: 'V1',
+    options: defaultOptions,
+    title: 'Selecciona una opción',
+    value: ''
+  },
+  argTypes: {
+    version: {
+      control: 'inline-radio',
+      options: ['V0', 'V1'],
+      description: 'Versión del componente a utilizar.',
+      table: {
+        defaultValue: {
+          summary: 'V1'
+        },
+        type: {
+          summary: joinArgTypes(['V0', 'V1'])
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título del campo (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    field: {
+      control: 'object',
+      description: 'Objeto de configuración del campo (V0 only). Contiene title, required, read_only, etc.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    input: {
+      control: 'object',
+      description: 'Objeto input con value y onChange (V0 only). Similar al patrón de Redux Form.',
+      table: {
+        defaultValue: {
+          summary: '{ value: "", onChange: () => {} }'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    labelKey: {
+      control: 'text',
+      description: 'Clave para obtener la etiqueta de cada opción (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'name'
+        },
+        type: {
+          summary: 'string'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    valueKey: {
+      control: 'text',
+      description: 'Clave para obtener el valor de cada opción (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'value'
+        },
+        type: {
+          summary: 'string'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    divider: {
+      control: 'boolean',
+      description: 'Muestra divisores entre las opciones (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    disableRipple: {
+      control: 'boolean',
+      description: 'Deshabilita el efecto ripple de Material-UI (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    withUpperTitle: {
+      control: 'boolean',
+      description: 'Muestra el título en la parte superior usando UTFieldLabel (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    hideLabels: {
+      control: 'boolean',
+      description: 'Oculta las etiquetas (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    options: {
+      control: 'object',
+      description: 'Array de opciones a mostrar como botones de radio.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'arrayOf(shape)'
+        }
+      }
+    },
+    value: {
+      control: 'text',
+      description: 'Valor seleccionado.',
+      table: {
+        defaultValue: {
+          summary: 'null'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onChange: {
+      control: false,
+      description: 'Función a llamar cuando cambia la selección.',
+      table: {
+        defaultValue: {
+          summary: '() => {}'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita todos los botones de radio del grupo cuando es verdadero.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Indica si el campo es obligatorio.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Estilo de variante para el campo (V1 only).',
+      options: Object.values(RADIO_VARIANTS),
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: joinArgTypes(Object.values(RADIO_VARIANTS))
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    horizontalSpacing: {
+      control: 'select',
+      description: 'Espaciado entre el botón de radio y el título horizontalmente (V1 only).',
+      options: Object.values(SPACING),
+      table: {
+        defaultValue: {
+          summary: 'medium'
+        },
+        type: {
+          summary: joinArgTypes(Object.values(SPACING))
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    verticalSpacing: {
+      control: 'select',
+      description: 'Espaciado entre los elementos de botones de radio verticalmente (V1 only).',
+      options: Object.values(SPACING),
+      table: {
+        defaultValue: {
+          summary: 'medium'
+        },
+        type: {
+          summary: joinArgTypes(Object.values(SPACING))
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    reversed: {
+      control: 'boolean',
+      description: 'Si es verdadero, invierte el orden del título y el botón de radio (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'ID de prueba para el elemento raíz.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    itemDataTestId: {
+      control: 'text',
+      description: 'Prefijo de ID de prueba para elementos de radio individuales.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    classNames: {
+      control: 'object',
+      description: 'Nombres de clase personalizados para aplicar a diferentes elementos.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    actions: {
+      control: 'object',
+      description: 'Acciones a renderizar dentro de UTFieldLabel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf(object)'
+        }
+      }
+    }
+  },
+  component: UTRadioGroup,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'style']
+    },
+    docs: {
+      description: {
+        component: 'UTRadioGroup es un componente personalizable que renderiza un grupo de botones de radio, permitiendo a los usuarios seleccionar una sola opción de una lista proporcionada. Está disponible en dos versiones: V0 (basado en Material-UI con patrón de input similar a Redux Form) y V1 (versión moderna con características avanzadas como variantes card/button, categorización de opciones, y espaciado personalizable).'
+      }
+    }
+  },
+  title: 'Energy-UI/UTRadioGroup'
+};
+
+// Template for V1 stories
+const V1Template = args => {
+  const [{
+    value
+  }, updateArgs] = useArgs();
+  const handleChange = newValue => {
+    updateArgs({
+      value: newValue
+    });
+    if (args.onChange) args.onChange(newValue);
+  };
+  return /*#__PURE__*/React.createElement(UTRadioGroup, _extends({}, args, {
+    value: value,
+    onChange: handleChange
+  }));
+};
+
+// Template for V0 stories
+const V0Template = args => {
+  var _args$input;
+  const [{
+    value
+  }, updateArgs] = useArgs();
+  const handleChange = newValue => {
+    updateArgs({
+      value: newValue
+    });
+    if (args.onChange) args.onChange(newValue);
+  };
+  return /*#__PURE__*/React.createElement(UTRadioGroup, _extends({}, args, {
+    input: {
+      name: ((_args$input = args.input) === null || _args$input === void 0 ? void 0 : _args$input.name) || 'radio-group-v0',
+      value: value || '',
+      onChange: handleChange
+    }
+  }));
+};
+export const Playground = {
+  render: V1Template,
+  args: {
+    version: 'V1',
+    options: defaultOptions,
+    title: 'Selecciona una opción',
+    value: '',
+    horizontalSpacing: 'medium',
+    verticalSpacing: 'medium',
+    reversed: false,
+    required: false,
+    disabled: false,
+    variant: 'default'
+  },
+  name: 'Playground'
+};
+export const V1Categorized = {
+  render: V1Template,
+  args: {
+    version: 'V1',
+    options: [{
+      name: 'Opción 1',
+      value: '1'
+    }, {
+      name: 'Opción 2',
+      value: '2',
+      category: 'Grupo A'
+    }, {
+      name: 'Opción 3',
+      value: '3',
+      category: 'Grupo B',
+      disabled: true
+    }, {
+      name: 'Opción 4',
+      value: '4',
+      category: 'Grupo A'
+    }],
+    title: 'Opciones Categorizadas',
+    value: ''
+  },
+  name: 'V1 - Opciones Categorizadas'
+};
+export const V1CardVariant = {
+  render: V1Template,
+  args: {
+    version: 'V1',
+    options: defaultOptions,
+    title: 'Opciones de Estilo Card',
+    value: '',
+    variant: 'card'
+  },
+  name: 'V1 - Variante Card'
+};
+export const V1ButtonVariant = {
+  render: V1Template,
+  args: {
+    version: 'V1',
+    options: defaultOptions,
+    title: 'Opciones de Estilo Button',
+    value: '',
+    variant: 'button'
+  },
+  name: 'V1 - Variante Button'
+};
+
+// V0 Stories
+export const V0Basic = {
+  render: V0Template,
+  args: {
+    version: 'V0',
+    options: defaultOptions,
+    value: '',
+    labelKey: 'name',
+    valueKey: 'value',
+    disabled: false,
+    divider: false,
+    disableRipple: false,
+    input: {
+      name: 'radio-group-v0'
+    }
+  },
+  name: 'V0 - Básico'
+};
+export const V0WithField = {
+  render: V0Template,
+  args: {
+    version: 'V0',
+    options: defaultOptions,
+    value: '',
+    labelKey: 'name',
+    valueKey: 'value',
+    withUpperTitle: true,
+    field: {
+      title: 'Selecciona una opción',
+      required: true,
+      read_only: false
+    },
+    input: {
+      name: 'radio-group-v0-field'
+    }
+  },
+  name: 'V0 - Con Campo y Título Superior'
+};
+export const V0WithDividers = {
+  render: V0Template,
+  args: {
+    version: 'V0',
+    options: defaultOptions,
+    value: '',
+    labelKey: 'name',
+    valueKey: 'value',
+    divider: true,
+    input: {
+      name: 'radio-group-v0-dividers'
+    }
+  },
+  name: 'V0 - Con Divisores'
+};
+export const V0Disabled = {
+  render: V0Template,
+  args: {
+    version: 'V0',
+    options: defaultOptions,
+    value: '1',
+    labelKey: 'name',
+    valueKey: 'value',
+    disabled: true,
+    input: {
+      name: 'radio-group-v0-disabled'
+    }
+  },
+  name: 'V0 - Deshabilitado'
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTRadioGroup = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTRadioGroup.propTypes = {
+  version: string
+};
+export default UTRadioGroup;

package/dist/esm/components/UTRadioGroup/versions/V0/index.js

@@ -0,0 +1,125 @@
+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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Fragment, PureComponent } from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import { string, arrayOf, func, objectOf, bool, object, oneOfType, element } from 'prop-types';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { fieldType, inputPropTypes } from '../../../../types/formTypes';
+import WithTheme from '../../../WithTheme';
+import UTFieldLabel from '../../../UTFieldLabel';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+class UTRadioGroup extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "handleChange", (_, value) => this.props.input.onChange(value));
+    _defineProperty(this, "renderRadioItem", _ref => {
+      let {
+        classes,
+        index,
+        option
+      } = _ref;
+      const {
+        className,
+        customRadioLabel: CustomRadioLabel,
+        disabled,
+        disableRipple = false,
+        input,
+        labelKey,
+        valueKey
+      } = this.props;
+      const isChecked = input.value === option[valueKey];
+      const {
+        dataTestId
+      } = option;
+      return /*#__PURE__*/React.createElement(FormControlLabel, {
+        key: option[valueKey],
+        value: option[valueKey],
+        checked: isChecked,
+        classes: {
+          root: "\n            ".concat(classes.root, "\n            ").concat(isChecked && classes.checkedRoot, "\n            ").concat(option.disabled && classes.disabledRoot, "\n          "),
+          label: classes.label
+        },
+        "data-testid": dataTestId,
+        disabled: disabled || option.disabled,
+        label: CustomRadioLabel ? /*#__PURE__*/React.createElement(CustomRadioLabel, {
+          option: option,
+          checked: isChecked
+        }) : option[labelKey],
+        control: /*#__PURE__*/React.createElement(Radio, {
+          disableRipple: disableRipple,
+          classes: {
+            root: classes.iconRoot,
+            checked: "".concat(classes.checked, " ").concat(classes.checkedIconRoot)
+          },
+          inputProps: {
+            'data-testid': dataTestId ? "".concat(dataTestId, ".input.").concat(index) : null
+          }
+        }),
+        className: "".concat(classes.formControlLabel, " \n              ").concat(this.props.divider && index === 0 && classes.topDivider, " \n              ").concat(this.props.divider && classes.divider, "\n              ").concat(className)
+      });
+    });
+  }
+  render() {
+    var _field$configuration;
+    const {
+      actions,
+      classNames = {},
+      classes: themeClasses,
+      containerClassName,
+      field,
+      hideLabels,
+      input,
+      options,
+      titleProps,
+      withUpperTitle
+    } = this.props;
+    const shouldShowUpperTitle = ((field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) || hideLabels) && withUpperTitle && (field === null || field === void 0 ? void 0 : field.title);
+    const classes = mergeClasses(themeClasses, classNames);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/React.createElement(UTFieldLabel, _extends({
+      actions: actions,
+      className: classes.title,
+      readOnly: field.read_only,
+      required: field.required
+    }, titleProps), field === null || field === void 0 ? void 0 : field.title), /*#__PURE__*/React.createElement(RadioGroup, {
+      name: input.name,
+      value: input.value || '',
+      className: containerClassName,
+      onChange: this.handleChange
+    }, options.map((option, index) => this.renderRadioItem({
+      classes,
+      index,
+      option
+    }))));
+  }
+}
+UTRadioGroup.defaultProps = {
+  classes: {},
+  labelKey: 'name',
+  valueKey: 'value'
+};
+UTRadioGroup.propTypes = {
+  actions: arrayOf(buttonTypes),
+  classes: objectOf(string),
+  className: string,
+  classNames: objectOf(string),
+  containerClassName: string,
+  customRadioLabel: oneOfType([element, func]),
+  dataTestId: string,
+  disabled: bool,
+  disableRipple: bool,
+  divider: bool,
+  field: fieldType,
+  hideLabels: bool,
+  input: inputPropTypes,
+  labelKey: string,
+  options: arrayOf(object),
+  titleProps: object,
+  valueKey: string,
+  withUpperTitle: bool
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTRadioGroup);