update tests and surface fretting type functionality to site

packages/react-guitar-fretter/src/__test__/fretter.test.ts

@@ -1,15 +1,65 @@
-import fretter from '../'
+import fretter, { toSemitones } from '../'
 
-const toSemitones = (text: string) => text.split('').map((c) => c === '1')
+describe('toSemitones()', () => {
+  it(`maps correctly`, () =>
+    // prettier-ignore
+    expect(
+    toSemitones('01010101010')
+  ).toEqual([false, true, false, true, false, true, false, true, false, true, false]))
+})
 
 describe('fretter()', () => {
   it(`frets C major`, () =>
     expect(
       fretter({ root: 0, semitones: toSemitones('00010010000') })[0]
     ).toEqual([0, 1, 0, 2, 3, -1]))
 
+  it(`frets C major barre`, () =>
+    expect(
+      fretter(
+        {
+          root: 0,
+          semitones: toSemitones('00010010000'),
+        },
+        { frettingType: 'barre' }
+      )[0]
+    ).toEqual([3, 5, 5, 5, 3, -1]))
+
+  it(`frets C major open`, () =>
+    expect(
+      fretter(
+        {
+          root: 0,
+          semitones: toSemitones('00010010000'),
+        },
+        { frettingType: 'open' }
+      )[0]
+    ).toEqual([0, 1, 0, 2, 3, -1]))
+
   it(`frets A minor`, () =>
     expect(
       fretter({ root: 9, semitones: toSemitones('00100010000') })[0]
     ).toEqual([0, 1, 2, 2, 0, -1]))
+
+  it(`frets A minor barre`, () =>
+    expect(
+      fretter(
+        {
+          root: 9,
+          semitones: toSemitones('00100010000'),
+        },
+        { frettingType: 'barre' }
+      )[0]
+    ).toEqual([5, 5, 5, 7, 7, 5]))
+
+  it(`frets A minor open`, () =>
+    expect(
+      fretter(
+        {
+          root: 9,
+          semitones: toSemitones('00100010000'),
+        },
+        { frettingType: 'open' }
+      )[0]
+    ).toEqual([0, 1, 2, 2, 0, -1]))
 })

packages/react-guitar-fretter/src/index.ts

@@ -37,14 +37,16 @@ import findDuplicates from './util/find-duplicates'
     }
  * ```
  * @param options
- * Optional configuration of `tuning`, `frets`, and `restrictChordTypeTo`.
+ * Optional configuration of `tuning`, `frets`, and `frettingType`.
+ * 
+ * `frettingType` accepts either `open` or `barre` as input
  */
 export default function fretter(
   chord: { root: number; semitones: boolean[] },
   options?: {
     tuning?: number[]
     frets?: number
-    restrictChordTypeTo?: 'open' | 'barre' | 'all'
+    frettingType?: string
   }
 ): number[][] {
   const { root, semitones } = chord
@@ -127,9 +129,9 @@ export default function fretter(
         (min(f2.filter((n) => n > 0)) ?? 0)
     )
 
-  if (options?.restrictChordTypeTo === 'open')
+  if (options?.frettingType?.toLowerCase() === 'open')
     return frettings.filter(isOpenChord)
-  if (options?.restrictChordTypeTo === 'barre')
+  if (options?.frettingType?.toLowerCase() === 'barre')
     return frettings.filter(isBarreChord)
   return frettings
 }

site/components/ChordSelector.tsx

@@ -64,6 +64,7 @@ function ChordSelectorModal(props: {
   tuning: number[]
   frets: number
   lefty: boolean
+  frettingType: string
   theme?: Theme
   instrument?: StringInstrument
   onChange: (chord: TChord, fretting: number[]) => void
@@ -73,6 +74,7 @@ function ChordSelectorModal(props: {
   const initialChord = props.chord
   const [root, setRoot] = useState(initialChord?.tonic || 'C')
   const [notes, setNotes] = useState(() => getNotes(initialChord))
+  const [frettingType, setFrettingType] = useState(props.frettingType)
   const pressed = 0
   const types = useMemo(
     () =>
@@ -87,8 +89,9 @@ function ChordSelectorModal(props: {
       fretter(getFretterChord(root, notes), {
         frets: props.frets,
         tuning: props.tuning,
+        frettingType: frettingType,
       }),
-    [props.tuning, props.frets, notes, root]
+    [props.tuning, props.frets, notes, root, frettingType]
   )
   const [frettingIndex, setFrettingIndex] = useState(0)
   const fretting = frettings[frettingIndex] ?? props.tuning.map(() => 0)
@@ -157,6 +160,23 @@ function ChordSelectorModal(props: {
             onChange={setRoot}
           />
         </Label>
+        <Label
+          name={
+            <div>
+              Fretting
+              <div className="mt-1">
+                <strong>{frettingType}</strong>
+              </div>
+            </div>
+          }
+          lowercase
+        >
+          <Select
+            value={frettingType}
+            values={['All', 'Open', 'Barre']}
+            onChange={setFrettingType}
+          />
+        </Label>
         <div className="inline-flex overflow-auto">
           {range(1, 12).map((i) => (
             <Label
@@ -297,6 +317,7 @@ export default function ChordSelector(props: {
   frets: number
   lefty: boolean
   theme?: Theme
+  frettingType: string
   instrument?: StringInstrument
   onChange: (strings: number[]) => void
   onRequestOpenChange: (open: boolean) => void

site/components/Demo.tsx

@@ -101,6 +101,7 @@ function Demo() {
             frets={isNaN(frets) ? 0 : frets}
             lefty={lefty}
             theme={theme}
+            frettingType={'all'}
             instrument={instrument}
             onRequestOpenChange={setChordSelectorOpen}
             onChange={setStrings}