metalabdesign / flowtip / 144

91%

master: 57%

push

travis-ci

Rewrite FlowTip component and layout algorithm

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.

412 of 442 branches covered (93.21%)

322 of 353 relevant lines covered (91.22%)

38.91 hits per line