Storybook: Implement global source code transformer for story "Code" panel

[larsrickert]

Why?

Follow up for #1963

We contributed a "Code" panel to Storybook which shows the source code of an individual story in storybookjs/storybook#29253.

Unfortunately, we noticed that the code panel does not consider the global transformer function that we have set it in onyx to add icon and component imports, see

onyx/packages/storybook-utils/src/preview.ts

Line 86 in bca1c06

transform: sourceCodeTransformer,

.

This only works for the generated "Docs" page but not for the code panel. We want to also support this for the code panel to achieve a unified code snippet experience for our users.

Open questions / TODOs

No response

Depends on

No response

Design

No response

Acceptance criteria

• a Storybook contribution is implement and released that supports source code transformers for the code panel
• Ideally, all options that are available for the regular code block on the "Docs" page are also applied in the same way to the code panel so they do not differ

Implementation details

• see Docs: Add code snippet to addons panel storybookjs/storybook#29253 for where to implement the change
• if you have questions, you can contact @larsrickert or Storybook team members shilman or kasperpeulen

Reference implementations

No response

Applicable ARIA Pattern

No response

Definition of Done

• Should be covered by tests:

  • functional tests (Playwright or unit test)

• Make sure, that

  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly

Approval

Storybook
Documentation

• Checked and approved by
  • dev