When using multiple design links (ie an array), support merging with inherited array values

[riotrah]

Is your feature request related to a problem? Please describe. Apologies if the title is weird, not sure how else to describe in a one-liner. Basically, storybook allows parameterization at the story, component and global level (at least, I think).

I'd love to be able to have any permutation of a subset or whole of the following in their own design sub- abs:

1. Define a global design embed for my org's Style Guide 2. ie via preview.js
2. Define a component level design embed for a particular, well, component 4. ie via component-level parameters
3. Finally, define a story-level embed ... as above etc

Realistically, I'm only ever gonna use (1.) and (3.) above, but others' usage patterns may vary.

Describe the solution you'd like Currently we can always pass in an array to define multiple links - but it isn't clear from the source code or demo storybook instance that we can define, eg:

1. within preview.js:

export const parameters = {
	design: [{ ... , inherit: true }]
}

2. within some-story.jsx

...
.parameters = {
	design: [{ ... }]
}

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Design types

this request is generalizable across all and any future types

• [ ] figma
• [ ] figspec
• [ ] link
• [ ] image
• [ ] iframe

Additional context Add any other context or screenshots about the feature request here.

Thanks for your wonderful work on this so far <3

[pocka]

It seems Storybook only merges plain objects, not arrays.

https://github.com/storybookjs/storybook/blob/7035ea7389393da041985ebc491ee58dedb50d06/code/lib/store/src/parameters.test.ts#L23

Extending the parameter might enable users to define global items, but I'm not willing to add more unions to the parameter in the current version, for the sake of maintainability and from an API design perspective.

// Current
type Parameter = Config | Config[]

// This solves?
type Parameter =
  | Config
  | Config[]
  | {
    [key: string]: Config
  }

// Breaking, but much better
interface Parameter {
  [key: string]: Config
}

This could be done in the next major release.

[riotrah]

@pocka thanks for looking into this. That's good reasoning.

What kind of help would you want? Or specifically, I'd like to help, but I'm not sure how you want that to fit into whatever release schedule you've got

[pocka]

I've put the help wanted label for a "feedback requested" purpose just because I'm lazy...

Currently, there is no specific timeline for the next major (v7), but I hope I can ship it before this November. I'd like to add this change to the v8 so that users can upgrade to storybook-addon-designs@v7 (add support for Storybook v7) without touching the addon-specific things. Sorry for the inconvenience.

Tasks for this change would be something like this:

• Use zod or something similar for config parsing. Checking Config | { [key: string]: Config } by hand definitely will cause a lot of bug...
• Add unit tests for the parse function.
• Update documentation.
• Update examples.
• Manual tests.