feat: component versioning

MartinPiq commented 6 days ago

Describe pull-request

Adding versioning support for tegel components. WIP

Removed all references to tegel element tags in css.
Using prefixed tagNames inside jsx.
Fix querySelectors/closest to take prefixedTagName in regard or do workarounds. (Reworked old solutions needs a lot of cleaning)

Issue Linking:

Add support for versioning of tegel components. This is needed to support micro-frontend architecture.

How to test

Test in another project and use defineCustomElements with transformTagName:

defineCustomElements(window, {
      transformTagName: (tagName: string) => `custom-${tagName}`,
    } as any);

This needs to be tested fully inside another project and would therefor like to have a beta release of this to try it on my own.

Checklist before submission

[ ] I have added unit tests for my changes (if applicable)
[x] All existing tests pass
[ ] I have updated the documentation (if applicable)
[x] Not breaking production behavior (maybe? not fully tested)
[ ] Behavior available in storybook with documented descriptions (if applicable)
[x] npm run build-all without errors

Suggested test steps

[ ] Browser testing (Chrome, Safari, Firefox)
[ ] Keyboard operability
[ ] Interactive elements have labels.
[ ] Storybook controls
[ ] Design/controls/props is aligned with other components
[ ] Dark/light mode and variants
[ ] Input fields – values should be displayed properly
[ ] Events

Additional context

Tested chatgpt to refactor button.scss. Not fully verified that there is no weird behaviour in it 😅

Missing parts

dynamic generation of tagNames file.
enable usage of host-context to work in all browsers. Look at porsche or ionic solution.
tests to verify features work with custom tag.
Readme automatic docs

sonarcloud[bot] commented 6 days ago

Quality Gate failed

Failed conditions
3.1% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud

aws-amplify-eu-north-1[bot] commented 6 days ago

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-840.d3fazya28914g3.amplifyapp.com

MartinPiq commented 6 days ago

@theJohnnyMe @timrombergjakobsson @mistermalm I implemented complete (I think) support for tegel component versioning. Would be great if you guys could create a beta release for me to test this out properly in our own application!

timrombergjakobsson commented 6 days ago

@theJohnnyMe @timrombergjakobsson @mistermalm I implemented complete (I think) support for tegel component versioning. Would be great if you guys could create a beta release for me to test this out properly in our own application!

Great @MartinPiq, yes, we can make a beta for you. We can align about code in the PR.

timrombergjakobsson commented 6 days ago

@MartinPiq i created a pr from your fork and made a beta based on that. Try it out! https://www.npmjs.com/package/@scania/tegel/v/1.18.0-versioning-beta.0 https://github.com/scania-digital-design-system/tegel/pull/841

theJohnnyMe commented 2 days ago

@MartinPiq - Please keep us updated regarding testing beta release :)

MartinPiq commented 2 days ago

@MartinPiq - Please keep us updated regarding testing beta release :)

Will try to find some time to try it out during the weekend. It would also be great if you guys could do a quick look trough of the changes to see if there is anything that stands out as weird. Please ask questions if there is anything unclear!

scania-digital-design-system / tegel