## Background We have an existing [GitLab storybook](https://docs.gitlab.com/ee/development/fe_guide/storybook.html), but it has been neglected. Many are either unaware it exists, or unclear of the purpose of this. As a result the storybook is wildly incomplete, has been in a broken state for a while and we are potentially missing out on a great resource for collaboration between ~UX and ~frontend: - https://gitlab.com/gitlab-org/gitlab/-/merge_requests/135064+ - https://gitlab.com/gitlab-org/gitlab/-/merge_requests/157734+ - https://gitlab.com/gitlab-org/gitlab/-/merge_requests/156451+ ### Benefits Within the ~"group::optimize" team this has been a [useful resource for collaboration](https://gitlab.com/groups/gitlab-org/-/epics/11681#background) between ~UX and ~frontend to not only iterate on specific issues, but explore options when designing solutions. It has also helped highlight areas of improvement where we might be missing different states, removal of old code and better definition of component boundaries: - https://gitlab.com/gitlab-org/gitlab/-/issues/469190+ - https://gitlab.com/gitlab-org/gitlab/-/issues/469191+ - https://gitlab.com/gitlab-org/gitlab/-/merge_requests/121951#note_1421230853 - https://docs.gitlab.com/ee/development/fe_guide/customizable_dashboards.html#feedback-and-error-handling - https://gitlab.com/gitlab-org/gitlab/-/issues/404079#note_1587056590 - https://gitlab.com/gitlab-org/gitlab/-/merge_requests/157581+ This has also been an avenue for community contribution ~"Community contribution": - https://gitlab.com/gitlab-org/gitlab/-/issues/428283+ - https://gitlab.com/gitlab-org/gitlab/-/issues/433211+ ## Improvemnts ### Quick wins ~"quick win" :awesome: * [x] https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/4887+ (:thankyou: thank you @psjakubowska) * [x] https://gitlab.com/gitlab-org/gitlab/-/merge_requests/160870+ * [x] Update the storybook version to ~7 - current version is ~6.5.16 * [ ] Storybook 8 requires vue3 * [ ] [Add stories for all components under `vue_shared`](https://gitlab.com/groups/gitlab-org/-/epics/15403) * [ ] Reuse test mock data for storybook stories data @kpalchyk ### Bugs ~"type::bug" :hide-the-pain: * [ ] Audit existing stories to ensure props / data are up to date and fix console warnings/errors  * [ ] Improve existing docs content tab, currently inconsistent / incomplete |Unreadable text|Not too useful|No docs|Different format| |---|---|---|---| ||||| ### Enhancements ~"feature::enhancement" :nail_care_tone4: Improvements that might make sense, but potentially need more thought and discussion: * [ ] Define what should be added to storybook? * [ ] Visual regression testing - "This would add further friction to delivery which is a downside, but would make visual regressions less likely. It would require that shared components are properly documented in storybook and the current components as as-expected." @sdejonge * [ ] Encourage ongoing contribution of components - there is a danger bot message about changing undocumented components in `vue_shared`, should this be a stronger prompt/warning? * [ ] Ensure we keep stories updated and in sync with their relevant components - Fail pipelines when there are storybook errors? - Storyshots? * [ ] Add docs for each component: we currently dont use the docs feature, should we? * [ ] [Add support for controls](https://storybook.js.org/docs/essentials/controls) * [ ] [Add support for actions](https://storybook.js.org/docs/essentials/actions) * [ ] Add [test runner](https://storybook.js.org/docs/writing-tests/test-runner) to have [out-of-the-box automated accessibility tests for all components](https://storybook.js.org/docs/writing-tests/accessibility-testing#automate-accessibility-tests-with-test-runner). See [the implementation in GitLab UI repository](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4720)