Skip to content

Simplified Storybook preview setup & Centralized Checkbox variants#5683

Open
thomasvaeth wants to merge 3 commits intoInfisical:mainfrom
thomasvaeth:main
Open

Simplified Storybook preview setup & Centralized Checkbox variants#5683
thomasvaeth wants to merge 3 commits intoInfisical:mainfrom
thomasvaeth:main

Conversation

@thomasvaeth
Copy link

@thomasvaeth thomasvaeth commented Mar 13, 2026 •
edited
Loading

Summary

This PR makes two small cleanup/refactor changes in the frontend Storybook and Checkbox component:

  • Replaces the custom DocumentDecorator with a document-level override in .storybook/preview-head.html
  • Centralizes Checkbox variant values so the component type and Storybook controls use the same source of truth

Changes

  • Removed .storybook/decorators/DocumentDecorator.tsx
  • Added .storybook/preview-head.html to set html { overflow: visible; } for the Storybook iframe
  • Updated .storybook/preview.tsx to stop using DocumentDecorator
  • Added an inline comment in preview-head.html explaining why this belongs in preview-head instead of a decorator
  • Exported checkboxVariantOptions from src/components/v3/generic/Checkbox/Checkbox.tsx
  • Derived CheckboxVariant from that tuple and used it in CheckboxProps
  • Updated src/components/v3/generic/Checkbox/Checkbox.stories.tsx to use checkboxVariantOptions for Storybook variant controls
  • Ran Prettier on the Checkbox file after the refactor

Why

The Storybook change keeps document-level iframe styling in the place Storybook already provides for it, instead of using a React decorator for non-React behavior.

The Checkbox change avoids duplicating variant values between the component and its stories, which keeps types and Storybook controls in sync.

Testing

  • pnpm build-storybook

@maidul98
Copy link
Collaborator

maidul98 commented Mar 13, 2026

✅ Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
✅ Open Source Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Mar 13, 2026

Greptile Summary

This PR makes two independent improvements to the frontend developer tooling: it simplifies Storybook's global setup by replacing a React-decorator-based DOM override (DocumentDecorator) with a proper CSS injection via preview-head.html, and it centralizes the Checkbox component's variant definitions so that the component, its TypeScript types, and its Storybook stories all derive from a single exported checkboxVariantOptions constant.

Key changes:

  • DocumentDecorator (which used useEffect to mutate document.documentElement.className) is deleted in favor of frontend/.storybook/preview-head.html, which injects html { overflow: visible; } directly into Storybook's iframe <head>. This is the idiomatic Storybook way to apply document-level style overrides and avoids the fragility of React-effect-driven DOM manipulation.
  • checkboxVariantOptions is now an exported as const array in Checkbox.tsx, from which CheckboxVariant is derived. The satisfies Record<CheckboxVariant, string> constraint on the cva variants object ensures TypeScript will catch any future mismatch between the options array and the actual style definitions.
  • VariantProps<typeof checkboxVariants> is replaced with an explicit variant?: CheckboxVariant in CheckboxProps, making the prop type directly readable without needing to inspect the cva call.
  • No breaking changes — all changes are additive exports or internal refactors; the v2 Checkbox component is unaffected.

Confidence Score: 5/5

  • This PR is safe to merge — it is a purely additive developer-tooling and type-safety refactor with no runtime behavior changes to the application.
  • All changes are scoped to Storybook configuration and a frontend UI component's internal structure. No API surfaces, backend logic, database queries, or user-facing runtime behavior is modified. The new preview-head.html approach is the documented Storybook pattern for document-level overrides, and the TypeScript additions (satisfies, explicit type exports) improve correctness without altering compiled output.
  • No files require special attention.

Important Files Changed

Filename Overview
frontend/.storybook/decorators/DocumentDecorator.tsx Deleted file — the DOM-manipulation approach via useEffect is replaced by a cleaner CSS injection in preview-head.html.
frontend/.storybook/decorators/index.ts Removes the re-export of the deleted DocumentDecorator; no functional impact.
frontend/.storybook/preview-head.html New file injecting html { overflow: visible; } directly into Storybook's iframe <head>, replacing the previous DocumentDecorator approach.
frontend/.storybook/preview.tsx Removes DocumentDecorator from the global decorators list; RouterDecorator remains. Clean and correct.
frontend/src/components/v3/generic/Checkbox/Checkbox.tsx Centralizes variant options as an exported const array and derives the CheckboxVariant type from it; adds satisfies Record<CheckboxVariant, string> for exhaustive type checking; renames internal checkboxVariants to checkboxStyles for clarity; exports CheckboxProps.
frontend/src/components/v3/generic/Checkbox/Checkbox.stories.tsx Replaces hardcoded variant list with the exported checkboxVariantOptions array, keeping the Storybook controls in sync with the component source of truth.

Last reviewed commit: 3de81be

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@thomasvaeth @maidul98