Use alias to get rid of .. paths

Lots of ../../.. in the source and in the docs made things pretty cumbersome. Now, there's an alias `@` which points to the root directory. I went with `@` instead of a name like `root` just to avoid any confusion thinking there's a real npm module with that name.

Also, this could have been done with a single babel plugin, but there seems to be some concern that jest or webpack caching may break, so instead I went with tool-specific plugins/settings for webpack/jest/rollup.

tleunen/babel-plugin-module-resolver#346

__tests__/actions.js

@@ -5,7 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-dom/test-utils';
 
-import Formatic from '../src/formatic';
+import Formatic from '@/src/formatic';
 
 describe('actions', function() {
   const mounted = function(element) {

__tests__/components/field-container.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import Formatic from '../../src/formatic';
-import FieldContainer from '../../src/components/field-container';
+import Formatic from '@/src/formatic';
+import FieldContainer from '@/src/components/field-container';
 
 describe('FieldContainer', () => {
   it('should pass in onChangeValue', () => {

__tests__/components/fields/array.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import arrayExample from '../../../demo/examples/array';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import arrayExample from '@/demo/examples/array';
 
 describe('array field', () => {
   it('should render correctly', () => {

__tests__/components/fields/assoc-list.js

@@ -4,9 +4,9 @@
 import React from 'react';
 import TestUtils from 'react-dom/test-utils';
 
-import Formatic from '../../../src/formatic';
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import assocListExample from '../../../demo/examples/assoc-list';
+import Formatic from '@/src/formatic';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import assocListExample from '@/demo/examples/assoc-list';
 
 const renderedKeys = doc => {
   const inputs = TestUtils.scryRenderedDOMComponentsWithTag(doc, 'input');

__tests__/components/fields/boolean.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import booleanExample from '../../../demo/examples/boolean';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import booleanExample from '@/demo/examples/boolean';
 
 describe('boolean field', () => {
   it('should render correctly', () => {

__tests__/components/fields/checkbox-array.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import checkboxArrayExample from '../../../demo/examples/checkbox-array';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import checkboxArrayExample from '@/demo/examples/checkbox-array';
 
 describe('checkbox-array field', () => {
   it('should render correctly', () => {

__tests__/components/fields/checkbox-boolean.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import checkboxBooleanExample from '../../../demo/examples/checkbox-boolean';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import checkboxBooleanExample from '@/demo/examples/checkbox-boolean';
 
 describe('checkbox-boolean field', () => {
   it('should render correctly', () => {

__tests__/components/fields/code.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import codeExample from '../../../demo/examples/code';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import codeExample from '@/demo/examples/code';
 
 describe('code field', () => {
   it('should render correctly', () => {

__tests__/components/fields/copy.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import copyExample from '../../../demo/examples/copy';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import copyExample from '@/demo/examples/copy';
 
 describe('copy field', () => {
   it('should render correctly', () => {

__tests__/components/fields/fields.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import fieldsExample from '../../../demo/examples/fields';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import fieldsExample from '@/demo/examples/fields';
 
 describe('fields field', () => {
   it('should render correctly', () => {

__tests__/components/fields/grouped-fields.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import groupedFieldsExample from '../../../demo/examples/grouped-fields';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import groupedFieldsExample from '@/demo/examples/grouped-fields';
 
 describe('grouped-fields field', () => {
   it('should render correctly', () => {

__tests__/components/fields/json.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import jsonExample from '../../../demo/examples/json';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import jsonExample from '@/demo/examples/json';
 
 describe('json field', () => {
   it('should render correctly', () => {

__tests__/components/fields/object.js

@@ -4,10 +4,10 @@
 import React from 'react';
 import TestUtils from 'react-dom/test-utils';
 import ReactDOM from 'react-dom';
-import Formatic from '../../../src/formatic';
-import ObjectClass from '../../../src/components/fields/object';
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import objectExample from '../../../demo/examples/object';
+import Formatic from '@/src/formatic';
+import ObjectClass from '@/src/components/fields/object';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import objectExample from '@/demo/examples/object';
 
 const renderedKeys = doc => {
   const inputs = TestUtils.scryRenderedDOMComponentsWithTag(doc, 'input');

__tests__/components/fields/password.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import passwordExample from '../../../demo/examples/password';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import passwordExample from '@/demo/examples/password';
 
 describe('password field', () => {
   it('should render correctly', () => {

__tests__/components/fields/pretty-boolean.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import prettyBooleanExample from '../../../demo/examples/pretty-boolean';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import prettyBooleanExample from '@/demo/examples/pretty-boolean';
 
 describe('pretty-boolean field', () => {
   it('should render correctly', () => {

__tests__/components/fields/pretty-select.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import prettySelectExample from '../../../demo/examples/pretty-select';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import prettySelectExample from '@/demo/examples/pretty-select';
 
 describe('pretty-select field', () => {
   it('should render correctly', () => {

__tests__/components/fields/pretty-text.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import prettyBooleanExample from '../../../demo/examples/pretty-boolean';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import prettyBooleanExample from '@/demo/examples/pretty-boolean';
 
 describe('pretty-boolean field', () => {
   it('should render correctly', () => {

__tests__/components/fields/select.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import selectExample from '../../../demo/examples/select';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import selectExample from '@/demo/examples/select';
 
 describe('select field', () => {
   it('should render correctly', () => {

__tests__/components/fields/single-line-string.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import singleLineStringExample from '../../../demo/examples/single-line-string';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import singleLineStringExample from '@/demo/examples/single-line-string';
 
 describe('single-line-string field', () => {
   it('should render correctly', () => {

__tests__/components/fields/string.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 
-import { renderFieldsToHtml } from '../../../FormaticTestUtils';
-import stringExample from '../../../demo/examples/string';
+import { renderFieldsToHtml } from '@/src/FormaticTestUtils';
+import stringExample from '@/demo/examples/string';
 
 describe('string field', () => {
   it('should render correctly', () => {

__tests__/components/helpers/tag-translator-test.js

@@ -2,9 +2,9 @@
 
 /* global describe it expect */
 
-import TagTranslator from '../../../src/components/helpers/tag-translator';
+import TagTranslator from '@/src/components/helpers/tag-translator';
 
-import Formatic from '../../../src/formatic';
+import Formatic from '@/src/formatic';
 
 describe('editor-util', function() {
   const replaceChoices = [

__tests__/components/mixins/shared.js

@@ -4,8 +4,8 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import { mount } from 'enzyme';
 
-import FieldMixin from '../../../src/mixins/field';
-import HelperMixin from '../../../src/mixins/helper';
+import FieldMixin from '@/src/mixins/field';
+import HelperMixin from '@/src/mixins/helper';
 
 const MyHelper = createReactClass({
   displayName: 'MyHelper',

__tests__/plugins.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 'use strict';
 
-import Formatic from '../src/formatic';
+import Formatic from '@/src/formatic';
 
 describe('plugins', function() {
   it('can create a new default configuration', function() {

__tests__/types.js

@@ -5,7 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-dom/test-utils';
 import _ from 'lodash';
-import Formatic from '../src/formatic';
+import Formatic from '@/src/formatic';
 
 const printTree = function(node, indent) {
   indent = indent || '';

__tests__/undash.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 'use strict';
 
-import _ from '../src/undash';
+import _ from '@/src/undash';
 
 describe('utils', () => {
   it('should flatten', () => {

__tests__/utils.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 'use strict';
 
-import utils, { argumentsToArray } from '../src/utils';
+import utils, { argumentsToArray } from '@/src/utils';
 
 describe('utils', function() {
   it('should deep copy primitives', function() {

__tests__/validation.js

@@ -1,7 +1,7 @@
 /*global describe, it, expect*/
 'use strict';
 
-import Formatic from '../src/formatic';
+import Formatic from '@/src/formatic';
 
 describe('types and value changes', function() {
   const config = Formatic.createConfig();

babel.config.js

@@ -1,4 +1,14 @@
 module.exports = {
   presets: [['@babel/preset-env'], ['@babel/preset-react']],
-  plugins: [['@babel/proposal-class-properties']],
+  plugins: [
+    ['@babel/proposal-class-properties'],
+    // [
+    //   'module-resolver',
+    //   {
+    //     alias: {
+    //       root: '.',
+    //     },
+    //   },
+    // ],
+  ],
 };

babel.config.next.js

@@ -9,6 +9,14 @@ module.exports = {
         sourceMap: true,
       },
     ],
+    // [
+    //   'module-resolver',
+    //   {
+    //     alias: {
+    //       root: '.',
+    //     },
+    //   },
+    // ],
   ],
   env: {
     test: {

docs/components/Button.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 
-import Colors from '../styles/Colors';
+import Colors from '@/docs/styles/Colors';
 
 const getTag = props => {
   if (props.isDisabled) {

docs/components/Container.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 
-import { getMediaQueriesForWidths } from '../styles/Media';
+import { getMediaQueriesForWidths } from '@/docs/styles/Media';
 
 const styles = {
   container: css({

docs/components/Example.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 
-import Colors from '../styles/Colors';
+import Colors from '@/docs/styles/Colors';
 
 const styles = {
   example: css({

docs/components/Footer.js

@@ -2,7 +2,7 @@
 import { jsx, css } from '@emotion/core';
 
 import Container from './Container';
-import Colors from '../styles/Colors';
+import Colors from '@/docs/styles/Colors';
 
 const styles = {
   footer: css({

docs/components/Header.js

@@ -2,9 +2,9 @@
 import { jsx, css } from '@emotion/core';
 
 import Container from './Container';
-import Colors from '../styles/Colors';
-import Typography from '../styles/Typography';
-import { getMediaQueriesForWidths } from '../styles/Media';
+import Colors from '@/docs/styles/Colors';
+import Typography from '@/docs/styles/Typography';
+import { getMediaQueriesForWidths } from '@/docs/styles/Media';
 
 const styles = {
   header: css({

docs/components/Link.js

@@ -2,8 +2,8 @@
 import { jsx, css } from '@emotion/core';
 import NextLink from 'next/link';
 
-import Colors from '../styles/Colors';
-import { prefixHref } from '../utils';
+import Colors from '@/docs/styles/Colors';
+import { prefixHref } from '@/docs/utils';
 
 const styles = {
   link: css({

docs/components/NavMenu.js

@@ -5,11 +5,11 @@ import { Toggle } from 'react-powerplug';
 import { RawLink, NavLink } from './Link';
 import Container from './Container';
 import Icon from './Icon';
-import Colors from '../styles/Colors';
-import { getMediaQueriesForWidths } from '../styles/Media';
+import Colors from '@/docs/styles/Colors';
+import { getMediaQueriesForWidths } from '@/docs/styles/Media';
 
-import MenuIcon from '../../static/icons/menu.svg';
-import DeleteIcon from '../../static/icons/delete.svg';
+import MenuIcon from '@/static/icons/menu.svg';
+import DeleteIcon from '@/static/icons/delete.svg';
 
 const styles = {
   navWrapper: css({

docs/components/Page.js

@@ -2,12 +2,12 @@
 import { jsx, css } from '@emotion/core';
 import Layout from './Layout';
 
-import Typography from '../styles/Typography';
+import Typography from '@/docs/styles/Typography';
 
 import 'sanitize.css';
 import 'codemirror/lib/codemirror.css';
-import '../../static/css/app.css';
-import '../../static/css/formatic.css';
+import '@/static/css/app.css';
+import '@/static/css/formatic.css';
 
 const pages = {
   start: {