update build dependencies, use latest tech (#5)

* update all build tools, switch to typescript

* fix license

* cleanup examples

.eslintignore

@@ -1 +1,3 @@
-*.css
+node_modules
+dist
+reactComponentLib

.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_|^req|^next' }],
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    'react/prop-types': 0,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};

.gitignore

@@ -1,20 +1,5 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
+.DS_Store
 node_modules
-
-# builds
-build
 dist
-
-# misc
-.DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+.rpt2_cache
+.eslintcache

.npmrc

@@ -1 +1 @@
-save-exact=true
+registry = "https://registry.npmjs.com/"

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+};

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - '11'
+  - '10'
+  - '8'
+  - '6'

.vscode/settings.json

@@ -0,0 +1,29 @@
+{
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false,
+  "editor.renderWhitespace": "boundary",
+  "files.exclude": {
+    "**/dist": true,
+    "**/.rpt2_cache": true,
+    "**/node_modules": true
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "[typescript]": {
+    "editor.formatOnSave": false
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "workbench.editor.enablePreview": false,
+  "workbench.editor.enablePreviewFromQuickOpen": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Robin Yang
+Copyright (c) 2020 Robin Yang
 
 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

@@ -42,19 +42,19 @@ class Display extends Component {
 | borderColor    | string                      | '#dddddd' | Hex or rgb() string for the color of the border between characters                                     |
 | borderWidth    | string                      | '1px'     | Any valid CSS width value for the width of the border between characters                               |
 | characterSet   | Array of strings (required) | _null_    | The array of characters for the display to flip through                                                |
-| characterWidth | string                      | _null_    | Any valid CSS width value for the width of each character. Useful with non-monospaced fonts            |
+| characterWidth | string                      | '1em'     | Any valid CSS width value for the width of each character. Useful with non-monospaced fonts            |
 | fontSize       | string                      | '1em'     | Any valid CSS font-size value                                                                          |
 | minLength      | number                      | _null_    | Minimum # of characters in the display                                                                 |
 | padDirection   | string                      | 'left'    | If minLength > number of characters currently displayed, append blank characters to left or right side |
 | step           | number                      | 200       | Sets the speed (ms) of flips                                                                           |
 | textColor      | string                      | '#dddddd' | Hex or rgb() string for color of the display characters                                                |
 | value          | string (required)           | _null_    | The string of characters to display or flip to                                                         |
 
-For `characterSet`, there are three convenience constants that ship with this component:
+For `characterSet`, there are three convenience constants that ship with this component (you can see how they might be used in the example):
 
-`SplitFlapDisplay.NUMERIC`: `[0-9]`\
-`SplitFlapDisplay.ALPHA`: whitespace `' '` + `[A-Z]`\
-`SplitFlapDisplay.PUNCTUATION`: the non-alphanumeric characters found in a [Vesta Board](https://www.vestaboard.com/ces/)
+`NUMERIC`: `[0-9]`\
+`ALPHA`: whitespace `' '` + `[A-Z]`\
+`PUNCTUATION`: the non-alphanumeric characters found in a [Vesta Board](https://www.vestaboard.com/ces/)
 
 ## License
 

example/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_|^req|^next' }],
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    'react/prop-types': 0,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};

example/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/src/ReactSplitFlapDisplay

example/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+};