The addition of new properties about storybook-addon-material-ui

[code4cake]

Hey @usulpro hadn't had time to work on it last week, but working on it today and this weekend.

[code4cake]

Hey so if it hasn't been claimed, may I work on this issue?

[usulpro]

You are welcome!

[code4cake]

OkI'll work on this thanks

[usulpro]

Hi @dantesolis!
just wanted to know how you're doing with it and whether you need any help?

[code4cake]

@usulpro just to be clear, when you say 'addition of new properties to objects'. You mean to declare them inside the

const propTypes = {
    open: React.PropTypes.bool.isRequired,
    themeName: React.PropTypes.string.isRequired,
    theme: React.PropTypes.object.isRequired,
    muiTheme: React.PropTypes.object.isRequired,
    fullTheme: React.PropTypes.func.isRequired,
    collapseList: React.PropTypes.func.isRequired,
    shouldComponentUpdate: React.PropTypes.bool.isRequired,
    shouldShowData: React.PropTypes.bool.isRequired,
};

and the use them in the this.state declaration? I'm a bit lost 🙃

[usulpro]

@dantesolis let me clarify this task:

'addition of new properties to objects'

• 'objects'

  it's a theme object. You can find it here (it's just an example instance).
  You can also see it in the addon panel when you start storybook by 'npm start'
  

And you have an access to all properties via theme editor

that's all the same object.

• 'new properties' means simple fields of objects in the theme object. As an example: palette.textColor - it's an existing property, palette.userColor - it's a new property wich we would like to add here. Now we already have a possibility to add such a properties by just editing theme object in the addon panel but not in the theme editor
• 'addition of new properties' it's about to add some button in the theme editor wich could add a new property with some default name(ability to set name) and value.

for this you need to see:

• ThemePropBlock.js#L96-L105 it's a place where each separated property is rendered.
• and this ThemePropItem.js#L61 - implementation of property line

Tip:

you can create a new component based on ThemePropItem and put it in the end of 'ThemePropBlock' wich could have a (+) button instead of [ ]

ps
sorry for my english, I hope I'm clearly described all. Feel free to ask any question if you need.

[code4cake]

@usulpro hey man your english is perfect and you explained perfectly. I'm still having problems
wrapping my head around the code.

But wanted to make sure if I'm on the right path or not. The idea is to allow the user to add a property to each individual object. Using the palette object as an example...

[usulpro]

@dantesolis It looks greate!
The only two things I would add:

• input field for value
• maybe better the tip text to be 'New prop name' - to clarify that new prop will be added

And if it possible could you check the appearance with different width of sidebar? (now it can't be changed by mouse but it should) I suppose it worth to add display: flex to wraping div and set the minWidth of input elements.

[usulpro]

And one more thing :)
Need to setup theme supported appearance - colors should be taken from context.
here is an example: https://github.com/sm-react/storybook-addon-material-ui/blob/master/src/components/ThemePropItem.js#L206 or just ask me if you have an issue

[code4cake]

Hey man so I'm pushing what I have so you can see it, it's far from done, but I'm getting confused on how to pass the value of my input back into the ThemePropBlock.js I created a function valueUserInputHandler(event){...} to handle the state and the change of that component. I'm sorry for the stupid questions, new to React and this, but I still will like to contribute on it.

[usulpro]

Dont't worry @dantesolis, It's a place where you are welcomed to start hacking React.
Just make a PR to me to let me see you code. You'll be able to update it as you progress.

[code4cake]

@usulpro thanks man, that's what I'm looking for to learn more about react and contribute. I'm doing a PR right now

[usulpro]

sidebar will be deprecated