From 9757c2f96c89123a601f113f56e0bcc8568bc351 Mon Sep 17 00:00:00 2001 From: Carlo Cancellieri Date: Wed, 6 Jul 2016 18:45:56 +0200 Subject: [PATCH 1/5] introduce react-user-tour typings --- react-user-tour/react-user-tour-tests.ts | 6 +++++ react-user-tour/react-user-tour.d.ts | 30 ++++++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 react-user-tour/react-user-tour-tests.ts create mode 100644 react-user-tour/react-user-tour.d.ts diff --git a/react-user-tour/react-user-tour-tests.ts b/react-user-tour/react-user-tour-tests.ts new file mode 100644 index 0000000000..229ae0f049 --- /dev/null +++ b/react-user-tour/react-user-tour-tests.ts @@ -0,0 +1,6 @@ +// Tests for type definitions for react-user-tour +// Project: https://github.com/socialtables/react-user-tour +// Definitions by: Carlo Cancellieri +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// diff --git a/react-user-tour/react-user-tour.d.ts b/react-user-tour/react-user-tour.d.ts new file mode 100644 index 0000000000..bfdeac4bde --- /dev/null +++ b/react-user-tour/react-user-tour.d.ts @@ -0,0 +1,30 @@ +// Type definitions for react-user-tour +// Project: https://github.com/socialtables/react-user-tour +// Definitions by: Carlo Cancellieri +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare module "react-user-tour" { + + // Import React + import { HTMLAttributes, ComponentClass } from 'react'; + + interface TourStep { + step: number + selector: string + title: string + body: string + position?: string + } + + interface TourProps extends HTMLAttributes { + steps:TourStep[] + active:boolean + step:number + onNext:any + onBack:any + onCancel:any + } + + var ReactUserTour: ComponentClass; + export default ReactUserTour +} From f5790919f261a4e812e3754d78946d666346afb9 Mon Sep 17 00:00:00 2001 From: Carlo Cancellieri Date: Thu, 7 Jul 2016 10:36:54 +0200 Subject: [PATCH 2/5] fix spacing (4 spaces). Implement the test. Add reference to react.d.ts --- react-redux/react-redux-2.1.2-tests.tsx | 1 - react-user-tour/react-user-tour-tests.ts | 6 -- react-user-tour/react-user-tour-tests.tsx | 57 +++++++++++++++++++ .../react-user-tour-tests.tsx.tscparams | 1 + react-user-tour/react-user-tour.d.ts | 42 +++++++------- 5 files changed, 80 insertions(+), 27 deletions(-) delete mode 100644 react-user-tour/react-user-tour-tests.ts create mode 100644 react-user-tour/react-user-tour-tests.tsx create mode 100644 react-user-tour/react-user-tour-tests.tsx.tscparams diff --git a/react-redux/react-redux-2.1.2-tests.tsx b/react-redux/react-redux-2.1.2-tests.tsx index ab32609c01..7ead497767 100644 --- a/react-redux/react-redux-2.1.2-tests.tsx +++ b/react-redux/react-redux-2.1.2-tests.tsx @@ -277,4 +277,3 @@ class SomeClass extends Component { public bar: number; } let bar: number = new (connect()(SomeClass))("foo").bar; - diff --git a/react-user-tour/react-user-tour-tests.ts b/react-user-tour/react-user-tour-tests.ts deleted file mode 100644 index 229ae0f049..0000000000 --- a/react-user-tour/react-user-tour-tests.ts +++ /dev/null @@ -1,6 +0,0 @@ -// Tests for type definitions for react-user-tour -// Project: https://github.com/socialtables/react-user-tour -// Definitions by: Carlo Cancellieri -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped - -/// diff --git a/react-user-tour/react-user-tour-tests.tsx b/react-user-tour/react-user-tour-tests.tsx new file mode 100644 index 0000000000..5dc8df9f68 --- /dev/null +++ b/react-user-tour/react-user-tour-tests.tsx @@ -0,0 +1,57 @@ +// Tests for type definitions for react-user-tour +// Project: https://github.com/socialtables/react-user-tour +// Definitions by: Carlo Cancellieri +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// +/// +/// + +import React = require("react"); +import ReactDOM = require("react-dom"); + +import ReactUserTour from "react-user-tour"; + +interface State { + tourStep:number + isTourActive:boolean +} + +class TestApp extends React.Component<{}, State> { + + constructor(p:any){ + super(p) + + this.setState({ + isTourActive:true, + tourStep:1 + }) + } + + render() { + + const Tour = this.setState({tourStep: step, isTourActive: true})} + onBack={(step:number) => this.setState({tourStep: step, isTourActive: true})} + onCancel={() => this.setState({tourStep: this.state.tourStep, isTourActive: false})} + steps={[ + { + step: 1, + selector: ".MyClass", + title:
React User Tour
, + body:
Provide a simple guided tour around a website utilizing css selectors.
, + position: "bottom" + } + ]} + /> + + + + return
+ {Tour} +
+ } +} + +ReactDOM.render(React.createElement(TestApp, {}), document.getElementById("test-app")); diff --git a/react-user-tour/react-user-tour-tests.tsx.tscparams b/react-user-tour/react-user-tour-tests.tsx.tscparams new file mode 100644 index 0000000000..b238f4f2a8 --- /dev/null +++ b/react-user-tour/react-user-tour-tests.tsx.tscparams @@ -0,0 +1 @@ +--noImplicitAny --jsx react diff --git a/react-user-tour/react-user-tour.d.ts b/react-user-tour/react-user-tour.d.ts index bfdeac4bde..aef4a4000e 100644 --- a/react-user-tour/react-user-tour.d.ts +++ b/react-user-tour/react-user-tour.d.ts @@ -3,28 +3,30 @@ // Definitions by: Carlo Cancellieri // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +/// + declare module "react-user-tour" { - // Import React - import { HTMLAttributes, ComponentClass } from 'react'; - - interface TourStep { - step: number - selector: string - title: string - body: string - position?: string - } + // Import React + import { HTMLAttributes, ComponentClass } from 'react'; - interface TourProps extends HTMLAttributes { - steps:TourStep[] - active:boolean - step:number - onNext:any - onBack:any - onCancel:any - } + interface TourStep { + step: number + selector: string + title: string + body: string + position?: string + } - var ReactUserTour: ComponentClass; - export default ReactUserTour + interface TourProps extends HTMLAttributes { + steps:TourStep[] + active:boolean + step:number + onNext:any + onBack:any + onCancel:any + } + + var ReactUserTour: ComponentClass; + export default ReactUserTour } From 36ba626f58d2cf6fbca8feaf57d2e154d465bbf1 Mon Sep 17 00:00:00 2001 From: Carlo Cancellieri Date: Thu, 7 Jul 2016 12:07:31 +0200 Subject: [PATCH 3/5] Include all the optional arguments and comments --- react-user-tour/react-user-tour.d.ts | 105 ++++++++++++++++++++++++++- 1 file changed, 103 insertions(+), 2 deletions(-) diff --git a/react-user-tour/react-user-tour.d.ts b/react-user-tour/react-user-tour.d.ts index aef4a4000e..30baf58aea 100644 --- a/react-user-tour/react-user-tour.d.ts +++ b/react-user-tour/react-user-tour.d.ts @@ -11,20 +11,121 @@ declare module "react-user-tour" { import { HTMLAttributes, ComponentClass } from 'react'; interface TourStep { + /** + Index number of the step in the tour + */ step: number + /** + CSS selector to be passed to document.querySelector() + */ selector: string + /** + a react element representing the header of the current step + */ title: string + /** + a react element representing the main body message of the tour step + */ body: string - position?: string + /** + Optional properties horizontalOffset and verticalOffset values allow to move tooltip around pointed element. + */ + horizontalOffset?:number + /** + Optional properties horizontalOffset and verticalOffset values allow to move tooltip around pointed element. + */ + verticalOffset?:number + /** + Each step can also take an optional argument, position which will override the position of the tour component in relation to the selector that is determined by the application. + */ + position?: 'left'|'right'|'top'|'topLeft'|'bottom'|'bottomLeft' } interface TourProps extends HTMLAttributes { - steps:TourStep[] + /** + A boolean value representing whether or not the tour should currently be displayed + */ active:boolean + /** + An integer representing the current active step of the tour + */ step:number + /** + function that fires when user clicks the Next button. + Receives the next step integer as a callback. + For example, if current step is 1 and user clicks the Next button, onNext(2) will be called. + */ onNext:any + /** + function that fires when user clicks the Back button. + Receives the previous step integer as a callback. + For example, if current step is 2 and user clicks the Back button, onBack(1) will be called. + */ onBack:any + /** + function that fires when user clicks the X button or the Done Button. + */ onCancel:any + /** + An array of TourStep. + */ + steps:TourStep[] + /** + Optional style object. + */ + style?:any + /** + Optional style object for buttons displayed on component. + */ + buttonStyle?:any + /** + Optional style object for the container div around the buttons. + */ + buttonContainerStyle?:any + /** + We provide an arrow that points to the selector, but you may optionally pass in your own React element in the place of the arrow provided. + */ + arrow?:any + /** + If you choose to use the provided arrow, you can set the pixel size here with an integer value. + */ + arrowSize?:any + /** + If you choose to use the provided arrow, you can set the color here by passing in a hex value. + */ + arrowColor?:any + /** + Text that will appear on the button that moves the tour forward. + Defaults to Next + */ + nextButtonText?:string + /** + Text that will appear on the button that moves the tour backwards. + Defaults to Back + */ + backButtonText?:string + /** + Text that will appear on the button that finishes the tour. + Defaults to Done + */ + doneButtonText?:string + /** + Text that will appear on the button that closes the tour. + Defaults to Close + */ + closeButtonText?:string + /** + Boolean to disable the showing of next/back/done buttons. + Set this to true if you want to insert your own buttons in the body. + */ + hideButtons?:boolean + /** + Boolean to disable the showing of the close text in the upper left of + the component. Set this to true if you want to insert your own close + functionality or if you would like to disable the ability for the user + to prematurely exit the tour. + */ + hideClose?:boolean } var ReactUserTour: ComponentClass; From 519a056659abb4555e042cd8c324b4d168fe1e67 Mon Sep 17 00:00:00 2001 From: Carlo Cancellieri Date: Fri, 8 Jul 2016 12:17:59 +0200 Subject: [PATCH 4/5] applying review changes --- react-user-tour/react-user-tour-tests.tsx | 42 +++++++++++----------- react-user-tour/react-user-tour.d.ts | 44 +++++++++++------------ 2 files changed, 42 insertions(+), 44 deletions(-) diff --git a/react-user-tour/react-user-tour-tests.tsx b/react-user-tour/react-user-tour-tests.tsx index 5dc8df9f68..5cfe3f3dab 100644 --- a/react-user-tour/react-user-tour-tests.tsx +++ b/react-user-tour/react-user-tour-tests.tsx @@ -3,29 +3,29 @@ // Definitions by: Carlo Cancellieri // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -/// -/// -/// +/// +/// +/// -import React = require("react"); -import ReactDOM = require("react-dom"); +import React = require('react'); +import ReactDOM = require('react-dom'); -import ReactUserTour from "react-user-tour"; +import ReactUserTour from 'react-user-tour'; interface State { - tourStep:number - isTourActive:boolean + tourStep:number; + isTourActive:boolean; } class TestApp extends React.Component<{}, State> { constructor(p:any){ - super(p) + super(p); this.setState({ isTourActive:true, tourStep:1 - }) + }); } render() { @@ -37,21 +37,19 @@ class TestApp extends React.Component<{}, State> { onCancel={() => this.setState({tourStep: this.state.tourStep, isTourActive: false})} steps={[ { - step: 1, - selector: ".MyClass", - title:
React User Tour
, - body:
Provide a simple guided tour around a website utilizing css selectors.
, - position: "bottom" + step: 1, + selector: '.MyClass', + title:
React User Tour
, + body:
Provide a simple guided tour around a website utilizing css selectors.
, + position: 'bottom' } ]} - /> + />; - - - return
- {Tour} -
+ return
+ {Tour} +
; } } -ReactDOM.render(React.createElement(TestApp, {}), document.getElementById("test-app")); +ReactDOM.render(React.createElement(TestApp, {}), document.getElementById('test-app')); diff --git a/react-user-tour/react-user-tour.d.ts b/react-user-tour/react-user-tour.d.ts index 30baf58aea..deecdea86f 100644 --- a/react-user-tour/react-user-tour.d.ts +++ b/react-user-tour/react-user-tour.d.ts @@ -3,9 +3,9 @@ // Definitions by: Carlo Cancellieri // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -/// +/// -declare module "react-user-tour" { +declare module 'react-user-tour' { // Import React import { HTMLAttributes, ComponentClass } from 'react'; @@ -30,11 +30,11 @@ declare module "react-user-tour" { /** Optional properties horizontalOffset and verticalOffset values allow to move tooltip around pointed element. */ - horizontalOffset?:number + horizontalOffset?: number /** Optional properties horizontalOffset and verticalOffset values allow to move tooltip around pointed element. */ - verticalOffset?:number + verticalOffset?: number /** Each step can also take an optional argument, position which will override the position of the tour component in relation to the selector that is determined by the application. */ @@ -45,87 +45,87 @@ declare module "react-user-tour" { /** A boolean value representing whether or not the tour should currently be displayed */ - active:boolean + active: boolean /** An integer representing the current active step of the tour */ - step:number + step: number /** function that fires when user clicks the Next button. Receives the next step integer as a callback. For example, if current step is 1 and user clicks the Next button, onNext(2) will be called. */ - onNext:any + onNext: Function /** function that fires when user clicks the Back button. Receives the previous step integer as a callback. For example, if current step is 2 and user clicks the Back button, onBack(1) will be called. */ - onBack:any + onBack: Function /** function that fires when user clicks the X button or the Done Button. */ - onCancel:any + onCancel: Function /** An array of TourStep. */ - steps:TourStep[] + steps: TourStep[] /** Optional style object. */ - style?:any + style?: any /** Optional style object for buttons displayed on component. */ - buttonStyle?:any + buttonStyle?: any /** Optional style object for the container div around the buttons. */ - buttonContainerStyle?:any + buttonContainerStyle?: any /** We provide an arrow that points to the selector, but you may optionally pass in your own React element in the place of the arrow provided. */ - arrow?:any + arrow?: any /** If you choose to use the provided arrow, you can set the pixel size here with an integer value. */ - arrowSize?:any + arrowSize?: number /** If you choose to use the provided arrow, you can set the color here by passing in a hex value. */ - arrowColor?:any + arrowColor?: string /** Text that will appear on the button that moves the tour forward. Defaults to Next */ - nextButtonText?:string + nextButtonText?: string /** Text that will appear on the button that moves the tour backwards. Defaults to Back */ - backButtonText?:string + backButtonText?: string /** Text that will appear on the button that finishes the tour. Defaults to Done */ - doneButtonText?:string + doneButtonText?: string /** Text that will appear on the button that closes the tour. Defaults to Close */ - closeButtonText?:string + closeButtonText?: string /** Boolean to disable the showing of next/back/done buttons. Set this to true if you want to insert your own buttons in the body. */ - hideButtons?:boolean + hideButtons?: boolean /** Boolean to disable the showing of the close text in the upper left of the component. Set this to true if you want to insert your own close functionality or if you would like to disable the ability for the user to prematurely exit the tour. */ - hideClose?:boolean + hideClose?: boolean } var ReactUserTour: ComponentClass; From 13de7e8b0954d8a5f9df7b9c04d704c62db6726c Mon Sep 17 00:00:00 2001 From: Carlo Cancellieri Date: Fri, 8 Jul 2016 12:23:48 +0200 Subject: [PATCH 5/5] applying review changes --- react-user-tour/react-user-tour.d.ts | 52 ++++++++++++++-------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/react-user-tour/react-user-tour.d.ts b/react-user-tour/react-user-tour.d.ts index deecdea86f..1237977dd1 100644 --- a/react-user-tour/react-user-tour.d.ts +++ b/react-user-tour/react-user-tour.d.ts @@ -14,120 +14,120 @@ declare module 'react-user-tour' { /** Index number of the step in the tour */ - step: number + step: number; /** CSS selector to be passed to document.querySelector() */ - selector: string + selector: string; /** a react element representing the header of the current step */ - title: string + title: string; /** a react element representing the main body message of the tour step */ - body: string + body: string; /** Optional properties horizontalOffset and verticalOffset values allow to move tooltip around pointed element. */ - horizontalOffset?: number + horizontalOffset?: number; /** Optional properties horizontalOffset and verticalOffset values allow to move tooltip around pointed element. */ - verticalOffset?: number + verticalOffset?: number; /** Each step can also take an optional argument, position which will override the position of the tour component in relation to the selector that is determined by the application. */ - position?: 'left'|'right'|'top'|'topLeft'|'bottom'|'bottomLeft' + position?: 'left' | 'right' | 'top' | 'topLeft' | 'bottom' | 'bottomLeft'; } interface TourProps extends HTMLAttributes { /** A boolean value representing whether or not the tour should currently be displayed */ - active: boolean + active: boolean; /** An integer representing the current active step of the tour */ - step: number + step: number; /** function that fires when user clicks the Next button. Receives the next step integer as a callback. For example, if current step is 1 and user clicks the Next button, onNext(2) will be called. */ - onNext: Function + onNext: Function; /** function that fires when user clicks the Back button. Receives the previous step integer as a callback. For example, if current step is 2 and user clicks the Back button, onBack(1) will be called. */ - onBack: Function + onBack: Function; /** function that fires when user clicks the X button or the Done Button. */ - onCancel: Function + onCancel: Function; /** An array of TourStep. */ - steps: TourStep[] + steps: TourStep[]; /** Optional style object. */ - style?: any + style?: any; /** Optional style object for buttons displayed on component. */ - buttonStyle?: any + buttonStyle?: any; /** Optional style object for the container div around the buttons. */ - buttonContainerStyle?: any + buttonContainerStyle?: any; /** We provide an arrow that points to the selector, but you may optionally pass in your own React element in the place of the arrow provided. */ - arrow?: any + arrow?: any; /** If you choose to use the provided arrow, you can set the pixel size here with an integer value. */ - arrowSize?: number + arrowSize?: number; /** If you choose to use the provided arrow, you can set the color here by passing in a hex value. */ - arrowColor?: string + arrowColor?: string; /** Text that will appear on the button that moves the tour forward. Defaults to Next */ - nextButtonText?: string + nextButtonText?: string; /** Text that will appear on the button that moves the tour backwards. Defaults to Back */ - backButtonText?: string + backButtonText?: string; /** Text that will appear on the button that finishes the tour. Defaults to Done */ - doneButtonText?: string + doneButtonText?: string; /** Text that will appear on the button that closes the tour. Defaults to Close */ - closeButtonText?: string + closeButtonText?: string; /** Boolean to disable the showing of next/back/done buttons. Set this to true if you want to insert your own buttons in the body. */ - hideButtons?: boolean + hideButtons?: boolean; /** Boolean to disable the showing of the close text in the upper left of the component. Set this to true if you want to insert your own close functionality or if you would like to disable the ability for the user to prematurely exit the tour. */ - hideClose?: boolean + hideClose?: boolean; } var ReactUserTour: ComponentClass; - export default ReactUserTour + export default ReactUserTour; }