Merge pull request #12 from mohsinulhaq/add-docz

Add docz

Author: mohsinulhaq

.gitignore

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

README.md

@@ -47,7 +47,7 @@ render(
             /* your props here */
           })}
         />
-        <div className="tooltip-body">Hello, World!</div>
+        Hello, World!
       </div>
     )}
   >
@@ -131,6 +131,14 @@ 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 install
+> npm run docs
+```
+and  open up [localhost:3000](http://localhost:3000) in your browser.
+
 ## Props
 
 ### children
@@ -158,7 +166,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/BasicTooltipTrigger.js

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

docs/examples/EscapeToClose.js

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

docs/examples/utils.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/readme.mdx

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

doczrc.js

@@ -0,0 +1,7 @@
+import { css } from 'docz-plugin-css';
+
+export default {
+  title: 'react-popper-tooltip',
+  description: 'Documentation',
+  plugins: [css()]
+};