feat: Add TransformCard component

Author: myxvisual

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.md

@@ -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__/SimpleExample.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/DatePickers/CalendarView/__Mock__/index.tsx

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

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

@@ -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/SimpleExample.md

@@ -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/Components/TransformCard/SimpleExample.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) => {