Added typedef and tests for @reach/alert-dialog and @reach/dialog (#36369)

types/reach__alert-dialog/index.d.ts

@@ -0,0 +1,25 @@
+// Type definitions for @reach/alert-dialog 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';
+import { DialogProps, DialogContentProps } from 'reach__dialog';
+
+export type AlertDialogProps = {
+    isOpen?: boolean;
+    onDismiss?: () => void;
+    leastDestructiveRef: React.RefObject<HTMLElement>;
+    children: React.ReactNode;
+} & DialogProps;
+
+export type AlertDialogContentProps = {
+    children: React.ReactNode;
+} & DialogContentProps;
+
+export const AlertDialog: React.FunctionComponent<AlertDialogProps>;
+export const AlertDialogLabel: React.FC<React.HTMLProps<HTMLDivElement>>;
+export const AlertDialogDescription: React.FC<React.HTMLProps<HTMLDivElement>>;
+export const AlertDialogOverlay: React.FC<AlertDialogProps>;
+export const AlertDialogContent: React.FC<AlertDialogContentProps>;

types/reach__alert-dialog/reach__alert-dialog-tests.tsx

@@ -0,0 +1,52 @@
+import {
+    AlertDialog,
+    AlertDialogLabel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogOverlay,
+} from '@reach/alert-dialog';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+class GoodExamples extends React.Component {
+    cancelRef = React.createRef<HTMLButtonElement>();
+
+    render() {
+        return (
+            <>
+                <AlertDialog leastDestructiveRef={this.cancelRef}>
+                    <AlertDialogLabel>Please Confirm!</AlertDialogLabel>
+
+                    <AlertDialogDescription>
+                        Are you sure you want to delete stuff, it will be permanent.
+                    </AlertDialogDescription>
+
+                    <button ref={this.cancelRef}>Nevermind</button>
+                </AlertDialog>
+
+                <AlertDialogOverlay leastDestructiveRef={this.cancelRef}>
+                    <AlertDialogContent>
+                        <AlertDialogLabel>Please Confirm!</AlertDialogLabel>
+
+                        <AlertDialogDescription>
+                            Are you sure you want to delete stuff, it will be permanent.
+                        </AlertDialogDescription>
+
+                        <button ref={this.cancelRef}>Nevermind</button>
+                    </AlertDialogContent>
+                </AlertDialogOverlay>
+            </>
+        );
+    }
+}
+
+render(<GoodExamples />, document.getElementById('app'));
+render(<AlertDialogLabel />, document.getElementById('app'));
+render(<AlertDialogDescription />, document.getElementById('app'));
+
+// No children and needs leastDestructiveRef
+// $ExpectError
+render(<AlertDialog />, document.getElementById('app'));
+// $ExpectError
+render(<AlertDialogOverlay />, document.getElementById('app'));

types/reach__alert-dialog/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/alert-dialog": ["reach__alert-dialog"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__alert-dialog-tests.tsx"
+    ]
+}

types/reach__alert-dialog/tslint.json

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

types/reach__dialog/index.d.ts

@@ -0,0 +1,25 @@
+// Type definitions for @reach/dialog 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 type DialogProps = {
+    isOpen?: boolean;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+} & React.HTMLProps<HTMLDivElement>;
+
+export type DialogOverlayProps = {
+    initialFocusRef?: React.RefObject<HTMLElement>;
+} & DialogProps;
+
+export type DialogContentProps = {
+    children?: React.ReactNode;
+} & React.HTMLProps<HTMLDivElement>;
+
+export const Dialog: React.FC<DialogProps>;
+export const DialogOverlay: React.FC<DialogOverlayProps>;
+export const DialogContent: React.FC<DialogContentProps>;

types/reach__dialog/reach__dialog-tests.tsx

@@ -0,0 +1,44 @@
+import { Dialog, DialogOverlay, DialogContent } from '@reach/dialog';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+class Example extends React.Component {
+    state = { showDialog: true };
+    buttonRef = React.createRef<HTMLButtonElement>();
+
+    render() {
+        const { setState, state } = this;
+
+        return (
+            <>
+                <Dialog isOpen={state.showDialog} onDismiss={() => setState({ showDialog: false })}>
+                    <button className="close-button" onClick={() => setState({ showDialog: false })}>
+                        <span aria-hidden>×</span>
+                    </button>
+                    <p>Hello there. I am a dialog</p>
+                </Dialog>
+
+                <DialogOverlay
+                    style={{ background: 'hsla(0, 100%, 100%, 0.9)' }}
+                    isOpen={state.showDialog}
+                    onDismiss={() => setState({ showDialog: false })}
+                    initialFocusRef={this.buttonRef}
+                >
+                    <DialogContent>
+                        <p>The overlay styles are a white fade instead of the default black fade.</p>
+                        <button ref={this.buttonRef} onClick={() => setState({ showDialog: false })}>
+                            Very nice.
+                        </button>
+                    </DialogContent>
+                </DialogOverlay>
+            </>
+        );
+    }
+}
+
+render(<Example />, document.getElementById('app'));
+
+render(<Dialog />, document.getElementById('app'));
+render(<DialogContent />, document.getElementById('app'));
+render(<DialogOverlay />, document.getElementById('app'));

types/reach__dialog/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@reach/dialog": ["reach__dialog"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "reach__dialog-tests.tsx"
+    ]
+}

types/reach__dialog/tslint.json

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