Add types for react-popper, remove types for react-joyride

packages/typescript-typings/types/react-joyride/index.d.ts

@@ -1,87 +0,0 @@
-// Type definitions for react-joyride 2.0.0-11
-// Project: https://github.com/gilbarbara/react-joyride
-
-declare module 'react-joyride' {
-    import * as React from 'react';
-    export interface StyleOptions {
-        arrowColor?: string;
-        backgroundColor?: string;
-        primaryColor?: string;
-        textColor?: string;
-        overlayColor?: string;
-        spotlightShadow?: string;
-        beaconSize?: number;
-        zIndex?: number;
-    }
-
-    export type Placement =
-        | 'top'
-        | 'top-left'
-        | 'top-right'
-        | 'bottom'
-        | 'bottom-left'
-        | 'bottom-right'
-        | 'right'
-        | 'left';
-
-    export interface Step {
-        title?: string;
-        content: React.ReactNode;
-        target: string;
-        placement?: Placement;
-        type?: 'click' | 'hover';
-        isFixed?: boolean;
-        allowClicksThruHole?: boolean;
-        disableBeacon?: boolean;
-        style?: StyleOptions;
-        [prop: string]: any;
-    }
-
-    export interface StyleOptionsProp {
-        options: StyleOptions;
-    }
-
-    interface CallbackMetadata {
-        type:
-            | 'tour:start'
-            | 'step:before'
-            | 'beacon'
-            | 'tooltip'
-            | 'close'
-            | 'step:after'
-            | 'tour:end'
-            | 'tour:status'
-            | 'error:target_not_found'
-            | 'error';
-        step: number;
-    }
-
-    export type CallbackData = CallbackMetadata & State;
-
-    export interface Props {
-        steps?: Step[];
-        beaconComponent?: React.ReactNode;
-        disableOverlayClose?: boolean;
-        continuous?: boolean;
-        run?: boolean;
-        stepIndex?: number;
-        debug?: boolean;
-        styles?: StyleOptionsProp;
-        tooltipComponent: React.ComponentClass<any> | React.StatelessComponent;
-    }
-
-    export interface State {
-        action: 'prev' | 'close' | 'next';
-        controlled: boolean;
-        index: number;
-        lifecycle: string;
-        size: 0;
-        status: string;
-    }
-
-    export default class Joyride extends React.Component<Props, State> {
-        constructor(props: Props);
-
-        static defaultProps: Props;
-    }
-}

packages/typescript-typings/types/react-popper/index.d.ts

@@ -1,4 +1,49 @@
 // Type definitions for react-popper 1.0.0-beta.6
 // Project: https://github.com/gilbarbara/react-joyride
 
-declare module 'react-popper';
+declare module 'react-popper' {
+    import * as React from 'react';
+    import * as PopperJS from 'popper.js';
+
+    interface ManagerProps {
+        children: React.ReactNode;
+    }
+    export class Manager extends React.Component<ManagerProps, {}> {}
+
+    type RefHandler = (ref: HTMLElement | null) => void;
+
+    export interface ReferenceChildrenProps {
+        ref: RefHandler;
+    }
+
+    export interface ReferenceProps {
+        children: (props: ReferenceChildrenProps) => React.ReactNode;
+    }
+    export class Reference extends React.Component<ReferenceProps, {}> {}
+
+    export interface PopperArrowProps {
+        ref: RefHandler;
+        style: React.CSSProperties;
+    }
+
+    export type Placement = PopperJS.Placement;
+
+    export interface PopperChildrenProps {
+        arrowProps: PopperArrowProps;
+        outOfBoundaries: boolean | null;
+        placement: PopperJS.Placement;
+        ref: RefHandler;
+        scheduleUpdate: () => void;
+        style: React.CSSProperties;
+    }
+
+    export interface PopperProps {
+        children: (props: PopperChildrenProps) => React.ReactNode;
+        eventsEnabled?: boolean;
+        modifiers?: PopperJS.Modifiers;
+        placement?: PopperJS.Placement;
+        positionFixed?: boolean;
+        referenceElement?: Element;
+    }
+    export class Popper extends React.Component<PopperProps, {}> {}
+}

packages/website/ts/components/onboarding/onboarding_flow.tsx

@@ -1,11 +1,17 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride';
+import { Placement, Popper, PopperChildrenProps } from 'react-popper';
-import { Popper, PopperChildrenProps } from 'react-popper';
 
 import { OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
 import { zIndex } from 'ts/utils/style';
 
+export interface Step {
+    target: string;
+    title?: string;
+    content: React.ReactNode;
+    placement?: Placement;
+}
+
 export interface OnboardingFlowProps {
     steps: Step[];
     blacklistedStepIndices: number[];
@@ -15,11 +21,6 @@ export interface OnboardingFlowProps {
     setOnboardingStep: (stepIndex: number) => void;
 }
 
-const joyrideStyleOptions: StyleOptions = {
-    zIndex: zIndex.overlay,
-};
-
-// Wrapper around Joyride with defaults and styles set
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
     public componentDidMount(): void {
         this._setOnboardingStepBasedOnBlacklist(this.props.stepIndex);
@@ -34,7 +35,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             return null;
         }
         return (
-            <Popper referenceElement={this._getElementForStep()} placement="right">
+            <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
                 {this._renderPopperChildren.bind(this)}
             </Popper>
         );
@@ -86,11 +87,10 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
     }
 
     private _getElementForStep(): Element {
-        const step = this.props.steps[this.props.stepIndex];
+        return document.querySelector(this._getCurrentStep().target);
-        return document.querySelector(step.target);
     }
 
-    private _renderPopperChildren(props: any): React.ReactNode {
+    private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
         const { arrowProps } = props;
         return (
             <div ref={props.ref} style={props.style} data-placement={props.placement}>
@@ -116,6 +116,10 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         );
     }
 
+    private _getCurrentStep(): Step {
+        return this.props.steps[this.props.stepIndex];
+    }
+
     private _goToNextStep(): void {
         const nextStep = this.props.stepIndex + 1;
         if (nextStep < this.props.steps.length) {

packages/website/ts/components/onboarding/portal_onboarding_flow.tsx

@@ -1,9 +1,8 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Step } from 'react-joyride';
 
 import { black } from 'material-ui/styles/colors';
-import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
+import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
 import { ProviderType } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
@@ -25,26 +24,22 @@ const steps: Step[] = [
         content:
             'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
         placement: 'right',
-        disableBeacon: true,
     },
     {
         target: '.wallet',
         content: 'Unlock your metamask extension to begin',
         placement: 'right',
-        disableBeacon: true,
     },
     {
         target: '.wallet',
         content:
             'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
         placement: 'right',
-        disableBeacon: true,
     },
     {
         target: '.wallet',
         content: 'Before you begin you will need to send some ETH to your metamask wallet',
         placement: 'right',
-        disableBeacon: true,
     },
 ];