react-color - Implemented the types for v2.17.3 (latest in npm) (#35844)

* implemented typings for react-color v2.17.3

* fixed pointer types

* removed unused imports

* fixed errors

* moved changes to v2

* removed updated files in the root

types/react-color/index.d.ts

@@ -5,7 +5,8 @@
 //                  Matthieu Montaudouin <https://github.com/mntdn>,
 //                  Nokogiri <https://github.com/nkgrnkgr>,
 //                  0815Strohhut <https://github.com/0815Strohhut>,
-//                  Daniel Fürst <https://github.com/dnlfrst>
+//                  Daniel Fürst <https://github.com/dnlfrst>,
+//                  Erick Tamayo <https://github.com/ericktamayo>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -56,7 +57,10 @@ export { default as CompactPicker, CompactPickerProps } from "./lib/components/c
 export { default as GithubPicker, GithubPickerProps } from "./lib/components/github/Github";
 export { default as HuePicker, HuePickerProps } from "./lib/components/hue/Hue";
 export { default as MaterialPicker, MaterialPickerProps } from "./lib/components/material/Material";
-export { default as PhotoshopPicker, PhotoshopPickerProps } from "./lib/components/photoshop/Photoshop";
+export {
+    default as PhotoshopPicker,
+    PhotoshopPickerProps
+} from "./lib/components/photoshop/Photoshop";
 export { default as SketchPicker, SketchPickerProps } from "./lib/components/sketch/Sketch";
 export { default as SliderPicker, SliderPickerProps } from "./lib/components/slider/Slider";
 export { default as SwatchesPicker, SwatchesPickerProps } from "./lib/components/swatches/Swatches";

types/react-color/v2/index.d.ts

@@ -0,0 +1,83 @@
+// Type definitions for react-color 2.17
+// Project: https://github.com/casesandberg/react-color/, http://casesandberg.github.io/react-color
+// Definitions by:  Karol Janyst <https://github.com/LKay>,
+//                  Marks Polakovs <https://github.com/markspolakovs>,
+//                  Matthieu Montaudouin <https://github.com/mntdn>,
+//                  Nokogiri <https://github.com/nkgrnkgr>,
+//                  0815Strohhut <https://github.com/0815Strohhut>,
+//                  Daniel Fürst <https://github.com/dnlfrst>,
+//                  Erick Tamayo <https://github.com/ericktamayo>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import { ComponentClass, ClassAttributes, StatelessComponent, ReactNode } from "react";
+
+export interface HEXColor {
+    hex: string;
+    source?: string;
+}
+
+export interface HSLColor {
+    a?: number;
+    h: number;
+    l: number;
+    s: number;
+    source?: string;
+}
+
+export interface RGBColor {
+    a?: number;
+    b: number;
+    g: number;
+    r: number;
+    source?: string;
+}
+
+export interface HSVColor {
+    a?: number;
+    h: number;
+    s: number;
+    v: number;
+    source?: string;
+}
+
+export type Color = HEXColor | HSLColor | RGBColor | HSVColor;
+
+export interface ColorState {
+    hex: string;
+    hsl: HSLColor;
+    hsv: HSVColor;
+    rgb: RGBColor;
+    oldHue: number;
+    source: string;
+}
+
+export interface RenderersProps {
+    renderers?: {
+        canvas: any;
+    };
+}
+export type ColorChangeHandler = (color: Color) => void;
+
+export { default as AlphaPicker, AlphaPickerProps } from "./lib/components/alpha/Alpha";
+export { default as BlockPicker, BlockPickerProps } from "./lib/components/block/Block";
+export { default as Checkboard, CheckboardProps } from "./lib/components/common/Checkboard";
+export { default as ChromePicker, ChromePickerProps } from "./lib/components/chrome/Chrome";
+export { default as CirclePicker, CirclePickerProps } from "./lib/components/circle/Circle";
+export { default as CompactPicker, CompactPickerProps } from "./lib/components/compact/Compact";
+export { default as GithubPicker, GithubPickerProps } from "./lib/components/github/Github";
+export { default as HuePicker, HuePickerProps } from "./lib/components/hue/Hue";
+export { default as MaterialPicker, MaterialPickerProps } from "./lib/components/material/Material";
+export {
+    default as PhotoshopPicker,
+    PhotoshopPickerProps
+} from "./lib/components/photoshop/Photoshop";
+export { default as SketchPicker, SketchPickerProps } from "./lib/components/sketch/Sketch";
+export { default as SliderPicker, SliderPickerProps } from "./lib/components/slider/Slider";
+export { default as SwatchesPicker, SwatchesPickerProps } from "./lib/components/swatches/Swatches";
+export { default as TwitterPicker, TwitterPickerProps } from "./lib/components/twitter/Twitter";
+export {
+    default as CustomPicker,
+    CustomPickerInjectedProps,
+    CustomPickerProps
+} from "./lib/components/common/ColorWrap";

types/react-color/v2/lib/components/alpha/Alpha.d.ts

@@ -0,0 +1,13 @@
+import { Component, ComponentType } from "react";
+import { RenderersProps, CustomPickerProps } from "../../..";
+
+export interface AlphaPickerProps extends RenderersProps, CustomPickerProps {
+    width?: string;
+    height?: string;
+    direction?: "horizontal" | "vertical";
+    style?: any;
+    pointer?: ComponentType;
+    className?: string;
+}
+
+export default class AlphaPicker extends Component<AlphaPickerProps> {}

types/react-color/v2/lib/components/block/Block.d.ts

@@ -0,0 +1,26 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerProps, ColorState } from "../../..";
+
+export interface BlockPickerDefaultStyles {
+    card?: CSSProperties;
+    head?: CSSProperties;
+    body?: CSSProperties;
+    label?: CSSProperties;
+    triangle?: CSSProperties;
+    input?: CSSProperties;
+}
+
+export interface BlockPickerStyles {
+    default?: BlockPickerDefaultStyles;
+}
+
+export interface BlockPickerProps extends CustomPickerProps {
+    onSwatchHover?: (color: ColorState, event: MouseEvent) => void;
+    colors?: string[];
+    width?: string;
+    triangle?: "hide" | "top";
+    styles?: BlockPickerStyles;
+    className?: string;
+}
+
+export default class BlockPicker extends Component<BlockPickerProps> {}

types/react-color/v2/lib/components/chrome/Chrome.d.ts

@@ -0,0 +1,39 @@
+import { Component, CSSProperties } from "react";
+import { RenderersProps, CustomPickerProps } from "../../..";
+
+export interface ChromePickerDefaultStyles {
+    picker?: CSSProperties;
+    saturation?: CSSProperties;
+    Saturation?: CSSProperties;
+    body?: CSSProperties;
+    controls?: CSSProperties;
+    color?: CSSProperties;
+    swatch?: CSSProperties;
+    active?: CSSProperties;
+    toggles?: CSSProperties;
+    hue?: CSSProperties;
+    Hue?: CSSProperties;
+    alpha?: CSSProperties;
+    Alpha?: CSSProperties;
+}
+
+export interface ChromePickerDisableAlphaStyles {
+    color?: CSSProperties;
+    alpha?: CSSProperties;
+    hue?: CSSProperties;
+    swatch?: CSSProperties;
+}
+
+export interface ChromePickerStyles {
+    default?: ChromePickerDefaultStyles;
+    disableAlpha?: ChromePickerDisableAlphaStyles;
+}
+
+export interface ChromePickerProps extends RenderersProps, CustomPickerProps {
+    width?: string;
+    disableAlpha?: boolean;
+    styles?: ChromePickerStyles;
+    className?: string;
+}
+
+export default class ChromePicker extends Component<ChromePickerProps> {}

types/react-color/v2/lib/components/circle/Circle.d.ts

@@ -0,0 +1,22 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerProps, ColorState } from "../../..";
+
+export interface CirclePickerDefaultStyles {
+    card?: CSSProperties;
+}
+
+export interface CirclePickerStyles {
+    default?: CirclePickerDefaultStyles;
+}
+
+export interface CirclePickerProps extends CustomPickerProps {
+    colors?: string[];
+    width?: string;
+    circleSize?: number;
+    circleSpacing?: number;
+    onSwatchHover?: (color: ColorState, event: MouseEvent) => void;
+    styles?: CirclePickerStyles;
+    className?: string;
+}
+
+export default class CirclePicker extends Component<CirclePickerProps> {}

types/react-color/v2/lib/components/common/Alpha.d.ts

@@ -0,0 +1,21 @@
+import { Component, ComponentType, CSSProperties } from "react";
+import { CustomPickerInjectedProps, RenderersProps } from "../../..";
+
+export interface AlphaStyle {
+    alpha?: CSSProperties;
+    checkboard?: CSSProperties;
+    gradient?: CSSProperties;
+    container?: CSSProperties;
+    pointer?: CSSProperties;
+    slider?: CSSProperties;
+}
+
+export interface AlphaProps extends RenderersProps, CustomPickerInjectedProps {
+    pointer?: ComponentType;
+    radius?: string;
+    shadow?: string;
+    direction?: "vertical" | "horizontal";
+    style?: AlphaStyle;
+}
+
+export default class Alpha extends Component<AlphaProps> {}

types/react-color/v2/lib/components/common/Checkboard.d.ts

@@ -0,0 +1,11 @@
+import { Component } from "react";
+import { RenderersProps } from "../../..";
+export interface CheckboardProps extends RenderersProps {
+    white?: string;
+    grey?: string;
+    size?: number;
+    borderRadius?: string;
+    boxShadow?: string;
+}
+
+export default class Checkboard extends Component<CheckboardProps> {}

types/react-color/v2/lib/components/common/ColorWrap.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType } from "react";
+import { Color, ColorState, ColorChangeHandler } from "../../..";
+
+type SetDifference<A, B> = A extends B ? never : A;
+
+type Diff<T, U> = Pick<T, SetDifference<keyof T, keyof U>>;
+
+export type OnChangeHandler = (colorState: ColorState) => void;
+
+export interface CustomPickerInjectedProps extends Partial<ColorState> {
+    onChange: ColorChangeHandler;
+}
+
+export interface CustomPickerProps {
+    color?: Color;
+    onChange?: OnChangeHandler;
+    onChangeComplete?: OnChangeHandler;
+}
+
+export default function CustomPicker<A>(
+    component: ComponentType<A & CustomPickerInjectedProps>
+): ComponentType<Diff<A, CustomPickerProps> & CustomPickerProps>;
+
+export {};

types/react-color/v2/lib/components/common/EditableInput.d.ts

@@ -0,0 +1,20 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerInjectedProps } from "../../..";
+
+export interface EditableInputStyles {
+    input?: CSSProperties;
+    label?: CSSProperties;
+    wrap?: CSSProperties;
+}
+
+export interface EditableInputProps extends CustomPickerInjectedProps {
+    label?: string;
+    arrowOffset?: number;
+    placeholder?: string;
+    value?: string | number;
+    style?: EditableInputStyles;
+    dragLabel?: boolean;
+    dragMax?: number;
+}
+
+export default class EditableInput extends Component<EditableInputProps> {}

types/react-color/v2/lib/components/common/Hue.d.ts

@@ -0,0 +1,11 @@
+import { Component, ComponentType } from "react";
+import { CustomPickerInjectedProps } from "../../..";
+
+export interface HueProps extends CustomPickerInjectedProps {
+    direction?: "horizontal" | "vertical";
+    pointer?: ComponentType;
+    radius?: string;
+    shadow?: string;
+}
+
+export default class Hue extends Component<HueProps> {}

types/react-color/v2/lib/components/common/Saturation.d.ts

@@ -0,0 +1,19 @@
+import { Component, CSSProperties, ComponentType } from "react";
+import { CustomPickerInjectedProps } from "../../..";
+
+export interface SaturationStyle {
+    color?: CSSProperties;
+    white?: CSSProperties;
+    black?: CSSProperties;
+    pointer?: CSSProperties;
+    circle?: CSSProperties;
+}
+
+export interface SaturationProps extends CustomPickerInjectedProps {
+    radius?: string;
+    shadow?: string;
+    style?: SaturationStyle;
+    pointer?: ComponentType;
+}
+
+export default class Saturation extends Component<SaturationProps> {}

types/react-color/v2/lib/components/common/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Alpha } from "./Alpha";
+export { default as Checkboard } from "./Checkboard";
+export { default as EditableInput } from "./EditableInput";
+export { default as Hue } from "./Hue";
+export { default as Saturation } from "./Saturation";

types/react-color/v2/lib/components/compact/Compact.d.ts

@@ -0,0 +1,20 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerProps, ColorState } from "../../..";
+
+export interface CompactPickerDefaultStyles {
+    Compact?: CSSProperties;
+    compact?: CSSProperties;
+    clear?: CSSProperties;
+}
+export interface CompactPickerStyles {
+    default?: CompactPickerDefaultStyles;
+}
+
+export interface CompactPickerProps extends CustomPickerProps {
+    colors?: string[];
+    onSwatchHover?(color: ColorState, event: MouseEvent): void;
+    styles?: CompactPickerStyles;
+    className?: string;
+}
+
+export default class CompactPicker extends Component<CompactPickerProps> {}

types/react-color/v2/lib/components/github/Github.d.ts

@@ -0,0 +1,36 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerProps, ColorState } from "../../..";
+
+export interface GithubPickerDefaultStyles {
+    card?: CSSProperties;
+    triangle?: CSSProperties;
+    triangleShadow?: CSSProperties;
+}
+
+export interface GithubPickerTriangleStyles {
+    triangle?: CSSProperties;
+    triangleShadow?: CSSProperties;
+}
+
+export interface GithubPickerHideTriangleStyles {
+    triangle?: CSSProperties;
+    "top-left-triangle"?: GithubPickerTriangleStyles;
+    "top-right-triangle"?: GithubPickerTriangleStyles;
+    "bottom-left-triangle"?: GithubPickerTriangleStyles;
+    "bottom-right-triangle"?: GithubPickerTriangleStyles;
+}
+
+export interface GithubPickerStyles {
+    default?: GithubPickerDefaultStyles;
+}
+
+export interface GithubPickerProps extends CustomPickerProps {
+    colors?: string[];
+    width?: string;
+    triangle?: "hide" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    onSwatchHover?(color: ColorState, event: MouseEvent): void;
+    className?: string;
+    styles?: GithubPickerStyles;
+}
+
+export default class GithubPicker extends Component<GithubPickerProps> {}

types/react-color/v2/lib/components/hue/Hue.d.ts

@@ -0,0 +1,22 @@
+import { Component, ComponentType, CSSProperties } from "react";
+import { CustomPickerProps } from "../../..";
+
+export interface HuePickerDefaultStyle {
+    picker?: CSSProperties;
+    hue?: CSSProperties;
+}
+
+export interface HuePickerStyle {
+    default?: HuePickerDefaultStyle;
+}
+
+export interface HuePickerProps extends CustomPickerProps {
+    height?: string;
+    width?: string;
+    direction?: "vertical" | "horizontal";
+    pointer?: ComponentType;
+    styles?: HuePickerStyle;
+    className?: string;
+}
+
+export default class HuePicker extends Component<HuePickerProps> {}

types/react-color/v2/lib/components/material/Material.d.ts

@@ -0,0 +1,26 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerProps } from "../../..";
+
+export interface MaterialPickerDefaultStyles {
+    material?: CSSProperties;
+    HEXwrap?: CSSProperties;
+    HEXinput?: CSSProperties;
+    HEXlabel?: CSSProperties;
+    Hex?: CSSProperties;
+    RGBwrap?: CSSProperties;
+    RGBinput?: CSSProperties;
+    RGBlabel?: CSSProperties;
+    split?: CSSProperties;
+    third?: CSSProperties;
+}
+
+export interface MaterialPickerStyles {
+    default?: MaterialPickerDefaultStyles;
+}
+
+export interface MaterialPickerProps extends CustomPickerProps {
+    styles?: MaterialPickerStyles;
+    className?: string;
+}
+
+export default class MaterialPicker extends Component<MaterialPickerProps> {}

types/react-color/v2/lib/components/photoshop/Photoshop.d.ts

@@ -0,0 +1,28 @@
+import { Component, MouseEvent, CSSProperties } from "react";
+import { CustomPickerProps } from "../../..";
+
+export interface PhotoshopPickerDefaultStyles {
+    picker?: CSSProperties;
+    head?: CSSProperties;
+    body?: CSSProperties;
+    saturation?: CSSProperties;
+    hue?: CSSProperties;
+    controls?: CSSProperties;
+    top?: CSSProperties;
+    preview?: CSSProperties;
+    actions?: CSSProperties;
+}
+
+export interface PhotoshopPickerStyles {
+    default?: PhotoshopPickerDefaultStyles;
+}
+
+export interface PhotoshopPickerProps extends CustomPickerProps {
+    header?: string;
+    onAccept?: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onCancel?: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    styles?: PhotoshopPickerStyles;
+    className?: string;
+}
+
+export default class PhotoshopPicker extends Component<PhotoshopPickerProps> {}

types/react-color/v2/lib/components/sketch/Sketch.d.ts

@@ -0,0 +1,31 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerProps, ColorState, RenderersProps } from "../../..";
+
+export interface SketchPickerDefaultStyles {
+    picker?: CSSProperties;
+    saturation?: CSSProperties;
+    Saturation?: CSSProperties;
+    controls?: CSSProperties;
+    sliders?: CSSProperties;
+    color?: CSSProperties;
+    activeColor?: CSSProperties;
+    hue?: CSSProperties;
+    Hue?: CSSProperties;
+    alpha?: CSSProperties;
+    Alpha?: CSSProperties;
+}
+
+export interface SketchPickerStyles {
+    default?: SketchPickerDefaultStyles;
+}
+
+export interface SketchPickerProps extends RenderersProps, CustomPickerProps {
+    disableAlpha?: boolean;
+    presetColors?: string[];
+    width?: string;
+    onSwatchHover?(color: ColorState, event: MouseEvent): void;
+    styles?: SketchPickerStyles;
+    className?: string;
+}
+
+export default class SketchPicker extends Component<SketchPickerProps> {}

types/react-color/v2/lib/components/slider/Slider.d.ts

@@ -0,0 +1,19 @@
+import { Component, ComponentType, CSSProperties } from "react";
+import { CustomPickerProps } from "../../..";
+
+export interface SliderPickerDefaultStyles {
+    hue?: CSSProperties;
+    Hue?: CSSProperties;
+}
+
+export interface SliderPickerStyles {
+    default?: SliderPickerDefaultStyles;
+}
+
+export interface SliderPickerProps extends CustomPickerProps {
+    pointer?: ComponentType;
+    styles?: SliderPickerStyles;
+    className?: string;
+}
+
+export default class SliderPicker extends Component<SliderPickerProps> {}

types/react-color/v2/lib/components/swatches/Swatches.d.ts

@@ -0,0 +1,24 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerProps, ColorState } from "../../..";
+
+export interface SwatchesPickerDefaultStyles {
+    picker?: CSSProperties;
+    overflow?: CSSProperties;
+    body?: CSSProperties;
+    clear?: CSSProperties;
+}
+
+export interface SwatchesPickerStyles {
+    default?: SwatchesPickerDefaultStyles;
+}
+
+export interface SwatchesPickerProps extends CustomPickerProps {
+    colors?: string[][];
+    height?: string;
+    width?: string;
+    onSwatchHover?(color: ColorState, event: MouseEvent): void;
+    styles?: SwatchesPickerStyles;
+    className?: string;
+}
+
+export default class SwatchesPicker extends Component<SwatchesPickerProps> {}

types/react-color/v2/lib/components/twitter/Twitter.d.ts

@@ -0,0 +1,36 @@
+import { Component, CSSProperties } from "react";
+import { CustomPickerProps, ColorState } from "../../..";
+
+export interface TwitterPickerDefaultStyle {
+    card?: CSSProperties;
+    body?: CSSProperties;
+    label?: CSSProperties;
+    triangle?: CSSProperties;
+    triangleShadow?: CSSProperties;
+    hash?: CSSProperties;
+    input?: CSSProperties;
+    swatch?: CSSProperties;
+    clear?: CSSProperties;
+}
+
+export interface TwitterPickerTriangleStyle {
+    triangle?: CSSProperties;
+    triangleShadow?: CSSProperties;
+}
+
+export interface TwitterPickerStyle {
+    default?: TwitterPickerDefaultStyle;
+    "top-left-triangle"?: TwitterPickerTriangleStyle;
+    "top-right-triangle"?: TwitterPickerTriangleStyle;
+}
+
+export interface TwitterPickerProps extends CustomPickerProps {
+    colors?: string[];
+    width?: string;
+    triangle?: "hide" | "top-left" | "top-right";
+    onSwatchHover?(color: ColorState, event: MouseEvent): void;
+    styles?: TwitterPickerStyle;
+    className?: string;
+}
+
+export default class TwitterPicker extends Component<TwitterPickerProps> {}

types/react-color/v2/react-color-tests.tsx

@@ -0,0 +1,279 @@
+import * as React from "react";
+import { render } from "react-dom";
+import {
+    AlphaPicker,
+    BlockPicker,
+    ChromePicker,
+    CirclePicker,
+    CompactPicker,
+    GithubPicker,
+    HuePicker,
+    MaterialPicker,
+    PhotoshopPicker,
+    SketchPicker,
+    SliderPicker,
+    SwatchesPicker,
+    TwitterPicker,
+    CustomPicker,
+    CustomPickerInjectedProps
+} from "react-color";
+import {
+    Alpha,
+    Checkboard,
+    EditableInput,
+    Hue,
+    Saturation
+} from "react-color/lib/components/common";
+
+interface CustomProps extends CustomPickerInjectedProps {
+    customProp: string;
+}
+
+const CustomComponent: React.ComponentType<CustomProps> = (props: CustomProps) => {
+    const { customProp } = props;
+    return (
+        <div>
+            {customProp}
+            <Alpha
+                style={{ checkboard: { display: "block" } }}
+                radius="25px"
+                shadow="5px 10px"
+                direction="horizontal"
+                pointer={() => <div />}
+                {...props}
+            />
+            <Checkboard
+                size={10}
+                white="transparent"
+                grey="#333"
+                renderers={{ canvas: {} }}
+                borderRadius="25px"
+                boxShadow="5px 10px"
+            />
+            <EditableInput
+                label="test"
+                arrowOffset={2}
+                placeholder="placeholder"
+                value="#000000"
+                style={{ wrap: { display: "block" } }}
+                dragLabel
+                dragMax={10}
+                {...props}
+            />
+            <Hue
+                direction="horizontal"
+                pointer={() => <div />}
+                radius="25px"
+                shadow="5px 10px"
+                {...props}
+            />
+            <Saturation
+                radius="25px"
+                shadow="5px 10px"
+                pointer={() => <div />}
+                style={{ circle: { display: "block" } }}
+                {...props}
+            />
+        </div>
+    );
+};
+const Custom = CustomPicker(CustomComponent);
+
+const color = { hex: "#000000" };
+const colors = ["#000", "#333"];
+
+render(
+    <AlphaPicker
+        className="class-name"
+        style={{ display: "block" }}
+        height="100px"
+        width="100px"
+        direction="vertical"
+        pointer={() => <div />}
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        renderers={{ canvas: {} }}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <BlockPicker
+        className="class-name"
+        styles={{ default: { card: { display: "block" } } }}
+        colors={colors}
+        color={color}
+        width="100px"
+        triangle="top"
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        onSwatchHover={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <ChromePicker
+        className="class-name"
+        styles={{ default: { picker: { display: "block" } } }}
+        width="100px"
+        disableAlpha
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        renderers={{ canvas: {} }}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <CirclePicker
+        className="class-name"
+        styles={{ default: { card: { display: "block" } } }}
+        colors={colors}
+        width="100px"
+        circleSize={10}
+        circleSpacing={10}
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        onSwatchHover={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <CompactPicker
+        className="class-name"
+        styles={{ default: { compact: { display: "block" } } }}
+        colors={colors}
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        onSwatchHover={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <GithubPicker
+        className="class-name"
+        styles={{ default: { card: { display: "block" } } }}
+        colors={colors}
+        width="100px"
+        triangle="top-left"
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        onSwatchHover={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <HuePicker
+        className="class-name"
+        styles={{ default: { picker: { display: "block" } } }}
+        width="100px"
+        height="100px"
+        direction="vertical"
+        pointer={() => <div />}
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <MaterialPicker
+        className="class-name"
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <PhotoshopPicker
+        className="class-name"
+        styles={{ default: { picker: { display: "block" } } }}
+        header="Test"
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        onAccept={() => {}}
+        onCancel={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <SketchPicker
+        className="class-name"
+        styles={{ default: { picker: { display: "block" } } }}
+        width="100px"
+        disableAlpha
+        presetColors={colors}
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        renderers={{ canvas: {} }}
+        onSwatchHover={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <SliderPicker
+        className="class-name"
+        styles={{ default: { hue: { display: "block" } } }}
+        pointer={() => <div />}
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <SwatchesPicker
+        className=""
+        styles={{ default: { picker: { display: "block" } } }}
+        colors={[colors]}
+        height="100px"
+        width="100px"
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        onSwatchHover={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <TwitterPicker
+        className="class-name"
+        styles={{ default: { card: { display: "block" } } }}
+        colors={colors}
+        width="100px"
+        triangle="top-left"
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+        onSwatchHover={() => {}}
+    />,
+    document.getElementById("main")
+);
+
+render(
+    <Custom
+        customProp="custom-prop"
+        color={color}
+        onChange={() => {}}
+        onChangeComplete={() => {}}
+    />,
+    document.getElementById("main")
+);

types/react-color/v2/tsconfig.json

@@ -0,0 +1,46 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6", "dom"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": ["../../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react",
+        "noUnusedParameters": true,
+        "noUnusedLocals": true,
+        "paths": {
+            "react-color": ["react-color/v2"],
+            "react-color/*": ["react-color/v2/*"]
+        }
+    },
+    "files": [
+        "index.d.ts",
+        "lib/components/alpha/Alpha.d.ts",
+        "lib/components/block/Block.d.ts",
+        "lib/components/chrome/Chrome.d.ts",
+        "lib/components/circle/Circle.d.ts",
+        "lib/components/common/Alpha.d.ts",
+        "lib/components/common/Checkboard.d.ts",
+        "lib/components/common/ColorWrap.d.ts",
+        "lib/components/common/EditableInput.d.ts",
+        "lib/components/common/Hue.d.ts",
+        "lib/components/common/index.d.ts",
+        "lib/components/common/Saturation.d.ts",
+        "lib/components/compact/Compact.d.ts",
+        "lib/components/github/Github.d.ts",
+        "lib/components/hue/Hue.d.ts",
+        "lib/components/material/Material.d.ts",
+        "lib/components/photoshop/Photoshop.d.ts",
+        "lib/components/sketch/Sketch.d.ts",
+        "lib/components/slider/Slider.d.ts",
+        "lib/components/swatches/Swatches.d.ts",
+        "lib/components/twitter/Twitter.d.ts",
+        "react-color-tests.tsx"
+    ]
+}

types/react-color/v2/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}