Improve documentation

Parse descriptions as Markdown. Also improve loading of current theme.
3 年前 · c62c0deb5a
--- a/packages/react-common-docs/package.json
+++ b/packages/react-common-docs/package.json
@@ -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"
  }
 }
--- a/packages/react-common-docs/src/components/Header/Header.tsx
+++ b/packages/react-common-docs/src/components/Header/Header.tsx
@@ -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>
  )
 }
--- a/packages/react-common-docs/src/components/Props/Props.tsx
+++ b/packages/react-common-docs/src/components/Props/Props.tsx
@@ -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>
            )
--- a/packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx
+++ b/packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx
@@ -49,7 +49,9 @@ const ThemeToggle = ({
      window.localStorage.setItem('tesseract-theme', theme)
      return
    }
    setTheme(getTheme())
    window.setTimeout(() => {
      setTheme(getTheme())
    })
  }, [theme])

  React.useEffect(() => {
--- a/packages/react-common-docs/src/docgen.json
+++ b/packages/react-common-docs/src/docgen.json
@@ -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": {
--- a/packages/react-common-docs/yarn.lock
+++ b/packages/react-common-docs/yarn.lock
@@ -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"
--- a/packages/react-common/src/components/Button/Button.tsx
+++ b/packages/react-common/src/components/Button/Button.tsx
@@ -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>(
  (
--- a/packages/react-common/src/components/TextInput/TextInput.tsx
+++ b/packages/react-common/src/components/TextInput/TextInput.tsx
@@ -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>(
  (