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
Split 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",
"docgen": "./scripts/docgen"
},
"resolutions": {
"styled-components": "file:./../../node_modules/styled-components"
},
"dependencies": {
"@mdx-js/loader": "^1.6.19",
"next": "10.0.1",
@@ -22,7 +25,6 @@
"react-live": "^2.2.3",
"remark-parse": "^9.0.0",
"remark-react": "^8.0.0",
"styled-components": "^5.2.1",
"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
}

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 (
<React.Fragment>
<Head>
<title>
{docs.displayName} | {pkg['title'] || pkg.name}
</title>
<meta name="description" content={docs.description} key="description" />
<meta name="description" content={summary} key="description" />
</Head>
<h1>{docs.displayName}</h1>
<p>
{
unified()
.use(parse)
.use(remark2react)
.processSync(docs.description).result as any
}
</p>
{description}
</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 PrismTheme from '../../utilities/prism-themes/dark'
import docgen from '../../docgen.json'
import unified from 'unified'
import parse from 'remark-parse'
import remark2react from 'remark-react'

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

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

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",
"methods": [],
"props": {
@@ -89,7 +89,7 @@
},
"href": {
"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",
"required": false,
"type": {
@@ -98,7 +98,7 @@
},
"target": {
"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",
"required": false,
"type": {
@@ -107,7 +107,7 @@
},
"rel": {
"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",
"required": false,
"type": {
@@ -118,7 +118,7 @@
"defaultValue": {
"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",
"required": false,
"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",
"methods": [],
"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:
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:
"@babel/helper-module-imports" "^7.0.0"
"@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']),
/**
* 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,
/**
* 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,
/**
* 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,
/**
* 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']),
/**
@@ -174,6 +174,8 @@ type Props = PropTypes.InferProps<typeof propTypes>

/**
* 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>(
(


+ 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.
*
* This component supports multiline input and adjusts its layout accordingly.
*/
const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props>(
(


Write Preview
Loading…
Cancel
Save