refactor: move pure components to own folder

Author: Oskar Widmark

src/App.tsx

@@ -15,7 +15,7 @@ import {
 } from './types';
 import { SortingAlgorithms } from './sorting-algorithms';
 import { createArr, entries, shuffleArray, sleep, toHz } from './utils';
-import { SideDrawer } from './SideDrawer';
+import { SideDrawer } from './components/SideDrawer';
 import {
   RAINBOW_BACKGROUND_COLOR,
   INIT_STATE,
@@ -25,7 +25,7 @@ import { SortAppBar } from './AppBar';
 import { CanvasController } from './canvas-controller';
 import { ColorTab } from './ColorTab';
 import { Audiotrack, BarChart, Palette } from '@mui/icons-material';
-import { TabPanel } from './TabPanel';
+import { TabPanel } from './components/TabPanel';
 import { NonCustomOscillatorType } from 'tone/build/esm/source/oscillator/OscillatorInterface';
 import { SoundTab } from './SoundTab';
 import { SortTab } from './SortTab';
@@ -443,10 +443,7 @@ class App extends React.Component<Props> {
               onMouseLeave={this.canvasController.endDraw}
             />
           </div>
-          <SideDrawer
-            areSettingsOpen={this.state.areSettingsOpen}
-            toggleDisplaySettings={this.toggleDisplaySettings}
-          >
+          <SideDrawer isOpen={this.state.areSettingsOpen}>
             <Tabs
               variant="fullWidth"
               className="tabs"

src/ColorTab.tsx

@@ -1,7 +1,7 @@
 import { FormControl, Stack, Grid2 } from '@mui/material';
 import { ColorPreset, ColorSettings } from './types';
-import { TitledSelect } from './TitledSelect';
-import { ColorField } from './ColorField';
+import { TitledSelect } from './components/TitledSelect';
+import { ColorField } from './components/ColorField';
 
 export function ColorTab(props: {
   settings: ColorSettings;

src/ColumnSlider.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { AlgorithmOptions, SortName } from './types';
-import { TitledSlider } from './TitledSlider';
+import { TitledSlider } from './components/TitledSlider';
 
 const POWERS_OF_TWO = [8, 16, 32, 64, 128, 256, 512, 1024];
 const POWERS_OF_TWO_MARKS = POWERS_OF_TWO.map((value) => ({

src/SortTab.tsx

@@ -1,8 +1,8 @@
 import { Stack } from '@mui/material';
 import { ColumnSlider } from './ColumnSlider';
 import { Options } from './Options';
-import { TimeSlider } from './TimeSlider';
-import { TitledSelect } from './TitledSelect';
+import { TimeSlider } from './components/TimeSlider';
+import { TitledSelect } from './components/TitledSelect';
 import { SortName, ResetPreset, SortSettings, AlgorithmOptions } from './types';
 
 interface SortTabProps {

src/SoundTab.tsx

@@ -1,8 +1,8 @@
 import { Typography, Stack } from '@mui/material';
-import { TitledSelect } from './TitledSelect';
-import { TitledSlider } from './TitledSlider';
+import { TitledSelect } from './components/TitledSelect';
+import { TitledSlider } from './components/TitledSlider';
 import { NonCustomOscillatorType } from 'tone/build/esm/source/oscillator/OscillatorInterface';
-import { LabeledCheckbox } from './LabeledCheckbox';
+import { LabeledCheckbox } from './components/LabeledCheckbox';
 import { SoundSettings } from './types';
 
 const SOUND_TYPE_OPTIONS = [

src/ColorField.tsx src/components/ColorField.tsxsrc/ColorField.tsx renamed to src/components/ColorField.tsx

@@ -1,18 +1,17 @@
 import { Drawer } from '@mui/material';
 
 interface SideDrawerProps {
-  areSettingsOpen: boolean;
-  toggleDisplaySettings: () => void;
+  isOpen: boolean;
   children?: React.ReactNode;
 }
 
-export function SideDrawer({ areSettingsOpen, children }: SideDrawerProps) {
+export function SideDrawer({ isOpen, children }: SideDrawerProps) {
   return (
     <Drawer
       variant="persistent"
       anchor="right"
       className="drawer"
-      open={areSettingsOpen}
+      open={isOpen}
       PaperProps={{
         sx: { width: '250px' },
       }}

src/LabeledCheckbox.tsx src/components/LabeledCheckbox.tsxsrc/LabeledCheckbox.tsx renamed to src/components/LabeledCheckbox.tsx

@@ -1,4 +1,4 @@
-import { inverseTimeScale, timeScale } from './utils';
+import { inverseTimeScale, timeScale } from '../utils';
 import { TitledSlider } from './TitledSlider';
 
 export function TimeSlider(props: {