add used by button and prepare v0.3.0

Author: vaibhavhrt

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to the "react-github-buttons" project will be documented in
 
 ## [Unreleased]
 
+## [0.3.0] 2019-6-15
+### Added
+
+- Used by button
+
 ## [0.2.0] 2019-6-13
 ### Added
 

README.md

@@ -19,25 +19,26 @@ npm install --save react-github-buttons
 ```tsx
 import React from 'react';
 
-import { Fork, Star, Watch } from 'react-github-buttons';
+import { Fork, Star, UsedBy, Watch } from 'react-github-buttons';
 
 function App() {
   return (
     <div>
       <Star owner='facebook' repo='react' />
       <Fork owner='facebook' repo='react' />
       <Watch owner='facebook' repo='react' />
+      <UsedBy owner='facebook' repo='react' count={2077841} />
     </div>
   )
 }
 ```
 
 ## Release Notes
 
-### 0.2.0
+### 0.3.0
 #### Added
 
-- Watch Button
+- Used by button
 
 ## Issues
 

example/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-github-buttons-example",
   "homepage": "https://vaibhavhrt.github.io/react-github-buttons",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "private": true,
   "dependencies": {

example/package.json

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { Fork, Star, Watch } from 'react-github-buttons';
+import { Fork, Star, Watch, UsedBy } from 'react-github-buttons';
 
 export default class App extends Component {
   render () {
@@ -9,6 +9,7 @@ export default class App extends Component {
         <Star owner='vaibhavhrt' repo='react-github-buttons' />
         <Fork owner='vaibhavhrt' repo='react-github-buttons' />
         <Watch owner='vaibhavhrt' repo='react-github-buttons' />
+        <UsedBy owner='vaibhavhrt' repo='react-github-buttons' count={0} />
       </div>
     )
   }

example/src/App.js

@@ -1,6 +1,6 @@
 {
   "name": "react-github-buttons",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React Components for dynamic buttons for github repo's star, fork etc.",
   "keywords": ["react", "github", "component", "utility"],
   "author": {

package.json

@@ -1,5 +1,6 @@
 import Star from "./star";
 import Fork from "./fork";
 import Watch from "./watch";
+import UsedBy from './usedBy';
 
-export { Fork, Star, Watch };
+export { Fork, Star, UsedBy, Watch };

src/index.ts

@@ -9,6 +9,7 @@ import classes from "../styles.css";
 import ForkIcon from "./icons/forkIcon";
 import StarIcon from "./icons/starIcon";
 import WatchIcon from "./icons/watchIcon";
+import UsedByIcon from './icons/usedByIcon';
 
 function getDataForVariant(
   variant: string,
@@ -44,8 +45,14 @@ function getDataForVariant(
     label = `${count} users are watching this repository`;
     countUrl = `https://github.com/${owner}/${repo}/watchers`;
     return { title, btnTitle, label, countUrl, Icon: WatchIcon };
+  } else if (variant === "usedby") {
+    title = "Used by";
+    btnTitle = "";
+    label = `${count} repositories depend on this package`;
+    countUrl = `https://github.com/${owner}/${repo}/network/dependents`;
+    return { title, btnTitle, label, countUrl, Icon: UsedByIcon };
   }
-  throw new Error("Invalid Variant, supply one of [star, fork, watch]");
+  throw new Error("Invalid Variant, supply one of [star, fork, watch, usedby]");
 }
 
 export interface IPropTypes {
@@ -82,5 +89,5 @@ GithubButton.propTypes = {
   count: PropTypes.node.isRequired,
   owner: PropTypes.string.isRequired,
   repo: PropTypes.string.isRequired,
-  variant: PropTypes.oneOf(["star", "fork", "watch"]),
+  variant: PropTypes.oneOf(["star", "fork", "watch", "usedby"]),
 };

src/lib/githubButton.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import classes from "../../styles.css";
+
+export default function UsedByIcon() {
+  return (
+    <svg
+      className={classes.svgicon}
+      viewBox="0 0 16 16"
+      version="1.1"
+      width="16"
+      height="16"
+    >
+      <path
+        fill-rule="evenodd"
+        // tslint:disable-next-line:max-line-length
+        d="M1 4.27v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97V4.27c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0L1.75 3.3c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59V5l6 1.61v6.75zM2 4l2.5-.67L11 5.06l-2.5.67L2 4zm13 7.77l-6 1.59V6.61l2-.55V8.5l2-.53V5.53L15 5v6.77zm-2-7.24L6.5 2.8l2-.53L15 4l-2 .53z"
+      />
+    </svg>
+  );
+}

src/lib/icons/usedByIcon.tsx

@@ -0,0 +1,22 @@
+/**
+ * @function UsedBy
+ */
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+import GithubButton from "./lib/githubButton";
+
+export interface IPropTypes {
+  owner: string;
+  repo: string;
+}
+
+export default function UsedBy(props: IPropTypes) {
+  return <GithubButton variant="usedby" { ...props } />;
+}
+
+UsedBy.propTypes = {
+  owner: PropTypes.string.isRequired,
+  repo: PropTypes.string.isRequired,
+  count: PropTypes.number.isRequired,
+};