seems not to work with React CSS Modules

naomiHauret commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

storybook-eol / addon-smart-knobs

seems not to work with React CSS Modules #21