diff --git a/packages/react-common-docs/next-env.d.ts b/packages/react-common-docs/next-env.d.ts index 7b7aa2c..6f84a8d 100644 --- a/packages/react-common-docs/next-env.d.ts +++ b/packages/react-common-docs/next-env.d.ts @@ -1,2 +1,3 @@ /// /// +declare module 'remark-react' diff --git a/packages/react-common-docs/package.json b/packages/react-common-docs/package.json index e7b6b91..91728c6 100644 --- a/packages/react-common-docs/package.json +++ b/packages/react-common-docs/package.json @@ -5,7 +5,8 @@ "scripts": { "dev": "next dev", "build": "next build", - "start": "next start" + "start": "next start", + "docgen": "node scripts/docgen.js" }, "dependencies": { "@mdx-js/loader": "^1.6.19", @@ -13,7 +14,11 @@ "next": "10.0.1", "next-mdx-frontmatter": "^0.0.3", "pascal-case": "^3.1.1", + "react-docgen-typescript": "^1.20.5", "react-live": "^2.2.3", - "styled-components": "^5.2.1" + "remark-parse": "^9.0.0", + "remark-react": "^8.0.0", + "styled-components": "^5.2.1", + "unified": "^9.2.0" } } diff --git a/packages/react-common-docs/public/theme/dark.css b/packages/react-common-docs/public/theme/dark.css index fb7acc1..6131033 100644 --- a/packages/react-common-docs/public/theme/dark.css +++ b/packages/react-common-docs/public/theme/dark.css @@ -125,3 +125,11 @@ h6 { a { color: var(--color-accent); } + +code { + font-family: var(--font-family-monospace), monospace; +} + +pre { + font-family: var(--font-family-monospace), monospace; +} diff --git a/packages/react-common-docs/public/theme/light.css b/packages/react-common-docs/public/theme/light.css index 2a7f432..af552b3 100644 --- a/packages/react-common-docs/public/theme/light.css +++ b/packages/react-common-docs/public/theme/light.css @@ -136,3 +136,11 @@ h6 { a { color: var(--color-accent); } + +code { + font-family: var(--font-family-monospace), monospace; +} + +pre { + font-family: var(--font-family-monospace), monospace; +} diff --git a/packages/react-common-docs/scripts/docgen.js b/packages/react-common-docs/scripts/docgen.js new file mode 100644 index 0000000..59e8125 --- /dev/null +++ b/packages/react-common-docs/scripts/docgen.js @@ -0,0 +1,22 @@ +const docgen = require('react-docgen-typescript') +const path = require('path') +const fs = require('fs') + +const componentsPath = path.resolve(__dirname, '..', '..', 'react-common', 'src', 'components') + +fs.readdir(componentsPath, (err, dir) => { + const trueFilePaths = dir.map(d => path.resolve(__dirname, '..', '..', 'react-common', 'src', 'components', d, `${d}.tsx`)) + const docs = docgen.parse( + trueFilePaths, + { + shouldExtractLiteralValuesFromEnum: true, + shouldRemoveUndefinedFromOptional: true, + propFilter: { + skipPropsWithName: ['key', 'ref'], + }, + } + ) + fs.writeFile(path.resolve(__dirname, '..', 'src', 'docgen.json'), JSON.stringify(docs, null, 2), (err) => { + + }) +}) diff --git a/packages/react-common-docs/src/components/Header/Header.tsx b/packages/react-common-docs/src/components/Header/Header.tsx new file mode 100644 index 0000000..a0672f4 --- /dev/null +++ b/packages/react-common-docs/src/components/Header/Header.tsx @@ -0,0 +1,35 @@ +import * as React from 'react' +import Head from 'next/head' +import unified from 'unified' +import parse from 'remark-parse' +import remark2react from 'remark-react' +import docgen from '../../docgen.json' + +const Header = ({ of: ofAttr }) => { + const docs = docgen.find(d => d.displayName === ofAttr) + + if (!docs) { + return null + } + + return ( + + + + {docs.displayName} | React Common + + +

{docs.displayName}

+

+ { + unified() + .use(parse) + .use(remark2react) + .processSync(docs.description).result + } +

+ + ) +} + +export default Header diff --git a/packages/react-common-docs/src/components/Playground/Playground.tsx b/packages/react-common-docs/src/components/Playground/Playground.tsx index c970ccf..29071c6 100644 --- a/packages/react-common-docs/src/components/Playground/Playground.tsx +++ b/packages/react-common-docs/src/components/Playground/Playground.tsx @@ -4,13 +4,18 @@ import { LiveEditor, LivePreview } from 'react-live' -import pascalCase from 'pascal-case' import styled from 'styled-components' const Figure = styled('figure')({ margin: 0, }) +const StyledLiveEditor = styled(LiveEditor)({ + lineHeight: 1.125, + fontFamily: 'var(--font-family-monospace), monospace !important', + marginTop: '1rem', +}) + const Playground = ({ components, code, @@ -38,7 +43,7 @@ const Playground = ({ ...components, }}> - + diff --git a/packages/react-common-docs/src/components/Props/Props.tsx b/packages/react-common-docs/src/components/Props/Props.tsx new file mode 100644 index 0000000..f932ee4 --- /dev/null +++ b/packages/react-common-docs/src/components/Props/Props.tsx @@ -0,0 +1,176 @@ +import * as React from 'react' +import styled from 'styled-components' +import docgen from '../../docgen.json' + +const Base = styled('table')({ + borderCollapse: 'collapse', + border: 0, + display: 'block', + '@media (min-width: 720px)': { + display: 'table', + margin: '0 -0.5rem', + }, +}) + +const HeaderCellGroup = styled('thead')({ + display: 'none', + '@media (min-width: 720px)': { + display: 'table-header-group', + }, +}) + +const HeaderRow = styled('tr')({ + display: 'block', + margin: '2rem 0', + '@media (min-width: 720px)': { + display: 'table-row', + margin: 0, + }, +}) + +const HeaderCell = styled('th')({ + verticalAlign: 'top', + textAlign: 'left', + fontSize: '0.75rem', + fontWeight: 'bolder', + textTransform: 'uppercase', + border: 0, + display: 'block', + padding: 0, + '@media (min-width: 720px)': { + display: 'table-cell', + padding: '0 0.5rem', + }, +}) + +const MainBodyCell = styled('th')({ + verticalAlign: 'top', + textAlign: 'left', + border: 0, + lineHeight: 1, + display: 'block', + padding: 0, + '@media (min-width: 720px)': { + display: 'table-cell', + padding: '0.5rem', + }, +}) + +const BodyCellGroup = styled('tbody')({ + display: 'block', + '@media (min-width: 720px)': { + display: 'table-row-group', + }, +}) + +const BodyCell = styled('td')({ + verticalAlign: 'top', + padding: 0, + border: 0, + display: 'block', + '&[data-column-name]::before': { + display: 'inline', + fontSize: '0.75rem', + fontWeight: 'bolder', + textTransform: 'uppercase', + content: "attr(data-column-name) ':'", + marginRight: '1rem', + }, + '@media (min-width: 720px)': { + padding: '0.5rem 0.5rem', + display: 'table-cell', + lineHeight: 1.25, + '&[data-column-name]::before': { + display: 'none', + }, + }, +}) + +const Code = styled('code')({ + display: 'inline-block', +}) + +const Props = ({ of: ofAttr }) => { + const docs = docgen.find(d => d.displayName === ofAttr) + + if (!docs) { + return null + } + + return ( + + + + + + + + + + + Name + + + Type + + + Default + + + Description + + + + + { + Object.entries(docs.props).map(([name, def]) => ( + + + + {def.required ? name : name + '?'} + + + + { + def.type.name === 'enum' + && ( + + {def.type.value.map(v => v.value).join(' | ')} + + ) + } + { + def.type.name !== 'enum' + && ( + + {def.type.name} + + ) + } + + + { + def.defaultValue + && ( + + {JSON.stringify(def.defaultValue.value)} + + ) + } + + + {def.description} + + + )) + } + + + ) +} + +export default Props diff --git a/packages/react-common-docs/src/docgen.json b/packages/react-common-docs/src/docgen.json new file mode 100644 index 0000000..5976a2e --- /dev/null +++ b/packages/react-common-docs/src/docgen.json @@ -0,0 +1,683 @@ +[ + { + "description": "Component for performing an action upon activation (e.g. when clicked).", + "displayName": "Button", + "methods": [], + "props": { + "size": { + "defaultValue": { + "value": "medium" + }, + "description": "Size of the component.", + "name": "size", + "required": false, + "type": { + "name": "enum", + "raw": "Size", + "value": [ + { + "value": "\"small\"" + }, + { + "value": "\"medium\"" + }, + { + "value": "\"large\"" + } + ] + } + }, + "variant": { + "defaultValue": { + "value": "outline" + }, + "description": "Variant of the component.", + "name": "variant", + "required": false, + "type": { + "name": "enum", + "raw": "Variant", + "value": [ + { + "value": "\"outline\"" + }, + { + "value": "\"primary\"" + } + ] + } + }, + "children": { + "defaultValue": null, + "description": "Text to identify the action associated upon activation of the component.", + "name": "children", + "required": false, + "type": { + "name": "any" + } + }, + "disabled": { + "defaultValue": { + "value": false + }, + "description": "Can the component be activated?", + "name": "disabled", + "required": false, + "type": { + "name": "boolean" + } + }, + "element": { + "defaultValue": { + "value": "button" + }, + "description": "The corresponding HTML element of the component.", + "name": "element", + "required": false, + "type": { + "name": "enum", + "raw": "ButtonElement", + "value": [ + { + "value": "\"a\"" + }, + { + "value": "\"button\"" + } + ] + } + }, + "href": { + "defaultValue": null, + "description": "The URL of the page to navigate to, if element is set to \"a\".", + "name": "href", + "required": false, + "type": { + "name": "string" + } + }, + "target": { + "defaultValue": null, + "description": "The target on where to display the page navigated to, if element is set to \"a\".", + "name": "target", + "required": false, + "type": { + "name": "string" + } + }, + "rel": { + "defaultValue": null, + "description": "The relationship of the current page to the referred page in \"href\", if element is set to \"a\".", + "name": "rel", + "required": false, + "type": { + "name": "string" + } + }, + "type": { + "defaultValue": { + "value": "button" + }, + "description": "The type of the button, if element is set to \"button\".", + "name": "type", + "required": false, + "type": { + "name": "enum", + "raw": "ButtonType", + "value": [ + { + "value": "\"button\"" + }, + { + "value": "\"submit\"" + }, + { + "value": "\"reset\"" + } + ] + } + }, + "border": { + "defaultValue": { + "value": false + }, + "description": "Does the button display a border?", + "name": "border", + "required": false, + "type": { + "name": "boolean" + } + }, + "onClick": { + "defaultValue": null, + "description": "Event handler triggered when the component is clicked.", + "name": "onClick", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Event handler triggered when the component receives focus.", + "name": "onFocus", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Event handler triggered when the component loses focus.", + "name": "onBlur", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + } + } + }, + { + "description": "Component for values that have an on/off state.", + "displayName": "Checkbox", + "methods": [], + "props": { + "onFocus": { + "defaultValue": null, + "description": "Event handler triggered when the component receives focus.", + "name": "onFocus", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Event handler triggered when the component loses focus.", + "name": "onBlur", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "label": { + "defaultValue": { + "value": "" + }, + "description": "Short textual description indicating the nature of the component's value.", + "name": "label", + "required": false, + "type": { + "name": "any" + } + }, + "name": { + "defaultValue": null, + "description": "Name of the form field associated with this component.", + "name": "name", + "required": false, + "type": { + "name": "string" + } + }, + "onChange": { + "defaultValue": null, + "description": "Event handler triggered when the component is toggled.", + "name": "onChange", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + } + } + }, + { + "description": "Component for displaying graphics.", + "displayName": "Icon", + "methods": [], + "props": { + "size": { + "defaultValue": { + "value": "1.5rem" + }, + "description": "Size of the icon. This controls both the width and the height.", + "name": "size", + "required": false, + "type": { + "name": "ReactText" + } + }, + "label": { + "defaultValue": { + "value": null + }, + "description": "Describe of what the component represents.", + "name": "label", + "required": false, + "type": { + "name": "string" + } + }, + "name": { + "defaultValue": null, + "description": "Name of the icon to display.", + "name": "name", + "required": false, + "type": { + "name": "string" + } + }, + "weight": { + "defaultValue": { + "value": "0.125rem" + }, + "description": "Width of the icon's strokes.", + "name": "weight", + "required": false, + "type": { + "name": "ReactText" + } + } + } + }, + { + "description": "Component for values which are to be selected from a few list of options.", + "displayName": "RadioButton", + "methods": [], + "props": { + "onFocus": { + "defaultValue": null, + "description": "Event handler triggered when the component receives focus.", + "name": "onFocus", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Event handler triggered when the component loses focus.", + "name": "onBlur", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "label": { + "defaultValue": { + "value": "" + }, + "description": "Short textual description indicating the nature of the component's value.", + "name": "label", + "required": false, + "type": { + "name": "any" + } + }, + "name": { + "defaultValue": null, + "description": "Group where the component belongs.", + "name": "name", + "required": false, + "type": { + "name": "string" + } + }, + "onChange": { + "defaultValue": null, + "description": "Event handler triggered when the component is selected.", + "name": "onChange", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + } + } + }, + { + "description": "Component for selecting values from a larger number of options.", + "displayName": "Select", + "methods": [], + "props": { + "size": { + "defaultValue": { + "value": "medium" + }, + "description": "Size of the component.", + "name": "size", + "required": false, + "type": { + "name": "enum", + "raw": "Size", + "value": [ + { + "value": "\"small\"" + }, + { + "value": "\"medium\"" + }, + { + "value": "\"large\"" + } + ] + } + }, + "disabled": { + "defaultValue": { + "value": false + }, + "description": "Is the component active?", + "name": "disabled", + "required": false, + "type": { + "name": "boolean" + } + }, + "border": { + "defaultValue": { + "value": false + }, + "description": "Does the button display a border?", + "name": "border", + "required": false, + "type": { + "name": "boolean" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Event handler triggered when the component receives focus.", + "name": "onFocus", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Event handler triggered when the component loses focus.", + "name": "onBlur", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "label": { + "defaultValue": { + "value": "" + }, + "description": "Short textual description indicating the nature of the component's value.", + "name": "label", + "required": false, + "type": { + "name": "any" + } + }, + "name": { + "defaultValue": null, + "description": "Name of the form field associated with this component.", + "name": "name", + "required": false, + "type": { + "name": "string" + } + }, + "onChange": { + "defaultValue": null, + "description": "Event handler triggered when the component changes value.", + "name": "onChange", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "hint": { + "defaultValue": { + "value": "" + }, + "description": "Short textual description as guidelines for valid input values.", + "name": "hint", + "required": false, + "type": { + "name": "any" + } + }, + "multiple": { + "defaultValue": { + "value": false + }, + "description": "Can multiple values be selected?", + "name": "multiple", + "required": false, + "type": { + "name": "boolean" + } + } + } + }, + { + "description": "Component for inputting numeric values in a graphical manner.\n\nThe component is styled using client-side scripts. When the component is rendered server-side,\nthe component falls back into the original `` element.", + "displayName": "Slider", + "methods": [], + "props": { + "disabled": { + "defaultValue": { + "value": false + }, + "description": "Is the component active?", + "name": "disabled", + "required": false, + "type": { + "name": "boolean" + } + }, + "label": { + "defaultValue": { + "value": "" + }, + "description": "Short textual description indicating the nature of the component's value.", + "name": "label", + "required": false, + "type": { + "name": "any" + } + }, + "onChange": { + "defaultValue": null, + "description": "Event handler triggered when the component changes value.", + "name": "onChange", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "orientation": { + "defaultValue": { + "value": "horizontal" + }, + "description": "The component orientation.", + "name": "orientation", + "required": false, + "type": { + "name": "enum", + "raw": "Orientation", + "value": [ + { + "value": "\"vertical\"" + }, + { + "value": "\"horizontal\"" + } + ] + } + }, + "length": { + "defaultValue": { + "value": "16rem" + }, + "description": "CSS size for the component length.", + "name": "length", + "required": false, + "type": { + "name": "ReactText" + } + } + } + }, + { + "description": "Component for inputting textual values.", + "displayName": "TextInput", + "methods": [], + "props": { + "size": { + "defaultValue": { + "value": "medium" + }, + "description": "Size of the component.", + "name": "size", + "required": false, + "type": { + "name": "enum", + "raw": "Size", + "value": [ + { + "value": "\"small\"" + }, + { + "value": "\"medium\"" + }, + { + "value": "\"large\"" + } + ] + } + }, + "disabled": { + "defaultValue": { + "value": false + }, + "description": "Is the component active?", + "name": "disabled", + "required": false, + "type": { + "name": "boolean" + } + }, + "border": { + "defaultValue": { + "value": false + }, + "description": "Does the button display a border?", + "name": "border", + "required": false, + "type": { + "name": "boolean" + } + }, + "onFocus": { + "defaultValue": null, + "description": "Event handler triggered when the component receives focus.", + "name": "onFocus", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "onBlur": { + "defaultValue": null, + "description": "Event handler triggered when the component loses focus.", + "name": "onBlur", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "label": { + "defaultValue": { + "value": "" + }, + "description": "Short textual description indicating the nature of the component's value.", + "name": "label", + "required": false, + "type": { + "name": "any" + } + }, + "onChange": { + "defaultValue": null, + "description": "Event handler triggered when the component changes value.", + "name": "onChange", + "required": false, + "type": { + "name": "(...args: any[]) => any" + } + }, + "hint": { + "defaultValue": { + "value": "" + }, + "description": "Short textual description as guidelines for valid input values.", + "name": "hint", + "required": false, + "type": { + "name": "any" + } + }, + "indicator": { + "defaultValue": { + "value": null + }, + "description": "Additional description, usually graphical, indicating the nature of the component's value.", + "name": "indicator", + "required": false, + "type": { + "name": "ReactNodeLike" + } + }, + "multiline": { + "defaultValue": { + "value": false + }, + "description": "Should the component accept multiple lines of input?", + "name": "multiline", + "required": false, + "type": { + "name": "boolean" + } + }, + "autoResize": { + "defaultValue": { + "value": false + }, + "description": "Should the component resize itself to show all its value?", + "name": "autoResize", + "required": false, + "type": { + "name": "boolean" + } + }, + "placeholder": { + "defaultValue": { + "value": "" + }, + "description": "Placeholder of the component when there is no value.", + "name": "placeholder", + "required": false, + "type": { + "name": "string" + } + }, + "rows": { + "defaultValue": { + "value": 3 + }, + "description": "How many rows should the component display if it accepts multiline input?", + "name": "rows", + "required": false, + "type": { + "name": "number" + } + } + } + } +] \ No newline at end of file diff --git a/packages/react-common-docs/src/pages/_app.tsx b/packages/react-common-docs/src/pages/_app.tsx index aa992f7..9215b0f 100644 --- a/packages/react-common-docs/src/pages/_app.tsx +++ b/packages/react-common-docs/src/pages/_app.tsx @@ -1,9 +1,9 @@ -import '../../public/global.css' -import '../../public/theme/dark.css' +import styled from 'styled-components' import sidebar from '../sidebar.json' import brand from '../../brand' import Sidebar from '../components/Sidebar/Sidebar' -import styled from 'styled-components' +import '../../public/global.css' +import '../../public/theme/dark.css' const Container = styled('div')({ maxWidth: 720, @@ -15,7 +15,6 @@ const Container = styled('div')({ const App = ({ Component, pageProps, - ...etc }) => (
## Usage Notes diff --git a/packages/react-common-docs/src/pages/components/Checkbox.mdx b/packages/react-common-docs/src/pages/components/Checkbox.mdx index 0f804d5..5dfc608 100644 --- a/packages/react-common-docs/src/pages/components/Checkbox.mdx +++ b/packages/react-common-docs/src/pages/components/Checkbox.mdx @@ -4,10 +4,10 @@ name: Checkbox import { Checkbox } from '@tesseract-design/react-common' import Playground from '../../components/Playground/Playground' +import Props from '../../components/Props/Props' +import Header from '../../components/Header/Header' -# Checkbox - -Component for values that have an on/off state. +
## See Also diff --git a/packages/react-common-docs/src/pages/components/Icon.mdx b/packages/react-common-docs/src/pages/components/Icon.mdx index 580d969..70da958 100644 --- a/packages/react-common-docs/src/pages/components/Icon.mdx +++ b/packages/react-common-docs/src/pages/components/Icon.mdx @@ -4,10 +4,10 @@ name: Icon import { Icon } from '@tesseract-design/react-common' import Playground from '../../components/Playground/Playground' +import Props from '../../components/Props/Props' +import Header from '../../components/Header/Header' -# Icon - -Component for displaying graphics. +
diff --git a/packages/react-common-docs/src/pages/components/RadioButton.mdx b/packages/react-common-docs/src/pages/components/RadioButton.mdx index 05b0471..4a7bea3 100644 --- a/packages/react-common-docs/src/pages/components/RadioButton.mdx +++ b/packages/react-common-docs/src/pages/components/RadioButton.mdx @@ -4,10 +4,10 @@ name: RadioButton import { RadioButton } from '@tesseract-design/react-common' import Playground from '../../components/Playground/Playground' +import Props from '../../components/Props/Props' +import Header from '../../components/Header/Header' -# RadioButton - -Component for values which are to be selected from a few list of options. +
## See Also diff --git a/packages/react-common-docs/src/pages/components/Select.mdx b/packages/react-common-docs/src/pages/components/Select.mdx index a50fb13..45d00b9 100644 --- a/packages/react-common-docs/src/pages/components/Select.mdx +++ b/packages/react-common-docs/src/pages/components/Select.mdx @@ -4,10 +4,10 @@ name: Select import { Select } from '@tesseract-design/react-common' import Playground from '../../components/Playground/Playground' +import Props from '../../components/Props/Props' +import Header from '../../components/Header/Header' -# Select - -Component for selecting values from a larger number of options. +
## Usage Notes diff --git a/packages/react-common-docs/src/pages/components/Slider.mdx b/packages/react-common-docs/src/pages/components/Slider.mdx index c93830f..69297bf 100644 --- a/packages/react-common-docs/src/pages/components/Slider.mdx +++ b/packages/react-common-docs/src/pages/components/Slider.mdx @@ -4,13 +4,10 @@ name: Slider import { Slider } from '@tesseract-design/react-common' import Playground from '../../components/Playground/Playground' +import Props from '../../components/Props/Props' +import Header from '../../components/Header/Header' -# Slider - -Component for inputting numeric values in a graphical manner. - -The component is styled using client-side scripts. When the component is rendered server-side, -the component falls back into the original `` element. +
` element. ## Props -Props + ## See Also diff --git a/packages/react-common-docs/src/pages/components/TextInput.mdx b/packages/react-common-docs/src/pages/components/TextInput.mdx index f260775..82e0e50 100644 --- a/packages/react-common-docs/src/pages/components/TextInput.mdx +++ b/packages/react-common-docs/src/pages/components/TextInput.mdx @@ -4,10 +4,10 @@ name: TextInput import { TextInput } from '@tesseract-design/react-common' import Playground from '../../components/Playground/Playground' +import Props from '../../components/Props/Props' +import Header from '../../components/Header/Header' -# TextInput - -Component for inputting textual values. +
## Usage Notes @@ -52,19 +52,19 @@ some content that is best displayed outside the component instead of putting in style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }} >
- +
- +
- +
- +
- + Consult the fees table for shipping fee details. diff --git a/packages/react-common-docs/src/pages/theming.md b/packages/react-common-docs/src/pages/theming.md index d4d24c3..464269a 100644 --- a/packages/react-common-docs/src/pages/theming.md +++ b/packages/react-common-docs/src/pages/theming.md @@ -1,6 +1,5 @@ --- name: Theming -route: /theming --- # Theming diff --git a/packages/react-common-docs/yarn.lock b/packages/react-common-docs/yarn.lock index 2a467c0..8947edd 100644 --- a/packages/react-common-docs/yarn.lock +++ b/packages/react-common-docs/yarn.lock @@ -1140,6 +1140,13 @@ resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6" integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw== +"@mapbox/hast-util-table-cell-style@^0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6" + integrity sha512-QsEsh5YaDvHoMQ2YHdvZy2iDnU3GgKVBTcHf6cILyoWDZtPSdlG444pL/ioPYO/GpXSfODBb9sefEetfC4v9oA== + dependencies: + unist-util-visit "^1.3.0" + "@mdx-js/loader@^0.15.0": version "0.15.7" resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-0.15.7.tgz#dd184301607579b3aa5021dc50e2ae2a04e478dc" @@ -2540,7 +2547,7 @@ data-uri-to-buffer@3.0.0: dependencies: buffer-from "^1.1.1" -debug@4, debug@^4.1.0: +debug@4, debug@^4.0.0, debug@^4.1.0: version "4.2.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1" integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg== @@ -3321,6 +3328,13 @@ hast-util-raw@6.0.1: xtend "^4.0.0" zwitch "^1.0.0" +hast-util-sanitize@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-3.0.1.tgz#c6a0853a3cbd174995e394aa1fee218f2dafbfad" + integrity sha512-XQmIuBSa+DHfAhkrVvtHoSdSLgOnNeBijLY4NPIJgxvpH8MjLof0p68ZADWfWebU7nCWY450HQJZvas6RFKwDA== + dependencies: + xtend "^4.0.0" + hast-util-to-parse5@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-6.0.0.tgz#1ec44650b631d72952066cea9b1445df699f8479" @@ -4012,6 +4026,23 @@ mdast-util-definitions@^3.0.0: dependencies: unist-util-visit "^2.0.0" +mdast-util-definitions@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz#c5c1a84db799173b4dcf7643cda999e440c24db2" + integrity sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ== + dependencies: + unist-util-visit "^2.0.0" + +mdast-util-from-markdown@^0.8.0: + version "0.8.1" + resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.1.tgz#781371d493cac11212947226190270c15dc97116" + integrity sha512-qJXNcFcuCSPqUF0Tb0uYcFDIq67qwB3sxo9RPdf9vG8T90ViKnksFqdB/Coq2a7sTnxL/Ify2y7aIQXDkQFH0w== + dependencies: + "@types/mdast" "^3.0.0" + mdast-util-to-string "^1.0.0" + micromark "~2.10.0" + parse-entities "^2.0.0" + mdast-util-to-hast@9.1.1: version "9.1.1" resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-9.1.1.tgz#953ff12aed57464b11d7e5549a45913e561909fa" @@ -4026,6 +4057,20 @@ mdast-util-to-hast@9.1.1: unist-util-position "^3.0.0" unist-util-visit "^2.0.0" +mdast-util-to-hast@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.0.0.tgz#744dfe7907bac0263398a68af5aba16d104a9a08" + integrity sha512-dRyAC5S4eDcIOdkz4jg0wXbUdlf+5YFu7KppJNHOsMaD7ql5bKIqVcvXYYkcrKjzUkfX8JsKFVMthsU8OWxQ+w== + dependencies: + "@types/mdast" "^3.0.0" + "@types/unist" "^2.0.0" + mdast-util-definitions "^4.0.0" + mdurl "^1.0.0" + unist-builder "^2.0.0" + unist-util-generated "^1.0.0" + unist-util-position "^3.0.0" + unist-util-visit "^2.0.0" + mdast-util-to-hast@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-3.0.4.tgz#132001b266031192348d3366a6b011f28e54dc40" @@ -4043,6 +4088,11 @@ mdast-util-to-hast@^3.0.0: unist-util-visit "^1.1.0" xtend "^4.0.1" +mdast-util-to-string@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527" + integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A== + mdurl@^1.0.0, mdurl@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" @@ -4069,6 +4119,14 @@ merge-stream@^2.0.0: resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== +micromark@~2.10.0: + version "2.10.1" + resolved "https://registry.yarnpkg.com/micromark/-/micromark-2.10.1.tgz#cd73f54e0656f10e633073db26b663a221a442a7" + integrity sha512-fUuVF8sC1X7wsCS29SYQ2ZfIZYbTymp0EYr6sab3idFjigFFjGa5UwoniPlV9tAgntjuapW1t9U+S0yDYeGKHQ== + dependencies: + debug "^4.0.0" + parse-entities "^2.0.0" + micromatch@^3.1.10, micromatch@^3.1.4: version "3.1.10" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23" @@ -5004,6 +5062,11 @@ 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-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -5200,6 +5263,23 @@ remark-parse@^5.0.0: vfile-location "^2.0.0" xtend "^4.0.1" +remark-parse@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-9.0.0.tgz#4d20a299665880e4f4af5d90b7c7b8a935853640" + integrity sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw== + dependencies: + mdast-util-from-markdown "^0.8.0" + +remark-react@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/remark-react/-/remark-react-8.0.0.tgz#dc861df69c95e1084059effae699dac68a57191e" + integrity sha512-Dlafr0cejDMMMelH0MxkY3NYVelbMdqaoXuwIgWtWn5KGE0Jpko47NhkBzptxvzMqCdJxD6aoJTOFyJ1Re5Iyg== + dependencies: + "@mapbox/hast-util-table-cell-style" "^0.1.3" + hast-to-hyperscript "^9.0.0" + hast-util-sanitize "^3.0.0" + mdast-util-to-hast "^10.0.0" + remark-squeeze-paragraphs@4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-4.0.0.tgz#76eb0e085295131c84748c8e43810159c5653ead" @@ -6072,7 +6152,7 @@ unicode-property-aliases-ecmascript@^1.0.4: resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4" integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg== -unified@9.2.0: +unified@9.2.0, unified@^9.2.0: version "9.2.0" resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.0.tgz#67a62c627c40589edebbf60f53edfd4d822027f8" integrity sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg== diff --git a/packages/react-common/src/components/Button/Button.tsx b/packages/react-common/src/components/Button/Button.tsx index 07915c0..cfaa3b7 100644 --- a/packages/react-common/src/components/Button/Button.tsx +++ b/packages/react-common/src/components/Button/Button.tsx @@ -172,6 +172,9 @@ const propTypes = { type Props = PropTypes.InferProps +/** + * Component for performing an action upon activation (e.g. when clicked). + */ const Button = React.forwardRef( ( { diff --git a/packages/react-common/src/components/Icon/Icon.tsx b/packages/react-common/src/components/Icon/Icon.tsx index bd6d84c..5b4b3ae 100644 --- a/packages/react-common/src/components/Icon/Icon.tsx +++ b/packages/react-common/src/components/Icon/Icon.tsx @@ -43,6 +43,14 @@ const propTypes = { type Props = PropTypes.InferProps +/** + * Component for displaying graphics. + * @param name + * @param weight + * @param size + * @param label + * @constructor + */ const Icon: React.FC = ({ name, weight = '0.125rem', size = '1.5rem', label = name }) => { const iconName = pascalCase(name, { transform: pascalCaseTransformMerge }) const { [iconName as keyof typeof FeatherIcon]: TheIcon = null } = FeatherIcon diff --git a/packages/react-common/src/components/Select/Select.tsx b/packages/react-common/src/components/Select/Select.tsx index af181f0..6341237 100644 --- a/packages/react-common/src/components/Select/Select.tsx +++ b/packages/react-common/src/components/Select/Select.tsx @@ -218,6 +218,9 @@ const propTypes = { type Props = PropTypes.InferProps +/** + * Component for selecting values from a larger number of options. + */ const Select = React.forwardRef( ( { diff --git a/packages/react-common/src/components/TextInput/TextInput.tsx b/packages/react-common/src/components/TextInput/TextInput.tsx index f66b6e9..5b412bd 100644 --- a/packages/react-common/src/components/TextInput/TextInput.tsx +++ b/packages/react-common/src/components/TextInput/TextInput.tsx @@ -256,6 +256,9 @@ const propTypes = { type Props = PropTypes.InferProps +/** + * Component for inputting textual values. + */ const TextInput = React.forwardRef( ( {