Merge pull request 'feature/docs' (#1) from feature/docs into master

Reviewed-on: https://code.modal.sh/tesseract-design/react-common/pulls/1

.gitignore

@@ -66,6 +66,4 @@ typings/
 .env
 .next
 dist/
-.gitignore
-.docz/
-/docz.config.js
+.next/

README.md

@@ -1,91 +0,0 @@
-# Tesseract Web - React Common
-
-Common front-end components for Web using the [Tesseract design system](https://make.modal.sh/tesseract/design), written for [React](https://reactjs.org).
-
-Package:
-
-[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
-[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)
-
-Dependencies:
-
-[![React](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=react&kind=peerDependencies)](https://github.com/facebook/react)
-[![Styled Components](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=styled-components&kind=peerDependencies)](https://github.com/styled-components/styled-components)
-[![TypeScript](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=typescript&kind=devDependencies)](https://github.com/microsoft/typescript)
-[![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest)
-[![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup)
-
-## Installation
-
-Since this package resides in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/), you may need to
-adjust configuration in your chosen package manager.
-
-With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:
-
-```
-"@tesseract-design:registry" "https://js.pack.modal.sh/"
-```
-
-Then, install the package by running the following command:
-
-```shell script
-yarn add @tesseract-design/react-common
-```
-
-## Usage
-
-The package includes components as named exports. Simply import the components you need individually or use a namespace
-import, like so:
-
-```jsx harmony
-import * as React from 'react'
-import ReactDOM from 'react-dom'
-import * as T from '@tesseract-design/react-common'
-
-const LoginForm = etcProps => (
-  <form
-    {...etcProps}
-  >
-    <fieldset>
-      <legend>
-        Log In
-      </legend>
-      <div>
-        <T.TextInput
-          block
-          label="Username"
-        />
-      </div>
-      <div>
-        <T.TextInput
-          block
-          type="password"
-          label="Password"
-        />
-      </div>
-      <div>
-        <T.Button>
-          Log In
-        </T.Button>
-      </div>
-    </fieldset>
-  </form>
-)
-
-const mountNode = window.document.createElement('div')
-
-ReactDOM.render(
-  <LoginForm />,
-  mountNode,
-)
-
-window.document.body.appendChild(mountNode)
-```
-
-Detailed usage guides can be found in the [Tesseract Design - React Common documentation](https://make.modal.sh/tesseract/web/react/common).
-
-## TypeScript
-
-The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
-compiled source.
-

README.md

@@ -0,0 +1 @@
+packages/react-common-docs/src/pages/index.md

jest.config.js

@@ -5,8 +5,8 @@ module.exports = {
     './jest.setup.ts',
   ],
   collectCoverageFrom: [
-    './lib/**/*.{ts,tsx}',
-    '!./lib/**/*.stories.{ts,tsx}'
+    './packages/**/*.{ts,tsx}',
+    '!./packages/**/*.stories.{ts,tsx}'
   ],
   preset: 'ts-jest',
   testTimeout: 30000,

lib/components/Checkbox/Checkbox.mdx

@@ -1,25 +0,0 @@
----
-name: Checkbox
-route: /components/checkbox
-menu: Components
----
-
-import { Playground, Props, Link } from 'docz'
-import Checkbox from './Checkbox'
-
-# Checkbox
-
-Component for values that have an on/off state.
-
-<Playground>
-  <Checkbox label="Accept Terms" />
-</Playground>
-
-## Props
-
-<Props of={Checkbox} />
-
-## See Also
-
-- <Link to="../select">Select</Link> for a similar component suitable for selecting more values.
-- <Link to="../radiobutton">RadioButton</Link> for a similar component on selecting a single value among very few choices.

lib/components/Icon/Icon.mdx

@@ -1,20 +0,0 @@
----
-name: Icon
-route: /components/icon
-menu: Components
----
-
-import { Playground, Props } from 'docz'
-import Icon from './Icon'
-
-# Icon
-
-Component for displaying graphics.
-
-<Playground>
-  <Icon name="check" label="OK" size="1.5rem" weight={0.125} />
-</Playground>
-
-## Props
-
-<Props of={Icon} />

lib/components/RadioButton/RadioButton.mdx

@@ -1,32 +0,0 @@
----
-name: RadioButton
-route: /components/radiobutton
-menu: Components
----
-
-import { Playground, Props, Link } from 'docz'
-import RadioButton from './RadioButton'
-
-# RadioButton
-
-Component for values which are to be selected from a few list of options.
-
-<Playground>
-  <div style={{ display: 'grid', gap: '1rem', }}>
-    <div>
-      <RadioButton name="flavor" label="Chocolate" />
-    </div>
-    <div>
-      <RadioButton name="flavor" label="Vanilla" />
-    </div>
-  </div>
-</Playground>
-
-## Props
-
-<Props of={RadioButton} />
-
-## See Also
-
-- <Link to="../checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
-- <Link to="../select">Select</Link> for a similar component suitable for selecting more values.

lib/components/Select/Select.mdx

@@ -1,45 +0,0 @@
----
-name: Select
-route: /components/select
-menu: Components
----
-
-import { Playground, Props, Link } from 'docz'
-import Select from './Select'
-
-# Select
-
-Component for selecting values from a larger number of options.
-
-<Playground>
-  <Select>
-    <optgroup
-      label="Fruits"
-    >
-      <option value="mango">Mango</option>
-      <option value="strawberry">Strawberry</option>
-      <option value="blueberry">Blueberry</option>
-    </optgroup>
-    <optgroup
-      label="Classic"
-    >
-      <option value="chocolate">Chocolate</option>
-      <option value="vanilla">Vanilla</option>
-    </optgroup>
-  </Select>
-</Playground>
-
-## Props
-
-<Props of={Select} />
-
-## Usage Notes
-
-The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
-To use the component together with layouts, see [TextInput](./textinput) for examples. Both `Select` and
-`TextInput` have similar strategies on usage with layouts.
-
-## See Also
-
-- <Link to="../checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
-- <Link to="../radiobutton">RadioButton</Link> for a similar component on selecting a single value among very few choices.

lib/components/Slider/Slider.mdx

@@ -1,27 +0,0 @@
----
-name: Slider
-route: /components/slider
-menu: Components
----
-
-import { Playground, Props } from 'docz'
-import Slider from './Slider'
-
-# Slider
-
-Component for inputting numeric values in a graphical manner.
-
-The component is styled using client-side scripts. When the component is rendered server-side,
-the component falls back into the original `<input type="range">` element.
-
-<Playground>
-  <Slider />
-</Playground>
-
-## Props
-
-<Props of={Slider} />
-
-## See Also
-
-- [Reach UI Slider](//reacttraining.com/reach-ui/slider/#sliderinput) for the client-side implementation.

lib/components/TextInput/TextInput.mdx

@@ -1,71 +0,0 @@
----
-name: TextInput
-route: /components/textinput
-menu: Components
----
-
-import { Playground, Props, Link } from 'docz'
-import TextInput from './TextInput'
-
-# TextInput
-
-Component for inputting textual values.
-
-<Playground>
-  <TextInput label="Username" placeholder="johndoe" hint="the name you use to log in" />
-</Playground>
-
-## Props
-
-<Props of={TextInput} />
-
-## Usage Notes
-
-The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
-To use the component together with layouts, see the following examples.
-
-### Inline
-
-The components are surrounded by `inline-block` elements. These surrounding elements have specified widths, which could
-act as guide to the user on how long the expected input values are.
-
-<Playground>
-  <form>
-    I am <span style={{ display: 'inline-block', width: '16rem', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '24rem', }}><TextInput label="Address" hint="city, state and country" /></span>.
-  </form>
-</Playground>
-
-### Grid
-
-It is advisable to put surrounding elements instead of the `TextInput` components themselves as children of the
-element specified as `grid`. This is to be able to add complementing content to the components, if for example there are
-some content that is best displayed outside the component instead of putting in the `hint` prop.
-
-<Playground>
-  <form
-    style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }}
-  >
-    <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
-      <TextInput label="Address line 1" hint="unit/house number, building" />
-    </div>
-    <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
-      <TextInput label="Address line 2" hint="street, area" />
-    </div>
-    <div>
-      <TextInput size="large" label="City/Town" />
-    </div>
-    <div>
-      <TextInput size="large" label="State/Province" />
-    </div>
-    <div>
-      <TextInput size="large" label="Country" hint="abbreviations are accepted" />
-      <small>
-        Consult the <a href="#">fees table</a> for shipping fee details.
-      </small>
-    </div>
-  </form>
-</Playground>
-
-## See Also
-
-- <Link to="../select">Select</Link> for a graphically-similar component suitable for selecting more values.

lib/services/isEmpty.test.ts

@@ -1,42 +0,0 @@
-import * as fc from 'fast-check'
-import isEmpty from './isEmpty'
-
-describe('lib/services/isEmpty', () => {
-  it('should exist', () => {
-    expect(isEmpty).toBeDefined()
-  })
-
-  it('should be a function', () => {
-    expect(isEmpty).toBeFunction()
-  })
-
-  it('should accept 1 argument', () => {
-    expect(isEmpty).toHaveLength(1)
-  })
-
-  it('should return a boolean value', () => {
-    fc.assert(
-      fc.property(fc.anything(), (v) => {
-        expect(typeof isEmpty(v)).toBe('boolean')
-      }),
-    )
-  })
-
-  describe('on arguments', () => {
-    it('should return `true` on an argument with value of `undefined`', () => {
-      expect(isEmpty(undefined)).toBe(true)
-    })
-
-    it('should return `true` on an argument with value of `null`', () => {
-      expect(isEmpty(null)).toBe(true)
-    })
-
-    it('should return `false` on an argument with value that is neither `undefined` nor `null`', () => {
-      fc.assert(
-        fc.property(fc.anything().filter((v) => typeof v !== 'undefined' && v !== null), (v) => {
-          expect(isEmpty(v)).toBe(false)
-        }),
-      )
-    })
-  })
-})

package.json

@@ -12,6 +12,8 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
+    "@babel/runtime": "^7.12.5",
+    "@reach/slider": "^0.10.5",
     "@rollup/plugin-typescript": "^5.0.2",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -29,23 +31,20 @@
     "jest-axe": "3.4.0",
     "jest-enzyme": "7.1.2",
     "jest-extended": "0.11.5",
+    "pascal-case": "3.1.1",
     "plop": "2.6.0",
     "prettier": "1.19.1",
-    "react-is": "^16.13.1",
+    "prop-types": "15.7.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-feather": "2.0.3",
     "rollup": "^2.23.0",
     "rollup-plugin-peer-deps-external": "2.2.2",
     "rollup-plugin-terser": "5.3.0",
+    "styled-components": "5.1.0",
     "ts-jest": "^26.1.3",
     "tslib": "^2.0.0",
-    "typescript": "^3.9.7",
-    "@reach/slider": "^0.10.5",
-    "docz": "^2.3.1",
-    "pascal-case": "3.1.1",
-    "prop-types": "15.7.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-feather": "2.0.3",
-    "styled-components": "5.1.0"
+    "typescript": "^3.9.7"
   },
   "scripts": {
     "prepublishOnly": "NODE_ENV=production rm -rf dist/ && rollup -c",
@@ -64,5 +63,6 @@
     "react-feather": "2.0.3",
     "styled-components": "5.1.0"
   },
-  "homepage": "https://make.modal.sh/tesseract/web/react/common"
+  "homepage": "https://make.modal.sh/tesseract/web/react/common",
+  "dependencies": {}
 }

packages/react-common-docs/brand.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import pkg from '../../package.json'
+
+const Base = styled('div')({
+  position: 'relative',
+})
+
+const Title = styled('strong')({
+  fontSize: '2rem',
+  fontFamily: 'var(--font-family-headings), sans-serif',
+  fontWeight: 'var(--font-weight-headings, 400)',
+  lineHeight: 'var(--line-height-headings, 1.5)',
+  fontStretch: 'var(--font-stretch-headings, normal)',
+  textTransform: 'lowercase',
+  whiteSpace: 'nowrap',
+})
+
+const Subtitle = styled('small')({
+  position: 'absolute',
+  bottom: '-1em',
+  right: 0,
+  fontWeight: 'bolder',
+})
+
+const Brand = () => {
+  const name = pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name
+  return (
+    <Base>
+      <Title>
+        {name}
+      </Title>
+      <Subtitle>
+        v.{pkg.version}
+      </Subtitle>
+    </Base>
+  )
+}
+
+export default Brand

packages/react-common-docs/next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+declare module 'remark-react'

packages/react-common-docs/next.config.js

@@ -0,0 +1,25 @@
+const path = require('path')
+
+const withMDX = require('next-mdx-frontmatter')({
+  extension: /\.mdx?$/
+})
+
+const e = withMDX({
+  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
+})
+
+module.exports = {
+  ...e,
+  webpack(...args) {
+    const oldWebpack = e.webpack(...args)
+    const [config, { defaultLoaders, }] = args
+
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      include: [path.resolve(__dirname, '../react-common/')],
+      use: [defaultLoaders.babel],
+    })
+
+    return oldWebpack
+  }
+}

packages/react-common-docs/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "react-common-docs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "predev": "./scripts/docgen",
+    "dev": "next dev",
+    "prebuild": "./scripts/docgen",
+    "build": "next build",
+    "prestart": "./scripts/docgen",
+    "start": "next start",
+    "docgen": "./scripts/docgen"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^1.6.19",
+    "next": "10.0.1",
+    "next-mdx-frontmatter": "^0.0.3",
+    "pascal-case": "^3.1.1",
+    "react-docgen-typescript": "^1.20.5",
+    "react-live": "^2.2.3",
+    "remark-parse": "^9.0.0",
+    "remark-react": "^8.0.0",
+    "styled-components": "^5.2.1",
+    "unified": "^9.2.0"
+  }
+}

packages/react-common-docs/public/global.css

@@ -0,0 +1,52 @@
+body {
+  margin: 0;
+}
+
+h1 {
+  font-size: 3em;
+  text-transform: lowercase;
+}
+
+h2 {
+  font-size: 2em;
+  text-transform: lowercase;
+}
+
+h3 {
+  font-size: 1.75em;
+  text-transform: lowercase;
+}
+
+h4 {
+  text-transform: lowercase;
+}
+
+h5 {
+  text-transform: lowercase;
+}
+
+h6 {
+  text-transform: lowercase;
+}
+
+p {
+  margin: 2em 0;
+}
+
+small {
+  font-size: 0.75em;
+}
+
+a:focus {
+  color: var(--color-active);
+  outline: 0;
+}
+
+::selection {
+  background-color: var(--color-active);
+  color: var(--color-fg);
+}
+
+:root {
+  caret-color: var(--color-active);
+}

packages/react-common-docs/public/theme/dark.css

@@ -0,0 +1,138 @@
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: semi-expanded;
+  font-weight: 400;
+  src:
+    local('Encode Sans Semi Expanded'),
+    local('Encode Sans');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: semi-expanded;
+  font-weight: 700;
+  src:
+    local('Encode Sans Semi Expanded Bold'),
+    local('Encode Sans Semi Expanded'),
+    local('Encode Sans');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: condensed;
+  font-weight: 100;
+  src:
+    local('Encode Sans Condensed Thin'),
+    local('Encode Sans Condensed'),
+    local('Encode Sans');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: condensed;
+  font-weight: 200;
+  src:
+    local('Encode Sans Condensed ExtraLight'),
+    local('Encode Sans Condensed Extra Light'),
+    local('Encode Sans Condensed'),
+    local('Encode Sans');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: condensed;
+  font-weight: 300;
+  src:
+    local('Encode Sans Condensed Light'),
+    local('Encode Sans Condensed'),
+    local('Encode Sans');
+}
+
+:root {
+  --color-active: #f90;
+  --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
+  --font-stretch-base: semi-expanded;
+  --font-weight-base: 400;
+  --line-height-base: 2;
+  --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
+  --font-stretch-headings: condensed;
+  --font-weight-headings: 100;
+  --line-height-headings: 1.5;
+  --font-family-monospace: 'mononoki';
+  --font-size-root: 16px;
+  --color-negative: #222;
+  --color-positive: #eee;
+  --color-accent: #C78AB3;
+  --opacity-light: 0.25;
+  --opacity-lighter: 0.5;
+  --opacity-lightest: 0.75;
+}
+
+:root {
+  --color-bg: var(--color-negative, white);
+  --color-fg: var(--color-positive, black);
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+  font-size: var(--font-size-root);
+  font-family: var(--font-family-base), sans-serif;
+  font-stretch: var(--font-stretch-base, normal);
+  font-weight: var(--font-weight-base, 400);
+  line-height: var(--line-height-base, 2);
+  transition-property: color, background-color;
+  transition-timing-function: ease;
+  transition-duration: 350ms;
+}
+
+h1 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h2 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h3 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h4 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h5 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h6 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+a {
+  color: var(--color-accent);
+}
+
+code {
+  font-family: var(--font-family-monospace), monospace;
+}
+
+pre {
+  font-family: var(--font-family-monospace), monospace;
+}

packages/react-common-docs/public/theme/light.css

@@ -0,0 +1,146 @@
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: semi-expanded;
+  font-weight: 400;
+  src:
+    local('Encode Sans Semi Expanded'),
+    local('Encode Sans');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: semi-expanded;
+  font-weight: 700;
+  src:
+    local('Encode Sans Semi Expanded Bold'),
+    local('Encode Sans Semi Expanded'),
+    local('Encode Sans');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: condensed;
+  font-weight: 100;
+  src:
+    local('Encode Sans Condensed Thin'),
+    local('Encode Sans Condensed'),
+    local('Encode Sans');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: condensed;
+  font-weight: 200;
+  src:
+    local('Encode Sans Condensed ExtraLight'),
+    local('Encode Sans Condensed Extra Light'),
+    local('Encode Sans Condensed'),
+    local('Encode Sans');
+}
+
+@font-face {
+  font-family: 'Encode Sans';
+  font-stretch: condensed;
+  font-weight: 300;
+  src:
+    local('Encode Sans Condensed Light'),
+    local('Encode Sans Condensed'),
+    local('Encode Sans');
+}
+
+:root {
+  --color-negative: #eee;
+  --color-positive: #222;
+  --color-accent: #ba6a9c;
+  --color-active: #f90;
+  --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
+  --font-stretch-base: semi-expanded;
+  --font-weight-base: 400;
+  --line-height-base: 2;
+  --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
+  --font-stretch-headings: condensed;
+  --font-weight-headings: 100;
+  --line-height-headings: 1.5;
+  --font-family-monospace: 'mononoki';
+  --font-size-root: 16px;
+  --opacity-light: 0.5;
+  --opacity-lighter: 0.75;
+  --opacity-lightest: 0.875;
+}
+
+/*@media (prefers-color-scheme: dark) {*/
+/*  :root {*/
+/*    --color-negative: #222;*/
+/*    --color-positive: #eee;*/
+/*    --color-accent: #C78AB3;*/
+/*    --opacity-light: 0.25;*/
+/*    --opacity-lighter: 0.5;*/
+/*    --opacity-lightest: 0.75;*/
+/*  }*/
+/*}*/
+
+:root {
+  --color-bg: var(--color-negative, white);
+  --color-fg: var(--color-positive, black);
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+  font-size: var(--font-size-root);
+  font-family: var(--font-family-base), sans-serif;
+  font-stretch: var(--font-stretch-base, normal);
+  font-weight: var(--font-weight-base, 400);
+  line-height: var(--line-height-base, 2);
+}
+
+h1 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h2 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h3 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h4 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h5 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+h6 {
+  font-family: var(--font-family-headings), sans-serif;
+  font-stretch: var(--font-stretch-headings, normal);
+  font-weight: var(--font-weight-headings, 400);
+  line-height: var(--line-height-headings, 1.5);
+}
+
+a {
+  color: var(--color-accent);
+}
+
+code {
+  font-family: var(--font-family-monospace), monospace;
+}
+
+pre {
+  font-family: var(--font-family-monospace), monospace;
+}

packages/react-common-docs/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

packages/react-common-docs/scripts/docgen

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+const docgen = require('react-docgen-typescript')
+const path = require('path')
+const fs = require('fs')
+
+const componentsPath = path.resolve(__dirname, '..', '..', 'react-common', 'src', 'components')
+
+fs.readdir(componentsPath, (err, dir) => {
+  const trueFilePaths = dir.map(d => path.resolve(__dirname, '..', '..', 'react-common', 'src', 'components', d, `${d}.tsx`))
+  const docs = docgen.parse(
+    trueFilePaths,
+    {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: {
+        skipPropsWithName: ['key', 'ref'],
+      },
+    }
+  )
+  fs.writeFile(path.resolve(__dirname, '..', 'src', 'docgen.json'), JSON.stringify(docs, null, 2), (err) => {
+
+  })
+})

packages/react-common-docs/src/components/Header/Header.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import Head from 'next/head'
+import unified from 'unified'
+import parse from 'remark-parse'
+import remark2react from 'remark-react'
+import docgen from '../../docgen.json'
+
+const Header = ({ of: ofAttr }) => {
+  const docs = docgen.find(d => d.displayName === ofAttr)
+
+  if (!docs) {
+    return null
+  }
+
+  return (
+    <React.Fragment>
+      <Head>
+        <title>
+          {docs.displayName} | React Common
+        </title>
+      </Head>
+      <h1>{docs.displayName}</h1>
+      <p>
+        {
+          unified()
+            .use(parse)
+            .use(remark2react)
+            .processSync(docs.description).result
+        }
+      </p>
+    </React.Fragment>
+  )
+}
+
+export default Header

packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { Icon } from '../../../../react-common/src'
+
+const Image = styled('img')({
+  display: 'block',
+  maxWidth: '100%',
+  maxHeight: '100%',
+})
+
+export type MenuGraphicsKind = 'icon' | 'image'
+
+export const propTypes = {
+  kind: PropTypes.oneOf<MenuGraphicsKind>(['icon', 'image']).isRequired,
+  alt: PropTypes.string,
+  id: PropTypes.string.isRequired,
+}
+
+type Props = PropTypes.InferProps<typeof propTypes>
+
+const MenuGraphics: React.FC<Props> = ({
+  kind,
+  alt,
+  id,
+}) => {
+  switch (kind) {
+    case 'icon':
+      return (
+        <Icon
+          name={id}
+        />
+      )
+    case 'image':
+      return (
+        <Image
+          src={id}
+          alt={alt}
+        />
+      )
+    default:
+      break
+  }
+
+  return null
+}
+
+MenuGraphics.propTypes = propTypes
+
+export default MenuGraphics

packages/react-common-docs/src/components/Nav/Nav.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import Link from 'next/link'
+import styled from 'styled-components'
+import NavLink from '../NavLink/NavLink'
+
+const StyledLink = styled('a')({
+  display: 'block',
+  textDecoration: 'none',
+})
+
+const Container = styled('span')({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '0 1rem',
+  height: '100%',
+  margin: '0 0 0 auto',
+  boxSizing: 'border-box',
+  '@media (min-width: 720px)': {
+    maxWidth: 'var(--max-width)',
+  },
+})
+
+const HeaderContainer = styled(Container)({
+  marginTop: '2rem',
+})
+
+const NavContainer = styled('div')({
+
+})
+
+const Nav = ({
+  data,
+}) => {
+  if (Array.isArray(data)) {
+    return (
+      <NavContainer>
+        {
+          data.map(d => (
+            <Nav
+              data={d}
+            />
+          ))
+        }
+      </NavContainer>
+    )
+  }
+  if (typeof data === 'object') {
+    const [entry] = Object.entries(data)
+    const [key, value] = entry
+    if (Array.isArray(value)) {
+      return (
+        <NavContainer>
+          <HeaderContainer>
+            {key}
+          </HeaderContainer>
+          {
+            value.map(v => (
+              <Nav
+                data={v}
+              />
+            ))
+          }
+        </NavContainer>
+      )
+    }
+    return (
+      <Link
+        href={value}
+        passHref
+      >
+        <NavLink
+          title={key}
+          enclosingComponent={Container}
+        />
+      </Link>
+    )
+  }
+  return (
+    <Link
+      href={data}
+      passHref
+    >
+      <NavLink
+        title={data}
+        enclosingComponent={Container}
+      />
+    </Link>
+  )
+}
+
+export default Nav

packages/react-common-docs/src/components/NavLink/NavLink.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { Icon } from '../../../../react-common/src'
+import MenuGraphics, { propTypes as menuGraphicsPropTypes } from '../MenuGraphics/MenuGraphics'
+
+const Link = styled('a')({
+  display: 'block',
+  height: 'var(--size-link, 4rem)',
+  textDecoration: 'none',
+  position: 'relative',
+  '::before': {
+    display: 'block',
+    content: "''",
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'currentColor',
+    opacity: 0,
+    zIndex: -1,
+  },
+  '::after': {
+    display: 'block',
+    content: "''",
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '0.25rem',
+    height: '100%',
+    backgroundColor: 'currentColor',
+    opacity: 0,
+    zIndex: -1,
+  },
+  ':hover::before': {
+    opacity: 0.25,
+  },
+  ':hover::after': {
+    opacity: 0.5,
+  },
+})
+
+const LinkText = styled('span')({
+  alignSelf: 'center',
+  display: 'block',
+  lineHeight: 1.25,
+  gridColumnStart: 2,
+  ':first-child': {
+    gridColumnStart: 1,
+  },
+  ':last-child': {
+    gridColumnEnd: 4,
+  },
+})
+
+const LinkTitle = styled('strong')({
+  display: 'block',
+})
+
+const LinkSubtitle = styled('span')({
+  display: 'block',
+})
+
+const IndicatorContainer = styled('span')({
+  alignSelf: 'center',
+  lineHeight: 0,
+})
+
+const MenuGraphicsContainer = styled('span')({
+  display: 'block',
+  padding: '0.5rem',
+  lineHeight: 0,
+})
+
+export const basePropTypes = {
+  as: PropTypes.string,
+  href: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
+  graphics: PropTypes.shape(menuGraphicsPropTypes),
+  indicator: PropTypes.string,
+  onClick: PropTypes.func,
+}
+
+const propTypes = {
+  ...basePropTypes,
+  enclosingComponent: PropTypes.elementType,
+  as: PropTypes.elementType,
+}
+
+type Props = PropTypes.InferProps<typeof propTypes>
+
+const NavLink = React.forwardRef<HTMLAnchorElement, Props>((
+  {
+    enclosingComponent: EnclosingComponent = React.Fragment,
+    href,
+    title,
+    graphics,
+    subtitle,
+    indicator,
+    onClick,
+  },
+  ref
+) => (
+  <Link
+    ref={ref}
+    href={href}
+    onClick={onClick}
+  >
+    <EnclosingComponent>
+      {
+        graphics as object
+        && (
+          <MenuGraphicsContainer>
+            <MenuGraphics
+              {...graphics}
+            />
+          </MenuGraphicsContainer>
+        )
+      }
+      <LinkText>
+        <LinkTitle>
+          {title}
+        </LinkTitle>
+        {
+          subtitle as string
+          && (
+            <LinkSubtitle>
+              {subtitle}
+            </LinkSubtitle>
+          )
+        }
+      </LinkText>
+      {
+        indicator as string
+        && (
+          <IndicatorContainer>
+            <Icon
+              name={indicator!}
+            />
+          </IndicatorContainer>
+        )
+      }
+    </EnclosingComponent>
+  </Link>
+))
+
+NavLink.propTypes = propTypes
+
+export default NavLink

packages/react-common-docs/src/components/Playground/Playground.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import {
+  LiveProvider,
+  LiveEditor,
+  LivePreview
+} from 'react-live'
+import styled from 'styled-components'
+
+const Figure = styled('figure')({
+  margin: 0,
+})
+
+const StyledLiveEditor = styled(LiveEditor)({
+  lineHeight: 1.125,
+  fontFamily: 'var(--font-family-monospace), monospace !important',
+  marginTop: '1rem',
+})
+
+const Playground = ({
+  components,
+  code,
+  label,
+}) => {
+  const indentLevel = code.indexOf('<') - 1
+  const normalizedCode = code
+    .split('\n')
+    .map((s: string) => s.slice(indentLevel))
+    .filter((s: string) => s.trim().length > 0)
+    .join('\n')
+
+  return (
+    <Figure>
+      {
+        label
+        && (
+          <figcaption>
+            {label}
+          </figcaption>
+        )
+      }
+      <div>
+        <LiveProvider code={normalizedCode} scope={{
+          ...components,
+        }}>
+          <LivePreview />
+          <StyledLiveEditor />
+        </LiveProvider>
+      </div>
+    </Figure>
+  )
+}
+
+export default Playground

packages/react-common-docs/src/components/Props/Props.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import docgen from '../../docgen.json'
+
+const Base = styled('table')({
+  borderCollapse: 'collapse',
+  border: 0,
+  display: 'block',
+  '@media (min-width: 720px)': {
+    display: 'table',
+    margin: '0 -0.5rem',
+  },
+})
+
+const HeaderCellGroup = styled('thead')({
+  display: 'none',
+  '@media (min-width: 720px)': {
+    display: 'table-header-group',
+  },
+})
+
+const HeaderRow = styled('tr')({
+  display: 'block',
+  margin: '2rem 0',
+  '@media (min-width: 720px)': {
+    display: 'table-row',
+    margin: 0,
+  },
+})
+
+const HeaderCell = styled('th')({
+  verticalAlign: 'top',
+  textAlign: 'left',
+  fontSize: '0.75rem',
+  fontWeight: 'bolder',
+  textTransform: 'uppercase',
+  border: 0,
+  display: 'block',
+  padding: 0,
+  '@media (min-width: 720px)': {
+    display: 'table-cell',
+    padding: '0 0.5rem',
+  },
+})
+
+const MainBodyCell = styled('th')({
+  verticalAlign: 'top',
+  textAlign: 'left',
+  border: 0,
+  lineHeight: 1,
+  display: 'block',
+  padding: 0,
+  '@media (min-width: 720px)': {
+    display: 'table-cell',
+    padding: '0.5rem',
+  },
+})
+
+const BodyCellGroup = styled('tbody')({
+  display: 'block',
+  '@media (min-width: 720px)': {
+    display: 'table-row-group',
+  },
+})
+
+const BodyCell = styled('td')({
+  verticalAlign: 'top',
+  padding: 0,
+  border: 0,
+  display: 'block',
+  '&[data-column-name]::before': {
+    display: 'inline',
+    fontSize: '0.75rem',
+    fontWeight: 'bolder',
+    textTransform: 'uppercase',
+    content: "attr(data-column-name) ':'",
+    marginRight: '1rem',
+  },
+  '@media (min-width: 720px)': {
+    padding: '0.5rem 0.5rem',
+    display: 'table-cell',
+    lineHeight: 1.25,
+    '&[data-column-name]::before': {
+      display: 'none',
+    },
+  },
+})
+
+const Code = styled('code')({
+  display: 'inline-block',
+})
+
+const Props = ({ of: ofAttr }) => {
+  const docs = docgen.find(d => d.displayName === ofAttr)
+
+  if (!docs) {
+    return null
+  }
+
+  return (
+    <Base>
+      <colgroup>
+        <col width="20%" />
+        <col width="25%" />
+        <col width="25%" />
+        <col width="*" />
+      </colgroup>
+      <HeaderCellGroup>
+        <HeaderRow>
+          <HeaderCell>
+            Name
+          </HeaderCell>
+          <HeaderCell>
+            Type
+          </HeaderCell>
+          <HeaderCell>
+            Default
+          </HeaderCell>
+          <HeaderCell>
+            Description
+          </HeaderCell>
+        </HeaderRow>
+      </HeaderCellGroup>
+      <BodyCellGroup>
+        {
+          Object.entries(docs.props).map(([name, def]) => (
+            <HeaderRow>
+              <MainBodyCell>
+                <Code>
+                  {def.required ? name : name + '?'}
+                </Code>
+              </MainBodyCell>
+              <BodyCell
+                data-column-name="Type"
+              >
+                {
+                  def.type.name === 'enum'
+                  && (
+                    <Code>
+                      {def.type.value.map(v => v.value).join(' | ')}
+                    </Code>
+                  )
+                }
+                {
+                  def.type.name !== 'enum'
+                  && (
+                    <Code>
+                      {def.type.name}
+                    </Code>
+                  )
+                }
+              </BodyCell>
+              <BodyCell
+                data-column-name={def.defaultValue ? 'Default' : undefined }
+              >
+                {
+                  def.defaultValue
+                  && (
+                    <Code>
+                      {JSON.stringify(def.defaultValue.value)}
+                    </Code>
+                  )
+                }
+              </BodyCell>
+              <BodyCell>
+                {def.description}
+              </BodyCell>
+            </HeaderRow>
+          ))
+        }
+      </BodyCellGroup>
+    </Base>
+  )
+}
+
+export default Props

packages/react-common-docs/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,186 @@
+import { Icon } from '../../../../react-common/src'
+import pkg from '../../../../../package.json'
+import styled from 'styled-components'
+import Link from 'next/link'
+import * as React from 'react'
+import Nav from '../Nav/Nav'
+
+const StyledLink = styled('a')({
+  display: 'block',
+  textDecoration: 'none',
+  marginTop: '3rem',
+  marginBottom: '3rem',
+})
+
+const Container = styled('span')({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '0 1rem',
+  height: '2rem',
+  margin: '0 0 0 auto',
+  boxSizing: 'border-box',
+  '@media (min-width: 720px)': {
+    maxWidth: 'var(--max-width)',
+  },
+})
+
+const Base = styled('aside')({
+  '--max-width': 240,
+  position: 'fixed',
+  top: 0,
+  left: '-100%',
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'var(--color-bg)',
+  zIndex: 4,
+  transitionProperty: 'color, background-color',
+  transitionTimingFunction: 'ease',
+  transitionDuration: '350ms',
+  '@media (min-width: 720px)': {
+    left: 0,
+    width: `${100 / 4}%`,
+    maxWidth: 'none',
+    height: '100%',
+    '+ *': {
+      paddingLeft: `${100 / 4}%`,
+      boxSizing: 'border-box',
+    },
+  },
+})
+
+const Actions = styled('div')({
+  marginBottom: '4rem',
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center',
+})
+
+const ToggleWrapper = styled('label')({
+  cursor: 'pointer',
+  color: 'var(--color-accent)',
+  display: 'inline-block',
+})
+
+const ToggleIcon = styled('span')({
+
+})
+
+const ToggleInput = styled('input')({
+  position: 'absolute',
+  left: -999999,
+})
+
+const NavWrapper = styled('nav')({
+  '--size-link': '3rem',
+})
+
+const RepoLink = styled('a')({
+  display: 'inline-grid',
+  width: '1.5rem',
+  height: '1.5rem',
+  placeContent: 'center',
+})
+
+const Sidebar = ({
+  data,
+  brand: Brand,
+  initialTheme = 'Dark',
+}) => {
+  const [theme, setTheme] = React.useState(initialTheme)
+  const toggleDarkMode = (b: string) => () => {
+    setTheme(b)
+  }
+
+  React.useEffect(() => {
+    let storageTheme = window.localStorage.getItem('tesseract-theme')
+      || (
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'Dark'
+          : 'Light'
+      )
+    window.localStorage.setItem('tesseract-theme', storageTheme)
+    setTimeout(() => {
+      setTheme(storageTheme)
+    })
+  }, [])
+
+  React.useEffect(() => {
+    window.localStorage.setItem('tesseract-theme', theme)
+  }, [theme])
+
+  React.useEffect(() => {
+    const stylesheets = Array.from(window.document.querySelectorAll('link[title]')) as HTMLLinkElement[]
+    stylesheets.forEach(s => {
+      const enabled = s.title === theme
+      s.setAttribute('rel', enabled ? 'stylesheet' : 'alternate stylesheet')
+      if (enabled) {
+        s.removeAttribute('disabled')
+      } else {
+        s.setAttribute('disabled', 'disabled')
+      }
+    })
+  }, [theme])
+
+  return (
+    <Base>
+      <NavWrapper>
+        <Link
+          href="/"
+          passHref
+        >
+          <StyledLink>
+            <Container>
+              <Brand />
+            </Container>
+          </StyledLink>
+        </Link>
+        <Container>
+          <Actions>
+            <ToggleWrapper>
+              <ToggleInput
+                type="checkbox"
+                defaultChecked={theme === 'Dark'}
+                onChange={toggleDarkMode(theme === 'Dark' ? 'Light' : 'Dark')}
+              />
+              <ToggleIcon>
+                {
+                  theme === 'Dark'
+                  && (
+                    <Icon
+                      label="Set Light Mode"
+                      name="moon"
+                    />
+                  )
+                }
+                {
+                  theme === 'Light'
+                  && (
+                    <Icon
+                      label="Set Dark Mode"
+                      name="sun"
+                    />
+                  )
+                }
+              </ToggleIcon>
+            </ToggleWrapper>
+            <RepoLink
+              href={pkg.repository}
+              target="_blank"
+              rel="noopener noreferer"
+            >
+              <Icon
+                name="code"
+                label="Visit Repository"
+              />
+            </RepoLink>
+          </Actions>
+        </Container>
+        <Nav
+          data={data.nav}
+        />
+      </NavWrapper>
+    </Base>
+  )
+}
+
+export default Sidebar

packages/react-common-docs/src/docgen.json

@@ -0,0 +1,694 @@
+[
+  {
+    "description": "Component for performing an action upon activation (e.g. when clicked).",
+    "displayName": "Button",
+    "methods": [],
+    "props": {
+      "size": {
+        "defaultValue": {
+          "value": "medium"
+        },
+        "description": "Size of the component.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "Size",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "variant": {
+        "defaultValue": {
+          "value": "outline"
+        },
+        "description": "Variant of the component.",
+        "name": "variant",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "Variant",
+          "value": [
+            {
+              "value": "\"outline\""
+            },
+            {
+              "value": "\"primary\""
+            }
+          ]
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "Text to identify the action associated upon activation of the component.",
+        "name": "children",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Can the component be activated?",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "element": {
+        "defaultValue": {
+          "value": "button"
+        },
+        "description": "The corresponding HTML element of the component.",
+        "name": "element",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ButtonElement",
+          "value": [
+            {
+              "value": "\"a\""
+            },
+            {
+              "value": "\"button\""
+            }
+          ]
+        }
+      },
+      "href": {
+        "defaultValue": null,
+        "description": "The URL of the page to navigate to, if element is set to \"a\".",
+        "name": "href",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "target": {
+        "defaultValue": null,
+        "description": "The target on where to display the page navigated to, if element is set to \"a\".",
+        "name": "target",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "rel": {
+        "defaultValue": null,
+        "description": "The relationship of the current page to the referred page in \"href\", if element is set to \"a\".",
+        "name": "rel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "type": {
+        "defaultValue": {
+          "value": "button"
+        },
+        "description": "The type of the button, if element is set to \"button\".",
+        "name": "type",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ButtonType",
+          "value": [
+            {
+              "value": "\"button\""
+            },
+            {
+              "value": "\"submit\""
+            },
+            {
+              "value": "\"reset\""
+            }
+          ]
+        }
+      },
+      "border": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Does the button display a border?",
+        "name": "border",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "onClick": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component is clicked.",
+        "name": "onClick",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "onFocus": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component receives focus.",
+        "name": "onFocus",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "onBlur": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component loses focus.",
+        "name": "onBlur",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      }
+    }
+  },
+  {
+    "description": "Component for values that have an on/off state.",
+    "displayName": "Checkbox",
+    "methods": [],
+    "props": {
+      "onFocus": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component receives focus.",
+        "name": "onFocus",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "onBlur": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component loses focus.",
+        "name": "onBlur",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "label": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Short textual description indicating the nature of the component's value.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "Name of the form field associated with this component.",
+        "name": "name",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component is toggled.",
+        "name": "onChange",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      }
+    }
+  },
+  {
+    "description": "Component for displaying graphics.",
+    "displayName": "Icon",
+    "methods": [],
+    "props": {
+      "size": {
+        "defaultValue": {
+          "value": "1.5rem"
+        },
+        "description": "Size of the icon. This controls both the width and the height.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "ReactText"
+        }
+      },
+      "label": {
+        "defaultValue": {
+          "value": null
+        },
+        "description": "Describe of what the component represents.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "Name of the icon to display.",
+        "name": "name",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "weight": {
+        "defaultValue": {
+          "value": "0.125rem"
+        },
+        "description": "Width of the icon's strokes.",
+        "name": "weight",
+        "required": false,
+        "type": {
+          "name": "ReactText"
+        }
+      }
+    }
+  },
+  {
+    "description": "Component for values which are to be selected from a few list of options.",
+    "displayName": "RadioButton",
+    "methods": [],
+    "props": {
+      "onFocus": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component receives focus.",
+        "name": "onFocus",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "onBlur": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component loses focus.",
+        "name": "onBlur",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "label": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Short textual description indicating the nature of the component's value.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "Group where the component belongs.",
+        "name": "name",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component is selected.",
+        "name": "onChange",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      }
+    }
+  },
+  {
+    "description": "Component for selecting values from a larger number of options.",
+    "displayName": "Select",
+    "methods": [],
+    "props": {
+      "size": {
+        "defaultValue": {
+          "value": "medium"
+        },
+        "description": "Size of the component.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "Size",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Is the component active?",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "border": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Does the button display a border?",
+        "name": "border",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "onFocus": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component receives focus.",
+        "name": "onFocus",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "onBlur": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component loses focus.",
+        "name": "onBlur",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "label": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Short textual description indicating the nature of the component's value.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "Name of the form field associated with this component.",
+        "name": "name",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component changes value.",
+        "name": "onChange",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "hint": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Short textual description as guidelines for valid input values.",
+        "name": "hint",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "multiple": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Can multiple values be selected?",
+        "name": "multiple",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      }
+    }
+  },
+  {
+    "description": "Component for inputting numeric values in a graphical manner.\n\nThe component is styled using client-side scripts. When the component is rendered server-side,\nthe component falls back into the original `<input type=\"range\">` element.",
+    "displayName": "Slider",
+    "methods": [],
+    "props": {
+      "disabled": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Is the component active?",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "label": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Short textual description indicating the nature of the component's value.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component changes value.",
+        "name": "onChange",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "orientation": {
+        "defaultValue": {
+          "value": "horizontal"
+        },
+        "description": "The component orientation.",
+        "name": "orientation",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "Orientation",
+          "value": [
+            {
+              "value": "\"vertical\""
+            },
+            {
+              "value": "\"horizontal\""
+            }
+          ]
+        }
+      },
+      "length": {
+        "defaultValue": {
+          "value": "16rem"
+        },
+        "description": "CSS size for the component length.",
+        "name": "length",
+        "required": false,
+        "type": {
+          "name": "ReactText"
+        }
+      }
+    }
+  },
+  {
+    "description": "Component for inputting textual values.",
+    "displayName": "TextInput",
+    "methods": [],
+    "props": {
+      "size": {
+        "defaultValue": {
+          "value": "medium"
+        },
+        "description": "Size of the component.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "Size",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Is the component active?",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "border": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Does the button display a border?",
+        "name": "border",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "onFocus": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component receives focus.",
+        "name": "onFocus",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "onBlur": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component loses focus.",
+        "name": "onBlur",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "label": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Short textual description indicating the nature of the component's value.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Event handler triggered when the component changes value.",
+        "name": "onChange",
+        "required": false,
+        "type": {
+          "name": "(...args: any[]) => any"
+        }
+      },
+      "hint": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Short textual description as guidelines for valid input values.",
+        "name": "hint",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "indicator": {
+        "defaultValue": {
+          "value": null
+        },
+        "description": "Additional description, usually graphical, indicating the nature of the component's value.",
+        "name": "indicator",
+        "required": false,
+        "type": {
+          "name": "ReactNodeLike"
+        }
+      },
+      "multiline": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Should the component accept multiple lines of input?",
+        "name": "multiline",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "autoResize": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Should the component resize itself to show all its value?",
+        "name": "autoResize",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "placeholder": {
+        "defaultValue": {
+          "value": ""
+        },
+        "description": "Placeholder of the component when there is no value.",
+        "name": "placeholder",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "rows": {
+        "defaultValue": {
+          "value": 3
+        },
+        "description": "How many rows should the component display if it accepts multiline input?",
+        "name": "rows",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "alternate": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "Should the component be displayed with an alternate appearance?",
+        "name": "alternate",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      }
+    }
+  }
+]

packages/react-common-docs/src/pages/_app.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import sidebar from '../sidebar.json'
+import brand from '../../brand'
+import Sidebar from '../components/Sidebar/Sidebar'
+import '../../public/global.css'
+import '../../public/theme/dark.css'
+
+const Container = styled('div')({
+  maxWidth: 720,
+  margin: '0 auto',
+  padding: '0 1rem',
+  boxSizing: 'border-box',
+})
+
+type AppProps = {
+  Component: React.ElementType,
+  pageProps: Record<string, unknown>,
+}
+
+const App: React.FC<AppProps> = ({
+  Component,
+  pageProps,
+}) => (
+  <React.Fragment>
+    <Sidebar
+      brand={brand}
+      data={sidebar}
+    />
+    <main>
+      <Container>
+        <Component
+          {...pageProps}
+        />
+      </Container>
+    </main>
+  </React.Fragment>
+)
+
+export default App

packages/react-common-docs/src/pages/_document.tsx

@@ -0,0 +1,45 @@
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            <link rel="stylesheet" href="/global.css" />
+            <link rel="stylesheet" title="Dark" href="/theme/dark.css" />
+            <link rel="alternate stylesheet" title="Light" href="/theme/light.css" />
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+
+  render() {
+    return (
+      <Html lang="en-PH">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}

lib/components/Button/Button.mdx → packages/react-common-docs/src/pages/components/Button.mdx

@@ -1,23 +1,26 @@
 ---
-name: Button
-route: /components/button
-menu: Components
+title: Button
 ---
 
-import { Playground, Props } from 'docz'
-import Button from './Button'
+import { Button } from '../../../../react-common/src'
+import Playground from '../../components/Playground/Playground'
+import Props from '../../components/Props/Props'
+import Header from '../../components/Header/Header'
 
-# Button
+<Header of="Button" />
 
-Component for performing an action upon activation (e.g. when clicked).
-
-<Playground>
-  <Button>Perform Action</Button>
-</Playground>
+<Playground
+  code={`
+    <Button>
+      Perform Action
+    </Button>
+  `}
+  components={{ Button }}
+/>
 
 ## Props
 
-<Props of={Button} />
+<Props of="Button" />
 
 ## Usage Notes
 

packages/react-common-docs/src/pages/components/Checkbox.mdx

@@ -0,0 +1,26 @@
+---
+name: Checkbox
+---
+
+import { Checkbox } from '../../../../react-common/src'
+import Playground from '../../components/Playground/Playground'
+import Props from '../../components/Props/Props'
+import Header from '../../components/Header/Header'
+
+<Header of="Checkbox" />
+
+<Playground
+  components={{ Checkbox }}
+  code={`
+    <Checkbox label="Accept Terms" />
+  `}
+/>
+
+## Props
+
+<Props of="Checkbox" />
+
+## See Also
+
+- [Select](./Select) for a similar component suitable for selecting more values.
+- [RadioButton](./RadioButton) for a similar component on selecting a single value among very few choices.

packages/react-common-docs/src/pages/components/Icon.mdx

@@ -0,0 +1,21 @@
+---
+name: Icon
+---
+
+import { Icon } from '../../../../react-common/src'
+import Playground from '../../components/Playground/Playground'
+import Props from '../../components/Props/Props'
+import Header from '../../components/Header/Header'
+
+<Header of="Icon" />
+
+<Playground
+  components={{ Icon }}
+  code={`
+    <Icon name="check" label="OK" size="1.5rem" weight={0.125} />
+  `}
+/>
+
+## Props
+
+<Props of="Icon" />

packages/react-common-docs/src/pages/components/RadioButton.mdx

@@ -0,0 +1,33 @@
+---
+name: RadioButton
+---
+
+import { RadioButton } from '../../../../react-common/src'
+import Playground from '../../components/Playground/Playground'
+import Props from '../../components/Props/Props'
+import Header from '../../components/Header/Header'
+
+<Header of="RadioButton" />
+
+<Playground
+  components={{ RadioButton }}
+  code={`
+    <div style={{ display: 'grid', gap: '1rem', }}>
+      <div>
+        <RadioButton name="flavor" label="Chocolate" />
+      </div>
+      <div>
+        <RadioButton name="flavor" label="Vanilla" />
+      </div>
+    </div>
+  `}
+/>
+
+## Props
+
+<Props of="RadioButton" />
+
+## See Also
+
+- [Checkbox](./Checkbox) for a similar component on selecting values among very few choices.
+- [Select](./Select) for a similar component suitable for selecting more values.

packages/react-common-docs/src/pages/components/Select.mdx

@@ -0,0 +1,46 @@
+---
+name: Select
+---
+
+import { Select } from '../../../../react-common/src'
+import Playground from '../../components/Playground/Playground'
+import Props from '../../components/Props/Props'
+import Header from '../../components/Header/Header'
+
+<Header of="Select" />
+
+<Playground
+  components={{ Select }}
+  code={`
+    <Select>
+      <optgroup
+        label="Fruits"
+      >
+        <option value="mango">Mango</option>
+        <option value="strawberry">Strawberry</option>
+        <option value="blueberry">Blueberry</option>
+      </optgroup>
+      <optgroup
+        label="Classic"
+      >
+        <option value="chocolate">Chocolate</option>
+        <option value="vanilla">Vanilla</option>
+      </optgroup>
+    </Select>
+  `}
+/>
+
+## Props
+
+<Props of="Select" />
+
+## Usage Notes
+
+The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
+To use the component together with layouts, see [TextInput](./TextInput) for examples. Both `Select` and
+`TextInput` have similar strategies on usage with layouts.
+
+## See Also
+
+- [Checkbox](./Checkbox) for a similar component on selecting values among very few choices.
+- [RadioButton](./RadioButton) for a similar component on selecting a single value among very few choices.

packages/react-common-docs/src/pages/components/Slider.mdx

@@ -0,0 +1,25 @@
+---
+name: Slider
+---
+
+import { Slider } from '../../../../react-common/src'
+import Playground from '../../components/Playground/Playground'
+import Props from '../../components/Props/Props'
+import Header from '../../components/Header/Header'
+
+<Header of="Slider" />
+
+<Playground
+  components={{ Slider }}
+  code={`
+    <Slider />
+  `}
+/>
+
+## Props
+
+<Props of="Slider" />
+
+## See Also
+
+- [Reach UI Slider](//reacttraining.com/reach-ui/slider/#sliderinput) for the client-side implementation.

packages/react-common-docs/src/pages/components/TextInput.mdx

@@ -0,0 +1,82 @@
+---
+name: TextInput
+---
+
+import { TextInput } from '../../../../react-common/src'
+import Playground from '../../components/Playground/Playground'
+import Props from '../../components/Props/Props'
+import Header from '../../components/Header/Header'
+
+<Header of="TextInput" />
+
+<Playground
+  components={{ TextInput }}
+  code={`
+    <TextInput
+      label="Username"
+      placeholder="johndoe"
+      hint="the name you use to log in"
+    />
+  `}
+/>
+
+## Props
+
+<Props of="TextInput" />
+
+## Usage Notes
+
+The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
+To use the component together with layouts, see the following examples.
+
+### Inline
+
+The components are surrounded by `inline-block` elements. These surrounding elements have specified widths, which could
+act as guide to the user on how long the expected input values are.
+
+<Playground
+  components={{ TextInput }}
+  code={`
+    <form>
+      I am <span style={{ display: 'inline-block', width: '16rem', verticalAlign: 'bottom', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '24rem', verticalAlign: 'bottom', }}><TextInput label="Address" hint="city, state and country" /></span>.
+    </form>
+  `}
+/>
+
+### Grid
+
+It is advisable to put surrounding elements instead of the `TextInput` components themselves as children of the
+element specified as `grid`. This is to be able to add complementing content to the components, if for example there are
+some content that is best displayed outside the component instead of putting in the `hint` prop.
+
+<Playground
+  components={{ TextInput }}
+  code={`
+    <form
+      style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }}
+    >
+      <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
+        <TextInput alternate border label="Address line 1" hint="unit/house number, building" />
+      </div>
+      <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
+        <TextInput alternate border label="Address line 2" hint="street, area" />
+      </div>
+      <div>
+        <TextInput alternate border size="large" label="City/Town" />
+      </div>
+      <div>
+        <TextInput alternate border size="large" label="State/Province" />
+      </div>
+      <div>
+        <TextInput alternate border size="large" label="Country" hint="abbreviations are accepted" />
+        <small>
+          Consult the <a href="#">fees table</a> for shipping fee details.
+        </small>
+      </div>
+    </form>
+  `}
+/>
+
+## See Also
+
+- [Select](./Select) for a graphically-similar component suitable for selecting more values.

packages/react-common-docs/src/pages/index.md

@@ -0,0 +1,91 @@
+# Tesseract Web - React Common
+
+Common front-end components for Web using the [Tesseract design system](https://make.modal.sh/tesseract/design), written for [React](https://reactjs.org).
+
+Package:
+
+[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
+[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)
+
+Dependencies:
+
+[![React](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=react&kind=peerDependencies)](https://github.com/facebook/react)
+[![Styled Components](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=styled-components&kind=peerDependencies)](https://github.com/styled-components/styled-components)
+[![TypeScript](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=typescript&kind=devDependencies)](https://github.com/microsoft/typescript)
+[![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest)
+[![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup)
+
+## Installation
+
+Since this package resides in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/), you may need to
+adjust configuration in your chosen package manager.
+
+With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:
+
+```
+"@tesseract-design:registry" "https://js.pack.modal.sh/"
+```
+
+Then, install the package by running the following command:
+
+```shell script
+yarn add @tesseract-design/react-common
+```
+
+## Usage
+
+The package includes components as named exports. Simply import the components you need individually or use a namespace
+import, like so:
+
+```jsx harmony
+import * as React from 'react'
+import ReactDOM from 'react-dom'
+import * as T from '@tesseract-design/react-common'
+
+const LoginForm = etcProps => (
+  <form
+    {...etcProps}
+  >
+    <fieldset>
+      <legend>
+        Log In
+      </legend>
+      <div>
+        <T.TextInput
+          block
+          label="Username"
+        />
+      </div>
+      <div>
+        <T.TextInput
+          block
+          type="password"
+          label="Password"
+        />
+      </div>
+      <div>
+        <T.Button>
+          Log In
+        </T.Button>
+      </div>
+    </fieldset>
+  </form>
+)
+
+const mountNode = window.document.createElement('div')
+
+ReactDOM.render(
+  <LoginForm />,
+  mountNode,
+)
+
+window.document.body.appendChild(mountNode)
+```
+
+Detailed usage guides can be found in the [Tesseract Design - React Common documentation](https://make.modal.sh/tesseract/web/react/common).
+
+## TypeScript
+
+The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
+compiled source.
+

docs/theming.md → packages/react-common-docs/src/pages/theming.md

@@ -1,6 +1,5 @@
 ---
 name: Theming
-route: /theming
 ---
 
 # Theming

packages/react-common-docs/src/sidebar.json

@@ -0,0 +1,18 @@
+{
+  "nav": [
+    {
+      "Theming": "/theming"
+    },
+    {
+      "Components": [
+        { "Button": "/components/Button" },
+        { "Checkbox": "/components/Checkbox" },
+        { "Icon": "/components/Icon" },
+        { "RadioButton": "/components/RadioButton" },
+        { "Select": "/components/Select" },
+        { "Slider": "/components/Slider" },
+        { "TextInput": "/components/TextInput" }
+      ]
+    }
+  ]
+}

packages/react-common-docs/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "declaration": true,
+    "declarationDir": "./dist",
+    "sourceMap": true
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "utilities/**/*",
+    "jest.setup.ts"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}

lib/components/Button/Button.test.tsx → packages/react-common/src/components/Button/Button.test.tsx

@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
-/// <reference path="../../../utilities/jest/extensions.ts" />
+/// <reference path="../../../../../utilities/jest/extensions.ts" />
 
 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'

lib/components/Button/Button.tsx → packages/react-common/src/components/Button/Button.tsx

@@ -172,6 +172,9 @@ const propTypes = {
 
 type Props = PropTypes.InferProps<typeof propTypes>
 
+/**
+ * Component for performing an action upon activation (e.g. when clicked).
+ */
 const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, Props>(
   (
     {

lib/components/Checkbox/Checkbox.test.tsx → packages/react-common/src/components/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
-/// <reference path="../../../utilities/jest/extensions.ts" />
+/// <reference path="../../../../../utilities/jest/extensions.ts" />
 
 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'

lib/components/Icon/Icon.test.tsx → packages/react-common/src/components/Icon/Icon.test.tsx

@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
-/// <reference path="../../../utilities/jest/extensions.ts" />
+/// <reference path="../../../../../utilities/jest/extensions.ts" />
 
 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'

lib/components/Icon/Icon.tsx → packages/react-common/src/components/Icon/Icon.tsx

@@ -43,6 +43,14 @@ const propTypes = {
 
 type Props = PropTypes.InferProps<typeof propTypes>
 
+/**
+ * Component for displaying graphics.
+ * @param name
+ * @param weight
+ * @param size
+ * @param label
+ * @constructor
+ */
 const Icon: React.FC<Props> = ({ name, weight = '0.125rem', size = '1.5rem', label = name }) => {
   const iconName = pascalCase(name, { transform: pascalCaseTransformMerge })
   const { [iconName as keyof typeof FeatherIcon]: TheIcon = null } = FeatherIcon

lib/components/RadioButton/RadioButton.test.tsx → packages/react-common/src/components/RadioButton/RadioButton.test.tsx

@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
-/// <reference path="../../../utilities/jest/extensions.ts" />
+/// <reference path="../../../../../utilities/jest/extensions.ts" />
 
 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'

lib/components/Select/Select.test.tsx → packages/react-common/src/components/Select/Select.test.tsx

@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
-/// <reference path="../../../utilities/jest/extensions.ts" />
+/// <reference path="../../../../../utilities/jest/extensions.ts" />
 
 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'

lib/components/Select/Select.tsx → packages/react-common/src/components/Select/Select.tsx

@@ -218,6 +218,9 @@ const propTypes = {
 
 type Props = PropTypes.InferProps<typeof propTypes>
 
+/**
+ * Component for selecting values from a larger number of options.
+ */
 const Select = React.forwardRef<HTMLSelectElement, Props>(
   (
     {

lib/components/Slider/Slider.test.tsx → packages/react-common/src/components/Slider/Slider.test.tsx

@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
-/// <reference path="../../../utilities/jest/extensions.ts" />
+/// <reference path="../../../../../utilities/jest/extensions.ts" />
 
 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'

lib/components/TextInput/TextInput.test.tsx → packages/react-common/src/components/TextInput/TextInput.test.tsx

@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
-/// <reference path="../../../utilities/jest/extensions.ts" />
+/// <reference path="../../../../../utilities/jest/extensions.ts" />
 
 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'

lib/components/TextInput/TextInput.tsx → packages/react-common/src/components/TextInput/TextInput.tsx

@@ -4,6 +4,8 @@ import styled from 'styled-components'
 import stringify from '../../services/stringify'
 import { Size, SizeMap } from '../../services/utilities'
 
+// TODO implement web-client text inputs!
+
 const MIN_HEIGHTS: SizeMap<string | number> = {
   small: '2.5rem',
   medium: '3rem',
@@ -60,7 +62,6 @@ const LabelWrapper = styled('span')({
   position: 'absolute',
   top: 0,
   left: 0,
-  paddingLeft: '0.5rem',
   fontSize: '0.85em',
   maxWidth: '100%',
   overflow: 'hidden',
@@ -118,7 +119,6 @@ const Input = styled('input')({
   position: 'relative',
   border: 0,
   borderRadius: 'inherit',
-  paddingLeft: '1rem',
   margin: 0,
   font: 'inherit',
   minHeight: '4rem',
@@ -148,7 +148,6 @@ const TextArea = styled('textarea')({
   position: 'relative',
   border: 0,
   borderRadius: 'inherit',
-  paddingLeft: '1rem',
   margin: 0,
   font: 'inherit',
   minHeight: '4rem',
@@ -166,9 +165,7 @@ TextArea.displayName = 'textarea'
 const HintWrapper = styled('span')({
   boxSizing: 'border-box',
   position: 'absolute',
-  bottom: 0,
   left: 0,
-  paddingLeft: '1rem',
   fontSize: '0.85em',
   opacity: 0.5,
   maxWidth: '100%',
@@ -250,10 +247,17 @@ const propTypes = {
    * Event handler triggered when the component loses focus.
    */
   onBlur: PropTypes.func,
+  /**
+   * Should the component be displayed with an alternate appearance?
+   */
+  alternate: PropTypes.bool,
 }
 
 type Props = PropTypes.InferProps<typeof propTypes>
 
+/**
+ * Component for inputting textual values.
+ */
 const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props>(
   (
     {
@@ -270,6 +274,7 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
       onChange,
       onFocus,
       onBlur,
+      alternate = false,
       ...etcProps
     },
     ref,
@@ -283,6 +288,7 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
       <CaptureArea>
         <LabelWrapper
           style={{
+            paddingLeft: alternate ? '0.5rem' : undefined,
             paddingTop: LABEL_VERTICAL_PADDING_SIZES[size!],
             paddingBottom: LABEL_VERTICAL_PADDING_SIZES[size!],
             paddingRight: indicator ? MIN_HEIGHTS[size!] : '0.5rem',
@@ -306,9 +312,10 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
               height: `calc(${MIN_HEIGHTS[size!]} * ${rows})`,
               fontSize: INPUT_FONT_SIZES[size!],
               minHeight: MIN_HEIGHTS[size!],
-              paddingTop: VERTICAL_PADDING_SIZES[size!],
+              paddingTop: alternate ? VERTICAL_PADDING_SIZES[size!] : `calc(${SECONDARY_TEXT_SIZES[size!]} * 2)`,
               paddingBottom: VERTICAL_PADDING_SIZES[size!],
-              paddingRight: indicator ? MIN_HEIGHTS[size!] : '1rem',
+              paddingRight: indicator ? MIN_HEIGHTS[size!] : (alternate ? '1rem' : undefined),
+              paddingLeft: alternate ? '1rem' : undefined,
             }}
           />
         )}
@@ -322,9 +329,11 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
             ref={ref as React.Ref<HTMLInputElement>}
             disabled={disabled!}
             style={{
+              paddingLeft: alternate ? '1rem' : undefined,
               fontSize: INPUT_FONT_SIZES[size!],
               minHeight: MIN_HEIGHTS[size!],
-              paddingRight: indicator ? MIN_HEIGHTS[size!] : '1rem',
+              paddingTop: alternate ? undefined : `calc(${SECONDARY_TEXT_SIZES[size!]} * 2)`,
+              paddingRight: indicator ? MIN_HEIGHTS[size!] : (alternate ? '1rem' : undefined),
             }}
           />
         )}
@@ -333,6 +342,9 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
       {stringify(hint).length > 0 && (
         <HintWrapper
           style={{
+            top: alternate ? undefined : '0.75rem',
+            bottom: alternate ? 0 : undefined,
+            paddingLeft: alternate ? '1rem' : undefined,
             paddingTop: LABEL_VERTICAL_PADDING_SIZES[size!],
             paddingBottom: LABEL_VERTICAL_PADDING_SIZES[size!],
             paddingRight: indicator ? MIN_HEIGHTS[size!] : '1rem',

lib/index.test.ts → packages/react-common/src/index.test.ts

@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
-/// <reference path="../utilities/jest/extensions.ts" />
+/// <reference path="../../../utilities/jest/extensions.ts" />
 
 import * as T from './index'
 

packages/react-common/src/services/isEmpty.test.ts

@@ -0,0 +1,40 @@
+import * as fc from 'fast-check'
+import isEmpty from './isEmpty'
+
+it('should exist', () => {
+  expect(isEmpty).toBeDefined()
+})
+
+it('should be a function', () => {
+  expect(typeof isEmpty).toBe('function')
+})
+
+it('should accept 1 argument', () => {
+  expect(isEmpty).toHaveLength(1)
+})
+
+it('should return a boolean value', () => {
+  fc.assert(
+    fc.property(fc.anything(), (v) => {
+      expect(typeof isEmpty(v)).toBe('boolean')
+    }),
+  )
+})
+
+describe('on arguments', () => {
+  it('should return `true` on an argument with value of `undefined`', () => {
+    expect(isEmpty(undefined)).toBe(true)
+  })
+
+  it('should return `true` on an argument with value of `null`', () => {
+    expect(isEmpty(null)).toBe(true)
+  })
+
+  it('should return `false` on an argument with value that is neither `undefined` nor `null`', () => {
+    fc.assert(
+      fc.property(fc.anything().filter((v) => typeof v !== 'undefined' && v !== null), (v) => {
+        expect(isEmpty(v)).toBe(false)
+      }),
+    )
+  })
+})

lib/services/stringify.test.ts → packages/react-common/src/services/stringify.test.ts

@@ -1,5 +1,5 @@
 import * as fc from 'fast-check'
-import * as fcArb from '../../utilities/fast-check/arbitraries'
+import * as fcArb from '../../../../utilities/fast-check/arbitraries'
 import stringify from './stringify'
 
 it('should exist', () => {

plopfile.js

@@ -1,4 +1,3 @@
-const testName = require('./plop/helpers/testName.js')
 module.exports = plop => {
   plop.setGenerator('component', {
     description: 'Creates a component.',
@@ -21,9 +20,15 @@ module.exports = plop => {
     actions: [
       {
         type: 'addMany',
-        templateFiles: 'plop/templates/component/*',
-        base: 'plop/templates/component',
-        destination: 'lib/components/{{pascalCase name}}',
+        templateFiles: 'plop/templates/react-common/component/*',
+        base: 'plop/templates/react-common/component',
+        destination: 'packages/react-common/src/components/{{pascalCase name}}',
+      },
+      {
+        type: 'addMany',
+        templateFiles: 'plop/templates/react-common-docs/component/*',
+        base: 'plop/templates/react-common-docs/component',
+        destination: 'packages/react-common-docs/src/pages/components',
       },
     ],
   })

rollup.config.js

@@ -4,7 +4,7 @@ import typescript from '@rollup/plugin-typescript'
 
 import pkg from './package.json'
 
-const ENTRY_POINT = './lib/index.ts'
+const ENTRY_POINT = './packages/react-common/src/index.ts'
 
 export default {
   input: ENTRY_POINT,