componente · @solu30/ui-kit/input

ArrayItemsEditor

Editor de una lista de objetos: una tarjeta por ítem, con campos configurables y alta y baja.

Seguir leyendo — 2 párrafos más

ArrayItemsEditor — dynamic list editor for structured objects.

Renders a card per item with configurable text/textarea fields and add/remove controls. Generic over any flat record type.

2 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

cmp-packages
dietaly

El componente, montado

Cargando el espécimen…

export function ArrayEditorMatrix() {
  const [benefits, setBenefits] = useState<Benefit[]>([
    { icon: 'ancla', title: 'Tripulación incluida', text: 'Capitán y marinero durante toda la salida.' },
    { icon: 'copa', title: 'Catering a bordo', text: 'Menú de tres pasos, opción vegetariana.' },
  ])

  return (
    <Stage label="ArrayItemsEditor · lista dinámica, vacía y disabled" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
        <ArrayItemsEditor<Benefit>
          items={benefits}
          onChange={setBenefits}
          fields={BENEFIT_FIELDS}
          addLabel="Agregar beneficio"
        />
        <ArrayItemsEditor<Benefit>
          items={[]}
          onChange={() => {}}
          fields={BENEFIT_FIELDS}
          addLabel="Agregar beneficio"
          emptyText="Todavía no cargaste beneficios para este charter."
          disabled
        />
      </div>
    </Stage>
  )
}

De specimens/input.tsx · ArrayEditorMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { ArrayItemsEditor } from '@solu30/ui-kit/input'

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
items	sí	`T[]`	Current list of items
onChange	sí	`(items: T[]) => void`	Called with the updated list on any change
fields	sí	`FieldDef[]`	Field definitions — each entry renders one input or textarea per item
addLabel	sí	`string`	Label for the "add item" button
emptyText	opcional	`string`	Text shown when the list is empty (default: "No items yet.")
disabled	opcional	`boolean`	Disables all inputs and add/remove buttons

Ejemplo del paquete

<ArrayItemsEditor<BenefitItem>
  items={benefits}
  onChange={setBenefits}
  fields={[
    { key: 'icon', label: 'Icon', type: 'text', placeholder: 'heart, leaf…' },
    { key: 'title', label: 'Title', type: 'text' },
    { key: 'text', label: 'Description', type: 'textarea' },
  ]}
  addLabel="Add benefit"
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.