Merge pull request #683 from hshoff/chris--sandbox-threshold

new(vx-demo): convert Threshold to codesandbox
airbnb · May 12, 2020 · 918b65f · 918b65f
2 parents ed20cce + 390782a
commit 918b65f
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 18 deletions.
diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
@@ -49,7 +49,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';
@@ -845,7 +847,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
@@ -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/...x-demo/src/components/tiles/Threshold.tsx → ...docs-v2/examples/vx-threshold/Example.tsx b/...x-demo/src/components/tiles/Threshold.tsx → ...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: 40, right: 30, bottom: 50, left: 40 };
+
+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
@@ -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
@@ -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
@@ -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
@@ -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,12 +22,7 @@ export default () => {
       component={Threshold}
       title="Threshold"
       description={Description}
-      margin={{
-        top: 40,
-        left: 40,
-        right: 20,
-        bottom: 50,
-      }}
+      codeSandboxDirectoryName="vx-threshold"
     >
       {ThresholdSource}
     </Show>