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

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

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

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

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

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

$ 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

or

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