Update to use typescript

.github/workflows/node.js.yml

@@ -1,29 +1,23 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
-
+        node-version: [14.x, 16.x]
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test

.gitignore

@@ -8,3 +8,5 @@ yarn.lock
 # code coverage
 .nyc_output
 coverage.lcov
+src/components/**/*.js
+src/**/*.map

.node-version

@@ -0,0 +1 @@
+v16.17.0

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

CHANGELOG.md

@@ -1,17 +1,30 @@
+# Unreleased
+
+Convert codebase to TypeScript
+
+## Breaking
+
+ProgressProvider now uses a render prop instead of children.
+
 # 1.0.1
+
 Fix for unresolved promise when chaining loads
 
 # 1.0.0
+
 Added tests and upgraded packages
 
 # 0.2.1
+
 - [Fix] Don't set state before component is mounted
 - [Fix] Add yarn.lock
 
 # 0.2.0
+
 - [Breaking] No longer export ProgressBar as default
 - [Feature] Add withProgress HOC to enable custom bars
 - [Feature] Add prop to disable box shadow
 
 # 0.1.0
+
 Initial Release

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017-2021 Nick Stanish
+Copyright (c) 2017-2022 Nick Stanish
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -6,8 +6,6 @@
 [![Build Status](https://travis-ci.org/nickstanish/reprogressbars.svg?branch=master)](https://travis-ci.org/nickstanish/reprogressbars)
 [![minzipped size](https://badgen.net/bundlephobia/minzip/reprogressbars)](https://bundlephobia.com/result?p=reprogressbars)
 
-
-
 ## Intro
 
 Reprogressbars is a progress bar library built on React.
@@ -17,12 +15,11 @@ The main purpose of this library is to simplify displaying progress from ajax re
 ## Examples
 
 ```jsx
-import { ProgressBar } from 'reprogressbars';
+import { ProgressBar } from "reprogressbars";
 
-<ProgressBar isLoading={this.state.isLoading} />
+<ProgressBar isLoading={this.state.isLoading} />;
 ```
 
-
 For a progress bar fixed to the top of your page:
 
 ```jsx
@@ -50,7 +47,6 @@ You can also change the height or color:
 
 See [docs](https://github.com/nickstanish/reprogressbars/tree/master/docs)
 
-
 ## Contribution
 
 Please create an issue for issues or bugs. Pull requests welcome.
@@ -59,4 +55,4 @@ Please create an issue for issues or bugs. Pull requests welcome.
 
 [MIT](http://opensource.org/licenses/MIT)
 
-Copyright (c) 2017-2021 Nick Stanish
+Copyright (c) 2017-2022 Nick Stanish

docs/index.js

@@ -1,32 +1,29 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { ProgressBar, withProgress } from 'reprogressbars';
-
-@withProgress
-class CustomProgressBar extends Component {
-  render() {
-    return (
-      <div>
-        <p>Progress active: {JSON.stringify(this.props.progress.active)}</p>
-        <p>Loading percentage: {this.props.progress.value.toFixed(1)}%</p>
-      </div>
-    );
-  }
-}
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import { ProgressBar, withProgress } from "reprogressbars";
 
+const TextProgress = (props) => {
+  return (
+    <div>
+      <p>Progress active: {JSON.stringify(props.progress.active)}</p>
+      <p>Loading percentage: {props.progress.value.toFixed(1)}%</p>
+    </div>
+  );
+};
+const ConnectedTextProgress = withProgress(TextProgress);
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isLoading: false
+      isLoading: false,
     };
   }
 
   toggleLoading() {
     this.clearTimeout();
     this.setState({
-      isLoading: !this.state.isLoading
+      isLoading: !this.state.isLoading,
     });
   }
 
@@ -41,41 +38,49 @@ class App extends Component {
   }
 
   loadFor(time) {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       this.clearTimeout();
       this.timeout = window.setInterval(() => {
-        this.setState({
-          isLoading: false
-        }, resolve);
+        this.setState(
+          {
+            isLoading: false,
+          },
+          resolve
+        );
       }, time);
 
       this.setState({
-        isLoading: true
+        isLoading: true,
       });
     });
   }
 
   render() {
     return (
       <div>
-        <ProgressBar isLoading={this.state.isLoading} className="fixed-progress-bar" color="#4285F4" height="4px" />
+        <ProgressBar
+          isLoading={this.state.isLoading}
+          className="fixed-progress-bar"
+          color="#4285F4"
+          height="4px"
+        />
         <div className="button-row">
           <button onClick={() => this.loadFor(200)}>Fast load</button>
           <button onClick={() => this.loadFor(1500)}>Slow load</button>
           <button onClick={() => this.loadFor(4000)}>Really slow load</button>
           <button onClick={() => this.queueMultiple()}>Chained</button>
         </div>
         <div className="button-row">
-          <button onClick={() => this.toggleLoading()}>{ this.state.isLoading ? 'End Loading' : 'Begin Loading'}</button>
+          <button onClick={() => this.toggleLoading()}>
+            {this.state.isLoading ? "End Loading" : "Begin Loading"}
+          </button>
         </div>
         <div>
-          <CustomProgressBar isLoading={this.state.isLoading} />
+          <ConnectedTextProgress isLoading={this.state.isLoading} />
         </div>
-      </div>);
+      </div>
+    );
   }
 }
 
-
-ReactDOM.render((
-  <App />
-), document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));