grid-styled types

types/grid-styled/grid-styled-tests.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Flex, Box } from "grid-styled";
+
+const Layout = () => (
+    <Flex m={4}>
+        <Box px={3} py={2} />
+    </Flex>
+);

types/grid-styled/index.d.ts

@@ -0,0 +1,76 @@
+// Type definitions for grid-styled 3.0
+// Project: https://github.com/jxnblk/grid-styled
+// Definitions by: Anton Vasin <https://github.com/antonvasin>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.4
+
+export type Diff<T extends string, U extends string> = ({ [P in T]: P } &
+    { [P in U]: never } & { [x: string]: never })[T];
+
+export type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
+
+import { ComponentClass } from "react";
+import { StyledComponentClass } from "styled-components";
+
+export type ResponsiveProp = number | string | Array<string | number>;
+
+export interface CommonProps {
+    width: ResponsiveProp;
+    fontSize: ResponsiveProp;
+    color: ResponsiveProp;
+    bg: ResponsiveProp;
+    m: ResponsiveProp;
+    mt: ResponsiveProp;
+    mr: ResponsiveProp;
+    mb: ResponsiveProp;
+    ml: ResponsiveProp;
+    mx: ResponsiveProp;
+    my: ResponsiveProp;
+    p: ResponsiveProp;
+    pt: ResponsiveProp;
+    pr: ResponsiveProp;
+    pb: ResponsiveProp;
+    pl: ResponsiveProp;
+    px: ResponsiveProp;
+    py: ResponsiveProp;
+    theme: any;
+}
+
+export interface BoxProps
+extends Omit<React.HTMLProps<HTMLDivElement>, "width" | "wrap" | "is"> {
+    flex: ResponsiveProp;
+    order: ResponsiveProp;
+    is: string | ComponentClass<any>;
+}
+
+export interface FlexProps extends BoxProps {
+    wrap: ResponsiveProp | boolean;
+    direction: ResponsiveProp | boolean;
+    align: ResponsiveProp | boolean;
+    justify: ResponsiveProp | boolean;
+    column: boolean;
+}
+
+export type BoxComponent = StyledComponentClass<
+    Partial<CommonProps & BoxProps>,
+    any
+    >;
+
+export type FlexComponent = StyledComponentClass<
+    Partial<CommonProps & FlexProps>,
+    any
+    >;
+
+export interface Theme {
+    breakpoints: string[];
+    space: number[];
+    fontSizes: number[];
+}
+
+export const Box: BoxComponent;
+export const Flex: FlexComponent;
+export const theme: Theme;
+export type DivProps = Omit<React.HTMLProps<HTMLDivElement>, "ref"> & {
+    innerRef: (el: HTMLDivElement) => any;
+};
+export const div: ComponentClass<DivProps>;

types/grid-styled/package.json

@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "styled-components": "^3.1.6"
+    }
+}

types/grid-styled/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "esModuleInterop": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "grid-styled-tests.tsx"
+    ]
+}

types/grid-styled/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }