new(vx-demo): convert Polygons to codesandbox

packages/vx-demo/src/components/Gallery.tsx

@@ -59,7 +59,9 @@ 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 Polygons, {
+  backgroundColor as polygonBackground,
+} from '../docs-v2/examples/vx-polygons/Example';
 import ZoomI from '../docs-v2/examples/vx-zoom-i/Example';
 import Brush from './tiles/Brush';
 
@@ -898,7 +900,7 @@ export default function Gallery() {
         </Tilt>
         <Tilt className="tilt" options={tiltOptions}>
           <Link href="/polygons">
-            <div className="gallery-item" style={{ background: '#7f82e3' }}>
+            <div className="gallery-item" style={{ background: polygonBackground }}>
               <div className="image">
                 <ParentSize>
                   {({ width, height }) => <Polygons width={width} height={height} />}

packages/vx-demo/src/components/tiles/Polygons.tsx → packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx

@@ -3,7 +3,9 @@ import { Polygon } from '@vx/shape';
 import { Group } from '@vx/group';
 import { scaleBand } from '@vx/scale';
 import { GradientPinkRed } from '@vx/gradient';
-import { ShowProvidedProps } from '../../types';
+
+export const backgroundColor = '#7f82e3';
+const polygonSize = 25;
 
 const polygons = [
   {
@@ -30,18 +32,28 @@ const polygons = [
 
 const yScale = scaleBand<number>({
   domain: polygons.map((p, i) => i),
-  padding: 0.5,
+  padding: 0.8,
 });
 
-export default ({ width, height }: ShowProvidedProps) => {
+type Props = {
+  width: number;
+  height: number;
+};
+
+export default ({ width, height }: Props) => {
   yScale.rangeRound([0, height]);
   return (
     <svg width={width} height={height}>
-      <rect width={width} height={height} fill="#7f82e3" rx={14} />
+      <rect width={width} height={height} fill={backgroundColor} rx={14} />
       <GradientPinkRed id="polygon-pink" />
       {polygons.map((polygon, i) => (
-        <Group key={`polygon-${i}`} top={yScale(i)} left={width / 2}>
-          <Polygon sides={polygon.sides} size={25} fill={polygon.fill} rotate={polygon.rotate} />
+        <Group key={`polygon-${i}`} top={(yScale(i) || 0) + polygonSize / 2} left={width / 2}>
+          <Polygon
+            sides={polygon.sides}
+            size={polygonSize}
+            fill={polygon.fill}
+            rotate={polygon.rotate}
+          />
         </Group>
       ))}
     </svg>

packages/vx-demo/src/docs-v2/examples/vx-polygons/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'),
+);

packages/vx-demo/src/docs-v2/examples/vx-polygons/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@vx/demo-polygons",
+  "description": "Standalone vx polygons demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/gradient": "latest",
+    "@vx/group": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+    "@vx/shape": "latest",
+    "react": "^16",
+    "react-dom": "^16",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "polygon",
+    "shape"
+  ]
+}

packages/vx-demo/src/docs-v2/examples/vx-polygons/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;
+}

packages/vx-demo/src/pages/Polygons.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import Show from '../components/Show';
-import Polygons from '../components/tiles/Polygons';
-import PolygonsSource from '!!raw-loader!../components/tiles/Polygons';
+import Polygons from '../docs-v2/examples/vx-polygons/Example';
+import PolygonsSource from '!!raw-loader!../docs-v2/examples/vx-polygons/Example';
 
 export default () => (
-  <Show component={Polygons} title="Polygons">
+  <Show component={Polygons} title="Polygons" codeSandboxDirectoryName="vx-polygons">
     {PolygonsSource}
   </Show>
 );