From 198290d3ab27c1a54854c6eb45d7289f1caead12 Mon Sep 17 00:00:00 2001 From: Michael Mangialardi Date: Fri, 15 May 2020 14:41:31 -0400 Subject: [PATCH 1/7] Update README.md --- README.md | 169 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 167 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 944dbb4..df2b1a9 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,168 @@ -# helix-react +[![forthebadge](https://img.shields.io/badge/Made%20With-React-blue?style=for-the-badge&logo=react&labelColor=202020&color=62DAFB)](https://reactjs.org/) -A React component library to abstract the ugliness needed to consume HelixUI web components in React 16.6 +
+

Helix React

+ +

+ +

+ + A React wrapper of the [Helix UI Webcomponents Library](https://github.com/HelixDesignSystem/helix-ui/) + + 🚀 Alpha release coming this summer 🌻 +
+ +
+ +## Table of Contents + +- [The problem](#the-problem) +- [This solution](#this-solution) +- [Installation](#installation) +- [Examples](#examples) + - [Helix UI Webcomponent Snippet From Documentation](#helix-ui-webcomponent-snippet-from-documentation) + - [Our Implementation](#our-implementation) +- [Guiding Principles](#guiding-principles) +- [Issues](#issues) + - [🐛 Bugs](#-bugs) + - [💡 Feature Requests](#-feature-requests) + - [❓ Questions](#-questions) +- [Contributors](#contributors) + +## The problem + +You want to utilize the Helix UI webcomponents for your React application. +As a part of this goal, you have to write and maintain React components +that wrap the webcomponents with required boilerplate. You might want to +use a tool like [Storybook](https://storybook.js.org/) to see what these +wrappers look like. + +## This solution + +`Helix React` exposes React wrappers of the Helix UI webcomponents for you. +No need to write and maintain this yourself, this has you covered. As a bonus, +you can also see the components in Storybook in order to play around yourself. + +## Installation + +More details to come. + +### Prerequisites + +#### Helix UI +Follow the [Getting Started with HelixUI](https://helixdesignsystem.github.io/helix-ui/guides/getting-started/) guide + +## Examples + +### Helix UI Webcomponent Snippet From Documentation + +```jsx + + Open Modal + + +
+ ... +
+ + + ... + + +
+ + +
+ +``` + +### Our Implementation + +```jsx +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import useEventListener from '../hooks/useEventListener'; +import { SIZES } from '../constants'; + +const Modal = ({ onOpen, onClose, className, open, size, children, ...rest }) => { + const hxRef = useEventListener({ onOpen, onClose }); + return ( + + {children} + + ); +}; + +Modal.propTypes = { + id: PropTypes.string, + size: PropTypes.oneOf(SIZES), + children: PropTypes.node.isRequired, + className: PropTypes.string, + open: PropTypes.bool, + onClose: PropTypes.func, + onOpen: PropTypes.func, +}; + +export default Modal; +``` + +## Guiding Principles + +We try to only expose basic wrappers of Helix UI webcomponents. +Each wrapper corresponds with a component listed on the [Helix UI documentation](https://helixdesignsystem.github.io/helix-ui/): + +![helix-ui-documentation](https://user-images.githubusercontent.com/22566333/82083617-07f70700-96b8-11ea-9581-da1796737e52.png) + +These components are just the "building blocks" of other Helix patterns listed in +the [Helix design documentation](http://helix.rax.io/status.html). + +Our aim is expose these building blocks and not put them together for more +complex Helix patterns (i.e. a submit button with a loader). + +## Issues + +_Looking to contribute? Look for the [Good First Issue][good-first-issue] +label._ + +### 🐛 Bugs + +Please file an issue for bugs, missing documentation, or unexpected behavior. + +[**See Bugs**](https://github.com/HelixDesignSystem/helix-react/issues?q=is%3Aopen+is%3Aissue+label%3Abug) + +### 💡 Feature Requests + +Please file an issue to suggest new features. Vote on feature requests by adding +a 👍. This helps maintainers prioritize what to work on. + +[**See Feature Requests**](https://github.com/HelixDesignSystem/helix-react/issues?q=is%3Aopen+is%3Aissue+label%3Aenhancement) + +### ❓ Questions + +For questions related to using the library, please visit a support community +instead of filing an issue on GitHub. + +[Slack](https://join.slack.com/share/zt-edajgkat-LG_5SXYoCeIzknrQPVWaTA) + +## Contributors + +Thanks goes to these people: + + + + + + + +

James Thompson
💻
Nicko Winner-Arroyo
💻
Mike Mangialardi
💻
From 71c4163de02e9a7dc8c1bc3bc974982faffd1bda Mon Sep 17 00:00:00 2001 From: Michael Mangialardi Date: Fri, 15 May 2020 14:43:22 -0400 Subject: [PATCH 2/7] Center hero image --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index df2b1a9..03b88bd 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@

Helix React

-

+

From 1fc5ad8d65cca1b5263af640b9316d99026a6042 Mon Sep 17 00:00:00 2001 From: Michael Mangialardi Date: Fri, 15 May 2020 14:49:04 -0400 Subject: [PATCH 3/7] Add storybook instructions --- README.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/README.md b/README.md index 03b88bd..1b1456d 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ - [Helix UI Webcomponent Snippet From Documentation](#helix-ui-webcomponent-snippet-from-documentation) - [Our Implementation](#our-implementation) - [Guiding Principles](#guiding-principles) +- [Storybook](#-storybook) - [Issues](#issues) - [🐛 Bugs](#-bugs) - [💡 Feature Requests](#-feature-requests) @@ -130,6 +131,33 @@ the [Helix design documentation](http://helix.rax.io/status.html). Our aim is expose these building blocks and not put them together for more complex Helix patterns (i.e. a submit button with a loader). +## 📚 Storybook +[Storybook](https://storybook.js.org/) is an open source tool for developing UI components +in isolation for React, Vue, and Angular. +You can use this as a playground for all our components. + +1. Install Yarn + +```bash +npm i -g yarn +``` + +2. Install Dependencies + +```bash +yarn install +``` + +3. Run Storybook + +```bash +npm start +``` +The script should automatically open Storybook in your browser, but you can always navigate to http:http://localhost:6006/?path=/story + +4. Play Around +Screen Shot 2020-05-15 at 2 32 35 PM + ## Issues _Looking to contribute? Look for the [Good First Issue][good-first-issue] From 0f6d44edcf6b6167444f19a2034d7e11551830a2 Mon Sep 17 00:00:00 2001 From: Michael Mangialardi Date: Fri, 15 May 2020 15:47:13 -0400 Subject: [PATCH 4/7] Improve example Co-authored-by: Nicko Winner-Arroyo <35456401+nicko-winner@users.noreply.github.com> --- README.md | 49 ++++++++++++++++++------------------------------- 1 file changed, 18 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 1b1456d..ff157b7 100644 --- a/README.md +++ b/README.md @@ -85,37 +85,24 @@ Follow the [Getting Started with HelixUI](https://helixdesignsystem.github.io/he ### Our Implementation ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import useEventListener from '../hooks/useEventListener'; -import { SIZES } from '../constants'; - -const Modal = ({ onOpen, onClose, className, open, size, children, ...rest }) => { - const hxRef = useEventListener({ onOpen, onClose }); - return ( - - {children} - - ); -}; - -Modal.propTypes = { - id: PropTypes.string, - size: PropTypes.oneOf(SIZES), - children: PropTypes.node.isRequired, - className: PropTypes.string, - open: PropTypes.bool, - onClose: PropTypes.func, - onOpen: PropTypes.func, -}; - -export default Modal; + + Open Modal + + + +
+ ... +
+
+ ... +
+
+ + +
``` ## Guiding Principles From 5f25e7fef912d408d4102c0761151d77d7a78c54 Mon Sep 17 00:00:00 2001 From: Michael Mangialardi Date: Fri, 15 May 2020 15:48:28 -0400 Subject: [PATCH 5/7] Omit yarn install instructions --- README.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ff157b7..3bada22 100644 --- a/README.md +++ b/README.md @@ -123,26 +123,20 @@ complex Helix patterns (i.e. a submit button with a loader). in isolation for React, Vue, and Angular. You can use this as a playground for all our components. -1. Install Yarn - -```bash -npm i -g yarn -``` - -2. Install Dependencies +1. Install Dependencies ```bash yarn install ``` -3. Run Storybook +2. Run Storybook ```bash npm start ``` The script should automatically open Storybook in your browser, but you can always navigate to http:http://localhost:6006/?path=/story -4. Play Around +3. Play Around Screen Shot 2020-05-15 at 2 32 35 PM ## Issues From 5d967f6c87f5066fcb880aba39139126223a6705 Mon Sep 17 00:00:00 2001 From: Michael Mangialardi Date: Fri, 15 May 2020 15:48:54 -0400 Subject: [PATCH 6/7] Improve problem verbiage Co-authored-by: Nicko Winner-Arroyo <35456401+nicko-winner@users.noreply.github.com> --- README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/README.md b/README.md index 3bada22..526e8a7 100644 --- a/README.md +++ b/README.md @@ -32,11 +32,7 @@ ## The problem -You want to utilize the Helix UI webcomponents for your React application. -As a part of this goal, you have to write and maintain React components -that wrap the webcomponents with required boilerplate. You might want to -use a tool like [Storybook](https://storybook.js.org/) to see what these -wrappers look like. +You ❤️[Helix UI webcomponents library](https://helixdesignsystem.github.io/helix-ui/) and want to use it in your React application. You then realized React support for webcomponents is [underwelming](https://custom-elements-everywhere.com/) and requires you to write React compatibility wrappers for each web component that uses events. ## This solution From 83a356f4d69c6e4306845a084d769fdf15f82f5c Mon Sep 17 00:00:00 2001 From: Michael Mangialardi Date: Mon, 18 May 2020 12:11:55 -0400 Subject: [PATCH 7/7] More review feedback --- README.md | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 526e8a7..75b05be 100644 --- a/README.md +++ b/README.md @@ -108,12 +108,6 @@ Each wrapper corresponds with a component listed on the [Helix UI documentation] ![helix-ui-documentation](https://user-images.githubusercontent.com/22566333/82083617-07f70700-96b8-11ea-9581-da1796737e52.png) -These components are just the "building blocks" of other Helix patterns listed in -the [Helix design documentation](http://helix.rax.io/status.html). - -Our aim is expose these building blocks and not put them together for more -complex Helix patterns (i.e. a submit button with a loader). - ## 📚 Storybook [Storybook](https://storybook.js.org/) is an open source tool for developing UI components in isolation for React, Vue, and Angular. @@ -130,7 +124,7 @@ yarn install ```bash npm start ``` -The script should automatically open Storybook in your browser, but you can always navigate to http:http://localhost:6006/?path=/story +The script should automatically open Storybook in your browser, but you can always navigate to `http://localhost:6006/?path=/story` 3. Play Around Screen Shot 2020-05-15 at 2 32 35 PM @@ -155,10 +149,7 @@ a 👍. This helps maintainers prioritize what to work on. ### ❓ Questions -For questions related to using the library, please visit a support community -instead of filing an issue on GitHub. - -[Slack](https://join.slack.com/share/zt-edajgkat-LG_5SXYoCeIzknrQPVWaTA) +For questions related to using the library, please file an issue on GitHub. ## Contributors @@ -166,8 +157,8 @@ Thanks goes to these people: - - + +

James Thompson
💻
Nicko Winner-Arroyo
💻
James Thompson
💻
Nicko Winner-Arroyo
💻
Mike Mangialardi
💻