Browse Source

Improve compatibility of docs, theme

Test docs against Lynx, also make docs print-friendly.
tags/0.3.0
TheoryOfNekomata 3 years ago
parent
commit
e50eb72ecb
16 changed files with 176 additions and 95 deletions
  1. +2
    -1
      package.json
  2. +10
    -5
      packages/react-common-docs/brand.tsx
  3. +5
    -0
      packages/react-common-docs/public/global.css
  4. +2
    -0
      packages/react-common-docs/public/theme.css
  5. +2
    -2
      packages/react-common-docs/public/theme/dark.css
  6. +2
    -2
      packages/react-common-docs/public/theme/light.css
  7. +16
    -9
      packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx
  8. +23
    -19
      packages/react-common-docs/src/components/Nav/Nav.tsx
  9. +46
    -16
      packages/react-common-docs/src/components/Playground/Playground.tsx
  10. +1
    -1
      packages/react-common-docs/src/components/Props/Props.tsx
  11. +28
    -18
      packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
  12. +23
    -14
      packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx
  13. +3
    -1
      packages/react-common-docs/src/pages/components/Button.mdx
  14. +1
    -1
      packages/react-common-docs/src/pages/index.md
  15. +4
    -2
      packages/react-common/src/components/Select/Select.tsx
  16. +8
    -4
      packages/react-common/src/components/TextInput/TextInput.tsx

+ 2
- 1
package.json View File

@@ -1,7 +1,8 @@
{
"name": "@tesseract-design/react-common",
"title": "React Common",
"version": "0.2.3",
"org": "Tesseract Design",
"version": "0.2.4",
"description": "Common front-end components for Web using the Tesseract design system, written in React.",
"directories": {
"lib": "dist"


+ 10
- 5
packages/react-common-docs/brand.tsx View File

@@ -22,6 +22,7 @@ const Org = styled('small')({
top: '-0.25em',
right: 0,
fontWeight: 600,
textTransform: 'lowercase',
})

const Subtitle = styled('small')({
@@ -32,18 +33,22 @@ const Subtitle = styled('small')({
})

const Brand = () => {
const org = pkg.name.includes('@') ? pkg.name.split('/')[0].slice(1) : null
const name = pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name
const org = pkg['org'] || (pkg.name.includes('@') ? pkg.name.split('/')[0].slice(1) : null)
const name = pkg['title'] || (pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name)
return (
<Base>
{org && (
<Org>
{org}
</Org>
<React.Fragment>
<Org>
{org}
</Org>
{' '}
</React.Fragment>
)}
<Title>
{name}
</Title>
{' '}
<Subtitle>
v.{pkg.version}
</Subtitle>


+ 5
- 0
packages/react-common-docs/public/global.css View File

@@ -60,4 +60,9 @@ pre {
img {
filter: grayscale(100%);
}

:root {
--color-accent: black !important;
--color-active: black !important;
}
}

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

@@ -61,6 +61,8 @@
:root {
--color-bg: var(--color-negative, white);
--color-fg: var(--color-positive, black);
--color-accent: var(--color-primary, blue);
--color-active: var(--color-secondary, red);
}

@media (prefers-color-scheme: dark) {


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

@@ -2,8 +2,8 @@
--color-shade: #000;
--color-negative: #222;
--color-positive: #eee;
--color-accent: #C78AB3;
--color-active: #f90;
--color-primary: #C78AB3;
--color-secondary: #f90;
--color-code-number: #74f95e;
--color-code-keyword: #ff4389;
--color-code-type: #5097D2;


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

@@ -2,8 +2,8 @@
--color-shade: #fff;
--color-negative: #f8f8f8;
--color-positive: #333;
--color-accent: #ba6a9c;
--color-active: #f90;
--color-primary: #ba6a9c;
--color-secondary: #f90;
--color-code-number: #72b507;
--color-code-keyword: #ee5189;
--color-code-type: #427fb1;


+ 16
- 9
packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx View File

@@ -58,15 +58,22 @@ const CodeBlock = ({ children }) => {
code={(code as string).trim()}
theme={PrismTheme}
>
{({ style, tokens, getLineProps, getTokenProps }) => (
<pre style={style}>
{tokens.map((line, i) => (
<div {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span {...getTokenProps({ token, key })} />
))}
</div>
))}
{({ tokens, getLineProps, getTokenProps }) => (
<pre>
<code>
{tokens.map((line, i) => (
<React.Fragment>
{
i > 0 && <br />
}
<span {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span {...getTokenProps({ token, key })} />
))}
</span>
</React.Fragment>
))}
</code>
</pre>
)}
</Highlight>


+ 23
- 19
packages/react-common-docs/src/components/Nav/Nav.tsx View File

@@ -71,35 +71,39 @@ const Nav: React.FC<Props> = ({
)
}
return (
<div>
<Link
href={value as string}
passHref
>
{
// @ts-ignore
<NavLink
href={value as string}
title={key}
enclosingComponent={Container}
/>
}
</Link>
</div>
)
}
return (
<div>
<Link
href={value as string}
href={data as string}
passHref
>
{
// @ts-ignore
<NavLink
href={value as string}
title={key}
href={data as string}
title={data as string}
enclosingComponent={Container}
/>
}
</Link>
)
}
return (
<Link
href={data as string}
passHref
>
{
// @ts-ignore
<NavLink
href={data as string}
title={data as string}
enclosingComponent={Container}
/>
}
</Link>
</div>
)
}



+ 46
- 16
packages/react-common-docs/src/components/Playground/Playground.tsx View File

@@ -9,13 +9,12 @@ import {
import styled from 'styled-components'

const Figure = styled('figure')({
display: 'none',
display: 'block',
margin: '0 -1rem',
padding: '1rem',
boxSizing: 'border-box',
position: 'relative',
'@media only screen': {
display: 'block',
margin: '0 -1rem',
padding: '1rem',
boxSizing: 'border-box',
position: 'relative',
'::before': {
position: 'absolute',
content: "''",
@@ -26,7 +25,14 @@ const Figure = styled('figure')({
left: 0,
width: '100%',
height: '100%',
},
}
},
})

const PlaygroundCaption = styled('span')({
display: 'none',
'@media only screen': {
display: 'inline',
},
})

@@ -38,6 +44,13 @@ const Caption = styled('figcaption')({
marginTop: '-0.5rem',
})

const CaptionPrint = styled(Caption)({
display: 'none',
'@media only screen': {
display: 'block',
},
})

const StyledLiveEditor = styled(LiveEditor)({
lineHeight: 1.125,
fontFamily: 'var(--font-family-monospace), monospace !important',
@@ -64,6 +77,7 @@ const Playground: React.FC<Props> = ({
code,
label,
}) => {
const [enabled, setEnabled, ] = React.useState(false)
const indentLevel = code.indexOf('<') - 1
const normalizedCode = code
.split('\n')
@@ -71,32 +85,48 @@ const Playground: React.FC<Props> = ({
.filter((s: string) => s.trim().length > 0)
.join('\n')

React.useEffect(() => {
setEnabled(true)
}, [])

return (
<Figure>
{
label as string
&& (
<Caption>
Playground - {label}
<PlaygroundCaption>
{'Playground - '}
</PlaygroundCaption>
{label}
</Caption>
)
}
{
!label
&& enabled
&& (
<Caption>
<CaptionPrint>
Playground
</Caption>
</CaptionPrint>
)
}
<div>
<LiveProvider code={normalizedCode} scope={{
...components,
}}>
<LiveProvider
code={normalizedCode}
scope={{
...components,
}}
>
<LivePreview />
<StyledLiveEditor
theme={PrismTheme}
/>
{
enabled
&& (
<StyledLiveEditor
theme={PrismTheme}
/>
)
}
</LiveProvider>
</div>
</Figure>


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

@@ -360,7 +360,7 @@ const Props: React.FC<Props> = ({ of: ofAttr }) => {
(unified()
.use(parse)
.use(remark2react)
.processSync(prop.description).result as any)
.processSync(prop.description).result.props.children[0] as any)
)
: undefined
return (


+ 28
- 18
packages/react-common-docs/src/components/Sidebar/Sidebar.tsx View File

@@ -118,6 +118,7 @@ const Sidebar: React.FC<Props> = ({
brand: BrandRaw,
initialTheme,
}) => {
const [enabled, setEnabled, ] = React.useState(false)
const [sidebar, setSidebar] = React.useState(false)
const navRef = React.useRef<HTMLDivElement>(null)
const Brand = BrandRaw!
@@ -149,26 +150,35 @@ const Sidebar: React.FC<Props> = ({
}
}, [])

React.useEffect(() => {
setEnabled(true)
}, [])

return (
<React.Fragment>
<SidebarToggle
onClick={toggleSidebar(!sidebar)}
>
{
!sidebar && (
<Icon
name="menu"
/>
)
}
{
sidebar && (
<Icon
name="x"
/>
)
}
</SidebarToggle>
{
enabled
&& (
<SidebarToggle
onClick={toggleSidebar(!sidebar)}
>
{
!sidebar && (
<Icon
name="menu"
/>
)
}
{
sidebar && (
<Icon
name="x"
/>
)
}
</SidebarToggle>
)
}
<Base
ref={navRef}
style={{


+ 23
- 14
packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx View File

@@ -38,6 +38,7 @@ const applyStyles = (theme) => {
const ThemeToggle = ({
initialTheme,
}) => {
const [enabled, setEnabled, ] = React.useState(false)
const [theme, setTheme] = React.useState(null)

const handleSetTheme = (e) => {
@@ -60,21 +61,29 @@ const ThemeToggle = ({
}
}, [theme])

return (
<ToggleWrapper>
<ToggleInput
type="checkbox"
checked={theme === 'Light'}
onChange={handleSetTheme}
/>
<span>
<Icon
label="Toggle Theme"
name={theme === 'Dark' ? 'moon' : 'sun'}
React.useEffect(() => {
setEnabled(true)
}, [])
if (enabled) {
return (
<ToggleWrapper>
<ToggleInput
type="checkbox"
checked={theme === 'Light'}
onChange={handleSetTheme}
/>
</span>
</ToggleWrapper>
)
<span>
<Icon
label="Toggle Theme"
name={theme === 'Dark' ? 'moon' : 'sun'}
/>
</span>
</ToggleWrapper>
)
}

return null
}

export default ThemeToggle

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

@@ -11,7 +11,9 @@ import Header from '../../components/Header/Header'

<Playground
code={`
<Button>
<Button
border
>
Perform Action
</Button>
`}


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

@@ -5,7 +5,7 @@ Common front-end components for Web using the [Tesseract design system](https://
Package:

[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)
[![Version List](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)

Dependencies:



+ 4
- 2
packages/react-common/src/components/Select/Select.tsx View File

@@ -77,8 +77,6 @@ LabelWrapper.displayName = 'span'

const Input = styled('select')({
display: 'block',
backgroundColor: 'var(--color-bg, white)',
color: 'var(--color-fg, black)',
appearance: 'none',
boxSizing: 'border-box',
position: 'relative',
@@ -103,6 +101,10 @@ const Input = styled('select')({
outline: 0,
border: 0,
},
'@media only screen': {
backgroundColor: 'var(--color-bg, white)',
color: 'var(--color-fg, black)',
},
})

Input.displayName = 'select'


+ 8
- 4
packages/react-common/src/components/TextInput/TextInput.tsx View File

@@ -110,8 +110,6 @@ const Border = styled('span')({

const Input = styled('input')({
display: 'block',
backgroundColor: 'var(--color-bg, white)',
color: 'var(--color-fg, black)',
verticalAlign: 'top',
paddingTop: 0,
paddingBottom: 0,
@@ -134,14 +132,16 @@ const Input = styled('input')({
':disabled': {
cursor: 'not-allowed',
},
'@media only screen': {
backgroundColor: 'var(--color-bg, white)',
color: 'var(--color-fg, black)',
},
})

Input.displayName = 'input'

const TextArea = styled('textarea')({
display: 'block',
backgroundColor: 'var(--color-bg, white)',
color: 'var(--color-fg, black)',
verticalAlign: 'top',
width: '100%',
boxSizing: 'border-box',
@@ -158,6 +158,10 @@ const TextArea = styled('textarea')({
':focus': {
outline: 0,
},
'@media only screen': {
backgroundColor: 'var(--color-bg, white)',
color: 'var(--color-fg, black)',
},
})

TextArea.displayName = 'textarea'


Loading…
Cancel
Save