Initial commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    # Look for `package.json` and `lock` files in the `root` directory
+    directory: "/"
+    # Check the npm registry for updates every day (weekdays)
+    schedule:
+      interval: "weekly"

.github/workflows/publish.yml

@@ -0,0 +1,27 @@
+name: Publish Lib
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node
+      - name: Install Packages
+        run: npm i
+      - name: Build lib
+        run: npm run-script build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 HoldemPokerTools
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,92 @@
+<h1 align="center">
+  <img alt="React Texas Hold'em Hand Matrix Component" src="https://github.com/HoldemPokerTools/RangeAssistant/blob/master/packages/web/public/logo512.png" height="200px">
+  <br>
+  React Texas Hold'em Hand Matrix Component
+  <br>
+</h1>
+
+Hold'em Poker Tools React hand matrix is a React component to make displaying
+poker ranges simple!
+
+<p align="center">
+  <a href="#install">Install</a> •
+  <a href="#usage">Usage</a> •
+  <a href="#api">API</a> •
+  <a href="#support">Support</a> •
+  <a href="#license">License</a>
+</p>
+
+## Install
+
+Install via NPM (or Yarn):
+
+```
+npm i --save @holdem-poker-tools/hand-matrix
+```
+
+## Usage
+
+<img src="https://user-images.githubusercontent.com/42975160/95056819-2acc9b00-06ed-11eb-957f-eceba92624e9.png" alt="Hand Matrix" width="300">
+
+```
+const range = ['AA', 'KK', 'QQ', 'AKs', 'AQs'];
+
+<HandMatrix
+  colorize={false}
+  onMouseDown={combo => console.log(`mouseDown on ${combo}`)}
+  onMouseUp={combo => console.log(`mouseDown on ${combo}`)}
+  onMouseEnter={combo => console.log(`onMouseEnter on ${combo}`)}
+  onClick={combo => console.log(`onClick on ${combo}`)}
+  comboStyle={(combo) => ({
+    background: range.indexOf(combo !== -1) ? "green" : "grey"
+  })}
+  comboSubtext={(combo) => range.indexOf(combo !== -1) ? "100%" : ""}
+  renderItem={(combo, styles, comboSubtext, showText, colorize) => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        ...styles,
+      }}
+    >
+      {showText && (
+        <>
+          <div style={{ flexGrow: 1 }} type="keyboard">
+            {combo}
+          </div>
+          <div>{comboSubtext}</div>
+        </>
+      )}
+    </div>
+  )}
+/>
+```
+
+For an advanced usage example, see the [Hold'em Tools Range Assistant web app](http://rangeassistant.holdempoker.tools/)
+and associated [GitHub repository](https://github.com/HoldemPokerTools/RangeAssistant).
+
+## API
+
+Prop | Type | Default | Required | Description
+---- | :----: | :-------: | :--------: | -----------
+**colorize** | `Boolean` | `true` | :x: | Whether to apply default colors to the hand matrix to distinguish pairs vs offsuit vs suited hands. The result of the comboStyle function will override the default colors.
+**comboStyle** | `Function` |  | :x: | Function which receives the combo (e.g. AKo) and must return an object containing the styles to apply to the matrix tile for that combo e.g. {background: "#FFFFFF"}. Useful for displaying ranges.
+**comboSubtext** | `Function` |  | :x: | Function which receives the combo (e.g. AKo) and must return the text or React components to display beneath the combo text. Default is for no text to be displayed. Useful for displaying information such as combo equity
+**onClick** | `Function` |  | :x: | Click event handler for a combo tile. Will be called with combo e.g. AKo
+**onMouseDown** | `Function` |  | :x: | Mouse down event handler for a combo tile. Will be called with combo e.g. AKo
+**onMouseEnter** | `Function` |  | :x: | Mouseenter event handler for a combo tile. Will be called with combo e.g. AKo
+**onMouseUp** | `Function` |  | :x: | Mouse up event handler for a combo tile. Will be called with combo e.g. AKo
+**renderItem** | `Function` |  | :x: | A render function to use to render the contents of each tile. The function will be called with the following args: combo, styles, comboSubtext, showText, colorize where styles and comboSubtext are the result of the comboStyle and comboSubtext prop functions.
+**showText** | `Boolean` | `true` | :x: | Whether to show the text in the combo tyles
+
+## Support
+
+All Hold'em Poker Tools projects are open source and free to use or
+extend to your heart's extent. If you'd like to say thanks,
+feel free to show your support on Buy Me a Coffee:
+
+<a href="https://www.buymeacoffee.com/holdemtools" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="41" width="174"></a>
+
+## License
+
+MIT