[Don't merge] – Temporary diff

README.md

@@ -25,11 +25,22 @@
   </a>
 </p>
 
-### vx
+### vx-primitives
 
-vx is a collection of reusable low-level visualization components. vx combines the power of d3 to
+vx-primitives is a collection of reusable cross-platform low-level visualization components. vx combines the power of d3 to
 generate your visualization with the benefits of react for updating the DOM.
 
+This repository is a working fork of [hshoff/vx](https://github.com/hshoff/vx) that adds support for react-primitives platforms.
+
+You can find the working development branch at: https://github.com/elemental-design/vx-primitives/tree/develop
+
+Supported platforms:
+
+- [x] [React Web](https://github.com/facebook/react/tree/master/packages/react-dom)
+- [x] [React Sketch.app](https://github.com/airbnb/react-sketchapp/)
+- [ ] [React Native](https://github.com/facebook/react-native)
+- [ ] [React Native Windows](https://github.com/Microsoft/react-native-windows)
+
 <br />
 
 <p align="center">

packages/vx-demo/src/sketch/README.md

@@ -0,0 +1,28 @@
+# react-sketchapp vx demo
+
+Cross platform VX primitives used to render to `react-sketchapp`
+
+## How to use
+
+Download the example or [clone the repo](https://github.com/hshoff/vx):
+
+```bash
+curl https://codeload.github.com/hshoff/vx/tar.gz/master | tar -xz --strip=2 vx-master/packages/vx-demo/src/sketch
+cd sketch
+```
+
+Install the dependencies
+
+```bash
+npm install
+```
+
+Then, open Sketch and navigate to `Plugins → vx-demo: Sketch`
+
+### Run it in Sketch
+
+Run with live reloading in Sketch
+
+```bash
+npm run render
+```

packages/vx-demo/src/sketch/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vx/demo-sketch",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "skpm": {
+    "main": "vx-demo.sketchplugin",
+    "manifest": "src/manifest.json"
+  },
+  "scripts": {
+    "build": "skpm-build",
+    "watch": "skpm-build --watch",
+    "render": "skpm-build --watch --run",
+    "render:once": "skpm-build --run",
+    "postinstall": "npm run build && skpm-link"
+  },
+  "author": "macintoshhelper",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@skpm/builder": "^0.5.16"
+  },
+  "dependencies": {
+    "chroma-js": "^1.2.2",
+    "d3-hierarchy": "^1.1.8",
+    "d3-scale": "^1.0.6",
+    "d3-shape": "^1.3.5",
+    "elemental-react": "^0.1.1",
+    "prop-types": "^15.5.8",
+    "react": "^16.9.0",
+    "react-primitives": "^0.6.0",
+    "react-primitives-svg": "0.0.3",
+    "react-sketchapp": "^3.1.1",
+    "react-test-renderer": "^16.9.0",
+    "styled-components": "^4.3.2",
+    "styled-system": "^5.1.1",
+    "topojson-client": "^3.0.0"
+  }
+}

packages/vx-demo/src/sketch/src/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import styled from 'styled-components/primitives';
+import { render, Document, Artboard, Page, Text, RedBox } from 'react-sketchapp';
+import {
+  width as styledWidth,
+  position,
+  space,
+  height as styledHeight,
+  color,
+} from 'styled-system';
+import chroma from 'chroma-js';
+import { Svg, Platform } from '@vx/primitives';
+
+import Bars from './pages/Bars';
+
+const Screen = styled(Artboard)`
+  ${styledWidth}
+  ${position}
+  ${space}
+  ${styledHeight}
+  ${color}
+`;
+
+Screen.defaultProps = {
+  width: 360,
+  position: 'relative',
+  ml: 0,
+};
+
+const DocumentContainer = ({ a }) => (
+  <Document>
+    <Page name="App">
+      <Screen name="Bars" height={360} width={360} mb={80} bg="#000">
+        <Bars width={360} height={360} />
+      </Screen>
+    </Page>
+  </Document>
+);
+
+DocumentContainer.propTypes = {
+  colors: PropTypes.objectOf(PropTypes.string).isRequired,
+};
+
+export default () => {
+  const data = context.document.documentData();
+  const pages = context.document.pages();
+
+  data.setCurrentPage(pages.firstObject());
+
+  try {
+    render(<DocumentContainer />);
+  } catch (err) {
+    render(<RedBox error={err} />);
+  }
+};

packages/vx-demo/src/sketch/src/manifest.json

@@ -0,0 +1,17 @@
+{
+	"compatibleVersion": 3,
+	"bundleVersion": 1,
+	"commands": [
+		{
+			"name": "vx-demo: Sketch",
+			"identifier": "main",
+			"script": "./index.js"
+		}
+	],
+	"menu": {
+		"isRoot": true,
+		"items": [
+			"main"
+		]
+	}
+}

packages/vx-demo/src/sketch/src/pages/Bars.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Bar } from '@vx/shape';
+import { Group } from '@vx/group';
+import { GradientTealBlue } from '@vx/gradient';
+import { letterFrequency } from '@vx/mock-data';
+import { scaleBand, scaleLinear } from '@vx/scale';
+
+import { Svg, Rect } from '@vx/primitives';
+
+const data = letterFrequency.slice(5);
+
+// accessors
+const x = d => d.letter;
+const y = d => +d.frequency * 100;
+
+export default ({ width, height }) => {
+  // bounds
+  const xMax = width;
+  const yMax = height - 120;
+
+  // scales
+  const xScale = scaleBand({
+    rangeRound: [0, xMax],
+    domain: data.map(x),
+    padding: 0.4,
+  });
+  const yScale = scaleLinear({
+    rangeRound: [yMax, 0],
+    domain: [0, Math.max(...data.map(y))],
+  });
+
+  return (
+    <Svg width={width} height={height}>
+      <GradientTealBlue id="teal" />
+      <Rect width={width} height={height} fill={'url(#teal)'} rx={14} />
+      <Group top={80}>
+        {data.map((d, i) => {
+          const letter = x(d);
+          const barWidth = xScale.bandwidth();
+          const barHeight = yMax - yScale(y(d));
+          const barX = xScale(letter);
+          const barY = yMax - barHeight;
+          return (
+            <Bar
+              key={`bar-${letter}`}
+              x={barX}
+              y={barY}
+              width={barWidth}
+              height={barHeight}
+              fill="rgba(28, 0, 255, .5)"
+              // onClick={event => {
+              //   alert(`clicked: ${JSON.stringify(Object.values(d))}`);
+              // }}
+            />
+          );
+        })}
+      </Group>
+    </Svg>
+  );
+};

packages/vx-geo/src/graticule/Graticule.tsx

@@ -3,6 +3,7 @@ import { Group } from '@vx/group';
 import { geoGraticule, GeoGraticuleGenerator } from 'd3-geo';
 // eslint-disable-next-line import/no-unresolved
 import { LineString, MultiLineString, Polygon } from 'geojson';
+import { G, Path } from '@vx/primitives';
 
 export type GraticuleProps = {
   /**
@@ -67,16 +68,21 @@ export default function Graticule({
   return (
     <Group className="vx-geo-graticule">
       {graticule && (
-        <path d={graticule(currGraticule())} fill="none" stroke="black" {...restProps} />
+        <Path d={graticule(currGraticule())} fill="none" stroke="black" {...(restProps as any)} />
       )}
       {lines &&
         currGraticule.lines().map((line, i) => (
-          <g key={i}>
-            <path d={lines(line)} fill="none" stroke="black" {...restProps} />
-          </g>
+          <G key={i}>
+            <Path d={lines(line)} fill="none" stroke="black" {...(restProps as any)} />
+          </G>
         ))}
       {outline && (
-        <path d={outline(currGraticule.outline())} fill="none" stroke="black" {...restProps} />
+        <Path
+          d={outline(currGraticule.outline())}
+          fill="none"
+          stroke="black"
+          {...(restProps as any)}
+        />
       )}
     </Group>
   );

packages/vx-geo/src/projections/Projection.tsx

@@ -14,6 +14,7 @@ import {
 } from 'd3-geo';
 // eslint-disable-next-line import/no-unresolved
 import { LineString, Polygon, MultiLineString } from 'geojson';
+import { Platform, G, Path } from '@vx/primitives';
 
 import Graticule, { GraticuleProps } from '../graticule/Graticule';
 import { GeoPermissibleObjects, ProjectionPreset, Projection as ProjectionShape } from '../types';
@@ -172,15 +173,15 @@ export default function Projection<Datum extends GeoPermissibleObjects>({
       )}
 
       {features.map((feature, i) => (
-        <g key={`${projection}-${i}`}>
-          <path
-            className={cx(`vx-geo-${projection}`, className)}
+        <G key={`${projection}-${i}`}>
+          <Path
+            className={Platform.OS === 'web' && cx(`vx-geo-${projection}`, className)}
             d={feature.path || ''}
-            ref={innerRef && innerRef(feature, i)}
-            {...restProps}
+            ref={innerRef && (innerRef(feature, i) as any)}
+            {...(restProps as any)}
           />
           {centroid && centroid(feature.centroid, feature)}
-        </g>
+        </G>
       ))}
 
       {/* TODO: Maybe find a different way to pass projection function to use for example invert */}

packages/vx-gradient/src/gradients/LinearGradient.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Stop, Defs, LinearGradient as SvgLinearGradient } from '@vx/primitives';
 
 type LinearGradientOwnProps = {
   /** Unique id for the gradient. Should be unique across all page elements. */
@@ -65,20 +66,20 @@ export default function LinearGradient({
     y2 = '1';
   }
   return (
-    <defs>
-      <linearGradient
+    <Defs>
+      <SvgLinearGradient
         id={id}
         x1={x1}
         y1={y1}
         x2={x2}
         y2={y2}
         gradientTransform={rotate ? `rotate(${rotate})` : transform}
-        {...restProps}
+        {...(restProps as any)}
       >
         {!!children && children}
-        {!children && <stop offset={fromOffset} stopColor={from} stopOpacity={fromOpacity} />}
-        {!children && <stop offset={toOffset} stopColor={to} stopOpacity={toOpacity} />}
-      </linearGradient>
-    </defs>
+        {!children && <Stop offset={fromOffset} stopColor={from} stopOpacity={fromOpacity} />}
+        {!children && <Stop offset={toOffset} stopColor={to} stopOpacity={toOpacity} />}
+      </SvgLinearGradient>
+    </Defs>
   );
 }

packages/vx-group/src/Group.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import cx from 'classnames';
+import { Platform, G } from '@vx/primitives';
 
 type GroupProps = {
   top?: number;
   left?: number;
   transform?: string;
   className?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
   innerRef?: React.Ref<SVGGElement>;
 };
 
@@ -20,13 +21,13 @@ export default function Group({
   ...restProps
 }: GroupProps & Omit<React.SVGProps<SVGGElement>, keyof GroupProps>) {
   return (
-    <g
-      ref={innerRef}
-      className={cx('vx-group', className)}
+    <G
+      ref={innerRef as React.Ref<any>}
+      className={Platform.OS === 'web' ? cx('vx-group', className) : undefined}
       transform={transform || `translate(${left}, ${top})`}
-      {...restProps}
+      {...(restProps as any)}
     >
       {children}
-    </g>
+    </G>
   );
 }

packages/vx-primitives/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/vx-primitives/README.md

@@ -0,0 +1,9 @@
+# @vx/primitives
+
+<a title="@vx/primitives npm downloads" href="https://www.npmjs.com/package/@vx/primitives">
+  <img src="https://img.shields.io/npm/dm/@vx/primitives.svg?style=flat-square" />
+</a>
+
+The `@vx/primitives` package is here to help you make cross-platform apps.
+
+Inspired by https://github.com/lelandrichardson/react-primitives and https://github.com/chengyin/react-primitives-svg.