elemental-design · macintoshhelper · Sep 12, 2020 · Sep 12, 2020 · Sep 12, 2020 · Sep 12, 2020
diff --git a/packages/vx-geo/package.json b/packages/vx-geo/package.json
@@ -34,6 +34,7 @@
     "@types/geojson": "*",
     "@types/react": "*",
     "@vx/group": "0.0.199",
+    "@vx/primitives": "0.0.199",
     "classnames": "^2.2.5",
     "d3-geo": "^1.11.3",
     "prop-types": "^15.5.10"

diff --git a/packages/vx-geo/src/graticule/Graticule.tsx b/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,16 @@ 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} />
       )}
       {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} />
+          </G>
         ))}
       {outline && (
-        <path d={outline(currGraticule.outline())} fill="none" stroke="black" {...restProps} />
+        <Path d={outline(currGraticule.outline())} fill="none" stroke="black" {...restProps} />
       )}
     </Group>
   );

diff --git a/packages/vx-geo/src/projections/Projection.tsx b/packages/vx-geo/src/projections/Projection.tsx
@@ -15,6 +15,7 @@ import {
 // this is just for types
 // 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';
@@ -173,15 +174,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}
           />
           {centroid && centroid(feature.centroid, feature)}
-        </g>
+        </G>
       ))}
 
       {/* TODO: Maybe find a different way to pass projection function to use for example invert */}

diff --git a/packages/vx-gradient/package.json b/packages/vx-gradient/package.json
@@ -29,7 +29,8 @@
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
     "@types/react": "*",
-    "prop-types": "^15.5.7"
+    "prop-types": "^15.5.7",
+    "@vx/primitives": "^0.0.199"
   },
   "peerDependencies": {
     "react": "^15.0.0-0 || ^16.0.0-0"

diff --git a/packages/vx-gradient/src/gradients/LinearGradient.tsx b/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,8 +66,8 @@ export default function LinearGradient({
     y2 = '1';
   }
   return (
-    <defs>
-      <linearGradient
+    <Defs>
+      <SvgLinearGradient
         id={id}
         x1={x1}
         y1={y1}
@@ -76,9 +77,9 @@ export default function LinearGradient({
         {...restProps}
       >
         {!!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>
   );
 }
diff --git a/packages/vx-gradient/src/gradients/RadialGradient.tsx b/packages/vx-gradient/src/gradients/RadialGradient.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { LinearGradientProps } from './LinearGradient';
+import { Stop, Defs, RadialGradient as SvgRadialGradient } from '@vx/primitives';
 
 export type RadialGradientProps = Pick<
   LinearGradientProps,
@@ -30,16 +31,16 @@ export default function RadialGradient({
   ...restProps
 }: RadialGradientProps) {
   return (
-    <defs>
-      <radialGradient
+    <Defs>
+      <SvgRadialGradient
         id={id}
         gradientTransform={rotate ? `rotate(${rotate})` : transform}
         {...restProps}
       >
         {!!children && children}
-        {!children && <stop offset={fromOffset} stopColor={from} stopOpacity={fromOpacity} />}
-        {!children && <stop offset={toOffset} stopColor={to} stopOpacity={toOpacity} />}
-      </radialGradient>
-    </defs>
+        {!children && <Stop offset={fromOffset} stopColor={from} stopOpacity={fromOpacity} />}
+        {!children && <Stop offset={toOffset} stopColor={to} stopOpacity={toOpacity} />}
+      </SvgRadialGradient>
+    </Defs>
   );
 }
diff --git a/packages/vx-group/package.json b/packages/vx-group/package.json
@@ -35,7 +35,8 @@
     "@types/classnames": "^2.2.9",
     "@types/react": "*",
     "classnames": "^2.2.5",
-    "prop-types": "^15.6.2"
+    "prop-types": "^15.6.2",
+    "@vx/primitives": "^0.0.199"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/vx-group/src/Group.tsx b/packages/vx-group/src/Group.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
+import { Platform, G } from '@vx/primitives';
 
 type GroupProps = {
   /** Top offset applied to `<g/>`. */
@@ -25,13 +26,13 @@ export default function Group({
   ...restProps
 }: GroupProps & Omit<React.SVGProps<SVGGElement>, keyof GroupProps>) {
   return (
-    <g
+    <G
       ref={innerRef}
-      className={cx('vx-group', className)}
+      className={Platform.OS === 'web' && cx('vx-group', className)}
       transform={transform || `translate(${left}, ${top})`}
       {...restProps}
     >
       {children}
-    </g>
+    </G>
   );
 }
diff --git a/packages/vx-primitives/.npmrc b/packages/vx-primitives/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/vx-primitives/Readme.md b/packages/vx-primitives/Readme.md
@@ -0,0 +1,15 @@
+# @vx/group
+
+<a title="@vx/group 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>
+
+`<Group />` provides a simplified API for SVG `<g />` elements, which are containers for other SVG
+objects. You may pass in a `top` and `left` margin (instead of `transform={translate(...)}`) and a
+`className`.
+
+## Installation
+
+```
+npm install --save @vx/primitives
+```
diff --git a/packages/vx-primitives/package.json b/packages/vx-primitives/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@vx/primitives",
+  "version": "0.0.199",
+  "description": "vx primitives",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "lib",
+    "esm"
+  ],
+  "types": "lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hshoff/vx.git"
+  },
+  "keywords": [
+    "vx",
+    "react",
+    "d3",
+    "visualizations",
+    "charts",
+    "svg"
+  ],
+  "author": "@macintoshhelper",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hshoff/vx/issues"
+  },
+  "homepage": "https://github.com/hshoff/vx#readme",
+  "peerDependencies": {
+    "react": "^15.0.0-0 || ^16.0.0-0"
+  },
+  "dependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/react": "*",
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.2"
+  },
+  "devDependencies": {
+    "react-native-svg": "^12.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}