seems not to work with React CSS Modules

[naomiHauret]

Hi, I'm having some issue with this add-on.

Here's an example component :

import React from "react"
import propTypes from "prop-types"
import CSSModules from "react-css-modules"
import styles from "./styles.css"

const Button = ({ label, handleClick }) => (
	<button
		className="bg-black sm:bg-green md:bg-yellow lg:bg-blue xl:bg-white text-red"
		styleName="module-text"
		onClick={handleClick}
	>
		{label}
	</button>
)

Button.propTypes = {
	label: propTypes.string,
	handleClick: propTypes.func,
}

export default CSSModules(Button, styles)

And its stories :

import React from "react"
import { storiesOf, addDecorator } from "@storybook/react"
import { withKnobs } from "@storybook/addon-knobs"
import { withSmartKnobs } from "storybook-addon-smart-knobs"
import { withInfo } from "@storybook/addon-info"

// add-on
import { action } from "@storybook/addon-actions"

// component
import Button from "./"

storiesOf("Button", module)
	.addDecorator((story, context) => withInfo("A button with a simple label")(story)(context))
	.addDecorator(withSmartKnobs)
	.addDecorator(withKnobs)
	.add("With a label", () => <Button label="Hey" onClick={action("Boo")} />)

Sadly, it doesn't generate the component's knobs (nor its props proptype with info add-on). If I only use withKnobs and add them manually, it works. I don't know if this is related to React CSS Modules, Storybook or to the add-on :confused:

A part of my package.json :

	"devDependencies": {
		"@storybook/addon-a11y": "^3.3.10",
		"@storybook/addon-backgrounds": "^3.3.10",
		"@storybook/addon-console": "^1.0.0",
		"@storybook/addon-info": "^3.3.10",
		"@storybook/addon-knobs": "^3.3.10",
		"@storybook/addons": "^3.3.10",
		"@storybook/react": "^3.3.10",
		"css-loader": "^0.28.9",
		"extract-text-webpack-plugin": "^3.0.2",
		"postcss": "^6.0.16",
		"postcss-cssnext": "^3.1.0",
		"postcss-easy-import": "^3.0.0",
		"postcss-loader": "^2.0.10",
		"react-css-modules": "^4.7.1",
		"storybook-addon-smart-knobs": "^3.3.1",
		"style-loader": "^0.19.1",
	}

Thanks for your help !

[ndelangen]

Do you have a repo you can share for us to experiment on?

I've never used that combo of addons, or react-css-modules.

[naomiHauret]

Sure ! My whole code is accessible on this repo I'm trying to create a complete boilerplate so don't hesitate if you just only the storybook + css-modules parts, I'll create another repo.

[Hypnosphi]

Seems related to https://github.com/storybooks/storybook/issues/2513 and https://github.com/storybooks/storybook/issues/1735

[Hypnosphi]

You can try to attach PropTypes directly to exported component instead:

const StyledButton = CSSModules(Button, styles)

StyledButton.propTypes = {
	label: propTypes.string,
	handleClick: propTypes.func,
}

export default StyledButton

[naomiHauret]

@Hypnosphi thanks for your help, it didn't do the trick though :confused: knobs still won't display with this technique.