Rewrite FlowTip component and layout algorithm

[10xjs]

This is a major overhaul of both the internal mechanics and public interface of the FlowTip library.

The most important changes are a total separation of the layout algorithm from the React component and an a much simpler React component implementation.

With the React component and layout algorithm decoupled, the stage is set for additional FlowTip implementations on other platforms.

flowtip-core

The new layout algorithm (now published as flowtip-core) is now an entirely pure function with no coupling to React or to the DOM environment. It now has very clearly defined behavior around even the most unusual layout edge cases.

The algorithm is designed to serve the FlowTip React component, but exists as a separate module for both test isolation and to be available for additional uses.

The algorithm also now features full test coverage using a novel ascii renderer combined with Jest snapshots.

flowtip-react-dom

The previous flowtip component module is succeeded by flowtip-react-dom. It provides a friendly React interface to the underlying flowtip-core algorithm with specific bindings to DOM events and the React component lifecycle.

The main architectural motivations for the design of the new of the React component are simplicity and declarative composability with a simple interface inspired by modules like react-motion, react-router, and redux-form.

The component behaves as an inline "decorator" which enhances a provided Content component with tooltip layout behavior. Because it avoids owning any unnecessary state, it requires a parent component (or global state e.g. Redux) to manage the target rect and "active" state.

It also forgoes implementing what could be seen as valuable core features for the sake of simplicity. Additional libraries like react-resize-observer, react-motion, tj/react-click-outside, and focus-trap-react are recommended to compose a full user experience. Since flowtip-react-dom renders no markup of it's own and defers all rendering responsibility to consumer defined components, composition with the mentioned libraries should be without conflict.

This minimal approach offers the best balance of core features and compatibility with various consumer use cases.

TODO:

• Merge and publish Add element position detection react-resize-observer#2

/cc @qiushihe @izaakschroeder

[qiushihe]

Looks good to me.

However I noticed a few small things... first there seems to be many commented out console.log statements and I think they should just be removed; second, neither package.json from the two packages have homepage set which would help with discovery once they are published so I think those should be added.

[10xjs]

@qiushihe Updated - thanks!

[izaakschroeder]

You probably want 7.0.1.

[izaakschroeder]

LGTM pending CI 🎉 Nice work!