Skip to content

Storybook improvements: interactive breakpoint controls + small redesign #19

Description

@smartlabsAT

Context

Current BreakpointContext/Examples stories (Default Breakpoints, Custom Breakpoints) render with hardcoded breakpoint configurations and only react to manual viewport/box resizing. They expose no Storybook args or Controls, so the user can't experiment with the lib without editing source.

Goals

1. Interactive breakpoint Controls

Make the breakpoints editable directly from the Storybook Controls panel for the Custom Breakpoints story (and ideally also Default Breakpoints).

Concrete proposals:

  • Define args for breakpoints: Record<string, number> and bind them via argTypes to a Storybook control
  • Allow the user to add / rename / remove breakpoints and tweak their numeric thresholds at runtime
  • Optionally expose the devMode prop as a boolean control

Sketch of the desired story shape (Storybook 10 CSF):

```ts
export const Custom: StoryObj = {
args: {
breakpoints: { Smart: 0, Mini: 350, Sedan: 600, SUV: 900, Ram: 1200 },
devMode: false,
},
argTypes: {
breakpoints: { control: 'object' },
devMode: { control: 'boolean' },
},
render: (args) => {
const ref = useRef(null);
return (
<BreakpointProvider {...args} targetRef={ref}>
{/* ... existing demo Box + CarBreakpointInfo ... */}

);
},
};
```

2. Small Storybook redesign

Tighten the visual presentation of the demo cards. Concrete design will be delivered separately. Out of scope until then.

Likely areas:

  • Layout / spacing of the resize-Box
  • Visual indicator for the currently active breakpoint
  • Cleaner Controls panel (descriptions on each arg)

Tasks

  • Convert `CarTemplate` to `StoryObj` with `args` + `argTypes` for editable `breakpoints` and `devMode`
  • Same treatment for `StandardTemplate` (optional but consistent)
  • Add `parameters.docs.description` on each story so the docs page explains what the user can tweak
  • Apply the delivered redesign once available
  • Verify Playwright e2e suite still passes (story IDs may stay the same; selectors may need a small tweak)

Notes

  • Depends on Storybook 10 (already on the upgrade branch `epic/dependency-updates-q2-2026` — issue Epic: Dependency Updates Q2 2026 #18). Best merged after the dep upgrade lands on `main`.
  • The `object` control in Storybook 10 lets the user edit JSON live in the panel — perfect fit for the breakpoints map.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions