Panel Addon Development: How to retrieve user configuration in panel component

[LucaMargadant]

Summary

Hello there,

I'm currently working on developing a Storybook panel addon. It should allow users to customize CSS variables defined in the :root, which will then update all components using those CSS variables. The goal is to enable designers to experiment with new configurations on developed components based on a custom design system.

Currently, I'm having trouble retrieving the user's configuration in my Panel Component. Unfortunately, I haven't found any guidance that points me in the right direction. So, I'm reaching out here for some assistance.

Any help would be greatly appreciated.

To clarify my objective further, I want users to be able to add configurations in their main.ts (or preview.js? I've tried both without success).

// main.ts
const config: ExtendedStorybookConfig = {
  // ....  
  cssVarsManager: {
    variables: {
      Colors: {
        '--c-primary': {
          control: 'color',
          initialValue: 'red',
        },
        '--c-secondary': {
          control: 'color',
          initialValue: 'blue',
        },
      }
    },
    
    settings: {
      autoDetection: false,
    }
  },
  // ...
};
export default config;

Then, in my panel, I would need to retrieve that information so that I can render form inputs according to the configuration. I have a clear idea of how I want to achieve my goal with this addon, except for how to obtain user configurations.

// AddonPanel.tsx
import React from 'react';

export const AddonPanel = ({ active }) => {
    // How to get the settings from the config?
    return (
        <div style={{ display: active ? 'block' : 'none' }}>
        ...
        </div>
    );
};

Additional information

No response

Create a reproduction

No response

[LucaMargadant]

I've figured out a solution that works, so I'll close this discussion.

Users need to add the configuration in their preview.ts or preview.js file. After giving it some thought, this approach makes absolute sense because it allows the parameters to be overridden even at the story level.

const preview: Preview = {
  parameters: {
    someConfigs: {
    },
  },
};

export default preview;

And then we can retrieve it in the tsx Addon Panel like so

import React from 'react';
import { useParameter } from '@storybook/manager-api';

export const AddonPanel = ({ active }) => {
    const someConfigs = useParameter('someConfigs', null);
    console.log(someConfigs);

    return (
        <div style={{ display: active ? 'block' : 'none' }}>
        ...
        </div>
    );
};