Merge pull request #672 from hshoff/chris--sandbox-zoom

new(vx-demo): convert ZoomI to codesandbox
airbnb · May 10, 2020 · b96bdbd · b96bdbd
2 parents abfca4f + 22b5fd5
commit b96bdbd
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 17 deletions.
diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
@@ -49,7 +49,7 @@ import LinkTypes from './tiles/LinkTypes';
 import Threshold from './tiles/Threshold';
 import Chord from '../docs-v2/examples/vx-chord/Example';
 import Polygons from './tiles/Polygons';
-import ZoomI from './tiles/Zoom-i';
+import ZoomI from '../docs-v2/examples/vx-zoom-i/Example';
 import Brush from './tiles/Brush';
 
 const items = [

diff --git a/...s/vx-demo/src/components/tiles/Zoom-i.tsx → ...rc/docs-v2/examples/vx-zoom-i/Example.tsx b/...s/vx-demo/src/components/tiles/Zoom-i.tsx → ...rc/docs-v2/examples/vx-zoom-i/Example.tsx
@@ -1,5 +1,6 @@
-/* eslint-disable react/jsx-handler-names */
+/* eslint react/jsx-handler-names: "off" */
 import React, { useState } from 'react';
+import { interpolateRainbow } from 'd3-scale-chromatic';
 import { Zoom } from '@vx/zoom';
 import { localPoint } from '@vx/event';
 import { RectClipPath } from '@vx/clip-path';
@@ -8,8 +9,6 @@ import genPhyllotaxis, {
   PhyllotaxisPoint,
 } from '@vx/mock-data/lib/generators/genPhyllotaxis';
 import { scaleLinear } from '@vx/scale';
-import { interpolateRainbow } from 'd3-scale-chromatic';
-import { ShowProvidedProps } from '../../types';
 
 const bg = '#0a0a0a';
 const points = [...new Array(1000)];
@@ -26,11 +25,16 @@ const initialTransform = {
   skewY: 0,
 };
 
-export default function ZoomI({ width, height }: ShowProvidedProps) {
+type Props = {
+  width: number;
+  height: number;
+};
+
+export default function ZoomI({ width, height }: Props) {
   const [showMiniMap, setShowMiniMap] = useState<boolean>(true);
 
-  const gen: GenPhyllotaxisFunction = genPhyllotaxis({ radius: 10, width, height });
-  const phyllotaxis: PhyllotaxisPoint[] = points.map((d, i) => gen(i));
+  const genenerator: GenPhyllotaxisFunction = genPhyllotaxis({ radius: 10, width, height });
+  const phyllotaxis: PhyllotaxisPoint[] = points.map((d, i) => genenerator(i));
 
   return (
     <>
@@ -44,7 +48,7 @@ export default function ZoomI({ width, height }: ShowProvidedProps) {
         transformMatrix={initialTransform}
       >
         {zoom => (
-          <div style={{ position: 'relative' }}>
+          <div className="relative">
             <svg
               width={width}
               height={height}
@@ -191,6 +195,9 @@ export default function ZoomI({ width, height }: ShowProvidedProps) {
           flex-direction: column;
           align-items: flex-end;
         }
+        .relative {
+          position: relative;
+        }
       `}</style>
     </>
   );

diff --git a/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/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-zoom-i/package.json b/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@vx/demo-zoom-i",
+  "description": "Standalone vx zoom demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/clip-path": "latest",
+    "@vx/event": "latest",
+    "@vx/mock-data": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+    "@vx/zoom": "latest",
+    "d3-scale-chromatic": "^1.5.0",
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "zoom"
+  ]
+}
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/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/Zoom-i.tsx b/packages/vx-demo/src/pages/Zoom-i.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import Show from '../components/Show';
-import ZoomI from '../components/tiles/Zoom-i';
-import ZoomISource from '!!raw-loader!../components/tiles/Zoom-i';
+import ZoomI from '../docs-v2/examples/vx-zoom-i/Example';
+import ZoomISource from '!!raw-loader!../docs-v2/examples/vx-zoom-i/Example';
 
-export default () => {
-  return (
-    <Show component={ZoomI} title="Zoom I">
-      {ZoomISource}
-    </Show>
-  );
-};
+export default () => (
+  <Show component={ZoomI} title="Zoom I" codeSandboxDirectoryName="vx-zoom-i">
+    {ZoomISource}
+  </Show>
+);