Storybook connector for reporting on code quality of Pajamas components

Problem

Right now it's hard to see how many times a Storybook component is used in the gitlab codebase. This leads to manual discovery operations for HAML and Vue and require an Engineer write regex that searches the codebase and return instances of the object.

Manual discovery of the components is successful, but it doesn't scale as new code is added every day that could break the component standards. Repeating manual searches doesn't scale.

This has been identified in this discovery issue where the problem of automatically discovering is described in detail: #340654 (closed)

Proposal

Make an easy way to connect Storybook and a production repository so counts of objects and lightweight code health tracking can occur.

Diagram

Storybook UI with right panel

Wireframe of how it might look in GitLab - this is just a placeholder!

MVC Proposal

#355754 (closed)

Requirements

• Storybook installed in a GitLab Repo (for us that is gitlab-ui)
• A production app (for us that is gitlab-org/gitlab/)
• Must be able to create a new Component Scanner that has the following:
  • Title: Loading icon Vue search
  • Storybook Component: /blob/main/src/components/base/loading_icon/loading_icon.vue
  • Search criteria: rg '(?<!Gl|gl-|\.|\:|=\”)spinner(?!_SIZE|Size|_SHAPE)' ee app --glob="*.vue" --pcre2
  • Repo: /gitlab/gitlab-org
  • Folder: /app
  • Frequency: Daily
• You could have multiple searches for a component to support:
  • Vue implemenation
  • HAML implemenation
  • The presence of the classname on any line

Output:

• Send count of instances to dashboard in GitLab app
• Display count of instances on the right-side panel in Storybook
• Ideally package the results as JSON for code qualty: https://docs.gitlab.com/ee/user/project/merge_requests/code_quality.html
• Have alerts and reports when new code is written with components that don't match or are an outlier

Why this is important

Displaying the number of times a component is used gives insight to how important the component is. The pass/fail of these searches can also indicate how many legacy vs updated components we have.

Can also be used for:

• Font Awesome adoption: https://leipert-projects.gitlab.io/is-gitlab-pretty-yet/icons/
• Scanning for old jquery

Pajamas conversion efforts

• Right now, our saved searches are a snapshot on the day this will done and this will assist with monitoring the implementations over time
• We don't have to have to repeat the search in 6-9 months and notice that more non-compliant components have arrived
• The scanner can give code quality output right to the teams as the release features that will flag them on non-compliance to Pajamas
• Start behind a feature flag for internal use, but this could lead to a Design System feature for GitLab Repos that have Storybook installed. Would be a great addition to the Design System product as a feature for the Product Designer and Frontend Engineer personas