le0pard / storybook-addon-root-attribute

Storybook addon, which provide ability to change html, body or some element attribute
https://storybook-addon-root-attribute.leopard.in.ua
MIT License
18 stars 6 forks source link

Access current value within the template #23

Open colorfulfool opened 2 years ago

colorfulfool commented 2 years ago

Hi,

Is there a way to get the currently selected value of root attribute from within a template?

Something like:

...
  rootAttribute: {
    defaultState: {
      name: "Dark",
      value: "dark"
    },
    states: [
      {
        name: "Light",
        value: null
      }
    ]
  },
...

const Template: Story = (state, context) => (
  context.rootAttribute // returns "dark"
);
le0pard commented 2 years ago

@colorfulfool how about read it from DOM?

colorfulfool commented 2 years ago

Should be possible with a mutation observer, I guess. But it the app itself the theme (dark/light) is placed in Redux, from where it's synced to DOM. Appearance is mostly influenced by CSS that the DOM attribute triggers, but some components access the theme directly. So it would make sense to be able to inject the current value into Redux?

le0pard commented 2 years ago

So it would make sense to be able to inject the current value into Redux?

Yes, it make sense. Also some devs using context to pass "theme" to components

colorfulfool commented 2 years ago

So, is it possible?

To inject the value into story's Redux provider, I need to access the value from the story somehow.