diff --git a/.gitignore b/.gitignore
index ad46b30..a7430e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,11 @@ typings/
# next.js build output
.next
+
+# tsdx
+.DS_Store
+.cache
+.rts2_cache_cjs
+.rts2_cache_esm
+.rts2_cache_umd
+dist
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
deleted file mode 100644
index a9b8b42..0000000
--- a/CONTRIBUTING.md
+++ /dev/null
@@ -1,25 +0,0 @@
-## Prerequisites
-
-[Node.js](http://nodejs.org/) >= 6 must be installed.
-
-## Installation
-
-- Running `npm install` in the component's root directory will install everything you need for development.
-
-## Demo Development Server
-
-- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
-
-## Running Tests
-
-- `npm test` will run the tests once.
-
-- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
-
-- `npm run test:watch` will run the tests on every change.
-
-## Building
-
-- `npm run build` will build the component for publishing to npm and also bundle the demo app.
-
-- `npm run clean` will delete built resources.
diff --git a/README.md b/README.md
index f0f3263..e7f5cc9 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,167 @@
-# underline-emphasis
+# TSDX React User Guide
-[![Travis][build-badge]][build]
-[![npm package][npm-badge]][npm]
-[![Coveralls][coveralls-badge]][coveralls]
+Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
-Describe underline-emphasis here.
+> This TSDX setup is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
-[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
-[build]: https://travis-ci.org/user/repo
+> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
-[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
-[npm]: https://www.npmjs.org/package/npm-package
+## Commands
-[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
-[coveralls]: https://coveralls.io/github/user/repo
+TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
+
+The recommended workflow is to run TSDX in one terminal:
+
+```
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+
+Then run the example inside another:
+
+```
+cd example
+npm i # or yarn to install dependencies
+npm start # or yarn start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, [we use Parcel's aliasing](https://github.com/palmerhq/tsdx/pull/88/files).
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.
+
+## Configuration
+
+Code quality is [set up for you](https://github.com/palmerhq/tsdx/pull/45/files) with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+
+### Jest
+
+Jest tests are set up to run with `npm test` or `yarn test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.
+
+#### Setup Files
+
+This is the folder structure we set up for you:
+
+```
+/example
+ index.html
+ index.tsx # test your component here in a demo app
+ package.json
+ tsconfig.json
+/src
+ index.tsx # EDIT THIS
+/test
+ blah.test.tsx # EDIT THIS
+.gitignore
+package.json
+README.md # EDIT THIS
+tsconfig.json
+```
+
+#### React Testing Library
+
+We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
+
+### Rollup
+
+TSDX uses [Rollup v1.x](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+
+## Continuous Integration
+
+### Travis
+
+_to be completed_
+
+### Circle
+
+_to be completed_
+
+## Optimizations
+
+Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
+
+```js
+// ./types/index.d.ts
+declare var __DEV__: boolean;
+
+// inside your code...
+if (__DEV__) {
+ console.log('foo');
+}
+```
+
+You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
+
+## Module Formats
+
+CJS, ESModules, and UMD module formats are supported.
+
+The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
+
+## Using the Playground
+
+```
+cd example
+npm i # or yarn to install dependencies
+npm start # or yarn start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**!
+
+## Deploying the Playground
+
+The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
+
+```bash
+cd example # if not already in the example folder
+npm run build # builds to dist
+netlify deploy # deploy the dist folder
+```
+
+Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:
+
+```bash
+netlify init
+# build command: yarn build && cd example && yarn && yarn build
+# directory to deploy: example/dist
+# pick yes for netlify.toml
+```
+
+## Named Exports
+
+Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
+
+## Including Styles
+
+There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
+
+For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
+
+## Publishing to NPM
+
+We recommend using https://github.com/sindresorhus/np.
+
+## Usage with Lerna
+
+When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
+
+The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
+
+Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
+
+```diff
+ "alias": {
+- "react": "../node_modules/react",
+- "react-dom": "../node_modules/react-dom"
++ "react": "../../../node_modules/react",
++ "react-dom": "../../../node_modules/react-dom"
+ },
+```
+
+An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)
diff --git a/demo/src/index.js b/demo/src/index.js
deleted file mode 100644
index e5b4550..0000000
--- a/demo/src/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { Component, Fragment } from "react";
-import { render } from "react-dom";
-
-import Example from "../../src";
-
-const exampleText =
- "That's what it said on 'Ask Jeeves'. Now, when you do this without getting punched in the chest, you'll have more fun. Not tricks, Michael, illusions. I care deeply for nature. Marry me. Michael!";
-class Demo extends Component {
- render() {
- return (
-
-
- underline-emphasis Demo
-
- {partialText + '.'}
-
- ))}
-
-
- );
- }
-}
-
-render(Playground
+
+
+
+
+
+
+
diff --git a/example/index.tsx b/example/index.tsx
new file mode 100644
index 0000000..cb316d5
--- /dev/null
+++ b/example/index.tsx
@@ -0,0 +1,24 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { UnderlineEmphasis } from '../.';
+
+const exampleText =
+ "That's what it said on 'Ask Jeeves'. Now, when you do this without getting punched in the chest, you'll have more fun. Not tricks, Michael, illusions. I care deeply for nature. Marry me. Michael!";
+
+const App = () => (
+
+
+ underline-emphasis Demo
+
+ {partialText + '.'}
+
+ ))}
+
+
+);
+
+ReactDOM.render(
- `;
-
- const encodedSvg = window.btoa(svgImage);
-
- const fixedStyle = {
- backgroundPosition: "bottom",
- backgroundRepeat: "no-repeat",
- backgroundSize: "100% auto",
- display: "inline",
- fontStyle: "inherit",
- overflow: "visible",
- whiteSpace: "nowrap",
- };
-
- return (
-
- {children}
-
- );
-};
-export default UnderlineEmphasis;
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..17e38e9
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1 @@
+export * from './underline-emphasis';
diff --git a/src/underline-emphasis/index.tsx b/src/underline-emphasis/index.tsx
new file mode 100644
index 0000000..11da265
--- /dev/null
+++ b/src/underline-emphasis/index.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { createLCGenerator } from './utils/create-lc-generator';
+import { getArrayByFunction } from './utils/get-array-by-function';
+import { getSeed } from './utils/get-seed';
+import { normaliseArray } from './utils/normalise-array';
+import { sortArrayNumerically } from './utils/sort-array-numerically';
+import { isOdd } from './utils/is-odd';
+
+const fixedStyle: React.CSSProperties = {
+ backgroundPosition: 'bottom',
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: '100% auto',
+ display: 'inline',
+ fontStyle: 'inherit',
+ overflow: 'visible',
+ whiteSpace: 'nowrap',
+};
+
+export const UnderlineEmphasis: React.FunctionComponent<{
+ children?: string;
+}> = ({ children }) => {
+ if (typeof window === 'undefined' || !children || !children.length) {
+ return null;
+ }
+ const width = 20 * children.length;
+ const height = 10;
+ const seed = getSeed(children);
+ const lcGenerator = createLCGenerator({ seed: seed });
+ const pointCountArray: number[] = getArrayByFunction({
+ getArrayValue: lcGenerator,
+ length: 3,
+ });
+ const normalisedPointCountArray = normaliseArray({
+ array: pointCountArray,
+ max: height,
+ min: 0,
+ });
+ const pointCount = 3 + Math.floor(normalisedPointCountArray[0]);
+ const xArray = getArrayByFunction({
+ getArrayValue: lcGenerator,
+ length: pointCount,
+ });
+ const yArray = getArrayByFunction({
+ getArrayValue: lcGenerator,
+ length: pointCount,
+ });
+ sortArrayNumerically(xArray);
+ sortArrayNumerically(yArray).reverse();
+ const normalisedXArray = normaliseArray({
+ array: xArray.map(
+ (value, index) => 0.5 + (isOdd(index) ? -1 : 1) * width * (value * 0.5)
+ ),
+ max: width,
+ min: 0,
+ });
+ const normalisedYArray = normaliseArray({
+ array: yArray.map(value => value * height),
+ max: height,
+ min: 0,
+ });
+ const pointArray = normalisedXArray.map((_value, index) => [
+ normalisedXArray[index],
+ normalisedYArray[index],
+ ]);
+ const pointString = pointArray.map(tuple => tuple.join(',')).join(' ');
+
+ const svgImage = `
+ `;
+
+ const encodedSvg = window.btoa(svgImage);
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/underline-emphasis/utils/create-lc-generator/index.tsx b/src/underline-emphasis/utils/create-lc-generator/index.tsx
new file mode 100644
index 0000000..2ad65a1
--- /dev/null
+++ b/src/underline-emphasis/utils/create-lc-generator/index.tsx
@@ -0,0 +1,28 @@
+import invariant from 'tiny-invariant';
+
+export const createLCGenerator = ({
+ seed = 1,
+ multiplier = 16807,
+ increment = 0,
+ modulus = 2147483647,
+} = {}) => {
+ invariant(multiplier > 0, '`multiplier` must be strictly larger than 0');
+ invariant(
+ multiplier < modulus,
+ '`multiplier` must be smaller than `modulus`'
+ );
+ invariant(increment >= 0, '`increment` must not be negative');
+ invariant(increment < modulus, '`increment` must be smaller than `modulus`');
+ invariant(seed >= 0, '`seed` must not be negative');
+ invariant(seed < modulus, '`seed` must be smaller than `modulus`');
+ invariant(
+ seed !== 0 || increment !== 0,
+ '`seed` cannot be 0 if `increment` is 0'
+ );
+ var state = Math.abs(seed);
+ return () => {
+ var result = (state * multiplier + increment) % modulus;
+ state = result;
+ return result / modulus;
+ };
+};
diff --git a/src/underline-emphasis/utils/get-array-by-function/index.tsx b/src/underline-emphasis/utils/get-array-by-function/index.tsx
new file mode 100644
index 0000000..ac46ce4
--- /dev/null
+++ b/src/underline-emphasis/utils/get-array-by-function/index.tsx
@@ -0,0 +1,9 @@
+import { makeEmptyArray } from './make-empty-array';
+
+export const getArrayByFunction = ({
+ getArrayValue,
+ length,
+}: {
+ getArrayValue: () => number;
+ length: number;
+}) => makeEmptyArray(length).map(getArrayValue);
diff --git a/src/underline-emphasis/utils/get-array-by-function/make-empty-array/index.tsx b/src/underline-emphasis/utils/get-array-by-function/make-empty-array/index.tsx
new file mode 100644
index 0000000..423d0ee
--- /dev/null
+++ b/src/underline-emphasis/utils/get-array-by-function/make-empty-array/index.tsx
@@ -0,0 +1,2 @@
+export const makeEmptyArray = (length: number) =>
+ Array.apply(null, Array(length)).map(() => null);
diff --git a/src/underline-emphasis/utils/get-seed/index.tsx b/src/underline-emphasis/utils/get-seed/index.tsx
new file mode 100644
index 0000000..2050e14
--- /dev/null
+++ b/src/underline-emphasis/utils/get-seed/index.tsx
@@ -0,0 +1,8 @@
+export const getSeed = (children: string) =>
+ children
+ .split('')
+ .reduce(
+ (accumulator, _currentValue, index) =>
+ accumulator + children.charCodeAt(index),
+ 0
+ );
diff --git a/src/underline-emphasis/utils/is-odd/index.tsx b/src/underline-emphasis/utils/is-odd/index.tsx
new file mode 100644
index 0000000..b8f6a6d
--- /dev/null
+++ b/src/underline-emphasis/utils/is-odd/index.tsx
@@ -0,0 +1 @@
+export const isOdd = (number: number) => number % 2;
diff --git a/src/underline-emphasis/utils/normalise-array/index.tsx b/src/underline-emphasis/utils/normalise-array/index.tsx
new file mode 100644
index 0000000..f52744e
--- /dev/null
+++ b/src/underline-emphasis/utils/normalise-array/index.tsx
@@ -0,0 +1,20 @@
+import { normalizeBetweenTwoRanges } from './normalize-between-two-ranges';
+
+export const normaliseArray = ({
+ array,
+ max,
+ min,
+}: {
+ array: number[];
+ max: number;
+ min: number;
+}) =>
+ array.map(value =>
+ normalizeBetweenTwoRanges(
+ value,
+ Math.min(...array),
+ Math.max(...array),
+ min,
+ max
+ )
+ );
diff --git a/src/underline-emphasis/utils/normalise-array/normalize-between-two-ranges/index.tsx b/src/underline-emphasis/utils/normalise-array/normalize-between-two-ranges/index.tsx
new file mode 100644
index 0000000..dfcb6fe
--- /dev/null
+++ b/src/underline-emphasis/utils/normalise-array/normalize-between-two-ranges/index.tsx
@@ -0,0 +1,7 @@
+export const normalizeBetweenTwoRanges = (
+ val: number,
+ minVal: number,
+ maxVal: number,
+ newMin: number,
+ newMax: number
+) => newMin + ((val - minVal) * (newMax - newMin)) / (maxVal - minVal);
diff --git a/src/underline-emphasis/utils/sort-array-numerically/index.tsx b/src/underline-emphasis/utils/sort-array-numerically/index.tsx
new file mode 100644
index 0000000..4519972
--- /dev/null
+++ b/src/underline-emphasis/utils/sort-array-numerically/index.tsx
@@ -0,0 +1,2 @@
+export const sortArrayNumerically = (array: number[]) =>
+ array.sort((a, b) => a - b);
diff --git a/test/__snapshots__/underline-emphasis.test.tsx.snap b/test/__snapshots__/underline-emphasis.test.tsx.snap
new file mode 100644
index 0000000..6d89f16
--- /dev/null
+++ b/test/__snapshots__/underline-emphasis.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders with children 1`] = `
+
+ children text
+
+`;
diff --git a/test/underline-emphasis.test.tsx b/test/underline-emphasis.test.tsx
new file mode 100644
index 0000000..990e33f
--- /dev/null
+++ b/test/underline-emphasis.test.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { UnderlineEmphasis } from '../src';
+import renderer from 'react-test-renderer';
+
+describe('it', () => {
+ it('renders null without children', () => {
+ const component = renderer.create(children text );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/tests/.eslintrc b/tests/.eslintrc
deleted file mode 100644
index 7eeefc3..0000000
--- a/tests/.eslintrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "env": {
- "mocha": true
- }
-}
diff --git a/tests/index-test.js b/tests/index-test.js
deleted file mode 100644
index 0d00909..0000000
--- a/tests/index-test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import expect from 'expect'
-import React from 'react'
-import {render, unmountComponentAtNode} from 'react-dom'
-
-import Component from 'src/'
-
-describe('Component', () => {
- let node
-
- beforeEach(() => {
- node = document.createElement('div')
- })
-
- afterEach(() => {
- unmountComponentAtNode(node)
- })
-
- it('displays a welcome message', () => {
- render(