From 1ec6cdc9d273a95462d636027f63e448e9a766c0 Mon Sep 17 00:00:00 2001
From: Angus Fretwell <angusfretwell@me.com>
Date: Sun, 10 Feb 2019 18:11:12 +1100
Subject: [PATCH 1/5] [rebass] extend styled-system interfaces, support html
 attributes, stricter as and css props

---
 types/rebass/index.d.ts       | 156 ++++++++++++++++++----------------
 types/rebass/rebass-tests.tsx |  17 ++--
 2 files changed, 94 insertions(+), 79 deletions(-)

diff --git a/types/rebass/index.d.ts b/types/rebass/index.d.ts
index 20c73079ad..db40da76ac 100644
--- a/types/rebass/index.d.ts
+++ b/types/rebass/index.d.ts
@@ -4,99 +4,107 @@
 //                 ryee-dev <https://github.com/ryee-dev>
 //                 jamesmckenzie <https://github.com/jamesmckenzie>
 //                 sara f-p <https://github.com/gretzky>
+//                 angusfretwell <https://github.com/angusfretwell>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
 import * as React from "react";
+import * as StyledComponents from "styled-components";
+import * as StyledSystem from "styled-system";
 
-export interface BaseProps<C> extends React.ClassAttributes<C> {
-    className?: string;
-    as?: any;
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export interface BaseProps extends React.Props<any> {
+    as?: React.ReactType;
+    css?: StyledComponents.CSSObject;
 }
 
-export interface SpaceProps<C> extends BaseProps<C> {
-    m?: number | string | ReadonlyArray<number>;
-    mt?: number | string | ReadonlyArray<number>;
-    mr?: number | string | ReadonlyArray<number>;
-    mb?: number | string | ReadonlyArray<number>;
-    ml?: number | string | ReadonlyArray<number>;
-    mx?: number | string | ReadonlyArray<number>;
-    my?: number | string | ReadonlyArray<number>;
-    p?: number | string | ReadonlyArray<number>;
-    pt?: number | string | ReadonlyArray<number>;
-    pr?: number | string | ReadonlyArray<number>;
-    pb?: number | string | ReadonlyArray<number>;
-    pl?: number | string | ReadonlyArray<number>;
-    px?: number | string | ReadonlyArray<number>;
-    py?: number | string | ReadonlyArray<number>;
-}
+interface BoxKnownProps
+    extends BaseProps,
+        StyledSystem.SpaceProps,
+        StyledSystem.WidthProps,
+        StyledSystem.FontSizeProps,
+        StyledSystem.ColorProps,
+        StyledSystem.FlexProps,
+        StyledSystem.OrderProps,
+        StyledSystem.AlignSelfProps {}
+export interface BoxProps
+    extends BoxKnownProps,
+        Omit<React.HTMLProps<HTMLDivElement>, keyof BoxKnownProps> {}
+export const Box: React.FunctionComponent<BoxProps>;
 
-export interface BoxProps extends SpaceProps<BoxClass> {
-    className?: string;
-    width?: number | string | ReadonlyArray<number>;
-    fontSize?: number | ReadonlyArray<number>;
-    css?: object;
-    color?: string;
-    bg?: string;
-}
-// tslint:disable-next-line:strict-export-declare-modifiers
-type BoxClass = React.FunctionComponent<BoxProps>;
-export const Box: BoxClass;
-
-export interface ButtonProps extends BoxProps {
-    fontWeight?: string;
-    border?: number | string;
-    borderColor?: string;
-    borderRadius?: number | string;
-    variant?: string;
-}
+export interface ButtonKnownProps
+    extends BoxKnownProps,
+        StyledSystem.FontWeightProps,
+        StyledSystem.BorderProps,
+        StyledSystem.BordersProps,
+        StyledSystem.BorderColorProps,
+        StyledSystem.BorderRadiusProps,
+        StyledSystem.ButtonStyleProps {}
+export interface ButtonProps
+    extends ButtonKnownProps,
+        Omit<React.HTMLProps<HTMLButtonElement>, keyof ButtonKnownProps> {}
 export const Button: React.FunctionComponent<ButtonProps>;
 
-export interface CardProps extends BoxProps {
-    border?: number | string;
-    borderColor?: string;
-    borderRadius?: number | string;
-    boxShadow?: string;
-    backgroundImage?: string;
-    backgroundSize?: string;
-    backgroundPosition?: string;
-    backgroundRepeat?: string;
-    opacity?: number;
-    variant?: string;
+export interface CardKnownProps
+    extends BoxKnownProps,
+        StyledSystem.BorderProps,
+        StyledSystem.BordersProps,
+        StyledSystem.BorderColorProps,
+        StyledSystem.BorderRadiusProps,
+        StyledSystem.BoxShadowProps,
+        StyledSystem.BackgroundImageProps,
+        StyledSystem.BackgroundSizeProps,
+        StyledSystem.BackgroundPositionProps,
+        StyledSystem.BackgroundRepeatProps,
+        StyledSystem.OpacityProps {
+    variant?: StyledSystem.ResponsiveValue<string>;
 }
+export interface CardProps
+    extends CardKnownProps,
+        Omit<React.HTMLProps<HTMLDivElement>, keyof CardKnownProps> {}
 export const Card: React.FunctionComponent<CardProps>;
 
-export interface FlexProps extends BoxProps {
-    alignItems?: string;
-    justifyContent?: string;
-    flexDirection?: string;
-    flexWrap?: string;
-}
+export interface FlexKnownProps
+    extends BoxKnownProps,
+        StyledSystem.FlexWrapProps,
+        StyledSystem.FlexDirectionProps,
+        StyledSystem.AlignItemsProps,
+        StyledSystem.JustifyContentProps {}
+export interface FlexProps
+    extends FlexKnownProps,
+        Omit<React.HTMLProps<HTMLDivElement>, keyof FlexKnownProps> {}
 export const Flex: React.FunctionComponent<FlexProps>;
 
-export interface ImageProps extends BoxProps {
-    height?: number | string;
-    borderRadius?: number | string;
-    src?: string;
-    alt?: string;
-}
+export interface ImageKnownProps
+    extends BoxKnownProps,
+        StyledSystem.HeightProps,
+        StyledSystem.BorderRadiusProps {}
+export interface ImageProps
+    extends ImageKnownProps,
+        Omit<React.HTMLProps<HTMLImageElement>, keyof ImageKnownProps> {}
 export const Image: React.FunctionComponent<ImageProps>;
 
-export interface LinkProps extends BoxProps {
-    href?: string;
-}
+export interface LinkKnownProps extends BoxKnownProps {}
+export interface LinkProps
+    extends LinkKnownProps,
+        Omit<React.HTMLProps<HTMLAnchorElement>, keyof LinkKnownProps> {}
 export const Link: React.FunctionComponent<LinkProps>;
 
-export interface TextProps extends BoxProps {
-    fontSize?: number | ReadonlyArray<number>;
-    fontWeight?: string;
-    color?: string;
-    fontFamily?: string;
-    textAlign?: string;
-    lineHeight?: number | string;
-    letterSpacing?: number | string;
-}
+export interface TextKnownProps
+    extends BoxKnownProps,
+        StyledSystem.FontFamilyProps,
+        StyledSystem.FontWeightProps,
+        StyledSystem.TextAlignProps,
+        StyledSystem.LineHeightProps,
+        StyledSystem.LetterSpacingProps {}
+export interface TextProps
+    extends TextKnownProps,
+        Omit<React.HTMLProps<HTMLDivElement>, keyof TextKnownProps> {}
 export const Text: React.FunctionComponent<TextProps>;
 
-export type HeadingProps = TextProps;
+export interface HeadingKnownProps extends TextKnownProps {}
+export interface HeadingProps
+    extends HeadingKnownProps,
+        Omit<React.HTMLProps<HTMLHeadingElement>, keyof HeadingKnownProps> {}
 export const Heading: React.FunctionComponent<HeadingProps>;
diff --git a/types/rebass/rebass-tests.tsx b/types/rebass/rebass-tests.tsx
index 53735775ff..52e3e7de28 100644
--- a/types/rebass/rebass-tests.tsx
+++ b/types/rebass/rebass-tests.tsx
@@ -1,13 +1,17 @@
-import * as React from 'react';
-import { Box, Flex, Text, Heading, Button, Link, Image, Card } from 'rebass';
+import * as React from "react";
+import { Box, Flex, Text, Heading, Button, Link, Image, Card } from "rebass";
+
+const CustomComponent: React.FunctionComponent = ({ children }) => {
+    return <div>{children}</div>;
+};
 
 () => (
-    <Box width={1} css={{ height: '100vh' }} py={[1, 2, 3]} ml="1em">
+    <Box width={1} css={{ height: "100vh" }} py={[1, 2, 3]} ml="1em">
         <Flex width={1} alignItems="center" justifyContent="center">
             <Heading fontSize={5} fontWeight="bold">
                 Hi, I'm a heading.
             </Heading>
-            <Text fontSize={3} lineHeight="1em" letterSpacing="1rem">
+            <Text as="p" fontSize={3} lineHeight="1em" letterSpacing="1rem">
                 Hi, I'm text.
             </Text>
             <Card
@@ -26,7 +30,10 @@ import { Box, Flex, Text, Heading, Button, Link, Image, Card } from 'rebass';
                 src="https://source.unsplash.com/random/1280x720"
                 borderRadius="1em"
             />
-            <Link href="https://rebassjs.org">Link</Link>
+            <Link href="https://rebassjs.org" title="Rebass" target="_blank">
+                Link
+            </Link>
+            <Box as={CustomComponent}>CustomComponent</Box>
             <Button bg="magenta" border="1em" borderRadius="1em">
                 Button
             </Button>

From 5ff828d9f07f52fa432b036ffeb6c386016ac67c Mon Sep 17 00:00:00 2001
From: Angus Fretwell <angusfretwell@me.com>
Date: Sun, 10 Feb 2019 18:33:28 +1100
Subject: [PATCH 2/5] [rebass] add ExtendedBox to test, add prop to
 CustomComponent example

---
 types/rebass/rebass-tests.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/types/rebass/rebass-tests.tsx b/types/rebass/rebass-tests.tsx
index 52e3e7de28..87df64f323 100644
--- a/types/rebass/rebass-tests.tsx
+++ b/types/rebass/rebass-tests.tsx
@@ -1,10 +1,19 @@
 import * as React from "react";
+import styled from "styled-components";
 import { Box, Flex, Text, Heading, Button, Link, Image, Card } from "rebass";
 
 const CustomComponent: React.FunctionComponent = ({ children }) => {
     return <div>{children}</div>;
 };
 
+const ExtendedBox = styled(Box)`
+    color: red;
+`;
+
+ExtendedBox.defaultProps = {
+    p: 3
+};
+
 () => (
     <Box width={1} css={{ height: "100vh" }} py={[1, 2, 3]} ml="1em">
         <Flex width={1} alignItems="center" justifyContent="center">
@@ -33,10 +42,13 @@ const CustomComponent: React.FunctionComponent = ({ children }) => {
             <Link href="https://rebassjs.org" title="Rebass" target="_blank">
                 Link
             </Link>
-            <Box as={CustomComponent}>CustomComponent</Box>
             <Button bg="magenta" border="1em" borderRadius="1em">
                 Button
             </Button>
+            <Box as={CustomComponent} bg="red">
+                CustomComponent
+            </Box>
+            <ExtendedBox m={2}>ExtendedBox</ExtendedBox>
         </Flex>
     </Box>
 );

From 5fff1de627a6d17ebc2276b2fb06cb898faf9ab1 Mon Sep 17 00:00:00 2001
From: Angus Fretwell <angusfretwell@me.com>
Date: Sun, 10 Feb 2019 18:39:16 +1100
Subject: [PATCH 3/5] [rebass] resolve lint warnings

---
 types/rebass/index.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/types/rebass/index.d.ts b/types/rebass/index.d.ts
index db40da76ac..8514783713 100644
--- a/types/rebass/index.d.ts
+++ b/types/rebass/index.d.ts
@@ -12,6 +12,8 @@ import * as React from "react";
 import * as StyledComponents from "styled-components";
 import * as StyledSystem from "styled-system";
 
+export {};
+
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
 export interface BaseProps extends React.Props<any> {
@@ -85,6 +87,7 @@ export interface ImageProps
         Omit<React.HTMLProps<HTMLImageElement>, keyof ImageKnownProps> {}
 export const Image: React.FunctionComponent<ImageProps>;
 
+// tslint:disable-next-line no-empty-interface
 export interface LinkKnownProps extends BoxKnownProps {}
 export interface LinkProps
     extends LinkKnownProps,
@@ -103,6 +106,7 @@ export interface TextProps
         Omit<React.HTMLProps<HTMLDivElement>, keyof TextKnownProps> {}
 export const Text: React.FunctionComponent<TextProps>;
 
+// tslint:disable-next-line no-empty-interface
 export interface HeadingKnownProps extends TextKnownProps {}
 export interface HeadingProps
     extends HeadingKnownProps,

From d904c8218b11af59baee8a060a739bd64d507c80 Mon Sep 17 00:00:00 2001
From: Angus Fretwell <angusfretwell@me.com>
Date: Sun, 10 Feb 2019 18:42:59 +1100
Subject: [PATCH 4/5] [rebass] bump typescript version to match
 styled-components

---
 types/rebass/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/rebass/index.d.ts b/types/rebass/index.d.ts
index 8514783713..fb2634ac2f 100644
--- a/types/rebass/index.d.ts
+++ b/types/rebass/index.d.ts
@@ -6,7 +6,7 @@
 //                 sara f-p <https://github.com/gretzky>
 //                 angusfretwell <https://github.com/angusfretwell>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.8
+// TypeScript Version: 2.9
 
 import * as React from "react";
 import * as StyledComponents from "styled-components";

From 63b47923b064dacc90a632d4a06d99676dda7c50 Mon Sep 17 00:00:00 2001
From: Angus Fretwell <angusfretwell@me.com>
Date: Sun, 10 Feb 2019 18:50:39 +1100
Subject: [PATCH 5/5] [rebass] don't export 'known props' interfaces

---
 types/rebass/index.d.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/types/rebass/index.d.ts b/types/rebass/index.d.ts
index fb2634ac2f..d52d032284 100644
--- a/types/rebass/index.d.ts
+++ b/types/rebass/index.d.ts
@@ -35,7 +35,7 @@ export interface BoxProps
         Omit<React.HTMLProps<HTMLDivElement>, keyof BoxKnownProps> {}
 export const Box: React.FunctionComponent<BoxProps>;
 
-export interface ButtonKnownProps
+interface ButtonKnownProps
     extends BoxKnownProps,
         StyledSystem.FontWeightProps,
         StyledSystem.BorderProps,
@@ -48,7 +48,7 @@ export interface ButtonProps
         Omit<React.HTMLProps<HTMLButtonElement>, keyof ButtonKnownProps> {}
 export const Button: React.FunctionComponent<ButtonProps>;
 
-export interface CardKnownProps
+interface CardKnownProps
     extends BoxKnownProps,
         StyledSystem.BorderProps,
         StyledSystem.BordersProps,
@@ -67,7 +67,7 @@ export interface CardProps
         Omit<React.HTMLProps<HTMLDivElement>, keyof CardKnownProps> {}
 export const Card: React.FunctionComponent<CardProps>;
 
-export interface FlexKnownProps
+interface FlexKnownProps
     extends BoxKnownProps,
         StyledSystem.FlexWrapProps,
         StyledSystem.FlexDirectionProps,
@@ -78,7 +78,7 @@ export interface FlexProps
         Omit<React.HTMLProps<HTMLDivElement>, keyof FlexKnownProps> {}
 export const Flex: React.FunctionComponent<FlexProps>;
 
-export interface ImageKnownProps
+interface ImageKnownProps
     extends BoxKnownProps,
         StyledSystem.HeightProps,
         StyledSystem.BorderRadiusProps {}
@@ -88,13 +88,13 @@ export interface ImageProps
 export const Image: React.FunctionComponent<ImageProps>;
 
 // tslint:disable-next-line no-empty-interface
-export interface LinkKnownProps extends BoxKnownProps {}
+interface LinkKnownProps extends BoxKnownProps {}
 export interface LinkProps
     extends LinkKnownProps,
         Omit<React.HTMLProps<HTMLAnchorElement>, keyof LinkKnownProps> {}
 export const Link: React.FunctionComponent<LinkProps>;
 
-export interface TextKnownProps
+interface TextKnownProps
     extends BoxKnownProps,
         StyledSystem.FontFamilyProps,
         StyledSystem.FontWeightProps,
@@ -107,7 +107,7 @@ export interface TextProps
 export const Text: React.FunctionComponent<TextProps>;
 
 // tslint:disable-next-line no-empty-interface
-export interface HeadingKnownProps extends TextKnownProps {}
+interface HeadingKnownProps extends TextKnownProps {}
 export interface HeadingProps
     extends HeadingKnownProps,
         Omit<React.HTMLProps<HTMLHeadingElement>, keyof HeadingKnownProps> {}