{"action":"created","issue":{"url":"https://api.github.com/repos/bitnami/hex/issues/219","repository_url":"https://api.github.com/repos/bitnami/hex","labels_url":"https://api.github.com/repos/bitnami/hex/issues/219/labels{/name}","comments_url":"https://api.github.com/repos/bitnami/hex/issues/219/comments","events_url":"https://api.github.com/repos/bitnami/hex/issues/219/events","html_url":"https://github.com/bitnami/hex/issues/219","id":356469386,"node_id":"MDU6SXNzdWUzNTY0NjkzODY=","number":219,"title":"Create the core react components","user":{"login":"Angelmmiguel","id":4056725,"node_id":"MDQ6VXNlcjQwNTY3MjU=","avatar_url":"https://avatars0.githubusercontent.com/u/4056725?v=4","gravatar_id":"","url":"https://api.github.com/users/Angelmmiguel","html_url":"https://github.com/Angelmmiguel","followers_url":"https://api.github.com/users/Angelmmiguel/followers","following_url":"https://api.github.com/users/Angelmmiguel/following{/other_user}","gists_url":"https://api.github.com/users/Angelmmiguel/gists{/gist_id}","starred_url":"https://api.github.com/users/Angelmmiguel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Angelmmiguel/subscriptions","organizations_url":"https://api.github.com/users/Angelmmiguel/orgs","repos_url":"https://api.github.com/users/Angelmmiguel/repos","events_url":"https://api.github.com/users/Angelmmiguel/events{/privacy}","received_events_url":"https://api.github.com/users/Angelmmiguel/received_events","type":"User","site_admin":false},"labels":[{"id":1043975344,"node_id":"MDU6TGFiZWwxMDQzOTc1MzQ0","url":"https://api.github.com/repos/bitnami/hex/labels/react","name":"react","color":"ffd52b","default":false}],"state":"open","locked":false,"assignee":{"login":"Angelmmiguel","id":4056725,"node_id":"MDQ6VXNlcjQwNTY3MjU=","avatar_url":"https://avatars0.githubusercontent.com/u/4056725?v=4","gravatar_id":"","url":"https://api.github.com/users/Angelmmiguel","html_url":"https://github.com/Angelmmiguel","followers_url":"https://api.github.com/users/Angelmmiguel/followers","following_url":"https://api.github.com/users/Angelmmiguel/following{/other_user}","gists_url":"https://api.github.com/users/Angelmmiguel/gists{/gist_id}","starred_url":"https://api.github.com/users/Angelmmiguel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Angelmmiguel/subscriptions","organizations_url":"https://api.github.com/users/Angelmmiguel/orgs","repos_url":"https://api.github.com/users/Angelmmiguel/repos","events_url":"https://api.github.com/users/Angelmmiguel/events{/privacy}","received_events_url":"https://api.github.com/users/Angelmmiguel/received_events","type":"User","site_admin":false},"assignees":[{"login":"Angelmmiguel","id":4056725,"node_id":"MDQ6VXNlcjQwNTY3MjU=","avatar_url":"https://avatars0.githubusercontent.com/u/4056725?v=4","gravatar_id":"","url":"https://api.github.com/users/Angelmmiguel","html_url":"https://github.com/Angelmmiguel","followers_url":"https://api.github.com/users/Angelmmiguel/followers","following_url":"https://api.github.com/users/Angelmmiguel/following{/other_user}","gists_url":"https://api.github.com/users/Angelmmiguel/gists{/gist_id}","starred_url":"https://api.github.com/users/Angelmmiguel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Angelmmiguel/subscriptions","organizations_url":"https://api.github.com/users/Angelmmiguel/orgs","repos_url":"https://api.github.com/users/Angelmmiguel/repos","events_url":"https://api.github.com/users/Angelmmiguel/events{/privacy}","received_events_url":"https://api.github.com/users/Angelmmiguel/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/bitnami/hex/milestones/5","html_url":"https://github.com/bitnami/hex/milestone/5","labels_url":"https://api.github.com/repos/bitnami/hex/milestones/5/labels","id":3612738,"node_id":"MDk6TWlsZXN0b25lMzYxMjczOA==","number":5,"title":"4.0.0","description":"","creator":{"login":"Angelmmiguel","id":4056725,"node_id":"MDQ6VXNlcjQwNTY3MjU=","avatar_url":"https://avatars0.githubusercontent.com/u/4056725?v=4","gravatar_id":"","url":"https://api.github.com/users/Angelmmiguel","html_url":"https://github.com/Angelmmiguel","followers_url":"https://api.github.com/users/Angelmmiguel/followers","following_url":"https://api.github.com/users/Angelmmiguel/following{/other_user}","gists_url":"https://api.github.com/users/Angelmmiguel/gists{/gist_id}","starred_url":"https://api.github.com/users/Angelmmiguel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Angelmmiguel/subscriptions","organizations_url":"https://api.github.com/users/Angelmmiguel/orgs","repos_url":"https://api.github.com/users/Angelmmiguel/repos","events_url":"https://api.github.com/users/Angelmmiguel/events{/privacy}","received_events_url":"https://api.github.com/users/Angelmmiguel/received_events","type":"User","site_admin":false},"open_issues":8,"closed_issues":6,"state":"open","created_at":"2018-08-31T09:40:14Z","updated_at":"2018-09-18T15:09:42Z","due_on":null,"closed_at":null},"comments":4,"created_at":"2018-09-03T11:34:44Z","updated_at":"2018-09-18T17:53:23Z","closed_at":null,"author_association":"COLLABORATOR","body":"Core components must be added to the project. \r\n\r\n* Themes (providers...)\r\n* HOC with spacing features and generic wrappers\r\n* Grid\r\n* Headings\r\n* Text\r\n* Basic helpers\r\n* Form\r\n\r\n# Exposing helpers (spacing, typography...)\r\n\r\nI'm working on the HEx-react package (core components). I was thinking how to manage all the common helpers that we can apply to the different components (margins, paddings, text colors...). My first approach has been to create \"wrapper\" components that includes this kind of helpers as `props`, so you don't need to deal with the `classNames`. For example:\r\n\r\n```\r\nimport { H1 } from '@bitnami/hex-react';\r\n<H1 marginTop=\"big\">Test!</H1>\r\n```\r\nHowever, it means you need to import all the H*, P, UL... It can be tedious to think of using the wrapper components all the time you want to use any helper.\r\n\r\nAnother option could be to use the `Box` component. It's a generic one that includes all the helpers. Currently, it uses a `div` but I can make it customizable. The counterpart of this solution is that you need to add a second component in case you want to use these helpers:\r\n\r\n```\r\nimport { Box } from '@bitnami/hex-react';\r\n<Box marginTop=\"big\">\r\n <h1>Test!</h1>\r\n</Box>\r\n```\r\n\r\nThe last option is to ignore all these components and encourage developers to use the `classNames` all the time. But I feel this is not React friendly and it's more verbose than just using the props.\r\n\r\n```\r\n<h1 className=\"marginTop\">Test</h1>\r\n```\r\n\r\n**What do you think or you expect the HEx-react package will provide you?** Thanks! :smile:\r\n\r\nPS: I've already started with the first approach, but the PRs are not landed yet:\r\n\r\n- #229\r\n- #230"},"comment":{"url":"https://api.github.com/repos/bitnami/hex/issues/comments/422487869","html_url":"https://github.com/bitnami/hex/issues/219#issuecomment-422487869","issue_url":"https://api.github.com/repos/bitnami/hex/issues/219","id":422487869,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMjQ4Nzg2OQ==","user":{"login":"earnubs","id":167440,"node_id":"MDQ6VXNlcjE2NzQ0MA==","avatar_url":"https://avatars3.githubusercontent.com/u/167440?v=4","gravatar_id":"","url":"https://api.github.com/users/earnubs","html_url":"https://github.com/earnubs","followers_url":"https://api.github.com/users/earnubs/followers","following_url":"https://api.github.com/users/earnubs/following{/other_user}","gists_url":"https://api.github.com/users/earnubs/gists{/gist_id}","starred_url":"https://api.github.com/users/earnubs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/earnubs/subscriptions","organizations_url":"https://api.github.com/users/earnubs/orgs","repos_url":"https://api.github.com/users/earnubs/repos","events_url":"https://api.github.com/users/earnubs/events{/privacy}","received_events_url":"https://api.github.com/users/earnubs/received_events","type":"User","site_admin":false},"created_at":"2018-09-18T17:53:23Z","updated_at":"2018-09-18T17:53:23Z","author_association":"NONE","body":"There's a lot of issues to unpack here :)\r\n\r\nSpeaking from an app developers point of view...\r\n\r\nWrapping every HTML element isn't practical, nor is it neccessary imo. `div` and `span` for example are simply (from a certain point of view) shorthand for block and inline elements, there's no general styling, semantic or behavioural complexity we need to wrap into a module. \r\n\r\nThere may be specific use cases of a div that we do want to wrap into a component because they do involve complexity: for example a call-out comes with style, background, border-radius and treatment of content that makes wrapping into a component worthwhile.\r\n\r\nWith headings it's a variation of the same idea, I'd want to keep the HTML elements h1-6 as simple as possible, so they can be easily used without having to override CSS. A React `H` (for example) component can encapsulate the main header styles/behaviours of your app:\r\n\r\n```\r\n<H style=\"massive\" rank=\"1\">\r\n  Man Walks on Moon!\r\n</H>\r\n// output => <h1 class=\"hex-heading--massive\">Man Walks on Moon!</h2>\r\n```\r\n\r\nSame for ul/li, only wrap up specific implementation of a list (eg Table of Contents), not the element itself, because it's too simple.\r\n\r\n`Form` elements are generally not too simple, have specific style and behaviour, and we benefit from wrapping those into React components for the typical use cases. (I would still keep the bare elements as plainly styled as possible.)\r\n\r\n\r\nOn helpers, I would probably shy away from widespread use of helpers to augment CSS classes. What you want is a library that contains self contained components that are fully encapsulated, and build up by composing smaller/simpler components.\r\n\r\nSo, following a component based methodolgy, this:\r\n`<h1 className=\"marginTop\">Test</h1>`\r\n\r\nwould become this:\r\n\r\n`<h1 className=\"Heading--rank-1\">Test</h1>`\r\n\r\nWith the CSS entirely defined with the component in `Heading.css`:\r\n\r\n```\r\n/components/Heading\r\n  /components/Heading/index.js\r\n  /components/Heading/Heading.css\r\n  /components/Heading/Heading.test.js\r\n```\r\n\r\nThis is where we diverge from the CSS library model into a pure component model, we don't generally apply CSS classnames that represent a general style augmentation.\r\n\r\nSorry, I have to run, will probably read this tomorrow and see mistakes!"}}
{"actor":{"display_login":"earnubs"}}