feat: Add TransformCard component

docs/src/components/DocsTreeView/docTreeData.tsx

@@ -111,6 +111,8 @@ export default [{
     "titleNode": "Toggle"
   }, {
     "titleNode": "Tooltip"
+  }, {
+    "titleNode": "TransformCard"
   }, {
     "titleNode": "TreeView"
   }, {

docs/src/routes/Components/DatePickers/CalendarView/__Mock__/README.md

@@ -0,0 +1,5 @@
+## Mock
+
+///
+
+### Examples

docs/src/routes/Components/DatePickers/CalendarView/__Mock__/SimpleExample.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+
+import AutoSuggestBox from "react-uwp/AutoSuggestBox";
+
+export default class SimpleExample extends React.Component {
+  static contextTypes = { theme: PropTypes.object };
+  context: { theme: ReactUWP.ThemeType };
+
+  render() {
+    return (
+      <div>
+        <AutoSuggestBox />
+      </div>
+    );
+  }
+}

docs/src/routes/Components/DatePickers/CalendarView/__Mock__/index.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+
+import ComponentDetail from "components/ComponentDetail";
+import * as docEntry from "react-uwp/Mock/index.doc.json";
+import * as readmeText from "!raw!./README.md";
+
+import CodeExample from "components/CodeExample";
+
+import SimpleExample from "./SimpleExample";
+import * as SimpleExampleCode from "!raw!./SimpleExample";
+import * as SimpleExampleDesc from "!raw!./SimpleExample.md";
+
+export default class Mock extends React.Component<any> {
+  static contextTypes = { theme: PropTypes.object };
+
+  render() {
+    const {
+      location,
+      params,
+      route,
+      router,
+      routeParams,
+      routes,
+      ...attributes
+    } = this.props;
+
+    return (
+      <ComponentDetail
+        readmeText={readmeText as any}
+        docEntry={docEntry}
+      >
+        <CodeExample
+          title="Simple Examples"
+          code={SimpleExampleCode as any}
+          description={SimpleExampleDesc as any}
+          doubleThemeStyle={{ padding: 20 }}
+        >
+          <SimpleExample />
+        </CodeExample>
+      </ComponentDetail>
+    );
+  }
+}

docs/src/routes/Components/TransformCard/README.md

@@ -0,0 +1,5 @@
+## TransformCard
+
+The CSS3 3D Transform Card that follows the cursor.
+
+### Examples

docs/src/routes/Components/TransformCard/SimpleExample.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+
+import TransformCard from "react-uwp/TransformCard";
+import CalendarDatePicker from "react-uwp/CalendarDatePicker";
+import Button from "react-uwp/Button";
+
+import Slider from "../Slider/SimpleExample";
+import SplitViewCommand from "../SplitViewCommand/SimpleExample";
+import TextBox from "../TextBox/SimpleExample";
+import Toggle from "../Toggle/SimpleExample";
+import Tooltip from "../Tooltip/SimpleExample";
+
+export default class SimpleExample extends React.Component {
+  static contextTypes = { theme: PropTypes.object };
+  context: { theme: ReactUWP.ThemeType };
+
+  render() {
+    const { theme } = this.context;
+    return (
+      <div>
+        <TransformCard defaultRotateY={-7} perspective={1000}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              width: "auto",
+              minHeight: 520,
+              padding: "40px 20px",
+              background: theme.listLow
+            }}
+          >
+            <Slider />
+            <CalendarDatePicker />
+            <SplitViewCommand />
+            <TextBox />
+            <Toggle />
+            <Tooltip />
+          </div>
+        </TransformCard>
+
+        <div>
+          <TransformCard xMaxRotate={30} yMaxRotate={30} perspective={240}>
+            <img
+              style={{
+                width: 240,
+                marginTop: 40,
+                height: "auto"
+              }}
+              src={require("../../../assets/images/reveal.png")}
+            />
+          </TransformCard>
+        </div>
+      </div>
+    );
+  }
+}

docs/src/routes/Components/TransformCard/index.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+
+import ComponentDetail from "components/ComponentDetail";
+import * as docEntry from "react-uwp/TransformCard/index.doc.json";
+import * as readmeText from "!raw!./README.md";
+
+import CodeExample from "components/CodeExample";
+
+import SimpleExample from "./SimpleExample";
+import * as SimpleExampleCode from "!raw!./SimpleExample";
+import * as SimpleExampleDesc from "!raw!./SimpleExample.md";
+
+export default class TransformCard extends React.Component<any> {
+  static contextTypes = { theme: PropTypes.object };
+
+  render() {
+    const {
+      location,
+      params,
+      route,
+      router,
+      routeParams,
+      routes,
+      ...attributes
+    } = this.props;
+
+    return (
+      <ComponentDetail
+        readmeText={readmeText as any}
+        docEntry={docEntry}
+      >
+        <CodeExample
+          title="Simple Examples"
+          code={SimpleExampleCode as any}
+          description={SimpleExampleDesc as any}
+          doubleThemeStyle={{ padding: 20 }}
+          useSingleTheme
+        >
+          <SimpleExample />
+        </CodeExample>
+      </ComponentDetail>
+    );
+  }
+}

docs/src/routes/index.tsx

@@ -461,6 +461,13 @@ function getRoutes(path = "/") {
             cb(null, require<any>("./Components/Tooltip").default);
           }, "react-uwp-Components-Tooltip");
         }
+      }, {
+        path: "TransformCard",
+        getComponent: (location: Location, cb: RouterCallback) => {
+          require.ensure([], (require) => {
+            cb(null, require<any>("./Components/TransformCard").default);
+          }, "react-uwp-Components-TransformCard");
+        }
       }, {
         path: "TextBox",
         getComponent: (location: Location, cb: RouterCallback) => {

src/TransformCard/index.doc.json

@@ -0,0 +1,144 @@
+{
+  "exports": [
+    {
+      "name": "DataProps"
+    },
+    {
+      "name": "TransformCardProps"
+    },
+    {
+      "name": "TransformCardState"
+    },
+    {
+      "name": "TransformCard"
+    },
+    {
+      "name": "default",
+      "extends": [
+        "TransformCard"
+      ]
+    }
+  ],
+  "members": [
+    {
+      "name": "DataProps",
+      "members": [
+        {
+          "name": "perspective",
+          "documentation": "Set Car perspective.",
+          "isRequired": false,
+          "type": "string | number"
+        },
+        {
+          "name": "xMaxRotate",
+          "documentation": "Set the x rotate max deg.",
+          "isRequired": false,
+          "type": "number"
+        },
+        {
+          "name": "yMaxRotate",
+          "documentation": "Set the y rotate max deg.",
+          "isRequired": false,
+          "type": "number"
+        },
+        {
+          "name": "defaultRotateX",
+          "documentation": "Set the default rotateX.",
+          "isRequired": false,
+          "type": "number"
+        },
+        {
+          "name": "defaultRotateY",
+          "documentation": "Set the default rotateY.",
+          "isRequired": false,
+          "type": "number"
+        },
+        {
+          "name": "leaveSpeed",
+          "documentation": "Set mouse leave transition speed.",
+          "isRequired": false,
+          "type": "number"
+        },
+        {
+          "name": "leaveTimingFunction",
+          "documentation": "Set mouse leave transition TimingFunction.",
+          "isRequired": false,
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "TransformCardProps",
+      "extends": [
+        "DataProps",
+        "HTMLAttributes"
+      ]
+    },
+    {
+      "name": "TransformCardState",
+      "members": [
+        {
+          "name": "isEnter",
+          "isRequired": false,
+          "type": "boolean"
+        }
+      ]
+    },
+    {
+      "name": "TransformCard",
+      "exports": [
+        {
+          "name": "prototype",
+          "type": "prototype"
+        },
+        {
+          "name": "defaultProps",
+          "initializerText": " {\n    perspective: 200,\n    xMaxRotate: 15,\n    yMaxRotate: 15,\n    defaultRotateX: 0,\n    defaultRotateY: 0,\n    leaveSpeed: 750,\n    leaveTimingFunction: \"\"\n  }",
+          "type": "TransformCardProps"
+        },
+        {
+          "name": "contextTypes",
+          "initializerText": " { theme: PropTypes.object }",
+          "type": "{ theme: Requireable<any>; }"
+        }
+      ],
+      "members": [
+        {
+          "name": "state",
+          "initializerText": " {}",
+          "type": "TransformCardState"
+        },
+        {
+          "name": "context",
+          "type": "{ theme: any; }"
+        },
+        {
+          "name": "wrapperElm",
+          "type": "HTMLDivElement"
+        },
+        {
+          "name": "handleMouseMove",
+          "initializerText": " (e: React.MouseEvent<HTMLDivElement>) => {\n\n    const {\n      xMaxRotate,\n      yMaxRotate,\n      defaultRotateX,\n      defaultRotateY,\n      leaveSpeed,\n      leaveTimingFunction\n    } = this.props;\n    const { currentTarget, clientX, clientY } = e;\n    const { width, height, left, top } = currentTarget.getBoundingClientRect();\n    const xOffset = (left + width - clientX) / width;\n    const yOffset = (top + height - clientY) / height;\n\n    const transition = `all ${leaveSpeed}ms ${leaveTimingFunction ? \" \" + leaveTimingFunction : \"\"}`;\n    Object.assign(this.wrapperElm.style, {\n      transition: \"all 0ms\",\n      transform: `rotateX(${defaultRotateX + (yOffset - 0.5) * xMaxRotate}deg) rotateY(${defaultRotateY + (0.5 - xOffset) * yMaxRotate}deg)`\n    });\n  }",
+          "type": "(e: MouseEvent<HTMLDivElement>) => void"
+        },
+        {
+          "name": "handleMouseLeave",
+          "initializerText": " (e: React.MouseEvent<HTMLDivElement>) => {\n    const {\n      defaultRotateX,\n      defaultRotateY,\n      leaveSpeed,\n      leaveTimingFunction\n    } = this.props;\n    const transition = `all ${leaveSpeed}ms ${leaveTimingFunction ? \" \" + leaveTimingFunction : \"\"}`;\n\n    Object.assign(this.wrapperElm.style, {\n      transition,\n      transform: `rotateX(${defaultRotateX}deg) rotateY(${defaultRotateY}deg)`\n    });\n  }",
+          "type": "(e: MouseEvent<HTMLDivElement>) => void"
+        },
+        {
+          "name": "render",
+          "type": "() => Element"
+        }
+      ],
+      "extends": [
+        "Component"
+      ]
+    },
+    {
+      "name": "getStyles",
+      "type": "(TransformCard: TransformCard) => { root: any; wrapper: any; }"
+    }
+  ],
+  "type": "typeof \"D:/react-uwp/src/TransformCard/index\""
+}