From b285a37be02de1873cf7f42da6414cf34e351047 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Mon, 11 May 2020 12:21:44 -0700
Subject: [PATCH 1/2] new(vx-demo): convert Threshold to codesandbox

---
 packages/vx-demo/src/components/Gallery.tsx   |  6 ++--
 packages/vx-demo/src/components/Show.tsx      |  2 +-
 .../examples/vx-threshold/Example.tsx}        | 18 ++++++-----
 .../docs-v2/examples/vx-threshold/index.tsx   | 11 +++++++
 .../examples/vx-threshold/package.json        | 31 +++++++++++++++++++
 .../examples/vx-threshold/sandbox-styles.css  |  8 +++++
 packages/vx-demo/src/pages/Threshold.tsx      |  5 +--
 7 files changed, 69 insertions(+), 12 deletions(-)
 rename packages/vx-demo/src/{components/tiles/Threshold.tsx => docs-v2/examples/vx-threshold/Example.tsx} (88%)
 create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-threshold/index.tsx
 create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-threshold/package.json
 create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-threshold/sandbox-styles.css

diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
index 729e2c2cf..4f0e9388f 100644
--- a/packages/vx-demo/src/components/Gallery.tsx
+++ b/packages/vx-demo/src/components/Gallery.tsx
@@ -46,7 +46,9 @@ import Responsive from '../docs-v2/examples/vx-responsive/Example';
 import DragI from '../docs-v2/examples/vx-drag-i/Example';
 import DragII from '../docs-v2/examples/vx-drag-ii/Example';
 import LinkTypes from './tiles/LinkTypes';
-import Threshold from './tiles/Threshold';
+import Threshold, {
+  background as thresholdBackground,
+} from '../docs-v2/examples/vx-threshold/Example';
 import Chord from '../docs-v2/examples/vx-chord/Example';
 import Polygons from './tiles/Polygons';
 import ZoomI from '../docs-v2/examples/vx-zoom-i/Example';
@@ -836,7 +838,7 @@ export default function Gallery() {
         </Tilt>
         <Tilt className="tilt" options={tiltOptions}>
           <Link href="/threshold">
-            <div className="gallery-item" style={{ background: '#f3f3f3' }}>
+            <div className="gallery-item" style={{ background: thresholdBackground }}>
               <div className="image">
                 <ParentSize>
                   {({ width, height }) => (
diff --git a/packages/vx-demo/src/components/Show.tsx b/packages/vx-demo/src/components/Show.tsx
index 777ceaa0e..33756de73 100644
--- a/packages/vx-demo/src/components/Show.tsx
+++ b/packages/vx-demo/src/components/Show.tsx
@@ -61,12 +61,12 @@ export default withScreenSize<ShowProps & WithScreenSizeProvidedProps>(
               events,
             })}
           </div>
+          {description && React.createElement(description, { width, height })}
           {codeSandboxDirectoryName && (
             <div style={{ width, display: 'flex', justifyContent: 'flex-end' }}>
               <CodeSandboxLink exampleDirectoryName={codeSandboxDirectoryName} />
             </div>
           )}
-          {description && React.createElement(description, { width, height })}
           {children && (
             <div style={{ width }}>
               <h2>Code</h2>
diff --git a/packages/vx-demo/src/components/tiles/Threshold.tsx b/packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx
similarity index 88%
rename from packages/vx-demo/src/components/tiles/Threshold.tsx
rename to packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx
index ae169e488..d19d14a62 100644
--- a/packages/vx-demo/src/components/tiles/Threshold.tsx
+++ b/packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx
@@ -8,9 +8,9 @@ import { AxisLeft, AxisBottom } from '@vx/axis';
 import { GridRows, GridColumns } from '@vx/grid';
 import cityTemperature, { CityTemperature } from '@vx/mock-data/lib/mocks/cityTemperature';
 import { timeParse } from 'd3-time-format';
-import { ShowProvidedProps } from '../../types';
 
 const parseDate = timeParse('%Y%m%d');
+export const background = '#f3f3f3';
 
 // accessors
 const date = (d: CityTemperature) => (parseDate(d.date) as Date).valueOf();
@@ -29,11 +29,15 @@ const temperatureScale = scaleLinear<number>({
   nice: true,
 });
 
-export default function Theshold({
-  width,
-  height,
-  margin = { top: 0, right: 0, bottom: 0, left: 0 },
-}: ShowProvidedProps) {
+const defaultMargin = { top: 0, right: 0, bottom: 0, left: 0 };
+
+type Props = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+};
+
+export default function Theshold({ width, height, margin = defaultMargin }: Props) {
   if (width < 10) return null;
 
   // bounds
@@ -46,7 +50,7 @@ export default function Theshold({
   return (
     <div>
       <svg width={width} height={height}>
-        <rect x={0} y={0} width={width} height={height} fill="#f3f3f3" rx={14} />
+        <rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
         <Group left={margin.left} top={margin.top}>
           <GridRows scale={temperatureScale} width={xMax} height={yMax} stroke="#e0e0e0" />
           <GridColumns scale={timeScale} width={xMax} height={yMax} stroke="#e0e0e0" />
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-threshold/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-threshold/index.tsx
new file mode 100644
index 000000000..3313ec317
--- /dev/null
+++ b/packages/vx-demo/src/docs-v2/examples/vx-threshold/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ParentSize from '@vx/responsive/lib/components/ParentSize';
+
+import Example from './Example';
+import './sandbox-styles.css';
+
+render(
+  <ParentSize>{({ width, height }) => <Example width={width} height={height} />}</ParentSize>,
+  document.getElementById('root'),
+);
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-threshold/package.json b/packages/vx-demo/src/docs-v2/examples/vx-threshold/package.json
new file mode 100644
index 000000000..bfa40d951
--- /dev/null
+++ b/packages/vx-demo/src/docs-v2/examples/vx-threshold/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@vx/demo-threshold",
+  "description": "Standalone vx threshold demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/axis": "latest",
+    "@vx/curve": "latest",
+    "@vx/grid": "latest",
+    "@vx/group": "latest",
+    "@vx/mock-data": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+    "@vx/shape": "latest",
+    "@vx/threshold": "latest",
+    "d3-time-format": "^2.2.3",
+    "react": "^16",
+    "react-dom": "^16",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "threshold"
+  ]
+}
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-threshold/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-threshold/sandbox-styles.css
new file mode 100644
index 000000000..b91993723
--- /dev/null
+++ b/packages/vx-demo/src/docs-v2/examples/vx-threshold/sandbox-styles.css
@@ -0,0 +1,8 @@
+html,
+body,
+#root {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 2em;
+}
diff --git a/packages/vx-demo/src/pages/Threshold.tsx b/packages/vx-demo/src/pages/Threshold.tsx
index 77a9a9eb3..3a601939e 100644
--- a/packages/vx-demo/src/pages/Threshold.tsx
+++ b/packages/vx-demo/src/pages/Threshold.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Threshold from '../components/tiles/Threshold';
-import ThresholdSource from '!!raw-loader!../components/tiles/Threshold';
+import Threshold from '../docs-v2/examples/vx-threshold/Example';
+import ThresholdSource from '!!raw-loader!../docs-v2/examples/vx-threshold/Example';
 
 function Description({ width }: { width: number }) {
   return (
@@ -22,6 +22,7 @@ export default () => {
       component={Threshold}
       title="Threshold"
       description={Description}
+      codeSandboxDirectoryName="vx-threshold"
       margin={{
         top: 40,
         left: 40,

From 390782a4179e2d5d5624c16e52c625188670dc27 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Mon, 11 May 2020 12:25:24 -0700
Subject: [PATCH 2/2] style(vx-demo): fix Threshold default margin

---
 .../vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx   | 2 +-
 packages/vx-demo/src/pages/Threshold.tsx                    | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx b/packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx
index d19d14a62..09947fc86 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx
+++ b/packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx
@@ -29,7 +29,7 @@ const temperatureScale = scaleLinear<number>({
   nice: true,
 });
 
-const defaultMargin = { top: 0, right: 0, bottom: 0, left: 0 };
+const defaultMargin = { top: 40, right: 30, bottom: 50, left: 40 };
 
 type Props = {
   width: number;
diff --git a/packages/vx-demo/src/pages/Threshold.tsx b/packages/vx-demo/src/pages/Threshold.tsx
index 3a601939e..7da768bf2 100644
--- a/packages/vx-demo/src/pages/Threshold.tsx
+++ b/packages/vx-demo/src/pages/Threshold.tsx
@@ -23,12 +23,6 @@ export default () => {
       title="Threshold"
       description={Description}
       codeSandboxDirectoryName="vx-threshold"
-      margin={{
-        top: 40,
-        left: 40,
-        right: 20,
-        bottom: 50,
-      }}
     >
       {ThresholdSource}
     </Show>