@balafla/core-components-codemod NPM

Тулзы для модификации кода

Использование

Установить к себе на проект:

$ yarn add --dev @alfalab/core-components-codemod

Запустить нужные трансформеры:

Какой-то один трансформер:

$ npx @alfalab/core-components-codemod --transformers=button-xs --glob='src/**/*.tsx'

Можно сразу несколько трансформеров:

$ npx @alfalab/core-components-codemod --transformers=button-xs,button-views --glob='src/**/*.tsx'

Сейчас замена компонентов доступна только для кода, написанного на typescript. Если кому-то нужно мигрировать с js - дайте знать, докрутим.

Список доступных трансформеров

Название	Описание
paragraph	Меняет компонент `Paragraph` из `arui-feather` на актульный компонент из `core-components`
label	Меняет компонент `Label` из `arui-feather` на актульный компонент из `core-components`
heading	Меняет компонент `Heading` из `arui-feather` на актульный компонент из `core-components`
button-xs	Изменяет размер кнопки с `xs` на `xxs`
button-views	Меняет вид кнопки с view `filled` на `secondary`, `outlined` на `tertiary`, `transparent` на `secondary`, `primary` на `accent`
replace-color-vars	Заменяет цветовые токены при переходе на core-components v27 и выше:
	`--color-light-border-secondary-inverted`: `--color-light-border-underline`
	`--color-light-border-tertiary-inverted`: `--color-light-border-underline-inverted`
	`--color-light-graphic-neutral`: `--color-light-graphic-quaternary`
	`--color-light-bg-neutral`: `--color-light-bg-quaternary`
	`--color-dark-graphic-neutral`: `--color-dark-graphic-quaternary`
	`--color-dark-bg-neutral`: `--color-dark-bg-quaternary`
	`--color-static-bg-neutral-light`: `--color-static-bg-quaternary-light`
	`--color-static-bg-neutral-dark`: `--color-static-bg-quaternary-dark`
delete-dist	Удаляет '/dist' в импортах отдельных пакетов. Может принимать дополнительный аргумент командной строки --packages, в котором указывается список компонентов, импорты которых нужно обработать, например (--packages="modal,button")
button-breakpoint-768	Добавляет свойство breakpoint со значением 768 к респонсивной кнопке
button-views-45	Меняет вид кнопки с view `tertiary` на `outlined`, `link` на `transparent`, `ghost` на `text`
skeleton-blur	Добавляет свойство `allowBackdropBlur` со значение true к компоненту Skeleton
status-soft	Изменяет view компонента Status с `soft` на `muted-alt`
input-type-card	Заменяет атрибут type со значением 'card' на inputMode со значением 'numeric' в компоненте Input
spinner	Меняет `size` на `preset`

42 мажорный релиз

Для запуска всех трансформеров можно воспользоваться командой

npx @alfalab/core-components-codemod --transformers=42-autocomplete,42-button,42-calendar,42-calendar-input,42-checkbox-group,42-code-input,42-confirmation,42-date-range-input,42-date-time-input,42-filter-tag,42-form-control,42-input,42-modal,42-picker-button,42-plate,42-radio-group,42-select,42-side-panel,42-system-message,42-tabs,42-tag,42-toast,42-toast-plate,42-tooltip --glob='src/**/*.tsx'

Разработка

Под капотом - jscodeshift.

Запуск тестов

$ yarn test:codemod

$ npx jest packages/codemod/src --config=jest.codemod.config.js

chalk lodash.kebabcase shelljs yargs @codeshift/utils postcss jscodeshift glob

2.7.0

9 months ago