From 9f58967c63644f59812f2da5e19c963e97e5e954 Mon Sep 17 00:00:00 2001
From: Matt Zabriskie <mzabriskie@apple.com>
Date: Thu, 15 Oct 2020 10:26:01 -0600
Subject: [PATCH] Fixing types for props with ref

---
 packages/components/index.d.ts     |  51 ++--
 packages/components/test/types.tsx | 376 +++++++++++++++++++++++++++++
 packages/components/tsconfig.json  |   8 +-
 3 files changed, 416 insertions(+), 19 deletions(-)
 create mode 100644 packages/components/test/types.tsx

diff --git a/packages/components/index.d.ts b/packages/components/index.d.ts
index 3d1a56c94..22163b950 100644
--- a/packages/components/index.d.ts
+++ b/packages/components/index.d.ts
@@ -24,7 +24,7 @@ export interface BoxOwnProps extends SpaceProps, ColorProps {
   css?: InterpolationWithTheme<any>
 }
 export interface BoxProps
-  extends Assign<React.ComponentProps<'div'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'div'>, BoxOwnProps> {}
 /**
  * Use the Box component as a layout primitive to add margin, padding, and colors to content.
  * @see https://theme-ui.com/components/box
@@ -101,7 +101,7 @@ export interface HeadingProps
 export const Heading: ForwardRef<HTMLHeadingElement, HeadingProps>
 
 export interface ImageProps
-  extends Assign<React.ComponentProps<'img'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'img'>, BoxOwnProps> {}
 /**
  * Image style variants can be defined in the theme.images object.
  * @see https://theme-ui.com/components/image/
@@ -117,7 +117,7 @@ export type CardProps = BoxProps
 export const Card: ForwardRef<HTMLDivElement, CardProps>
 
 export interface LabelProps
-  extends Assign<React.ComponentProps<'label'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'label'>, BoxOwnProps> {}
 /**
  * Label variants can be defined in `theme.forms`
  * and the component uses the `theme.forms.label` variant by default.
@@ -126,7 +126,7 @@ export interface LabelProps
 export const Label: ForwardRef<HTMLLabelElement, LabelProps>
 
 export interface InputProps
-  extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
 /**
  * Input variants can be defined in `theme.forms`
  * and the component uses the `theme.forms.input` variant by default.
@@ -135,7 +135,7 @@ export interface InputProps
 export const Input: ForwardRef<HTMLInputElement, InputProps>
 
 export interface SelectProps
-  extends Assign<React.ComponentProps<'select'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'select'>, BoxOwnProps> {}
 /**
  * Select variants can be defined in `theme.forms`
  * and the component uses the `theme.forms.select` variant by default.
@@ -144,7 +144,7 @@ export interface SelectProps
 export const Select: ForwardRef<HTMLSelectElement, SelectProps>
 
 export interface TextareaProps
-  extends Assign<React.ComponentProps<'textarea'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'textarea'>, BoxOwnProps> {}
 /**
  * Form textarea component
  *
@@ -155,7 +155,7 @@ export interface TextareaProps
 export const Textarea: ForwardRef<HTMLTextAreaElement, TextareaProps>
 
 export interface RadioProps
-  extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
 /**
  * Form radio input component
  *
@@ -166,7 +166,7 @@ export interface RadioProps
 export const Radio: ForwardRef<HTMLInputElement, RadioProps>
 
 export interface CheckboxProps
-  extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
 /**
  * Form checkbox input component
  *
@@ -177,7 +177,7 @@ export interface CheckboxProps
 export const Checkbox: ForwardRef<HTMLInputElement, CheckboxProps>
 
 export interface SliderProps
-  extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
 /**
  * Range input element
  *
@@ -198,7 +198,7 @@ export interface FieldOwnProps extends MarginProps {
   name: string
 }
 export type FieldProps<T extends React.ElementType> = FieldOwnProps &
-  Omit<React.ComponentProps<T>, 'as' | keyof FieldOwnProps> & {
+  Omit<React.ComponentPropsWithRef<T>, 'as' | keyof FieldOwnProps> & {
     /**
      * form control to render, default Input
      */
@@ -212,18 +212,20 @@ export function Field<
 >(props: FieldProps<T>): JSX.Element
 
 export interface ProgressProps
-  extends Assign<React.ComponentProps<'progress'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'progress'>, BoxOwnProps> {}
 /**
  * @see https://theme-ui.com/components/progress/
  */
 export const Progress: ForwardRef<HTMLProgressElement, ProgressProps>
 
 export interface DonutProps
-  extends Omit<
-      React.SVGProps<SVGSVGElement>,
+  extends Assign<
+    Omit<
+      React.ComponentPropsWithRef<'svg'>,
       'opacity' | 'color' | 'css' | 'sx' | 'max' | 'min'
     >,
-    BoxOwnProps {
+    BoxOwnProps
+  > {
   value: number
   min?: number
   max?: number
@@ -237,11 +239,13 @@ export interface DonutProps
 export const Donut: ForwardRef<SVGSVGElement, DonutProps>
 
 export interface SpinnerProps
-  extends Omit<
-      React.SVGProps<SVGSVGElement>,
+  extends Assign<
+    Omit<
+      React.ComponentPropsWithRef<'svg'>,
       'opacity' | 'color' | 'css' | 'sx'
     >,
-    BoxOwnProps {
+    BoxOwnProps
+  > {
   size?: number | string
 }
 export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps>
@@ -281,7 +285,18 @@ export type DividerProps = BoxProps
  */
 export const Divider: ForwardRef<HTMLDivElement, DividerProps>
 
-export interface EmbedProps extends BoxProps {
+/**
+ * EmbedProps are a bit tricky. It is a composite component that uses a <Box />
+ * as the parent element which is what `props` are spread onto. The actual `ref`
+ * however is a nested <Box as="iframe" /> element. To support these props we
+ * need to use an intersection of the intrinsic attributes of HTMLDivElement,
+ * with the ref attributes of HTMLIFrameElement.
+ */
+export interface EmbedProps
+  extends Assign<
+    React.ComponentProps<'div'> & React.RefAttributes<HTMLIFrameElement>,
+    BoxOwnProps
+  > {
   ratio?: number
   src?: React.IframeHTMLAttributes<any>['src']
   frameBorder?: React.IframeHTMLAttributes<any>['frameBorder']
diff --git a/packages/components/test/types.tsx b/packages/components/test/types.tsx
new file mode 100644
index 000000000..3859fa9f2
--- /dev/null
+++ b/packages/components/test/types.tsx
@@ -0,0 +1,376 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+
+import {
+  Alert,
+  AlertProps,
+  AspectImage,
+  AspectImageProps,
+  AspectRatio,
+  AspectRatioProps,
+  Avatar,
+  AvatarProps,
+  Badge,
+  BadgeProps,
+  Box,
+  BoxProps,
+  Button,
+  ButtonProps,
+  Card,
+  CardProps,
+  Checkbox,
+  CheckboxProps,
+  Close,
+  CloseProps,
+  Container,
+  ContainerProps,
+  Divider,
+  DividerProps,
+  Donut,
+  DonutProps,
+  Embed,
+  EmbedProps,
+  Field,
+  FieldProps,
+  Flex,
+  FlexProps,
+  Grid,
+  GridProps,
+  Heading,
+  HeadingProps,
+  IconButton,
+  IconButtonProps,
+  Image,
+  ImageProps,
+  Input,
+  InputProps,
+  Label,
+  LabelProps,
+  Link,
+  LinkProps,
+  MenuButton,
+  MenuButtonProps,
+  Message,
+  MessageProps,
+  NavLink,
+  NavLinkProps,
+  Progress,
+  ProgressProps,
+  Radio,
+  RadioProps,
+  Select,
+  SelectProps,
+  Slider,
+  SliderProps,
+  Spinner,
+  SpinnerProps,
+  Text,
+  TextProps,
+  Textarea,
+  TextareaProps,
+} from '../'
+
+/**
+ * This isn't technically a Jest test, as Jest won't catch any type errors.
+ * It makes more sense to put this under the test/ folder organizationally.
+ * Wrap everything in describe/it so Jest won't complain, but this actually
+ * gets run in a meaningul way with tsc as part of the typecheck command.
+ */
+describe('components type check', () => {
+  it('should pass type check for Elements', () => {
+    const SectionBox = Box.withComponent('section')
+
+    const _ = (
+      <SectionBox
+        css={{ background: '#eee' }}
+        sx={{ py: [1, 2, 3], paddingBlockStart: '2em' }}
+        px={[3, 2, 1]}
+        ref={(ref) => ref}>
+        <Box
+          onPointerEnter={(e) => e.pointerType}
+          sx={{
+            ':first-of-type': {
+              bg: 'red',
+            },
+          }}
+        />
+        <Flex />
+        <Grid
+          width={[128, null, 192]}
+          backgroundColor="#eee"
+          ref={(ref) => ref}>
+          <Box bg="primary">Box</Box>
+          <Box bg="muted">Box</Box>
+          <Box bg="primary">Box</Box>
+          <Box bg="muted">Box</Box>
+        </Grid>
+        <Grid gap={2} columns={[2, null, 4]} color="#111">
+          <Box bg="primary">Box</Box>
+          <Box bg="muted">Box</Box>
+          <Box bg="primary">Box</Box>
+          <Box bg="muted">Box</Box>
+        </Grid>
+        <Button
+          ref={(ref) => ref}
+          sx={{
+            ':hover': {
+              bg: ['red', 'green', 'blue'],
+            },
+          }}
+        />
+        <Link href="#" target="_self" bg="blue" ref={(r) => r} />
+        <Text backgroundColor="red" sx={{ py: 1 }} paddingX={[3, 2, 1]} />
+        <Heading contentEditable="true" m="1em" />
+        <Image />
+        <Card />
+        <Label />
+        <Input value="Hello" onChange={(e) => console.log(e.target.value)} />
+        <Select defaultValue="Hello">
+          <option>Hello</option>
+          <option>Hi</option>
+          <option>Beep</option>
+          <option>Boop</option>
+        </Select>
+        <Textarea defaultValue="Hello" rows={8} />
+        <Label ref={(ref) => ref}>
+          <Radio name="dark-mode" value="true" defaultChecked={true} />
+          Dark Mode
+        </Label>
+        <Label>
+          <Radio name="dark-mode" value="false" />
+          Light Mode
+        </Label>
+        <Checkbox mx={[1, 2, 3]} defaultChecked={true} />
+        <Slider my={[1, 2, 3]} bg="gray" defaultValue={25} />
+        <Field
+          label="Email"
+          name="email"
+          defaultValue=""
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            console.log(e.target.value)
+          }
+          mx={[1, 2, 3]}
+        />
+        <Field
+          as="textarea"
+          label="Message"
+          name="message"
+          rows={10}
+          placeholder="Say hello"
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            console.log(e.target.value)
+          }
+          mx={[1, 2, 3]}
+        />
+        <Field
+          as={Textarea}
+          label="Complaint"
+          name="complaint"
+          rows={10}
+          placeholder="Complain here"
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            console.log(e.target.value)
+          }
+          px={[1, 2, 3]}
+        />
+        <Box as="form" onSubmit={(e) => e.preventDefault()}>
+          <Label htmlFor="username">Username</Label>
+          <Input name="username" mb={3} />
+          <Label htmlFor="password">Password</Label>
+          <Input type="password" name="password" mb={3} />
+          <Box>
+            <Label mb={3}>
+              <Checkbox />
+              Remember me
+            </Label>
+          </Box>
+          <Label htmlFor="sound">Sound</Label>
+          <Select name="sound" mb={3}>
+            <option>Beep</option>
+            <option>Boop</option>
+            <option>Blip</option>
+          </Select>
+          <Label htmlFor="comment">Comment</Label>
+          <Textarea name="comment" rows={6} mb={3} />
+          <Flex mb={3}>
+            <Label>
+              <Radio name="letter" /> Alpha
+            </Label>
+            <Label>
+              <Radio name="letter" /> Bravo
+            </Label>
+            <Label>
+              <Radio name="letter" /> Charlie
+            </Label>
+          </Flex>
+          <Label>Slider</Label>
+          <Slider mb={3} />
+          <Button>Submit</Button>
+        </Box>
+        <Progress max={1} value={1 / 2}>
+          50%
+        </Progress>{' '}
+        <Donut value={1 / 2} />
+        <Spinner size={100} />
+        <Avatar src="https://example.com/example.png" /> <Badge />
+        <Close />
+        <Alert>
+          Beep boop, this is an alert!
+          <Close ml="auto" mr={-2} />
+        </Alert>{' '}
+        <Divider />
+        <Embed src="https://www.youtube.com/embed/GNCd_ERZvZM" />{' '}
+        <AspectRatio
+          ratio={16 / 9}
+          sx={{
+            p: 4,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'background',
+            bg: 'primary',
+          }}>
+          <Heading>Aspect Ratio</Heading>
+        </AspectRatio>
+        <AspectImage ratio={4 / 3} src="./example.png" />
+        <Container p={4} bg="muted">
+          Centered container
+        </Container>
+        <Flex as="nav">
+          <NavLink href="#!" p={2}>
+            Home
+          </NavLink>
+          <NavLink href="#!" p={2}>
+            Blog
+          </NavLink>
+          <NavLink href="#!" p={2}>
+            About
+          </NavLink>
+        </Flex>{' '}
+        <Message mt={1}>This is just a message for someone to read</Message>{' '}
+        <IconButton aria-label="Toggle dark mode" onClick={() => {}}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            fill="currentcolor">
+            <circle
+              r={11}
+              cx={12}
+              cy={12}
+              fill="none"
+              stroke="currentcolor"
+              strokeWidth={2}
+            />
+          </svg>
+        </IconButton>
+        <MenuButton aria-label="Toggle Menu" />
+      </SectionBox>
+    )
+  })
+
+  it('should pass type check for props', () => {
+    // Alert
+    ;((props: AlertProps) => <Alert {...props} />)({})
+
+    // AspectImage
+    ;((props: AspectImageProps) => <AspectImage {...props} />)({})
+
+    // AspectRatio
+    ;((props: AspectRatioProps) => <AspectRatio {...props} />)({})
+
+    // Avatar
+    ;((props: AvatarProps) => <Avatar {...props} />)({})
+
+    // Badge
+    ;((props: BadgeProps) => <Badge {...props} />)({})
+
+    // Box
+    ;((props: BoxProps) => <Box {...props} />)({})
+
+    // Button
+    ;((props: ButtonProps) => <Button {...props} />)({})
+
+    // Card
+    ;((props: CardProps) => <Card {...props} />)({})
+
+    // Checkbox
+    ;((props: CheckboxProps) => <Checkbox {...props} />)({})
+
+    // Close
+    ;((props: CloseProps) => <Close {...props} />)({})
+
+    // Container
+    ;((props: ContainerProps) => <Container {...props} />)({})
+
+    // Divider
+    ;((props: DividerProps) => <Divider {...props} />)({})
+
+    // Donut
+    ;((props: DonutProps) => <Donut {...props} />)({ value: 50 })
+
+    // Embed
+    ;((props: EmbedProps) => <Embed {...props} />)({})
+
+    // Field
+    ;((props: FieldProps<'input'>) => <Field {...props} />)({
+      label: 'Email',
+      name: 'email',
+    })
+
+    // Flex
+    ;((props: FlexProps) => <Flex {...props} />)({})
+
+    // Grid
+    ;((props: GridProps) => <Grid {...props} />)({})
+
+    // Heading
+    ;((props: HeadingProps) => <Heading {...props} />)({})
+
+    // IconButton
+    ;((props: IconButtonProps) => <IconButton {...props} />)({})
+
+    // Image
+    ;((props: ImageProps) => <Image {...props} />)({})
+
+    // Input
+    ;((props: InputProps) => <Input {...props} />)({})
+
+    // Label
+    ;((props: LabelProps) => <Label {...props} />)({})
+
+    // Link
+    ;((props: LinkProps) => <Link {...props} />)({})
+
+    // MenuButton
+    ;((props: MenuButtonProps) => <MenuButton {...props} />)({})
+
+    // Message
+    ;((props: MessageProps) => <Message {...props} />)({})
+
+    // NavLink
+    ;((props: NavLinkProps) => <NavLink {...props} />)({})
+
+    // Progress
+    ;((props: ProgressProps) => <Progress {...props} />)({})
+
+    // Radio
+    ;((props: RadioProps) => <Radio {...props} />)({})
+
+    // Select
+    ;((props: SelectProps) => <Select {...props} />)({})
+
+    // Slider
+    ;((props: SliderProps) => <Slider {...props} />)({})
+
+    // Spinner
+    ;((props: SpinnerProps) => <Spinner {...props} />)({})
+
+    // Text
+    ;((props: TextProps) => <Text {...props} />)({})
+
+    // Textarea
+    ;((props: TextareaProps) => <Textarea {...props} />)({})
+  })
+})
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index f5e01d926..e8abfbb5e 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -1,4 +1,10 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*.ts", "src/**/*.tsx", "index.d.ts"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "test/**/*.ts",
+    "test/**/*.tsx",
+    "index.d.ts"
+  ]
 }