You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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):
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.
Context
Current
BreakpointContext/Examplesstories (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 Breakpointsstory (and ideally alsoDefault Breakpoints).Concrete proposals:
argsforbreakpoints: Record<string, number>and bind them viaargTypesto a Storybook controldevModeprop as a boolean controlSketch 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:
Tasks
Notes