redwood icon indicating copy to clipboard operation
redwood copied to clipboard

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

Open arimendelow opened this issue 1 year ago • 5 comments

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.

arimendelow avatar Nov 02 '23 21:11 arimendelow

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

simoncrypta avatar Nov 02 '23 21:11 simoncrypta

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: Screenshot 2023-11-05 at 11 39 52

After, once you specify argTypes (so that controls can be used): Screenshot 2023-11-05 at 11 41 19

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

arimendelow avatar Nov 05 '23 17:11 arimendelow

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

Tobbe avatar Nov 28 '23 14:11 Tobbe

hi @Tobbe !!

no luck on either fronts :(

arimendelow avatar Nov 28 '23 14:11 arimendelow

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

Tobbe avatar Dec 05 '23 19:12 Tobbe