Skip to content

Commit 2e1fcca

Browse files
katamartinkatamartin
committed
Add more types and cleanup index
1 parent b10801c commit 2e1fcca

File tree

5 files changed

+148
-70
lines changed

5 files changed

+148
-70
lines changed

‎src/blockquote.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { Children, PropsWithChildren } from 'react'
22
import { Box } from 'theme-ui'
33

4-
export type BlockQuoteProps = PropsWithChildren<{}>
4+
export type BlockquoteProps = PropsWithChildren<{}>
55

66
const specialChars = ['“', '"', "'", '‘']
77

8-
const Blockquote = ({ children }: BlockQuoteProps) => {
8+
const Blockquote = ({ children }: BlockquoteProps) => {
99
return (
1010
<Box variant='styles.blockquote'>
1111
{Children.map(children, (d, i) => {

src/callout.js renamed to src/callout.tsx

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,33 @@
1-
import React, { forwardRef } from 'react'
2-
import { Box } from 'theme-ui'
1+
import React, { forwardRef, ReactNode } from 'react'
2+
import { Box, ThemeUIStyleObject } from 'theme-ui'
3+
// @ts-ignore
34
import { Arrow } from '@carbonplan/icons'
45
import Link from './link'
56

7+
export interface CalloutProps {
8+
label: ReactNode
9+
children: ReactNode
10+
inverted?: boolean
11+
color: string
12+
href?: string
13+
internal?: boolean
14+
sx?: ThemeUIStyleObject
15+
}
16+
17+
type RefType = React.Ref<HTMLAnchorElement | HTMLButtonElement>
18+
619
const Callout = (
7-
{ label, children, inverted, color, href, internal, sx, ...props },
8-
ref
20+
{
21+
label,
22+
children,
23+
inverted,
24+
color,
25+
href,
26+
internal,
27+
sx,
28+
...props
29+
}: CalloutProps,
30+
ref: RefType
931
) => {
1032
const baseColor = color || (inverted ? 'secondary' : 'primary')
1133
const hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary'
@@ -22,7 +44,7 @@ const Callout = (
2244
letterSpacing: 'body',
2345
width: 'fit-content',
2446
cursor: 'pointer',
25-
textAlign: 'left',
47+
textAlign: 'left' as const,
2648
mb: [1],
2749
'@media (hover: hover) and (pointer: fine)': {
2850
'&:hover > #container > #arrow': {
@@ -78,17 +100,30 @@ const Callout = (
78100

79101
if (href) {
80102
return (
81-
<Link ref={ref} href={href} internal={internal} sx={style} {...props}>
103+
<Link
104+
ref={ref as React.Ref<HTMLAnchorElement>}
105+
href={href}
106+
internal={internal}
107+
sx={style}
108+
{...props}
109+
>
82110
{Inner}
83111
</Link>
84112
)
85113
} else {
86114
return (
87-
<Box ref={ref} as='button' sx={style} {...props}>
115+
<Box
116+
ref={ref as React.Ref<HTMLButtonElement>}
117+
as='button'
118+
sx={style}
119+
{...props}
120+
>
88121
{Inner}
89122
</Box>
90123
)
91124
}
92125
}
93126

94-
export default forwardRef(Callout)
127+
export default forwardRef<HTMLAnchorElement | HTMLButtonElement, CalloutProps>(
128+
Callout
129+
)

src/caption.js renamed to src/caption.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1-
import React from 'react'
2-
import { Box } from 'theme-ui'
1+
import React, { ReactNode } from 'react'
2+
import { Box, BoxProps } from 'theme-ui'
33

4-
const Caption = ({ as = 'figcaption', number, children, label = 'figure' }) => {
4+
export interface CaptionProps {
5+
as?: BoxProps['as']
6+
number?: number
7+
children: ReactNode
8+
label?: string
9+
}
10+
11+
const Caption = ({
12+
as = 'figcaption',
13+
number,
14+
children,
15+
label = 'figure',
16+
}: CaptionProps) => {
517
return (
618
<Box
719
as={as}

src/colorbar.js renamed to src/colorbar.tsx

Lines changed: 72 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,32 @@
1-
import React, { useState, useEffect, useRef } from 'react'
2-
import { Box, Flex } from 'theme-ui'
1+
import React, {
2+
useState,
3+
useEffect,
4+
useRef,
5+
ReactNode,
6+
MouseEventHandler,
7+
} from 'react'
8+
import { Box, Flex, FlexProps, ThemeUIStyleObject, get } from 'theme-ui'
39

10+
type SetClim = (setter: (prev: [number, number]) => [number, number]) => any
11+
12+
export interface ColorbarProps extends FlexProps {
13+
colormap: string[]
14+
label: ReactNode
15+
clim: [number, number]
16+
setClim?: SetClim
17+
setClimStep?: number
18+
units: ReactNode
19+
width: string
20+
height: string
21+
format?: (d: number) => ReactNode
22+
discrete?: boolean
23+
horizontal?: boolean
24+
bottom?: boolean
25+
sx?: ThemeUIStyleObject
26+
sxClim?: ThemeUIStyleObject
27+
}
428
const styles = {
5-
clim: (setClim) => {
29+
clim: (setClim?: SetClim): ThemeUIStyleObject & { userSelect: any } => {
630
return {
731
bg: 'unset',
832
border: 'none',
@@ -25,7 +49,7 @@ const DIMENSIONS = {
2549
height: ['80px', '110px', '110px', '130px'],
2650
}
2751

28-
const hexToRgb = (hex) => {
52+
const hexToRgb = (hex: string) => {
2953
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
3054
return result
3155
? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
@@ -35,7 +59,16 @@ const hexToRgb = (hex) => {
3559
: null
3660
}
3761

38-
const Gradient = ({ colormap, discrete, horizontal, width, height }) => {
62+
const Gradient = ({
63+
colormap,
64+
discrete,
65+
horizontal,
66+
width,
67+
height,
68+
}: Pick<
69+
ColorbarProps,
70+
'colormap' | 'discrete' | 'horizontal' | 'width' | 'height'
71+
>) => {
3972
const step = (1 / colormap.length) * 100
4073
const isHex = String(colormap[0]).startsWith('#')
4174
const values = colormap.map((color, i) => {
@@ -63,20 +96,26 @@ const Gradient = ({ colormap, discrete, horizontal, width, height }) => {
6396
minHeight: height || DIMENSIONS.height,
6497
}),
6598
mt: horizontal ? ['1px', '1px', '1px', 0] : 0,
66-
border: ({ colors }) => `solid 1px ${colors.hinted}`,
99+
border: (t) => `solid 1px ${get(t, 'colors.hinted')}`,
67100
background: css,
68101
}}
69102
/>
70103
)
71104
}
72105

73-
const Label = ({ label, units, horizontal }) => (
106+
const Label = ({
107+
label,
108+
units,
109+
horizontal,
110+
}: Pick<ColorbarProps, 'label' | 'units' | 'horizontal'>) => (
74111
<Box
75112
sx={
76-
!horizontal && {
77-
width: ['13px', '17px', '17px', '19px'],
78-
alignSelf: 'flex-end',
79-
}
113+
horizontal
114+
? undefined
115+
: {
116+
width: ['13px', '17px', '17px', '19px'],
117+
alignSelf: 'flex-end',
118+
}
80119
}
81120
>
82121
<Box
@@ -128,24 +167,25 @@ const Colorbar = ({
128167
sx,
129168
sxClim,
130169
...props
131-
}) => {
170+
}: ColorbarProps) => {
132171
if (!Array.isArray(colormap)) {
133172
throw new Error(`expected array for colormap, got '${colormap}'.`)
134173
}
135174

136-
const climRef = [useRef(), useRef()]
175+
const climRef = [useRef<HTMLDivElement>(), useRef<HTMLDivElement>()]
137176
const [climMinDragging, setClimMinDragging] = useState(false)
138177
const [climMaxDragging, setClimMaxDragging] = useState(false)
139178

140-
let x,
141-
y,
142-
dx,
143-
dy = 0
144-
let id = null
179+
let x: number,
180+
y: number,
181+
dx: number,
182+
dy: number = 0
183+
let id: null | string = null
145184
let init = [0, 0]
146185
let scale = setClimStep
147186

148-
const draggingFunction = (e) => {
187+
const draggingFunction = (e: MouseEvent) => {
188+
if (!setClim) return
149189
if (id === 'min' && !climMinDragging) setClimMinDragging(true)
150190
if (id === 'max' && !climMaxDragging) setClimMaxDragging(true)
151191
dx = e.pageX - x
@@ -163,10 +203,10 @@ const Colorbar = ({
163203
}
164204
}
165205

166-
const handleMouseDown = (e) => {
206+
const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
167207
y = e.pageY
168208
x = e.pageX
169-
id = e.target.id
209+
id = (e.target as HTMLDivElement).id
170210
init = clim
171211

172212
document.body.setAttribute(
@@ -186,7 +226,9 @@ const Colorbar = ({
186226
window.addEventListener('mouseup', updater)
187227
}
188228

189-
const increment = (e) => {
229+
const increment = (e: KeyboardEvent) => {
230+
if (!setClim) return
231+
190232
if (climRef[0].current === document.activeElement) {
191233
e.preventDefault()
192234
setClim((prev) => [Math.min(prev[0] + scale, prev[1]), prev[1]])
@@ -199,7 +241,9 @@ const Colorbar = ({
199241
}
200242
}
201243

202-
const decrement = (e) => {
244+
const decrement = (e: KeyboardEvent) => {
245+
if (!setClim) return
246+
203247
if (climRef[0].current === document.activeElement) {
204248
e.preventDefault()
205249
setClim((prev) => [Math.min(prev[0] - scale, prev[1]), prev[1]])
@@ -213,7 +257,7 @@ const Colorbar = ({
213257
}
214258

215259
useEffect(() => {
216-
const listener = (e) => {
260+
const listener = (e: KeyboardEvent) => {
217261
if (
218262
['ArrowUp', 'ArrowRight'].includes(e.code) ||
219263
['ArrowUp', 'ArrowRight'].includes(e.key)
@@ -253,7 +297,7 @@ const Colorbar = ({
253297
mr: horizontal ? ['2px', '1px', '1px', '2px'] : 0,
254298
mb: horizontal ? 0 : ['-2px', '-2px', '-2px', '-3px'],
255299
borderBottom: setClim
256-
? ({ colors }) => `solid 1px ${colors.primary}`
300+
? (t) => `solid 1px ${get(t, 'colors.primary')}`
257301
: 'unset',
258302
cursor: setClim
259303
? horizontal
@@ -263,7 +307,7 @@ const Colorbar = ({
263307
...sxClim,
264308
}}
265309
onMouseDown={setClim ? handleMouseDown : () => {}}
266-
onClick={() => climRef[0].current.focus()}
310+
onClick={() => climRef[0].current?.focus()}
267311
>
268312
{format(clim[0])}
269313
</Box>
@@ -284,7 +328,7 @@ const Colorbar = ({
284328
: ['2px', '1px', '1px', '2px'],
285329
mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px'],
286330
borderBottom: setClim
287-
? ({ colors }) => `solid 1px ${colors.primary}`
331+
? (t) => `solid 1px ${get(t, 'colors.primary')}`
288332
: 'unset',
289333
cursor: setClim
290334
? horizontal
@@ -294,7 +338,7 @@ const Colorbar = ({
294338
...sxClim,
295339
}}
296340
onMouseDown={setClim ? handleMouseDown : () => {}}
297-
onClick={() => climRef[1].current.focus()}
341+
onClick={() => climRef[1].current?.focus()}
298342
>
299343
{format(clim[1])}
300344
</Box>

‎src/index.ts‎

Lines changed: 16 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,37 @@
1-
export { default as Avatar } from './avatar'
2-
export type { AvatarProps } from './avatar'
3-
export { default as AvatarGroup } from './avatar-group'
4-
export type { AvatarGroupProps } from './avatar-group'
5-
export { default as Badge } from './badge'
6-
export type { BadgeProps } from './badge'
7-
export { default as Blockquote } from './blockquote'
8-
export type { BlockQuoteProps } from './blockquote'
9-
export { default as Button } from './button'
10-
export type { ButtonProps } from './button'
11-
export { default as Callout } from './callout'
12-
export { default as Caption } from './caption'
13-
export { default as Colorbar } from './colorbar'
1+
export { default as Avatar, AvatarProps } from './avatar'
2+
export { default as AvatarGroup, AvatarGroupProps } from './avatar-group'
3+
export { default as Badge, BadgeProps } from './badge'
4+
export { default as Blockquote, BlockquoteProps } from './blockquote'
5+
export { default as Button, ButtonProps } from './button'
6+
export { default as Callout, CalloutProps } from './callout'
7+
export { default as Caption, CaptionProps } from './caption'
8+
export { default as Colorbar, ColorbarProps } from './colorbar'
149
export { default as Colors } from './colors'
15-
export { default as Column } from './column'
16-
export type { ColumnProps } from './column'
10+
export { default as Column, ColumnProps } from './column'
1711
export { default as Custom404 } from './custom-404'
18-
export { default as Dimmer } from './dimmer'
19-
export type { DimmerProps } from './dimmer'
12+
export { default as Dimmer, DimmerProps } from './dimmer'
2013
export { default as Expander } from './expander'
2114
export { default as FadeIn } from './fade-in'
2215
export { default as Figure } from './figure'
2316
export { default as FigureCaption } from './figure-caption'
2417
export { default as Filter } from './filter'
2518
export { default as Footer } from './footer'
26-
export { default as Group } from './group'
27-
export type { GroupProps } from './group'
19+
export { default as Group, GroupProps } from './group'
2820
export { default as Guide } from './guide'
29-
export { default as Header } from './header'
30-
export type { HeaderProps } from './header'
21+
export { default as Header, HeaderProps } from './header'
3122
export { default as Heading } from './heading'
3223
export { default as Input } from './input'
33-
export { default as Layout } from './layout'
34-
export type { LayoutProps } from './layout'
35-
export { default as Link } from './link'
36-
export type { LinkProps } from './link'
24+
export { default as Layout, LayoutProps } from './layout'
25+
export { default as Link, LinkProps } from './link'
3726
export { default as LinkGroup } from './link-group'
3827
export { default as Logo } from './logo'
3928
export { default as Meta } from './meta'
4029
export { default as Monogram } from './monogram'
4130
export { default as Menu } from './menu'
42-
export { default as Row } from './row'
43-
export type { RowProps } from './row'
31+
export { default as Row, RowProps } from './row'
4432
export { default as Scrollbar } from './scrollbar'
4533
export { default as Select } from './select'
46-
export { default as Settings } from './settings'
47-
export type { SettingsProps } from './settings'
34+
export { default as Settings, SettingsProps } from './settings'
4835
export { default as Slider } from './slider'
4936
export { default as Table } from './table'
5037
export { default as TableCaption } from './table-caption'

0 commit comments

Comments
 (0)