Hardcoded theme imports in Storybook makes adding a new theme difficult

[kyh]

When using this template for a project I noticed that the hardcoded theme imports in storybook makes updating the theme, particularly adding, removing, or editing the theme name a very manual process.

Proposal:

Dynamically generate previews based on number of themes

export const withTheme = (storyFn: any) => {
  const themes = Object.keys(theme);
  return (
    <>
      {themes.map((t) => (
        <ThemeProvider theme={theme[t]}>
          ...
        </ThemeProvider>
      ))}
    </>
  );
};

In the .stories.mdx where the theme is imported, we render the content using the useTheme hook instead:

export const Palette = () => {
  const theme = useTheme();

  const palette = Object.keys(theme.colors).map((colorKey) => ({
    title: colorKey,
    subtitle: `theme.colors.${colorKey}`,
    colors: Object.values(theme.colors[colorKey]),
  }));

  return (
    <ColorPalette>
      {palette.map((colorItem) => (
        <ColorItem key={colorItem.title} {...colorItem} />
      ))}
    </ColorPalette>
  );
};

<Preview withSource="none">
  <Story name="Colors">
    <Palette />
  </Story>
</Preview>