Test docs against Lynx, also make docs print-friendly.tags/0.3.0
@@ -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" | |||
@@ -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> | |||
@@ -60,4 +60,9 @@ pre { | |||
img { | |||
filter: grayscale(100%); | |||
} | |||
:root { | |||
--color-accent: black !important; | |||
--color-active: black !important; | |||
} | |||
} |
@@ -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,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,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; | |||
@@ -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> | |||
@@ -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> | |||
) | |||
} | |||
@@ -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> | |||
@@ -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 ( | |||
@@ -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={{ | |||
@@ -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 |
@@ -11,7 +11,9 @@ import Header from '../../components/Header/Header' | |||
<Playground | |||
code={` | |||
<Button> | |||
<Button | |||
border | |||
> | |||
Perform Action | |||
</Button> | |||
`} | |||
@@ -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: | |||
@@ -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' | |||
@@ -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' | |||