Use Typescript instead of JavaScript

.github/workflows/nodejs.yml

@@ -21,6 +21,7 @@ jobs:
       run: |
         yarn install
         yarn build
+        yarn run format
         yarn test
       env:
         CI: true

.gitignore

@@ -59,3 +59,7 @@ typings/
 
 # Next.js directory
 .next
+
+# IntelliJ files
+/.idea/
+*.iml

README.md

@@ -102,7 +102,7 @@ For an example, see [pages/index.js](./pages/index.js).
 
 ## Available Widgets
 
-### [DateTime](./components/widgets/datetime/index.js)
+### [DateTime](components/widgets/datetime/DateTime.tsx)
 
 #### Example
 
@@ -116,7 +116,7 @@ import DateTime from '../components/widgets/datetime'
 
 * `interval`: Refresh interval in milliseconds (Default: `10000`)
 
-### [Jenkins Job Status](./components/widgets/jenkins/job-status.js)
+### [Jenkins Job Status](components/widgets/jenkins/JenkinsJobStatus.tsx)
 
 #### Example
 
@@ -142,7 +142,7 @@ For Jenkins multibranch projects add `branch` to the object.
 * `jobs`: List of all jobs
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
-### [Jenkins Job Health](./components/widgets/jenkins/job-health.js)
+### [Jenkins Job Health](components/widgets/jenkins/JenkinsJobHealth.tsx)
 
 #### Example
 
@@ -169,7 +169,7 @@ For Jenkins multibranch projects add `branch` to the object.
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
 
-### [Jenkins Build Duration](./components/widgets/jenkins/build-duration.js)
+### [Jenkins Build Duration](components/widgets/jenkins/JenkinsBuildBuration.tsx)
 
 #### Example
 
@@ -195,7 +195,7 @@ For Jenkins multibranch projects add `branch` to the object.
 * `jobs`: List of all jobs
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
-### [JIRA Issue Count](./components/widgets/jira/issue-count.js)
+### [JIRA Issue Count](components/widgets/jira/JiraIssueCount.tsx)
 
 #### Example
 
@@ -219,7 +219,7 @@ For Jenkins multibranch projects add `branch` to the object.
 * `query`: JIRA search query (`jql`)
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
-### [JIRA Sprint Days Remaining](./components/widgets/jira/sprint-days-remaining.js)
+### [JIRA Sprint Days Remaining](components/widgets/jira/JiraSprintDaysRemaining.tsx)
 
 #### Example
 
@@ -241,7 +241,7 @@ import JiraSprintDaysRemaining from '../components/widgets/jira/sprint-days-rema
 * `boardId`: JIRA board id
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
-### [Bitbucket PullRequest Count](./components/widgets/bitbucket/pull-request-count.js)
+### [Bitbucket PullRequest Count](components/widgets/bitbucket/BitbucketPullRequestCount.tsx)
 
 #### Example
 
@@ -267,7 +267,7 @@ import BitbucketPullRequestCount from '../components/widgets/bitbucket/pull-requ
 * `users`: Bitbucket user slugs as an array
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
-### [PageSpeed Insights Score](./components/widgets/pagespeed-insights/score.js)
+### [PageSpeed Insights Score](components/widgets/pagespeed-insights/PageSpeedInsideScore.tsx)
 
 #### Example
 
@@ -286,7 +286,7 @@ import PageSpeedInsightsScore from '../components/widgets/pagespeed-insights/sco
   * Acceptable values: `desktop` | `mobile`
 * `filterThirdPartyResources`: Indicates if third party resources should be filtered out (Default: `false`)
 
-### [PageSpeed Insights Stats](./components/widgets/pagespeed-insights/stats.js)
+### [PageSpeed Insights Stats](components/widgets/pagespeed-insights/PageSpeedInsightsStats.tsx)
 
 #### Example
 
@@ -305,7 +305,7 @@ import PageSpeedInsightsStats from '../components/widgets/pagespeed-insights/sta
   * Acceptable values: `desktop` | `mobile`
 * `filterThirdPartyResources`: Indicates if third party resources should be filtered out (Default: `false`)
 
-### [SonarQube](./components/widgets/sonarqube/index.js)
+### [SonarQube](components/widgets/sonarqube/SonarQube.tsx)
 
 #### Example
 
@@ -326,7 +326,7 @@ import SonarQube from '../components/widgets/sonarqube'
 * `componentKey`: SonarQube project key
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
-### [Elasticsearch Hit Count](./components/widgets/elasticsearch/hit-count.js)
+### [Elasticsearch Hit Count](components/widgets/elasticsearch/ElasticsearchHitCount.tsx)
 
 #### Example
 
@@ -350,7 +350,7 @@ import ElasticsearchHitCount from '../components/widgets/elasticsearch/hit-count
 * `query`: Elasticsearch query
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
-### [GitHub Issue Count](./components/widgets/github/issue-count.js)
+### [GitHub Issue Count](components/widgets/github/GitHubIssueCount.tsx)
 
 #### Example
 
@@ -371,7 +371,7 @@ import GitHubIssueCount from '../components/widgets/github/issue-count'
 * `repository`: Name of the repository
 * `authKey`: Credential key, defined in [auth.js](./auth.js)
 
-### [Title](./components/widgets/title/index.js)
+### [Title](components/widgets/title/Title.tsx)
 
 #### Example
 
@@ -383,7 +383,7 @@ import Title from '../components/widgets/title'
 
 ## Available Themes
 
-### [light](./styles/light-theme.js)
+### [light](styles/light-theme.ts)
 
 #### Example
 
@@ -399,7 +399,7 @@ import lightTheme from '../styles/light-theme'
 
 ![dashboard-light](https://cloud.githubusercontent.com/assets/457834/26214930/8c065dce-3bfe-11e7-9da0-2d6ebba2dfb8.png)
 
-### [dark](./styles/dark-theme.js)
+### [dark](styles/dark-theme.ts)
 
 #### Example
 

auth.ts

@@ -0,0 +1,40 @@
+import { IAuthModel } from "./lib/auth-model";
+
+const bitbucket: IAuthModel = {
+  username: process.env.BITBUCKET_USER,
+  password: process.env.BITBUCKET_PASS,
+};
+
+const elasticsearch: IAuthModel = {
+  username: process.env.ELASTICSEARCH_USER,
+  password: process.env.ELASTICSEARCH_PASS,
+};
+
+const jenkins: IAuthModel = {
+  username: process.env.JENKINS_USER,
+  password: process.env.JENKINS_PASS,
+};
+
+const jira: IAuthModel = {
+  username: process.env.JIRA_USER,
+  password: process.env.JIRA_PASS,
+};
+
+const sonarqube: IAuthModel = {
+  username: process.env.SONARQUBE_USER,
+  password: process.env.SONARQUBE_PASS,
+};
+
+const github: IAuthModel = {
+  username: process.env.GITHUB_USER,
+  password: process.env.GITHUB_PASS,
+};
+
+export default {
+  bitbucket: bitbucket,
+  elasticsearch: elasticsearch,
+  jenkins: jenkins,
+  jira: jira,
+  sonarqube: sonarqube,
+  github: github,
+};

components/Badge.tsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { size } from "polished";
+
+export default styled.span`
+  ${size("1.75em")}
+  background-color: transparent;
+  border-radius: 50%;
+  color: ${(props) => props.theme.palette.textInvertColor};
+  display: inline-block;
+  line-height: 1.75em;
+  text-align: center;
+`;

components/CircleProgress.tsx

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import { size } from "polished";
+import { Component } from "react";
+import React from "react";
+
+const Svg = styled.svg`
+  ${size("14em")}
+  fill: transparent;
+  margin: auto;
+`;
+
+const Circle = styled.circle`
+  stroke-linecap: round;
+  stroke-width: 10;
+  transform: translate(100px, 100px) rotate(-89.9deg);
+  transition: stroke-dashoffset 0.3s linear;
+
+  &.background {
+    stroke: ${(props) => props.theme.palette.borderColor};
+  }
+
+  &.progress {
+    stroke: ${(props) => props.theme.palette.primaryColor};
+  }
+`;
+
+const Text = styled.text`
+  fill: ${(props) => props.theme.palette.textColor};
+  font-size: 4em;
+  text-anchor: middle;
+`;
+
+export interface ICircleProgressProps {
+  max: number;
+  radius: number;
+  unit: string;
+  value: number;
+}
+
+export default class CircleProgress extends Component<
+  ICircleProgressProps,
+  {}
+> {
+  static defaultProps = {
+    max: 100,
+    radius: 90,
+    unit: "",
+  };
+
+  render() {
+    const { radius, max, value, unit } = this.props;
+    const strokeDasharray = 2 * radius * Math.PI;
+    const strokeDashoffset = ((max - value) / max) * strokeDasharray;
+
+    return (
+      <Svg viewBox="0 0 200 200">
+        <Circle r={radius} className="background" />
+        <Circle
+          r={radius}
+          className="progress"
+          strokeDasharray={strokeDasharray}
+          strokeDashoffset={strokeDashoffset}
+        />
+        <Text x="100" y="120">
+          {value}
+          {unit}
+        </Text>
+      </Svg>
+    );
+  }
+}

components/Counter.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import React from "react";
+
+const Counter = styled.div`
+  font-size: 4em;
+  color: ${(props) => props.theme.palette.accentColor};
+`;
+
+export default ({ value }) => <Counter>{value}</Counter>;

components/Dashboard.tsx

@@ -0,0 +1,48 @@
+import Head from "next/head";
+import styled, { createGlobalStyle, ThemeProvider } from "styled-components";
+import { normalize } from "polished";
+import React, { Component } from "react";
+
+const GlobalStyle = createGlobalStyle`
+  ${normalize()}
+
+  html {
+    font-family: 'Roboto', sans-serif;
+  }
+`;
+
+const Container = styled.main`
+  align-content: center;
+  align-items: center;
+  background-color: ${(props) => props.theme.palette.backgroundColor};
+  color: ${(props) => props.theme.palette.textColor};
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  min-height: 100vh;
+`;
+
+export default class Dashboard extends Component<
+  { theme: any; title: string },
+  {}
+> {
+  render() {
+    const { theme, title, children } = this.props;
+    return (
+      <ThemeProvider theme={theme}>
+        <Container>
+          <Head>
+            <title>{title}</title>
+            <link rel="icon" href="/static/favicon.png" />
+            <link
+              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
+              rel="stylesheet"
+            />
+          </Head>
+          {children}
+          <GlobalStyle />
+        </Container>
+      </ThemeProvider>
+    );
+  }
+}

components/ErrorIcon.tsx

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { size } from "polished";
+import React from "react";
+
+const Svg = styled.svg`
+  ${size("5em")}
+  fill: ${(props) => props.theme.palette.errorColor};
+`;
+
+export default () => (
+  <Svg viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+  </Svg>
+);

components/Link.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export default styled.a`
+  text-decoration: none;
+  color: ${(props) => props.theme.palette.textColor};
+`;