new(vx-demo): convert Pack demo to codesandbox

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

@@ -35,7 +35,7 @@ import Network from './tiles/Network';
 import Streamgraph, {
   BACKGROUND as streamgraphBackgroundColor,
 } from '../docs-v2/examples/vx-streamgraph/Example';
-import Pack from './tiles/Pack';
+import Pack from '../docs-v2/examples/vx-pack/Example';
 import Patterns from '../docs-v2/examples/vx-pattern/Example';
 import Treemap from './tiles/Treemap';
 import Radar from './tiles/Radar';

packages/vx-demo/src/components/tiles/Pack.tsx → packages/vx-demo/src/docs-v2/examples/vx-pack/Example.tsx

@@ -3,7 +3,6 @@ import { Group } from '@vx/group';
 import { Pack, hierarchy } from '@vx/hierarchy';
 import { scaleQuantize } from '@vx/scale';
 import rawData, { Exoplanets as Datum } from '@vx/mock-data/lib/mocks/exoplanets';
-import { ShowProvidedProps } from '../../types';
 
 function extent<D>(allData: D[], value: (d: D) => number): [number, number] {
   return [Math.min(...allData.map(value)), Math.max(...allData.map(value))];
@@ -21,48 +20,44 @@ const root = hierarchy<Datum>(pack)
   .sum(d => d.radius * d.radius)
   .sort(
     (a, b) =>
+      // sort by hierarchy, then distance
       (a && a.data ? 1 : -1) - (b && b.data ? 1 : -1) ||
       (a.children ? 1 : -1) - (b.children ? 1 : -1) ||
       (a.data.distance == null ? -1 : 1) - (b.data.distance == null ? -1 : 1) ||
       a.data.distance! - b.data.distance!,
   );
 
-export default ({
-  width,
-  height,
-  margin = {
-    top: 10,
-    left: 30,
-    right: 40,
-    bottom: 80,
-  },
-}: ShowProvidedProps) => {
-  if (width < 10) return null;
+const defaultMargin = { top: 10, left: 30, right: 40, bottom: 80 };
 
-  return (
+type Props = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+};
+
+export default function Example({ width, height, margin = defaultMargin }: Props) {
+  return width < 10 ? null : (
     <svg width={width} height={height}>
       <rect width={width} height={height} rx={14} fill="#ffffff" />
 
       <Pack<Datum> root={root} size={[width * 2, height * 2]}>
         {packData => {
-          const circles = packData.descendants().slice(2);
+          const circles = packData.descendants().slice(2); // skip outer hierarchies
           return (
             <Group top={-height - margin.bottom} left={-width / 2}>
-              {circles.map((circle, i) => {
-                return (
-                  <circle
-                    key={`cir-${i}`}
-                    r={circle.r}
-                    cx={circle.x}
-                    cy={circle.y}
-                    fill={colorScale(circle.data.radius)}
-                  />
-                );
-              })}
+              {circles.map((circle, i) => (
+                <circle
+                  key={`circle-${i}`}
+                  r={circle.r}
+                  cx={circle.x}
+                  cy={circle.y}
+                  fill={colorScale(circle.data.radius)}
+                />
+              ))}
             </Group>
           );
         }}
       </Pack>
     </svg>
   );
-};
+}

packages/vx-demo/src/docs-v2/examples/vx-pack/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-pack/package.json

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

packages/vx-demo/src/docs-v2/examples/vx-pack/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/Pack.tsx

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