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
  • Bidirectionality
• Even though KDS already offers strong support for a11y and i18n, always review the refactored area as a whole.

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] Remove temporary ::v-deep override from external links on licenses modal #5127
• [Remove Vuetify from Studio] Add tiny size to KIconButton kolibri-design-system#1054

Medium complexity

• [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] Page layout in Settings #5132

High complexity

• [Remove Vuetify from Studio] Create accessible skeleton for autocomplete multi-select component #5133