Find code pattern for knob reuse

[Paul-Hebert]

The Problem

Storybook knobs allow us to pass props into code demos. This is really cool for allowing users to interact with code examples and try out different options! It works great for pattern modifiers, pattern content, and more.

I was recently working on a new Table pattern. I wanted to have several demos showing all the different modifiers and options. I wanted each demo to show all of the options. However, for each demo I wanted to hard code the value of a specific knob.

For example, for the Striped Table example, I wanted to hard code the rowModifier knob to o-table--striped. This was my first, quick and dirty implementation:

# Table Object

The `o-table` class applies default styling to HTML `table` elements.
A table can optionally have headers and footers.

<Preview>
  <Story name="Basic">
    {basicDemo({
      hasHeader: boolean('Include Header', true),
      hasFooter: boolean('Include Footer', true),
      rowModifier: select('Table Row Modifier Class', [
        '',
        'o-table--ruled',
        'o-table--striped'
      ]),
      numericCells: boolean(
        'Add o-table__cell--numeric modifier to cells',
        false
      ),
      rightAlignRowHeadings: boolean('Right-align row Headings:', false)
    })}
  </Story>
</Preview>

# Striped Table

The `o-table--striped` modifier adds alternating background colors to table rows.

<Preview>
  <Story name="Striped">
    {basicDemo({
      hasHeader: boolean('Include Header', true),
      hasFooter: boolean('Include Footer', true),
      rowModifier: 'o-table--striped',
      numericCells: boolean(
        'Add o-table__cell--numeric modifier to cells',
        false
      ),
      rightAlignRowHeadings: boolean('Right-align row Headings:', false)
    })}
  </Story>
</Preview>

This quickly became ungainly as I added more examples and it seemed like there was an opportunity to DRY this up. Here's what I'd like to be able to do:

// This function returns all of our table knobs
// By passing in custom knobs you can override the default knob values
// This is helpful for setting a knob for a specific demo.
const knobs = customKnobs => {
  const defaultKnobs = {
    hasHeader: boolean('Include Header', true),
    hasFooter: boolean('Include Footer', true),
    rowModifier: select('Table Row Modifier Class', [
      '',
      'o-table--ruled',
      'o-table--striped'
    ]),
    numericCells: boolean(
      'Add <code>o-table__cell--numeric</code> modifier to cells',
      false
    ),
    rightAlignRowHeadings: boolean('Right-align row Headings:', false)
  };
  return { ...defaultKnobs, ...customKnobs };
};

<Meta title="Objects/Table" decorators={[withKnobs]} />

# Table Object

The `o-table` class applies default styling to HTML `table` elements.
A table can optionally headers and footers.

<Preview>
  <Story name="Basic">{basicDemo(knobs({}))}</Story>
</Preview>

# Striped Table

The `o-table--striped` modifier adds alternating background colors to table rows.

<Preview>
  <Story name="Striped">
    {basicDemo(knobs({ rowModifier: 'o-table--striped' }))}
  </Story>
</Preview>

This almost works. The striped demo renders with the custom knob value I passed in. However, the rowModifier knob still shows, but no longer does anything 🤔. I would like the rowModifier knob to be completely hidden for the striped demo.

I tried a handful of other solutions:

• Making a new object and manually adding either the custom or default knob to it as props. (Instead of spreading)
• Making a new defaultKnobs() function that returned a brand new object each time and then spreading that return { ...defaultKnobs(), ...customKnobs()}
• Importing defaultKnobs from a separate file
• Making defaultKnobs properties into anonymous functions that return the knob

None of these things worked. It seems like this should be doable. I feel like I'm missing something obvious, but I don't want to let this hold up my current design work any longer.

Any ideas?

[tylersticka]

FWIW, multiple issues for this have been reported and it sounds like Knobs are getting a total rewrite for 6.0: storybookjs/storybook#7217 (comment)

[Paul-Hebert]

Cool, maybe we just wait for 6.0 then and make a note to circle back at that point

[spaceninja]

@Paul-Hebert Is this still relevant now that @calebeby migrated us from knobs to controls?

[Paul-Hebert]

@spaceninja I do not believe so. I haven't worked in this repo since then, but when using controls on other projects I haven't run into this same issue.