Storybook support with direflow react components.

[sunnyChoudhary0710]

Describe the bug
I would like to create a storybook link to showcase all Direflow react components I have created for my React based component library. I am using SCSS to style and theme my components and binding them using "Styled" wrapper from "direflow-component" as shown below.

` import { Styled } from 'direflow-component'; import styles from './Button.scss';

const Button: React.FC<ButtonProps> = (props) => { return ( <Styled styles={styles}> <button type="button" className={common-button-margin ${classes()} base-btn} > {props.children} </Styled> ) } `

It works fine when I test it as a standalone component directly feeding into the html DOM. But when I try to render same via stories in Storybook, I get below error...

TypeError: props.styles.reduce is not a function at Styled (http://localhost:6007/vendors~main.iframe.bundle.js:60773:31) at renderWithHooks (http://localhost:6007/vendors~main.iframe.bundle.js:108602:18) at mountIndeterminateComponent (http://localhost:6007/vendors~main.iframe.bundle.js:111281:13) at beginWork (http://localhost:6007/vendors~main.iframe.bundle.js:112395:16) at HTMLUnknownElement.callCallback (http://localhost:6007/vendors~main.iframe.bundle.js:93987:14) at Object.invokeGuardedCallbackDev (http://localhost:6007/vendors~main.iframe.bundle.js:94036:16) at invokeGuardedCallback (http://localhost:6007/vendors~main.iframe.bundle.js:94091:31) at beginWork$1 (http://localhost:6007/vendors~main.iframe.bundle.js:117002:7) at performUnitOfWork (http://localhost:6007/vendors~main.iframe.bundle.js:115956:12) at workLoopSync (http://localhost:6007/vendors~main.iframe.bundle.js:115929:22)

To reproduce
Steps to reproduce the behavior:

1. Create a Direflow react component and use SCSS for styling.
2. Feed the styles into the component using "Styles" wrapper provided by "direflow-component"
3. Integrate Storybook by following steps in this link.
4. Create a simple story as described in above link.
5. run "npm run storybook"
6. The error should be visible now

Expected behaviour
It shouldn't case issues and should resolve the styles on runtime.

Package Manager:
To install Direflow, I used npm and followed steps mentioned in official docs

Screenshots

Additional context
I am using below versions... "direflow-component": "3.5.3", "direflow-scripts": "3.5.3",

[pierretoure]

Have the same bug. Any updates ?