@public-ui/kolibri-cli
v4.0.3
Published
CLI for executing some helpful commands for KoliBri projects.
Readme
KoliBri - CLI-Tools
Command line utilities to help maintain and migrate KoliBri projects.
Motivation
The KoliBri CLI-Tools are a collection of tools to support the development with KoliBri components.
They also help migrating projects when new components or design tokens are introduced.
Installation
You can install the KoliBri CLI-Tools with npm, pnpm or yarn.
npm i -g @public-ui/kolibri-cli
pnpm i -g @public-ui/kolibri-cli
yarn add -g @public-ui/kolibri-cliImportant: Install exactly the CLI version you want to upgrade to. The migration tool compares your locally installed
@public-ui/componentsversion with the CLI version to decide which migration tasks must run and in which order.
Quickstart (Happy Path)
- Install the CLI version that matches your target
@public-ui/componentsrelease (see above). - Run the migration in your project root:
kolibri migrate .. - Review the changes:
git statusandgit diff. - Format updated files:
pnpm format. - Commit the result and continue development.
Usage
The KoliBri CLI is intended to be executed in your project root directory. Use the kolibri command to start the CLI.
kolibri --help,--. ,--. ,--. ,--. ,-----. ,--.
| .' / ,---. | | `--' | |) /_ ,--.--. `--'
| . ' | .-. | | | ,--. | .-. \ | .--' ,--.
| |\ \ | '-' | | | | | | '--' / | | | |
`--' `--´ `---´ `--' `--' `------´ `--' `--'
🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io
Usage: kolibri [options] [command]
CLI for executing some helpful commands for KoliBri projects.
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
info Shows the system and KoliBri package information
migrate [options] <string> This command migrates KoliBri code to the current version.
help [command] display help for commandInfo
With the info command you can show the current system and KoliBri package information.
This command is mainly needed for our bug issue templates. If errors occur in our packages, we would like to ask you to create an issue under the following link: Submit report
Migrate
With the migrate command you can migrate your project to the latest version of KoliBri.
Hint: The migration tool currently supports React projects (JSX/TSX), Vue single-file components, and HTML/XHTML template-based projects such as Angular applications or vanilla custom elements. Support for additional project types is planned.
The migration runner registers tasks in the following order and executes only those whose semantic version ranges match your
project: common tasks (*), v1 tasks (^1), v2 tasks (^2 / >=2.1.7 <3), v3 tasks (>=2 <4), v4 tasks (^4) and
asset-related tasks (^1). All tasks are enabled by default. If you need to disable a noisy task or explicitly re-enable a
previously deactivated one for better migratability, set the corresponding flag in .kolibri.config.json under
migrate.tasks to false or true.
Migration tasks and version ranges
- Common tasks (
*)- Add
.kolibri.migrate.jsonto.gitignore. - Add
save-exact=trueto.npmrc. - Configure
html.customDatain.vscode/settings.jsonto point to@public-ui/components/vscode-custom-data.json.
- Add
- Version 1 tasks (
^1, unless noted)kol-abbr: rename_align→_tooltip-align; rename_title→_label.kol-accordion: rename_heading→_label; mark removed slotheader; rename slotcontentto the default slot.kol-alert: rename_heading→_label.kol-badge: remove_icon-only; rename_icon-only→_hide-label; remove_hide-label; rename_icon→_icons.kol-breadcrumb: rename_aria-label→_label.kol-button: remove_aria-current; remove_aria-label; rename_icon-only→_hide-label; rename_icon→_icons; refactor_icon-aligninto_icons(^2).kol-button-link: remove_aria-current; remove_aria-label; rename_icon-only→_hide-label; rename_icon→_icons.kol-card: rename_heading→_label; rename_headline→_label; mark removed slotsfooterandheader; rename slotcontentto the default slot.kol-details: rename_summary→_label.kol-icon: rename_aria-label→_label; remove_part; rename_icon→_icons.kol-input: rename_icon→_icons.kol-input-checkbox: rename_type→_variant; rename_icon→_icons.kol-input-color: rename_list→_suggestions; rename_icon→_icons.kol-input-date/kol-date: rename_list→_suggestions; rename_icon→_icons.kol-input-email: rename_list→_suggestions; rename_icon→_icons; remove_size.kol-input-file: rename_icon→_icons.kol-input-number: rename_list→_suggestions; rename_icon→_icons; remove_type.kol-input-password: rename_icon→_icons; remove_size.kol-input-radio: rename_list→_options.kol-input-range: rename_list→_suggestions; rename_icon→_icons.kol-input-text: rename_list→_suggestions; rename_icon→_icons; remove_size.kol-link: remove_aria-controls,_aria-expanded,_aria-label,_aria-selected,_disabled,_selector,_stealth,_use-case; rename_aria-current→_listen-aria-current; rename_icon-only→_hide-label; rename_icon→_icons; refactor_icon-align(^2).kol-link-button: remove_aria-controls,_aria-expanded,_aria-label,_aria-selected,_disabled; rename_aria-current→_listen-aria-current; rename_icon-only→_hide-label; rename_icon→_icons.kol-link-group: rename_aria-label→_label; rename_heading→_label; remove_heading; remove_ordered.kol-logo: rename_abbr→_org.kol-modal: rename_aria-label→_label.kol-nav: rename_aria-label→_label; rename_compact→_hide-label; remove_variant.kol-pagination: rename_count→_total; rename_total→_max.kol-progress: rename_type→_variant.kol-quote: rename_caption→_label.kol-select: rename_height→_rows; rename_list→_options; rename_icon→_icons; remove_size.kol-skip-nav: rename_aria-label→_label.kol-span: rename_icon-only→_hide-label; rename_icon→_icons.kol-split-button: remove_aria-label,_access-key,_show-dropdown; remove_show.kol-symbol: rename_aria-label→_label.kol-table: rename_caption→_label.kol-tabs: rename_aria-label→_label; rename_tab-align→_align; rename_icon→_icons; rename_icon-only→_hide-label.kol-toast: remove_show-duration; rename_heading→_label.kol-version: rename_version→_label.- Expert slot migrations: move
innerTextto_labelforkol-heading,kol-input-*,kol-link,kol-select,kol-textarea(^1). - Slot removals: mark removed
kol-accordionheader,kol-cardfooter/header(^1). - Slot renames:
kol-accordion/kol-cardslotcontent→ default slot (^1). - Refactor
_label={false}to empty string (>=1.6 <=1.7).
- Version 2 tasks
kol-card: remove_has-footer(^2).kol-link-group: remove_level(^2).kol-table: rename tagkol-table→kol-table-stateful(>=2.1.7 <3).
- Version 3 tasks (
>=2 <4)kol-abbr: remove_tooltip-align.kol-input-file: remove_value.kol-modal: remove_active-element.kol-textarea:_resize="both"→_resize="vertical";_resize="horizontal"→_resize="none".kol-toaster: renamealertVariant→variant; renamedefaultAlertType→defaultVariant.- All inputs (
kol-combobox,kol-input-*,kol-select,kol-single-select,kol-textarea): remove_alert; rename_hide-error→_hide-msg; refactor_error→_msg.
- Version 4 tasks (
^4)- Remove
_idfromkol-button,kol-button-link,kol-combobox,kol-input-*,kol-popover-button,kol-select,kol-single-select,kol-split-button,kol-textarea,kol-tooltip. - Remove
_labeland_variantkeys from_msgobjects. kol-toast: removevariantfromenqueue()calls.kol-toaster: removedefaultVariantoption fromgetInstance()calls.
- Remove
- Asset tasks (
^1)- Remove old
cpy-cli/rimrafversions and reinstall pinned ones. - Add
scripts.prepareto copy component assets into the project and removepublic/assets/codiconsbefore copying. - Inject the Codicon stylesheet link into
index.html(or warn if the file is missing).
- Remove old
Theme Migration
The CLI also supports migrating KoliBri themes alongside component updates to ensure theme packages remain synchronized with breaking changes in the component library.
Goal
Synchronies breaking changes in components with the styling of each theme package so that upgrades require minimal manual work.
Requirements
- Components and themes follow the BEM naming convention via
typed-bem. - Each theme lives under
packages/themesand keeps its SCSS sources insrc/. - The CLI migration tool can read and modify
.scssfiles.
Concept
Central BEM schemas
- Every component exports its BEM schema. These schemas are used by the CLI to generate SCSS files and by themes to reference selectors.
- When a selector changes, the same schema information allows the migration to update all theme packages consistently.
SCSS migration tasks The CLI runner is extended with task types operating on SCSS. They behave like the existing property tasks and are idempotent.
RenameBlockTask– rename a block selector everywhere in a theme.RenameElementTask– rename an element within a block.RenameModifierTask– rename or replace a modifier.AddSelectorTaskandRemoveSelectorTask– insert or remove entire rule sets.UpdateTokenTask– adjust variable names or values when tokens change.MoveRulesTask– move declarations from one selector to another if the DOM structure changes.
Tasks scan the SCSS with regular expressions or an AST parser. If a pattern is missing the task logs a warning instead of failing.
Safe execution
- Migrations abort when uncommitted changes are detected unless
--ignore-uncommitted-changesis specified. - Each task logs the files it touched. After completion Prettier can format them automatically.
- Because tasks are idempotent, rerunning the migration produces no new changes. To undo a run, reset the Git state.
- Migrations abort when uncommitted changes are detected unless
Theme Migration Workflow Example
pnpm i -g @public-ui/kolibri-cli@2 # install the CLI matching the next version
kolibri migrate path/to/project # run all tasks for the upgrade
pnpm format # format changed files
git diff # review results and commitUsing these tasks, theme packages remain aligned with component updates. Future breaking changes can be scripted and applied via the CLI so that projects can upgrade in a controlled and reproducible way.
How does it work?
- The migration command will check your project for clear
git historyand theinstalled versionofKoliBri. Now it loads all available migration tasks. - Tasks in the correct version range will be executed one by one. Otherwise they will be skipped.
- After that the
package.jsonwill be updated with the new version ofKoliBriand execute thenpm installcommand. - If there are any pending tasks, the migration command will be executed again. Otherwise the migration is finished.
- Now you can check the result and commit the changes.
Note: You can reset the migration with
git reset --hard HEAD~1or by discarding the affected files.
Help
kolibri migrate --helpExecute
kolibri migrate <path>Options
| Option | Description | Type | Default |
| ------------------------------ | ------------------------------------------------------------------ | :------------------: | :-----------------------: |
| --format | Try to format the modified files with prettier | boolean | true |
| --overwrite-current-version | Migrate from this current version instead of the installed version | version | current installed version |
| --overwrite-target-version | Migrate to this target version instead of the version of the CLI | version | version of the CLI |
| --ignore-greater-version | Allows execution with greater versions | boolean | false |
| --ignore-uncommitted-changes | Allows execution with uncommitted changes | boolean | false |
| --remove-mode | Prefix property name or delete property | delete | prefix | prefix |
Configuration
You can configure the migration with the .kolibri.config.json file in your project root folder. This file will be created automatically after the first migration.
Troubleshooting: If you have problems with migration, you can exclude some tasks with the configuration by setting the false flag (see kol-select).
{
"migrate": {
"tasks": {
".gitignore-add-rule-.kolibri.migrate.json": true,
".npmrc-add-rule-save-exact=true": true,
"add--cpy-cli,rimraf": true,
"exec-npx cpy \"node_modules/@public-ui/components/assets/**/*\" \"public/assets\" --dot": true,
"kol-abbr-remove-property-_tooltip-align": true,
"kol-abbr-rename-property-_align-to-_tooltip-align": true,
"kol-abbr-rename-property-_title-to-_label": true,
"kol-accordion-mark-removed-slot-header": true,
"kol-accordion-rename-property-_heading-to-_label": true,
"kol-accordion-rename-slot-content-to-": true,
"kol-alert-rename-property-_heading-to-_label": true,
"kol-badge-remove-property-_hide-label": true,
"kol-badge-remove-property-_icon-only": true,
"kol-badge-rename-property-_icon-only-to-_hide-label": true,
"kol-badge-rename-property-_icon-to-_icons": true,
"kol-breadcrumb-rename-property-_aria-label-to-_label": true,
"kol-button-link-remove-property-_access-key": true,
"kol-button-link-remove-property-_aria-current": true,
"kol-button-link-remove-property-_aria-label": true,
"kol-button-link-remove-property-_id": true,
"kol-button-link-rename-property-_aria-current-to-_listen-aria-current": true,
"kol-button-link-rename-property-_icon-only-to-_hide-label": true,
"kol-button-link-rename-property-_icon-to-_icons": true,
"kol-button-remove-property-_access-key": true,
"kol-button-remove-property-_aria-current": true,
"kol-button-remove-property-_aria-label": true,
"kol-button-remove-property-_icon-align": true,
"kol-button-remove-property-_id": true,
"kol-button-rename-property-_icon-only-to-_hide-label": true,
"refactor-property-icon-align": true,
"kol-button-rename-property-_icon-to-_icons": true,
"kol-card-mark-removed-slot-footer": true,
"kol-card-mark-removed-slot-header": true,
"kol-card-remove-property-_has-footer": true,
"kol-card-rename-property-_heading-to-_label": true,
"kol-card-rename-property-_headline-to-_label": true,
"kol-card-rename-slot-content-to-": true,
"kol-checkbox-rename-property-_type-to-_variant": true,
"kol-color-rename-property-_icon-to-_icons": true,
"kol-color-rename-property-_list-to-_suggestions": true,
"kol-combobox-refactor-property-error-to-msg": true,
"kol-combobox-remove-property-_alert": true,
"kol-combobox-remove-property-_id": true,
"kol-combobox-rename-property-_hide-error-to-_hide-msg": true,
"kol-date-rename-property-_list-to-_suggestions": true,
"kol-details-rename-property-_summary-to-_label": true,
"kol-heading-move-innerText-to-property-_label": true,
"kol-icon-remove-property-_part": true,
"kol-icon-rename-property-_aria-label-to-_label": true,
"kol-icon-rename-property-_icon-to-_icons": true,
"kol-input-checkbox-move-innerText-to-property-_label": true,
"kol-input-checkbox-refactor-property-error-to-msg": true,
"kol-input-checkbox-remove-property-_alert": true,
"kol-input-checkbox-remove-property-_id": true,
"kol-input-checkbox-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-checkbox-rename-property-_icon-to-_icons": true,
"kol-input-checkbox-rename-property-_type-to-_variant": true,
"kol-input-color-move-innerText-to-property-_label": true,
"kol-input-color-refactor-property-error-to-msg": true,
"kol-input-color-remove-property-_alert": true,
"kol-input-color-remove-property-_id": true,
"kol-input-color-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-date-move-innerText-to-property-_label": true,
"kol-input-date-refactor-property-error-to-msg": true,
"kol-input-date-remove-property-_alert": true,
"kol-input-date-remove-property-_id": true,
"kol-input-date-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-date-rename-property-_icon-to-_icons": true,
"kol-input-email-move-innerText-to-property-_label": true,
"kol-input-email-refactor-property-error-to-msg": true,
"kol-input-email-remove-property-_alert": true,
"kol-input-email-remove-property-_id": true,
"kol-input-email-remove-property-_size": true,
"kol-input-email-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-email-rename-property-_icon-to-_icons": true,
"kol-input-email-rename-property-_list-to-_suggestions": true,
"kol-input-file-move-innerText-to-property-_label": true,
"kol-input-file-refactor-property-error-to-msg": true,
"kol-input-file-remove-property-_alert": true,
"kol-input-file-remove-property-_id": true,
"kol-input-file-remove-property-_value": true,
"kol-input-file-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-file-rename-property-_icon-to-_icons": true,
"kol-input-number-move-innerText-to-property-_label": true,
"kol-input-number-refactor-property-error-to-msg": true,
"kol-input-number-remove-property-_alert": true,
"kol-input-number-remove-property-_id": true,
"kol-input-number-remove-property-_type": true,
"kol-input-number-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-number-rename-property-_icon-to-_icons": true,
"kol-input-number-rename-property-_list-to-_suggestions": true,
"kol-input-password-move-innerText-to-property-_label": true,
"kol-input-password-refactor-property-error-to-msg": true,
"kol-input-password-remove-property-_alert": true,
"kol-input-password-remove-property-_id": true,
"kol-input-password-remove-property-_size": true,
"kol-input-password-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-password-rename-property-_icon-to-_icons": true,
"kol-input-radio-move-innerText-to-property-_label": true,
"kol-input-radio-refactor-property-error-to-msg": true,
"kol-input-radio-remove-property-_alert": true,
"kol-input-radio-remove-property-_id": true,
"kol-input-radio-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-radio-rename-property-_list-to-_options": true,
"kol-input-range-move-innerText-to-property-_label": true,
"kol-input-range-refactor-property-error-to-msg": true,
"kol-input-range-remove-property-_alert": true,
"kol-input-range-remove-property-_id": true,
"kol-input-range-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-range-rename-property-_icon-to-_icons": true,
"kol-input-range-rename-property-_list-to-_suggestions": true,
"kol-input-rename-property-_icon-to-_icons": true,
"kol-input-text-move-innerText-to-property-_label": true,
"kol-input-text-refactor-property-error-to-msg": true,
"kol-input-text-remove-property-_alert": true,
"kol-input-text-remove-property-_id": true,
"kol-input-text-remove-property-_size": true,
"kol-input-text-rename-property-_hide-error-to-_hide-msg": true,
"kol-input-text-rename-property-_icon-to-_icons": true,
"kol-input-text-rename-property-_list-to-_suggestions": true,
"kol-link-button-remove-property-_aria-controls": true,
"kol-link-button-remove-property-_aria-expanded": true,
"kol-link-button-remove-property-_aria-label": true,
"kol-link-button-remove-property-_aria-selected": true,
"kol-link-button-remove-property-_disabled": true,
"kol-link-button-rename-property-_aria-current-to-_listen-aria-current": true,
"kol-link-button-rename-property-_icon-only-to-_hide-label": true,
"kol-link-button-rename-property-_icon-to-_icons": true,
"kol-link-group-remove-property-_heading": true,
"kol-link-group-remove-property-_level": true,
"kol-link-group-remove-property-_ordered": true,
"kol-link-group-rename-property-_aria-label-to-_label": true,
"kol-link-group-rename-property-_heading-to-_label": true,
"kol-link-move-innerText-to-property-_label": true,
"kol-link-remove-property-_aria-controls": true,
"kol-link-remove-property-_aria-expanded": true,
"kol-link-remove-property-_aria-label": true,
"kol-link-remove-property-_aria-selected": true,
"kol-link-remove-property-_disabled": true,
"kol-link-remove-property-_selector": true,
"kol-link-remove-property-_stealth": true,
"kol-link-remove-property-_use-case": true,
"kol-link-rename-property-_aria-current-to-_listen-aria-current": true,
"kol-link-rename-property-_icon-only-to-_hide-label": true,
"kol-link-rename-property-_icon-to-_icons": true,
"kol-logo-rename-property-_abbr-to-_org": true,
"kol-modal-remove-property-_active-element": true,
"kol-modal-rename-property-_aria-label-to-_label": true,
"kol-nav-remove-property-_has-compact-button": true,
"kol-nav-remove-property-_variant": true,
"kol-nav-rename-property-_aria-label-to-_label": true,
"kol-nav-rename-property-_compact-to-_hide-label": true,
"kol-pagination-rename-property-_count-to-_total": true,
"kol-pagination-rename-property-_total-to-_max": true,
"kol-popover-button-remove-property-_id": true,
"kol-progress-rename-property-_type-to-_variant": true,
"kol-quote-rename-property-_caption-to-_label": true,
"kol-select-move-innerText-to-property-_label": true,
"kol-select-refactor-property-error-to-msg": true,
"kol-select-remove-property-_alert": true,
"kol-select-remove-property-_id": true,
"kol-select-remove-property-_size": true,
"kol-select-rename-property-_height-to-_rows": true,
"kol-select-rename-property-_hide-error-to-_hide-msg": true,
"kol-select-rename-property-_icon-to-_icons": true,
"kol-select-rename-property-_list-to-_options": true,
"kol-single-select-refactor-property-error-to-msg": true,
"kol-single-select-remove-property-_alert": true,
"kol-single-select-remove-property-_id": true,
"kol-single-select-rename-property-_hide-error-to-_hide-msg": true,
"kol-skip-nav-rename-property-_aria-label-to-_label": true,
"kol-span-rename-property-_icon-only-to-_hide-label": true,
"kol-span-rename-property-_icon-to-_icons": true,
"kol-split-button-remove-property-_access-key": true,
"kol-split-button-remove-property-_aria-label": true,
"kol-split-button-remove-property-_id": true,
"kol-split-button-remove-property-_show": true,
"kol-split-button-remove-property-_show-dropdown": true,
"kol-symbol-rename-property-_aria-label-to-_label": true,
"kol-table-rename-property-_caption-to-_label": true,
"kol-tabs-rename-property-_aria-label-to-_label": true,
"kol-tabs-rename-property-_icon-only-to-_hide-label": true,
"kol-tabs-rename-property-_icon-to-_icons": true,
"kol-tabs-rename-property-_tab-align-to-_align": true,
"kol-textarea-move-innerText-to-property-_label": true,
"kol-textarea-refactor-property-error-to-msg": true,
"kol-textarea-remove-property-_alert": true,
"kol-textarea-remove-property-_id": true,
"kol-textarea-rename-property-_hide-error-to-_hide-msg": true,
"kol-textarea-update-property-_resize-value-both-to-vertical": true,
"kol-textarea-update-property-_resize-value-horizontal-to-none": true,
"kol-toast-remove-property-_show-duration": true,
"kol-toast-rename-property-_heading-to-_label": true,
"kol-tooltip-remove-property-_id": true,
"kol-version-rename-property-_version-to-_label": true,
"merge-html-codicon-in-index.html": true,
"package.json-reconfigure-scripts.prepare": true,
"refactor-property-icon-align": true,
"refactor-property-label-replace-false": true,
"remove--cpy-cli,rimraf": true,
"remove-msg-props": true,
"remove-public/assets/codicons": true,
"remove-toast-variant-^4": true,
"remove-toaster-get-instance-options-^4": true,
"rename-tag-name-kol-table-to-kol-table-stateful": true,
"toaster-rename-properties": true,
"vscode-settings-reconfigure-html.customData": true
}
}
}The
exec-npx cpytask copies the packaged component assets into your project'spublic/assetsfolder; leave it enabled unless your build already handles asset copying in a different location.
Troubleshooting
If the migration failed, you can reset the migration with git reset --hard HEAD~1.
Use the configuration (.kolibri.config.json) to exclude some tasks.
If your project is already on a newer version of KoliBri, but you want to repeat the migration from a previous version, you can use this --overwrite-current-version option. It overwrites the offset version from which the migration originally starts, instead of using the installed version.
If there are multiple obsolete properties that have been migrated to just one new property, the new property may appear multiple times in the tag. You can then decide which variant to use and remove all other variants accordingly.
Maybe it can help to prepare your code in the tricky places for migration.
Please give us feedback, if you have problems with the migration: GitHub Issues
Dry run
You have always the possibility of a dry run. Because before the migration will be executed, you need a clean git history of you project.
After the migration you can check the result with git status and git diff.
Is anything wrong, you can reset the migration with git reset --hard HEAD~1 or by discarding the affected files.
