Add types and tests for @reach/tabs (#36378)

types/reach__tabs/index.d.ts

@@ -0,0 +1,40 @@
+// Type definitions for @reach/tabs 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 Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export interface TabsProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+    children: React.ReactNode;
+    as?: string;
+    index?: number;
+    readOnly?: boolean;
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+}
+
+export interface TabContainerProps extends React.HTMLProps<HTMLElement> {
+    children?: React.ReactNode;
+    selectedIndex?: number;
+    as?: string;
+}
+
+export interface TabPanelProps extends React.HTMLProps<HTMLElement> {
+    children?: React.ReactNode;
+    isSelected?: boolean;
+    as?: string;
+}
+
+export interface TabProps extends TabPanelProps {
+    disabled?: boolean;
+}
+
+export const Tabs: React.FC<TabsProps>;
+export const TabList: React.FC<TabContainerProps>;
+export const TabPanels: React.FC<TabContainerProps>;
+export const Tab: React.FC<TabProps>;
+export const TabPanel: React.FC<TabPanelProps>;

types/reach__tabs/reach__tabs-tests.tsx

@@ -0,0 +1,57 @@
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/tabs';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+const BasicTabs = () => {
+    return (
+        <>
+            <Tabs>
+                <TabList>
+                    <Tab>One</Tab>
+                    <Tab>Two</Tab>
+                </TabList>
+
+                <TabPanels>
+                    <TabPanel>
+                        <p>one!</p>
+                    </TabPanel>
+                    <TabPanel>
+                        <p>two!</p>
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+        </>
+    );
+};
+
+const TabsWithProps = () => {
+    const [tabIndex, setTabIndex] = React.useState(0);
+
+    return (
+        <Tabs onChange={setTabIndex} defaultIndex={0} index={1} as="button">
+            <TabList as="span">
+                <Tab disabled={true}>Foo</Tab>
+                <Tab as="span">Bar</Tab>
+                <Tab isSelected={false}>Baz</Tab>
+                <Tab>Bat</Tab>
+            </TabList>
+            <TabPanels as="span">
+                <TabPanel as="span">{tabIndex}</TabPanel>
+                <TabPanel>Bar</TabPanel>
+                <TabPanel>Baz</TabPanel>
+                <TabPanel>Bat</TabPanel>
+            </TabPanels>
+        </Tabs>
+    );
+};
+
+render(<BasicTabs />, document.getElementById('app'));
+render(<TabsWithProps />, document.getElementById('app'));
+render(<TabList />, document.getElementById('app'));
+render(<Tab />, document.getElementById('app'));
+render(<TabPanels />, document.getElementById('app'));
+render(<TabPanel />, document.getElementById('app'));
+
+// $ExpectError
+render(<Tabs />, document.getElementById('app'));

types/reach__tabs/tsconfig.json

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

types/reach__tabs/tslint.json

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