chore(package): Add ts-lint for typings (Semantic-Org#1156)

* chore(package): Add ts-lint for typings

* chore(package): Add typescript as dev-dependency

* chore(package): update lint command

* style(Input): update `Input` typings

* style(Input): update function definition

* style(mixed): fix indentation

* style(Input): rename interface

* style(mixed): fix lint issue

* style(mixed): fix lint issues

* style(mixed): fix lint issues

Author: layershifter

circle.yml

@@ -10,5 +10,6 @@ machine:
 test:
   pre:
     - npm run lint
+    - npm run tsd:lint
   post:
     - bash <(curl -s https://codecov.io/bash)

package.json

@@ -34,7 +34,9 @@
     "pretest": "npm run build:dll",
     "test": "cross-env NODE_ENV=test karma start",
     "test:watch": "npm run test --silent -- --watch",
-    "tsd": "cpx './src/**/*.d.ts' dist/commonjs"
+    "tsd": "cpx './src/**/*.d.ts' dist/commonjs",
+    "tsd:lint": "tslint './src/**/*.d.ts'",
+    "tsd:lint:fix": "npm run -s tsd:lint -- --fix"
   },
   "repository": {
     "type": "git",
@@ -71,8 +73,8 @@
     "chai-enzyme": "^0.6.1",
     "connect-history-api-fallback": "^1.2.0",
     "copy-to-clipboard": "^3.0.5",
-    "cross-env": "^3.1.4",
     "cpx": "^1.5.0",
+    "cross-env": "^3.1.4",
     "css-loader": "^0.26.0",
     "del": "^2.2.2",
     "dirty-chai": "^1.2.2",
@@ -124,6 +126,9 @@
     "style-loader": "^0.13.1",
     "ta-scripts": "^2.5.2",
     "through2": "^2.0.2",
+    "tslint": "^4.3.1",
+    "tslint-config-typings": "^0.3.1",
+    "typescript": "^2.1.5",
     "watch": "^1.0.1",
     "webpack": "^1.12.14",
     "webpack-dev-middleware": "^1.5.1",

src/addons/Confirm/index.d.ts

@@ -24,4 +24,4 @@ interface ConfirmProps {
   open?: boolean;
 }
 
-export const Confirm: React.ComponentClass<ConfirmProps>
+export const Confirm: React.ComponentClass<ConfirmProps>;

src/collections/Breadcrumb/index.d.ts

@@ -2,7 +2,6 @@ import { ReactMouseEvents, SemanticSIZES } from '../..';
 import * as React from 'react';
 
 interface BreadcrumbProps extends ReactMouseEvents<HTMLElement> {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -16,7 +15,8 @@ interface BreadcrumbProps extends ReactMouseEvents<HTMLElement> {
   divider?: any;
 
   /** For use with the sections prop. Render as an `Icon` component with `divider` class instead of a `div` in
-   *  Breadcrumb.Divider. */
+   *  Breadcrumb.Divider.
+   */
   icon?: any;
 
   /** Shorthand array of props for Breadcrumb.Section. */
@@ -34,7 +34,6 @@ interface BreadcrumbClass extends React.ComponentClass<BreadcrumbProps> {
 export const Breadcrumb: BreadcrumbClass;
 
 interface BreadcrumbDividerProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -51,7 +50,6 @@ interface BreadcrumbDividerProps {
 export const BreadcrumbDivider: React.ComponentClass<BreadcrumbDividerProps>;
 
 interface BreadcrumbSectionProps {
-  
   /** Style as the currently active section. */
   active?: boolean;
 

src/collections/Form/index.d.ts

@@ -13,7 +13,7 @@ import { DropdownProps } from '../../modules/Dropdown/index';
 
 
 interface FormProps {
-  method?: 'get' | 'post'
+  method?: 'get' | 'post';
 
   /** An element type to render as (string or function). */
   as?: any;
@@ -72,7 +72,6 @@ interface FormClass extends React.ComponentClass<FormProps> {
 export const Form: FormClass;
 
 interface FormFieldProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -128,7 +127,6 @@ interface FormButtonProps extends ButtonProps {
 export const FormButton: React.ComponentClass<FormButtonProps>;
 
 interface FormCheckboxProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
   control?: any;
@@ -141,7 +139,6 @@ interface FormCheckboxProps {
 export const FormCheckbox: React.ComponentClass<FormCheckboxProps>;
 
 interface FormDropdownProps extends DropdownProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -155,7 +152,6 @@ interface FormDropdownProps extends DropdownProps {
 export const FormDropdown: React.ComponentClass<FormDropdownProps>;
 
 interface FormGroupProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -183,7 +179,6 @@ interface FormInputProps extends InputProps, ReactFormEvents<HTMLInputElement>,
 export const FormInput: React.ComponentClass<FormInputProps>;
 
 interface FormRadioProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
   checked?: boolean;
@@ -200,7 +195,6 @@ interface FormRadioProps {
 export const FormRadio: React.ComponentClass<FormRadioProps>;
 
 interface FormSelectProps extends ReactFormEvents<HTMLSelectElement>, ReactFocusEvents<HTMLSelectElement> {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -219,7 +213,6 @@ interface FormSelectProps extends ReactFormEvents<HTMLSelectElement>, ReactFocus
 export const FormSelect: React.ComponentClass<FormSelectProps>;
 
 export interface FormTextAreaProps extends ReactFormEvents<HTMLTextAreaElement>, ReactFocusEvents<HTMLTextAreaElement> {
-  
   /** An element type to render as (string or function). */
   as?: any;
 

src/collections/Grid/index.d.ts

@@ -8,9 +8,8 @@ import {
 } from '../..';
 import * as React from 'react';
 
-export type GridPropReversed = 'computer' | 'computer vertically' | 'mobile' | 'mobile vertically' | 'tablet' | 'tablet vertically'
+export type GridPropReversed = 'computer' | 'computer vertically' | 'mobile' | 'mobile vertically' | 'tablet' | 'tablet vertically';
 export interface GridProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -43,7 +42,7 @@ export interface GridProps {
 
   /** A grid can specify that its columns should reverse order at different device sizes. */
   reversed?: GridPropReversed;
-  
+
   /** A grid can have its columns stack on-top of each other after reaching mobile breakpoints. */
   stackable?: boolean;
 
@@ -64,9 +63,8 @@ interface GridClass extends React.ComponentClass<GridProps> {
 
 export const Grid: GridClass;
 
-type GridPropOnly = 'computer' | 'large screen' | 'mobile' | 'tablet mobile' | 'tablet' | 'widescreen'
+type GridPropOnly = 'computer' | 'large screen' | 'mobile' | 'tablet mobile' | 'tablet' | 'widescreen';
 interface GridColumnProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -99,7 +97,7 @@ interface GridColumnProps {
 
   /** A column can specify a width for a tablet device. */
   tablet?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number;
-  
+
   /** A row can specify its text alignment. */
   textAlign?: SemanticTEXTALIGNMENTS;
 
@@ -113,10 +111,9 @@ interface GridColumnProps {
   width?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number;
 }
 
-export const GridColumn: React.ComponentClass<GridColumnProps>
+export const GridColumn: React.ComponentClass<GridColumnProps>;
 
 interface GridRowProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 

src/collections/Menu/index.d.ts

@@ -1,10 +1,10 @@
 import {
-    ReactMouseEvents,
-    SemanticCOLORS,
-    SemanticFLOATS,
-    SemanticSIZES,
-    SemanticWIDTHSNUMBER,
-    SemanticWIDTHSSTRING
+  ReactMouseEvents,
+  SemanticCOLORS,
+  SemanticFLOATS,
+  SemanticSIZES,
+  SemanticWIDTHSNUMBER,
+  SemanticWIDTHSSTRING
 } from '../..';
 import * as React from 'react';
 
@@ -161,7 +161,6 @@ interface MenuItemProps extends ReactMouseEvents<HTMLElement> {
 export const MenuItem: React.ComponentClass<MenuItemProps>;
 
 interface MenuMenuProps {
-
   /** An element type to render as (string or function). */
   as?: any;
 

src/collections/Message/index.d.ts

@@ -2,7 +2,6 @@ import { SemanticCOLORS, SemanticSIZES } from '../..';
 import * as React from 'react';
 
 interface MessageProps {
-  
 	/** An element type to render as (string or function). */
   as?: any;
 
@@ -53,7 +52,7 @@ interface MessageProps {
    * Called when the user clicks the "x" icon. This also adds the "x" icon.
    */
   onDismiss?: React.MouseEventHandler<HTMLDivElement>;
-  
+
   /** A message may be formatted to display a positive message.  Same as `success`. */
   positive?: boolean;
 
@@ -80,7 +79,6 @@ interface MessageClass extends React.ComponentClass<MessageProps> {
 export const Message: MessageClass;
 
 interface MessageContentProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -94,7 +92,6 @@ interface MessageContentProps {
 export const MessageContent: React.ComponentClass<MessageContentProps>;
 
 interface MessageHeaderProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -108,7 +105,6 @@ interface MessageHeaderProps {
 export const MessageHeader: React.ComponentClass<MessageHeaderProps>;
 
 interface MessageListProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -125,7 +121,6 @@ interface MessageListProps {
 export const MessageList: React.ComponentClass<MessageListProps>;
 
 interface MessageItemProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 

src/collections/Table/index.d.ts

@@ -9,7 +9,6 @@ import {
 import * as React from 'react';
 
 interface TableProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -33,13 +32,13 @@ interface TableProps {
 
   /** A table can be given a color to distinguish it from other tables. */
   color?: SemanticCOLORS;
-  
+
   /** A table can specify its column count to divide its content evenly. */
   columns?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING | number;
-  
+
   /** A table may sometimes need to be more compact to make more rows visible at a time. */
   compact?: boolean | 'very';
-  
+
   /** A table may be formatted to emphasize a first column that defines a rows content. */
   definition?: boolean;
 
@@ -65,22 +64,22 @@ interface TableProps {
    * to be placed within Table.Body.
    */
   renderBodyRow?: ()=>void;  // TODO - check;
-  
+
   /** A table can have its rows appear selectable. */
   selectable?: boolean;
-  
+
   /** A table can specify that its cell contents should remain on a single line and not wrap. */
   singleLine?: boolean;
-  
+
   /** A table can also be small or large. */
   size?: SemanticSIZES;
-  
+
   /** A table can specify how it stacks table content responsively. */
   stackable?: boolean;
 
   /** A table can stripe alternate rows of content with a darker color to increase contrast. */
   striped?: boolean;
-  
+
   /** A table can be formatted to display complex structured data. */
   structured?: boolean;
 
@@ -103,7 +102,6 @@ interface TableClass extends React.ComponentClass<TableProps> {
 export const Table: TableClass;
 
 interface TableBodyProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -150,10 +148,10 @@ interface TableCellProps {
 
   /** A cell may let a user know whether a value is good. */
   positive ?: boolean;
-  
+
   /** A cell can be selectable. */
   selectable?: boolean;
-  
+
   /** A cell can specify that its contents should remain on a single line and not wrap. */
   singleLine ?: boolean;
 
@@ -173,15 +171,13 @@ interface TableCellProps {
 export const TableCell: React.ComponentClass<TableCellProps>;
 
 interface TableFooterProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 }
 
 export const TableFooter: React.ComponentClass<TableFooterProps>;
 
 interface TableHeaderProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -198,7 +194,6 @@ interface TableHeaderProps {
 export const TableHeader: React.ComponentClass<TableHeaderProps>;
 
 interface TableHeaderCellProps {
-  
   /** An element type to render as (string or function). */
   as?: any;
 }