Rebuild with typescript

lukevella · May 10, 2021 · 620b1ff · 620b1ff
1 parent 50af3b2
commit 620b1ff
Show file tree

Hide file tree

Showing 289 changed files with 20,373 additions and 23,873 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc → .eslintrc.json b/.eslintrc → .eslintrc.json
@@ -2,34 +2,35 @@
   "env": {
     "browser": true,
     "node": true,
-    "jasmine": true
+    "jest": true
   },
-  "parser": "babel-eslint",
-  "plugins": [
-      "eslint-plugin-react"
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint/eslint-plugin", "eslint-plugin-react"],
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
   ],
+  "ignorePatterns": ["*.js"],
   "rules": {
-    "quotes": [2, "single"],
     "eol-last": [0],
     "no-mixed-requires": [0],
     "no-underscore-dangle": [0],
     "brace-style": [2, "1tbs"],
     "no-mixed-spaces-and-tabs": 2,
-    "object-curly-spacing": [2, "never"],
     "computed-property-spacing": [2, "never"],
     "array-bracket-spacing": [2, "never"],
     "space-in-parens": [2, "never"],
-    "indent": [2, 2, {"SwitchCase": 1}],
-    "no-multiple-empty-lines": [2, {"max": 1}],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "no-multiple-empty-lines": [2, { "max": 1 }],
     "space-before-function-paren": [2, "never"],
     "spaced-comment": [2, "always"],
     "space-before-blocks": [2, "always"],
     "no-spaced-func": 2,
     "camelcase": 2,
     "space-infix-ops": 2,
-    "no-unused-vars": 2,
     "react/jsx-uses-vars": 2,
     "react/jsx-uses-react": 2,
-    "no-undef": 2
+    "no-undef": 2,
+    "@typescript-eslint/explicit-module-boundary-types": 0
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 npm-debug.log
-.sass-cache
+dist
+.DS_Store
diff --git a/.npmignore b/.npmignore
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+dist
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/.travis.yml b/.travis.yml
@@ -1,9 +1,5 @@
 language: node_js
 node_js:
-  - "8"
-branches:
-  only:
-  - gh-pages
-  - /.*/
+  - "14"
 notifications:
   email: [email protected]
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,15 @@
+# Changelog
+
+## 2.0.0
+
+### Added
+
+- TypeScript support
+- Started using style-loader so there's no need for importing .css files separately. Styles are now injected into `<head>` when importing `react-activity`.
+
+### Changed
+
+- Activity indicator color is now set using `currentColor` in css.
+- The project now consists of two workspaces. This helps with creating a realistic environment to test the package in and makes sure we do not distribute code for the demo as part of the published package.
+- Fixed windmill animation jittering.
+- Improved how animations work with the `speed` prop.
diff --git a/README.md b/README.md
@@ -9,46 +9,38 @@ A library of activity indicators in the form of React components.
 
 ## Demo & Examples
 
-Live demo: http://labs.lukevella.com/react-activity
+Live demo: https://react-activity.lukevella.com
 
 To run the examples locally, run:
 
 ```bash
-npm install
-npm start
+yarn && yarn start
 ```
 
-Then open `localhost:8000` in your browser.
+Then open [http://localhost:8000](http://localhost:8000) in your browser.
 
 ## Install
 
-```
-npm install react-activity
-```
-
 React, ReactDOM are peer dependencies, if you haven't already installed them use:
 
 ```
-npm install react react-dom
+npm install react-activity react react-dom
 ```
 
 ## Getting Started
 
 Import the activity indicators you would like to use along with the css file. Use the activity indicator component like you would any other component.
 
-```js
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import { Dots } from 'react-activity';
-import 'react-activity/dist/react-activity.css';
-
-class App extends Component {
-  render() {
-    return <Dots />;
-  }
-}
+```jsx
+import React from "react";
+import { render } from "react-dom";
+import { Dots } from "react-activity";
+
+const App = () => {
+  return <Dots />;
+};
 
-render(<App />, document.getElementById('app-container'))
+render(<App />, document.getElementById("app-container"));
 ```
 
 ## Optimizing Your Build
@@ -57,39 +49,36 @@ To avoid bundling unnecessary code and css to your project, you can import the
 activity indicators individually.
 
 ```js
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import Dots from 'react-activity/lib/Dots';
-import 'react-activity/lib/Dots/Dots.css';
-
-class App extends Component {
-  render() {
-    return <Dots />;
-  }
+import React, { Component } from "react";
+import { render } from "react-dom";
+import Dots from "react-activity/dist/Dots";
+
+const App => () => {
+  return <Dots />
 }
 
-render(<App />, document.getElementById('app-container'))
+render(<App />, document.getElementById("app-container"));
 ```
 
 ## Activity Indicators
 
-* `Dots`
-* `Levels`
-* `Sentry`
-* `Spinner`
-* `Squares`
-* `Digital`
-* `Bounce`
-* `Windmill`
+- `Dots`
+- `Levels`
+- `Sentry`
+- `Spinner`
+- `Squares`
+- `Digital`
+- `Bounce`
+- `Windmill`
 
 ## Properties
 
-* `size: number` All dimensions of the activity indicators are
-specified in ems so play around with a value until you find something that
-suits your needs.
-* `color: string` The active color of the indicator.
-* `speed: number (Default: 1)` The relative animation speed of the indicator.
-* `animating: boolean (Default: true)` Whether to show the indicator (true) or hide it (false).
+- `size: number` All dimensions of the activity indicators are
+  specified in ems so play around with a value until you find something that
+  suits your needs.
+- `color: string` The active color of the indicator.
+- `speed: number (Default: 1)` The relative animation speed of the indicator.
+- `animating: boolean (Default: true)` Whether to show the indicator (true) or hide it (false).
 
 ## License