diff --git a/.gitignore b/.gitignore
index d5e3b11..2659df7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -66,6 +66,4 @@ typings/
.env
.next
dist/
-.gitignore
-.docz/
-/docz.config.js
+.next/
diff --git a/README.md b/README.md
deleted file mode 100644
index c173293..0000000
--- a/README.md
+++ /dev/null
@@ -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:
-
-[](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
-[](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)
-
-Dependencies:
-
-[](https://github.com/facebook/react)
-[](https://github.com/styled-components/styled-components)
-[](https://github.com/microsoft/typescript)
-[](https://github.com/facebook/jest)
-[](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 => (
-
-)
-
-const mountNode = window.document.createElement('div')
-
-ReactDOM.render(
-
-
-
-## Props
-
-
-
-
-## Props
-
-
-
-
-
-## Props
-
-
-
-
- Mango
- Strawberry
- Blueberry
-
-
- Chocolate
- Vanilla
-
-
-
-
-## Props
-
-
-
-
-## Props
-
-
-
-
-## Props
-
-
-
-
-
-### 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.
-
-
-
-
-
-## See Also
-
--
+ {name}
+
+
+ v.{pkg.version}
+
+
+ )
+}
+
+export default Brand
diff --git a/packages/react-common-docs/next-env.d.ts b/packages/react-common-docs/next-env.d.ts
new file mode 100644
index 0000000..6f84a8d
--- /dev/null
+++ b/packages/react-common-docs/next-env.d.ts
@@ -0,0 +1,3 @@
+///
+
\ No newline at end of file
diff --git a/packages/react-common-docs/scripts/docgen b/packages/react-common-docs/scripts/docgen
new file mode 100755
index 0000000..78ebe5e
--- /dev/null
+++ b/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) => {
+
+ })
+})
diff --git a/packages/react-common-docs/src/components/Header/Header.tsx b/packages/react-common-docs/src/components/Header/Header.tsx
new file mode 100644
index 0000000..a0672f4
--- /dev/null
+++ b/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 (
+
+
+
+ {docs.displayName} | React Common
+
+
+ {docs.displayName}
+
+ {
+ unified()
+ .use(parse)
+ .use(remark2react)
+ .processSync(docs.description).result
+ }
+
+
+ )
+}
+
+export default Header
diff --git a/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx b/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx
new file mode 100644
index 0000000..c7ea6f7
--- /dev/null
+++ b/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(['icon', 'image']).isRequired,
+ alt: PropTypes.string,
+ id: PropTypes.string.isRequired,
+}
+
+type Props = PropTypes.InferProps
+
+const MenuGraphics: React.FC = ({
+ kind,
+ alt,
+ id,
+}) => {
+ switch (kind) {
+ case 'icon':
+ return (
+
+ {
+ data.map(d => (
+
+ )
+ }
+ if (typeof data === 'object') {
+ const [entry] = Object.entries(data)
+ const [key, value] = entry
+ if (Array.isArray(value)) {
+ return (
+
+
+ {key}
+
+ {
+ value.map(v => (
+
+ )
+ }
+ return (
+
+
+const NavLink = React.forwardRef((
+ {
+ enclosingComponent: EnclosingComponent = React.Fragment,
+ href,
+ title,
+ graphics,
+ subtitle,
+ indicator,
+ onClick,
+ },
+ ref
+) => (
+
+ {
+ graphics as object
+ && (
+
+
+ )
+ }
+
+
+ {title}
+
+ {
+ subtitle as string
+ && (
+
+ {subtitle}
+
+ )
+ }
+
+ {
+ indicator as string
+ && (
+
+
+ )
+ }
+
+
+))
+
+NavLink.propTypes = propTypes
+
+export default NavLink
diff --git a/packages/react-common-docs/src/components/Playground/Playground.tsx b/packages/react-common-docs/src/components/Playground/Playground.tsx
new file mode 100644
index 0000000..29071c6
--- /dev/null
+++ b/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 (
+
+ {
+ label
+ && (
+
+ {label}
+
+ )
+ }
+
+
+
+
+
+ )
+}
+
+export default Playground
diff --git a/packages/react-common-docs/src/components/Props/Props.tsx b/packages/react-common-docs/src/components/Props/Props.tsx
new file mode 100644
index 0000000..f932ee4
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ Name
+
+
+ Type
+
+
+ Default
+
+
+ Description
+
+
+
+
+ {
+ Object.entries(docs.props).map(([name, def]) => (
+
+
+
+ {def.required ? name : name + '?'}
+
+
+
+ {
+ def.type.name === 'enum'
+ && (
+
+ {def.type.value.map(v => v.value).join(' | ')}
+
+ )
+ }
+ {
+ def.type.name !== 'enum'
+ && (
+
+ {def.type.name}
+
+ )
+ }
+
+
+ {
+ def.defaultValue
+ && (
+
+ {JSON.stringify(def.defaultValue.value)}
+
+ )
+ }
+
+
+ {def.description}
+
+
+ ))
+ }
+
+
+ )
+}
+
+export default Props
diff --git a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..0d414c4
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+ {
+ theme === 'Dark'
+ && (
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Sidebar
diff --git a/packages/react-common-docs/src/docgen.json b/packages/react-common-docs/src/docgen.json
new file mode 100644
index 0000000..f4799ff
--- /dev/null
+++ b/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 `,
+}
+
+const App: React.FC = ({
+ Component,
+ pageProps,
+}) => (
+
+
+
+
+
+
+)
+
+export default App
diff --git a/packages/react-common-docs/src/pages/_document.tsx b/packages/react-common-docs/src/pages/_document.tsx
new file mode 100644
index 0000000..3c48a01
--- /dev/null
+++ b/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(
+
+
- Perform Action
-
+
+ Perform Action
+
+ `}
+ components={{ Button }}
+/>
## Props
-
+
+
+
+
+
+ `}
+/>
+
+## Props
+
+
+
+ Mango
+ Strawberry
+ Blueberry
+
+
+ Chocolate
+ Vanilla
+
+
+ `}
+/>
+
+## Props
+
+
+ I am
+
+
+
+
+
+
+
+
+
+
+
+ Consult the fees table for shipping fee details.
+
+
+/**
+ * Component for performing an action upon activation (e.g. when clicked).
+ */
const Button = React.forwardRef(
(
{
diff --git a/lib/components/Checkbox/Checkbox.test.tsx b/packages/react-common/src/components/Checkbox/Checkbox.test.tsx
similarity index 96%
rename from lib/components/Checkbox/Checkbox.test.tsx
rename to packages/react-common/src/components/Checkbox/Checkbox.test.tsx
index 2701bc2..8260f98 100644
--- a/lib/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-common/src/components/Checkbox/Checkbox.test.tsx
@@ -1,5 +1,5 @@
///
+/**
+ * Component for displaying graphics.
+ * @param name
+ * @param weight
+ * @param size
+ * @param label
+ * @constructor
+ */
const Icon: React.FC = ({ name, weight = '0.125rem', size = '1.5rem', label = name }) => {
const iconName = pascalCase(name, { transform: pascalCaseTransformMerge })
const { [iconName as keyof typeof FeatherIcon]: TheIcon = null } = FeatherIcon
diff --git a/lib/components/RadioButton/RadioButton.test.tsx b/packages/react-common/src/components/RadioButton/RadioButton.test.tsx
similarity index 96%
rename from lib/components/RadioButton/RadioButton.test.tsx
rename to packages/react-common/src/components/RadioButton/RadioButton.test.tsx
index 59ff9b3..b16f788 100644
--- a/lib/components/RadioButton/RadioButton.test.tsx
+++ b/packages/react-common/src/components/RadioButton/RadioButton.test.tsx
@@ -1,5 +1,5 @@
///
+/**
+ * Component for selecting values from a larger number of options.
+ */
const Select = React.forwardRef(
(
{
diff --git a/lib/components/Slider/Slider.test.tsx b/packages/react-common/src/components/Slider/Slider.test.tsx
similarity index 97%
rename from lib/components/Slider/Slider.test.tsx
rename to packages/react-common/src/components/Slider/Slider.test.tsx
index a710259..d9085d4 100644
--- a/lib/components/Slider/Slider.test.tsx
+++ b/packages/react-common/src/components/Slider/Slider.test.tsx
@@ -1,5 +1,5 @@
/// = {
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
+/**
+ * Component for inputting textual values.
+ */
const TextInput = React.forwardRef(
(
{
@@ -270,6 +274,7 @@ const TextInput = React.forwardRef
}
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 0 && (