Skip to content

Commit d6d8509

Browse files
brandongregoryscottbrandongregoryscott
authored
Cleanup doc site warnings, add types, etc. (#1615)
1 parent ad912ff commit d6d8509

40 files changed

+256
-259
lines changed

‎docs/components/ColorSample.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { majorScale, minorScale, Pane, useTheme, Text } from 'evergreen-ui'
2+
3+
interface ColorSampleProps {
4+
hex: string
5+
name: string
6+
description?: string
7+
}
8+
9+
const ColorSample: React.FC<ColorSampleProps> = ({ hex, name, description }) => {
10+
const { colors } = useTheme()
11+
return (
12+
<Pane display="flex" alignItems="center">
13+
<Pane width={majorScale(10)} height={majorScale(10)} backgroundColor={hex} borderRadius={5} />
14+
<Pane marginLeft={majorScale(2)} display="flex" alignItems="flex-start" flexDirection="column">
15+
<Text fontWeight="bold" size={500} marginBottom={majorScale(1)}>
16+
{name}
17+
</Text>
18+
{description && (
19+
<Text color="muted" marginBottom={majorScale(1)}>
20+
{description}
21+
</Text>
22+
)}
23+
<Text padding={minorScale(1)} backgroundColor={colors.gray100}>
24+
{hex}
25+
</Text>
26+
</Pane>
27+
</Pane>
28+
)
29+
}
30+
31+
export default ColorSample

‎docs/components/ColorSwatch.tsx

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,15 @@
11
import React, { useState } from 'react'
22
import SearchBar from './SearchBar'
3-
import { useTheme, majorScale, minorScale, Text, Pane } from 'evergreen-ui'
3+
import { useTheme, majorScale, Pane, DefaultThemeColors } from 'evergreen-ui'
4+
import ColorSample from './ColorSample'
45

5-
const Sample: React.FC<{ hex: string; name: string; description?: string }> = ({ hex, name, description }) => {
6-
const { colors } = useTheme() as any
7-
return (
8-
<Pane display="flex" alignItems="center">
9-
<Pane width={majorScale(10)} height={majorScale(10)} backgroundColor={hex} borderRadius={5} />
10-
<Pane marginLeft={majorScale(2)} display="flex" alignItems="flex-start" flexDirection="column">
11-
<Text fontWeight="bold" size={500} marginBottom={majorScale(1)}>
12-
{name}
13-
</Text>
14-
{description && (
15-
<Text color="muted" marginBottom={majorScale(1)}>
16-
{description}
17-
</Text>
18-
)}
19-
<Text padding={minorScale(1)} backgroundColor={colors.gray100}>
20-
{hex}
21-
</Text>
22-
</Pane>
23-
</Pane>
24-
)
25-
}
26-
27-
interface Props {}
28-
29-
const ColorSwatch: React.FC<Props> = () => {
6+
const ColorSwatch: React.FC = () => {
307
const [query, setQuery] = useState<string>('')
31-
const { colors } = useTheme() as any
8+
const { colors } = useTheme()
9+
const colorKeys = (Object.keys(colors) as Array<keyof typeof colors>)
10+
.filter((colorKey) => colorKey.toLowerCase().startsWith(query.toLowerCase()))
11+
.filter((colorKey) => typeof colors[colorKey] === 'string') as Array<DefaultThemeColors>
12+
3213
return (
3314
<Pane>
3415
<Pane marginBottom={majorScale(5)}>
@@ -39,12 +20,9 @@ const ColorSwatch: React.FC<Props> = () => {
3920
/>
4021
</Pane>
4122
<Pane display="grid" gridTemplateColumns="repeat(2, 1fr)" gridRowGap={majorScale(4)}>
42-
{Object.keys(colors)
43-
.filter((colorKey) => colorKey.toLowerCase().startsWith(query.toLowerCase()))
44-
.filter((colorKey) => typeof colors[colorKey] === 'string')
45-
.map((colorKey) => {
46-
return <Sample hex={colors[colorKey]} key={colorKey} name={colorKey} />
47-
})}
23+
{colorKeys.map((colorKey) => (
24+
<ColorSample hex={colors[colorKey]} key={colorKey} name={colorKey} />
25+
))}
4826
</Pane>
4927
</Pane>
5028
)

‎docs/components/ComingSoon.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ import React from 'react'
22
import { Heading, majorScale, Pane, Paragraph } from 'evergreen-ui'
33
import ComingSoonImage from './icons/ComingSoonImage'
44

5-
interface Props {}
6-
7-
const ComingSoon: React.FC<Props> = ({ children }) => {
5+
const ComingSoon: React.FC = ({ children }) => {
86
return (
97
<Pane width="100%" display="flex" flexFlow="column" alignItems="center" padding={majorScale(5)} maxWidth={1200}>
108
<ComingSoonImage />

‎docs/components/CopyableIcon.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import * as evergreen from 'evergreen-ui'
2+
import CopyToClipboard from 'react-copy-to-clipboard'
3+
import { css } from 'otion'
4+
import { FunctionComponent, useCallback } from 'react'
5+
import { majorScale, Pane, toaster, Text } from 'evergreen-ui'
6+
import React from 'react'
7+
import { EvergreenExport } from '../types/evergreen-export'
8+
9+
interface CopyableIconProps {
10+
name: EvergreenExport
11+
}
12+
13+
const CopyableIcon: React.FC<CopyableIconProps> = ({ name }) => {
14+
const readableName = name.slice(0, name.indexOf('Icon'))
15+
16+
const handleCopy = useCallback(() => {
17+
toaster.success('Successfully copied icon name to clipboard!')
18+
}, [])
19+
20+
const icon = evergreen[name]
21+
22+
if (icon == null) {
23+
return null
24+
}
25+
26+
return (
27+
<CopyToClipboard text={name} onCopy={handleCopy}>
28+
<Pane
29+
display="flex"
30+
justifyContent="center"
31+
alignItems="center"
32+
flexDirection="column"
33+
cursor="pointer"
34+
borderRadius={5}
35+
paddingY={majorScale(3)}
36+
className={css({
37+
':hover': {
38+
background: '#efefef60',
39+
},
40+
':active': {
41+
background: '#efefef90',
42+
},
43+
})}
44+
>
45+
{React.createElement(icon as FunctionComponent<evergreen.IconProps>, {
46+
size: majorScale(3),
47+
color: 'default',
48+
marginBottom: majorScale(3),
49+
})}
50+
<Text color="muted" size={300} maxWidth="100%">
51+
{readableName}
52+
</Text>
53+
</Pane>
54+
</CopyToClipboard>
55+
)
56+
}
57+
58+
export default CopyableIcon

‎docs/components/IconSearch.tsx

Lines changed: 11 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,18 @@
1-
import React, { useState, useCallback } from 'react'
1+
import React, { useState } from 'react'
22
import SearchBar from './SearchBar'
3-
import { css } from 'otion'
4-
import CopyToClipboard from 'react-copy-to-clipboard'
53
import * as evergreen from 'evergreen-ui'
4+
import { Pane, majorScale, Text } from 'evergreen-ui'
5+
import CopyableIcon from './CopyableIcon'
6+
import { EvergreenExport } from '../types/evergreen-export'
67

7-
const { Pane, majorScale, Text, toaster } = evergreen
8-
9-
interface Props {}
10-
11-
const Item: React.FC<{ name: string }> = ({ name }) => {
12-
const readableName = name.slice(0, name.indexOf('Icon'))
13-
14-
const handleCopy = useCallback(() => {
15-
toaster.success('Successfully copied icon name to clipboard!')
16-
}, [])
17-
18-
// eslint-disable-next-line
19-
// @ts-ignore
20-
if (evergreen[name]) {
21-
return (
22-
<CopyToClipboard text={name} onCopy={handleCopy}>
23-
<Pane
24-
display="flex"
25-
justifyContent="center"
26-
alignItems="center"
27-
flexDirection="column"
28-
cursor="pointer"
29-
borderRadius={5}
30-
paddingY={majorScale(3)}
31-
className={css({
32-
':hover': {
33-
background: '#efefef60',
34-
},
35-
':active': {
36-
background: '#efefef90',
37-
},
38-
})}
39-
>
40-
{/* eslint-disable-next-line */}
41-
{/* @ts-ignore */}
42-
{React.createElement(evergreen[name] as any, {
43-
size: majorScale(3),
44-
color: 'default',
45-
marginBottom: majorScale(3),
46-
})}
47-
<Text color="muted" size={300} maxWidth="100%">
48-
{readableName}
49-
</Text>
50-
</Pane>
51-
</CopyToClipboard>
52-
)
53-
} else {
54-
return null
55-
}
56-
}
57-
const IconSearch: React.FC<Props> = () => {
8+
const IconSearch: React.FC = () => {
589
const [query, setQuery] = useState<string>('')
5910

6011
const iconComponentNames = Object.keys(evergreen)
6112
.filter((componentName) => componentName.endsWith('Icon') && componentName !== 'Icon')
62-
.filter((componentName) => componentName.toLowerCase().indexOf(query.toLowerCase()) !== -1)
13+
.filter(
14+
(componentName) => componentName.toLowerCase().indexOf(query.toLowerCase()) !== -1
15+
) as Array<EvergreenExport>
6316

6417
return (
6518
<Pane width="100%" minHeight={250}>
@@ -72,9 +25,9 @@ const IconSearch: React.FC<Props> = () => {
7225
columnGap={majorScale(8)}
7326
gridTemplateColumns="repeat(auto-fill, 168px)"
7427
>
75-
{iconComponentNames.map((componentName) => {
76-
return <Item key={componentName} name={componentName} />
77-
})}
28+
{iconComponentNames.map((componentName) => (
29+
<CopyableIcon key={componentName} name={componentName} />
30+
))}
7831
</Pane>
7932
) : (
8033
<Pane display="flex" alignItems="center" justifyContent="center" width="100%" marginTop={majorScale(5)}>

‎docs/components/MDX/componentMapping.tsx

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import SectionHeading from './renderers/SectionHeading'
2-
import Code from './renderers/Code'
1+
import SectionHeading, { SectionHeadingProps } from './renderers/SectionHeading'
2+
import SourceCode, { SourceCodeProps } from './renderers/SourceCode'
33
import InlineCode from './renderers/InlineCode'
44
import Blockquote from './renderers/Blockquote'
55
import RuleCard from './renderers/RuleCard'
@@ -25,23 +25,30 @@ import {
2525
AlertProps,
2626
Alert,
2727
InlineAlertProps,
28+
ParagraphProps,
29+
LinkProps,
30+
StrongProps,
31+
OrderedListProps,
32+
UnorderedListProps,
33+
ListItemProps,
34+
CodeProps,
2835
} from 'evergreen-ui'
2936

3037
const componentMapping = {
31-
h1: (props: any) => <SectionHeading size={800} {...props} />,
32-
h2: (props: any) => <SectionHeading size={700} {...props} />,
33-
h3: (props: any) => <SectionHeading size={600} {...props} />,
34-
h4: (props: any) => <SectionHeading size={500} {...props} />,
35-
h5: (props: any) => <SectionHeading size={300} {...props} />,
36-
h6: (props: any) => <SectionHeading size={200} {...props} />,
37-
code: (props: { className: string; metastring: string; children: any }) => <Code {...props} />,
38-
p: (props: any) => <Paragraph marginBottom={majorScale(3)} {...props} />,
39-
a: (props: any) => <EvergreenLink {...props} />,
40-
strong: (props: any) => <Strong {...props} />,
41-
ol: (props: any) => <Ol {...props} />,
42-
ul: (props: any) => <Ul {...props} marginTop="-16px" />,
43-
li: (props: any) => <Li {...props} />,
44-
inlineCode: (props: any) => <InlineCode {...props} />,
38+
h1: (props: SectionHeadingProps) => <SectionHeading size={800} {...props} />,
39+
h2: (props: SectionHeadingProps) => <SectionHeading size={700} {...props} />,
40+
h3: (props: SectionHeadingProps) => <SectionHeading size={600} {...props} />,
41+
h4: (props: SectionHeadingProps) => <SectionHeading size={500} {...props} />,
42+
h5: (props: SectionHeadingProps) => <SectionHeading size={300} {...props} />,
43+
h6: (props: SectionHeadingProps) => <SectionHeading size={200} {...props} />,
44+
code: (props: SourceCodeProps) => <SourceCode {...props} />,
45+
p: (props: ParagraphProps) => <Paragraph marginBottom={majorScale(3)} {...props} />,
46+
a: (props: LinkProps) => <EvergreenLink {...props} />,
47+
strong: (props: StrongProps) => <Strong {...props} />,
48+
ol: (props: OrderedListProps) => <Ol {...props} />,
49+
ul: (props: UnorderedListProps) => <Ul {...props} marginTop="-16px" />,
50+
li: (props: ListItemProps) => <Li {...props} />,
51+
inlineCode: (props: CodeProps) => <InlineCode {...props} />,
4552
Alert: (props: AlertProps) => <Alert {...props} />,
4653
InlineAlert: (props: InlineAlertProps) => <InlineAlert marginBottom={majorScale(3)} {...props} />,
4754
Pane: (props: PaneProps) => <Pane {...props} />,

‎docs/components/MDX/renderers/InlineCode.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React from 'react'
22
import { Code, useTheme } from 'evergreen-ui'
33

4-
interface Props {}
5-
6-
const InlineCode: React.FC<Props> = ({ children }) => {
7-
const { colors } = useTheme() as any
4+
const InlineCode: React.FC = ({ children }) => {
5+
const { colors } = useTheme()
86

97
return (
108
<Code

‎docs/components/MDX/renderers/RuleLayout.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { majorScale, Pane } from 'evergreen-ui'
22
import React from 'react'
33

4-
interface Props {}
5-
6-
const RuleLayout: React.FC<Props> = ({ children }) => {
4+
const RuleLayout: React.FC = ({ children }) => {
75
return (
86
<Pane display="flex" marginBottom={majorScale(4)}>
97
{children}

‎docs/components/MDX/renderers/SectionHeading.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from 'react'
22
import { HeadingOwnProps, Heading, Pane, majorScale, Link, LinkIcon } from 'evergreen-ui'
33

4-
interface Props {
5-
size: HeadingOwnProps['size']
4+
export interface SectionHeadingProps extends Pick<HeadingOwnProps, 'size'> {
65
children: string
76
}
87

9-
const SectionHeading: React.FC<Props> = ({ size, children }) => {
8+
const SectionHeading: React.FC<SectionHeadingProps> = ({ size, children }) => {
109
const idIndex = children.indexOf('{#')
1110
const text = idIndex !== -1 ? children.substring(0, idIndex) : children
1211

‎docs/components/MDX/renderers/Code.tsx renamed to ‎docs/components/MDX/renderers/SourceCode.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import React from 'react'
22
import SyntaxHighlighter from '../../SyntaxHighlighter'
33
import Playground from '../../Playground'
44

5-
interface Props {
5+
export interface SourceCodeProps {
66
className: string
77
metastring: string
8-
children: any
8+
children: string
99
}
1010

11-
const Code: React.FC<Props> = ({ className, metastring, children }) => {
11+
const SourceCode: React.FC<SourceCodeProps> = ({ className, metastring, children }) => {
1212
if (metastring !== 'readonly') {
1313
return <Playground source={children} />
1414
} else {
@@ -17,4 +17,4 @@ const Code: React.FC<Props> = ({ className, metastring, children }) => {
1717
}
1818
}
1919

20-
export default Code
20+
export default SourceCode

0 commit comments

Comments
 (0)