feat: added NPM Downloads component (#52)

Author: cecilia-sanare

README.md

@@ -87,6 +87,16 @@ function Demo() {
 </Npm>
 ```
 
+### Npm.Downloads
+
+```jsx
+<Npm.Downloads scope="@uiw" packageName="react-shields" />
+<Npm>
+  <Npm.Downloads interval="dw" scope="@uiw" packageName="react-github-corners" />
+  <Npm.Downloads packageName="hotkeys-js" />
+</Npm>
+```
+
 ### Github.Issues
 
 ```jsx

src/npm/Downloads.tsx

@@ -0,0 +1,37 @@
+import Base, { BaseProps} from '../common/Base';
+
+export interface DownloadProps extends BaseProps {
+  interval?: 'dw' | 'dm' | 'dy' | 'dt';
+  packageName?: string;
+  scope?: string;
+}
+
+/**
+ * Npm Size
+ * 
+ * `/npm/:interval/:packageName`
+ * npm downloads: npm downloads per interval badge  
+ * 
+ * `/npm/:interval/:scope/:packageName`
+ * npm downloads (scoped): npm downloads per interval (scoped version) badge  
+ * 
+ */
+export default class Downloads extends Base<DownloadProps> {
+  constructor(props: DownloadProps) {
+    super(props, { interval: 'dm' }, { platform: 'npm' });
+  };
+  getUrl = () => {
+    const { base, platform, interval, packageName, scope } = this.state;
+    if (platform !== 'npm' || !packageName) return '';
+
+    const url = [base, 'npm', interval];
+
+    if (scope) {
+      url.push(scope);
+    }
+
+    url.push(packageName);
+
+    return url.join('/');
+  }
+}

src/npm/Npm.tsx

@@ -1,8 +1,10 @@
 import Container from '../common/Container';
 import Version from './Version';
 import Size from './Size';
+import Downloads from './Downloads';
 
 export default class Npm extends Container {
   static Version = Version;
   static Size = Size;
+  static Downloads = Downloads;
 }

website/App.tsx

@@ -44,6 +44,14 @@ const App: React.FC = () => {
             <Npm.Size packageName="kkt" version="5.0.0-alpha.12" />
           </Npm>
         </div>
+        <div className="App-list">
+          <div className="title">Npm Downloads</div>
+          <Npm.Downloads scope="@uiw" packageName="react-shields" />
+          <Npm>
+            <Npm.Downloads interval="dw" scope="@uiw" packageName="react-github-corners" />
+            <Npm.Downloads packageName="hotkeys-js" />
+          </Npm>
+        </div>
         <div className="App-list">
           <div className="title">Github Issue</div>
           <Github.Issues user="uiwjs" repo="uiw" />