Prepare for release (#12)

Preparing for release 3.0.0-rc.0
shawnmcknight · Jul 18, 2020 · 2f53528 · 2f53528
1 parent 010f750
commit 2f53528
Show file tree

Hide file tree

Showing 5 changed files with 2,665 additions and 3,472 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,17 +1,39 @@
 version: 2.1
 orbs:
-  node: circleci/node@1.1.6
+  node: circleci/node@3.0.1
 jobs:
-  build-and-test:
-    executor:
-      name: node/default
+  test:
+    executor: node/default
+    parameters:
+      node-version:
+        type: string
     steps:
       - checkout
-      - node/with-cache:
-          steps:
-            - run: npm install
-            - run: npm test
+      - node/install:
+          node-version: << parameters.node-version >>
+      - node/install-packages
+      - run:
+          name: Node version
+          command: node -v
+      - run:
+          name: Npm version
+          command: npm -v
+      - run:
+          name: Validate TS types
+          command: npm run typecheck
+      - run:
+          name: Run eslint
+          command: npm run lint
+      - run:
+          name: Unit tests and coverage
+          command: npm run test:coverage:summary
 workflows:
-  build-and-test:
+  all-tests:
     jobs:
-      - build-and-test
+      - test:
+          matrix:
+            parameters:
+              node-version:
+                - 12.18.0
+                - 13.14.0
+                - 14.5.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,21 +1,27 @@
 ## HEAD
 
+## 3.0.0-rc
+###### _2020-07-18_
+**BREAKING CHANGE**
+- Library has been completely rewritten in TypeScript, complies with React >=16.8, and all tooling has been updated (#11) @shawnmcknight
+  - The API has been changed significantly; there are no longer separate `onLoad` and `onChange` props in favor of a single `onChange` prop.  The callback for `onChange` returns `height` and `width` instead of `scrollbarHeight` and `scrollbarWidth`.
+
 ## 2.1.0
-###### _Jan 31, 2018_
+###### _2020-01-31_
 - Lodash as a peerDependency was causing missing peerDependency errors.  Lodash peerDep replaced with stifle dep (#7) @shawnmcknight
 - Bump several dependency versions @shawnmcknight
 - Configure npm to not generate package-lock file @shawnmcknight
 
 ## 2.0.0
 
-###### _May 30, 2017_
+###### _2017-05-30_
 Major version bump to facilitate new dependency requirements:
 - Make react a peerDependency to avoid running module duplication (#3) @shawnmcknight
 - Make lodash a peerDependency due to its common use and avoid inflating build size unnecessarily @shawnmcknight
 
 ## 1.0.2
 
-###### _May 28, 2017_
+###### _2017-05-28_
 - Remove separate lodash modules in favor of direct import of functions @shawnmcknight
 - Add support for prettier and update libraries to conform to rules @shawnmcknight
 - Update all dependencies to latest version and make updates to conform to API changes @shawnmcknight
@@ -25,13 +31,12 @@ Major version bump to facilitate new dependency requirements:
 
 ## 1.0.1
 
-###### _Apr 26, 2017_
+###### _2017-04-26_
 - Cancel throttled events when unmounting component @shawnmcknight
 
 ## 1.0.0
 
-###### _Apr 17, 2017_
-
+###### _2017-04-17_
 - Add unit tests through mocha/chai/enzyme to reach 100% code coverage @shawnmcknight
 - Add code coverage tooling through istanbul/nyc @shawnmcknight
 - Update to React separate prop-types package @shawnmcknight
@@ -40,6 +45,5 @@ Major version bump to facilitate new dependency requirements:
 
 ## 0.1.0
 
-###### _Mar 25, 2017_
-
+###### _2017-03-25_
 - Initial creation of this repository!  Thanks for using it!
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
 # React-Scrollbar-Size
+[![STORIS](https://circleci.com/gh/STORIS/react-scrollbar-size.svg?style=svg)](https://app.circleci.com/pipelines/github/STORIS/react-scrollbar-size?branch=master)
+[![Downloads](https://img.shields.io/npm/dm/react-scrollbar-size)](https://www.npmjs.com/package/react-scrollbar-size)
 
 React-Scrollbar-Size is a React component designed to calculate the size of the user agent's horizontal and vertical scrollbars.
 It will also detect when the size of the scrollbars changes, such as when the user agent's zoom factor changes.
@@ -25,44 +27,44 @@ The callback accepts an object which will be updated with the following properti
 | `height` | The current height of the horizontal scrollbar. |
 
 ## Examples
-To see a live example, follow these [instructions](https://github.com/STORIS/react-scrollbar-size/blob/master/examples/README.md).
+To see a live example, follow these [instructions](https://github.com/STORIS/react-scrollbar-size/blob/master/example/README.md).
 
 ### TypeScript
 ```tsx
 import React, { CSSProperties, FunctionComponent, useState } from 'react';
 import ScrollbarSize from 'react-scrollbar-size';
 
 const styles: CSSProperties = {
-	margin: '1rem',
-	textAlign: 'center',
+  margin: '1rem',
+  textAlign: 'center',
 };
 
 const ScrollbarSizeDemo: FunctionComponent = () => {
-	const [currentHeight, setHeight] = useState(0);
-	const [currentWidth, setWidth] = useState(0);
-
-	const scrollbarSizeChange = ({ height, width }: ScrollbarSizeChangeHandlerParams) => {
-		if (height !== currentHeight) {
-			setHeight(height);
-		}
-
-		if (width !== currentWidth) {
-			setWidth(width);
-		}
-	};
-
-	return (
-		<div style={styles}>
-			<h2>React Scrollbar Size Demo</h2>
-			<h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
-			<ScrollbarSize onChange={scrollbarSizeChange} />
-			<p>
-				{`The current height of the scrollbar is ${currentHeight}px.`}
-				<br />
-				{`The current width of the scrollbar is ${currentWidth}px.`}
-			</p>
-		</div>
-	);
+  const [currentHeight, setHeight] = useState(0);
+  const [currentWidth, setWidth] = useState(0);
+
+  const scrollbarSizeChange = ({ height, width }: ScrollbarSizeChangeHandlerParams) => {
+    if (height !== currentHeight) {
+      setHeight(height);
+    }
+
+    if (width !== currentWidth) {
+      setWidth(width);
+    }
+  };
+
+  return (
+    <div style={styles}>
+      <h2>React Scrollbar Size Demo</h2>
+      <h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
+      <ScrollbarSize onChange={scrollbarSizeChange} />
+      <p>
+        {`The current height of the scrollbar is ${currentHeight}px.`}
+        <br />
+        {`The current width of the scrollbar is ${currentWidth}px.`}
+      </p>
+    </div>
+  );
 };
 ```
 
@@ -72,36 +74,36 @@ import React, { useState } from 'react';
 import ScrollbarSize from 'react-scrollbar-size';
 
 const styles = {
-	margin: '1rem',
-	textAlign: 'center',
+  margin: '1rem',
+  textAlign: 'center',
 };
 
 const ScrollbarSizeDemo = () => {
-	const [currentHeight, setHeight] = useState(0);
-	const [currentWidth, setWidth] = useState(0);
-
-	const scrollbarSizeChange = ({ height, width }) => {
-		if (height !== currentHeight) {
-			setHeight(height);
-		}
-
-		if (width !== currentWidth) {
-			setWidth(width);
-		}
-	};
-
-	return (
-		<div style={styles}>
-			<h2>React Scrollbar Size Demo</h2>
-			<h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
-			<ScrollbarSize onChange={scrollbarSizeChange} />
-			<p>
-				{`The current height of the scrollbar is ${currentHeight}px.`}
-				<br />
-				{`The current width of the scrollbar is ${currentWidth}px.`}
-			</p>
-		</div>
-	);
+  const [currentHeight, setHeight] = useState(0);
+  const [currentWidth, setWidth] = useState(0);
+
+  const scrollbarSizeChange = ({ height, width }) => {
+    if (height !== currentHeight) {
+      setHeight(height);
+    }
+
+    if (width !== currentWidth) {
+      setWidth(width);
+    }
+  };
+
+  return (
+    <div style={styles}>
+      <h2>React Scrollbar Size Demo</h2>
+      <h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
+      <ScrollbarSize onChange={scrollbarSizeChange} />
+      <p>
+        {`The current height of the scrollbar is ${currentHeight}px.`}
+        <br />
+        {`The current width of the scrollbar is ${currentWidth}px.`}
+      </p>
+    </div>
+  );
 };
 ```