From 93cb7d2d62e0bbf27393bdaf44f51d16e508b164 Mon Sep 17 00:00:00 2001
From: Harry Hedger <hedgerh@gmail.com>
Date: Fri, 28 Jun 2019 09:42:26 -0700
Subject: [PATCH] Add types/tests for @reach/auto-id, @reach/rect,
 @reach/skip-nav, @reach/utils, @reach/visually-hidden, @reach/window-size
 (#36373)

---
 types/reach__auto-id/index.d.ts               |  7 +++++
 types/reach__auto-id/reach__auto-id-tests.ts  |  4 +++
 types/reach__auto-id/tsconfig.json            | 28 +++++++++++++++++
 types/reach__auto-id/tslint.json              |  1 +
 types/reach__rect/index.d.ts                  | 18 +++++++++++
 types/reach__rect/reach__rect-tests.tsx       | 31 +++++++++++++++++++
 types/reach__rect/tsconfig.json               | 28 +++++++++++++++++
 types/reach__rect/tslint.json                 |  1 +
 types/reach__skip-nav/index.d.ts              | 14 +++++++++
 .../reach__skip-nav/reach__skip-nav-tests.tsx | 20 ++++++++++++
 types/reach__skip-nav/tsconfig.json           | 28 +++++++++++++++++
 types/reach__skip-nav/tslint.json             |  1 +
 types/reach__utils/index.d.ts                 | 14 +++++++++
 types/reach__utils/reach__utils-tests.tsx     |  4 +++
 types/reach__utils/tsconfig.json              | 28 +++++++++++++++++
 types/reach__utils/tslint.json                |  1 +
 types/reach__visually-hidden/index.d.ts       | 10 ++++++
 .../reach__visually-hidden-tests.tsx          | 13 ++++++++
 types/reach__visually-hidden/tsconfig.json    | 28 +++++++++++++++++
 types/reach__visually-hidden/tslint.json      |  1 +
 types/reach__window-size/index.d.ts           | 14 +++++++++
 .../reach__window-size-tests.tsx              | 18 +++++++++++
 types/reach__window-size/tsconfig.json        | 29 +++++++++++++++++
 types/reach__window-size/tslint.json          |  1 +
 24 files changed, 342 insertions(+)
 create mode 100644 types/reach__auto-id/index.d.ts
 create mode 100644 types/reach__auto-id/reach__auto-id-tests.ts
 create mode 100644 types/reach__auto-id/tsconfig.json
 create mode 100644 types/reach__auto-id/tslint.json
 create mode 100644 types/reach__rect/index.d.ts
 create mode 100644 types/reach__rect/reach__rect-tests.tsx
 create mode 100644 types/reach__rect/tsconfig.json
 create mode 100644 types/reach__rect/tslint.json
 create mode 100644 types/reach__skip-nav/index.d.ts
 create mode 100644 types/reach__skip-nav/reach__skip-nav-tests.tsx
 create mode 100644 types/reach__skip-nav/tsconfig.json
 create mode 100644 types/reach__skip-nav/tslint.json
 create mode 100644 types/reach__utils/index.d.ts
 create mode 100644 types/reach__utils/reach__utils-tests.tsx
 create mode 100644 types/reach__utils/tsconfig.json
 create mode 100644 types/reach__utils/tslint.json
 create mode 100644 types/reach__visually-hidden/index.d.ts
 create mode 100644 types/reach__visually-hidden/reach__visually-hidden-tests.tsx
 create mode 100644 types/reach__visually-hidden/tsconfig.json
 create mode 100644 types/reach__visually-hidden/tslint.json
 create mode 100644 types/reach__window-size/index.d.ts
 create mode 100644 types/reach__window-size/reach__window-size-tests.tsx
 create mode 100644 types/reach__window-size/tsconfig.json
 create mode 100644 types/reach__window-size/tslint.json

diff --git a/types/reach__auto-id/index.d.ts b/types/reach__auto-id/index.d.ts
new file mode 100644
index 0000000000..1c264cce3b
--- /dev/null
+++ b/types/reach__auto-id/index.d.ts
@@ -0,0 +1,7 @@
+// Type definitions for @reach/auto-id 0.2
+// Project: https://github.com/reach/reach-ui
+// Definitions by: Harry Hedger <https://github.com/hedgerh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+export function useId(): number;
diff --git a/types/reach__auto-id/reach__auto-id-tests.ts b/types/reach__auto-id/reach__auto-id-tests.ts
new file mode 100644
index 0000000000..b1be9c577b
--- /dev/null
+++ b/types/reach__auto-id/reach__auto-id-tests.ts
@@ -0,0 +1,4 @@
+import { useId } from '@reach/auto-id';
+
+// $ExpectType number
+useId();
diff --git a/types/reach__auto-id/tsconfig.json b/types/reach__auto-id/tsconfig.json
new file mode 100644
index 0000000000..eda7c6f5c0
--- /dev/null
+++ b/types/reach__auto-id/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/auto-id": ["reach__auto-id"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__auto-id-tests.ts"
+    ]
+}
diff --git a/types/reach__auto-id/tslint.json b/types/reach__auto-id/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/reach__auto-id/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
diff --git a/types/reach__rect/index.d.ts b/types/reach__rect/index.d.ts
new file mode 100644
index 0000000000..6621576109
--- /dev/null
+++ b/types/reach__rect/index.d.ts
@@ -0,0 +1,18 @@
+// Type definitions for @react/rect 0.2
+// Project: https://github.com/reach/reach-ui
+// Definitions by: Harry Hedger <https://github.com/hedgerh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+
+export interface RectProps {
+    observe?: boolean;
+    onChange?: (rect: DOMRect) => void;
+    children?(args: { rect: DOMRect, ref: React.Ref<any> }): React.ReactNode;
+}
+
+declare const Rect: React.FC<RectProps>;
+export default Rect;
+
+export function useRect(ref: React.Ref<any>, isSelected?: boolean): DOMRect;
diff --git a/types/reach__rect/reach__rect-tests.tsx b/types/reach__rect/reach__rect-tests.tsx
new file mode 100644
index 0000000000..e29348bac8
--- /dev/null
+++ b/types/reach__rect/reach__rect-tests.tsx
@@ -0,0 +1,31 @@
+import Rect, { useRect } from '@reach/rect';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+function Example() {
+    const ref = React.useRef<HTMLDivElement | null>(null);
+    const rect = useRect(ref);
+
+    return (
+        <div>
+            <pre>{JSON.stringify(rect, null, 2)}</pre>
+            <div ref={ref} />
+
+            <Rect observe={false}>
+                {({ rect, ref }) => (
+                    <div ref={ref}>
+                        <div>Will not measure the element when false</div>
+                        <div>
+                            Edit this code and change it to <code>true</code>
+                        </div>
+                        <pre>{JSON.stringify(rect, null, 2)}</pre>
+                    </div>
+                )}
+            </Rect>
+        </div>
+    );
+}
+
+render(<Example />, document.getElementById('app'));
+render(<Rect />, document.getElementById('app'));
diff --git a/types/reach__rect/tsconfig.json b/types/reach__rect/tsconfig.json
new file mode 100644
index 0000000000..e61720fa20
--- /dev/null
+++ b/types/reach__rect/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/rect": ["reach__rect"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__rect-tests.tsx"
+    ]
+}
diff --git a/types/reach__rect/tslint.json b/types/reach__rect/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/reach__rect/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
diff --git a/types/reach__skip-nav/index.d.ts b/types/reach__skip-nav/index.d.ts
new file mode 100644
index 0000000000..1664632ff4
--- /dev/null
+++ b/types/reach__skip-nav/index.d.ts
@@ -0,0 +1,14 @@
+// Type definitions for @reach/skip-nav 0.1
+// Project: https://github.com/reach/reach-ui
+// Definitions by: Harry Hedger <https://github.com/hedgerh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+
+export interface SkipNavProps {
+    children?: string | React.ReactNode;
+}
+
+export class SkipNavLink extends React.Component<SkipNavProps & React.HTMLProps<HTMLAnchorElement>> {}
+export class SkipNavContent extends React.Component<SkipNavProps & React.HTMLProps<HTMLDivElement>> {}
diff --git a/types/reach__skip-nav/reach__skip-nav-tests.tsx b/types/reach__skip-nav/reach__skip-nav-tests.tsx
new file mode 100644
index 0000000000..072a59454a
--- /dev/null
+++ b/types/reach__skip-nav/reach__skip-nav-tests.tsx
@@ -0,0 +1,20 @@
+import { SkipNavLink, SkipNavContent } from '@reach/skip-nav';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+render(<SkipNavLink />, document.getElementById('app'));
+render(
+    <SkipNavLink style={{ color: 'red' }} onClick={() => {}}>
+        Skip it
+    </SkipNavLink>,
+    document.getElementById('app')
+);
+
+render(<SkipNavContent />, document.getElementById('app'));
+render(
+    <SkipNavContent style={{ color: 'red' }} onClick={() => {}}>
+        Skip Nav Content
+    </SkipNavContent>,
+    document.getElementById('app')
+);
diff --git a/types/reach__skip-nav/tsconfig.json b/types/reach__skip-nav/tsconfig.json
new file mode 100644
index 0000000000..2b869ee351
--- /dev/null
+++ b/types/reach__skip-nav/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/skip-nav": ["reach__skip-nav"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__skip-nav-tests.tsx"
+    ]
+}
diff --git a/types/reach__skip-nav/tslint.json b/types/reach__skip-nav/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/reach__skip-nav/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
diff --git a/types/reach__utils/index.d.ts b/types/reach__utils/index.d.ts
new file mode 100644
index 0000000000..54a90c37b8
--- /dev/null
+++ b/types/reach__utils/index.d.ts
@@ -0,0 +1,14 @@
+// Type definitions for @reach/utils 0.2
+// Project: https://github.com/reach/reach-ui
+// Definitions by: Harry Hedger <https://github.com/hedgerh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+
+export function checkStyles(pkg: string): () => void;
+export function wrapEvent(
+  handler: React.ReactEventHandler | undefined,
+  cb: React.ReactEventHandler
+): React.ReactEventHandler;
+export function assignRef(ref?: React.Ref<any>, value?: React.ReactNode): void;
diff --git a/types/reach__utils/reach__utils-tests.tsx b/types/reach__utils/reach__utils-tests.tsx
new file mode 100644
index 0000000000..21bd5e13e4
--- /dev/null
+++ b/types/reach__utils/reach__utils-tests.tsx
@@ -0,0 +1,4 @@
+import { checkStyles, wrapEvent, assignRef } from '@reach/utils';
+
+import * as React from 'react';
+import { render } from 'react-dom';
diff --git a/types/reach__utils/tsconfig.json b/types/reach__utils/tsconfig.json
new file mode 100644
index 0000000000..e5141f6a92
--- /dev/null
+++ b/types/reach__utils/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/utils": ["reach__utils"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__utils-tests.tsx"
+    ]
+}
diff --git a/types/reach__utils/tslint.json b/types/reach__utils/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/reach__utils/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
diff --git a/types/reach__visually-hidden/index.d.ts b/types/reach__visually-hidden/index.d.ts
new file mode 100644
index 0000000000..bcfc1ead35
--- /dev/null
+++ b/types/reach__visually-hidden/index.d.ts
@@ -0,0 +1,10 @@
+// Type definitions for @reach/visually-hidden 0.2
+// Project: https://github.com/reach/reach-ui
+// Definitions by: Harry Hedger <https://github.com/hedgerh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+
+declare let VisuallyHidden: React.FC<any>;
+export default VisuallyHidden;
diff --git a/types/reach__visually-hidden/reach__visually-hidden-tests.tsx b/types/reach__visually-hidden/reach__visually-hidden-tests.tsx
new file mode 100644
index 0000000000..9493de6502
--- /dev/null
+++ b/types/reach__visually-hidden/reach__visually-hidden-tests.tsx
@@ -0,0 +1,13 @@
+import VisuallyHidden from '@reach/visually-hidden';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+render(<VisuallyHidden />, document.getElementById('app'));
+
+render(
+    <VisuallyHidden>
+        <div>I should be hidden!</div>
+    </VisuallyHidden>,
+    document.getElementById('app')
+);
diff --git a/types/reach__visually-hidden/tsconfig.json b/types/reach__visually-hidden/tsconfig.json
new file mode 100644
index 0000000000..60424c8825
--- /dev/null
+++ b/types/reach__visually-hidden/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/visually-hidden": ["reach__visually-hidden"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__visually-hidden-tests.tsx"
+    ]
+}
diff --git a/types/reach__visually-hidden/tslint.json b/types/reach__visually-hidden/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/reach__visually-hidden/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
diff --git a/types/reach__window-size/index.d.ts b/types/reach__window-size/index.d.ts
new file mode 100644
index 0000000000..ad140bbd33
--- /dev/null
+++ b/types/reach__window-size/index.d.ts
@@ -0,0 +1,14 @@
+// Type definitions for @reach/window-size 0.1
+// Project: https://github.com/reach/reach-ui
+// Definitions by: Harry Hedger <https://github.com/hedgerh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+
+export interface WindowSizeProps {
+    children: (size: { width: number; height: number }) => React.ReactNode;
+}
+
+declare const WindowSize: React.FC<WindowSizeProps>;
+export default WindowSize;
diff --git a/types/reach__window-size/reach__window-size-tests.tsx b/types/reach__window-size/reach__window-size-tests.tsx
new file mode 100644
index 0000000000..528b9624e1
--- /dev/null
+++ b/types/reach__window-size/reach__window-size-tests.tsx
@@ -0,0 +1,18 @@
+import WindowSize from '@reach/window-size';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+render(
+    <WindowSize>
+    {(size) => (
+        <div>
+            <div>Resize your window.</div>
+            <pre>{JSON.stringify(size, null, 2)}</pre>
+        </div>
+    )}
+    </WindowSize>,
+    document.getElementById('app')
+);
+
+render(<WindowSize />, document.getElementById('app')); // $ExpectError
diff --git a/types/reach__window-size/tsconfig.json b/types/reach__window-size/tsconfig.json
new file mode 100644
index 0000000000..c78b52f7fa
--- /dev/null
+++ b/types/reach__window-size/tsconfig.json
@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/window-size": ["reach__window-size"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__window-size-tests.tsx"
+    ]
+  }
+  
\ No newline at end of file
diff --git a/types/reach__window-size/tslint.json b/types/reach__window-size/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/reach__window-size/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }