From d2bd2b79cdf6aee4b1466d9518c7be3bd43f976a Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Sun, 15 Aug 2021 21:04:03 +0800 Subject: [PATCH] Create in-house documentation scaffolding Use create-next-app to bootstrap documentation. --- package.json | 69 -------------- packages/react-common-docs/bin/docs | 68 ++++++++++++++ packages/react-common-docs/brand.tsx | 2 +- packages/react-common-docs/package.json | 23 +++-- packages/react-common-docs/scripts/docgen | 12 ++- packages/react-common-docs/src/pages/_app.tsx | 2 +- .../react-common-docs/src/pages/_document.tsx | 2 +- packages/react-common-docs/yarn.lock | 92 ++++++++++++++++--- packages/react-common/.gitignore | 1 + packages/react-common/docs.config.json | 56 +++++++++++ .../docs/00-introduction.stories.mdx | 9 -- .../{01-theming.stories.mdx => theming.md} | 10 +- packages/react-common/package.json | 3 +- .../src/components/Button/Button.mdx | 48 ++++++++++ .../src/components/Button/index.tsx | 2 + .../src/components/Checkbox/Checkbox.mdx | 26 ++++++ .../src/components/Checkbox/index.tsx | 2 + .../react-common/src/components/Icon/Icon.mdx | 25 +++++ .../components/RadioButton/RadioButton.mdx | 33 +++++++ .../src/components/RadioButton/index.tsx | 2 + .../src/components/Select/Select.mdx | 46 ++++++++++ .../src/components/Select/index.tsx | 2 + .../src/components/Slider/Slider.mdx | 25 +++++ .../src/components/Slider/index.tsx | 2 +- .../src/components/TextInput/TextInput.mdx | 89 ++++++++++++++++++ .../src/components/TextInput/index.tsx | 2 + tsconfig.json | 4 +- 27 files changed, 544 insertions(+), 113 deletions(-) delete mode 100644 package.json create mode 100644 packages/react-common-docs/bin/docs mode change 100755 => 100644 packages/react-common-docs/scripts/docgen create mode 100644 packages/react-common/docs.config.json delete mode 100644 packages/react-common/docs/00-introduction.stories.mdx rename packages/react-common/docs/{01-theming.stories.mdx => theming.md} (94%) create mode 100644 packages/react-common/src/components/Button/Button.mdx create mode 100644 packages/react-common/src/components/Checkbox/Checkbox.mdx create mode 100644 packages/react-common/src/components/Icon/Icon.mdx create mode 100644 packages/react-common/src/components/RadioButton/RadioButton.mdx create mode 100644 packages/react-common/src/components/Select/Select.mdx create mode 100644 packages/react-common/src/components/Slider/Slider.mdx create mode 100644 packages/react-common/src/components/TextInput/TextInput.mdx diff --git a/package.json b/package.json deleted file mode 100644 index 3716c0e..0000000 --- a/package.json +++ /dev/null @@ -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 ", - "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" -} diff --git a/packages/react-common-docs/bin/docs b/packages/react-common-docs/bin/docs new file mode 100644 index 0000000..20b3f2d --- /dev/null +++ b/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() diff --git a/packages/react-common-docs/brand.tsx b/packages/react-common-docs/brand.tsx index a0d68e3..9161e1d 100644 --- a/packages/react-common-docs/brand.tsx +++ b/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', diff --git a/packages/react-common-docs/package.json b/packages/react-common-docs/package.json index 895c34c..5edf82f 100644 --- a/packages/react-common-docs/package.json +++ b/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" } } diff --git a/packages/react-common-docs/scripts/docgen b/packages/react-common-docs/scripts/docgen old mode 100755 new mode 100644 index 78ebe5e..af4263b --- a/packages/react-common-docs/scripts/docgen +++ b/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; }, } ) diff --git a/packages/react-common-docs/src/pages/_app.tsx b/packages/react-common-docs/src/pages/_app.tsx index 69bd268..2b7c040 100644 --- a/packages/react-common-docs/src/pages/_app.tsx +++ b/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')({ diff --git a/packages/react-common-docs/src/pages/_document.tsx b/packages/react-common-docs/src/pages/_document.tsx index fb0bf44..029c4c8 100644 --- a/packages/react-common-docs/src/pages/_document.tsx +++ b/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 diff --git a/packages/react-common-docs/yarn.lock b/packages/react-common-docs/yarn.lock index 84fdc8c..2feb6ff 100644 --- a/packages/react-common-docs/yarn.lock +++ b/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" diff --git a/packages/react-common/.gitignore b/packages/react-common/.gitignore index 53992de..26a0f8d 100644 --- a/packages/react-common/.gitignore +++ b/packages/react-common/.gitignore @@ -105,3 +105,4 @@ dist .tern-port .npmrc +.docs/ diff --git a/packages/react-common/docs.config.json b/packages/react-common/docs.config.json new file mode 100644 index 0000000..754ee8d --- /dev/null +++ b/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" + } + ] + } + ] +} diff --git a/packages/react-common/docs/00-introduction.stories.mdx b/packages/react-common/docs/00-introduction.stories.mdx deleted file mode 100644 index d288d06..0000000 --- a/packages/react-common/docs/00-introduction.stories.mdx +++ /dev/null @@ -1,9 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; -import Readme from '../README.md'; - - - - diff --git a/packages/react-common/docs/01-theming.stories.mdx b/packages/react-common/docs/theming.md similarity index 94% rename from packages/react-common/docs/01-theming.stories.mdx rename to packages/react-common/docs/theming.md index 05a3419..2b016a5 100644 --- a/packages/react-common/docs/01-theming.stories.mdx +++ b/packages/react-common/docs/theming.md @@ -1,10 +1,6 @@ -import { Meta } from '@storybook/addon-docs' - - - +--- +name: Theming +--- # Theming diff --git a/packages/react-common/package.json b/packages/react-common/package.json index 9bd5bf2..f5655f1 100644 --- a/packages/react-common/package.json +++ b/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", diff --git a/packages/react-common/src/components/Button/Button.mdx b/packages/react-common/src/components/Button/Button.mdx new file mode 100644 index 0000000..14c5522 --- /dev/null +++ b/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' + +
+ + + Perform Action + + `} + components={{ Button }} +/> + +## Props + + + +## 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. diff --git a/packages/react-common/src/components/Button/index.tsx b/packages/react-common/src/components/Button/index.tsx index 0f461bb..1b533a9 100644 --- a/packages/react-common/src/components/Button/index.tsx +++ b/packages/react-common/src/components/Button/index.tsx @@ -238,3 +238,5 @@ export const Button = React.forwardRef( ) Button.displayName = 'Button' + +export default Button diff --git a/packages/react-common/src/components/Checkbox/Checkbox.mdx b/packages/react-common/src/components/Checkbox/Checkbox.mdx new file mode 100644 index 0000000..7e9af04 --- /dev/null +++ b/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' + +
+ + + `} +/> + +## Props + + + +## 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. diff --git a/packages/react-common/src/components/Checkbox/index.tsx b/packages/react-common/src/components/Checkbox/index.tsx index abfb85a..6003547 100644 --- a/packages/react-common/src/components/Checkbox/index.tsx +++ b/packages/react-common/src/components/Checkbox/index.tsx @@ -163,3 +163,5 @@ export const Checkbox = React.forwardRef(({ )) Checkbox.displayName = 'Checkbox' + +export default Checkbox diff --git a/packages/react-common/src/components/Icon/Icon.mdx b/packages/react-common/src/components/Icon/Icon.mdx new file mode 100644 index 0000000..0d497f9 --- /dev/null +++ b/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' + +
+ + + `} +/> + +## Props + + + +## See Also + +- [Feather Icons](https://feathericons.com) for a list of icon names. diff --git a/packages/react-common/src/components/RadioButton/RadioButton.mdx b/packages/react-common/src/components/RadioButton/RadioButton.mdx new file mode 100644 index 0000000..7d0ab91 --- /dev/null +++ b/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' + +
+ + +
+ +
+
+ +
+ + `} +/> + +## Props + + + +## 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. diff --git a/packages/react-common/src/components/RadioButton/index.tsx b/packages/react-common/src/components/RadioButton/index.tsx index abcb8c4..52e95d2 100644 --- a/packages/react-common/src/components/RadioButton/index.tsx +++ b/packages/react-common/src/components/RadioButton/index.tsx @@ -160,3 +160,5 @@ export const RadioButton = React.forwardRef(({ )) RadioButton.displayName = 'RadioButton' + +export default RadioButton diff --git a/packages/react-common/src/components/Select/Select.mdx b/packages/react-common/src/components/Select/Select.mdx new file mode 100644 index 0000000..35f56c1 --- /dev/null +++ b/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' + +
+ + + + + + + + + + + + + `} +/> + +## Props + + + +## 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. diff --git a/packages/react-common/src/components/Select/index.tsx b/packages/react-common/src/components/Select/index.tsx index c4c40fa..0913750 100644 --- a/packages/react-common/src/components/Select/index.tsx +++ b/packages/react-common/src/components/Select/index.tsx @@ -306,3 +306,5 @@ export const Select = React.forwardRef( ) Select.displayName = 'Select' + +export default Select diff --git a/packages/react-common/src/components/Slider/Slider.mdx b/packages/react-common/src/components/Slider/Slider.mdx new file mode 100644 index 0000000..d8113b3 --- /dev/null +++ b/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' + +
+ + + `} +/> + +## Props + + + +## See Also + +- [Reach UI Slider](//reacttraining.com/reach-ui/slider/#sliderinput) for the client-side implementation. diff --git a/packages/react-common/src/components/Slider/index.tsx b/packages/react-common/src/components/Slider/index.tsx index f8a184a..0d1bf90 100644 --- a/packages/react-common/src/components/Slider/index.tsx +++ b/packages/react-common/src/components/Slider/index.tsx @@ -238,7 +238,7 @@ type Props = PropTypes.InferProps * @param {boolean} [disabled] - Is the component active? * @param [onChange] - Event handler triggered when the component changes value. */ -const Slider = React.forwardRef(({ +export const Slider = React.forwardRef(({ orientation = 'horizontal', label = '', length = '16rem', diff --git a/packages/react-common/src/components/TextInput/TextInput.mdx b/packages/react-common/src/components/TextInput/TextInput.mdx new file mode 100644 index 0000000..34cef03 --- /dev/null +++ b/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' + +
+ + + `} +/> + +## Props + + + +## 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. + + + I am and I live in . + + `} +/> + +### 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. + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ + + Consult the fees table for shipping fee details. + +
+ + `} +/> + +## See Also + +- [Select](./Select) for a graphically-similar component suitable for selecting more values. diff --git a/packages/react-common/src/components/TextInput/index.tsx b/packages/react-common/src/components/TextInput/index.tsx index c5f5105..e358136 100644 --- a/packages/react-common/src/components/TextInput/index.tsx +++ b/packages/react-common/src/components/TextInput/index.tsx @@ -320,3 +320,5 @@ export const TextInput = React.forwardRef( ) TextInput.displayName = 'TextInput' + +export default TextInput diff --git a/tsconfig.json b/tsconfig.json index 8480b00..dc466da 100644 --- a/tsconfig.json +++ b/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" ]