refactor: move components, rename folders (#1026)

* refactor: move components, rename folders

* relative imports > alias, remove unused css

* replace same folder imports by aliases

lib/platform-bible-react/src/components/advanced-components/book-chapter-control/book-chapter-control.component.tsx

@@ -1,3 +1,18 @@
+import BookChapterInput from '@/components/advanced-components/book-chapter-control/book-chapter-input.component';
+import BookMenuItem, {
+  BookType,
+} from '@/components/advanced-components/book-chapter-control/book-menu-item.component';
+import ChapterSelect from '@/components/advanced-components/book-chapter-control/chapter-select.component';
+import GoToMenuItem from '@/components/advanced-components/book-chapter-control/go-to-menu-item.component';
+import {
+  DropdownMenu as ShadDropdownMenu,
+  DropdownMenuContent as ShadDropdownMenuContent,
+  DropdownMenuLabel as ShadDropdownMenuLabel,
+  DropdownMenuSeparator as ShadDropdownMenuSeparator,
+  DropdownMenuTrigger as ShadDropdownMenuTrigger,
+} from '@/components/shadcn-ui/dropdown-menu';
+import { Canon } from '@sillsdev/scripture';
+import { ScriptureReference, getChaptersForBook } from 'platform-bible-utils';
 import {
   KeyboardEvent as ReactKeyboardEvent,
   useCallback,
@@ -6,21 +21,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Canon } from '@sillsdev/scripture';
-import { ScriptureReference, getChaptersForBook } from 'platform-bible-utils';
-import {
-  DropdownMenuTrigger as ShadDropdownMenuTrigger,
-  DropdownMenu as ShadDropdownMenu,
-  DropdownMenuContent as ShadDropdownMenuContent,
-  DropdownMenuLabel as ShadDropdownMenuLabel,
-  DropdownMenuSeparator as ShadDropdownMenuSeparator,
-} from '@/components/shadcn-ui/dropdown-menu';
-import BookChapterInput from '@/components/advanced-components/book-chapter-control/book-chapter-input.component';
-import ChapterSelect from '@/components/advanced-components/book-chapter-control/chapter-select.component';
-import BookMenuItem, {
-  BookType,
-} from '@/components/advanced-components/book-chapter-control/book-menu-item.component';
-import GoToMenuItem from './go-to-menu-item.component';
 
 type BookTypeLabels = {
   [bookType in BookType]: string;

lib/platform-bible-react/src/components/advanced-components/data-table/data-table.component.tsx

@@ -1,21 +1,24 @@
 import { useState } from 'react';
 
 import {
-  ColumnDef as TSColumnDef,
   ColumnFiltersState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
+  ColumnDef as TSColumnDef,
   Row as TSRow,
   SortDirection as TSSortDirection,
-  SortingState,
   Table as TSTable,
   useReactTable,
   VisibilityState,
 } from '@tanstack/react-table';
 
+import DataTableViewOptions from '@/components/advanced-components/data-table/data-table-column-toggle.component';
+import DataTablePagination from '@/components/advanced-components/data-table/data-table-pagination.component';
+import { Button } from '@/components/shadcn-ui/button';
 import {
   Table,
   TableBody,
@@ -24,9 +27,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/shadcn-ui/table';
-import { Button } from '@/components/shadcn-ui/button';
-import DataTablePagination from './data-table-pagination.component';
-import DataTableViewOptions from './data-table-column-toggle.component';
 
 export type ColumnDef<TData, TValue = unknown> = TSColumnDef<TData, TValue>;
 export type RowContents<TData> = TSRow<TData>;

lib/platform-bible-react/src/components/search-bar.component.tsx → lib/platform-bible-react/src/components/basics/search-bar.component.tsx

@@ -1,6 +1,5 @@
+import TextField from '@/components/basics/text-field.component';
 import { useState } from 'react';
-import TextField from '@/components/text-field.component';
-import '@/components/search-bar.component.css';
 
 export type SearchBarProps = {
   /**

lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx → lib/platform-bible-react/src/components/basics/tabs-vertical.tsx

@@ -2,10 +2,10 @@
 
 'use client';
 
-import React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { TabsContentProps, TabsListProps, TabsTriggerProps } from '@/components/shadcn-ui/tabs';
 import { cn } from '@/utils/shadcn-ui.util';
-import { TabsContentProps, TabsListProps, TabsTriggerProps } from './tabs';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import React from 'react';
 
 export type VerticalTabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
   className?: string;

lib/platform-bible-react/src/components/text-field.component.tsx → lib/platform-bible-react/src/components/basics/text-field.component.tsx

@@ -1,7 +1,7 @@
 import { Input as ShadInput } from '@/components/shadcn-ui/input';
 import { Label as ShadLabel } from '@/components/shadcn-ui/label';
-import { ChangeEventHandler, FocusEventHandler } from 'react';
 import { cn } from '@/utils/shadcn-ui.util';
+import { ChangeEventHandler, FocusEventHandler } from 'react';
 
 export type TextFieldProps = {
   /** Optional unique identifier */

lib/platform-bible-react/src/components/chapter-range-selector.component.tsx → lib/platform-bible-react/src/components/mui/chapter-range-selector.component.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { FormControlLabel } from '@mui/material';
-import ComboBox from '@/components/combo-box.component';
+import ComboBox from '@/components/basics/combo-box.component';
 
 export type ChapterRangeSelectorProps = {
   handleSelectStartChapter: (chapter: number) => void;

lib/platform-bible-react/src/components/checkbox.component.tsx → lib/platform-bible-react/src/components/mui/checkbox.component.tsx

@@ -1,7 +1,7 @@
+import '@/components/mui/checkbox.component.css';
+import LabelPosition from '@/components/mui/label-position.model';
 import { FormLabel, Checkbox as MuiCheckbox } from '@mui/material';
 import { ChangeEvent } from 'react';
-import '@/components/checkbox.component.css';
-import LabelPosition from '@/components/label-position.model';
 
 export type CheckboxProps = {
   /** Optional unique identifier */

lib/platform-bible-react/src/components/checklist.component.tsx → lib/platform-bible-react/src/components/mui/checklist.component.tsx

@@ -1,5 +1,5 @@
-import Checkbox from '@/components/checkbox.component';
-import '@/components/checklist.component.css';
+import Checkbox from '@/components/mui/checkbox.component';
+import '@/components/mui/checklist.component.css';
 
 export type ChecklistProps = {
   /** Optional string representing the id attribute of the fieldset element */

lib/platform-bible-react/src/components/context-menu.component.tsx → lib/platform-bible-react/src/components/mui/context-menu.component.tsx

@@ -1,7 +1,9 @@
-import React, { PropsWithChildren, useCallback, useMemo } from 'react';
+import '@/components/mui/context-menu.component.css';
+import MenuItemList, {
+  GroupedMenuPropsBase,
+} from '@/components/mui/grouped-menu-item-list.component';
 import Menu from '@mui/material/Menu';
-import MenuItemList, { GroupedMenuPropsBase } from '@/components/grouped-menu-item-list.component';
-import '@/components/context-menu.component.css';
+import React, { PropsWithChildren, useCallback, useMemo } from 'react';
 
 export type ContextMenuProps = GroupedMenuPropsBase & {
   /** Additional css classes to help with styling of the context menu */

lib/platform-bible-react/src/components/contextMenu.component.closed.render.test.tsx → lib/platform-bible-react/src/components/mui/contextMenu.component.closed.render.test.tsx

@@ -1,8 +1,8 @@
-import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
-import { render, screen } from '@testing-library/react';
+import ContextMenu from '@/components/mui/context-menu.component';
+import * as jsonMenu from '@/components/mui/sample.composed.full.menu.json';
 import '@testing-library/jest-dom';
-import ContextMenu from '@/components/context-menu.component';
-import * as jsonMenu from '@/components/sample.composed.full.menu.json';
+import { render, screen } from '@testing-library/react';
+import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
 
 describe('ContextMenu', () => {
   const topMenuCombiner = new NonValidatingDocumentCombiner(jsonMenu, {

lib/platform-bible-react/src/components/contextMenu.component.onClick.test.tsx → lib/platform-bible-react/src/components/mui/contextMenu.component.onClick.test.tsx

@@ -1,9 +1,9 @@
-import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
-import { fireEvent, render, screen } from '@testing-library/react';
+import ContextMenu from '@/components/mui/context-menu.component';
+import { Command } from '@/components/mui/menu-item.component';
+import * as jsonMenu from '@/components/mui/sample.composed.full.menu.json';
 import '@testing-library/jest-dom';
-import ContextMenu from '@/components/context-menu.component';
-import { Command } from '@/components/menu-item.component';
-import * as jsonMenu from '@/components/sample.composed.full.menu.json';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
 
 let lastCommandHandled: string;
 

lib/platform-bible-react/src/components/contextMenu.component.open.render.test.tsx → lib/platform-bible-react/src/components/mui/contextMenu.component.open.render.test.tsx

@@ -1,9 +1,9 @@
-import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
-import { fireEvent, render, screen } from '@testing-library/react';
+import ContextMenu from '@/components/mui/context-menu.component';
+import * as jsonMenu from '@/components/mui/sample.composed.full.menu.json';
 import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
 import { PropsWithChildren } from 'react';
-import ContextMenu from '@/components/context-menu.component';
-import * as jsonMenu from '@/components/sample.composed.full.menu.json';
 
 jest.mock('@mui/material', () => {
   const mui = jest.requireActual('@mui/material'); // Import the actual MUI components

lib/platform-bible-react/src/components/grid-menu.component.tsx → lib/platform-bible-react/src/components/mui/grid-menu.component.tsx

@@ -1,15 +1,15 @@
-import { useMemo } from 'react';
+import '@/components/mui/grid-menu.component.css';
+import { GroupedMenuPropsBase } from '@/components/mui/grouped-menu-item-list.component';
+import { CommandHandler } from '@/components/mui/menu-item.component';
+import TopLevelMenu from '@/components/mui/top-level-menu.component';
 import { Grid, List } from '@mui/material';
 import {
   Localized,
   MenuColumnWithHeader,
   MultiColumnMenu,
   ReferencedItem,
 } from 'platform-bible-utils';
-import { CommandHandler } from '@/components/menu-item.component';
-import { GroupedMenuPropsBase } from '@/components/grouped-menu-item-list.component';
-import TopLevelMenu from '@/components/top-level-menu.component';
-import '@/components/grid-menu.component.css';
+import { useMemo } from 'react';
 
 type ColumnInfo = {
   /*

lib/platform-bible-react/src/components/gridMenu.component.onClick.test.tsx → lib/platform-bible-react/src/components/mui/gridMenu.component.onClick.test.tsx

@@ -1,9 +1,9 @@
-import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
-import { fireEvent, render, screen } from '@testing-library/react';
+import GridMenu from '@/components/mui/grid-menu.component';
+import { Command } from '@/components/mui/menu-item.component';
+import * as jsonMenu from '@/components/mui/sample.composed.full.menu.json';
 import '@testing-library/jest-dom';
-import GridMenu from '@/components/grid-menu.component';
-import { Command } from '@/components/menu-item.component';
-import * as jsonMenu from '@/components/sample.composed.full.menu.json';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
 
 let lastCommandHandled: string;
 let numberOfCommandsHandled: number = 0;

lib/platform-bible-react/src/components/gridMenu.component.openSubmenu.render.test.tsx → lib/platform-bible-react/src/components/mui/gridMenu.component.openSubmenu.render.test.tsx

@@ -1,9 +1,9 @@
-import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
-import { fireEvent, render, screen } from '@testing-library/react';
+import GridMenu from '@/components/mui/grid-menu.component';
+import * as jsonMenu from '@/components/mui/sample.composed.full.menu.json';
 import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import GridMenu from '@/components/grid-menu.component';
-import * as jsonMenu from '@/components/sample.composed.full.menu.json';
+import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
 
 describe('GridMenu', () => {
   const topMenuCombiner = new NonValidatingDocumentCombiner(jsonMenu, {

lib/platform-bible-react/src/components/gridMenu.component.render.test.tsx → lib/platform-bible-react/src/components/mui/gridMenu.component.render.test.tsx

@@ -1,9 +1,9 @@
-import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
-import { render, screen } from '@testing-library/react';
+import GridMenu from '@/components/mui/grid-menu.component';
+import * as jsonMenu from '@/components/mui/sample.composed.full.menu.json';
 import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { NonValidatingDocumentCombiner, PlatformMenus } from 'platform-bible-utils';
 import { PropsWithChildren } from 'react';
-import GridMenu from '@/components/grid-menu.component';
-import * as jsonMenu from '@/components/sample.composed.full.menu.json';
 
 jest.mock('@mui/material', () => {
   const mui = jest.requireActual('@mui/material'); // Import the actual MUI components

lib/platform-bible-react/src/components/grouped-menu-item-list.component.tsx → lib/platform-bible-react/src/components/mui/grouped-menu-item-list.component.tsx

@@ -1,4 +1,8 @@
-import { MouseEvent, useMemo, useState } from 'react';
+import MenuItem, {
+  MenuItemListProps,
+  MenuItemProps,
+  MenuPropsBase,
+} from '@/components/mui/menu-item.component';
 import { Menu } from '@mui/material';
 import {
   Localized,
@@ -9,11 +13,7 @@ import {
   ReferencedItem,
   SingleColumnMenu,
 } from 'platform-bible-utils';
-import MenuItem, {
-  MenuItemListProps,
-  MenuItemProps,
-  MenuPropsBase,
-} from '@/components/menu-item.component';
+import { MouseEvent, useMemo, useState } from 'react';
 
 /**
  * All the exported types in this file should be regarded as "internal" (i.e., they should not be

lib/platform-bible-react/src/components/hamburger-menu-button.component.tsx → lib/platform-bible-react/src/components/mui/hamburger-menu-button.component.tsx

@@ -1,17 +1,17 @@
+import GridMenu from '@/components/mui/grid-menu.component';
+import { Command, CommandHandler } from '@/components/mui/menu-item.component';
+import usePromise from '@/hooks/use-promise.hook';
+import { Menu as MenuIcon } from '@mui/icons-material';
+import { Drawer, IconButton } from '@mui/material';
+import { Localized, MultiColumnMenu } from 'platform-bible-utils';
 import {
-  useCallback,
-  useState,
   MouseEvent,
   MutableRefObject,
-  useEffect,
   PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
 } from 'react';
-import { IconButton, Drawer } from '@mui/material';
-import { Menu as MenuIcon } from '@mui/icons-material';
-import { MultiColumnMenu, Localized } from 'platform-bible-utils';
-import { Command, CommandHandler } from '@/components/menu-item.component';
-import GridMenu from '@/components/grid-menu.component';
-import usePromise from '../hooks/use-promise.hook';
 
 export interface MultiColumnMenuProvider {
   (isSupportAndDevelopment: boolean): Promise<Localized<MultiColumnMenu>>;

lib/platform-bible-react/src/components/icon-button.component.tsx → lib/platform-bible-react/src/components/mui/icon-button.component.tsx

@@ -1,6 +1,6 @@
+import '@/components/mui/icon-button.component.css';
 import { IconButton as MuiIconButton } from '@mui/material';
 import { MouseEventHandler, PropsWithChildren } from 'react';
-import '@/components/icon-button.component.css';
 
 export type IconButtonProps = PropsWithChildren<{
   /** Optional unique identifier */

lib/platform-bible-react/src/components/menu-item.component.tsx → lib/platform-bible-react/src/components/mui/menu-item.component.tsx

@@ -1,13 +1,13 @@
+import '@/components/mui/menu-item.component.css';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import {
-  MenuItem as MuiMenuItem,
-  ListItemText as MuiListItemText,
   ListItemIcon as MuiListItemIcon,
+  ListItemText as MuiListItemText,
+  MenuItem as MuiMenuItem,
 } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
-import { MouseEvent, PropsWithChildren } from 'react';
 import { Localized, ReferencedItem, SingleColumnMenu } from 'platform-bible-utils';
-import '@/components/menu-item.component.css';
+import { MouseEvent, PropsWithChildren } from 'react';
 
 type MenuItemInfoBase = {
   /** Text (displayable in the UI) as the name of the menu item */

lib/platform-bible-react/src/components/slider.component.tsx → lib/platform-bible-react/src/components/mui/slider.component.tsx

@@ -1,6 +1,6 @@
+import '@/components/mui/slider.component.css';
 import { Slider as MuiSlider } from '@mui/material';
 import { SyntheticEvent } from 'react';
-import '@/components/slider.component.css';
 
 export type SliderProps = {
   /** Optional unique identifier */

lib/platform-bible-react/src/components/snackbar.component.tsx → lib/platform-bible-react/src/components/mui/snackbar.component.tsx

@@ -1,6 +1,6 @@
+import '@/components/mui/snackbar.component.css';
 import { Snackbar as MuiSnackbar, SnackbarCloseReason, SnackbarOrigin } from '@mui/material';
-import { SyntheticEvent, ReactNode, PropsWithChildren } from 'react';
-import '@/components/snackbar.component.css';
+import { PropsWithChildren, ReactNode, SyntheticEvent } from 'react';
 
 export type CloseReason = SnackbarCloseReason;
 export type AnchorOrigin = SnackbarOrigin;

lib/platform-bible-react/src/components/switch.component.tsx → lib/platform-bible-react/src/components/mui/switch.component.tsx

@@ -1,6 +1,6 @@
+import '@/components/mui/switch.component.css';
 import { Switch as MuiSwitch } from '@mui/material';
 import { ChangeEvent } from 'react';
-import '@/components/switch.component.css';
 
 export type SwitchProps = {
   /** Optional unique identifier */

lib/platform-bible-react/src/components/toolbar.component.tsx → lib/platform-bible-react/src/components/mui/toolbar.component.tsx

@@ -1,10 +1,10 @@
-import { useRef, PropsWithChildren } from 'react';
-import { AppBar, Toolbar as MuiToolbar } from '@mui/material';
-import { CommandHandler } from '@/components/menu-item.component';
 import HamburgerMenuButton, {
   MultiColumnMenuProvider,
-} from '@/components/hamburger-menu-button.component';
-import '@/components/toolbar.component.css';
+} from '@/components/mui/hamburger-menu-button.component';
+import { CommandHandler } from '@/components/mui/menu-item.component';
+import '@/components/mui/toolbar.component.css';
+import { AppBar, Toolbar as MuiToolbar } from '@mui/material';
+import { PropsWithChildren, useRef } from 'react';
 
 export type ToolbarProps = PropsWithChildren<{
   /** The handler to use for menu commands (and eventually toolbar commands). */