diff --git a/README.md b/README.md index 944dbb4..75b05be 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,164 @@ -# 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) +- [Storybook](#-storybook) +- [Issues](#issues) + - [🐛 Bugs](#-bugs) + - [💡 Feature Requests](#-feature-requests) + - [❓ Questions](#-questions) +- [Contributors](#contributors) + +## The problem + +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 + +`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 + + Open 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) + +## 📚 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 Dependencies + +```bash +yarn install +``` + +2. Run Storybook + +```bash +npm start +``` +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 + +## 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 file an issue on GitHub. + +## Contributors + +Thanks goes to these people: + + + + + + + +

James Thompson

💻

Nicko Winner-Arroyo

💻

Mike Mangialardi

💻