Skip to content

Commit 8327c49

Browse files
hasparushasparus
committed
refactor(components): get rid of @ts-expect-error in favoir of __internalProps function
1 parent 94fc994 commit 8327c49

33 files changed

+360
-291
lines changed

‎packages/components/src/Alert.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22

33
import { Box, BoxProps } from './Box'
44
import type { ForwardRef } from './types'
5+
import { __internalProps } from './util'
56

67
export type AlertProps = BoxProps
78

@@ -18,18 +19,19 @@ export const Alert: ForwardRef<HTMLDivElement, AlertProps> = React.forwardRef(
1819
ref={ref}
1920
variant="primary"
2021
{...props}
21-
// @ts-expect-error
22-
__themeKey="alerts"
23-
__css={{
24-
display: 'flex',
25-
alignItems: 'center',
26-
px: 3,
27-
py: 2,
28-
fontWeight: 'bold',
29-
color: 'white',
30-
bg: 'primary',
31-
borderRadius: 4,
32-
}}
22+
{...__internalProps({
23+
__themeKey: 'alerts',
24+
__css: {
25+
display: 'flex',
26+
alignItems: 'center',
27+
px: 3,
28+
py: 2,
29+
fontWeight: 'bold',
30+
color: 'white',
31+
bg: 'primary',
32+
borderRadius: 4,
33+
},
34+
})}
3335
/>
3436
)
3537
}

‎packages/components/src/AspectImage.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react'
33
import { AspectRatio } from './AspectRatio'
44
import { Image, ImageProps } from './Image'
55
import type { ForwardRef } from './types'
6+
import { __internalProps } from './util'
67

78
export interface AspectImageProps extends ImageProps {
89
ratio?: number
@@ -18,10 +19,11 @@ export const AspectImage: ForwardRef<HTMLImageElement, AspectImageProps> =
1819
<Image
1920
ref={ref}
2021
{...props}
21-
// @ts-expect-error
22-
__css={{
23-
objectFit: 'cover',
24-
}}
22+
{...__internalProps({
23+
__css: {
24+
objectFit: 'cover',
25+
},
26+
})}
2527
/>
2628
</AspectRatio>
2729
)

‎packages/components/src/AspectRatio.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22

33
import { Box, BoxProps } from './Box'
44
import type { ForwardRef } from './types'
5+
import { __internalProps } from './util'
56

67
export interface AspectRatioProps extends BoxProps {
78
ratio?: number
@@ -22,7 +23,8 @@ export const AspectRatio: ForwardRef<HTMLDivElement, AspectRatioProps> =
2223
sx={{
2324
position: 'relative',
2425
overflow: 'hidden',
25-
}}>
26+
}}
27+
>
2628
<Box
2729
sx={{
2830
width: '100%',
@@ -32,14 +34,16 @@ export const AspectRatio: ForwardRef<HTMLDivElement, AspectRatioProps> =
3234
/>
3335
<Box
3436
{...props}
35-
// @ts-expect-error
36-
__css={{
37-
position: 'absolute',
38-
top: 0,
39-
right: 0,
40-
bottom: 0,
41-
left: 0,
42-
}}>
37+
{...__internalProps({
38+
__css: {
39+
position: 'absolute',
40+
top: 0,
41+
right: 0,
42+
bottom: 0,
43+
left: 0,
44+
},
45+
})}
46+
>
4347
{children}
4448
</Box>
4549
</Box>

‎packages/components/src/Avatar.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22

33
import { Image, ImageProps } from './Image'
44
import type { ForwardRef } from './types'
5+
import { __internalProps } from './util'
56

67
export interface AvatarProps extends ImageProps {
78
size?: number | string
@@ -16,10 +17,11 @@ export const Avatar: ForwardRef<HTMLImageElement, AvatarProps> =
1617
height={size}
1718
variant="avatar"
1819
{...props}
19-
// @ts-expect-error
20-
__css={{
21-
borderRadius: 9999,
22-
}}
20+
{...__internalProps({
21+
__css: {
22+
borderRadius: 9999,
23+
},
24+
})}
2325
/>
2426
)
2527
})

‎packages/components/src/Badge.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22

33
import { Box, BoxProps } from './Box'
44
import type { ForwardRef } from './types'
5+
import { __internalProps } from './util'
56

67
export type BadgeProps = BoxProps
78

@@ -12,19 +13,20 @@ export const Badge: ForwardRef<HTMLDivElement, BadgeProps> = React.forwardRef(
1213
ref={ref}
1314
variant="primary"
1415
{...props}
15-
// @ts-expect-error
16-
__themeKey="badges"
17-
__css={{
18-
display: 'inline-block',
19-
verticalAlign: 'baseline',
20-
fontSize: 0,
21-
fontWeight: 'bold',
22-
whiteSpace: 'nowrap',
23-
px: 1,
24-
borderRadius: 2,
25-
color: 'white',
26-
bg: 'primary',
27-
}}
16+
{...__internalProps({
17+
__themeKey: 'badges',
18+
__css: {
19+
display: 'inline-block',
20+
verticalAlign: 'baseline',
21+
fontSize: 0,
22+
fontWeight: 'bold',
23+
whiteSpace: 'nowrap',
24+
px: 1,
25+
borderRadius: 2,
26+
color: 'white',
27+
bg: 'primary',
28+
},
29+
})}
2830
/>
2931
)
3032
}

‎packages/components/src/Box.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import React, { forwardRef } from 'react'
1010
import {
1111
css,
1212
get,
13-
ThemeUICSSObject,
1413
ThemeUICSSProperties,
1514
ThemeUIStyleObject,
1615
} from '@theme-ui/css'
1716
import type { Assign } from './types'
17+
import type { __ThemeUIComponentsInternalProps } from './util'
1818

1919
const boxSystemProps = [
2020
// space scale props (inherited from @styled-system/space)
@@ -77,7 +77,10 @@ export const __isBoxStyledSystemProp = (prop: string) =>
7777

7878
const pickSystemProps = (props: BoxOwnProps) => {
7979
const res: Partial<Pick<BoxOwnProps, typeof boxSystemProps[number]>> = {}
80-
for (const key of boxSystemProps) res[key] = props[key]
80+
for (const key of boxSystemProps) {
81+
// ts2590: union is too large
82+
;(res as any)[key] = props[key]
83+
}
8184

8285
return res
8386
}
@@ -86,14 +89,9 @@ const pickSystemProps = (props: BoxOwnProps) => {
8689
* Use the Box component as a layout primitive to add margin, padding, and colors to content.
8790
* @see https://theme-ui.com/components/box
8891
*/
89-
export const Box = forwardRef<HTMLElement, BoxProps>(function Box(props, ref) {
92+
export const Box = forwardRef<any, BoxProps>(function Box(props, ref) {
9093
const theme = useTheme()
9194

92-
interface __BoxInternalProps {
93-
__css: ThemeUICSSObject
94-
__themeKey?: string
95-
}
96-
9795
const {
9896
__themeKey = 'variants',
9997
__css,
@@ -102,7 +100,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(function Box(props, ref) {
102100
sx,
103101
as: Component = 'div',
104102
...rest
105-
} = props as BoxProps & __BoxInternalProps
103+
} = props as BoxProps & __ThemeUIComponentsInternalProps
106104

107105
const baseStyles: CSSObject = {
108106
boxSizing: 'border-box',

‎packages/components/src/Button.tsx‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React from 'react'
22

3-
import { Box, BoxOwnProps } from './Box'
3+
import { Box as _Box, BoxOwnProps, BoxProps } from './Box'
44
import type { Assign, ForwardRef } from './types'
5+
import { __internalProps } from './util'
6+
7+
const Box = _Box as React.ForwardRefExoticComponent<
8+
BoxProps & React.RefAttributes<HTMLButtonElement>
9+
>
510

611
export interface ButtonProps
712
extends Assign<React.ComponentPropsWithRef<'button'>, BoxOwnProps> {}
@@ -13,26 +18,27 @@ export const Button: ForwardRef<HTMLButtonElement, ButtonProps> =
1318
React.forwardRef(function Button(props, ref) {
1419
return (
1520
<Box
16-
ref={ref}
21+
ref={ref as React.Ref<HTMLButtonElement>}
1722
as="button"
1823
variant="primary"
19-
{...props}
20-
// @ts-expect-error
21-
__themeKey="buttons"
22-
__css={{
23-
appearance: 'none',
24-
display: props.hidden ? undefined : 'inline-block',
25-
textAlign: 'center',
26-
lineHeight: 'inherit',
27-
textDecoration: 'none',
28-
fontSize: 'inherit',
29-
px: 3,
30-
py: 2,
31-
color: 'white',
32-
bg: 'primary',
33-
border: 0,
34-
borderRadius: 4,
35-
}}
24+
{...(props as BoxProps)}
25+
{...__internalProps({
26+
__themeKey: 'buttons',
27+
__css: {
28+
appearance: 'none',
29+
display: props.hidden ? undefined : 'inline-block',
30+
textAlign: 'center',
31+
lineHeight: 'inherit',
32+
textDecoration: 'none',
33+
fontSize: 'inherit',
34+
px: 3,
35+
py: 2,
36+
color: 'white',
37+
bg: 'primary',
38+
border: 0,
39+
borderRadius: 4,
40+
},
41+
})}
3642
/>
3743
)
3844
})

‎packages/components/src/Card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22

33
import { Box, BoxProps } from './Box'
44
import type { ForwardRef } from './types'
5+
import { __internalProps } from './util'
56

67
export type CardProps = BoxProps
78
/**
@@ -16,8 +17,7 @@ export const Card: ForwardRef<HTMLDivElement, CardProps> = React.forwardRef(
1617
ref={ref}
1718
variant="primary"
1819
{...props}
19-
// @ts-expect-error
20-
__themeKey="cards"
20+
{...__internalProps({ __themeKey: 'cards' })}
2121
/>
2222
)
2323
}

‎packages/components/src/Checkbox.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react'
33
import { Box, BoxOwnProps } from './Box'
44
import { SVG, SVGProps } from './SVG'
55
import { Assign, ForwardRef } from './types'
6+
import { __internalProps } from './util'
67

78
const CheckboxChecked = (props: SVGProps) => (
89
<SVG {...props}>
@@ -20,23 +21,25 @@ const CheckboxIcon = (props: SVGProps) => (
2021
<React.Fragment>
2122
<CheckboxChecked
2223
{...props}
23-
// @ts-expect-error internal prop
24-
__css={{
25-
display: 'none',
26-
'input:checked ~ &': {
27-
display: 'block',
24+
{...__internalProps({
25+
__css: {
26+
display: 'none',
27+
'input:checked ~ &': {
28+
display: 'block',
29+
},
2830
},
29-
}}
31+
})}
3032
/>
3133
<CheckboxUnchecked
3234
{...props}
33-
// @ts-expect-error internal prop
34-
__css={{
35-
display: 'block',
36-
'input:checked ~ &': {
37-
display: 'none',
35+
{...__internalProps({
36+
__css: {
37+
display: 'block',
38+
'input:checked ~ &': {
39+
display: 'none',
40+
},
3841
},
39-
}}
42+
})}
4043
/>
4144
</React.Fragment>
4245
)
@@ -78,21 +81,22 @@ export const Checkbox: ForwardRef<HTMLInputElement, CheckboxProps> =
7881
variant={variant}
7982
className={className}
8083
sx={sx}
81-
// @ts-expect-error internal prop
82-
__themeKey="forms"
83-
__css={{
84-
mr: 2,
85-
borderRadius: 4,
86-
color: 'gray',
87-
flexShrink: 0,
88-
'input:checked ~ &': {
89-
color: 'primary',
90-
},
91-
'input:focus ~ &': {
92-
color: 'primary',
93-
bg: 'highlight',
84+
{...__internalProps({
85+
__themeKey: 'forms',
86+
__css: {
87+
mr: 2,
88+
borderRadius: 4,
89+
color: 'gray',
90+
flexShrink: 0,
91+
'input:checked ~ &': {
92+
color: 'primary',
93+
},
94+
'input:focus ~ &': {
95+
color: 'primary',
96+
bg: 'highlight',
97+
},
9498
},
95-
}}
99+
})}
96100
/>
97101
{children}
98102
</Box>

0 commit comments

Comments
 (0)