Merge pull request #14 from adidas/feature/add-yarn-design-system

Improve example and documentationmn
adidas · May 22, 2020 · 9eb15aa · 9eb15aa
2 parents 580a869 + 9c605a4
commit 9eb15aa
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 44 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -14,7 +14,7 @@ script:
 - if [[ $TRAVIS_TAG =~ $TAG_REGEX ]];
   then
     npm run doc;
-    npm run copy:example;
+    npm run example;
   fi
 
 deploy:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 1.5.1
+
+- Added ReactJS documentation.
+- Updated project description and documentation.
+- Updated demo adding repository link.
+- Fixed external links with `rel="noopener"`.
+
 # 1.5.0
 
 - Updated `choices.js` to version `9.0.1`.

diff --git a/README.md b/README.md
@@ -6,12 +6,14 @@
 
 # ChoicesJS Web Component
 
-Select component which just wraps [ChoicesJS][choicesjs] in a real [Web Component][web-component]. It has been created using [StencilJS][stenciljs], and written with [_Typescript_][typescript] and [_JSX_][jsx].
+Select and multi-select Web Component which transforms [ChoicesJS][choicesjs] library into a real [Web Component][web-component].
 
 This component allows the user to select from dropdowns, to browser between multiple options, to add tags to an input, etc.
 
 Play with it on the [**demo**][demo] page.
 
+It is built with [StencilJS][stenciljs], and written in [_Typescript_][typescript] and [_JSX_][jsx].
+
 ## Use cases
 
 The purpose of this project is to create a simple Web Component wrapper from the [ChoicesJS][choicesjs] library.
@@ -155,6 +157,56 @@ export default {
 </script>
 ```
 
+#### Example for ReactJS framework
+
+```javascript
+// Loading ChoicesJS library and ChoicesJS Stencil Web Component
+import 'expose-loader?Choices!choices.js';
+import { defineCustomElements } from 'choicesjs-stencil/dist/loader';
+
+defineCustomElements(window);
+
+// ReactJS component
+import React, { useEffect, useRef } from 'react';
+
+export default function ChoicesJSStencil({
+  type = 'text',
+  name,
+  choices = [],
+  onChange
+}) {
+  const choicesElement = useRef(null);
+
+  useEffect(() => {
+    const { current } = choicesElement;
+    const _handleChange = handleChange.bind(null, onChange);
+
+    current.choices = choices;
+    current.addEventListener('change', _handleChange);
+
+    return () => {
+      current.removeEventListener('change', _handleChange);
+    };
+  }, [ choices ]);
+
+  async function handleChange(callback) {
+    const { current } = choicesElement;
+
+    callback({
+      options: await current.getValue(true),
+      target: current
+    });
+  }
+
+  return (
+    <choicesjs-stencil class="choicesjs-stencil"
+        ref={ choicesElement }
+        type={ type }
+        name={ name } />
+  );
+}
+```
+
 ### Configuration
 
 - `type`: the type of selector to render, defaults to `text`. Options: `text`, `single`, `multiple`.

diff --git a/assets/github-logo-64x64.png b/assets/github-logo-64x64.png
diff --git a/index.html b/index.html
@@ -10,11 +10,33 @@
     <script src="dist/choicesjsstencil.js"></script>
     <style>
       html {
-        font-size: 14px;
-        margin-top: .5rem;
+        font-size: 16px;
       }
       body {
-        padding-bottom: 4rem;
+        padding-bottom: 3rem;
+      }
+      .header {
+        background-color: #000;
+        margin-bottom: 2rem;
+        height: 3.5rem;
+        display: flex;
+        align-items: center;
+      }
+      .header__left {
+        color: #fff;
+        font-weight: 700;
+        flex: 1 0 auto;
+      }
+      .header__left h2,
+      .header__left h3 {
+        margin: 0 .5rem;
+      }
+      .header__right .header__icon {
+        padding: .25rem;
+        display: block;
+      }
+      .header__right .header__icon img {
+        width: 3rem;
       }
       .select-container {
         display: inline-flex;
@@ -67,10 +89,18 @@
     <style id="customStyles"></style>
   </head>
   <body>
-    <div class="container-fluid">
-      <div class="row">
-        <h2 class="col-sm-12">ChoicesJS Web Component: test page</h2>
+    <header class="header">
+      <div class="header__left">
+        <h2 class="hidden-xs">ChoicesJS Web Component: test page</h2>
+        <h3 class="visible-xs">ChoicesJS Web Component</h3>
+      </div>
+      <div class="header__right">
+        <a class="header__icon" href="https://github.com/adidas/choicesjs-stencil" target="blank" rel="noopener">
+          <img src="assets/github-logo-64x64.png">
+        </a>
       </div>
+    </header>
+    <div class="container-fluid">
       <div class="row">
         <form class="col-sm-12 select-container" name="choicesjs-stencil-form">
           <choicesjs-stencil name="select" class="select"></choicesjs-stencil>
@@ -497,7 +527,9 @@ <h2 class="col-sm-12">ChoicesJS Web Component: test page</h2>
               </textarea>
               <label for="callbackOnCreateTemplates">}</label>
               <br/>
-              <a href="https://github.com/jshjohnson/Choices/blob/v9.0.1/public/assets/scripts/choices.js#L2777-L2926" target="_blank">
+              <a href="https://github.com/jshjohnson/Choices/blob/v9.0.1/public/assets/scripts/choices.js#L2777-L2926"
+                  target="_blank"
+                  rel="noopener">
                 Templates reference
               </a>
             </div>
@@ -523,7 +555,7 @@ <h2 class="col-sm-12">ChoicesJS Web Component: test page</h2>
           <div class="col-md-12">
             <p class="text-center pad-top">
               See full documentation in
-              <a href="https://www.npmjs.com/package/choices.js/v/9.0.1" target="_blank">choices.js</a>
+              <a href="https://www.npmjs.com/package/choices.js/v/9.0.1" target="_blank" rel="noopener">choices.js</a>
               npm package.
             </p>
           </div>
@@ -555,39 +587,40 @@ <h4 class="modal-title">Custom Styles</h4>
                 <div class="row">
                   <div class="col-md-6">
                     <textarea class="form-control textarea--fixed" name="classNames" rows="26">
-  {
-    "containerOuter": "choices",
-    "containerInner": "choices__inner",
-    "input": "choices__input",
-    "inputCloned": "choices__input--cloned",
-    "list": "choices__list",
-    "listItems": "choices__list--multiple",
-    "listSingle": "choices__list--single",
-    "listDropdown": "choices__list--dropdown",
-    "item": "choices__item",
-    "itemSelectable": "choices__item--selectable",
-    "itemDisabled": "choices__item--disabled",
-    "itemChoice": "choices__item--choice",
-    "placeholder": "choices__placeholder",
-    "group": "choices__group",
-    "groupHeading": "choices__heading",
-    "button": "choices__button",
-    "activeState": "is-active",
-    "focusState": "is-focused",
-    "openState": "is-open",
-    "disabledState": "is-disabled",
-    "highlightedState": "is-highlighted",
-    "selectedState": "is-selected",
-    "flippedState": "is-flipped",
-    "loadingState": "is-loading",
-    "noResults": "has-no-results",
-    "noChoices": "has-no-choices"
-  }
+{
+  "containerOuter": "choices",
+  "containerInner": "choices__inner",
+  "input": "choices__input",
+  "inputCloned": "choices__input--cloned",
+  "list": "choices__list",
+  "listItems": "choices__list--multiple",
+  "listSingle": "choices__list--single",
+  "listDropdown": "choices__list--dropdown",
+  "item": "choices__item",
+  "itemSelectable": "choices__item--selectable",
+  "itemDisabled": "choices__item--disabled",
+  "itemChoice": "choices__item--choice",
+  "placeholder": "choices__placeholder",
+  "group": "choices__group",
+  "groupHeading": "choices__heading",
+  "button": "choices__button",
+  "activeState": "is-active",
+  "focusState": "is-focused",
+  "openState": "is-open",
+  "disabledState": "is-disabled",
+  "highlightedState": "is-highlighted",
+  "selectedState": "is-selected",
+  "flippedState": "is-flipped",
+  "loadingState": "is-loading",
+  "noResults": "has-no-results",
+  "noChoices": "has-no-choices"
+}
                     </textarea>
                   </div>
                   <div class="col-md-6">
                     <textarea class="form-control textarea--fixed" name="styles" rows="26">
-  /* Add any custom classes for the component */
+/* Add any custom classes for the component */
+/* .choices__input { font-style: italic; } */
                     </textarea>
                   </div>
                 </div>
@@ -609,7 +642,7 @@ <h4 class="modal-title">Search options</h4>
           </div>
           <div class="modal-body">
             <h5 class="text-center pad-bottom">
-              See full Fuse documentation in <a href="https://fusejs.io/" target="_blank">GitHub</a>.
+              See full Fuse documentation in <a href="https://fusejs.io/" target="_blank" rel="noopener">GitHub</a>.
             </h5>
             <form name="custom-search-form">
               <div class="form-group">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "choicesjs-stencil",
-  "version": "1.5.0",
-  "description": "Select Web Component which wraps ChoicesJS library using StencilJS",
+  "version": "1.5.1",
+  "description": "Select and multi-select Web Component using ChoicesJS library as core",
   "repository": {
     "type": "git",
     "url": "https://github.com/adidas/choicesjs-stencil.git"
@@ -21,7 +21,7 @@
     "build": "npm run build:min",
     "build:dev": "stencil build --dev --watch",
     "build:min": "stencil build",
-    "copy:example": "copy ./index.html dist/* dist/**/* example",
+    "example": "copy ./index.html assets/* dist/* dist/**/* example",
     "doc": "typedoc --mode file --readme ./README.md --out ./docs ./src",
     "lint": "npm run lint:src && npm run lint:test",
     "lint:src": "tslint --config ./tslint.json --project ./tsconfig.json",