Open-Source Community Project: Remove Vuetify from Studio in favor of Kolibri Design System

[MisRob]

🙂 Looking for an issue? Welcome! This project offers many issues for open-source community.

After you have familiarized yourself with the project, find an issue from the task list at the bottom and then comment in the chosen issue to get assigned.

Please read Contributing to our open code base. Pay special attention to Using generative AI.

Summary

Studio's frontend is primarily built with V... components from Vuetify 1.5 framework, alongside K... components from our own Kolibri Design System (KDS).

This project aims to replace Vuetify components with:

• KDS components
• New custom Studio components

and then completely remove the Vuetify dependency.

KDS components already provide strong support for accessibility (a11y) and internationalization (i18n). For all new Studio components, it’s important to prioritize these areas. While mobile experience isn’t a priority, it should be reasonably functional.

👥 Community contributions

This project is designed for open-source community.

What we offer

• Meaningful project: Your contributions will support our ecosystem of open digital products and tools centered around an offline-first learning platform. You'll especially help curriculum experts who prepare content for diverse learning needs in Kolibri Learning Platform.
• Hands-on learning experience: Implement common frontend and a11y patterns with support from existing examples in our other codebase Kolibri, which already uses KDS. Receive pull request reviews from experienced engineers.
• Well-crafted issues: Rich variety of carefully scoped tasks with clear steps, acceptance criteria, and additional guidance. Each issue has complexity estimation to help you choose exactly the right issue.
• Well-documented codebase: There are plenty of materials available to make contributing easier.
• Growth opportunities: After some time of successful collaboration, you are welcome to join Kolibri Contributors, a community of active volunteers who regularly collaborate with Learning Equality, receive peer support, and are often awarded public recognition for their invaluable contributions. In case of interest, you may also take more responsibility in this project and plan new issues or review pull requests.

What we expect

• Follow Contributing to our open code base. Pay special attention to Using generative AI.
• Before opening a pull request, double-check you have followed issue guidance and met acceptance criteria.
• Independent and proactive approach. Double-check all information and references available in issues and documentation.
• Flag any unexpected challenges you encounter.

Sounds interesting? Read the rest of the project details and find your first issue below.

Guidance

• Work from the unstable branch
• Set up your local Studio development server. Note that Windows is not recommended, but many of our contributors were able to use Windows Subsystem for Linux (WSL) and there is WSL Studio development setup guidance available.
• Studio uses Vue 2.7 and Vuetify 1.5
• KDS is already installed in Studio - simply use the current version
• To work efficiently, install and use the legacy Vue Devtools (v6)
• Get familiar with Kolibri Design System. Depending on the issue you're working on, check the relevant sections under Foundation, Patterns, and Components.
• Kolibri Studio User Guide explains all important user workflows
• While Studio doesn't depend on Kolibri, it's highly recommended to have it running locally. Its interface and codebase are great references, as it uses KDS and includes many reusable patterns.
• When creating new custom Studio components, keep a11y and i18n in mind:
  • ARIA Authoring Practices Guide
  • Internationalization
  • RTL language support
    • Preview with pnpm run devserver since :hot doesn't render RTL properly
  • Bidirectionality
• Even though KDS already offers strong support for a11y and i18n, always review the refactored area as a whole.
• For new unit tests, do not use obsolete @vue/test-utils approach. Instead, use Vue Testing Library.

Why remove Vuetify?

• To benefit from KDS a11y, i18n, and other features tailored for our ecosystem
• Create a consistent user interface and experience
• Eliminate conflicts between the two libraries
• Simplify maintenance and developer experience
• Reduce framework learning overhead
• Move away from an outdated Vuetify version

Strategy

Concrete steps will be specified in issues. Decisions are guided by:

• The main focus is complete removal of Vuetify without major regressions. In some cases, the user interface and experience may not match exactly - this will be noted in "Expected UI/UX Changes" issue section.
• Issues are very strictly scoped to affect only a specific area, ensuring smooth development and QA.
  • For example, shared components with Vuetify dependencies won’t be refactored but gradually replaced by new components. This continues until the original component is no longer referenced and can be removed entirely. This approach reduces the need to review and test many parts of Studio.
• Although the goal is to migrate away from Vuetify, if needed, we can copy a Vuetify component and keep it. However, it must be refactored to work without the Vuetify library and have no unused logic.

Project issues

Settings

Low complexity

• [Remove Vuetify from Studio] Add readonly prop to KTextbox kolibri-design-system#1030
• [Remove Vuetify from Studio] 'Failed to delete account' alert in Settings - Account #5062
• [Remove Vuetify from Studio] 'Data export started' alert in Settings - Account #5063
• [Remove Vuetify from Studio] Storage overview loader in Settings - Storage #5080
• [Remove Vuetify from Studio] 'Request more space' form slide transition in Settings - Storage #5081
• [Remove Vuetify from Studio] 'Request more space' form error banner in Settings - Storage #5082
• [Remove Vuetify from Studio] Links in 'About licenses' modal in Settings - Storage #5092
• [Remove Vuetify from Studio] Do not use hardcoded colors in 'Request more space' form #5094
• [Remove Vuetify from Studio] Remove unused :v-deep styles from info modal #5095
• [Remove Vuetify from Studio] Add tiny size to KIconButton kolibri-design-system#1054

Medium complexity

• [KTextbox] Add slots to append elements before or after input kolibri-design-system#1113
• [Remove Vuetify from Studio] Copy token input in Settings - Account #5064
• [Remove Vuetify from Studio] Change password form in Settings - Account #5061
• [Remove Vuetify from Studio] Offline alert bar in Settings #5123
• [Remove Vuetify from Studio] Fix KExternalLink's unexpected margin kolibri-design-system#1055 + [Remove Vuetify from Studio] Remove temporary ::v-deep override from external links on licenses modal #5127
• [Remove Vuetify from Studio] Page layout in Settings #5132

Channels

Low complexity

• [Remove Vuetify from Studio] Top-level buttons in Channels #5218
• [Remove Vuetify from Studio] Offline alert bar in Channels #5219
• [Remove Vuetify from Studio] 'About collections' link and modal in Channels #5234
• [Remove Vuetify from Studio] 'Channel not found' error page in Channels #5235
• [Remove Vuetify from Studio] Buttons in Channels - New collection #5243
• [Remove Vuetify from Studio] Collection channels loader in Channels - New collection #5244
• [Remove Vuetify from Studio] 'Did you forget to sign in' error page in Channels #5295
• [Remove Vuetify from Studio] 'Page not found' error page in Channels #5296
• [Remove Vuetify from Studio] 'Something went wrong' error page in Channels #5297
• [Remove Vuetify from Studio] Collection name input and validation in Channels - New collection #5298
• [Remove Vuetify from Studio] 'Unsaved changes' modal in Channels - New collection #5299

Medium complexity

• [Remove Vuetify from Studio] Invitations in Channels #5217

High complexity

• [Remove Vuetify from Studio] Cards in My Channels #5227
• [Remove Vuetify from Studio] Main navigation in Channels #5369

Channel editor

Low complexity

• [Remove Vuetify from Studio] Buttons in Move modal #5355
• [Remove Vuetify from Studio] Buttons / links in Related tab #5375
• [Remove Vuetify from Studio] Buttons in Add previous / next step #5376
• [Remove Vuetify from Studio] Buttons in Questions #5377
• [Remove Vuetify from Studio] Finish button and Incomplete resource modal #5378
• [Remove Vuetify from Studio] Buttons in Upload files #5379
• [Remove Vuetify from Studio] Changing question type confirmation dialog in Questions #5420
• [Remove Vuetify from Studio] Buttons in New folder and Trash #5421
• [Remove Vuetify from Studio] Upload in progress and Save failed dialogs #5422
• [Remove Vuetify from Studio] Create new folder dialog in Move modal #5423

Accounts

Low complexity

• [Remove Vuetify from Studio] Buttons / links on sign-in page #5352
• [Remove Vuetify from Studio] Buttons / links on account created / deleted pages #5353

Administration

Low complexity

• [Remove Vuetify from Studio] Buttons in disk space popup in Administration - Users #5354
• [Remove Vuetify from Studio] Delete, restore, and visibility confirmation dialogs in admin channel actions #5410
• [Remove Vuetify from Studio] Deactivate and delete confirmation dialogs in admin user actions #5411

Medium complexity

• [Remove Vuetify from Studio] Send e-mail dialog #5425

Miscellaneous

Low complexity

• Add documentation page for KToolbar component kolibri-design-system#1085

Medium complexity

• Add v-model support to KCheckbox kolibri-design-system#1135

High complexity

• [Remove Vuetify from Studio] Create accessible skeleton for autocomplete multi-select component #5133
• [Remove Vuetify from Studio] Create public API and fine-tune autocomplete multi-select component #5429