Subir de versión
Antes de la 1.0 una versión menor puede romper: lo dice el registro de cambios en cada entrada que empieza por Rompe. Para no tener que leerlo entero, la CLI reescribe lo que se puede reescribir y avisa de lo que no.
Paso a paso
- Sube la dependencia a la 0.17.1:
npm install @amset/ui@latest. npx amset-ui doctordice qué queda mal en el proyecto, con el fichero.npx amset-ui migrate --dry-runcuenta los cambios sin escribir;npx amset-ui migratelos hace.- Lo que no puede decidir solo lo deja como aviso con fichero y línea: un
...props, un.sentidoleído en un manejador, unexport { Viejo } from. Eso va a mano. - Pon
npx amset-ui migrate --checken la CI: sale con 1 si alguien vuelve a escribir un nombre retirado.
app/pedidos.tsx 6 cambio(s) Cambiaria: 6 cambio(s) en 1 fichero(s).import { Button, Table, Tooltip } from '@amset/ui'import '@amset/ui/estilos/boton.css' const columnas = [ { key: 'cliente', title: 'Cliente', ordenable: true }, { key: 'total', title: 'Total', numerica: true },] export function Pedidos({ filas }: { readonly filas: readonly { id: string; cliente: string; total: number }[] }) { return ( <> <Tooltip content="Exportar" para={<Button>Exportar</Button>} /> <Table aria-label="Pedidos" columns={columnas} rows={filas} enServidor paginacion={{ pageSize: 20 }} /> </> )}import { Button, Table, Tooltip } from '@amset/ui'import '@amset/ui/styles/button.css' const columnas = [ { key: 'cliente', title: 'Cliente', sortable: true }, { key: 'total', title: 'Total', numeric: true },] export function Pedidos({ filas }: { readonly filas: readonly { id: string; cliente: string; total: number }[] }) { return ( <> <Tooltip content="Exportar" trigger={<Button>Exportar</Button>} /> <Table aria-label="Pedidos" columns={columnas} rows={filas} serverSide pagination={{ pageSize: 20 }} /> </> )}npx amset-ui migrate.Lo que va a mano
data-temaydata-densidaden tu HTML pasan adata-themeydata-density.migrateno los toca porque pueden ser de tu propia aplicación.- Las claves
linea1ylinea2de una dirección pasan aline1yline2; el compilador ya te propone el nombre nuevo. - Una hoja importada desde CSS (
@import '@amset/ui/estilos.css'oestilos/<hoja>.css) pasa astyles.cssostyles/<sheet>.css. Las que se importan desde JavaScript sí las cambiamigrate. - Las clases raíz renombradas en la 0.17:
.amset-code(el campo de código de un solo uso) es.amset-code-field,.amset-headinges.amset-page-headery.amset-listes.amset-listbox. Solo afecta a quien las estilaba desde fuera.
Lo que cambió al pasar la API al inglés
Desde la 0.17 —la primera que se publica después de la 0.14— todo lo que se toca desde fuera está en inglés: subrutas, hojas, ficheros, atributos data-*, clases y la propia CLI. Esta es la tabla del registro de cambios:
| Antes | Ahora |
|---|---|
@amset/ui/estilos.css, @amset/ui/estilos/<hoja>.css | @amset/ui/styles.css, @amset/ui/styles/<sheet>.css (las hojas, también en inglés: boton.css → button.css) |
@amset/ui/formulario, @amset/ui/esquemas | @amset/ui/form, @amset/ui/schemas |
fichas.json, mandos.json, ejemplos.json, idiomas/*.json | docs.json, knobs.json, examples.json, locales/*.json (y sus claves: component, module, title, family, description, stories, name, knobs, story, code) |
npx amset-ui tema, npx amset-ui mandos, npx amset-ui migrar, amset-tema.css | npx amset-ui theme, npx amset-ui knobs, npx amset-ui migrate, amset-theme.css; add escribe styles/ y styles.css |
data-tema, data-densidad | data-theme, data-density |
data-cargando, data-seleccionada, data-deshabilitada (Card) y el resto de data-* en castellano | data-loading, data-selected, data-disabled… (data-actual → data-current, data-sin-leer → data-unread, data-nivel → data-level…) |
@layer amset-ui.componentes | @layer amset-ui.components |
Clases amset-no-imprimir, amset-only-impresion, amset-for-imprimir, amset-card-pago*, amset-motion-esencial, amset-order-state__hito | amset-print-hidden, amset-print-only, amset-printable, amset-payment-card*, amset-motion-essential, amset-order-state__milestone (y --amset-order-state-milestone-gap) |
Animaciones amset-*-entra, -entrar, -salir, -aparece, amset-progress-va-y-viene, amset-rating-marcar | -enter, -exit, -appear, amset-progress-back-and-forth, amset-rating-mark |
csvDeTabla, descargarCsv, separadorPorDefecto, filtrarFilas, ordenarFilas, paginarFilas, opcionesDeColumna, valorDeCelda | tableToCsv, downloadCsv, defaultSeparator, filterRows, sortRows, paginateRows, columnOptions, cellValue |
calcularFactura, errorDeImporte | calculateInvoice, amountError; y rejectionReason / FileLimits de FileUpload, que el README daba por exportados y no lo estaban |
Tooltip para, AddressField linea1 / linea2, parseHotkey(...).tecla | Tooltip trigger, line1 / line2, .key |
PasswordField nueva | newPassword |
Avatar state="inline" (era «en línea» mal traducido) | state="online" |
TaxZone: peninsula, baleares, canarias | mainland, balearic-islands, canary-islands (ceuta y melilla se quedan) |
TransferList moveText(..., 'elegidos' | 'disponibles'), ROOT_FIELD = 'raiz' | 'chosen' | 'available', 'root' |
Claves de textos CabeceraDeAgenda.*, FilaDeFranja.*, TablaDeDias.*, NumerosDePagina.*, TiraDeDias.*, HorasDelDia.* | AgendaHeader.*, SlotRow.*, DayTable.*, PageNumbers.*, DayStrip.*, DayHours.* |
Ids de Storybook componente-boton--jugar, componentes-*, sistema-*, fundamentos-* | component-button--playground, review-*, system-*, foundations-*; los exports de las historias también en inglés (Cargando → Loading) y el nombre que se ve, en castellano |
Lo que se retiró en la 0.14
La 0.14 quitó los alias con los nombres de antes. Es lo primero que reescribe migrate:
Rompe: fuera los nombres de antes que quedaban como alias (AMS-1761). Un alias obsoleto es código muerto: se van los de Table (enServidor, seleccionadas, alSeleccionar, paginacion, columnasConfigurables, alCambiarColumnas, redimensionables, alPulsarFila, barraSuperior; en la columna numerica, ordenable, filtrable, ocultaPorDefecto, pegada, cabeceraDeFila; y sentido en el orden, con su tipo TableSortInput), los nombres en español del formulario (Formulario, CampoTextoForm, CampoAreaForm, SelectorForm, SelectorFechaForm, CasillaForm, InterruptorForm, GrupoRadioForm, BuscadorForm, BotonEnviar, resolverDeEsquema, PropsForm, EsquemaEstandar, IncidenciaEstandar, ShippingAnswer), PropsCalendarRange, ariaGranularity y ERROR_NETWORK_COUPON. La tabla de equivalencias está en el README. amset-ui-web y amset-assistant suben a esta versión a la vez.