storybookjs/storybook

[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

Open

#28235 opened on Jun 13, 2024

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
addon: controlsbughelp wantedsev:S3

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: storybook-issue-object-log-bug

Examples from my own project: storybook-issue-object-chart storybook-issue-object-chart2

Reproduction link

https://stackblitz.com/edit/stackblitz-starters-djpjga

Reproduction steps

  1. Make sure you're on the Button story page
  2. 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

Contributor guide