Using storyboard as an editor, anti pattern?

[Oliver-Bagin]

Summary

Motivation

I want to create a base website that I can easily fork and create white labeled versions of. The websites will share most components but some will be super unique. Its important that I have full code level control over each of them.

I want to provide the design team with an easy way to edit the style of the react websites. I want to give them as much control as possible. I would like it to be as easy for them as editing a story book story . So I thought why not make it just that?

Solution

I am thinking of using story book in the traditional way but I also thought of another way I could use it that might be an anti pattern.

My idea is to have the site have a bunch of stories for testing the components but with a set of additional special stories I've been calling core stories. My idea is to spread the args from these stories as props into the components when they are used in the real site (not in another story). This means that by editing the story for that component you are actually editing how it will show in the website. Another way to say that is the story file is actually part of the code so when a user edits it, the site is edited.

Example

In my button story I might have:

export const CoreSecondary: Story = {
  args: {
    label: 'Button',
    backgroundColor: "rgb(255, 0, 0)"
  },
};

Then the designer can easily edit the story though the story book ui to update the color.

In the actual website code for a higher level component - say a menu bar - I would reference the story as such:

<Button {...CorePrimary.args} onClick={onLogin} label="Log in"/>

Parting words
This would allow a kind of nesting of the story components to allow a non technical user to restyle an entire react app and pass it back to the developers to implement more features.

What are peoples thoughts? Madness or reason? Is this going to break things or cause performance issues?

Thanks

Additional information

No response

Create a reproduction

No response