[Bug]: After pressing the "Reset" button, the object editor adds new object properties - ones that would give compilation errors when trying to change them using TS code
#28235 opened on Jun 13, 2024
Description
Describe the bug
TL;DR: Intended behavior: I'm not allowed to change a property's value in my Angular/TS code - I get a compilation error ✔. Then why does Storybook let me change that property's value? It shouldn't. ❌
Let's say I have a library of my own and I use the type Config from a 3rd party library to overwrite some 3rd party library properties, to make sure I implement the look and feel of the company's branding. I then let users of my library use PartialConfig, to avoid letting them mess around with my overwrites.
Example types:
export type Config = {
fontFamily?: string;
fontSize?: number;
fontWeight?: string;
arrayOfStuff?: Stuff[];
color?: string;
someOtherArrayOfStuff?: Stuff[];
};
export type PartialConfig = Omit<Config, 'someOtherArrayOfStuff' | 'color'>;
If I'm exporting PartialConfig and the library users use it, then they don't have access to some properties, they get a compilation error.
But Storybook does its own thing, and after pressing the "Reset controls" button, all the default values for that configuration object appear in the object editor UI. Even if they appear there, you can't even change them (because, like I said, I'm overwriting them).
Examples from the reproduction link:
Examples from my own project:
Reproduction link
https://stackblitz.com/edit/stackblitz-starters-djpjga
Reproduction steps
- Make sure you're on the Button story page
- Press the "Reset controls" button -> new properties will appear
System
Reproduction link uses version 8.1.6.
Locally:
Storybook Environment Info:
System:
OS: Windows 10 10.0.19045
CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
Binaries:
Node: 18.19.1 - C:\Program Files\nodejs\node.EXE
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD <----- active
Browsers:
Edge: Chromium (125.0.2535.92)
npmPackages:
@storybook/addon-actions: 7.6.13 => 7.6.13
@storybook/addon-backgrounds: 7.6.13 => 7.6.13
@storybook/addon-controls: 7.6.13 => 7.6.13
@storybook/addon-links: 7.6.13 => 7.6.13
@storybook/addon-viewport: ^7.6.13 => 7.6.19
@storybook/addons: 7.6.13 => 7.6.13
@storybook/angular: 7.6.13 => 7.6.13
eslint-plugin-storybook: ^0.6.13 => 0.6.15
storybook: 7.6.13 => 7.6.13
storybook-addon-paddings: ^5.0.0 => 5.0.1
Additional context
No response