tesseract-design
/
react-common
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

Improve documentation 

Parse descriptions as Markdown. Also improve loading of current theme.
tags/0.3.0
TheoryOfNekomata 3 years ago
parent
c4413725cc
commit
c62c0deb5a
8 changed files with 53 additions and 26 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -1
      packages/react-common-docs/package.json
  2. +13
    -9
      packages/react-common-docs/src/components/Header/Header.tsx
  3. +18
    -1
      packages/react-common-docs/src/components/Props/Props.tsx
  4. +3
    -1
      packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx
  5. +6
    -6
      packages/react-common-docs/src/docgen.json
  6. +2
    -4
      packages/react-common-docs/yarn.lock
  7. +6
    -4
      packages/react-common/src/components/Button/Button.tsx
  8. +2
    -0
      packages/react-common/src/components/TextInput/TextInput.tsx

+ 3
- 1
packages/react-common-docs/package.json View File

@@ -11,6 +11,9 @@
"start": "next start", "start": "next start",
"docgen": "./scripts/docgen" "docgen": "./scripts/docgen"
}, },
"resolutions": {
"styled-components": "file:./../../node_modules/styled-components"
},
"dependencies": { "dependencies": {
"@mdx-js/loader": "^1.6.19", "@mdx-js/loader": "^1.6.19",
"next": "10.0.1", "next": "10.0.1",
@@ -22,7 +25,6 @@
"react-live": "^2.2.3", "react-live": "^2.2.3",
"remark-parse": "^9.0.0", "remark-parse": "^9.0.0",
"remark-react": "^8.0.0", "remark-react": "^8.0.0",
"styled-components": "^5.2.1",
"unified": "^9.2.0" "unified": "^9.2.0"
} }
} }

+ 13
- 9
packages/react-common-docs/src/components/Header/Header.tsx View File

@@ -20,23 +20,27 @@ const Header: React.FC<Props> = ({ of: ofAttr }) => {
return null return null
} }


const description = unified()
.use(parse)
.use(remark2react)
.processSync(docs.description).result as any

const [firstDescriptionChild] = description.props.children

const summary = typeof firstDescriptionChild as unknown === 'string'
? firstDescriptionChild
: firstDescriptionChild.props.children[0]

return ( return (
<React.Fragment> <React.Fragment>
<Head> <Head>
<title> <title>
{docs.displayName} | {pkg['title'] || pkg.name} {docs.displayName} | {pkg['title'] || pkg.name}
</title> </title>
<meta name="description" content={docs.description} key="description" />
<meta name="description" content={summary} key="description" />
</Head> </Head>
<h1>{docs.displayName}</h1> <h1>{docs.displayName}</h1>
<p>
{
unified()
.use(parse)
.use(remark2react)
.processSync(docs.description).result as any
}
</p>
{description}
</React.Fragment> </React.Fragment>
) )
} }


+ 18
- 1
packages/react-common-docs/src/components/Props/Props.tsx View File

@@ -3,6 +3,9 @@ import * as PropTypes from 'prop-types'
import styled from 'styled-components' import styled from 'styled-components'
import PrismTheme from '../../utilities/prism-themes/dark' import PrismTheme from '../../utilities/prism-themes/dark'
import docgen from '../../docgen.json' import docgen from '../../docgen.json'
import unified from 'unified'
import parse from 'remark-parse'
import remark2react from 'remark-react'


const Base = styled('table')({ const Base = styled('table')({
borderCollapse: 'collapse', borderCollapse: 'collapse',
@@ -86,6 +89,12 @@ const BodyCell = styled('td')({
display: 'none', display: 'none',
}, },
}, },
'& :first-child': {
marginTop: 0,
},
'& :last-child': {
marginBottom: 0,
}
}) })


const Code = styled('code')({ const Code = styled('code')({
@@ -296,6 +305,14 @@ const Props: React.FC<Props> = ({ of: ofAttr }) => {
const propName = getPropName(name, prop) const propName = getPropName(name, prop)
const propDefaultValue = getPropDefaultValue(prop) const propDefaultValue = getPropDefaultValue(prop)
const propType = getPropType(prop) const propType = getPropType(prop)
const propDescription = prop.description
? (
(unified()
.use(parse)
.use(remark2react)
.processSync(prop.description).result as any)
)
: undefined
return ( return (
<HeaderRow> <HeaderRow>
<MainBodyCell> <MainBodyCell>
@@ -323,7 +340,7 @@ const Props: React.FC<Props> = ({ of: ofAttr }) => {
} }
</BodyCell> </BodyCell>
<BodyCell> <BodyCell>
{prop.description}
{propDescription}
</BodyCell> </BodyCell>
</HeaderRow> </HeaderRow>
) )


+ 3
- 1
packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx View File

@@ -49,7 +49,9 @@ const ThemeToggle = ({
window.localStorage.setItem('tesseract-theme', theme) window.localStorage.setItem('tesseract-theme', theme)
return return
} }
setTheme(getTheme())
window.setTimeout(() => {
setTheme(getTheme())
})
}, [theme]) }, [theme])


React.useEffect(() => { React.useEffect(() => {


+ 6
- 6
packages/react-common-docs/src/docgen.json View File

@@ -1,6 +1,6 @@
[ [
{ {
"description": "Component for performing an action upon activation (e.g. when clicked).",
"description": "Component for performing an action upon activation (e.g. when clicked).\n\nDepending on the declared props, this component can function as a hyperlink or as a button.",
"displayName": "Button", "displayName": "Button",
"methods": [], "methods": [],
"props": { "props": {
@@ -89,7 +89,7 @@
}, },
"href": { "href": {
"defaultValue": null, "defaultValue": null,
"description": "The URL of the page to navigate to, if element is set to \"a\".",
"description": "The URL of the page to navigate to, if `element` is set to `\"a\"`.",
"name": "href", "name": "href",
"required": false, "required": false,
"type": { "type": {
@@ -98,7 +98,7 @@
}, },
"target": { "target": {
"defaultValue": null, "defaultValue": null,
"description": "The target on where to display the page navigated to, if element is set to \"a\".",
"description": "The target on where to display the page navigated to, if `element` is set to `\"a\"`.",
"name": "target", "name": "target",
"required": false, "required": false,
"type": { "type": {
@@ -107,7 +107,7 @@
}, },
"rel": { "rel": {
"defaultValue": null, "defaultValue": null,
"description": "The relationship of the current page to the referred page in \"href\", if element is set to \"a\".",
"description": "The relationship of the current page to the referred page in `href`, if `element` is set to `\"a\"`.",
"name": "rel", "name": "rel",
"required": false, "required": false,
"type": { "type": {
@@ -118,7 +118,7 @@
"defaultValue": { "defaultValue": {
"value": "button" "value": "button"
}, },
"description": "The type of the button, if element is set to \"button\".",
"description": "The type of the button, if `element` is set to `\"button\"`.",
"name": "type", "name": "type",
"required": false, "required": false,
"type": { "type": {
@@ -525,7 +525,7 @@
} }
}, },
{ {
"description": "Component for inputting textual values.",
"description": "Component for inputting textual values.\n\nThis component supports multiline input and adjusts its layout accordingly.",
"displayName": "TextInput", "displayName": "TextInput",
"methods": [], "methods": [],
"props": { "props": {


+ 2
- 4
packages/react-common-docs/yarn.lock View File

@@ -5830,10 +5830,8 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
dependencies: dependencies:
inline-style-parser "0.1.1" inline-style-parser "0.1.1"


styled-components@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==
"styled-components@file:./../../node_modules/styled-components":
version "5.1.0"
dependencies: dependencies:
"@babel/helper-module-imports" "^7.0.0" "@babel/helper-module-imports" "^7.0.0"
"@babel/traverse" "^7.4.5" "@babel/traverse" "^7.4.5"


+ 6
- 4
packages/react-common/src/components/Button/Button.tsx View File

@@ -137,19 +137,19 @@ const propTypes = {
*/ */
element: PropTypes.oneOf<ButtonElement>(['a', 'button']), element: PropTypes.oneOf<ButtonElement>(['a', 'button']),
/** /**
* The URL of the page to navigate to, if element is set to "a".
* The URL of the page to navigate to, if `element` is set to `"a"`.
*/ */
href: PropTypes.string, href: PropTypes.string,
/** /**
* The target on where to display the page navigated to, if element is set to "a".
* The target on where to display the page navigated to, if `element` is set to `"a"`.
*/ */
target: PropTypes.string, target: PropTypes.string,
/** /**
* The relationship of the current page to the referred page in "href", if element is set to "a".
* The relationship of the current page to the referred page in `href`, if `element` is set to `"a"`.
*/ */
rel: PropTypes.string, rel: PropTypes.string,
/** /**
* The type of the button, if element is set to "button".
* The type of the button, if `element` is set to `"button"`.
*/ */
type: PropTypes.oneOf<ButtonType>(['submit', 'reset', 'button']), type: PropTypes.oneOf<ButtonType>(['submit', 'reset', 'button']),
/** /**
@@ -174,6 +174,8 @@ type Props = PropTypes.InferProps<typeof propTypes>


/** /**
* Component for performing an action upon activation (e.g. when clicked). * Component for performing an action upon activation (e.g. when clicked).
*
* Depending on the declared props, this component can function as a hyperlink or as a button.
*/ */
const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, Props>( const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, Props>(
( (


+ 2
- 0
packages/react-common/src/components/TextInput/TextInput.tsx View File

@@ -257,6 +257,8 @@ type Props = PropTypes.InferProps<typeof propTypes>


/** /**
* Component for inputting textual values. * Component for inputting textual values.
*
* This component supports multiline input and adjusts its layout accordingly.
*/ */
const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props>( const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props>(
( (


Write Preview
Loading…
Cancel
Save