new(vx-demo): convert Bars to codesandbox

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

@@ -6,7 +6,7 @@ import drawData from './util/drawData';
 
 import Footer from './Footer';
 
-import Bars from './tiles/Bars';
+import Bars from '../docs-v2/examples/vx-bars/Example';
 import Curves from '../docs-v2/examples/vx-curve/Example';
 import Dots from './tiles/Dots';
 import Gradients from '../docs-v2/examples/vx-gradient/Example';

packages/vx-demo/src/components/tiles/Bars.tsx → packages/vx-demo/src/docs-v2/examples/vx-bars/Example.tsx

@@ -1,40 +1,52 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Bar } from '@vx/shape';
 import { Group } from '@vx/group';
 import { GradientTealBlue } from '@vx/gradient';
 import letterFrequency, { LetterFrequency } from '@vx/mock-data/lib/mocks/letterFrequency';
 import { scaleBand, scaleLinear } from '@vx/scale';
-import { ShowProvidedProps } from '../../types';
 
 const data = letterFrequency.slice(5);
+const verticalMargin = 120;
 
 // accessors
 const getLetter = (d: LetterFrequency) => d.letter;
 const getLetterFrequency = (d: LetterFrequency) => Number(d.frequency) * 100;
 
-export default ({ width, height, events = false }: ShowProvidedProps) => {
-  if (width < 10) return null;
+type Props = {
+  width: number;
+  height: number;
+  events?: boolean;
+};
 
+export default function Example({ width, height, events = false }: Props) {
   // bounds
   const xMax = width;
-  const yMax = height - 120;
+  const yMax = height - verticalMargin;
 
-  // scales
-  const xScale = scaleBand<string>({
-    rangeRound: [0, xMax],
-    domain: data.map(getLetter),
-    padding: 0.4,
-  });
-  const yScale = scaleLinear<number>({
-    rangeRound: [yMax, 0],
-    domain: [0, Math.max(...data.map(getLetterFrequency))],
-  });
+  // scales, memoize for performance
+  const xScale = useMemo(
+    () =>
+      scaleBand<string>({
+        rangeRound: [0, xMax],
+        domain: data.map(getLetter),
+        padding: 0.4,
+      }),
+    [xMax],
+  );
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        rangeRound: [yMax, 0],
+        domain: [0, Math.max(...data.map(getLetterFrequency))],
+      }),
+    [yMax],
+  );
 
-  return (
+  return width < 10 ? null : (
     <svg width={width} height={height}>
       <GradientTealBlue id="teal" />
       <rect width={width} height={height} fill="url(#teal)" rx={14} />
-      <Group top={40}>
+      <Group top={verticalMargin / 2}>
         {data.map(d => {
           const letter = getLetter(d);
           const barWidth = xScale.bandwidth();
@@ -58,4 +70,4 @@ export default ({ width, height, events = false }: ShowProvidedProps) => {
       </Group>
     </svg>
   );
-};
+}

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

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

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

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