Introduce docz into the project for dev and testing purposes

Author: denisborovikov

.gitignore

@@ -8,3 +8,4 @@ npm-debug.log
 node_modules
 lib
 dist
+.docz

docs/examples/basic.js

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

docs/examples/externalState.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import TooltipTrigger from '../../src/index';
+import '../../src/styles.css';
+
+export const Tooltip = ({ handleTooltipState, tooltip, children, ...props }) => (
+  <TooltipTrigger
+    {...props}
+    tooltip={({
+      getTooltipProps,
+      getArrowProps,
+      tooltipRef,
+      arrowRef,
+      placement
+    }) => (
+      <TooltipEsc
+        {...getTooltipProps({
+          innerRef: tooltipRef,
+          className: "tooltip-container",
+          handleTooltipState
+        })}
+      >
+        <div
+          {...getArrowProps({
+            ref: arrowRef,
+            "data-placement": placement,
+            className: "tooltip-arrow"
+          })}
+        />
+        {tooltip}
+      </TooltipEsc>
+    )}
+  >
+    {({ getTriggerProps, triggerRef }) => (
+      <span
+        {...getTriggerProps({
+          ref: triggerRef,
+          className: "trigger"
+        })}
+      >
+        {children}
+      </span>
+    )}
+  </TooltipTrigger>
+);
+
+export class TooltipEsc extends React.Component {
+  componentDidMount() {
+    document.addEventListener("keydown", this._keyboardShortCutHandler);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this._keyboardShortCutHandler);
+  }
+
+  _keyboardShortCutHandler = e => {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.key === "Escape" || e.keyCode === 27) {
+      this.props.handleTooltipState(false);
+    }
+  };
+
+  render() {
+    // filter out `handleTooltipState` handler
+    const { innerRef, handleTooltipState, ...props } = this.props;
+    return <div ref={innerRef} {...props} />;
+  }
+}
+
+export class Container extends React.Component {
+  state = {
+    on: false
+  };
+
+  set = state => this.setState({ on: state });
+
+  render() {
+    return this.props.children({
+      on: this.state.on,
+      set: this.set
+    });
+  }
+}

docs/readme.mdx

@@ -0,0 +1,43 @@
+---
+name: Main
+route: /
+---
+
+import { Playground, PropsTable } from 'docz';
+import BasicTooltip from './examples/Basic';
+import { Container, Tooltip, TooltipEsc }  from './examples/externalState';
+
+# react-popper-tooltip
+
+The example files are in `docs/examples` directory.
+
+## Basic example
+
+<Playground>
+  <BasicTooltip tooltip="Hello">Hover me</BasicTooltip>
+</Playground>
+
+
+## External state
+
+`Container` is for demo purpose only and used for state management.
+
+<Playground>
+  <Container>
+    {({ on, set }) => (
+      <div>
+        <button onClick={() => set(true)}>Show tooltip</button>
+        <br /><br />
+        <Tooltip
+          trigger="click"
+          tooltipShown={on}
+          tooltip="Press ESC to close"
+          onVisibilityChange={set}
+          handleTooltipState={set}
+        >
+          Click me
+        </Tooltip>
+      </div>
+    )}
+  </Container>
+</Playground>

doczrc.js

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

package.json

@@ -19,7 +19,8 @@
     "build": "npm run build:cjs; npm run build:esm; mkdir -p dist && cp src/styles.css dist",
     "build:cjs": "babel --delete-dir-on-start src -d lib/cjs",
     "build:esm": "babel --delete-dir-on-start --env-name esm src -d lib/esm",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "docs": "docz dev"
   },
   "keywords": [
     "react",
@@ -34,10 +35,6 @@
   "browserslist": [
     "defaults"
   ],
-  "peerDependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
-  },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "react-popper": "^1.0.2"
@@ -49,6 +46,10 @@
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "prop-types": "^15.6.2"
+    "docz": "^0.11.2",
+    "docz-plugin-css": "^0.11.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   }
 }