Add typescript types

.github/PULL_REQUEST_TEMPLATE.md

@@ -33,4 +33,4 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 - [ ] I have made corresponding changes to the documentation
 - [ ] My changes generate no new warnings
 - [ ] Any dependent changes have been merged and published in downstream modules
-- [ ] I have updated type definitions in [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/spectacle/index.d.ts) for any breaking API changes
+- [ ] I have updated type definitions in `index.d.ts` for any breaking API changes

LICENSE

@@ -1,6 +1,9 @@
 The MIT License (MIT)
 
-Copyright (c) 2013
+Copyright (c) 2013-2018 Formidable Labs, Inc.
+
+Copyright (c) 2016-2018 Zachary Maybury, Kylie Stewart, and potentially other
+DefinitelyTyped contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
@@ -17,4 +20,4 @@ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

index.d.ts

@@ -0,0 +1,319 @@
+// Definitions by: Zachary Maybury <https://github.com/zmaybury>
+//                 Kylie Stewart <https://github.com/kale-stew>
+
+declare module 'spectacle' {
+  import * as CSS from 'csstype';
+  import * as React from 'react';
+
+  /**
+   * Alignment Types for Spectacle
+   */
+  type alignType =
+    | 'flex-start flex-start'
+    | 'flex-start center'
+    | 'flex-start flex-end'
+    | 'center flex-start'
+    | 'center center'
+    | 'center flex-end'
+    | 'flex-end flex-start'
+    | 'flex-end center'
+    | 'flex-end flex-end';
+
+  /**
+   * Animation Types for Spectacle
+   */
+  type easeType =
+    | 'back'
+    | 'backIn'
+    | 'backOut'
+    | 'backInOut'
+    | 'bounce'
+    | 'bounceIn'
+    | 'bounceOut'
+    | 'bounceInOut'
+    | 'circle'
+    | 'circleIn'
+    | 'circleOut'
+    | 'circleInOut'
+    | 'linear'
+    | 'linearIn'
+    | 'linearOut'
+    | 'linearInOut'
+    | 'cubic'
+    | 'cubicIn'
+    | 'cubicOut'
+    | 'cubicInOut'
+    | 'elastic'
+    | 'elasticIn'
+    | 'elasticOut'
+    | 'elasticInOut'
+    | 'exp'
+    | 'expIn'
+    | 'expOut'
+    | 'expInOut'
+    | 'poly'
+    | 'polyIn'
+    | 'polyOut'
+    | 'polyInOut'
+    | 'quad'
+    | 'quadIn'
+    | 'quadOut'
+    | 'quadInOut'
+    | 'sin'
+    | 'sinIn'
+    | 'sinOut'
+    | 'sinInOut';
+
+  /**
+   * Progress Types for Spectacle
+   */
+  type progressType = 'pacman' | 'bar' | 'number' | 'none';
+
+  /**
+   * S Types for StyledS in Spectacle
+   */
+  type sType = 'italic' | 'bold' | 'line-through' | 'underline';
+
+  /**
+   * Target Types for links
+   */
+  type targetType = '_blank' | '_self' | '_parent' | '_top';
+
+  /**
+   * Theme Types for CodePane in Spectacle
+   */
+  type themeType = 'dark' | 'light' | 'external';
+
+  /**
+   * Transition Types for Spectacle
+   */
+  type transitionType = 'slide' | 'zoom' | 'fade' | 'spin';
+
+  /**
+   * All available DOM style properties and their types
+   * https://www.npmjs.com/package/csstype
+   */
+  interface CSSProperties extends CSS.Properties<string | number> {}
+
+  interface AnimProps {
+    easing: easeType;
+    fromStyle: CSSProperties | CSSProperties[];
+    onAnim?: (forwards?: boolean, animIndex?: number) => void;
+    order?: number;
+    route?: object;
+    style?: CSSProperties;
+    toStyle: CSSProperties | CSSProperties[];
+    transitionDuration: number;
+  }
+
+  interface AppearProps {
+    easing?: easeType;
+    endValue?: object;
+    fid?: string;
+    order?: number;
+    startValue?: object;
+    style?: BaseProps['style'];
+    transitionDuration?: number;
+  }
+
+  /**
+   * Base props for many Spectacle components
+   */
+  interface BaseProps {
+    bgColor?: string;
+    bgDarken?: number;
+    bgImage?: string;
+    bold?: boolean;
+    caps?: boolean;
+    className?: string;
+    italic?: boolean;
+    margin?: number | string;
+    padding?: number | string;
+    style?: CSSProperties;
+    textAlign?: string;
+    textColor?: string;
+    textFont?: string;
+    textSize?: string;
+  }
+
+  interface CodePaneProps {
+    className?: BaseProps['className'];
+    contentEditable?: boolean;
+    lang?: string;
+    source?: string;
+    style?: BaseProps['style'];
+    theme?: themeType;
+  }
+
+  interface ComponentPlaygroundProps {
+    code?: string;
+    previewBackgroundColor?: string;
+    scope?: object;
+    theme?: themeType;
+    transformCode?: (code: string) => string;
+  }
+
+  interface DeckProps {
+    autoplay?: boolean;
+    autoplayDuration?: number;
+    autoplayLoop?: boolean;
+    controls?: boolean;
+    globalStyles?: boolean;
+    history?: any; // Needs a type, see https://github.com/ReactTraining/history
+    onStateChange?: (previousState?: string, nextState?: string) => void;
+    progress?: progressType;
+    theme?: Theme;
+    transition?: transitionType[];
+    transitionDuration?: number;
+  }
+
+  interface FillProps {
+    className?: string;
+    style?: CSSProperties;
+  }
+
+  interface FitProps extends FillProps {} // tslint:disable-line:no-empty-interface
+
+  interface GoToActionProps {
+    margin?: BaseProps['margin'];
+    padding?: BaseProps['padding'];
+    render?: (goToSlide?: (slide: number | string) => void) => void;
+    slide?: number | string;
+    style?: BaseProps['style'];
+  }
+
+  interface HeadingProps extends BaseProps {
+    fit?: boolean;
+    lineHeight?: number;
+    size?: number;
+  }
+
+  interface ImageProps {
+    alt?: string;
+    className?: BaseProps['className'];
+    display?: string;
+    height?: number | string;
+    margin?: BaseProps['margin'];
+    padding?: BaseProps['padding'];
+    src?: string;
+    width?: number | string;
+  }
+
+  interface LayoutProps {
+    style?: CSSProperties;
+  }
+
+  interface LinkProps extends BaseProps {
+    href?: string;
+    target?: targetType;
+  }
+
+  interface MarkdownProps {
+    mdastConfig?: { [key: string]: number | string };
+    source?: string;
+  }
+
+  interface SlideProps extends BaseProps {
+    align?: alignType;
+    contentStyles?: CSSProperties;
+    controlColor?: string;
+    dispatch?: () => void;
+    hash?: number | string;
+    progressColor?: string;
+    history?: any; // Needs a type, see https://github.com/ReactTraining/history
+    id?: string;
+    lastSlideIndex?: number;
+    notes?: string;
+    onActive?: (slideIndex: string | number) => void;
+    slideIndex?: number;
+    state?: string;
+    transition?: transitionType[];
+    transitionDuration?: number;
+    transitionIn?: transitionType[];
+    transitionOut?: transitionType[];
+  }
+
+  interface SProps extends BaseProps {
+    type?: sType | sType[];
+  }
+
+  interface TextProps extends BaseProps {
+    fit?: boolean;
+    lineHeight?: number;
+  }
+
+  interface Theme {
+    [key: string]: number | string;
+  }
+
+  class Anim extends React.Component<AnimProps> {}
+
+  class Appear extends React.Component<AppearProps> {}
+
+  class BlockQuote extends React.Component<BaseProps> {}
+
+  class Cite extends React.Component<BaseProps> {}
+
+  class Code extends React.Component<BaseProps> {}
+
+  class CodePane extends React.Component<CodePaneProps> {}
+
+  class ComponentPlayground extends React.Component<ComponentPlaygroundProps> {}
+
+  class Deck extends React.Component<DeckProps> {}
+
+  class Fill extends React.Component<FillProps> {}
+
+  class Fit extends React.Component<FitProps> {}
+
+  class GoToAction extends React.Component<GoToActionProps> {}
+
+  class Heading extends React.Component<HeadingProps> {}
+
+  class Image extends React.Component<ImageProps> {}
+
+  class Layout extends React.Component<LayoutProps> {}
+
+  class Link extends React.Component<LinkProps> {}
+
+  class List extends React.Component<BaseProps> {}
+
+  class ListItem extends React.Component<BaseProps> {}
+
+  class Markdown extends React.Component<MarkdownProps> {}
+
+  class Notes extends React.Component<BaseProps> {}
+
+  class Quote extends React.Component<BaseProps> {}
+
+  class S extends React.Component<SProps> {}
+
+  class Slide extends React.Component<SlideProps> {}
+
+  class SlideSet extends React.Component<BaseProps> {}
+
+  class Table extends React.Component<BaseProps> {}
+
+  class TableBody extends React.Component<BaseProps> {}
+
+  class TableHeader extends React.Component<BaseProps> {}
+
+  class TableHeaderItem extends React.Component<BaseProps> {}
+
+  class TableItem extends React.Component<BaseProps> {}
+
+  class TableRow extends React.Component<BaseProps> {}
+
+  class Text extends React.Component<TextProps> {}
+}
+
+declare module 'spectacle/lib/utils/preloader' {
+  const preloader: (obj: object) => void;
+  export default preloader;
+}
+
+declare module 'spectacle/lib/themes/default' {
+  import { Theme } from 'spectacle';
+  const createTheme: (...args: object[]) => Theme;
+  export default createTheme;
+}

package.json

@@ -4,9 +4,10 @@
   "description": "ReactJS Powered Presentation Framework",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "types": "index.d.ts",
   "jsnext:main": "es/index.js",
   "scripts": {
-    "preversion": "npm run test && npm run lint",
+    "preversion": "npm run check",
     "version": "npm run build:publish",
     "clean:lib": "rimraf lib",
     "clean:dist": "rimraf dist",
@@ -22,16 +23,19 @@
     "build:dist-umd-prod": "builder run build-webpack -- --config webpack.config.umd.production.js",
     "build": "builder concurrent --buffer build:es build:lib build:dist build:dist-umd build:dist-umd-prod",
     "build:publish": "npm run clean && npm run build",
-    "lint": "eslint src example *.js",
-    "lint-fix": "npm run lint -- --fix",
-    "prettier": "prettier \"**/*.{js,json,css,md}\"",
+    "lint": "npm run lint-js && npm run lint-dts",
+    "lint-js": "eslint src example *.js",
+    "lint-fix": "npm run lint-js -- --fix && npm run lint-dts -- --fix",
+    "lint-dts": "tslint index.d.ts --format verbose",
+    "prettier": "prettier \"**/*.{js,json,ts,css,md}\"",
     "prettier-fix": "npm run prettier -- --write",
     "prettier-check": "npm run prettier -- --list-different",
     "deploy": "npm run build:dist && surge -p .",
     "start": "builder run --env \"{\\\"BABEL_ENV\\\":\\\"esm\\\"}\" build-wds-base -- --port=3000 --hot",
     "test": "jest --verbose",
     "test-debug": "node --inspect-brk node_modules/jest/bin/jest.js --runInBand",
-    "check": "npm run lint && npm run test",
+    "check-typescript": "tsc index.d.ts && npm run lint-dts",
+    "check": "npm run lint-js && npm run check-typescript && npm run test",
     "check-ci": "npm run check && npm run prettier-check"
   },
   "author": "",
@@ -41,6 +45,7 @@
     "url": "https://github.com/FormidableLabs/spectacle.git"
   },
   "dependencies": {
+    "csstype": "^2.6.0",
     "deep-object-diff": "^1.0.4",
     "emotion": "^8.0.8",
     "history": "^4.6.1",
@@ -102,6 +107,8 @@
     "rimraf": "^2.6.1",
     "style-loader": "^0.20.3",
     "surge": "^0.19.0",
+    "tslint": "^5.12.0",
+    "typescript": "^3.2.2",
     "url-loader": "^1.0.1",
     "webpack": "^4.26.1",
     "webpack-cli": "^3.1.2",