Storybook v8 stories

[misama-ct]

This pull-request aims to provide an alternative story in typescript format for (almost) every existing story in the packages/components folder. The stories are added to the src folder of each component and are accompanied by a readme.mdx file that displays the auto-generated README.md file of the component within storybook.

The *.stories.tsx files are no engineering highlight (e.g. I didn't fix most type-errors), but they will do for now, as the current goal is to aim for feature-parity between the existing stories and the new typescript sb v8 stories. We want engineers to have the same or better DX when accessing storybook.

Shortcuts taken/compromises made

• *.stories.tsx are excempt from linting and type-checking for now and may or may not contain typescript errors caused by the story or the component being demo'd. The reason is, that all imports to @storybook/react (have to) resolve to the v5 version until the v5 version of storybook is removed.
• After discussion with @tdeekens I decided to ditch *.form.story.js stories. They were basically explaining the usage of formik over and over and contained a lot of boilerplate code only useful in the storybook context (a maintenance burden essentially).
• Some components had knobs/inputs which were configuring multiple props to achieve a certain look or behavior. I decided to not replicate those inputs, as I see no benefit in having e.g. a checkbox which set's the value of 3 properties but the consumer can not see which properties were set and to which value. For cases like this, an additional story with a more complex usage can be added in the future.

Suggested focus for the review

• Ensure feature parity
  • Find the same story/component in storybook v8 and compare it with the v5 one
    • Storybook V5 - legacy
    • Storybook V8 - shiny new
  • the Props page should show all props + their respective inputs for the particular component
  • the Basic story should either be equivalent to the legacy story, or demonstrate the simplest basic usage followed by more stories (demonstrating more complex use cases)
• Improve organisation of stories
  • I tried my best categorizing the stories, please let me know if you have different opinions on how the sidebar can be structured.
• Anyhting else
  • Feel free to just point out anything that might be helpful to achieve the goals of this pull-request

Add your comment to the respective *.stories.tsx file in this pull-request (if possible)

Next steps (happy path)

Just for context, here are the next issues/tasks I'm gonna tackle once this pull-request is merged:

• cleanup, everything storybook v5 related (stories, tooling) will be removed from the repository
• the storybook v8 folder will be transformed into an official yarn "workspace"
• type-errors of the typescript-stories (or their respective components) will be fixed one after another
• exceptions for linters and pre-commit hooks can be safely removed
• uikit domain will display the new storybook v8
• storybook is up-to date, not blocking technical innovations anymore

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 7, 2024 0:34am
ui-kit-storybook-v8	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 7, 2024 0:34am

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 82397b5a210c3bb7f33626d686b096b163859b48

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR