@alfalab/core-components-codemod

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

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

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

$ 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 мажорный релиз

Название	Описание
42-autocomplete	- Если импортировалась десктопная версия компонента из индекса, то к пути импорта добавит /desktop, InputAutocomplete заменит на InputAutocompleteDesktop. - Заменяет responsive точку входа на индекс. InputAutocompleteResponsive заменит на InputAutocomplete
42-calendar	- Заменяет responsive точку входа на индекс. CalendarResponsive заменит на Calendar - Если импортировалась десктопная версия компонента из индекса, то к пути импорта добавит /desktop, Calendar заменит на CalendarDesktop - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/calendar/shared.
42-calendar-input	- Заменяет responsive точку входа на индекс. CalendarInputResponsive заменит на CalendarInput - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/calendar-input/shared.
42-confirmation	- Заменяет responsive точку входа на индекс. ConfirmationResponsive заменит на Confirmation - Если импортировалась десктопная версия компонента из индекса, то к пути импорта добавит /desktop, Confirmation заменит на ConfirmationDesktop - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/confirmation/shared.
42-date-range-input	Заменяет responsive точку входа на индекс. DateRangeInputResponsive заменит на DateRangeInput
42-date-time-input	Заменяет responsive точку входа на индекс. DateTimeInputResponsive заменит на DateTimeInput
42-modal	- Заменяет responsive точку входа на индекс. ModalResponsive заменит на Modal - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/modal/shared.
42-picker-button	- Заменяет responsive точку входа на индекс. PickerButtonResponsive заменит на PickerButton - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/picker-button/shared.
42-select	- Заменяет responsive точку входа на индекс. SelectResponsive заменит на Select - Если импортировалась десктопная версия компонента из индекса, то к пути импорта добавит /desktop, Select заменит на SelectDesktop - Для SelectMobile создаст импорт из @alfalab/core-components/mobile - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/select/shared.
42-side-panel	- Заменяет responsive точку входа на индекс. SidePanelResponsive заменит на SidePanel - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/side-panel/shared.
42-system-message	Заменяет responsive точку входа на индекс. SystemMessageResponsive заменит на SystemMessage
42-tabs	- Заменяет responsive точку входа на индекс. TabsResponsive заменит на Tabs - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/tabs/shared.
42-tooltip	- Заменяет responsive точку входа на индекс. TooltipResponsive заменит на Tooltip - Если импортировалась десктопная версия компонента из индекса, то к пути импорта добавит /desktop, Tooltip заменит на TooltipDesktop - Переиспользуемые между точками входа сущности выносит в @alfala/core-components/tooltip/shared.
42-tag-click	- В теме click принудительно устанавливает `view="filled"`
42-tag-intranet	- В теме intranet Принудительно устанавливает `view="filled"` и `shape="rectangular"`
42-tag-mobile	- В теме mobile Принудительно устанавливает `view="filled"` и `shape="rectangular"`
42-button	Кодмоды, связанные с появлением responsive, desktop и mobile версий компонентов. Заменяют импорт с index на desktop (Например, import { Button } from '@alfalab/core-components/button' заменит на import { ButtonDesktop } from '@alfalab/core-components/button/desktop').
42-checkbox-group
42-code-input
42-filter-tag
42-form-control
42-input
42-plate
42-radio-group
42-tag
42-toast
42-toast-plate

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

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