Преглед на файлове

Create in-house documentation scaffolding

Use create-next-app to bootstrap documentation.
refactor/docs
TheoryOfNekomata преди 3 години
родител
ревизия
d2bd2b79cd
променени са 27 файла, в които са добавени 544 реда и са изтрити 113 реда
  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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

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

.npmrc
.docs/

+ 56
- 0
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"
}
]
}
]
}

+ 0
- 9
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


+ 2
- 1
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",


+ 48
- 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.

+ 2
- 0
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

+ 26
- 0
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.

+ 2
- 0
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

+ 25
- 0
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.

+ 33
- 0
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.

+ 2
- 0
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

+ 46
- 0
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.

+ 2
- 0
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

+ 25
- 0
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.

+ 1
- 1
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',


+ 89
- 0
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.

+ 2
- 0
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

+ 2
- 2
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"
]


Зареждане…
Отказ
Запис