Merge pull request #32357 from maoueh/feature/rebass-array-space

[rebass] Added possibility to pass`number[]` to SpaceProps

types/rebass/index.d.ts

@@ -1,6 +1,6 @@
-// Type definitions for Rebass 0.3.8
+// Type definitions for Rebass 3.0
 // Project: https://github.com/jxnblk/rebass
-// Definitions by: rhysd <https://rhysd.github.io>
+// Definitions by: rhysd <https://github.com/rhysd>
 //                 ryee-dev <https://github.com/ryee-dev>
 //                 jamesmckenzie <https://github.com/jamesmckenzie>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -14,32 +14,33 @@ export interface BaseProps<C> extends React.ClassAttributes<C> {
 }
 
 export interface SpaceProps<C> extends BaseProps<C> {
-    m?: number | string;
-    mt?: number | string;
-    mr?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mx?: number | string;
-    my?: number | string;
-    p?: number | string;
-    pt?: number | string;
-    pr?: number | string;
-    pb?: number | string;
-    pl?: number | string;
-    px?: number | string;
-    py?: number | string;
+    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>;
 }
 
 export interface BoxProps extends SpaceProps<BoxClass> {
     className?: string;
     width?: number | string | ReadonlyArray<number>;
     fontSize?: number | ReadonlyArray<number>;
-    css?: Object;
+    css?: object;
     color?: string;
     bg?: string;
 }
-type BoxClass = React.StatelessComponent<BoxProps>;
-export declare const Box: BoxClass;
+// tslint:disable-next-line:strict-export-declare-modifiers
+type BoxClass = React.FunctionComponent<BoxProps>;
+export const Box: BoxClass;
 
 export interface ButtonProps extends BoxProps {
     fontWeight?: string;
@@ -48,8 +49,7 @@ export interface ButtonProps extends BoxProps {
     borderRadius?: number | string;
     variant?: string;
 }
-type ButtonClass = React.StatelessComponent<ButtonProps>;
-export declare const Button: ButtonClass;
+export const Button: React.FunctionComponent<ButtonProps>;
 
 export interface CardProps extends BoxProps {
     border?: number | string;
@@ -63,8 +63,7 @@ export interface CardProps extends BoxProps {
     opacity?: number;
     variant?: string;
 }
-type CardClass = React.StatelessComponent<CardProps>;
-export declare const Card: CardClass;
+export const Card: React.FunctionComponent<CardProps>;
 
 export interface FlexProps extends BoxProps {
     alignItems?: string;
@@ -72,8 +71,7 @@ export interface FlexProps extends BoxProps {
     flexDirection?: string;
     flexWrap?: string;
 }
-type FlexClass = React.StatelessComponent<FlexProps>;
-export declare const Flex: FlexClass;
+export const Flex: React.FunctionComponent<FlexProps>;
 
 export interface ImageProps extends BoxProps {
     height?: number | string;
@@ -81,14 +79,12 @@ export interface ImageProps extends BoxProps {
     src?: string;
     alt?: string;
 }
-type ImageClass = React.StatelessComponent<ImageProps>;
-export declare const Image: ImageClass;
+export const Image: React.FunctionComponent<ImageProps>;
 
 export interface LinkProps extends BoxProps {
     href?: string;
 }
-type LinkClass = React.StatelessComponent<LinkProps>;
-export declare const Link: LinkClass;
+export const Link: React.FunctionComponent<LinkProps>;
 
 export interface TextProps extends BoxProps {
     fontSize?: number | ReadonlyArray<number>;
@@ -99,9 +95,7 @@ export interface TextProps extends BoxProps {
     lineHeight?: number | string;
     letterSpacing?: number | string;
 }
-type TextClass = React.StatelessComponent<TextProps>;
-export declare const Text: TextClass;
+export const Text: React.FunctionComponent<TextProps>;
 
-export interface HeadingProps extends TextProps {}
-type HeadingClass = React.StatelessComponent<HeadingProps>;
-export declare const Heading: HeadingClass;
+export type HeadingProps = TextProps;
+export const Heading: React.FunctionComponent<HeadingProps>;

types/rebass/rebass-tests.tsx

@@ -1,8 +1,8 @@
-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 RebassTests = () => (
-    <Box width={1} css={{ height: '100vh' }} 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.
@@ -32,4 +32,4 @@ const RebassTests = () => (
             </Button>
         </Flex>
     </Box>
-)
+);

types/rebass/tslint.json

@@ -1,79 +1,3 @@
 {
-    "extends": "dtslint/dt.json",
-    "rules": {
-        "adjacent-overload-signatures": false,
-        "array-type": false,
-        "arrow-return-shorthand": false,
-        "ban-types": false,
-        "callable-types": false,
-        "comment-format": false,
-        "dt-header": false,
-        "eofline": false,
-        "export-just-namespace": false,
-        "import-spacing": false,
-        "interface-name": false,
-        "interface-over-type-literal": false,
-        "jsdoc-format": false,
-        "max-line-length": false,
-        "member-access": false,
-        "new-parens": false,
-        "no-any-union": false,
-        "no-boolean-literal-compare": false,
-        "no-conditional-assignment": false,
-        "no-consecutive-blank-lines": false,
-        "no-construct": false,
-        "no-declare-current-package": false,
-        "no-duplicate-imports": false,
-        "no-duplicate-variable": false,
-        "no-empty-interface": false,
-        "no-for-in-array": false,
-        "no-inferrable-types": false,
-        "no-internal-module": false,
-        "no-irregular-whitespace": false,
-        "no-mergeable-namespace": false,
-        "no-misused-new": false,
-        "no-namespace": false,
-        "no-object-literal-type-assertion": false,
-        "no-padding": false,
-        "no-redundant-jsdoc": false,
-        "no-redundant-jsdoc-2": false,
-        "no-redundant-undefined": false,
-        "no-reference-import": false,
-        "no-relative-import-in-test": false,
-        "no-self-import": false,
-        "no-single-declare-module": false,
-        "no-string-throw": false,
-        "no-unnecessary-callback-wrapper": false,
-        "no-unnecessary-class": false,
-        "no-unnecessary-generics": false,
-        "no-unnecessary-qualifier": false,
-        "no-unnecessary-type-assertion": false,
-        "no-useless-files": false,
-        "no-var-keyword": false,
-        "no-var-requires": false,
-        "no-void-expression": false,
-        "no-trailing-whitespace": false,
-        "object-literal-key-quotes": false,
-        "object-literal-shorthand": false,
-        "one-line": false,
-        "one-variable-per-declaration": false,
-        "only-arrow-functions": false,
-        "prefer-conditional-expression": false,
-        "prefer-const": false,
-        "prefer-declare-function": false,
-        "prefer-for-of": false,
-        "prefer-method-signature": false,
-        "prefer-template": false,
-        "radix": false,
-        "semicolon": false,
-        "space-before-function-paren": false,
-        "space-within-parens": false,
-        "strict-export-declare-modifiers": false,
-        "trim-file": false,
-        "triple-equals": false,
-        "typedef-whitespace": false,
-        "unified-signatures": false,
-        "void-return": false,
-        "whitespace": false
-    }
+    "extends": "dtslint/dt.json"
 }