feat: first pass of typescript types for everything (#3411)

Welp, that took longer than I was expecting!

I think I've got a reasonable set of prop types for each module, but i got a bit tired of detailed checking towards the end.

I'm not sure whether the polymorphic `as` behaviour actually works correctly - although in theory the types I've got there should handle it.

Because of the generated types for the final component props, the error messages can be a bit wordy - but they do seem to also include the important information as well.

I've added dtslint into the build, but unfortunately this only checks the types against the `simple.test.tsx` file, it doesn't check the types against the actual implementation in any way.

Another mild annoyance is that although i've matched up the component filenames, the types don't work for the individual component files because of the `lib` vs `src` vs `es` part of the build process. In theory the files could be duplicated during the build for the exported code if this is desired.

package.json

@@ -23,11 +23,12 @@
     "release": "rollout",
     "prepublishOnly": "npm run build",
     "tdd": "karma start",
-    "test": "npm run lint && npm run test-browser && npm run test-node",
+    "test": "npm run lint && npm run dtslint && npm run test-browser && npm run test-node",
     "test-browser": "cross-env NODE_ENV=test karma start --single-run",
     "test-node": "cross-env NODE_ENV=test-server mocha --require @babel/register test/server/*Spec.js",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "dtslint": "dtslint types"
   },
   "lint-staged": {
     "*.js": [
@@ -69,6 +70,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@storybook/react": "^3.4.8",
+    "@types/react": "^16.7.13",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
@@ -82,6 +84,7 @@
     "colors": "^1.3.3",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.2.0",
+    "dtslint": "^0.4.1",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
     "eslint": "^5.10.0",
@@ -116,6 +119,7 @@
     "release-script": "^1.0.2",
     "sinon": "^7.2.2",
     "sinon-chai": "^3.3.0",
+    "typescript": "^3.2.2",
     "webpack": "^4.28.0"
   },
   "dependencies": {

src/Badge.js

@@ -12,7 +12,7 @@ class Badge extends React.Component {
     /**
      * The visual style of the badge
      *
-     * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info|'light'|'dark')}
+     * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark')}
      */
     variant: PropTypes.string,
 

types/.gitignore

@@ -0,0 +1 @@
+!lib/

types/README.md

@@ -1,34 +1,5 @@
 # NOTE
-This is mainly the v0.32 typings with a few updates for v1.  The level of v1 compliance will improve over time. 
 
-Below is a list of components that have started to be updated/checked and (at least to some extent) to work:
+This is mainly the v0.32 typings with simple updates for v1.
 
-* Container (renamed from Grid)
-* Col
-* Row
-* Dropdown (inc .Toggle .Menu, .Item)
-* NavDropdown (inc. Item)
-* Navbar (inc .Brand .Toggle .Collapse)
-* ButtonGroup
-* Button
-
-Many other v0.32 definitions may work for you 'out of the box' or with minor edits.  
-
-The readme.md for v0.32 follows.
-
-# Installation
-> `npm install --save @types/react-bootstrap`
-
-# Summary
-This package contains type definitions for react-bootstrap (https://github.com/react-bootstrap/react-bootstrap).
-
-# Details
-Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-bootstrap
-
-Additional Details
- * Last updated: Wed, 10 Oct 2018 20:07:15 GMT
- * Dependencies: react
- * Global values: none
-
-# Credits
-These definitions were written by Walker Burgin <https://github.com/walkerburgin>, Vincent Siao <https://github.com/vsiao>, Danilo Barros <https://github.com/danilojrr>, Batbold Gansukh <https://github.com/Batbold-Gansukh>, Raymond May Jr. <https://github.com/octatone>, Cheng Sieu Ly <https://github.com/chengsieuly>, Mercedes Retolaza <https://github.com/mretolaza>, Kat Busch <https://github.com/katbusch>, Vito Samson <https://github.com/vitosamson>, Karol Janyst <https://github.com/LKay>, Aaron Beall <https://github.com/aaronbeall>, Johann Rakotoharisoa <https://github.com/jrakotoharisoa>, Andrew Makarov <https://github.com/r3nya>, Duong Tran <https://github.com/t49tran>.
+The level of v1 compliance will improve over time.

types/components/Alert.d.ts

@@ -1,15 +1,38 @@
 import * as React from 'react';
-import { Sizes } from 'react-bootstrap';
-
-declare namespace Alert {
-    export interface AlertProps extends React.HTMLProps<Alert> {
-        bsSize?: Sizes;
-        bsStyle?: string;
-        closeLabel?: string;
-        /** @deprecated since v0.29.0 */dismissAfter?: number;
-        // TODO: Add more specific type
-        onDismiss?: Function;
-    }
+
+import SafeAnchor from './SafeAnchor';
+
+import { BsPrefixComponent } from './helpers';
+
+declare class AlertLink<
+  As extends React.ReactType = typeof SafeAnchor
+> extends BsPrefixComponent<As> {}
+
+declare class AlertHeading<
+  As extends React.ReactType = 'div'
+> extends BsPrefixComponent<As> {}
+
+interface AlertProps extends React.HTMLProps<Alert> {
+  bsPrefix?: string;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'dark'
+    | 'light';
+  dismissible?: boolean;
+  show?: boolean;
+  onClose?: () => void;
+  closeLabel?: string;
+  transition?: React.ReactType;
+}
+
+declare class Alert extends React.Component<AlertProps> {
+  static Link: typeof AlertLink;
+  static Heading: typeof AlertHeading;
 }
-declare class Alert extends React.Component<Alert.AlertProps> { }
-export = Alert;
+
+export default Alert;

types/components/Badge.d.ts

@@ -1,10 +1,19 @@
 import * as React from 'react';
 
-declare namespace Badge {
-    export interface BadgeProps extends React.HTMLProps<Badge> {
-        bsClass?: string;
-        pullRight?: boolean;
-    }
+interface BadgeProps extends React.HTMLProps<Badge> {
+  bsPrefix?: string;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'light'
+    | 'dark';
+  pill?: boolean;
 }
-declare class Badge extends React.Component<Badge.BadgeProps> { }
-export = Badge;
+
+declare class Badge extends React.Component<BadgeProps> {}
+
+export default Badge;

types/components/Breadcrumb.d.ts

@@ -1,12 +1,18 @@
 import * as React from 'react';
-import * as BreadcrumbItem from './BreadcrumbItem';
 
-declare namespace Breadcrumb {
-    interface BreadcrumbProps extends React.HTMLProps<Breadcrumb> {
-        bsClass?: string;
-    }
+import { default as BreadcrumbItem } from './BreadcrumbItem';
+
+import { BsPrefixComponent } from './helpers';
+
+interface BreadcrumbProps {
+  label?: string;
+  listProps?: React.OlHTMLAttributes<any>;
 }
-declare class Breadcrumb extends React.Component<Breadcrumb.BreadcrumbProps> {
-    public static Item: typeof BreadcrumbItem;
+
+declare class Breadcrumb<
+  As extends React.ReactType = 'nav'
+> extends BsPrefixComponent<As, BreadcrumbProps> {
+  static Item: typeof BreadcrumbItem;
 }
-export = Breadcrumb;
+
+export default Breadcrumb;

types/components/BreadcrumbItem.d.ts

@@ -1,12 +1,16 @@
 import * as React from 'react';
 
-declare namespace BreadcrumbItem {
-    export interface BreadcrumbItemProps extends React.Props<BreadcrumbItem> {
-        active?: boolean;
-        href?: string;
-        title?: React.ReactNode;
-        target?: string;
-    }
+import { BsPrefixComponent } from './helpers';
+
+interface BreadcrumbItemProps {
+  active?: boolean;
+  href?: string;
+  target?: string;
+  title?: React.ReactNode;
 }
-declare class BreadcrumbItem extends React.Component<BreadcrumbItem.BreadcrumbItemProps> { }
-export = BreadcrumbItem;
+
+declare class BreadcrumbItem<
+  As extends React.ReactType = 'li'
+> extends BsPrefixComponent<As, BreadcrumbItemProps> {}
+
+export default BreadcrumbItem;

types/components/Button.d.ts

@@ -1,16 +1,36 @@
 import * as React from 'react';
-import { Sizes } from 'react-bootstrap';
 
-declare namespace Button {
-    export interface ButtonProps extends React.HTMLProps<Button> {
-        bsClass?: string;
-        active?: boolean;
-        block?: boolean;
-        bsStyle?: string | null;
-        bsSize?: Sizes;
-        componentClass?: React.ReactType;
-        disabled?: boolean;
-    }
+import { BsPrefixComponent } from './helpers';
+
+interface ButtonProps {
+  active?: boolean;
+  block?: boolean;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'dark'
+    | 'light'
+    | 'link'
+    | 'outline-primary'
+    | 'outline-secondary'
+    | 'outline-success'
+    | 'outline-danger'
+    | 'outline-warning'
+    | 'outline-info'
+    | 'outline-dark'
+    | 'outline-light';
+  size?: 'sm' | 'lg';
+  type?: 'button' | 'reset' | 'submit';
+  href?: string;
+  disabled?: boolean;
 }
-declare class Button extends React.Component<Button.ButtonProps> { }
-export = Button;
+
+declare class Button<
+  As extends React.ReactType = 'button'
+> extends BsPrefixComponent<As, ButtonProps> {}
+
+export default Button;

types/components/ButtonGroup.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { Sizes } from 'react-bootstrap';
-
-declare namespace ButtonGroup {
-    export interface ButtonGroupProps extends React.HTMLProps<ButtonGroup> {
-        block?: boolean;
-        bsSize?: Sizes;
-        bsStyle?: string;
-        justified?: boolean;
-        vertical?: boolean;
-    }
+
+import { BsPrefixComponent } from './helpers';
+
+interface ButtonGroupProps {
+  role?: string;
+  size?: 'sm' | 'lg';
+  toggle?: boolean;
+  vertical?: boolean;
 }
-declare class ButtonGroup extends React.Component<ButtonGroup.ButtonGroupProps> { }
-export = ButtonGroup;
+
+declare class ButtonGroup<
+  As extends React.ReactType = 'div'
+> extends BsPrefixComponent<As, ButtonGroupProps> {}
+
+export default ButtonGroup;

types/components/ButtonToolbar.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Sizes } from 'react-bootstrap';
-
-declare namespace ButtonToolbar {
-    export interface ButtonToolbarProps extends React.HTMLProps<ButtonToolbar> {
-        block?: boolean;
-        bsSize?: Sizes;
-        bsStyle?: string;
-        justified?: boolean;
-        vertical?: boolean;
-    }
+
+import { BsPrefixComponent } from './helpers';
+
+interface ButtonToolbarProps {
+  role?: string;
 }
-declare class ButtonToolbar extends React.Component<ButtonToolbar.ButtonToolbarProps> { }
-export = ButtonToolbar;
+
+declare class ButtonToolbar extends BsPrefixComponent<
+  'div',
+  ButtonToolbarProps
+> {}
+
+export default ButtonToolbar;