Use own "MediaQuery" component over "react-responsive"

[kettanaito]

These changes aim to provide a custom implementation of MediaQuery component to use in Atomic layout package.

Bundle size reduction is currently ~6 Kb (unminified).

Motivation

At the moment Atomic layout relies on a single dependency react-responsive. It composes nearly a half of the atomic-layout package size, and has a deep dependency tree of its own. Everything gets bundled and shipped under atomic-layout package.

Dependencies investigation has shown that some of the deep dependencies of react-responsive are obsolete, and contain implementation that causes unexpected behaviors (found out during SSR exceptions due to invalid media query RegExp). Those directly affect the behavior of Atomic layout.

Goals

• Decrease the amount of dependencies and sub-dependencies
• Decrease the bundle size shipped
• Decrease the amount of bug caused by deep out-of-date dependencies (Tests for SSR #72)
• Decrease the amount of bundled unused code from external libraries (tree shaking doesn't help)
• Increase control over the responsive media queries

Roadmap

• Remove react-responsive dependency and its usage
• Introduce a basic MediaQuery component
• Improve media query from props composition in MediaQuery components
• Ensure unit tests pass
• Ensure integration tests pass
• Ensure smooth behavior on runtime (manual testing)
• Restore test coverage
• Conduct testing with SSR and report the server-side and client-side hydration behavior

[coveralls]

Coverage increased (+0.5%) to 90.436% when pulling d8c31eb on media-query-replacement into b6713b6 on master.

[kettanaito]

Performing manual testing... Will write report once done.

---

Report

Own MediaQuery component substitutes the previous one to the full extent. However, these has been the following issues found during manual testing:

1. Children rendered by MediaQuery "jump in" on the client side, causing bumps in the UI. This is caused by the initial state of the matches property in the component. Once the matchMedia evaluation is provided instead of it, the bumps issue is gone:

atomic-layout/src/components/MediaQuery.tsx

Lines 31 to 34 in 07ae66b

	const [matches, setMatches] = React.useState(
	/* (?) Use some "staticMatch" with explicit values */
	typeof matchMedia !== 'undefined' ? matchMedia(query).matches : false,
	)

2. Using matchMedia breaks SSR (there is no matchMedia on the server).

[kettanaito]

The usage of matchMedia can be omitted on the server, making a fallback to static false. This is not ideal, as it will produce nodes mismatch between server rendered content and client side. However, this is a much bigger conceptual question, which I cannot solve as a part of this pull request.

[kettanaito]

Automated and manual testing passes. The only thing left is to restore/improve test coverage.

Update: Test coverage should be restored now, but Coveralls is stuck reporting.