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

Add props parsing 

Display prop table in each component's props section
tags/0.3.0
TheoryOfNekomata 4 years ago
parent
17411a44b1
commit
489dcfd2dc
23 changed files with 1082 additions and 47 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      packages/react-common-docs/next-env.d.ts
  2. +7
    -2
      packages/react-common-docs/package.json
  3. +8
    -0
      packages/react-common-docs/public/theme/dark.css
  4. +8
    -0
      packages/react-common-docs/public/theme/light.css
  5. +22
    -0
      packages/react-common-docs/scripts/docgen.js
  6. +35
    -0
      packages/react-common-docs/src/components/Header/Header.tsx
  7. +7
    -2
      packages/react-common-docs/src/components/Playground/Playground.tsx
  8. +176
    -0
      packages/react-common-docs/src/components/Props/Props.tsx
  9. +683
    -0
      packages/react-common-docs/src/docgen.json
  10. +3
    -4
      packages/react-common-docs/src/pages/_app.tsx
  11. +4
    -4
      packages/react-common-docs/src/pages/components/Button.mdx
  12. +4
    -4
      packages/react-common-docs/src/pages/components/Checkbox.mdx
  13. +4
    -4
      packages/react-common-docs/src/pages/components/Icon.mdx
  14. +4
    -4
      packages/react-common-docs/src/pages/components/RadioButton.mdx
  15. +4
    -4
      packages/react-common-docs/src/pages/components/Select.mdx
  16. +4
    -7
      packages/react-common-docs/src/pages/components/Slider.mdx
  17. +9
    -9
      packages/react-common-docs/src/pages/components/TextInput.mdx
  18. +0
    -1
      packages/react-common-docs/src/pages/theming.md
  19. +82
    -2
      packages/react-common-docs/yarn.lock
  20. +3
    -0
      packages/react-common/src/components/Button/Button.tsx
  21. +8
    -0
      packages/react-common/src/components/Icon/Icon.tsx
  22. +3
    -0
      packages/react-common/src/components/Select/Select.tsx
  23. +3
    -0
      packages/react-common/src/components/TextInput/TextInput.tsx

+ 1
- 0
packages/react-common-docs/next-env.d.ts View File

@@ -1,2 +1,3 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
declare module 'remark-react'

+ 7
- 2
packages/react-common-docs/package.json View File

@@ -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"
}
}

+ 8
- 0
packages/react-common-docs/public/theme/dark.css View File

@@ -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;
}

+ 8
- 0
packages/react-common-docs/public/theme/light.css View File

@@ -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;
}

+ 22
- 0
packages/react-common-docs/scripts/docgen.js View File

@@ -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) => {

})
})

+ 35
- 0
packages/react-common-docs/src/components/Header/Header.tsx View File

@@ -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 (
<React.Fragment>
<Head>
<title>
{docs.displayName} | React Common
</title>
</Head>
<h1>{docs.displayName}</h1>
<p>
{
unified()
.use(parse)
.use(remark2react)
.processSync(docs.description).result
}
</p>
</React.Fragment>
)
}

export default Header

+ 7
- 2
packages/react-common-docs/src/components/Playground/Playground.tsx View File

@@ -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,
}}>
<LivePreview />
<LiveEditor />
<StyledLiveEditor />
</LiveProvider>
</div>
</Figure>


+ 176
- 0
packages/react-common-docs/src/components/Props/Props.tsx View File

@@ -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 (
<Base>
<colgroup>
<col width="20%" />
<col width="25%" />
<col width="25%" />
<col width="*" />
</colgroup>
<HeaderCellGroup>
<HeaderRow>
<HeaderCell>
Name
</HeaderCell>
<HeaderCell>
Type
</HeaderCell>
<HeaderCell>
Default
</HeaderCell>
<HeaderCell>
Description
</HeaderCell>
</HeaderRow>
</HeaderCellGroup>
<BodyCellGroup>
{
Object.entries(docs.props).map(([name, def]) => (
<HeaderRow>
<MainBodyCell>
<Code>
{def.required ? name : name + '?'}
</Code>
</MainBodyCell>
<BodyCell
data-column-name="Type"
>
{
def.type.name === 'enum'
&& (
<Code>
{def.type.value.map(v => v.value).join(' | ')}
</Code>
)
}
{
def.type.name !== 'enum'
&& (
<Code>
{def.type.name}
</Code>
)
}
</BodyCell>
<BodyCell
data-column-name={def.defaultValue ? 'Default' : undefined }
>
{
def.defaultValue
&& (
<Code>
{JSON.stringify(def.defaultValue.value)}
</Code>
)
}
</BodyCell>
<BodyCell>
{def.description}
</BodyCell>
</HeaderRow>
))
}
</BodyCellGroup>
</Base>
)
}

export default Props

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

@@ -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 `<input type=\"range\">` 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"
}
}
}
}
]

+ 3
- 4
packages/react-common-docs/src/pages/_app.tsx View File

@@ -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
}) => (
<div>
<Sidebar


+ 4
- 4
packages/react-common-docs/src/pages/components/Button.mdx View File

@@ -4,10 +4,10 @@ title: Button

import { Button } from '@tesseract-design/react-common'
import Playground from '../../components/Playground/Playground'
import Props from '../../components/Props/Props'
import Header from '../../components/Header/Header'

# Button

Component for performing an action upon activation (e.g. when clicked).
<Header of="Button" />

<Playground
code={`
@@ -20,7 +20,7 @@ Component for performing an action upon activation (e.g. when clicked).

## Props

Props
<Props of="Button" />

## Usage Notes



+ 4
- 4
packages/react-common-docs/src/pages/components/Checkbox.mdx View File

@@ -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.
<Header of="Checkbox" />

<Playground
components={{ Checkbox }}
@@ -18,7 +18,7 @@ Component for values that have an on/off state.

## Props

Props
<Props of="Checkbox" />

## See Also



+ 4
- 4
packages/react-common-docs/src/pages/components/Icon.mdx View File

@@ -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.
<Header of="Icon" />

<Playground
components={{ Icon }}
@@ -18,4 +18,4 @@ Component for displaying graphics.

## Props

Props
<Props of="Icon" />

+ 4
- 4
packages/react-common-docs/src/pages/components/RadioButton.mdx View File

@@ -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.
<Header of="RadioButton" />

<Playground
components={{ RadioButton }}
@@ -25,7 +25,7 @@ Component for values which are to be selected from a few list of options.

## Props

Props
<Props of="RadioButton" />

## See Also



+ 4
- 4
packages/react-common-docs/src/pages/components/Select.mdx View File

@@ -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.
<Header of="Select" />

<Playground
components={{ Select }}
@@ -32,7 +32,7 @@ Component for selecting values from a larger number of options.

## Props

Props
<Props of="Select" />

## Usage Notes



+ 4
- 7
packages/react-common-docs/src/pages/components/Slider.mdx View File

@@ -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 `<input type="range">` element.
<Header of="Slider" />

<Playground
components={{ Slider }}
@@ -21,7 +18,7 @@ the component falls back into the original `<input type="range">` element.

## Props

Props
<Props of="Slider" />

## See Also



+ 9
- 9
packages/react-common-docs/src/pages/components/TextInput.mdx View File

@@ -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.
<Header of="TextInput" />

<Playground
components={{ TextInput }}
@@ -18,7 +18,7 @@ Component for inputting textual values.

## Props

Props
<Props of="TextInput" />

## 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', }}
>
<div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
<TextInput label="Address line 1" hint="unit/house number, building" />
<TextInput border label="Address line 1" hint="unit/house number, building" />
</div>
<div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
<TextInput label="Address line 2" hint="street, area" />
<TextInput border label="Address line 2" hint="street, area" />
</div>
<div>
<TextInput size="large" label="City/Town" />
<TextInput border size="large" label="City/Town" />
</div>
<div>
<TextInput size="large" label="State/Province" />
<TextInput border size="large" label="State/Province" />
</div>
<div>
<TextInput size="large" label="Country" hint="abbreviations are accepted" />
<TextInput border size="large" label="Country" hint="abbreviations are accepted" />
<small>
Consult the <a href="#">fees table</a> for shipping fee details.
</small>


+ 0
- 1
packages/react-common-docs/src/pages/theming.md View File

@@ -1,6 +1,5 @@
---
name: Theming
route: /theming
---

# Theming


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

@@ -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==


+ 3
- 0
packages/react-common/src/components/Button/Button.tsx View File

@@ -172,6 +172,9 @@ const propTypes = {

type Props = PropTypes.InferProps<typeof propTypes>

/**
* Component for performing an action upon activation (e.g. when clicked).
*/
const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, Props>(
(
{


+ 8
- 0
packages/react-common/src/components/Icon/Icon.tsx View File

@@ -43,6 +43,14 @@ const propTypes = {

type Props = PropTypes.InferProps<typeof propTypes>

/**
* Component for displaying graphics.
* @param name
* @param weight
* @param size
* @param label
* @constructor
*/
const Icon: React.FC<Props> = ({ name, weight = '0.125rem', size = '1.5rem', label = name }) => {
const iconName = pascalCase(name, { transform: pascalCaseTransformMerge })
const { [iconName as keyof typeof FeatherIcon]: TheIcon = null } = FeatherIcon


+ 3
- 0
packages/react-common/src/components/Select/Select.tsx View File

@@ -218,6 +218,9 @@ const propTypes = {

type Props = PropTypes.InferProps<typeof propTypes>

/**
* Component for selecting values from a larger number of options.
*/
const Select = React.forwardRef<HTMLSelectElement, Props>(
(
{


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

@@ -256,6 +256,9 @@ const propTypes = {

type Props = PropTypes.InferProps<typeof propTypes>

/**
* Component for inputting textual values.
*/
const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props>(
(
{


Write Preview
Loading…
Cancel
Save