Explorar el Código

Create in-house documentation scaffolding

Use create-next-app to bootstrap documentation.
refactor/docs
TheoryOfNekomata hace 3 años
padre
commit
d2bd2b79cd
Se han modificado 27 ficheros con 544 adiciones y 113 borrados
  1. +0
    -69
      package.json
  2. +68
    -0
      packages/react-common-docs/bin/docs
  3. +1
    -1
      packages/react-common-docs/brand.tsx
  4. +16
    -7
      packages/react-common-docs/package.json
  5. +10
    -2
      packages/react-common-docs/scripts/docgen
  6. +1
    -1
      packages/react-common-docs/src/pages/_app.tsx
  7. +1
    -1
      packages/react-common-docs/src/pages/_document.tsx
  8. +80
    -12
      packages/react-common-docs/yarn.lock
  9. +1
    -0
      packages/react-common/.gitignore
  10. +56
    -0
      packages/react-common/docs.config.json
  11. +0
    -9
      packages/react-common/docs/00-introduction.stories.mdx
  12. +3
    -7
      packages/react-common/docs/theming.md
  13. +2
    -1
      packages/react-common/package.json
  14. +48
    -0
      packages/react-common/src/components/Button/Button.mdx
  15. +2
    -0
      packages/react-common/src/components/Button/index.tsx
  16. +26
    -0
      packages/react-common/src/components/Checkbox/Checkbox.mdx
  17. +2
    -0
      packages/react-common/src/components/Checkbox/index.tsx
  18. +25
    -0
      packages/react-common/src/components/Icon/Icon.mdx
  19. +33
    -0
      packages/react-common/src/components/RadioButton/RadioButton.mdx
  20. +2
    -0
      packages/react-common/src/components/RadioButton/index.tsx
  21. +46
    -0
      packages/react-common/src/components/Select/Select.mdx
  22. +2
    -0
      packages/react-common/src/components/Select/index.tsx
  23. +25
    -0
      packages/react-common/src/components/Slider/Slider.mdx
  24. +1
    -1
      packages/react-common/src/components/Slider/index.tsx
  25. +89
    -0
      packages/react-common/src/components/TextInput/TextInput.mdx
  26. +2
    -0
      packages/react-common/src/components/TextInput/index.tsx
  27. +2
    -2
      tsconfig.json

+ 0
- 69
package.json Ver fichero

@@ -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"
}

+ 68
- 0
packages/react-common-docs/bin/docs Ver fichero

@@ -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()

+ 1
- 1
packages/react-common-docs/brand.tsx Ver fichero

@@ -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',


+ 16
- 7
packages/react-common-docs/package.json Ver fichero

@@ -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"
}
}

+ 10
- 2
packages/react-common-docs/scripts/docgen Ver fichero

@@ -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;
},
}
)


+ 1
- 1
packages/react-common-docs/src/pages/_app.tsx Ver fichero

@@ -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')({


+ 1
- 1
packages/react-common-docs/src/pages/_document.tsx Ver fichero

@@ -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


+ 80
- 12
packages/react-common-docs/yarn.lock Ver fichero

@@ -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"


+ 1
- 0
packages/react-common/.gitignore Ver fichero

@@ -105,3 +105,4 @@ dist
.tern-port

.npmrc
.docs/

+ 56
- 0
packages/react-common/docs.config.json Ver fichero

@@ -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"
}
]
}
]
}

+ 0
- 9
packages/react-common/docs/00-introduction.stories.mdx Ver fichero

@@ -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 Ver fichero

@@ -1,10 +1,6 @@
import { Meta } from '@storybook/addon-docs'


<Meta
title="Theming"
parameters={{ previewTabs: { canvas: { hidden: true } } }}
/>
---
name: Theming
---

# Theming


+ 2
- 1
packages/react-common/package.json Ver fichero

@@ -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",


+ 48
- 0
packages/react-common/src/components/Button/Button.mdx Ver fichero

@@ -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.

+ 2
- 0
packages/react-common/src/components/Button/index.tsx Ver fichero

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

Button.displayName = 'Button'

export default Button

+ 26
- 0
packages/react-common/src/components/Checkbox/Checkbox.mdx Ver fichero

@@ -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.

+ 2
- 0
packages/react-common/src/components/Checkbox/index.tsx Ver fichero

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

Checkbox.displayName = 'Checkbox'

export default Checkbox

+ 25
- 0
packages/react-common/src/components/Icon/Icon.mdx Ver fichero

@@ -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.

+ 33
- 0
packages/react-common/src/components/RadioButton/RadioButton.mdx Ver fichero

@@ -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.

+ 2
- 0
packages/react-common/src/components/RadioButton/index.tsx Ver fichero

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

RadioButton.displayName = 'RadioButton'

export default RadioButton

+ 46
- 0
packages/react-common/src/components/Select/Select.mdx Ver fichero

@@ -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.

+ 2
- 0
packages/react-common/src/components/Select/index.tsx Ver fichero

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

Select.displayName = 'Select'

export default Select

+ 25
- 0
packages/react-common/src/components/Slider/Slider.mdx Ver fichero

@@ -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.

+ 1
- 1
packages/react-common/src/components/Slider/index.tsx Ver fichero

@@ -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',


+ 89
- 0
packages/react-common/src/components/TextInput/TextInput.mdx Ver fichero

@@ -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.

+ 2
- 0
packages/react-common/src/components/TextInput/index.tsx Ver fichero

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

TextInput.displayName = 'TextInput'

export default TextInput

+ 2
- 2
tsconfig.json Ver fichero

@@ -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"
]


Cargando…
Cancelar
Guardar