refactor examples

Author: mohsinulhaq

.gitignore

@@ -5,7 +5,9 @@
 .DS_Store
 .idea
 npm-debug.log
+yarn-error.log
 node_modules
+package-lock.json
 lib
 dist
 .docz

README.md

@@ -32,23 +32,23 @@ render(
       arrowRef,
       placement
     }) => (
-      <div
+      <span
         {...getTooltipProps({
           ref: tooltipRef,
           className: 'tooltip-container'
           /* your props here */
         })}
       >
-        <div
+        <span
           {...getArrowProps({
             ref: arrowRef,
             'data-placement': placement,
             className: 'tooltip-arrow'
             /* your props here */
           })}
         />
-        <div className="tooltip-body">Hello, World!</div>
-      </div>
+        <span className="tooltip-body">Hello, World!</span>
+      </span>
     )}
   >
     {({ getTriggerProps, triggerRef }) => (
@@ -92,21 +92,21 @@ const Tooltip = ({ tooltip, children, ...props }) => (
       arrowRef,
       placement
     }) => (
-      <div
+      <span
         {...getTooltipProps({
           ref: tooltipRef,
           className: 'tooltip-container'
         })}
       >
-        <div
+        <span
           {...getArrowProps({
             ref: arrowRef,
             'data-placement': placement,
             className: 'tooltip-arrow'
           })}
         />
         {tooltip}
-      </div>
+      </span>
     )}
   >
     {({ getTriggerProps, triggerRef }) => (
@@ -131,6 +131,13 @@ Then you can use it as shown in the example below.
 <Tooltip placement="top" trigger="click" tooltip="Hi there!">Click me</Tooltip>
 ```
 
+## Examples
+To fiddle with our example recipes, run:
+```
+npm run docz:dev
+```
+and  open up [localhost:3000](http://localhost:3000) in your browser.
+
 ## Props
 
 ### children
@@ -158,7 +165,7 @@ This is the initial visibility state of the tooltip.
 
 > `function(tooltipShown: boolean)`
 
-Called when the visibility of the tooltip changes. `tooltipShown` is a new state.
+Called with the tooltip state, when the visibility of the tooltip changes
 
 ### tooltipShown
 

docs/examples/basic.js renamed to docs/examples/BasicTooltipTrigger.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import TooltipTrigger from '../../src/index';
+import TooltipTrigger from '../../src';
 import '../../src/styles.css';
 
-const Tooltip = ({ tooltip, children, ...props }) => (
+const BasicTooltipTrigger = ({ tooltip, children, ...props }) => (
   <TooltipTrigger
     {...props}
     tooltip={({
@@ -12,21 +12,21 @@ const Tooltip = ({ tooltip, children, ...props }) => (
       arrowRef,
       placement
     }) => (
-      <div
+      <span
         {...getTooltipProps({
           ref: tooltipRef,
           className: 'tooltip-container'
         })}
       >
-        <div
+        <span
           {...getArrowProps({
             ref: arrowRef,
             'data-placement': placement,
             className: 'tooltip-arrow'
           })}
         />
         {tooltip}
-      </div>
+      </span>
     )}
   >
     {({ getTriggerProps, triggerRef }) => (
@@ -41,4 +41,4 @@ const Tooltip = ({ tooltip, children, ...props }) => (
   </TooltipTrigger>
 );
 
-export default Tooltip;
+export default BasicTooltipTrigger;

docs/examples/EscapeToClose.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default class EscapeToClose extends React.Component {
+  componentDidMount() {
+    document.addEventListener('keydown', this._handleKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this._handleKeyDown);
+  }
+  render() {
+    return <div>Press Esc to Close</div>;
+  }
+  _handleKeyDown = ({key}) => {
+    if (key === 'Escape') {
+      this.props.closeTooltip();
+    }
+  }
+}
+

docs/examples/externalState.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export class StateContainer extends React.Component {
+  state = {
+    on: false
+  };
+
+  set = on => this.setState({on});
+
+  toggle = () => this.setState(prevState => ({ on: !prevState.on }));
+
+  render() {
+    return this.props.children({
+      on: this.state.on,
+      set: this.set,
+      toggle: this.toggle
+    });
+  }
+}

docs/examples/utils.js

@@ -1,42 +1,61 @@
 ---
-name: Main
+name: TooltipTrigger
 route: /
 ---
 
 import { Playground, PropsTable } from 'docz';
-import BasicTooltip from './examples/Basic';
-import { Container, Tooltip, TooltipEsc }  from './examples/externalState';
+import BasicTooltipTrigger from './examples/BasicTooltipTrigger';
+import EscapeToClose from './examples/EscapeToClose';
+import {StateContainer} from './examples/utils';
 
-# react-popper-tooltip
+# TooltipTrigger
 
 The example files are in `docs/examples` directory.
 
 ## Basic example
 
 <Playground>
-  <BasicTooltip tooltip="Hello">Hover me</BasicTooltip>
+  <BasicTooltipTrigger tooltip="Hello, World!">Hover over me</BasicTooltipTrigger>
 </Playground>
 
 
-## External state
-
-`Container` is for demo purpose only and used for state management.
+## Controlled
 
 <Playground>
-  <Container>
-    {({ on, set }) => (
+  <StateContainer>
+    {({ on, set, toggle }) => (
       <div>
-        <button onClick={() => set(true)}>Show tooltip</button>
+        <button onClick={toggle}>Toggle tooltip</button>
         <br /><br />
-        <Tooltip
-          trigger="click"
+        <BasicTooltipTrigger
+          trigger="none"
           tooltipShown={on}
-          tooltip="Press ESC to close"
+          tooltip="Hello, Controlled!"
           onVisibilityChange={set}
         >
-          Click me
-        </Tooltip>
+          I am state controlled!
+        </BasicTooltipTrigger>
       </div>
     )}
-  </Container>
+  </StateContainer>
+</Playground>
+
+
+## Escape to close
+
+<Playground>
+  <StateContainer>
+    {({ on, set }) => (
+      <BasicTooltipTrigger
+        trigger="click"
+        tooltipShown={on}
+        tooltip={<EscapeToClose closeTooltip={() => set(false)} />}
+        onVisibilityChange={set}
+      >
+        <button>Click Here</button>
+      </BasicTooltipTrigger>
+    )}
+  </StateContainer>
 </Playground>
+
+Note: `StateContainer` is for demo purpose only and used for state management.