Create in-house documentation scaffolding

Use create-next-app to bootstrap documentation.

package.json

@@ -1,69 +0,0 @@
-{
-  "name": "@tesseract-design/react-common",
-  "title": "React Common",
-  "org": "Tesseract Design",
-  "version": "0.3.0",
-  "description": "Common front-end components for Web using the Tesseract design system, written in React.",
-  "directories": {
-    "lib": "dist"
-  },
-  "main": "dist/index.js",
-  "types": "dist/packages/react-common/src/index.d.ts",
-  "repository": "https://code.modal.sh/tesseract-design/react-common.git",
-  "author": "TheoryOfNekomata <allan.crisostomo@outlook.com>",
-  "license": "MIT",
-  "private": false,
-  "bugs": {
-    "url": "https://code.modal.sh/tesseract-design/react-common/issues"
-  },
-  "devDependencies": {
-    "@babel/runtime": "^7.12.5",
-    "@rollup/plugin-typescript": "^5.0.2",
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^26.0.7",
-    "@types/jest-axe": "^3.5.0",
-    "@types/node": "^14.0.25",
-    "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.43",
-    "@types/react-is": "^16.7.1",
-    "@types/styled-components": "^5.1.1",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.1",
-    "fast-check": "1.22.1",
-    "jest": "^26.1.0",
-    "jest-axe": "3.4.0",
-    "jest-enzyme": "7.1.2",
-    "jest-extended": "0.11.5",
-    "plop": "2.6.0",
-    "prettier": "1.19.1",
-    "prop-types": "15.7.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "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"
-  },
-  "scripts": {
-    "prepublishOnly": "NODE_ENV=production rm -rf dist/ && rollup -c",
-    "test": "jest",
-    "build": "rm -rf dist/ && rollup -c",
-    "generate": "plop"
-  },
-  "peerDependencies": {
-    "prop-types": "15.7.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "styled-components": "5.1.0"
-  },
-  "dependencies": {
-    "@reach/slider": "^0.10.5",
-    "pascal-case": "3.1.1",
-    "react-feather": "2.0.3"
-  },
-  "homepage": "https://make.modal.sh/tesseract/web/react/common"
-}

packages/react-common-docs/bin/docs

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+
+const { promises } = require('fs')
+const path = require('path')
+const childProcess = require('child_process')
+const docgen = require('react-docgen-typescript')
+
+const main = async () => {
+  const configFilePath = path.resolve(process.cwd(), 'docs.config.json')
+  const docsConfigBuffer = await promises.readFile(configFilePath)
+  const docsConfigString = docsConfigBuffer.toString('utf-8')
+  const docsConfig = JSON.parse(docsConfigString)
+
+  try {
+    //await promises.mkdir('.docs')
+    //await childProcess.exec('npx create-next-app dummy-docs --ts')
+    //await promises.rmdir('.docs')
+    //await promises.rename('dummy-docs', '.docs')
+  } catch {
+
+  }
+
+  const getSources = (nav) => nav.reduce(
+    (sourcesToParse, navItem) => {
+      if (navItem?.source?.endsWith('.tsx')) {
+        return [
+          ...sourcesToParse,
+          navItem,
+          ...(Array.isArray(navItem?.children) ? getSources(navItem.children) : []),
+        ]
+      }
+
+      return [
+        ...sourcesToParse,
+        ...(Array.isArray(navItem?.children) ? getSources(navItem.children) : []),
+      ]
+    },
+    []
+  )
+
+  const sources = getSources(docsConfig.nav)
+  const docgenInfo = docgen.parse(
+    sources.map(s => path.resolve(process.cwd(), s.source)),
+    {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: (prop) => {
+        if (prop.declarations !== undefined && prop.declarations.length > 0) {
+          const hasPropAdditionalDescription = prop.declarations.find((declaration) => {
+            return !declaration.fileName.includes("node_modules");
+          });
+
+          return Boolean(hasPropAdditionalDescription);
+        }
+
+        return true;
+      },
+    }
+  )
+  const sourcesWithDocgenInfo = sources.map((s, i) => ({
+    ...s,
+    docgen: docgenInfo[i],
+  }))
+
+  console.log(JSON.stringify(sourcesWithDocgenInfo, null, 2))
+}
+
+void main()

packages/react-common-docs/brand.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import pkg from '../../package.json'
+import pkg from '../../../package.json'
 
 const Base = styled('div')({
   position: 'relative',

packages/react-common-docs/package.json

@@ -1,30 +1,39 @@
 {
-  "name": "react-common-docs",
+  "name": "@tesseract-design/react-common-docs",
   "version": "0.1.0",
   "private": true,
+  "bin": {
+    "docs": "bin/docs"
+  },
   "scripts": {
-    "predev": "./scripts/docgen",
+    "predev": "scripts/docgen",
     "dev": "next dev",
-    "prebuild": "./scripts/docgen",
+    "prebuild": "scripts/docgen",
     "build": "next build",
-    "prestart": "./scripts/docgen",
+    "prestart": "scripts/docgen",
     "start": "next start",
-    "docgen": "./scripts/docgen"
+    "docgen": "scripts/docgen"
   },
   "resolutions": {
-    "styled-components": "file:./../../node_modules/styled-components"
+    "styled-components": "file:../react-common/node_modules/styled-components",
+    "react": "file:../react-common/node_modules/react",
+    "react-dom": "file:../react-common/node_modules/react-dom"
   },
   "dependencies": {
     "@mdx-js/loader": "^1.6.19",
+    "chokidar": "^3.5.2",
     "next": "10.0.1",
     "next-mdx-frontmatter": "^0.0.3",
     "pascal-case": "^3.1.1",
     "prism-react-renderer": "^1.1.1",
     "prismjs": "^1.22.0",
-    "react-docgen-typescript": "^1.20.5",
     "react-live": "^2.2.3",
     "remark-parse": "^9.0.0",
     "remark-react": "^8.0.0",
     "unified": "^9.2.0"
+  },
+  "devDependencies": {
+    "react-docgen-typescript": "^2.1.0",
+    "typescript": "^4.3.5"
   }
 }

packages/react-common-docs/scripts/docgen

@@ -13,8 +13,16 @@ fs.readdir(componentsPath, (err, dir) => {
     {
       shouldExtractLiteralValuesFromEnum: true,
       shouldRemoveUndefinedFromOptional: true,
-      propFilter: {
-        skipPropsWithName: ['key', 'ref'],
+      propFilter: (prop) => {
+        if (prop.declarations !== undefined && prop.declarations.length > 0) {
+          const hasPropAdditionalDescription = prop.declarations.find((declaration) => {
+            return !declaration.fileName.includes("node_modules");
+          });
+
+          return Boolean(hasPropAdditionalDescription);
+        }
+
+        return true;
       },
     }
   )

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

@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import sidebar from '../sidebar.json'
 import brand from '../../brand'
 import Sidebar from '../components/Sidebar/Sidebar'
-import pkg from '../../../../package.json'
+import pkg from '../../../../../package.json'
 import CodeBlock from '../components/CodeBlock/CodeBlock'
 
 const Container = styled('div')({

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

@@ -1,6 +1,6 @@
 import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
-import pkg from '../../../../package.json'
+import pkg from '../../../../../package.json'
 import config from '../../next.config'
 
 const publicUrl = process.env.NODE_ENV === 'production' ? pkg.homepage : config.basePath

packages/react-common-docs/yarn.lock

@@ -1538,6 +1538,14 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1648,10 +1656,10 @@ babel-plugin-extract-import-names@1.6.22:
   dependencies:
     "@babel/helper-plugin-utils" "7.10.4"
 
-"babel-plugin-styled-components@>= 1":
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9"
-  integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==
+"babel-plugin-styled-components@>= 1.12.0":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d"
+  integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-module-imports" "^7.0.0"
@@ -2130,6 +2138,21 @@ chokidar@^3.4.1:
   optionalDependencies:
     fsevents "~2.1.2"
 
+chokidar@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -3107,6 +3130,11 @@ fsevents@~2.1.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -3165,6 +3193,13 @@ glob-parent@~5.1.0:
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -3907,7 +3942,7 @@ lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
-loose-envify@^1.0.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5060,10 +5095,17 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-docgen-typescript@^1.20.5:
-  version "1.20.5"
-  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.20.5.tgz#fb8d78a707243498436c2952bd3f6f488a68d4f3"
-  integrity sha512-AbLGMtn76bn7SYBJSSaKJrZ0lgNRRR3qL60PucM5M4v/AXyC8221cKBXW5Pyt9TfDRfe+LDnPNlg7TibxX0ovA==
+react-docgen-typescript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.1.0.tgz#20db64a7fd62e63a8a9469fb4abd90600878cbb2"
+  integrity sha512-7kpzLsYzVxff//HUVz1sPWLCdoSNvHD3M8b/iQLdF8fgf7zp26eVysRrAUSxiAT4yQv2zl09zHjJEYSYNxQ8Jw==
+
+"react-dom@file:../react-common/node_modules/react-dom":
+  version "17.0.2"
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
 
 react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
@@ -5093,6 +5135,12 @@ react-simple-code-editor@^0.10.0:
   resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"
   integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==
 
+"react@file:../react-common/node_modules/react":
+  version "17.0.2"
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -5138,6 +5186,13 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -5421,6 +5476,14 @@ sass-loader@10.0.2:
     schema-utils "^2.7.1"
     semver "^7.3.2"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@2.7.1, schema-utils@^2.6.6, schema-utils@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@@ -5830,15 +5893,15 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-"styled-components@file:./../../node_modules/styled-components":
-  version "5.1.0"
+"styled-components@file:../react-common/node_modules/styled-components":
+  version "5.3.0"
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"
     "@emotion/is-prop-valid" "^0.8.8"
     "@emotion/stylis" "^0.8.4"
     "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1"
+    babel-plugin-styled-components ">= 1.12.0"
     css-to-react-native "^3.0.0"
     hoist-non-react-statics "^3.0.0"
     shallowequal "^1.1.0"
@@ -6122,6 +6185,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
 ua-parser-js@^0.7.18:
   version "0.7.23"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.23.tgz#704d67f951e13195fbcd3d78818577f5bc1d547b"

packages/react-common/.gitignore

@@ -105,3 +105,4 @@ dist
 .tern-port
 
 .npmrc
+.docs/

packages/react-common/docs.config.json

@@ -0,0 +1,56 @@
+{
+  "nav": [
+    {
+      "label": "Theming",
+      "doc": "./docs/theming.md",
+      "route": "/theming"
+    },
+    {
+      "label": "Components",
+      "children": [
+        {
+          "label": "Button",
+          "route": "/components/Button",
+          "doc": "./src/components/Button/Button.mdx",
+          "source": "./src/components/Button/index.tsx"
+        },
+        {
+          "label": "Checkbox",
+          "route": "/components/Checkbox",
+          "doc": "./src/components/Checkbox/Checkbox.mdx",
+          "source": "./src/components/Checkbox/index.tsx"
+        },
+        {
+          "label": "Icon",
+          "route": "/components/Icon",
+          "doc": "./src/components/Icon/Icon.mdx",
+          "source": "./src/components/Icon/index.tsx"
+        },
+        {
+          "label": "RadioButton",
+          "route": "/components/RadioButton",
+          "doc": "./src/components/RadioButton/RadioButton.mdx",
+          "source": "./src/components/RadioButton/index.tsx"
+        },
+        {
+          "label": "Select",
+          "route": "/components/Select",
+          "doc": "./src/components/Select/Select.mdx",
+          "source": "./src/components/Select/index.tsx"
+        },
+        {
+          "label": "Slider",
+          "route": "/components/Slider",
+          "doc": "./src/components/Slider/Slider.mdx",
+          "source": "./src/components/Slider/index.tsx"
+        },
+        {
+          "label": "TextInput",
+          "route": "/components/TextInput",
+          "doc": "./src/components/TextInput/TextInput.mdx",
+          "source": "./src/components/TextInput/index.tsx"
+        }
+      ]
+    }
+  ]
+}

packages/react-common/docs/00-introduction.stories.mdx

@@ -1,9 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import Readme from '../README.md';
-
-<Meta
-  title="Introduction"
-  parameters={{ previewTabs: { canvas: { hidden: true }, docs: { hidden: true } } }}
-/>
-
-<Readme />

packages/react-common/docs/01-theming.stories.mdx → packages/react-common/docs/theming.md

@@ -1,10 +1,6 @@
-import { Meta } from '@storybook/addon-docs'
-
-
-<Meta
-  title="Theming"
-  parameters={{ previewTabs: { canvas: { hidden: true } } }}
-/>
+---
+name: Theming
+---
 
 # Theming
 

packages/react-common/package.json

@@ -68,7 +68,8 @@
     "clean": "pridepack clean",
     "watch": "pridepack watch",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public",
+    "docs": "node ./node_modules/@tesseract-design/react-common-docs/bin/docs -s public"
   },
   "dependencies": {
     "@reach/slider": "^0.16.0",

packages/react-common/src/components/Button/Button.mdx

@@ -0,0 +1,48 @@
+---
+title: 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'
+
+<Header of="Button" />
+
+<Playground
+  code={`
+    <Button
+      border
+    >
+      Perform Action
+    </Button>
+  `}
+  components={{ Button }}
+/>
+
+## Props
+
+<Props of="Button" />
+
+## Usage Notes
+
+The default variant is `outline` as the `primary` variant is intended for
+the most essential call-to-action in a section or a page. Choose `primary`
+only if the component encapsulates the primary action of the view (e.g. log-in
+in a log-in form), else resort to using `outline` (specifying the prop is optional).
+
+The design of the button label is intended to be in uppercase as per the
+[Tesseract Design Guidelines](https://make.modal.sh/tesseract/design). Avoid using
+pronounceable initials in the button label, unless:
+
+- It is well-known.
+
+  Initials such as URL and API are popular to a very wide selection of people. However,
+  initials such as [SOAP (Simple Object Access Protocol)](https://en.wikipedia.org/wiki/SOAP)
+  or [POST (power-on self test)](https://en.wikipedia.org/wiki/Power-on_self-test) may be
+  confusing if not enough context is provided.
+
+- The context wherein the initials are used is clearly indicated.
+
+  For example, using [cURL](https://en.wikipedia.org/wiki/CURL) (which would be displayed as "CURL") in a page that
+  deals with cURL requests is acceptable.

packages/react-common/src/components/Button/index.tsx

@@ -238,3 +238,5 @@ export const Button = React.forwardRef<RefElement, Props>(
 )
 
 Button.displayName = 'Button'
+
+export default Button

packages/react-common/src/components/Checkbox/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/src/components/Checkbox/index.tsx

@@ -163,3 +163,5 @@ export const Checkbox = React.forwardRef<HTMLInputElement, Props>(({
 ))
 
 Checkbox.displayName = 'Checkbox'
+
+export default Checkbox

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

@@ -0,0 +1,25 @@
+---
+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" />
+
+## See Also
+
+- [Feather Icons](https://feathericons.com) for a list of icon names.

packages/react-common/src/components/RadioButton/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/src/components/RadioButton/index.tsx

@@ -160,3 +160,5 @@ export const RadioButton = React.forwardRef<HTMLInputElement, Props>(({
 ))
 
 RadioButton.displayName = 'RadioButton'
+
+export default RadioButton

packages/react-common/src/components/Select/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/src/components/Select/index.tsx

@@ -306,3 +306,5 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
 )
 
 Select.displayName = 'Select'
+
+export default Select

packages/react-common/src/components/Slider/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/src/components/Slider/index.tsx

@@ -238,7 +238,7 @@ type Props = PropTypes.InferProps<typeof propTypes>
  * @param {boolean} [disabled] - Is the component active?
  * @param [onChange] - Event handler triggered when the component changes value.
  */
-const Slider = React.forwardRef<unknown, Props>(({
+export const Slider = React.forwardRef<unknown, Props>(({
   orientation = 'horizontal',
   label = '',
   length = '16rem',

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

@@ -0,0 +1,89 @@
+---
+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: Index }}
+  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: Index }}
+  code={`
+    <form>
+      I am <span style={{ display: 'inline-block', width: '12rem', verticalAlign: 'bottom', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '16rem', 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
+  label="Example shipping address form"
+  components={{ TextInput: Index }}
+  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
+          style={{
+            display: 'block',
+            marginTop: '0.5em',
+            lineHeight: '1.5em',
+          }}
+        >
+          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/src/components/TextInput/index.tsx

@@ -320,3 +320,5 @@ export const TextInput = React.forwardRef<HTMLInputElement, Props>(
 )
 
 TextInput.displayName = 'TextInput'
+
+export default TextInput

tsconfig.json

@@ -26,8 +26,8 @@
     "node_modules",
     "**/*.test.ts",
     "**/*.test.tsx",
-    "packages/react-common-docs/**/*.ts",
-    "packages/react-common-docs/**/*.tsx",
+    "packages/react-common/react-common-docs/**/*.ts",
+    "packages/react-common/react-common-docs/**/*.tsx",
     "utilities/**/*",
     "jest.setup.ts"
   ]