{"action":"created","issue":{"url":"https://api.github.com/repos/diegohaz/singel/issues/15","repository_url":"https://api.github.com/repos/diegohaz/singel","labels_url":"https://api.github.com/repos/diegohaz/singel/issues/15/labels{/name}","comments_url":"https://api.github.com/repos/diegohaz/singel/issues/15/comments","events_url":"https://api.github.com/repos/diegohaz/singel/issues/15/events","html_url":"https://github.com/diegohaz/singel/issues/15","id":337237005,"node_id":"MDU6SXNzdWUzMzcyMzcwMDU=","number":15,"title":"About separate of concerns to make the components easy to reason about","user":{"login":"joaolavoier-luizalabs","id":39708195,"node_id":"MDQ6VXNlcjM5NzA4MTk1","avatar_url":"https://avatars1.githubusercontent.com/u/39708195?v=4","gravatar_id":"","url":"https://api.github.com/users/joaolavoier-luizalabs","html_url":"https://github.com/joaolavoier-luizalabs","followers_url":"https://api.github.com/users/joaolavoier-luizalabs/followers","following_url":"https://api.github.com/users/joaolavoier-luizalabs/following{/other_user}","gists_url":"https://api.github.com/users/joaolavoier-luizalabs/gists{/gist_id}","starred_url":"https://api.github.com/users/joaolavoier-luizalabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joaolavoier-luizalabs/subscriptions","organizations_url":"https://api.github.com/users/joaolavoier-luizalabs/orgs","repos_url":"https://api.github.com/users/joaolavoier-luizalabs/repos","events_url":"https://api.github.com/users/joaolavoier-luizalabs/events{/privacy}","received_events_url":"https://api.github.com/users/joaolavoier-luizalabs/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-06-30T19:20:10Z","updated_at":"2018-06-30T22:15:01Z","closed_at":null,"author_association":"NONE","body":"Hi, great job! \r\n\r\nI've loved this library and the Singel's concepts, that's really awesome. But there is a concept that I think should be dangerous, like the obligation to pass the `style` and `classNames` props up to the parent component.\r\n\r\nI think this concept so much rigorous to make your application not scalable. I think it make sense in some cases, but not at all. Sometimes I need to encapsulate the styles of a component and control it by a prop as the article is against. \r\n\r\nWhen you are thinking about the **responsibility** of the components. When you would like to create the **styled** components with the characteristics of your application, and you want to give this responsibility just to the **styled components**, so the styles will be just into the **styled component**. \r\n\r\n### The benefits \r\n\r\n- It keeps you application clear, because you wont use styles in whole application.\r\n- When you need to change the style or a behaviour, you will just change a single component.\r\n- It fits as a glove about [separating presentational and container components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)\r\n\r\n## Resume \r\nIn my opinion, it would be a bad approach.\r\n\r\n``` js\r\n// good\r\nconst Element = ({ className, ...props }) => (\r\n  <div className={`foo ${className}`} {...props} />\r\n);\r\n\r\n// good\r\nconst Element = ({ style, ...props }) => (\r\n  <div style={{ padding: 0, ...style }} {...props} />\r\n);\r\n```\r\n\r\nTherefore you are allowing this:\r\n\r\n``` js\r\nconst WrapperContainerComponent = ({ isChecked }) => (\r\n  <Element style={{ padding: 0, backgroundColor: isChecked ? \"blue\" : \"white\" }}  />\r\n);\r\n```\r\n\r\nInstead of this:\r\n\r\n``` js\r\n// Wrapper\r\nconst WrapperContainerComponent = ({ isChecked }) => (\r\n  <Element isChecked={isChecked}  />\r\n);\r\n```\r\n\r\n``` js\r\n//Styled component\r\nconst Element = ({ isChecked }) => (\r\n  <div style={getStyles(isChecked)}  />\r\n);\r\n\r\nconst getStyles = (isChecked) => ({\r\n  padding: 0,\r\n  backgroundColor: isChecked ? \"blue\" : \"white\"\r\n})\r\n```"},"comment":{"url":"https://api.github.com/repos/diegohaz/singel/issues/comments/401569483","html_url":"https://github.com/diegohaz/singel/issues/15#issuecomment-401569483","issue_url":"https://api.github.com/repos/diegohaz/singel/issues/15","id":401569483,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMTU2OTQ4Mw==","user":{"login":"jmlavoier","id":3471145,"node_id":"MDQ6VXNlcjM0NzExNDU=","avatar_url":"https://avatars1.githubusercontent.com/u/3471145?v=4","gravatar_id":"","url":"https://api.github.com/users/jmlavoier","html_url":"https://github.com/jmlavoier","followers_url":"https://api.github.com/users/jmlavoier/followers","following_url":"https://api.github.com/users/jmlavoier/following{/other_user}","gists_url":"https://api.github.com/users/jmlavoier/gists{/gist_id}","starred_url":"https://api.github.com/users/jmlavoier/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jmlavoier/subscriptions","organizations_url":"https://api.github.com/users/jmlavoier/orgs","repos_url":"https://api.github.com/users/jmlavoier/repos","events_url":"https://api.github.com/users/jmlavoier/events{/privacy}","received_events_url":"https://api.github.com/users/jmlavoier/received_events","type":"User","site_admin":false},"created_at":"2018-06-30T22:15:01Z","updated_at":"2018-06-30T22:15:01Z","author_association":"NONE","body":"Now I guess I got it. I will study and try to aply this on my own projects. "}}
{"actor":{"display_login":"jmlavoier"}}