chore(update): Update react version

Update react version, remove tabs, some small cleanup.
geeves · Sep 8, 2021 · 13fc0e3 · 13fc0e3
1 parent bcb0e9f
commit 13fc0e3
Show file tree

Hide file tree

Showing 9 changed files with 2,684 additions and 7,376 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,5 +1,3 @@
-# EditorConfig is awesome: http://EditorConfig.org
-
 root = true
 
 # Unix-style newlines with a newline ending every file

diff --git a/README.md b/README.md
@@ -1,17 +1,20 @@
 # Camelot Wheel
 
+A quick interactive Camelot Wheel for DJs into key matching through keys and key changes.
+
+https://www.soulglo.com/camelot-wheel
 
 ### Build Development
 
     $ yarn dev
-    
-    
+
+
 ### Build Production
 
-    $ yarn prod    
-    
-    
-### Lint
+    $ yarn prod
+
+
+[comment]: <> (### Lint)
 
-    $ yarn lint
+[comment]: <> (    $ yarn lint)
 
diff --git a/package.json b/package.json
@@ -24,11 +24,10 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "classnames": "^2.2.6",
-    "core-js": "3",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
+    "core-js": "3.17.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-inlinesvg": "0.8.4",
-    "react-scripts": "3.0.0",
     "react-svg-map": "^2.0.0",
     "react-swipeable-views": "^0.13.1"
   },
@@ -40,16 +39,6 @@
     "@babel/plugin-transform-regenerator": "7.4.3",
     "@babel/preset-env": "7.4.3",
     "@babel/preset-react": "7.0.0",
-    "@storybook/addon-actions": "5.0.10",
-    "@storybook/addon-centered": "5.0.10",
-    "@storybook/addon-info": "5.0.10",
-    "@storybook/addon-knobs": "5.0.10",
-    "@storybook/addon-links": "5.0.10",
-    "@storybook/addon-notes": "5.0.10",
-    "@storybook/addon-options": "5.0.10",
-    "@storybook/addons": "5.0.10",
-    "@storybook/cli": "5.0.10",
-    "@storybook/react": "5.0.10",
     "@svgr/cli": "^4.2.0",
     "@svgr/core": "^4.2.0",
     "@svgr/webpack": "^4.2.0",

diff --git a/src/components/CamelotDescription.js b/src/components/CamelotDescription.js
@@ -21,27 +21,27 @@ const TabContainer = ({children, dir}) => (
 // };
 
 const styles = theme => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-    width: 325,
+  root : {
+    backgroundColor : theme.palette.background.paper,
+    width : 325,
   },
 });
 
 class CamelotDescription extends React.Component {
   state = {
-    value: 0,
+    value : 0
   };
 
   handleChange = (event, value) => {
-    this.setState({ value });
+    this.setState({value});
   };
 
   handleChangeIndex = index => {
-    this.setState({ value: index });
+    this.setState({value : index});
   };
 
   render() {
-    const { classes, theme } = this.props;
+    const {classes, theme} = this.props;
 
     return (
       <div className={classes.root}>
@@ -53,8 +53,8 @@ class CamelotDescription extends React.Component {
             textColor="primary"
             variant="fullWidth"
           >
-            <Tab label="Item One"/>
-            <Tab label="Item Two"/>
+            <Tab label="About"/>
+            {/*<Tab label="Item Two"/>*/}
           </Tabs>
         </AppBar>
         <SwipeableViews
@@ -81,7 +81,7 @@ class CamelotDescription extends React.Component {
               ears.
             </p>
           </TabContainer>
-          <TabContainer dir={theme.direction}>Item Two</TabContainer>
+          {/*<TabContainer dir={theme.direction}>Item Two</TabContainer>*/}
         </SwipeableViews>
       </div>
     );

diff --git a/src/components/CamelotWheel.js b/src/components/CamelotWheel.js
@@ -14,7 +14,7 @@ import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import KeyState from "./camelot-states";
 import KeyMap from "./camelot-data";
-import CamelotDescription from "./CamelotDescription";
+// import CamelotDescription from "./CamelotDescription";
 
 const styles = (theme) => ({
   root : {
@@ -74,7 +74,7 @@ class CamelotWheel extends React.Component {
     this.setState({
       [key] : value,
     }, () => {
-      console.log(this.state.currentKey);
+      // console.log(this.state.currentKey);
       this.displayKeys(this.state.currentKey);
     });
   };
@@ -86,7 +86,7 @@ class CamelotWheel extends React.Component {
         keyId.replace("__", ""), /* hack until data is fixed */
         ...KeyMap[keyId][this.state.mode]
       ];
-      console.log(keys);
+      // console.log(keys);
       keys.forEach((m) => {
         newKeys[`__${m}`] = true;
       });
@@ -121,7 +121,7 @@ class CamelotWheel extends React.Component {
         mode={mode}
         xs={12}
         container>
-        <Grid xs={7} item>
+        <Grid xs={12} item>
           <Grid container justify="center" spacing={Number(spacing)}>
             <Grid xs={12} item>
               <Paper className={classes.control}>
@@ -1082,14 +1082,14 @@ class CamelotWheel extends React.Component {
             </Paper>
           </Grid>
         </Grid>
-        <Grid
-          xs={5}
-          spacing={16}
-          item>
-          {/*<Paper className={classes.control}>*/}
-            <CamelotDescription/>
-          {/*</Paper>*/}
-        </Grid>
+        {/*<Grid*/}
+        {/*  xs={5}*/}
+        {/*  spacing={16}*/}
+        {/*  item>*/}
+        {/*  /!*<Paper className={classes.control}>*!/*/}
+        {/*    <CamelotDescription/>*/}
+        {/*  /!*</Paper>*!/*/}
+        {/*</Grid>*/}
       </Grid>
     );
   }

diff --git a/src/components/camelot-data.js b/src/components/camelot-data.js
@@ -36,7 +36,7 @@ export default {
     minor : "1A",
     prev : "12A",
     next : "2A",
-    diagonal : ["12B"],
+    diagonal : ["12B", "2B"],
     semitone : [
       "11A",
       "3A"
@@ -69,7 +69,7 @@ export default {
     minor : "1A",
     prev : "12B",
     next : "2B",
-    diagonal : ["2A"],
+    diagonal : ["2A", "12A"],
     semitone : [
       "11B",
       "3B"
@@ -102,7 +102,7 @@ export default {
     minor : "2A",
     prev : "1A",
     next : "3A",
-    diagonal : ["1B"],
+    diagonal : ["1B", "3B"],
     semitone : [
       "12A",
       "4A"
@@ -135,7 +135,7 @@ export default {
     minor : "2A",
     prev : "1B",
     next : "3B",
-    diagonal : ["3A"],
+    diagonal : ["3A", "1A"],
     semitone : [
       "12B",
       "4B"
@@ -168,7 +168,7 @@ export default {
     minor : "3A",
     prev : "2A",
     next : "4A",
-    diagonal : ["2B"],
+    diagonal : ["2B", "4B"],
     semitone : [
       "1A",
       "5A"
@@ -201,7 +201,7 @@ export default {
     minor : "3A",
     prev : "2B",
     next : "4B",
-    diagonal : ["4A"],
+    diagonal : ["4A", "2A"],
     semitone : [
       "1B",
       "5B"
@@ -234,7 +234,7 @@ export default {
     minor : "4A",
     prev : "3A",
     next : "5A",
-    diagonal : ["3B"],
+    diagonal : ["3B", "5B"],
     semitone : [
       "2A",
       "6A"
@@ -267,7 +267,7 @@ export default {
     minor : "4A",
     prev : "3B",
     next : "5B",
-    diagonal : ["5A"],
+    diagonal : ["5A", "3A"],
     semitone : [
       "2B",
       "6B"
@@ -300,7 +300,7 @@ export default {
     minor : "5A",
     prev : "4A",
     next : "6A",
-    diagonal : ["4B"],
+    diagonal : ["4B", "6B"],
     semitone : [
       "3A",
       "7A"
@@ -333,7 +333,7 @@ export default {
     minor : "5A",
     prev : "4B",
     next : "6B",
-    diagonal : ["6A"],
+    diagonal : ["6A", "4A"],
     semitone : [
       "3B",
       "7B"
@@ -366,7 +366,7 @@ export default {
     minor : "6A",
     prev : "5A",
     next : "7A",
-    diagonal : ["5B"],
+    diagonal : ["5B", "7B"],
     semitone : [
       "4A",
       "8A"
@@ -399,7 +399,7 @@ export default {
     minor : "6A",
     prev : "5B",
     next : "7B",
-    diagonal : ["7A"],
+    diagonal : ["7A", "5A"],
     semitone : [
       "4B",
       "8B"
@@ -432,7 +432,7 @@ export default {
     minor : "7A",
     prev : "6A",
     next : "8A",
-    diagonal : ["6B"],
+    diagonal : ["6B", "8B"],
     semitone : [
       "5A",
       "9A"
@@ -465,7 +465,7 @@ export default {
     minor : "7A",
     prev : "6B",
     next : "8B",
-    diagonal : ["8A"],
+    diagonal : ["8A", "6A"],
     semitone : [
       "5B",
       "9B"
@@ -498,7 +498,7 @@ export default {
     minor : "8A",
     prev : "7A",
     next : "9A",
-    diagonal : ["7B"],
+    diagonal : ["7B", "9B"],
     semitone : [
       "6A",
       "10A"
@@ -531,7 +531,7 @@ export default {
     minor : "8A",
     prev : "7B",
     next : "9B",
-    diagonal : ["9A"],
+    diagonal : ["9A", "7A"],
     semitone : [
       "6B",
       "10B"
@@ -564,7 +564,7 @@ export default {
     minor : "9A",
     prev : "8A",
     next : "10A",
-    diagonal : ["8B"],
+    diagonal : ["8B", "10B"],
     semitone : [
       "7A",
       "11A"
@@ -597,7 +597,7 @@ export default {
     minor : "9A",
     prev : "8B",
     next : "10B",
-    diagonal : ["10A"],
+    diagonal : ["10A", "8A"],
     semitone : [
       "7B",
       "11B"
@@ -630,7 +630,7 @@ export default {
     minor : "10A",
     prev : "9A",
     next : "11A",
-    diagonal : ["9B"],
+    diagonal : ["9B", "11B"],
     semitone : [
       "8A",
       "12A"
@@ -663,7 +663,7 @@ export default {
     minor : "10A",
     prev : "9B",
     next : "11B",
-    diagonal : ["11A"],
+    diagonal : ["11A", "9A"],
     semitone : [
       "8B",
       "12B"
@@ -696,7 +696,7 @@ export default {
     minor : "11A",
     prev : "10A",
     next : "12A",
-    diagonal : ["10B"],
+    diagonal : ["10B", "12B"],
     semitone : [
       "9A",
       "1A"
@@ -729,7 +729,7 @@ export default {
     minor : "11A",
     prev : "10B",
     next : "12B",
-    diagonal : ["12A"],
+    diagonal : ["12A", "10A"],
     semitone : [
       "9B",
       "1B"
@@ -762,7 +762,7 @@ export default {
     minor : "12A",
     prev : "11A",
     next : "1A",
-    diagonal : ["11B"],
+    diagonal : ["11B", "1B"],
     semitone : [
       "10A",
       "2A"
@@ -795,7 +795,7 @@ export default {
     minor : "12A",
     prev : "11B",
     next : "1B",
-    diagonal : ["1A"],
+    diagonal : ["1A", "11A"],
     semitone : [
       "10B",
       "2B"