cleanup

apps/react/src/App.tsx

@@ -4,7 +4,8 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { StudyScreen } from './components';
 import { MidiToRedux } from './components/MidiToRedux';
 import { AuthenticatedRoute } from './components/navigation/Routers';
-import { CoursesScreen, NotationInputScreen } from './screens';
+import { CoursesScreen } from './screens/CoursesScreen';
+import { NotationInputScreen } from './screens/NotationInputScreen';
 import { AllDeckCardsScreen } from './screens/AllDeckCardsScreen';
 import { DecksScreen } from './screens/DecksScreen';
 import { DeckPreviewScreen } from './screens/DeckPreviewScreen';

apps/react/src/components/Dropdown.tsx

@@ -1,62 +1,25 @@
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
+import { Menu, MenuButton } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import clsx from 'clsx';
-import React, { Fragment } from 'react';
-
-interface DropdownItem {
-	label: string;
-	onClick: () => void;
-}
+import React from 'react';
+import { DropdownMenu, DropdownItem } from './DropdownMenu';
 
 interface DropdownProps {
 	label: React.ReactNode;
 	items: DropdownItem[];
 	onButtonClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void;
 }
 
-const Dropdown: React.FC<DropdownProps> = ({ label, items, onButtonClick }) => {
-	return (
-		<Menu as="div" className="relative inline-block text-left">
-			<div>
-				<MenuButton
-					onClick={onButtonClick}
-					className="inline-flex w-full justify-center gap-x-1.5 rounded-lg bg-lm-surface dark:bg-dm-elevated px-3 py-2 text-sm font-medium text-fg border border-default hover:bg-gray-100 dark:hover:bg-white/10"
-				>
-					{label}
-					<ChevronDownIcon className="-mr-1 h-5 w-5 text-muted" aria-hidden="true" />
-				</MenuButton>
-			</div>
-			<Transition
-				as={Fragment}
-				enter="transition ease-out duration-100"
-				enterFrom="transform opacity-0 scale-95"
-				enterTo="transform opacity-100 scale-100"
-				leave="transition ease-in duration-75"
-				leaveFrom="transform opacity-100 scale-100"
-				leaveTo="transform opacity-0 scale-95"
-			>
-				<MenuItems className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-lg bg-surface border border-default shadow-lg focus:outline-none">
-					<div className="py-1">
-						{items.map((item, index) => (
-							<MenuItem key={index}>
-								{({ focus }) => (
-									<button
-										onClick={item.onClick}
-										className={clsx(
-											focus ? 'bg-gray-100 dark:bg-dm-elevated' : '',
-											'block w-full px-4 py-2 text-left text-sm text-fg',
-										)}
-									>
-										{item.label}
-									</button>
-								)}
-							</MenuItem>
-						))}
-					</div>
-				</MenuItems>
-			</Transition>
-		</Menu>
-	);
-};
+const Dropdown: React.FC<DropdownProps> = ({ label, items, onButtonClick }) => (
+	<Menu as="div" className="relative inline-block text-left">
+		<MenuButton
+			onClick={onButtonClick}
+			className="inline-flex w-full justify-center gap-x-1.5 rounded-lg bg-lm-surface dark:bg-dm-elevated px-3 py-2 text-sm font-medium text-fg border border-default hover:bg-gray-100 dark:hover:bg-white/10"
+		>
+			{label}
+			<ChevronDownIcon className="-mr-1 h-5 w-5 text-muted" aria-hidden="true" />
+		</MenuButton>
+		<DropdownMenu items={items} />
+	</Menu>
+);
 
 export default Dropdown;

apps/react/src/components/index.ts

@@ -22,4 +22,3 @@ export * from './CardOptionsMenu';
 export * from './ConsoleErrorsButton';
 export * from './TranspositionSelector';
 export * from './notation';
-export * from './DebugValidator';

apps/react/src/components/navigation/Routers.tsx

@@ -17,27 +17,3 @@ export const AuthenticatedRoute: React.FC<RouteProps> = ({ screen }) => {
 		return <Navigate to="/auth/login" />;
 	}
 };
-
-export const UnauthenticatedRoute: React.FC<RouteProps> = ({ screen }) => {
-	const isAuthenticated = useAppSelector(authSelector);
-
-	if (isAuthenticated === 'Authenticated') {
-		return <Navigate to="/home" />;
-	} else if (isAuthenticated === 'PartiallyAuthenticated') {
-		return <Navigate to="/auth/login" />;
-	} else {
-		return screen;
-	}
-};
-
-export const PartiallyAuthenticatedRoute: React.FC<RouteProps> = ({ screen }) => {
-	const isAuthenticated = useAppSelector(authSelector);
-
-	if (isAuthenticated === 'Authenticated') {
-		return <Navigate to="/home" />;
-	} else if (isAuthenticated === 'PartiallyAuthenticated') {
-		return screen;
-	} else {
-		return <Navigate to="/" />;
-	}
-};

apps/react/src/components/ui/Button.tsx

@@ -1,54 +1,32 @@
 import React from 'react';
 import clsx from 'clsx';
 import { Spinner } from '../feedback/Spinner';
+import {
+	ButtonVariant,
+	buttonBaseClasses,
+	variantEnabledStyles,
+	variantDisabledStyles,
+} from './buttonStyles';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger';
+export type { ButtonVariant };
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 	loading?: boolean;
 	variant?: ButtonVariant;
 };
 
-const variantStyles: Record<ButtonVariant, { enabled: string; disabled: string }> = {
-	primary: {
-		enabled:
-			'bg-accent text-white hover:bg-accent-hover dark:bg-[#e8e8ea] dark:text-[#1a1a1a] dark:hover:bg-[#d4d4d6] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
-		disabled:
-			'bg-gray-300 text-gray-500 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500',
-	},
-	secondary: {
-		enabled:
-			'bg-gray-100 text-lm-fg hover:bg-gray-200 dark:bg-dm-elevated dark:text-dm-fg dark:hover:bg-white/15',
-		disabled:
-			'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-dm-surface dark:text-gray-500',
-	},
-	outline: {
-		enabled:
-			'bg-transparent text-lm-muted hover:bg-gray-100 dark:text-dm-muted dark:hover:bg-white/5',
-		disabled: 'bg-transparent text-gray-300 cursor-not-allowed dark:text-gray-600',
-	},
-	danger: {
-		enabled:
-			'bg-red-600 text-white hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600',
-		disabled: 'bg-red-300 text-red-100 cursor-not-allowed',
-	},
-};
-
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	(
 		{ className = '', children, loading = false, disabled, variant = 'primary', ...props },
 		ref,
 	) => {
 		const isDisabled = loading || disabled;
-		const baseClasses =
-			'inline-flex justify-center items-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-150';
-		const styles = variantStyles[variant];
 		return (
 			<button
 				ref={ref}
 				className={clsx(
-					baseClasses,
-					isDisabled ? styles.disabled : styles.enabled,
+					buttonBaseClasses,
+					isDisabled ? variantDisabledStyles[variant] : variantEnabledStyles[variant],
 					className,
 				)}
 				disabled={isDisabled}