Using Material-UI components in Storybook producing weird code snippets

user_11090056 0
Viewed 573

I'm using Storybook together with Material-UI components. When importing and implementing them there and I look into the produced code snippets in the 'show code' tab I get weird withStyles(forwardRef(COMPONENT)) outputs.

This is my code:

import React from 'react'
import { Story, Meta } from '@storybook/react/types-6-0'
import { MenuItem, Select } from '@material-ui/core'
import {
  ArgsTable,
  Description,
  Primary,
  PRIMARY_STORY,
  Stories,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'

export default {
  title: 'Reusable/Themed Components/SelectComponent',
  component: Select,
  argTypes: {
    variant: {
      control: {
        type: 'select',
        options: ['filled', 'outlined', 'standard'],
        defaultValue: ['standard'],
      },
    },
  },
  parameters: {
    docs: {
      page: () => (
        <>
          <Title>Select</Title>
          <Subtitle>
            This is the docs for the generic Select component.
          </Subtitle>
          <Description>Lirum Larum Description.</Description>
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
          <Stories includePrimary />
        </>
      ),
    },
  },
} as Meta

const Template: Story = ({ ...args }) => (
  <Select variant={args.variant} style={{ width: '120px' }}>
    <MenuItem value="german" selected>
      Deutsch
    </MenuItem>
    <MenuItem value="english">Englisch</MenuItem>
    <MenuItem value="arabic">Arabisch</MenuItem>
  </Select>
)

export const SelectComponentStory = Template.bind({})
SelectComponentStory.storyName = 'SelectComponent'

Output from the 'show code' tab in the Storybook 'playground':


<WithStyles(ForwardRef(Select))
  style={{
    width: '120px'
  }}
>
  <WithStyles(ForwardRef(MenuItem))
    selected
    value="german"
  >
    Deutsch
  </WithStyles(ForwardRef(MenuItem))>
  <WithStyles(ForwardRef(MenuItem)) value="english">
    Englisch
  </WithStyles(ForwardRef(MenuItem))>
  <WithStyles(ForwardRef(MenuItem)) value="arabic">
    Arabisch
  </WithStyles(ForwardRef(MenuItem))>
</WithStyles(ForwardRef(Select))>

Expected output that I'd like to see generated in the show code tab, so that developers and reuse it:

<Select variant='standard' style={{ width: '120px' }}>
    <MenuItem value="german" selected>
      Deutsch
    </MenuItem>
    <MenuItem value="english">Englisch</MenuItem>
    <MenuItem value="arabic">Arabisch</MenuItem>
  </Select>

Anyone know how to get there?

Edit: here's the image of the output for visual reference: description

storybook material-ui reactjs
3 Answers

Perhaps more of a workaround than a fix, but I was able to fix this by using Storybook's transformSource within parameters.docs, like so:

const meta = {
  title: "Core Components (Atoms)/Buttons",
  component: Button,
  parameters: {
    docs: {
      transformSource: source => source.replace(/WithStyles\(ForwardRef\(/g, "").replace(/\)\)/g, ""),
    },
  },

I would also add that wrapping your component and giving it a displayName might help resolve this as well.

user_9080460

Link to the storybookjs doc and thread

Example provided in documentation:

const SOURCE_REGEX = /^\(\) => `(.*)`$/;
export const parameters = {
  docs: {
    transformSource: (src, storyContext) => {
      const match = SOURCE_REGEX.exec(src);
      return match ? match[1] : src;
    },
  },
};
user_113852960

I've updated @dnnypck's answer to the following:

  parameters={
    docs: {
      transformSource: source => source.replace(/WithStyles\(ForwardRef\((\w+)\)\)/g, "$1").replace(/WithStyles\((\w+)\)/g, "$1"),
    }
  }

This captures a few cases where container elements retain the WithStyles.

user_4110630
Related