chore: migrate design system docs to Vue 3

[LukasHirt]

Description

• Upgrade vue styleguidist
• Upgrade webpack
• Upgrade codemirror
• Move internal docs components into design system components as private due to an issue where loading it from multiple folders results in memory errors during build
• Migrate the preview code editor to the new version of codemirror
• Create new vue app in preview in order to extend it with e.g. gettext (ugly solution but styleguidist does not seem offer a way to extend the existing vue app)

Related Issue

• refs Design System Documentation is not up to date #10233

Motivation and Context

Make design system docs buildable again and update dependencies

How Has This Been Tested?

• test environment: local
• test case 1: run docs locally

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests

Checklist:

• Code changes
• Unit tests added
• Acceptance tests added
• Documentation ticket raised:

Open tasks:

• fix issues with style loaders
• fix issue with memory when using base webpack config
• fix missing scss vars
• make sure all sections are still rendering as they should
• fix lint issues

[update-docs]

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

[LukasHirt]

@JammingBen PR is ready for review.

Let me pls know how do you want to handle changelog here. Also, with @kulmann we agreed to do tests in separate PR to quickly move on with dependency warnings but sonarcloud fails here due to insufficient coverage of new changes... let me pls know how do you want to handle this as well. I will look into the other sonarcloud issues in the meantime.

[JammingBen]

First off: awesome stuff, really great to finally have the ODS running again! 🥳

Let me pls know how do you want to handle changelog here.

I'd say this is a bugfix inside the design system's changelog folder, since building the ODS was basically broken before.

Also, with @kulmann we agreed to do tests in separate PR to quickly move on with dependency warnings but sonarcloud fails here due to insufficient coverage of new changes... let me pls know how do you want to handle this as well.

SonarCloud reports weird things sometimes (actually quite often), so it's not a blocker for our PRs in general. You can fix valid reports in a follow-up as well IMO.

I see that some unit tests for the docs are failing. I have no problem if you remove them to be honest, I don't really see the point in unit testing doc pages.

2 issues I still have when testing the build on my local machine:

• When running pnpm build:docs I get errors reporting a missing mini-css-extract-plugin plugin (see annotation down below).
• When running pnpm start I get some sass errors reporting undefined variables.

[dschmidt]

More or less nitpicks but I basically agree with everything that Jannik already said.

Additionally I would like to request that we have at least one basic e2e test, that makes sure the documentation app boots, we can navigate towards the documentation of a component and check it's rendered and functional (e.g. go to OcRadio and change the state)
That would give us much more confidence when accepting renovatebot PRs

Great work already!

[LukasHirt]

When running pnpm start I get some sass errors reporting undefined variables.

This is basically happening because there are same tokens defined for docs and the design system and the build just drops the docs ones... I'll see if the overwrite can be prevented.

[LukasHirt]

Additionally I would like to request that we have at least one basic e2e test

Yep, this is planned for the follow up PR.

[LukasHirt]

All issues resolved - ready for second round @JammingBen @dschmidt

[JammingBen]

Pushed a little fix for the initial focus on modals (which was broken for some reason 🤷 ).

Also I noticed that the examples in the docs are empty (between a component's description and the code block). But I'd say let's merge this PR as a first step and iterate from here 👍

[sonarqubecloud]

Quality Gate failed

Failed conditions

0.0% Condition Coverage on New Code (required ≥ 50%)

See analysis details on SonarCloud

[dschmidt]

I'm happy with this as a first iteration, but I would really like integration in our CI pipeline for building the ODS docs and having basic e2e tests (the latter possibly as a third iteration)