2.9.3 • Published 4 months agoCLI
@alfalab/core-components-codemod
Licence
MIT
Version
2.9.3
Deps
8
Size
340 kB
Vulns
0
Weekly
0
Тулзы для модификации кода
Использование
- Установить к себе на проект:
$ 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'50 мажорный релиз
| Название | Описание |
|---|---|
| 50-replace-transparent-color-vars |
Заменяет цветовые токены из палитры colors-transparent.css Запуск `npx @alfalab/core-components-codemod --transformers=50-replace-transparent-color-vars --glob='src/**/*.css'` |
| 50-progress-bar |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-progress-bar --glob='src/**/*.tsx'` |
| 50-button |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-button --glob='src/**/*.tsx'` |
| 50-modal |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-modal --glob='src/**/*.tsx'` |
| 50-segmented-control |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-segmented-control --glob='src/**/*.tsx'` |
| 50-radio |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-radio --glob='src/**/*.tsx'` |
| 50-form-control |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-form-control --glob='src/**/*.tsx'` |
| 50-checkbox |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-checkbox --glob='src/**/*.tsx'` |
| 50-indicator |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-indicator --glob='src/**/*.tsx'` |
| 50-slider |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-slider --glob='src/**/*.tsx'` |
| 50-action-button |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-action-button --glob='src/**/*.tsx'` |
| 50-filter-tag |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-filter-tag --glob='src/**/*.tsx'` |
| 50-gap |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-gap --glob='src/**/*.tsx'` |
| 50-circular-progress-bar |
Запуск `npx @alfalab/core-components-codemod --transformers=50-circular-progress-bar --glob='src/**/*.tsx'` |
| 50-attach |
Запуск `npx @alfalab/core-components-codemod --transformers=50-attach --glob='src/**/*.tsx'` |
| 50-custom-picker-button |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-custom-picker-button --glob='src/**/*.tsx'` |
| 50-icon-button |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-icon-button --glob='src/**/*.tsx'` |
| 50-picker-button |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-picker-button --glob='src/**/*.tsx'` |
| 50-custom-button |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-custom-button --glob='src/**/*.tsx'` |
| 50-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-input --glob='src/**/*.tsx'` |
| 50-amount-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-amount-input --glob='src/**/*.tsx'` |
| 50-calendar-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-calendar-input --glob='src/**/*.tsx'` |
| 50-date-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-date-input --glob='src/**/*.tsx'` |
| 50-date-range-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-date-range-input --glob='src/**/*.tsx'` |
| 50-date-time-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-date-time-input --glob='src/**/*.tsx'` |
| 50-international-phone-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-international-phone-input --glob='src/**/*.tsx'` |
| 50-intl-phone-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-intl-phone-input --glob='src/**/*.tsx'` |
| 50-masked-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-masked-input --glob='src/**/*.tsx'` |
| 50-number-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-number-input --glob='src/**/*.tsx'` |
| 50-password-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-password-input --glob='src/**/*.tsx'` |
| 50-phone-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-phone-input --glob='src/**/*.tsx'` |
| 50-slider-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-slider-input --glob='src/**/*.tsx'` |
| 50-time-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-time-input --glob='src/**/*.tsx'` |
| 50-universal-date-input |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-universal-date-input --glob='src/**/*.tsx'` |
| 50-select |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-select --glob='src/**/*.tsx'` |
| 50-tag |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-tag --glob='src/**/*.tsx'` |
| 50-underlay |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-underlay --glob='src/**/*.tsx'` |
| 50-sortable-list |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-sortable-list --glob='src/**/*.tsx'` |
| 50-input-autocomplete |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-input-autocomplete --glob='src/**/*.tsx'` |
| 50-select-with-tags |
- Заменяет буквенные размеры на числовые Запуск `npx @alfalab/core-components-codemod --transformers=50-select-with-tags --glob='src/**/*.tsx'` |
Для запуска всех (кроме 50-replace-transparent-color-vars) трансформеров можно воспользоваться командой
npx @alfalab/core-components-codemod --transformers=50-progress-bar,50-button,50-modal,50-segmented-control,50-radio,50-form-control,50-checkbox,50-indicator,50-slider,50-action-button,50-filter-tag,50-gap,50-circular-progress-bar,50-attach,50-custom-picker-button,50-icon-button,50-picker-button,50-custom-button,50-input,50-amount-input,50-calendar-input,50-date-input,50-date-range-input,50-date-time-input,50-international-phone-input,50-intl-phone-input,50-masked-input,50-number-input,50-password-input,50-phone-input,50-slider-input,50-time-input,50-universal-date-input,50-select,50-tag,50-underlay,50-sortable-list,50-input-autocomplete,50-select-with-tags --glob='src/**/*.tsx'Разработка
Под капотом - jscodeshift.
Запуск тестов
yarn test:codemod