@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -0,0 +1,667 @@
+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 './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'
+      }
+    },
+    area: {
+      control: 'boolean',
+      description: 'Muestra un área de fondo alrededor del grupo de opciones (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    areaProps: {
+      control: 'object',
+      description: 'Personalización del área de fondo: `colorTheme`, `shade`, `borderColorTheme`, `borderShade` (V1 only). Sin `colorTheme` no se agrega fondo; sin `borderColorTheme` no se agrega borde.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    iconProps: {
+      control: 'object',
+      description: 'Props adicionales para el ícono de cada opción (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    iconSelectedProps: {
+      control: 'object',
+      description: 'Props adicionales para el ícono de la opción seleccionada, sobrescriben `iconProps` (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    nameProps: {
+      control: 'object',
+      description: 'Props adicionales para el UTLabel del nombre de cada opción (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    nameSelectedProps: {
+      control: 'object',
+      description: 'Props adicionales para el UTLabel del nombre de la opción seleccionada, sobrescriben `nameProps` (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      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: SPACING.MEDIUM,
+    verticalSpacing: SPACING.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'
+};
+export const V1WithArea = {
+  render: V1Template,
+  args: {
+    version: 'V1',
+    options: defaultOptions,
+    title: 'Opciones con Área de Fondo',
+    value: '',
+    area: true,
+    areaProps: {
+      colorTheme: 'light',
+      borderColorTheme: 'gray'
+    },
+    iconProps: {
+      colorTheme: 'dark'
+    },
+    iconSelectedProps: {
+      colorTheme: 'accent'
+    },
+    nameSelectedProps: {
+      weight: 'bold'
+    }
+  },
+  name: 'V1 - Con Área de Fondo'
+};
+
+// 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

@@ -1 +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:version="V0",...props}=_ref;const Component={V0:V0,V1:V1}[version];return React.createElement(Component,props)};UTRadioGroup.propTypes={version:string};export default UTRadioGroup;
+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;