Skip to content

ROU-12978: Rebrand Storybook with custom docs pages and manager chrome - #1222

Merged
BenOsodrac merged 11 commits into
ROU-12714from
ROU-12978-storybook-branding
Aug 31, 2026
Merged

ROU-12978: Rebrand Storybook with custom docs pages and manager chrome#1222
BenOsodrac merged 11 commits into
ROU-12714from
ROU-12978-storybook-branding

Conversation

@jessicamendesOS

Copy link
Copy Markdown

Summary

  • Replaces Introduction.mdx and inline MDX docs with branded React pages: Welcome, Getting Started, Component Library, CSS Architecture, and Theme Editor (MDX wrappers + dedicated page components).
  • Adds an interactive CSS API Reference UI (CssApiReferencePage) fed by npm run docs:css-api, which now generates css-api-manifest.ts plus a thin CssApiReference.mdx wrapper (keeps ROU-12714 script-driven source of truth, no duplicate docs/css-api-reference.md).
  • Updates Storybook manager/preview chrome: custom sidebar styling, light/dark appearance sync, toolbar globals for MDX docs, and sticky navigation on CSS API Reference / Theme Editor.

Test plan

  • Run npm run storybook and verify Welcome, Getting Started, Component Library, CSS Architecture, CSS API Reference, and Theme Editor pages render in light and dark appearance.
  • Run npm run docs:css-api and confirm css-api-manifest.ts + CssApiReference.mdx regenerate without manual edits.
  • On CSS API Reference and Theme Editor, scroll to the toolbar/browser section and confirm sticky rail + scrollable component/role lists fill the viewport correctly.
  • Toggle manager appearance (moon/sun) and preview globals (icons, theme, RTL, pattern dark mode) on a pattern story and an MDX doc page.
  • Confirm manager sidebar typography/width and nav depth styling match the intended branding.

Made with Cursor

Replace Introduction/inline MDX with React doc pages (Welcome, Getting Started, Component Library, CSS Architecture, Theme Editor) and an interactive CSS API Reference fed by the generated manifest, while aligning manager sidebar, appearance sync, and sticky doc navigation with the new layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
@jessicamendesOS
jessicamendesOS requested a review from a team as a code owner August 20, 2026 14:28
@wiz-code-outsystems

wiz-code-outsystems Bot commented Aug 20, 2026

Copy link
Copy Markdown

Wiz Scan Summary

Scanner Findings
Vulnerability Finding Vulnerabilities -
Data Finding Sensitive Data -
Secret Finding Secrets -
IaC Misconfiguration IaC Misconfigurations -
SAST Finding SAST Findings 8 Medium 1 Low
Software Management Finding Software Management Findings -
Total 8 Medium 1 Low

View scan details in Wiz

To detect these findings earlier in the dev lifecycle, try the Wiz Code extension for VS Code, JetBrains, or Visual Studio.

Pull Request Developer Guidance

Questions? See the Wiz FAQ.

Please contact the Security Office if you encounter issues with Wiz pull request scanning.

jessicamendesOS and others added 6 commits August 20, 2026 15:46
Without a committed lockfile, npm i on Chromatic resolves ^10.4.1 to 10.5.10, which is not yet available on the internal Azure Artifacts feed.

Co-authored-by: Cursor <cursoragent@cursor.com>
Integrate design tokens 2.0, platform CSS mock, and root-layer updates while keeping branded Storybook docs pages and pinned Storybook 10.5.9.

Co-authored-by: Cursor <cursoragent@cursor.com>
Improve CSS API Reference layout, Theme Editor controls, Getting Started
illustrations, sidebar spacing, and dark-mode fixes across docs pages.

Co-authored-by: Cursor <cursoragent@cursor.com>
…bar.

Introduce generated token reference pages (colours, type, spacing, borders, shape, elevation, transitions), group them with CSS Architecture, API Reference, and Theme Editor under Design system, and align docs chrome, dark mode, and cross-page links.

Co-authored-by: Cursor <cursoragent@cursor.com>
Resolve generate-css-api-reference conflict by keeping the React-only generator (esc helper removed with legacy markdown output).

Co-authored-by: Cursor <cursoragent@cursor.com>
Resolved stories/CssApiReference.mdx by keeping the redesigned page wrapper
and regenerating the CSS API manifest (npm run docs:css-api) so it includes
the new --osui-* properties from ROU-12714.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@BenOsodrac BenOsodrac added documentation Improvements or additions to documentation chore labels Aug 31, 2026
BenOsodrac and others added 4 commits August 31, 2026 08:52
The Theme Editor memos read an external override store and used
'void changeTick' to mark the invalidation tick as used. stories/ is
not covered by the react-hooks lint, so the deps arrays alone suffice.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
SonarCloud flagged four functions over the 15 threshold:
- parseSpacingUtilities (32) -> extracted per-kind class matchers + a
  shared look-ahead scale finder
- generateColors classifier (47) -> split into per-category collectors
  with shared entry builders and an early-return dispatch
- parseTypographyMaps (23) -> extracted map-prop parsing, part
  resolution, and variant naming helpers
- extract in generate-css-api-reference (26) -> extracted interpolation
  scanner and --osui-* declaration parser

Verified with eslint-plugin-sonarjs (all now <= 15) and by regenerating
both outputs: token-data and css-api manifest are byte-identical.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

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

See analysis details on SonarQube Cloud

@github-actions

Copy link
Copy Markdown

🖼️ Storybook: Chromatic UI tests result: ✅ Passed

Metric Value
Visual changes 2
Errors 0
Storybook Preview
Chromatic Build View Results

@BenOsodrac

Copy link
Copy Markdown
Contributor

Sonarcloud repeated code warning is a false-positive

@BenOsodrac
BenOsodrac merged commit 6485949 into ROU-12714 Aug 31, 2026
11 of 12 checks passed
@BenOsodrac
BenOsodrac deleted the ROU-12978-storybook-branding branch August 31, 2026 08:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants