docs(markdown-paragraph): Add MarkdownParagraph

To use our own Paragraph component with Box component wrapper

config/styleguide.config.js

@@ -62,8 +62,8 @@ module.exports = {
     return `import { ${name} } from '@telusdigital/tds'`
   },
 
-  showUsage: true,
-  showCode: true,
+  showUsage: false,
+  showCode: false,
 
   sections: [
     {

docs/components/Markdown/Markdown.js

@@ -10,8 +10,8 @@ import Styled from 'react-styleguidist/lib/rsg-components/Styled'
 import {styles as paraStyles} from 'react-styleguidist/lib/rsg-components/Para'
 
 import Link from '../../../src/components/Link/Link'
-// import Heading from '../../../src/components/Typography/Heading/Heading'
 import MarkdownHeading from '../MarkdownHeading/MarkdownHeading'
+import MarkdownParagraph from '../MarkdownParagraph/MarkdownParagraph'
 
 // We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
 // That way we could avoid clashes between our loaders and user loaders.
@@ -48,6 +48,9 @@ const getBaseOverrides = memoize(classes => {
     a: {
       component: Link,
     },
+    p: {
+      component: MarkdownParagraph,
+    },
     h1: {
       component: MarkdownHeading,
       props: {
@@ -107,27 +110,6 @@ const styles = ({space, fontFamily, fontSize, color, borderRadius}) => ({
     fontSize: 'inherit',
   },
   para: paraStyles({space, color, fontFamily}).para,
-  // a: linkStyles({ color }).link,
-  // h1: {
-  //   composes: '$para',
-  //   fontSize: fontSize.h1,
-  //   fontWeight: 'normal',
-  // },
-  // h2: {
-  //   composes: '$para',
-  //   fontSize: fontSize.h2,
-  //   fontWeight: 'normal',
-  // },
-  // h3: {
-  //   composes: '$para',
-  //   fontSize: fontSize.h3,
-  //   fontWeight: 'normal',
-  // },
-  // h4: {
-  //   composes: '$para',
-  //   fontSize: fontSize.h4,
-  //   fontWeight: 'normal',
-  // },
   h5: {
     composes: '$para',
     fontSize: fontSize.h5,

docs/components/MarkdownList/MarkdownList.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Box from '../../../src/components/Box/Box'
+import UnorderedList from '../../../src/components/Lists/UnorderedList/UnorderedList'
+import Text from '../../../src/components/Typography/Text/Text'
+
+const MarkdownList = ({children}) => (
+  <Box spacing="margin" bottom={3}>
+    <Text size="medium">
+      <UnorderedList>{children}</UnorderedList>
+    </Text>
+  </Box>
+)
+
+MarkdownList.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default MarkdownList

docs/components/MarkdownParagraph/MarkdownParagraph.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Box from '../../../src/components/Box/Box'
+import Paragraph from '../../../src/components/Typography/Paragraph/Paragraph'
+
+const MarkdownParagraph = ({small, children}) => (
+  <Box spacing="margin" bottom={3}>
+    <Paragraph size={small ? 'small' : 'medium'}>{children}</Paragraph>
+  </Box>
+)
+
+MarkdownParagraph.propTypes = {
+  small: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+}
+
+MarkdownParagraph.defaultProps = {
+  small: false,
+}
+
+export default MarkdownParagraph

docs/components/Props/PropsRenderer.js

@@ -0,0 +1,229 @@
+/* eslint-disable */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import Group from 'react-group'
+import objectToString from 'javascript-stringify'
+import Arguments from 'rsg-components/Arguments'
+import Code from 'rsg-components/Code'
+import JsDoc from 'rsg-components/JsDoc'
+import Markdown from 'rsg-components/Markdown'
+import Name from 'rsg-components/Name'
+import Type from 'rsg-components/Type'
+import Text from 'rsg-components/Text'
+import Paragraph from '../../../src/components/Typography/Paragraph/Paragraph'
+import Table from 'rsg-components/Table'
+import map from 'lodash/map'
+import {unquote, getType, showSpaces} from './util'
+
+function renderType(type) {
+  if (!type) {
+    return 'unknown'
+  }
+
+  const {name} = type
+
+  switch (name) {
+    case 'arrayOf':
+      return `${type.value.name}[]`
+    case 'objectOf':
+      return `{${renderType(type.value)}}`
+    case 'instanceOf':
+      return type.value
+    default:
+      return name
+  }
+}
+
+function renderEnum(prop) {
+  if (!Array.isArray(getType(prop).value)) {
+    return <span>{getType(prop).value}</span>
+  }
+
+  const values = getType(prop).value.map(({value}) => (
+    <Code key={value}>{showSpaces(unquote(value))}</Code>
+  ))
+  return (
+    <span>
+      One of:{' '}
+      <Group separator=", " inline>
+        {values}
+      </Group>
+    </span>
+  )
+}
+
+function renderShape(props) {
+  const rows = []
+  for (const name in props) {
+    const prop = props[name]
+    const defaultValue = renderDefault(prop)
+    const description = prop.description
+
+    console.log(description)
+
+    rows.push(
+      <div key={name}>
+        <Name>{name}</Name>
+        {': '}
+        <Type>{renderType(prop)}</Type>
+        {defaultValue && ' — '}
+        {defaultValue}
+        {description && ' — '}
+        {description && <Markdown text={description} inline />}
+      </div>
+    )
+  }
+  return rows
+}
+
+const defaultValueBlacklist = ['null', 'undefined']
+
+function renderDefault(prop) {
+  if (prop.required) {
+    return <Text>Required</Text>
+  } else if (prop.defaultValue) {
+    if (prop.type) {
+      const propName = prop.type.name
+
+      if (defaultValueBlacklist.indexOf(prop.defaultValue.value) > -1) {
+        return <Code>{showSpaces(unquote(prop.defaultValue.value))}</Code>
+      } else if (propName === 'func') {
+        return (
+          <Text underlined title={showSpaces(unquote(prop.defaultValue.value))}>
+            Function
+          </Text>
+        )
+      } else if (propName === 'shape' || propName === 'object') {
+        try {
+          // We eval source code to be able to format the defaultProp here. This
+          // can be considered safe, as it is the source code that is evaled,
+          // which is from a known source and safe by default
+          // eslint-disable-next-line no-eval
+          const object = eval(`(${prop.defaultValue.value})`)
+          return (
+            <Text underlined title={objectToString(object, null, 2)}>
+              Shape
+            </Text>
+          )
+        } catch (e) {
+          // eval will throw if it contains a reference to a property not in the
+          // local scope. To avoid any breakage we fall back to rendering the
+          // prop without any formatting
+          return (
+            <Text underlined title={prop.defaultValue.value}>
+              Shape
+            </Text>
+          )
+        }
+      }
+    }
+
+    return <Code>{showSpaces(unquote(prop.defaultValue.value))}</Code>
+  }
+  return ''
+}
+
+function renderDescription(prop) {
+  const {description, tags = {}} = prop
+  const extra = renderExtra(prop)
+  const args = [...(tags.arg || []), ...(tags.argument || []), ...(tags.param || [])]
+  return (
+    <div>
+      {description && <Markdown text={description} />}
+      {extra && <Paragraph size="small">{extra}</Paragraph>}
+      <JsDoc {...tags} />
+      {args.lengthren > 0 && <Arguments args={args} heading />}
+    </div>
+  )
+}
+
+function renderExtra(prop) {
+  const type = getType(prop)
+
+  if (!type) {
+    return null
+  }
+  switch (type.name) {
+    case 'enum':
+      return renderEnum(prop)
+    case 'union':
+      return renderUnion(prop)
+    case 'shape':
+      return renderShape(prop.type.value)
+    case 'arrayOf':
+      if (type.value.name === 'shape') {
+        return renderShape(prop.type.value.value)
+      }
+      return null
+    case 'objectOf':
+      if (type.value.name === 'shape') {
+        return renderShape(prop.type.value.value)
+      }
+      return null
+    default:
+      return null
+  }
+}
+
+function renderUnion(prop) {
+  if (!Array.isArray(getType(prop).value)) {
+    return <span>{getType(prop).value}</span>
+  }
+
+  const values = getType(prop).value.map((value, index) => (
+    <Type key={`${value.name}-${index}`}>{renderType(value)}</Type>
+  ))
+  return (
+    <span>
+      One of type:{' '}
+      <Group separator=", " inline>
+        {values}
+      </Group>
+    </span>
+  )
+}
+
+function renderName(prop) {
+  const {name, tags = {}} = prop
+  return <Name deprecated={!!tags.deprecated}>{name}</Name>
+}
+
+function renderTypeColumn(prop) {
+  return <Type>{renderType(getType(prop))}</Type>
+}
+
+export function getRowKey(row) {
+  return row.name
+}
+
+export function propsToArray(props) {
+  return map(props, (prop, name) => ({...prop, name}))
+}
+
+export const columns = [
+  {
+    caption: 'Prop name',
+    render: renderName,
+  },
+  {
+    caption: 'Type',
+    render: renderTypeColumn,
+  },
+  {
+    caption: 'Default',
+    render: renderDefault,
+  },
+  {
+    caption: 'Description',
+    render: renderDescription,
+  },
+]
+
+export default function PropsRenderer({props}) {
+  return <Table columns={columns} rows={propsToArray(props)} getRowKey={getRowKey} />
+}
+
+PropsRenderer.propTypes = {
+  props: PropTypes.object.isRequired,
+}