@widergy/energy-ui 3.168.0 → 3.169.0

package/dist/esm/components/UTSelect/versions/V1/UTSelectV1.stories.js

@@ -0,0 +1,733 @@
+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 { joinArgTypes } from 'stories/utils';
+import UTSelect from '.';
+const CustomRowItem = shape({
+  name: string,
+  value: string
+});
+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: CustomRowItem
+};
+const SimpleCustomRow = _ref2 => {
+  let {
+    isChecked,
+    item
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: isChecked ? 700 : 400
+    }
+  }, item.name));
+};
+SimpleCustomRow.propTypes = {
+  isChecked: bool,
+  item: CustomRowItem
+};
+const 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 CATEGORIZED_OPTIONS = [{
+  name: 'Opción A1',
+  value: 'a1',
+  category: 'Categoría A'
+}, {
+  name: 'Opción A2',
+  value: 'a2',
+  category: 'Categoría A'
+}, {
+  name: 'Opción B1',
+  value: 'b1',
+  category: 'Categoría B'
+}, {
+  name: 'Opción B2',
+  value: 'b2',
+  category: 'Categoría B'
+}, {
+  name: 'Opción C1',
+  value: 'c1',
+  category: 'Categoría C'
+}];
+const StatefulSelect = args => {
+  const [value, setValue] = useState(args.multiple ? [] : null);
+  return /*#__PURE__*/React.createElement(UTSelect, _extends({}, args, {
+    onChange: setValue,
+    value: value
+  }));
+};
+export default {
+  title: 'Energy-UI/UTSelect/V1',
+  component: UTSelect,
+  args: {
+    clearable: true,
+    disabled: false,
+    disableFilterOptions: false,
+    freeWidth: false,
+    multiple: false,
+    noMatchesText: 'No hay coincidencias con tu búsqueda',
+    noOptionsText: 'No hay opciones disponibles',
+    options: OPTIONS,
+    placeholder: 'Seleccionar...',
+    readOnly: false,
+    required: false,
+    title: 'Título del campo',
+    titleVariant: 'large',
+    variant: 'select',
+    withAutoReset: true
+  },
+  argTypes: {
+    action: {
+      control: 'object',
+      description: 'Botón de acción adicional. Objeto con { Icon, onClick, size }.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    actions: {
+      control: false,
+      description: 'Array de botones de acción en el área del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    alwaysShowPlaceholder: {
+      control: 'boolean',
+      description: 'Muestra el placeholder incluso cuando hay un valor seleccionado.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    autocompleteProps: {
+      control: false,
+      description: 'Props adicionales para el Autocomplete de MUI.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    className: {
+      control: false,
+      description: 'Clase CSS adicional para el contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    clearable: {
+      control: 'boolean',
+      description: 'Muestra el botón para limpiar la selección.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    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'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el select.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    disableFilterOptions: {
+      control: 'boolean',
+      description: 'Desactiva el filtrado de opciones al escribir en el campo de búsqueda.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    error: {
+      control: 'text',
+      description: 'Mensaje de error a mostrar debajo del 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'
+        }
+      }
+    },
+    freeWidth: {
+      control: 'boolean',
+      description: 'Permite que el dropdown tenga ancho libre en lugar de ajustarse al input.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    helpText: {
+      control: 'text',
+      description: 'Texto de ayuda mostrado debajo del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    icon: {
+      control: 'text',
+      description: 'Nombre del ícono a mostrar como adorno izquierdo del input.',
+      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: joinArgTypes(['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'
+        }
+      }
+    },
+    listProps: {
+      control: false,
+      description: 'Props adicionales para el ListboxComponent interno.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    multiple: {
+      control: 'boolean',
+      description: 'Habilita la selección múltiple.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    noMatchesText: {
+      control: 'text',
+      description: 'Texto cuando no hay coincidencias en la búsqueda.',
+      table: {
+        defaultValue: {
+          summary: "'No hay coincidencias con tu búsqueda'"
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    noOptionsText: {
+      control: 'text',
+      description: 'Texto cuando no hay opciones disponibles.',
+      table: {
+        defaultValue: {
+          summary: "'No hay opciones disponibles'"
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onChange: {
+      control: false,
+      description: 'Callback al cambiar la selección. Recibe el valor seleccionado.',
+      table: {
+        defaultValue: {
+          summary: '() => {}'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    onChangeSearchTerm: {
+      control: false,
+      description: 'Callback al cambiar el término de búsqueda.',
+      table: {
+        defaultValue: {
+          summary: '() => {}'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    options: {
+      control: 'object',
+      description: 'Array de opciones. Cada opción: { name, value, category? }.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto placeholder del campo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    prefix: {
+      control: 'text',
+      description: 'Texto prefijo dentro del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Modo solo lectura: el dropdown puede abrirse pero no puede modificarse.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Muestra el indicador de campo requerido junto al título.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    suffix: {
+      control: 'text',
+      description: 'Texto sufijo dentro del input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título mostrado sobre el input.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    titleVariant: {
+      control: {
+        type: 'select'
+      },
+      description: 'Tamaño del título.',
+      options: ['large', 'small'],
+      table: {
+        defaultValue: {
+          summary: "'large'"
+        },
+        type: {
+          summary: joinArgTypes(['large', 'small'])
+        }
+      }
+    },
+    value: {
+      control: false,
+      description: 'Valor seleccionado. String para selección simple, array para múltiple.',
+      table: {
+        defaultValue: {
+          summary: 'null'
+        },
+        type: {
+          summary: joinArgTypes(['string', 'array'])
+        }
+      }
+    },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      description: 'Variante visual del select.',
+      options: ['select', 'picker'],
+      table: {
+        defaultValue: {
+          summary: "'select'"
+        },
+        type: {
+          summary: joinArgTypes(['select', 'picker'])
+        }
+      }
+    },
+    withAutoReset: {
+      control: 'boolean',
+      description: 'Resetea el valor seleccionado si la opción deja de estar disponible en options.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ['classes']
+    },
+    docs: {
+      description: {
+        component: 'Componente dropdown de selección single/múltiple basado en MUI Autocomplete. Soporta búsqueda, agrupación por categorías, adornos (prefijo, sufijo, íconos) y renderizado personalizado de opciones vía `CustomRow`.'
+      }
+    }
+  }
+};
+export const Playground = {
+  render: args => /*#__PURE__*/React.createElement(StatefulSelect, args),
+  name: 'Playground'
+};
+export const SeleccionSimple = {
+  render: args => /*#__PURE__*/React.createElement(StatefulSelect, args),
+  args: {
+    placeholder: 'Seleccioná una opción',
+    title: 'Selección simple'
+  },
+  name: 'Selección simple'
+};
+export const SeleccionMultiple = {
+  render: args => /*#__PURE__*/React.createElement(StatefulSelect, args),
+  args: {
+    multiple: true,
+    placeholder: 'Seleccioná una o más opciones',
+    title: 'Selección múltiple'
+  },
+  name: 'Selección múltiple'
+};
+export const ConCategorias = {
+  render: args => /*#__PURE__*/React.createElement(StatefulSelect, args),
+  args: {
+    options: CATEGORIZED_OPTIONS,
+    placeholder: 'Seleccioná una opción',
+    title: 'Con categorías'
+  },
+  name: 'Con categorías',
+  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.'
+      }
+    }
+  }
+};
+export const ConFilaPersonalizada = {
+  render: args => /*#__PURE__*/React.createElement(StatefulSelect, args),
+  args: {
+    CustomRow: AvatarCustomRow,
+    multiple: true,
+    placeholder: 'Seleccioná usuarios',
+    title: 'Con fila personalizada (CustomRow)'
+  },
+  name: '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.'
+      }
+    }
+  }
+};
+export const ConError = {
+  render: args => /*#__PURE__*/React.createElement(StatefulSelect, args),
+  args: {
+    error: 'Este campo es requerido.',
+    placeholder: 'Seleccioná una opción',
+    required: true,
+    title: 'Con error'
+  },
+  name: 'Con error'
+};
+export const ConTextoDeAyuda = {
+  render: args => /*#__PURE__*/React.createElement(StatefulSelect, args),
+  args: {
+    helpText: 'Podés buscar escribiendo en el campo.',
+    placeholder: 'Seleccioná una opción',
+    title: 'Con texto de ayuda'
+  },
+  name: 'Con texto de ayuda'
+};
+export const Deshabilitado = {
+  args: {
+    disabled: true,
+    placeholder: 'Campo deshabilitado',
+    title: 'Deshabilitado'
+  },
+  name: 'Deshabilitado'
+};
+export const SoloLectura = {
+  args: {
+    placeholder: 'Solo lectura',
+    readOnly: true,
+    title: 'Solo lectura',
+    value: '1'
+  },
+  name: 'Solo lectura'
+};
+export const SinOpciones = {
+  args: {
+    options: [],
+    placeholder: 'Sin opciones',
+    title: 'Sin opciones disponibles'
+  },
+  name: 'Sin opciones'
+};
+const SingleSelect = () => {
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/React.createElement(UTSelect, {
+    onChange: setValue,
+    options: OPTIONS,
+    placeholder: "Selecci\xF3n simple",
+    title: "Single",
+    value: value
+  });
+};
+const MultiSelect = () => {
+  const [value, setValue] = useState([]);
+  return /*#__PURE__*/React.createElement(UTSelect, {
+    multiple: true,
+    onChange: setValue,
+    options: OPTIONS,
+    placeholder: "Selecci\xF3n m\xFAltiple",
+    title: "Multiple",
+    value: value
+  });
+};
+const CustomRowSelect = () => {
+  const [value, setValue] = useState([]);
+  return /*#__PURE__*/React.createElement(UTSelect, {
+    CustomRow: AvatarCustomRow,
+    multiple: true,
+    onChange: setValue,
+    options: OPTIONS,
+    placeholder: "Custom row",
+    title: "Custom Row",
+    value: value
+  });
+};
+export const TestSite = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 24,
+      maxWidth: 400
+    }
+  }, /*#__PURE__*/React.createElement(SingleSelect, null), /*#__PURE__*/React.createElement(MultiSelect, null), /*#__PURE__*/React.createElement(CustomRowSelect, null), /*#__PURE__*/React.createElement(UTSelect, {
+    disabled: true,
+    options: OPTIONS,
+    placeholder: "Deshabilitado",
+    title: "Disabled",
+    value: null,
+    onChange: () => {}
+  }), /*#__PURE__*/React.createElement(UTSelect, {
+    error: "Campo requerido",
+    options: OPTIONS,
+    placeholder: "Con error",
+    required: true,
+    title: "Error",
+    value: null,
+    onChange: () => {}
+  })),
+  name: 'Test Site',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Casos de prueba para el Storybook Test Runner: single, múltiple, CustomRow, disabled, error.'
+      }
+    }
+  }
+};