refactor: re-organize constants

src/components/Key/Key.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
-import { midiToNote } from 'utils/midi';
-import type { KeyColor, CustomKeyComponent } from 'types';
+import { midiToNote } from 'lib/midi';
+import type { CustomKeyComponent, KeyColor } from 'types';
+import { DEFAULT_BLACK_KEY_HEIGHT, DEFAULT_WHITE_KEY_ASPECT_RATIO } from 'lib/constants';
 
 type KeyProps = {
   midiNumber: number;
@@ -38,18 +39,15 @@ const Key = React.memo((props: KeyProps) => {
   );
 });
 
-const DEFAULT_WHITE_KEY_ASPECT_RATIO = '24 / 150';
-const DEFAULT_BLACK_KEY_HEIGHT = '67.5%';
-const WHITE_KEY_COLUMN_SPAN = 12;
-const BLACK_KEY_COLUMN_SPAN = 8;
-
 function getKeyStyles(
   midiNumber: number,
   firstNoteMidiNumber: number,
   isFixedHeight: boolean,
   whiteKeyAspectRatio: React.CSSProperties['aspectRatio'] = DEFAULT_WHITE_KEY_ASPECT_RATIO,
   blackKeyHeight: React.CSSProperties['height'] = DEFAULT_BLACK_KEY_HEIGHT
 ): React.CSSProperties {
+  const WHITE_KEY_COLUMN_SPAN = 12;
+  const BLACK_KEY_COLUMN_SPAN = 8;
   const position = getKeyPosition(midiNumber, firstNoteMidiNumber);
   const { keyColor } = midiToNote(midiNumber);
   switch (keyColor) {
@@ -82,9 +80,9 @@ function getKeyComponent(components: KeyProps['components'], color: KeyColor) {
 // White keys span over 12 columns each, making the octave length 84 columns total.
 // Black keys span over 8 columns each, and are overlaid on top white keys.
 // Key positions (starting columns) of a single octave are calculated by hand to match a real piano keyboard as closely as possible.
-const KEY_POSITIONS = [1, 8, 13, 22, 25, 37, 44, 49, 57, 61, 70, 73];
-const OCTAVE_LENGTH_IN_COLUMNS = 84;
 function getAbsoluteKeyPosition(midiNumber: number) {
+  const KEY_POSITIONS = [1, 8, 13, 22, 25, 37, 44, 49, 57, 61, 70, 73];
+  const OCTAVE_LENGTH_IN_COLUMNS = 84;
   const { octave } = midiToNote(midiNumber);
   return octave * OCTAVE_LENGTH_IN_COLUMNS + KEY_POSITIONS[midiNumber % KEY_POSITIONS.length];
 }

src/components/Klavier.tsx

@@ -1,10 +1,11 @@
 import React, { useMemo, useRef } from 'react';
 import type { Keymap, CustomKeyComponent } from 'types';
 import { DEFAULT_KEYMAP } from 'keymap';
+import { DEFAULT_NOTE_RANGE } from 'lib/constants';
+import { range } from 'lib/range';
 import { Key } from 'components/Key';
 import { defaultKeyComponents } from 'components/Key/defaultKeyComponents';
-import { range } from 'utils/range';
-import { isMidiNumber } from 'utils/midi';
+import { isMidiNumber } from 'lib/midi';
 import { useKlavier } from 'state/useKlavier';
 import { useMouse } from 'interactivity/useMouse';
 import { useKeyboard } from 'interactivity/useKeyboard';
@@ -102,7 +103,7 @@ const Klavier = (props: KlavierProps) => {
     onNotePlay,
     onNoteStop,
     onChange,
-    noteRange = [21, 108],
+    noteRange = DEFAULT_NOTE_RANGE,
     interactive = true,
     keyMap = DEFAULT_KEYMAP,
     width,

src/interactivity/useKeyboard.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react';
 import type { Keymap } from 'types';
-import { noop } from 'utils/noop';
+import { noop } from 'lib/noop';
 
 type UseKeyboardProps = {
   enabled: boolean;

src/lib/constants.ts

@@ -0,0 +1,12 @@
+export const MIN_MIDI_NUMBER = 0;
+export const MAX_MIDI_NUMBER = 127;
+export const MIDI_NUMBER_C0 = 12;
+export const OCTAVE_LENGTH = 12;
+export const BLACK_KEY_MIDI_NUMBERS = [
+  1, 3, 6, 8, 10, 13, 15, 18, 20, 22, 25, 27, 30, 32, 34, 37, 39, 42, 44, 46, 49, 51, 54, 56, 58, 61, 63, 66, 68, 70,
+  73, 75, 78, 80, 82, 85, 87, 90, 92, 94, 97, 99, 102, 104, 106, 109, 111, 114, 116, 118, 121, 123, 126,
+];
+
+export const DEFAULT_NOTE_RANGE: [number, number] = [21, 108];
+export const DEFAULT_WHITE_KEY_ASPECT_RATIO = '24 / 150';
+export const DEFAULT_BLACK_KEY_HEIGHT = '67.5%';

src/utils/midi.ts → src/lib/midi.ts

@@ -1,13 +1,5 @@
 import type { Note } from 'types';
-
-export const MIN_MIDI_NUMBER = 0;
-export const MAX_MIDI_NUMBER = 127;
-export const MIDI_NUMBER_C0 = 12;
-export const OCTAVE_LENGTH = 12;
-export const BLACK_KEY_MIDI_NUMBERS = [
-  1, 3, 6, 8, 10, 13, 15, 18, 20, 22, 25, 27, 30, 32, 34, 37, 39, 42, 44, 46, 49, 51, 54, 56, 58, 61, 63, 66, 68, 70,
-  73, 75, 78, 80, 82, 85, 87, 90, 92, 94, 97, 99, 102, 104, 106, 109, 111, 114, 116, 118, 121, 123, 126,
-];
+import { BLACK_KEY_MIDI_NUMBERS, MAX_MIDI_NUMBER, MIDI_NUMBER_C0, MIN_MIDI_NUMBER, OCTAVE_LENGTH } from 'lib/constants';
 
 export function midiToNote(midiNumber: number): Note {
   if (!isMidiNumber(midiNumber)) {