Merge pull request #497 from hshoff/chris--typescript-vx-clip-path

typescript(vx-clip-path): re-write package in TypeScript

packages/vx-clip-path/package.json

@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -31,6 +32,7 @@
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
+    "@types/react": "*",
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import ClipPath from './ClipPath';
+
+export type CircleClipPathProps = {
+  /** Unique id for the clipPath. */
+  id: string;
+  /** x position of the center of the ClipPath circle. */
+  cx?: string | number;
+  /** y position of the center of the ClipPath circle. */
+  cy?: string | number;
+  /** radius of the ClipPath circle. */
+  r?: string | number;
+};
+
+export default function CircleClipPath({
+  id,
+  cx,
+  cy,
+  r,
+  ...restProps
+}: CircleClipPathProps & Omit<React.SVGProps<SVGCircleElement>, keyof CircleClipPathProps>) {
+  return (
+    <ClipPath id={id}>
+      <circle cx={cx} cy={cy} r={r} {...restProps} />
+    </ClipPath>
+  );
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export type ClipPathProps = {
+  /** Unique id for the clipPath. */
+  id: string;
+  /** clipPath children. */
+  children?: React.ReactNode;
+};
+
+export default function ClipPath({
+  id,
+  children,
+  ...restProps
+}: ClipPathProps & Omit<React.SVGProps<SVGClipPathElement>, keyof ClipPathProps>) {
+  return (
+    <defs>
+      <clipPath id={id} {...restProps}>
+        {children}
+      </clipPath>
+    </defs>
+  );
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import ClipPath from './ClipPath';
+
+export type RectClipPathProps = {
+  /** Unique id for the clipPath. */
+  id: string;
+  /** x position of the ClipPath rect. */
+  x?: string | number;
+  /** y position of the ClipPath rect. */
+  y?: string | number;
+  /** width of the ClipPath rect. */
+  width?: string | number;
+  /** height of the ClipPath rect. */
+  height?: string | number;
+};
+
+export default function RectClipPath({
+  id,
+  x = 0,
+  y = 0,
+  width = 1,
+  height = 1,
+  ...restProps
+}: RectClipPathProps & Omit<React.SVGProps<SVGRectElement>, keyof RectClipPathProps>) {
+  return (
+    <ClipPath id={id}>
+      <rect x={x} y={y} width={width} height={height} {...restProps} />
+    </ClipPath>
+  );
+}