fela | State-Driven Styling in JavaScript | Frontend Framework library

Have anybody managed to setup next.js with Fela and Styleguidist?

Styleguidist needs Next.js webpack configuration, however I cant just link it as mentioned here: https://react-styleguidist.js.org/docs/webpack.html

I am using this example app: https://github.com/zeit/next.js/tree/canary/examples/with-fela

Here is how my styleguide.config.js looks like:

In my app there's a component that renders (play)lists (I have 2 lists hardcoded ) I can Add a new list to the list of lists. When you click on a list the list of songs is displayed, and at the bottom of the list is a button that, when you click it, displays a form with inputs (title,artist,album). Before I fixed the adding list functionality, songs were added to the 'active' list but now the action is dispatched (ADD_SONG) and shows up with the right values in the (Redux)state but it renders the same type of element/component as the list and is not appened/added... I'm not sure where to look I hope someone can spot my faulty logic

AddSongForm

I am trying to setup a grid gallery in my Django website similar to pinterest.com.

I have the following HTML code:

I am running into an issue where I try to move the file from source to destination. The script works the first time but when I run it again and if the file/directory exists; it throws this error

fist thanks for your attention. I am trying to use fela for dynamically styling my component. Also for manage the states of app, we need to use redux. In fela we need to use a Provider to wrap all component of app. also in redux we have the same thing. for example the root of the app we have :

If you go to the React home page and add the attribute className='button' to the first example "A Simple Component" you should get this result:

(i.e. the div with "Hello Jane" now looks like a button)

If you also add the attribute is='super-nice-button' you should get this result: (i.e. the button styling is gone)

Why you ask? Seems when you combine className with is react doesn't generate a class attribute on the resulting dom node instead it generates a classname (which obviously has no meaning for the browser). Watch the difference below.

With only the class attribute:

With both the class and the is attributes:

My question: Why does react generate classname and not class when using the is attribute on a react element (and essentially destroying all styling)?

(background: I'm using inline-styling (or Fela) and I like to use the is attribute to tag my divs/panels so I can easily see the flow of components when clicking "Inspect Element" without having to tab over to the "React devtools". I understand it's kind of a hack but is is a supported attribute in React and HTML and it's a nice short word :) )