new(vx-xychart): add package boilerplate

packages/vx-demo/package.json

@@ -52,6 +52,7 @@
     "@vx/threshold": "0.0.198",
     "@vx/tooltip": "0.0.198",
     "@vx/voronoi": "0.0.198",
+    "@vx/xychart": "0.0.0",
     "@vx/zoom": "0.0.198",
     "@zeit/next-css": "^1.0.1",
     "classnames": "^2.2.5",

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import Show from '../components/Show';
+import XYChart from '../sandboxes/vx-xychart/Example';
+import XYChartSource from '!!raw-loader!../sandboxes/vx-xychart/Example';
+import packageJson from '../sandboxes/vx-xychart/package.json';
+
+export default () => (
+  <Show
+    component={XYChart}
+    title="XYChart"
+    codeSandboxDirectoryName="vx-xychart"
+    packageJson={packageJson}
+  >
+    {XYChartSource}
+  </Show>
+);

packages/vx-demo/src/sandboxes/vx-xychart/Example.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { XYChart } from '@vx/xychart';
+
+type Props = {
+  width: number;
+  height: number;
+};
+
+export default function Example(_: Props) {
+  return <XYChart />;
+}

packages/vx-demo/src/sandboxes/vx-xychart/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/sandboxes/vx-xychart/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vx/demo-xychart",
+  "description": "Standalone vx xychart demo.",
+  "main": "index.tsx",
+  "private": true,
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/responsive": "latest",
+    "@vx/xychart": "latest",
+    "react": "^16",
+    "react-dom": "^16",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx"
+  ]
+}

packages/vx-demo/src/sandboxes/vx-xychart/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-xychart/Readme.md

@@ -0,0 +1,3 @@
+# @vx/xychart
+
+Coming 🔜

packages/vx-xychart/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vx/xychart",
+  "version": "0.0.0",
+  "description": "Composable cartesian coordinate chart built with vx primitives",
+  "sideEffects": false,
+  "private": true,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "esm"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hshoff/vx.git"
+  },
+  "keywords": [
+    "vx",
+    "react",
+    "d3",
+    "visualizations",
+    "charts"
+  ],
+  "contributors": [
+    {
+      "name": "Chris Williams",
+      "url": "https://github.com/williaster"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hshoff/vx/issues"
+  },
+  "homepage": "https://github.com/hshoff/vx#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0-0"
+  },
+  "dependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/react": "*",
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.2"
+  }
+}

packages/vx-xychart/src/components/XYChart.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function XYChart() {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: 400,
+        background: '#333',
+        color: '#fff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      XYChart
+    </div>
+  );
+}

packages/vx-xychart/src/index.ts

@@ -0,0 +1 @@
+export { default as XYChart } from './components/XYChart';