@widergy/energy-ui 3.171.1 → 3.171.2

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

@@ -0,0 +1,889 @@
+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, { useState } from 'react';
+import { bool, shape, string } from 'prop-types';
+import { TITLE_VARIANTS } from '../../constants/inputs';
+import UTSelect from '.';
+const OPTIONS = [{
+  name: 'Electricidad',
+  value: 'electricity'
+}, {
+  name: 'Gas natural',
+  value: 'gas'
+}, {
+  name: 'Agua potable',
+  value: 'water'
+}, {
+  name: 'Energía solar',
+  value: 'solar'
+}, {
+  name: 'Biomasa',
+  value: 'biomass'
+}];
+const OPTIONS_WITH_CATEGORIES = [{
+  name: 'Residencial bajo',
+  value: 'res-low',
+  category: 'Residencial'
+}, {
+  name: 'Residencial medio',
+  value: 'res-mid',
+  category: 'Residencial'
+}, {
+  name: 'Residencial alto',
+  value: 'res-high',
+  category: 'Residencial'
+}, {
+  name: 'Comercial pequeño',
+  value: 'com-sm',
+  category: 'Comercial'
+}, {
+  name: 'Comercial grande',
+  value: 'com-lg',
+  category: 'Comercial'
+}, {
+  name: 'Industrial',
+  value: 'industrial',
+  category: 'Industrial'
+}];
+const PERSON_OPTIONS = [{
+  name: 'Alice García',
+  value: '1'
+}, {
+  name: 'Bob Martínez',
+  value: '2'
+}, {
+  name: 'Carol Rodríguez',
+  value: '3'
+}, {
+  name: 'David López',
+  value: '4'
+}, {
+  name: 'Elena Sánchez',
+  value: '5'
+}];
+const AvatarCustomRow = _ref => {
+  let {
+    isChecked,
+    item
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: 'center',
+      display: 'flex',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: 'center',
+      background: isChecked ? '#285AFF' : '#E4E6EA',
+      borderRadius: '50%',
+      color: isChecked ? '#FFFFFF' : '#091E42',
+      display: 'flex',
+      fontSize: 12,
+      fontWeight: 700,
+      height: 28,
+      justifyContent: 'center',
+      width: 28
+    }
+  }, item.name[0]), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: isChecked ? 700 : 400
+    }
+  }, item.name));
+};
+AvatarCustomRow.propTypes = {
+  isChecked: bool,
+  item: shape({
+    name: string,
+    value: string
+  })
+};
+const wrapperStyle = {
+  maxWidth: '360px',
+  padding: '1rem'
+};
+export default {
+  args: {
+    variant: 'select',
+    placeholder: 'Seleccioná una opción',
+    options: OPTIONS,
+    clearable: true,
+    disabled: false,
+    readOnly: false,
+    multiple: false,
+    required: false,
+    withAutoReset: true,
+    disableFilterOptions: false,
+    freeWidth: false,
+    menuWidth: ''
+  },
+  argTypes: {
+    options: {
+      control: false,
+      description: 'Array de opciones. Cada opción debe tener `name` y `value`.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'Array<{ name: string, value: string | number }>'
+        }
+      }
+    },
+    value: {
+      control: false,
+      description: 'Valor seleccionado actualmente.',
+      table: {
+        defaultValue: {
+          summary: 'null'
+        },
+        type: {
+          summary: 'string | Array<string | number>'
+        }
+      }
+    },
+    onChange: {
+      control: false,
+      description: 'Callback ejecutado al cambiar la selección.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto de placeholder del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Etiqueta superior del campo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    titleVariant: {
+      control: 'inline-radio',
+      description: 'Variante tipográfica del título.',
+      options: Object.values(TITLE_VARIANTS),
+      table: {
+        defaultValue: {
+          summary: TITLE_VARIANTS.large
+        },
+        type: {
+          summary: "'body' | 'small'"
+        }
+      }
+    },
+    helpText: {
+      control: 'text',
+      description: 'Texto de ayuda que se muestra debajo del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    error: {
+      control: 'text',
+      description: 'Mensaje de error a mostrar debajo del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el input.',
+      table: {
+        defaultValue: {
+          summary: false
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Pone el input en modo solo lectura.',
+      table: {
+        defaultValue: {
+          summary: false
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    clearable: {
+      control: 'boolean',
+      description: 'Muestra el botón para limpiar la selección.',
+      table: {
+        defaultValue: {
+          summary: true
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    multiple: {
+      control: 'boolean',
+      description: 'Permite seleccionar múltiples opciones.',
+      table: {
+        defaultValue: {
+          summary: false
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Marca el campo como requerido en el título.',
+      table: {
+        defaultValue: {
+          summary: false
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    icon: {
+      control: 'text',
+      description: 'Nombre de icono Tabler a mostrar a la izquierda del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    prefix: {
+      control: 'text',
+      description: 'Texto prefijo a mostrar dentro del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    suffix: {
+      control: 'text',
+      description: 'Texto sufijo a mostrar dentro del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'inline-radio',
+      description: 'Variante visual del input. `select` usa fondo blanco, `picker` usa fondo transparente (para usar sobre otros fondos).',
+      options: ['select', 'picker'],
+      table: {
+        defaultValue: {
+          summary: 'select'
+        },
+        type: {
+          summary: "'select' | 'picker'"
+        }
+      }
+    },
+    noOptionsText: {
+      control: 'text',
+      description: 'Texto cuando no hay opciones disponibles.',
+      table: {
+        defaultValue: {
+          summary: 'No hay opciones disponibles'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    noMatchesText: {
+      control: 'text',
+      description: 'Texto cuando la búsqueda no encuentra resultados.',
+      table: {
+        defaultValue: {
+          summary: 'No hay coincidencias con tu búsqueda'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disableFilterOptions: {
+      control: 'boolean',
+      description: 'Deshabilita el filtrado interno de opciones por búsqueda.',
+      table: {
+        defaultValue: {
+          summary: false
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    withAutoReset: {
+      control: 'boolean',
+      description: 'Resetea el valor si la opción seleccionada deja de existir en `options`.',
+      table: {
+        defaultValue: {
+          summary: true
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    freeWidth: {
+      control: 'boolean',
+      description: 'Permite que el dropdown supere el ancho del input.',
+      table: {
+        defaultValue: {
+          summary: false
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    menuWidth: {
+      control: 'text',
+      description: 'Ancho fijo del dropdown. Acepta cualquier valor CSS válido (`"300px"`, `"20rem"`, `"50vw"`). Si no se pasa, el menú hereda el ancho del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    className: {
+      control: false,
+      description: 'Clase CSS adicional para el contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    CustomRow: {
+      control: false,
+      description: 'Componente React personalizado para renderizar cada opción del dropdown. Recibe `{ item, isChecked }` donde `item` es el objeto de la opción e `isChecked` indica si está seleccionada.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'elementType'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'Test ID para el input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    errorDataTestId: {
+      control: false,
+      description: 'Test ID para el componente de validación de error.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    inputSize: {
+      control: {
+        type: 'select'
+      },
+      description: 'Tamaño del input.',
+      options: ['small', 'large'],
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: "'small' | 'large'"
+        }
+      }
+    },
+    itemDataTestId: {
+      control: false,
+      description: 'Test ID para cada ítem del dropdown.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    listDataTestId: {
+      control: false,
+      description: 'Test ID para el contenedor de la lista.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    action: {
+      control: 'object',
+      description: 'Botón de acción en el adornment derecho. Recibe `{ Icon, onClick, size }`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    alwaysShowPlaceholder: {
+      control: 'boolean',
+      description: 'Muestra el placeholder incluso cuando hay un valor seleccionado.',
+      table: {
+        defaultValue: {
+          summary: true
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    actions: {
+      control: false,
+      description: 'Acciones adicionales que se muestran junto al título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Array<buttonTypes>'
+        }
+      }
+    },
+    autocompleteProps: {
+      control: false,
+      description: 'Props adicionales pasadas directamente al componente Autocomplete de MUI.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    listProps: {
+      control: false,
+      description: 'Props adicionales para el componente ListboxComponent.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    onChangeSearchTerm: {
+      control: false,
+      description: 'Callback ejecutado al cambiar el texto de búsqueda.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    }
+  },
+  component: UTSelect,
+  parameters: {
+    controls: {
+      exclude: ['onChange', 'onChangeSearchTerm', 'actions', 'autocompleteProps', 'listProps', 'className', 'CustomRow', 'dataTestId', 'errorDataTestId', 'itemDataTestId', 'listDataTestId', 'version']
+    },
+    docs: {
+      description: {
+        component: 'Componente de selección con búsqueda integrada (V1) y versión legacy compatible con Redux Form (V0). V1 soporta selección simple y múltiple, categorías, adornments y búsqueda filtrada.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTSelect'
+};
+const SelectWrapper = _ref2 => {
+  let {
+    menuWidth,
+    multiple,
+    ...props
+  } = _ref2;
+  const [value, setValue] = useState(multiple ? [] : null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(UTSelect, _extends({}, props, {
+    menuWidth: menuWidth || undefined,
+    multiple: multiple,
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  })));
+};
+SelectWrapper.propTypes = {
+  menuWidth: string,
+  multiple: bool
+};
+const PreselectedWrapper = _ref3 => {
+  let {
+    initialValue = 'gas',
+    ...props
+  } = _ref3;
+  const [value, setValue] = useState(initialValue);
+  return /*#__PURE__*/React.createElement(UTSelect, _extends({}, props, {
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  }));
+};
+PreselectedWrapper.propTypes = {
+  initialValue: string
+};
+const rowStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.5rem',
+  maxWidth: '360px',
+  padding: '1rem'
+};
+const labelStyle = {
+  fontSize: '0.7rem',
+  color: '#94a3b8',
+  fontFamily: 'monospace'
+};
+export const Playground = {
+  name: 'Playground',
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const Simple = {
+  name: 'Simple',
+  args: {
+    placeholder: 'Seleccioná un servicio'
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const ConTitulo = {
+  name: 'Con título',
+  args: {
+    helpText: 'El tipo de servicio determina el método de facturación.',
+    placeholder: 'Seleccioná un servicio',
+    required: true,
+    title: 'Tipo de servicio'
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const Multiple = {
+  name: 'Múltiple',
+  args: {
+    clearable: false,
+    multiple: true,
+    placeholder: 'Seleccioná uno o más servicios',
+    title: 'Servicios activos'
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const ConCategorias = {
+  name: 'Con categorías',
+  args: {
+    options: OPTIONS_WITH_CATEGORIES,
+    placeholder: 'Seleccioná una tarifa',
+    title: 'Categoría tarifaria'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Las opciones se agrupan automáticamente por la propiedad `category`. Las opciones seleccionadas se mueven al tope de su categoría al abrir el dropdown.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const Disabled = {
+  name: 'Deshabilitado',
+  args: {
+    disabled: true,
+    placeholder: 'Seleccioná un servicio',
+    title: 'Tipo de servicio'
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const SoloLectura = {
+  name: 'Solo lectura',
+  args: {
+    placeholder: 'Seleccioná un servicio',
+    readOnly: true,
+    title: 'Tipo de servicio'
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(PreselectedWrapper, args))
+};
+export const VariantSelect = {
+  name: 'Variant — Select',
+  args: {
+    placeholder: 'Seleccioná un servicio',
+    title: 'Tipo de servicio',
+    variant: 'select'
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const VariantPicker = {
+  name: 'Variant — Picker',
+  args: {
+    placeholder: 'Seleccioná un servicio',
+    title: 'Tipo de servicio',
+    variant: 'picker'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Variante con fondo transparente. Ideal para usar sobre cards o fondos con color.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f1f5f9',
+      borderRadius: '0.5rem',
+      padding: '1.5rem',
+      maxWidth: '360px'
+    }
+  }, /*#__PURE__*/React.createElement(SelectWrapper, args))
+};
+export const ClearableSelect = {
+  name: 'Clearable — Select',
+  args: {
+    placeholder: 'Seleccioná un servicio',
+    title: 'Tipo de servicio',
+    variant: 'select'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparación de `clearable={true}` (muestra la X al completar) vs `clearable={false}` (oculta la X) en variant select.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: rowStyle
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: labelStyle
+  }, "clearable=true (default)"), /*#__PURE__*/React.createElement(PreselectedWrapper, _extends({}, args, {
+    clearable: true
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: labelStyle
+  }, "clearable=false"), /*#__PURE__*/React.createElement(PreselectedWrapper, _extends({}, args, {
+    clearable: false
+  }))))
+};
+export const ClearablePicker = {
+  name: 'Clearable — Picker',
+  args: {
+    placeholder: 'Seleccioná un servicio',
+    title: 'Tipo de servicio',
+    variant: 'picker'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparación de `clearable={true}` vs `clearable={false}` en variant picker. Útil para dropdowns embebidos donde el borrado puede no tener sentido.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f1f5f9',
+      borderRadius: '0.5rem',
+      padding: '1.5rem',
+      maxWidth: '360px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5rem'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: labelStyle
+  }, "clearable=true (default)"), /*#__PURE__*/React.createElement(PreselectedWrapper, _extends({}, args, {
+    clearable: true
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: labelStyle
+  }, "clearable=false"), /*#__PURE__*/React.createElement(PreselectedWrapper, _extends({}, args, {
+    clearable: false
+  })))))
+};
+export const ConError = {
+  name: 'Con error',
+  args: {
+    error: 'Este campo es requerido.',
+    placeholder: 'Seleccioná un servicio',
+    title: 'Tipo de servicio'
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const PickerConSeleccion = {
+  name: 'Picker — con selección previa',
+  args: {
+    placeholder: 'Seleccioná un servicio',
+    title: 'Tipo de servicio',
+    variant: 'picker'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'En `variant="picker"` al hacer foco se muestran todas las opciones aunque haya una seleccionada. El filtrado solo aplica si el usuario empieza a escribir.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f1f5f9',
+      borderRadius: '0.5rem',
+      padding: '1.5rem',
+      maxWidth: '360px'
+    }
+  }, /*#__PURE__*/React.createElement(PreselectedWrapper, args))
+};
+export const ConFilaPersonalizada = {
+  name: 'Con fila personalizada (CustomRow)',
+  args: {
+    multiple: true,
+    options: PERSON_OPTIONS,
+    placeholder: 'Seleccioná usuarios',
+    title: 'Con fila personalizada (CustomRow)'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'La prop `CustomRow` recibe un componente React con `{ item, isChecked }` y reemplaza el renderizado por defecto de cada opción del dropdown.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, _extends({}, args, {
+    CustomRow: AvatarCustomRow
+  }))
+};
+export const ConTextoDeAyuda = {
+  name: 'Con texto de ayuda',
+  args: {
+    helpText: 'Podés buscar escribiendo en el campo.',
+    placeholder: 'Seleccioná una opción',
+    title: 'Con texto de ayuda'
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const SinOpciones = {
+  name: 'Sin opciones',
+  args: {
+    options: [],
+    placeholder: 'Sin opciones',
+    title: 'Sin opciones disponibles'
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const TestSite = {
+  name: 'Test Site',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Casos de prueba para el Storybook Test Runner: single, múltiple, CustomRow, disabled, error.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 24,
+      maxWidth: 400
+    }
+  }, /*#__PURE__*/React.createElement(SelectWrapper, _extends({}, args, {
+    placeholder: "Selecci\xF3n simple",
+    title: "Single"
+  })), /*#__PURE__*/React.createElement(SelectWrapper, _extends({}, args, {
+    multiple: true,
+    placeholder: "Selecci\xF3n m\xFAltiple",
+    title: "Multiple"
+  })), /*#__PURE__*/React.createElement(SelectWrapper, _extends({}, args, {
+    CustomRow: AvatarCustomRow,
+    multiple: true,
+    options: PERSON_OPTIONS,
+    placeholder: "Custom row",
+    title: "Custom Row"
+  })), /*#__PURE__*/React.createElement(SelectWrapper, _extends({}, args, {
+    disabled: true,
+    placeholder: "Deshabilitado",
+    title: "Disabled"
+  })), /*#__PURE__*/React.createElement(SelectWrapper, _extends({}, args, {
+    error: "Campo requerido",
+    placeholder: "Con error",
+    required: true,
+    title: "Error"
+  })))
+};