RavenHursT · kevin6767 · Dec 14, 2020 · Dec 15, 2020 · Dec 15, 2020 · Dec 15, 2020
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+	"presets": ["react", "env", "stage-0"]
+}
diff --git a/.gitignore b/.gitignore
@@ -7,5 +7,5 @@
 npm-debug.log*
 .idea/
 yarn-error.log
-package-lock.json
 *.tgz
+.eslintcache
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,7 @@
+src
+demo
+.babelrc
+.gitignore
+.git
+.travis.yml
+webpack.config.js
diff --git a/demo/src/app.js b/demo/src/app.js
@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import Selector from './selector.util'
+import Rater from '../../src/index'
+
+const App = () => {
+	const [iconCount, seticonCount] = useState(5)
+	const [value] = useState(100)
+	return (
+		<div {...{ className: 'app' }}>
+			<Selector
+				{...{
+					seticonCount,
+					value,
+				}}
+			/>
+			<h2>Value : {`${value}`}</h2>
+			<h2>iconCount: {`${iconCount}`}</h2>
+			<Rater
+				{...{
+					iconCount,
+					value,
+				}}
+			/>
+		</div>
+	)
+}
+
+export default App
diff --git a/demo/src/index.html b/demo/src/index.html
@@ -1,14 +1,23 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title>react-flex-rating Demo</title>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    </head>
-    <body>
-        <div id="demo"></div>
-    </body>
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, shrink-to-fit=no"
+		/>
+		<meta http-equiv="x-ua-compatible" content="ie=edge" />
+		<title>react-flex-rating Demo</title>
+		<link
+			rel="stylesheet"
+			href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
+		/>
+		<link
+			rel="stylesheet"
+			href="https://fonts.googleapis.com/icon?family=Material+Icons"
+		/>
+	</head>
+	<body>
+		<div id="demo"></div>
+	</body>
 </html>
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -1,161 +1,12 @@
 import React from 'react'
 import { render } from 'react-dom'
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
-import Icon from '@material-ui/core/Icon'
-import InputLabel from '@material-ui/core/InputLabel'
-import FormControl from '@material-ui/core/FormControl'
-import Rating from '../../src/index'
-import './styles/index.scss'
+import App from './app'
 
-const styles = {
-  fontFamily: 'sans-serif',
-  textAlign: 'center',
-}
+if (module.hot) module.hot.accept()
 
-const starCounts = [3, 4, 5, 6, 10, 20]
-const maxValues = [10, 100, 1000, 10000]
-
-class App extends React.Component {
-  static initialState = {
-    rating: 4,
-    starCount: 5,
-    maxValue: 10,
-    allowHalfs: true,
-    disabled: false
-  }
-  constructor(props) {
-    super(props)
-    this.state = { ...App.initialState }
-  }
-
-  render() {
-    const {
-      rating,
-      starCount,
-      maxValue,
-      allowHalfs,
-      disabled
-    } = this.state
-    return <div style={styles}>
-      <h2>Start editing to see some magic happen {'\u2728'}</h2>
-      <form className="selects" autoComplete="off">
-        <FormControl>
-          <InputLabel shrink htmlFor="star-count">
-            Star Count
-          </InputLabel>
-          <Select {...{
-            value: starCount,
-            name: `star-count`,
-            onChange: ({target: {value: starCount}}) => this.setState({ starCount })
-          }} >
-            {
-              starCounts.map((value, key) => <MenuItem
-                {...{
-                  key,
-                  value
-                }} >{value}</MenuItem>)
-            }
-          </Select>
-        </FormControl>
-          &nbsp;&nbsp;
-        <FormControl>
-          <InputLabel shrink htmlFor="max-value">
-            Maximum Value
-          </InputLabel>
-          <Select
-            {...{
-              value: maxValue,
-              name: `max-value`,
-              onChange: ({target: {value: maxValue}}) => this.setState({ maxValue })
-            }} >
-            {
-              maxValues.map((value, key) => <MenuItem
-                {...{
-                  key,
-                  value
-                }} >{value}</MenuItem>)
-            }
-          </Select>
-        </FormControl>
-          &nbsp;&nbsp;
-        <FormControl>
-          <InputLabel shrink htmlFor="allow-halves">
-            Allow Halves
-          </InputLabel>
-          <Select
-            {...{
-              value: allowHalfs ? 1 : 0,
-              name: `allow-halves`,
-              onChange: ({target: {value: allowHalfs}}) => this.setState({
-                allowHalfs: allowHalfs === 1
-              })
-            }} >
-            <MenuItem
-              {...{
-                value: 1
-              }} >True</MenuItem>
-            <MenuItem
-              {...{
-                value: 0
-              }} >False</MenuItem>
-          </Select>
-        </FormControl>
-          &nbsp;&nbsp;
-        <FormControl>
-          <InputLabel shrink htmlFor="disabled">
-            Disabled
-          </InputLabel>
-          <Select
-            {...{
-              value: disabled ? 1: 0,
-              name: `disabled`,
-              onChange: ({target: {value: disabled}}) => this.setState({
-                disabled: disabled === 1
-              })
-            }} >
-            <MenuItem
-              {...{
-                value: 1
-              }}>True</MenuItem>
-            <MenuItem
-              {...{
-                value: 0
-              }} >False</MenuItem>
-          </Select>
-        </FormControl>
-      </form>
-      <h2>Plays Nice w/ Material-Ui Icons!</h2>
-      <Rating {...{
-        className: `custom-class`,
-        value: rating,
-        allowHalfs,
-        maxValue,
-        disabled,
-        iconCount: starCount,
-        activeIcon: <Icon
-          className="material-icons font-size-2-5" >star</Icon>,
-        inactiveIcon: <Icon
-          className="material-icons font-size-2-5" >star_border</Icon>,
-        onSelect: rating => this.setState({ rating })
-      }} />
-      <div>
-        <label>Rating Value:</label><span>{rating}</span>
-      </div>
-      <h2>HTML-Entity Icons</h2>
-      <Rating {...{
-        className: `html-entities-rating`,
-        value: rating,
-        allowHalfs,
-        maxValue,
-        disabled,
-        iconCount: starCount,
-        activeIcon: <span>&#9733;</span>,
-        inactiveIcon: <span>&#9734;</span>,
-        onSelect: rating => this.setState({ rating })
-      }} />
-    </div>
-  }
-}
-
-render(<App />, document.getElementById('demo'))
+render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById('demo')
+)
diff --git a/demo/src/selector.util.js b/demo/src/selector.util.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const Selector = ({ setIconValue, value }) => {
+	return (
+		<div>
+			<h1> Select Amount of Icons </h1>
+			<select
+				onChange={(e) => {
+					setIconValue(Number(e.target.value))
+				}}
+			>
+				{Array.from(new Array(value), (value, index) => index + 1).map(
+					(value) => (
+						<option key={value} value={value}>
+							{value}
+						</option>
+					)
+				)}
+			</select>
+		</div>
+	)
+}
+
+export default Selector
diff --git a/demo/src/styles/index.scss b/demo/src/styles/index.scss
diff --git a/nwb.config.js b/nwb.config.js