Add linter

.gitignore

@@ -1,6 +1,7 @@
-node_modules
-.parcel-cache
-package-lock.json
 .DS_Store
+.husky/
+.parcel-cache
 build
 dist
+node_modules
+package-lock.json

.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "rules": {
+    "max-nesting-depth": 5,
+    "selector-class-pattern": "^[A-Z]{1}[a-z][a-zA-Z0-9]*(?:\\-[a-z][a-zA-Z0-9]*)?(?:\\-\\-[a-z][a-zA-Z0-9]*)?$"
+  }
+}

demo/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { createRoot } from 'react-dom/client'
 import Strumming from '../src/index.jsx'
 
@@ -11,28 +11,28 @@ const strummings = [
 ]
 
 const demo = (
-  <Fragment>
+  <>
     <section className='Demo'>
       <h1>Strumming Patterns (default)</h1>
-      <ul>{strummings.map(({name, pattern, shuffle}, index) => <li key={index}><Strumming name={name} pattern={pattern} shuffle={shuffle} /></li>)}</ul>
+      <ul>{strummings.map(({ name, pattern, shuffle }, index) => <li key={index}><Strumming name={name} pattern={pattern} shuffle={shuffle} /></li>)}</ul>
     </section>
     <section className='DemoCustom'>
       <h1>Strumming Patterns (custom)</h1>
-      <ul>{strummings.map(({name, pattern, shuffle}, index) => <li key={index}><Strumming name={name} pattern={pattern} shuffle={shuffle} /></li>)}</ul>
+      <ul>{strummings.map(({ name, pattern, shuffle }, index) => <li key={index}><Strumming name={name} pattern={pattern} shuffle={shuffle} /></li>)}</ul>
     </section>
     <section className='DemoInverse'>
       <h1>Strumming Patterns (custom)</h1>
-      <ul>{strummings.map(({name, pattern, shuffle}, index) => <li key={index}><Strumming name={name} pattern={pattern} shuffle={shuffle} /></li>)}</ul>
+      <ul>{strummings.map(({ name, pattern, shuffle }, index) => <li key={index}><Strumming name={name} pattern={pattern} shuffle={shuffle} /></li>)}</ul>
     </section>
     <section className='Demo'>
       <h1>Strumming Patterns (squared)</h1>
-      <ul>{strummings.map(({name, pattern}, index) => <li key={index}><Strumming name={name} pattern={pattern} isSquared /></li>)}</ul>
+      <ul>{strummings.map(({ name, pattern }, index) => <li key={index}><Strumming name={name} pattern={pattern} isSquared /></li>)}</ul>
     </section>
     <section className='Demo'>
       <h1>Strumming Patterns (line thick)</h1>
-      <ul>{strummings.map(({name, pattern}, index) => <li key={index}><Strumming name={name} pattern={pattern} isThick /></li>)}</ul>
+      <ul>{strummings.map(({ name, pattern }, index) => <li key={index}><Strumming name={name} pattern={pattern} isThick /></li>)}</ul>
     </section>
-  </Fragment>
+  </>
 )
 
 const container = document.getElementById('demo')

demo/index.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import '../src/index';
 
 $c-dark: #333;
@@ -6,7 +7,7 @@ $c-custom: #ff6347;
 
 .Strumming {
   --c-strumming: #{$c-dark};
-  --c-strumming-hover: #{darken($c-dark, 25)};
+  --c-strumming-hover: #{color.adjust($c-dark, $lightness: -25%)};
 }
 
 body {
@@ -29,7 +30,7 @@ h1 {
 
   .Strumming {
     --c-strumming: #{$c-custom};
-    --c-strumming-hover: #{darken($c-custom, 25)};
+    --c-strumming-hover: #{color.adjust($c-custom, $lightness: -25%)};
   }
 }
 
@@ -42,18 +43,16 @@ h1 {
 
   .Strumming {
     --c-strumming: #{$c-light};
-    --c-strumming-hover: #{darken($c-light, 25)};
+    --c-strumming-hover: #{color.adjust($c-light, $lightness: -25%)};
   }
 }
 
 ul {
-  & {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: 0 auto;
-    padding: 1em 0 0;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 1em 0 0;
 
   li {
     list-style: none;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-svg-strumming",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "author": "Rubén Martín Lozano <[email protected]>",
   "files": ["dist"],
   "license": "ISC",
@@ -19,18 +19,25 @@
     "clean": "rimraf dist",
     "dev": "code . && parcel demo/index.html --open --port=1226",
     "fenix": "rimraf package-lock.json && rimraf node_modules && npm i -s --prefer-online --no-fund --no-audit",
+    "lint": "stylelint '**/*.scss' --fix && standard --fix",
     "prebuild": "npm run clean",
-    "prepublishOnly": "npm run build"
+    "precommit": "npm run lint",
+    "prepublishOnly": "npm run build",
+    "prepare": "husky install"
   },
   "dependencies": {
     "classnames": "2.3.2"
   },
   "devDependencies": {
-    "@parcel/transformer-sass": "2.8.2",
-    "parcel": "2.8.2",
+    "@parcel/transformer-sass": "2.9.3",
+    "husky": "8.0.0",
+    "parcel": "2.9.3",
     "process": "0.11.10",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "standard": "17.1.0",
+    "stylelint-config-sass-guidelines": "10.0.0",
+    "stylelint": "15.9.0"
   },
   "peerDependencies": {
     "react": "0.14 || 15 || 16 || 17 || 18"

src/arrow.jsx

@@ -1,11 +1,11 @@
-import React, {Fragment} from 'react'
+import React from 'react'
 
 const Arrow = ({ xCenter, points, yStart, yEnd }) => {
   return (
-    <Fragment>
+    <>
       <line x1={xCenter} y1={yStart} x2={xCenter} y2={yEnd} />
       <polyline points={points} />
-    </Fragment>
+    </>
   )
 }
 

src/index.jsx

@@ -11,14 +11,14 @@ import { settings } from './settings'
 const { thinLine, thickLine } = settings
 
 const strummingComponents = {
-  'D': ({ index, width, xCenter }) => <Down width={width} key={index} xCenter={xCenter} />,
-  'd': ({ index, width, xCenter }) => <Down width={width} key={index} xCenter={xCenter} isSmall />,
-  'U': ({ index, width, xCenter }) => <Up width={width} key={index} xCenter={xCenter} />,
-  'u': ({ index, width, xCenter }) => <Up width={width} key={index} xCenter={xCenter} isSmall />,
-  'x': ({ index, xCenter }) => <Mute key={index} xCenter={xCenter} />,
+  D: ({ index, width, xCenter }) => <Down width={width} key={index} xCenter={xCenter} />,
+  d: ({ index, width, xCenter }) => <Down width={width} key={index} xCenter={xCenter} isSmall />,
+  U: ({ index, width, xCenter }) => <Up width={width} key={index} xCenter={xCenter} />,
+  u: ({ index, width, xCenter }) => <Up width={width} key={index} xCenter={xCenter} isSmall />,
+  x: ({ index, xCenter }) => <Mute key={index} xCenter={xCenter} />,
   '-': ({ index, xCenter }) => <Line key={index} xCenter={xCenter} />,
   '.': ({ index, xCenter, isSquared }) => <Dot key={index} xCenter={xCenter} isSquared={isSquared} />,
-  'p': ({ index, xCenter, isSquared }) => <Palm key={index} xCenter={xCenter} isSquared={isSquared} />
+  p: ({ index, xCenter, isSquared }) => <Palm key={index} xCenter={xCenter} isSquared={isSquared} />
 }
 
 const Strumming = ({ isSquared = false, isThick = false, name, pattern, shuffle = false }) => {
@@ -43,7 +43,7 @@ const Strumming = ({ isSquared = false, isThick = false, name, pattern, shuffle
         patternSanitized.charAt(index + 1).toLowerCase() === 'd'
     }
 
-    patternSanitized.split('').map((strummingKey, index) => {
+    patternSanitized.split('').forEach((strummingKey, index) => {
       const component = strummingComponents[strummingKey]
       let xCenter = (width * index) + (width / 2) - (lineThick / 2)
 

src/index.scss

@@ -4,20 +4,18 @@
   --w-thinline: 8;
   --w-thickline: 12;
 
-  & {
-    cursor: pointer;
-    display: block;
+  cursor: pointer;
+  display: block;
 
-    &:hover {
-      .StrummingDot {
-        fill: var(--c-strumming-hover);
-      }
+  &:hover {
+    .StrummingDot {
+      fill: var(--c-strumming-hover);
+    }
 
-      .StrummingPalm,
-      line,
-      polyline {
-        stroke: var(--c-strumming-hover);
-      }
+    .StrummingPalm,
+    line,
+    polyline {
+      stroke: var(--c-strumming-hover);
     }
   }
 

src/mute.jsx

@@ -1,10 +1,10 @@
-import React, {Fragment} from 'react'
+import React from 'react'
 
 const Mute = ({ xCenter }) => (
-  <Fragment>
+  <>
     <line x1={xCenter - 10} y1={40} x2={xCenter + 10} y2={60} />
     <line x1={xCenter - 10} y1={60} x2={xCenter + 10} y2={40} />
-  </Fragment>
+  </>
 )
 
 export default Mute