Question: globalTypes do not work

[Tom Freudenberg]

Describe the question

I started from here:

ff79441

and created just for a test:

preset.js

function config(entry = []) {
  return [...entry, require.resolve("./preview")];
}

function managerEntries(entry = []) {
  return [...entry, require.resolve("./register")];
}

module.exports = { managerEntries, config }

preview.js

export const globalTypes = {
  theme: {
    name: "Theme",
    description: "Global theme for components",
    toolbar: {
      icon: "circlehollow",
      title: "Theme",
      items: [
        { value: "light", icon: "circlehollow", title: "light" },
        { value: "dark", icon: "circle", title: "dark" },
        { value: "side-by-side", icon: "sidebar", title: "side by side" },
        { value: "stacked", icon: "bottombar", title: "stacked" },
      ],
    },
  },
};

register.js

import React from 'react';

import { addons, types } from '@storybook/addons';

import { AddonPanel } from '@storybook/components';
import { useParameter } from '@storybook/api';

const ADDON_ID = 'myaddon';
const PANEL_ID = `${ADDON_ID}/panel`;

const PARAM_KEY = 'myAddon';

const MyPanel = () => {
  const value = useParameter(PARAM_KEY, null);
  const item = value ? value.data : 'No story parameter defined';
  return <div>{item}</div>;
};

addons.register(ADDON_ID, (api) => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My Addon',
    render: ({ active, key }) => (
      <AddonPanel active={active} key={key}>
        <MyPanel />
      </AddonPanel>
    ),
  });
});

If I add this "addon" to my storybook main.js

1. the Panel and function is available
2. The theme Button is not available

What I am doing wrong or have missunderstood?

Thanks for a short help again.

Tom

[Tom Freudenberg]

@shilman @winkerVSbecks thanks for your support again

[Tom Freudenberg]

This are my storybook installed packages:

    "@storybook/addon-actions": "6.5.12",
    "@storybook/addon-controls": "6.5.12",
    "@storybook/addon-docs": "6.5.12",
    "@storybook/addon-essentials": "6.5.12",
    "@storybook/addon-interactions": "6.5.12",
    "@storybook/addon-links": "6.5.12",
    "@storybook/builder-webpack5": "6.5.12",
    "@storybook/manager-webpack5": "6.5.12",
    "@storybook/preset-scss": "1.0.3",
    "@storybook/react": "6.5.12",
    "@storybook/testing-library": "0.0.13",

[Varun Vachhar]

@TomFreudenberg just tested the addon-kit and the globalTypes are working. Are you using the addon-kit or rolling your own addon?

[Tom Freudenberg]

I am rolling my own addon from the simple starter addon (myaddon) just have preset, preview and register

[Tom Freudenberg]

Hi @winkerVSbecks

not sure what happened or what was my mistake before.

Checked it again tonight and all worked.

Sorry for any inconvinience
Tom