chore: reorganize components and fix confusing index name

musicxml-singer-with-oddvoices/src/_tests_/AboutSection.test.tsx → musicxml-singer-with-oddvoices/src/components/AboutSection/AboutSection.test.tsx

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
 
-import { AboutSection } from "../AboutSection";
+import { AboutSection } from ".";
 
 describe("AboutSection", () => {
     it("renders the AboutSection component", () => {

musicxml-singer-with-oddvoices/src/AboutSection.tsx → musicxml-singer-with-oddvoices/src/components/AboutSection/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Grid, Typography } from "@mui/material";
 
-import { PhonemeGuide } from "./PhonemeGuide";
+import { PhonemeGuide } from "../PhonemeGuide";
 
 export const AboutSection: React.FC = () => {
     return (

musicxml-singer-with-oddvoices/src/App.tsx → musicxml-singer-with-oddvoices/src/components/App/index.tsx

@@ -13,15 +13,15 @@ import {
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ErrorIcon from "@mui/icons-material/Error";
 
-import { AboutSection } from "./AboutSection";
-import { OpenSheetMusicDisplay } from "./OpenSheetMusicDisplay";
-import { MediaControls } from "./MediaControls";
-import { UploadButton } from "./UploadButton";
-import { LicenseFooter } from "./LicenseFooter";
-import { Part } from "./Part";
-import { createSplitOddVoiceJsonInputsFromMusicXml } from "./oddVoiceJSON";
+import { AboutSection } from "../AboutSection";
+import { OpenSheetMusicDisplay } from "../OpenSheetMusicDisplay";
+import { MediaControls } from "../MediaControls";
+import { UploadButton } from "../UploadButton";
+import { LicenseFooter } from "../LicenseFooter";
+import { Part } from "../Part";
+import { createSplitOddVoiceJsonInputsFromMusicXml } from "../../oddVoiceJSON";
 import { useGenerateAudio } from "./useGenerateAudio";
-import { Voice } from "./oddvoices/oddvoicesUtils";
+import { Voice } from "../../oddvoices/oddvoicesUtils";
 
 import "./App.css";
 
@@ -133,7 +133,7 @@ function App() {
                             {map(oddVoiceOutputs, (oddVoiceOutput, i) => (
                                 <Part
                                     key={i}
-                                    partIndex={i}
+                                    splitIndex={i}
                                     output={oddVoiceOutput.output}
                                     splitParams={oddVoiceOutput.splitParams}
                                     debugInfo={oddVoiceOutput?.unparsedPartEvents}

musicxml-singer-with-oddvoices/src/useGenerateAudio.tsx → musicxml-singer-with-oddvoices/src/components/App/useGenerateAudio.tsx

@@ -1,22 +1,22 @@
 import React from "react";
 
-import { useOddVoicesApp } from "./oddvoices";
-import { OddVoiceJSON } from "./oddVoiceJSON/oddVoiceHelpers";
-import { Voice } from "./oddvoices/oddvoicesUtils";
+import { useOddVoicesApp } from "../../oddvoices";
+import { OddVoiceJSON } from "../../oddVoiceJSON/oddVoiceHelpers";
+import { Voice } from "../../oddvoices/oddvoicesUtils";
 
 export const useGenerateAudio = () => {
     const { isLoadingApp, isLoadingVoice, voiceLoadingFailed, generateVoiceFromOddVoiceJson } = useOddVoicesApp();
 
     const [audioOutputs, setAudioOutputs] = React.useState<Uint8Array[]>([]);
     const generateAudioForPart = React.useCallback(
-        (oddVoiceJson: OddVoiceJSON, partIndex: number, voice: Voice = Voice.air) => {
+        (oddVoiceJson: OddVoiceJSON, splitIndex: number, voice: Voice = Voice.air) => {
             const outputAudio = generateVoiceFromOddVoiceJson.current?.(oddVoiceJson, voice);
             if (!outputAudio || outputAudio.length === 0) {
                 console.error("Failed to generate audio output.");
                 return;
             }
             setAudioOutputs((prev) => {
-                prev[partIndex] = outputAudio;
+                prev[splitIndex] = outputAudio;
                 return [...prev];
             });
         },

musicxml-singer-with-oddvoices/src/components/CopyIconButton/CopyIconButton.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
+
+import { CopyIconButton } from ".";
+
+describe("CopyIconButton", () => {
+    it("renders the CopyIconButton component", () => {
+        render(<CopyIconButton text="test" />);
+
+        // screen.debug();
+    });
+});

musicxml-singer-with-oddvoices/src/components/MediaControls/MediaControls.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
+
+import { MediaControls } from ".";
+
+describe("MediaControls", () => {
+    it("renders the MediaControls component", () => {
+        render(<MediaControls />);
+
+        // screen.debug();
+    });
+});

musicxml-singer-with-oddvoices/src/components/Part/Part.test.tsx

@@ -0,0 +1,31 @@
+import { render } from "@testing-library/react";
+import { describe, it, vi } from "vitest";
+
+import { Part } from ".";
+
+describe("Part", () => {
+    it("renders the Part component", () => {
+        render(
+            <Part
+                splitIndex={0}
+                output={{
+                    lyrics: "",
+                    events: [],
+                }}
+                splitParams={{
+                    partIdx: 0,
+                    partName: "Soprano",
+                    voice: 1,
+                    chordLevel: 1,
+                    largestChordLvl: 1,
+                    numVoices: 1,
+                }}
+                lyricsEvents={[]}
+                setOddVoiceOutputs={vi.fn()}
+                setCustomVoicePerPart={vi.fn()}
+            />
+        );
+
+        // screen.debug();
+    });
+});

musicxml-singer-with-oddvoices/src/components/Part/PartAudio.test.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
+import { PartAudio } from "./PartAudio";
+
+describe("PartAudio", () => {
+    it("renders the PartAudio component with no audio and no lyrics events", () => {
+        render(<PartAudio lyricsEvents={[]} />);
+
+        // screen.debug();
+    });
+});

musicxml-singer-with-oddvoices/src/Part/PartAudio.tsx → musicxml-singer-with-oddvoices/src/components/Part/PartAudio.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { forEach } from "lodash";
 
-import { base64EncArr } from "../oddvoices/oddvoicesUtils";
-import { MusicXmlLyricsEvent } from "../musicXmlParsing/types";
+import { base64EncArr } from "../../oddvoices/oddvoicesUtils";
+import { MusicXmlLyricsEvent } from "../../musicXmlParsing/types";
 
 export interface PartAudioProps {
     audioOutput?: Uint8Array;

musicxml-singer-with-oddvoices/src/components/Part/PartDownloads.test.tsx

@@ -0,0 +1,24 @@
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
+
+import { PartDownloads } from "./PartDownloads";
+
+describe("PartDownloads", () => {
+    it("renders the PartDownloads component", () => {
+        render(
+            <PartDownloads
+                output={{ events: [], lyrics: "" }}
+                splitParams={{
+                    partIdx: 0,
+                    partName: "Soprano",
+                    voice: 1,
+                    numVoices: 1,
+                    chordLevel: 1,
+                    largestChordLvl: 1,
+                }}
+            />
+        );
+
+        // screen.debug();
+    });
+});

musicxml-singer-with-oddvoices/src/Part/PartDownloads.tsx → musicxml-singer-with-oddvoices/src/components/Part/PartDownloads.tsx

@@ -3,8 +3,8 @@ import { Chip, Grid } from "@mui/material";
 import DataObjectIcon from "@mui/icons-material/DataObject";
 import GraphicEqIcon from "@mui/icons-material/GraphicEq";
 
-import { SplitParams } from "../oddVoiceJSON";
-import { OddVoiceJSON } from "../oddVoiceJSON/oddVoiceHelpers";
+import { SplitParams } from "../../oddVoiceJSON";
+import { OddVoiceJSON } from "../../oddVoiceJSON/oddVoiceHelpers";
 export interface PartDownloadsProps {
     output: OddVoiceJSON;
     splitParams: SplitParams;

musicxml-singer-with-oddvoices/src/components/Part/PartLyrics.test.tsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { describe, it, vi } from "vitest";
+
+import { PartLyrics } from "./PartLyrics";
+
+describe("PartLyrics", () => {
+    it("renders the PartLyrics component", () => {
+        render(
+            <PartLyrics
+                splitIndex={0}
+                output={{
+                    lyrics: "",
+                    events: [],
+                }}
+                setOddVoiceOutputs={vi.fn()}
+            />
+        );
+
+        // screen.debug();
+    });
+});

musicxml-singer-with-oddvoices/src/Part/PartLyrics.tsx → musicxml-singer-with-oddvoices/src/components/Part/PartLyrics.tsx

@@ -11,25 +11,25 @@ import {
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { cloneDeep } from "lodash";
 
-import { createSplitOddVoiceJsonInputsFromMusicXml } from "../oddVoiceJSON";
-import { OddVoiceJSON } from "../oddVoiceJSON/oddVoiceHelpers";
+import { createSplitOddVoiceJsonInputsFromMusicXml } from "../../oddVoiceJSON";
+import { OddVoiceJSON } from "../../oddVoiceJSON/oddVoiceHelpers";
 import { CopyIconButton } from "../CopyIconButton";
 
 export interface PartLyricsProps {
     output: OddVoiceJSON;
-    partIndex: number;
+    splitIndex: number;
     setOddVoiceOutputs: React.Dispatch<
         React.SetStateAction<ReturnType<typeof createSplitOddVoiceJsonInputsFromMusicXml>>
     >;
 }
 
-export const PartLyrics: React.FC<PartLyricsProps> = ({ output, partIndex, setOddVoiceOutputs }) => {
+export const PartLyrics: React.FC<PartLyricsProps> = ({ output, splitIndex, setOddVoiceOutputs }) => {
     const generatedLyrics = React.useRef<string | undefined>(output?.lyrics);
     React.useEffect(() => {
-        if (!generatedLyrics.current && output.lyrics) {
-            generatedLyrics.current = output.lyrics;
+        if (!generatedLyrics.current && output?.lyrics) {
+            generatedLyrics.current = output?.lyrics;
         }
-    }, [output.lyrics]);
+    }, [output?.lyrics]);
 
     const [isEditingLyrics, setIsEditingLyrics] = React.useState<boolean>(false);
     const [newDraftLyrics, setDraftLyrics] = React.useState<string | null>(null);
@@ -38,24 +38,24 @@ export const PartLyrics: React.FC<PartLyricsProps> = ({ output, partIndex, setOd
 
     const saveNewLyrics = React.useCallback(
         (newLyrics: string) => {
-            if (newLyrics && newLyrics !== output.lyrics) {
+            if (newLyrics && newLyrics !== output?.lyrics) {
                 setOddVoiceOutputs((prev) => {
                     const newOutputs = [...prev];
-                    newOutputs[partIndex] = cloneDeep(newOutputs[partIndex]);
-                    newOutputs[partIndex].output.lyrics = newLyrics;
+                    newOutputs[splitIndex] = cloneDeep(newOutputs[splitIndex]);
+                    newOutputs[splitIndex].output.lyrics = newLyrics;
                     return newOutputs;
                 });
             }
             setDraftLyrics(null);
             setIsEditingLyrics(false);
         },
-        [setOddVoiceOutputs, partIndex, output.lyrics]
+        [setOddVoiceOutputs, splitIndex, output?.lyrics]
     );
     return (
         <Accordion>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                 <Grid container direction="row" justifyContent="flex-start" alignItems="center" gap={1}>
-                    <CopyIconButton text={output.lyrics} />
+                    <CopyIconButton text={output?.lyrics} />
                     <Typography variant="subtitle2">Lyrics</Typography>
                 </Grid>
             </AccordionSummary>
@@ -75,7 +75,7 @@ export const PartLyrics: React.FC<PartLyricsProps> = ({ output, partIndex, setOd
                                     <Button
                                         variant="contained"
                                         onClick={() => saveNewLyrics(draftLyrics)}
-                                        disabled={draftLyrics === output.lyrics}
+                                        disabled={draftLyrics === output?.lyrics}
                                     >
                                         Save
                                     </Button>
@@ -85,7 +85,7 @@ export const PartLyrics: React.FC<PartLyricsProps> = ({ output, partIndex, setOd
                                     <Button
                                         variant="contained"
                                         onClick={() => {
-                                            setDraftLyrics(output.lyrics);
+                                            setDraftLyrics(output?.lyrics);
                                         }}
                                     >
                                         Reset

musicxml-singer-with-oddvoices/src/components/Part/VoiceSelect.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import { describe, it, vi } from "vitest";
+import { VoiceSelect } from "./VoiceSelect";
+import { Voice } from "../../oddvoices/oddvoicesUtils";
+
+describe("VoiceSelect", () => {
+    it("renders the VoiceSelect component", () => {
+        render(<VoiceSelect splitIndex={0} setCustomVoicePerPart={vi.fn()} customVoiceForPart={Voice.air} />);
+
+        // screen.debug();
+    });
+});

musicxml-singer-with-oddvoices/src/Part/VoiceSelect.tsx → musicxml-singer-with-oddvoices/src/components/Part/VoiceSelect.tsx

@@ -2,22 +2,22 @@ import React from "react";
 import { MenuItem, Select } from "@mui/material";
 import { map } from "lodash";
 
-import { Voice, allVoices } from "../oddvoices/oddvoicesUtils";
+import { Voice, allVoices } from "../../oddvoices/oddvoicesUtils";
 
 export interface VoiceSelectProps {
-    partIndex: number;
+    splitIndex: number;
     customVoiceForPart?: Voice;
     setCustomVoicePerPart: React.Dispatch<React.SetStateAction<Array<Voice | undefined>>>;
 }
 
-export const VoiceSelect: React.FC<VoiceSelectProps> = ({ customVoiceForPart, partIndex, setCustomVoicePerPart }) => {
+export const VoiceSelect: React.FC<VoiceSelectProps> = ({ customVoiceForPart, splitIndex, setCustomVoicePerPart }) => {
     const setCustomVoiceForPart = React.useCallback(
         (voice: Voice) =>
             setCustomVoicePerPart((prev) => {
-                prev[partIndex] = voice;
+                prev[splitIndex] = voice;
                 return [...prev];
             }),
-        [setCustomVoicePerPart, partIndex]
+        [setCustomVoicePerPart, splitIndex]
     );
 
     return (