[Bug?]: Theming Storybook and having control descriptions in stories is broken

[arimendelow]

What's not working?

There are two things I've encountered to be broken with Storybook:

Theming is totally broken

Put the following in web/config/storybook/manager.js:

import { addons } from '@storybook/manager-api'
import { create } from '@storybook/theming/create'

addons.setConfig({
  theme: create({
    base: 'dark',

    brandImage: 'https://redwoodjs.com/images/logo-diecut-mark.svg',
    brandTitle: 'RedwoodJS Components',
    brandUrl: 'https://redwoodjs.com/',
  }),
})

You'll see that no matter what you do, it does not affect Storybook.

Control descriptions are broken

In a story, you can have argTypes defined something like this:

  argTypes: {
    placeholder: {
      description: 'The placeholder text',
      control: { type: 'text' },
    },

You'll see that no matter what you put in description, it won't show up in Storybook.

[simoncrypta]

Hi Ari, unfortunately manager got removed with Storybook v7 :
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#no-more-configuration-for-manager

I'm pretty sure it has a new way to set theme in preview or config file.

I also think they change how to handle arg :
https://storybook.js.org/docs/6.5/react/api/csf#args-story-inputs

[arimendelow]

Ah! Thanks for the reply @simoncrypta.

Will look further into the new way to theme.

On arg descriptions, what I put above is the correct way to do it in CSF3: https://storybook.js.org/docs/react/api/arg-types#manually-specifying-argtypes

In fact, they're inferred correctly before you set up controls, and no longer included at all once you do.

Before, with no argTypes specified:

After, once you specify argTypes (so that controls can be used):

This happens even if you only add one argType - it totally gets rid of the descriptions column.

[Tobbe]

@arimendelow Did you have any luck with theming? And I know nothing about argTypes, are you still having issues with that?

[arimendelow]

hi @Tobbe !!

no luck on either fronts :(

[Tobbe]

I'll assign this to Amy. She's busy with Advent of JS/CSS right now, so it'll probably be a while before she can start working on it, but at least it won't get lost this way

[Philzen]

This happens even if you only add one argType - it totally gets rid of the descriptions column.

@arimendelow Check that you have

  parameters: {
    // https://docs.redwoodjs.com/docs/7.x/storybook#configuring-rendering-with-storybookpreviewjs
    controls: { expanded: true },
  }

in your .storybook/preview.tsx default export. If that is not explicitly set, what you're experiencing seems to be the default behavior.

[arimendelow]

@Philzen ah good callout! This is actually an old bug from before the move to putting the RedwoodJS integration in a Storybook Framework Package.

I'll close it out.