Merge pull request #61 from williaster/chris--clip-path

[ClipPath] add ClipPath package

packages/vx-clip-path/.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": ["es2015", "react", "stage-0"],
+  "plugins": [],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }]
+        }],
+        "transform-runtime",
+        "transform-decorators-legacy"
+      ]
+    }
+  }
+}

packages/vx-clip-path/Makefile

@@ -0,0 +1 @@
+include node_modules/react-fatigue-dev/Makefile

packages/vx-clip-path/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@vx/clip-path",
+  "version": "0.0.0",
+  "description": "vx clip-path",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "make build SRC=./src",
+    "prepublish": "make build SRC=./src",
+    "test": "jest"
+  },
+  "files": [
+    "build"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hshoff/vx.git"
+  },
+  "keywords": [
+    "vx",
+    "react",
+    "d3",
+    "visualizations",
+    "charts",
+    "svg"
+  ],
+  "author": "Chris Williams @williaster",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hshoff/vx/issues"
+  },
+  "homepage": "https://github.com/hshoff/vx#readme",
+  "devDependencies": {
+    "babel-jest": "^20.0.3",
+    "enzyme": "^2.8.2",
+    "jest": "^20.0.3",
+    "react-addons-test-utils": "15.4.2",
+    "react-fatigue-dev": "github:tj/react-fatigue-dev",
+    "react-tools": "^0.10.0",
+    "regenerator-runtime": "^0.10.5"
+  },
+  "dependencies": {
+    "react": "15.4.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/vx-clip-path/src/clip-paths/CircleClipPath.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ClipPath from './ClipPath';
+
+export default ({
+  id,
+  cx,
+  cy,
+  r,
+  ...restProps,
+}) => (
+  <ClipPath id={id}>
+    <circle
+      cx={cx}
+      cy={cy}
+      r={r}
+      {...restProps}
+    />
+  </ClipPath>
+);
+

packages/vx-clip-path/src/clip-paths/ClipPath.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default ({
+  id,
+  children,
+  ...restProps
+}) => (
+  <defs>
+    <clipPath id={id} {...restProps}>
+      {children}
+    </clipPath>
+  </defs>
+);

packages/vx-clip-path/src/clip-paths/RectClipPath.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ClipPath from './ClipPath';
+
+export default ({
+  id,
+  x = 0,
+  y = 0,
+  width = 1,
+  height = 1,
+  ...restProps,
+}) => (
+  <ClipPath id={id}>
+    <rect
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      {...restProps}
+    />
+  </ClipPath>
+);

packages/vx-clip-path/src/index.js

@@ -0,0 +1,3 @@
+export { default as ClipPath } from './clip-paths/ClipPath';
+export { default as CircleClipPath } from './clip-paths/CircleClipPath';
+export { default as RectClipPath } from './clip-paths/RectClipPath';

packages/vx-clip-path/test/ClipPaths.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import {
+  ClipPath,
+  CircleClipPath,
+  RectClipPath,
+} from '../src';
+
+import { shallow } from 'enzyme';
+
+describe('<ClipPath />', () => {
+  test('it should be defined', () => {
+    expect(ClipPath).toBeDefined();
+  });
+
+  test('it should render defs and clipPath elements', () => {
+    const wrapper = shallow(<ClipPath />);
+    expect(wrapper.type()).toBe('defs');
+    expect(wrapper.find('clipPath').length).toBe(1);
+  });
+
+  test('it should assign the passed id to the clipPath', () => {
+    const wrapper = shallow(<ClipPath id="best_clip"/>);
+    expect(wrapper.find('clipPath#best_clip').length).toBe(1);
+  });
+});
+
+describe('<RectClipPath />', () => {
+  test('it should be defined', () => {
+    expect(RectClipPath).toBeDefined();
+  });
+
+  test('it should render a rect', () => {
+    const wrapper = shallow(<RectClipPath />);
+    expect(wrapper.find('rect').length).toBe(1);
+  });
+});
+
+describe('<CircleClipPath />', () => {
+  test('it should be defined', () => {
+    expect(CircleClipPath).toBeDefined();
+  });
+
+  test('it should render a circle', () => {
+    const wrapper = shallow(<CircleClipPath />);
+    expect(wrapper.find('circle').length).toBe(1);
+  });
+});