refactor(frontend): improve components directory mapping and file names

apps/frontend/src/__setup__/test-aliases.ts

@@ -23,10 +23,6 @@ const aliases: Alias[] = [
     replacementPath: './src/site'
   },
   /* Components */
-  {
-    find: '@layouts',
-    replacementPath: './src/layouts'
-  },
   {
     find: '@widgets',
     replacementPath: './src/widgets'

apps/frontend/src/app/gallery/components/GallerySlide/CompareSlider/DragHandle/index.ts

@@ -0,0 +1 @@
+export { DragHandle } from './DragHandle'

apps/frontend/src/app/gallery/components/GallerySlide/CompareSlider/index.ts

@@ -0,0 +1 @@
+export { CompareSlider } from './CompareSlider'

apps/frontend/src/app/gallery/components/GallerySlideAside.tsx → apps/frontend/src/app/gallery/components/GallerySlide/GallerySlideAside/GallerySlideAside.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@radix-ui/themes'
 import type { ComponentPropsWithoutRef, FC } from 'react'
 
-import { GallerySlideInfo } from './GallerySlideInfo'
+import { GallerySlideInfo } from '../GallerySlideInfo'
 import styles from './GallerySlideAside.module.css'
 
 export const GallerySlideAside: FC<Props> = props => (

apps/frontend/src/app/gallery/components/GallerySlide/GallerySlideAside/index.ts

@@ -0,0 +1 @@
+export { GallerySlideAside } from './GallerySlideAside'

apps/frontend/src/app/gallery/components/GallerySlide/GallerySlideInfo/index.ts

@@ -0,0 +1 @@
+export { GallerySlideInfo } from './GallerySlideInfo'

apps/frontend/src/app/gallery/components/GallerySlidePopover.tsx → apps/frontend/src/app/gallery/components/GallerySlide/GallerySlidePopover/GallerySlidePopover.tsx

@@ -3,7 +3,7 @@ import type { ComponentPropsWithoutRef, FC } from 'react'
 
 import { DotsHorizontalIcon } from '@scissors/react-icons/DotsHorizontalIcon'
 
-import { GallerySlideInfo } from './GallerySlideInfo'
+import { GallerySlideInfo } from '../GallerySlideInfo'
 import styles from './GallerySlidePopover.module.css'
 
 const GallerySlidePopoverTrigger = () => (

apps/frontend/src/app/gallery/components/GallerySlide/GallerySlidePopover/index.ts

@@ -0,0 +1 @@
+export { GallerySlidePopover } from './GallerySlidePopover'

apps/frontend/src/app/gallery/components/GallerySlide/GallerySlideSkeleton/index.ts

@@ -0,0 +1 @@
+export * from './GallerySlideSkeleton'

apps/frontend/src/app/gallery/components/GallerySlide/index.ts

@@ -0,0 +1 @@
+export { default } from './GallerySlide'

apps/frontend/src/app/gallery/layout.tsx

@@ -1,10 +1,10 @@
-import type { FC, PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
   title: 'Gallery'
 }
 
-const GalleryLayout: FC<PropsWithChildren> = ({ children }) => children
+const GalleryLayout = ({ children }: PropsWithChildren) => children
 
 export default GalleryLayout

apps/frontend/src/app/gallery/page.tsx

@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic'
 import { Flex, ScrollArea } from '@radix-ui/themes'
 
-import { GallerySlideSkeleton } from './components/GallerySlideSkeleton'
+import { GallerySlideSkeleton } from './components/GallerySlide/GallerySlideSkeleton'
 import { slides } from './slides'
 import styles from './page.module.css'
 

apps/frontend/src/app/layout.tsx

@@ -5,9 +5,8 @@ import { Theme } from '@radix-ui/themes'
 import { ThemeProvider } from 'next-themes'
 import type { Metadata } from 'next'
 import type { PropsWithChildren } from 'react'
-import 'yet-another-react-lightbox/styles.css'
 
-import { Layout } from '@layouts/default'
+import { Layout } from '@components/Layout'
 import {
   pathForSocial,
   SITE_DESCRIPTION,

apps/frontend/src/components/CheckboxDominantBackground.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 
-import { Checkbox, type Props as CheckboxProps } from '@design-system/checkbox'
+import { Checkbox, type Props as CheckboxProps } from '@design-system/Checkbox'
 
 export const CheckboxDominantBackground: FC<Omit<CheckboxProps, 'label'>> = props => (
   <Checkbox label='Use Dominant Background' {...props} />

apps/frontend/src/components/ImageUploader/ImageUploaderLoading/index.ts

@@ -0,0 +1 @@
+export { ImageUploaderLoading } from './ImageUploaderLoading'

apps/frontend/src/layouts/default/LayoutHeader/navigation/NavigationDrawer.tsx → apps/frontend/src/components/Layout/LayoutDrawer/LayoutDrawer.tsx

@@ -8,12 +8,12 @@ import { GithubLogoIcon } from '@scissors/react-icons/GithubLogoIcon'
 import { HamburgerMenuIcon } from '@scissors/react-icons/HamburgerMenuIcon'
 
 import { Drawer } from '@ui/Drawer'
-import { NavigationMobile, NavigationMobileItem } from './NavigationMobile'
+import { NavigationMobile, NavigationMobileItem } from '@components/navigation/NavigationMobile'
 import { useEscapeAction } from '@hooks/useEscapeAction'
 import { GITHUB_REPO_PATH } from '@site/config'
-import styles from './NavigationDrawer.module.css'
+import styles from './LayoutDrawer.module.css'
 
-export default function NavigationDrawer() {
+export default function LayoutDrawer() {
   const [isOpen, setIsOpen] = useState(false)
   const pathname = usePathname()
 

apps/frontend/src/components/Layout/LayoutDrawer/index.ts

@@ -0,0 +1 @@
+export { default } from './LayoutDrawer'

apps/frontend/src/layouts/default/LayoutHeader/LayoutHeader.tsx → apps/frontend/src/components/Layout/LayoutHeader/LayoutHeader.tsx

@@ -2,19 +2,19 @@ import dynamic from 'next/dynamic'
 import { Flex } from '@radix-ui/themes'
 
 import { AppLogo } from '@ui/AppLogo'
-import { ButtonGithub } from './ButtonGithub'
-import { NavigationDesktop } from './navigation/NavigationDesktop'
+import { ButtonGithub } from '@components/ButtonGithub'
+import { NavigationDesktop } from '@components/navigation/NavigationDesktop'
 import { ThemeColorMenu } from '@components/theme/ThemeColorMenu'
 import { IconButtonGhostSkeleton } from '@ui/skeletons/IconButtonGhostSkeleton'
 import styles from './LayoutHeader.module.css'
 
+const LayoutDrawer = dynamic(() => import('../LayoutDrawer'), {
+  ssr: false
+})
 const AppearancePopover = dynamic(() => import('@components/AppearancePopover'), {
   ssr: false,
   loading: () => <IconButtonGhostSkeleton />
 })
-const NavigationDrawer = dynamic(() => import('./navigation/NavigationDrawer'), {
-  ssr: false
-})
 const ButtonToggleTheme = dynamic(() => import('@components/theme/ButtonToggleTheme'), {
   ssr: false,
   loading: () => <IconButtonGhostSkeleton />
@@ -40,7 +40,7 @@ export const LayoutHeader = () => (
         </Flex>
       </div>
 
-      <NavigationDrawer />
+      <LayoutDrawer />
     </header>
   </Flex>
 )

apps/frontend/src/components/NumberInput/NumberInput.test.tsx

@@ -4,7 +4,7 @@ import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 
 import { fieldTestId, labelTestId, NumberInput, slotTestId } from './NumberInput'
 import { NOT_ALLOWED_KEYS } from './utils'
-import type { Props } from './NumberInput.types'
+import type { Props } from './types'
 
 describe('@components/NumberInput - rendering', () => {
   afterEach(() => {

apps/frontend/src/components/NumberInput/NumberInput.tsx

@@ -6,7 +6,7 @@ import { clsx } from 'clsx'
 
 import { NOT_ALLOWED_KEYS, parseValue } from './utils'
 import { useEscapeBlur } from '@hooks/useEscapeBlur'
-import type { LabelProps, Props } from './NumberInput.types'
+import type { LabelProps, Props } from './types'
 import styles from './NumberInput.module.css'
 
 export const labelTestId = 'number-input-label'

apps/frontend/src/components/alerts/ConfirmAlert.tsx

@@ -3,7 +3,7 @@
 import { AlertDialog, Button, Flex } from '@radix-ui/themes'
 import type { FC, PropsWithChildren } from 'react'
 
-import { TitleWithExclamation } from '@ui/TitleWithExclamation'
+import { ExclamationTitle } from '@ui/ExclamationTitle'
 
 export const ConfirmAlert: FC<Props> = ({
   children,
@@ -24,9 +24,9 @@ export const ConfirmAlert: FC<Props> = ({
     <AlertDialog.Content size='3' maxWidth={maxWidth} className={contentClassName}>
       <Flex direction='column'>
         {withTitleExclamation ? (
-          <TitleWithExclamation mb='3'>
+          <ExclamationTitle mb='3'>
             <AlertDialog.Title mb='0'>{title}</AlertDialog.Title>
-          </TitleWithExclamation>
+          </ExclamationTitle>
         ) : (
           <AlertDialog.Title>{title}</AlertDialog.Title>
         )}

apps/frontend/src/components/alerts/ConfirmSettingsResetAlert.tsx

@@ -3,7 +3,7 @@
 import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren, useState } from 'react'
 import { AlertDialog, Button, Flex } from '@radix-ui/themes'
 
-import { Checkbox } from '@design-system/checkbox'
+import { Checkbox } from '@design-system/Checkbox'
 
 const contentActionsProps = {
   gap: {

apps/frontend/src/components/alerts/FileValidationAlert.tsx

@@ -3,7 +3,7 @@
 import { AlertDialog, Button, Flex } from '@radix-ui/themes'
 import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react'
 
-import { TitleWithExclamation } from '@ui/TitleWithExclamation'
+import { ExclamationTitle } from '@ui/ExclamationTitle'
 
 export const FileValidationAlert: FC<Props> = ({
   open,
@@ -14,9 +14,9 @@ export const FileValidationAlert: FC<Props> = ({
 }) => (
   <AlertDialog.Root open={open} onOpenChange={onOpenChange}>
     <AlertDialog.Content size='3' onEscapeKeyDown={onClose}>
-      <TitleWithExclamation mb='3'>
+      <ExclamationTitle mb='3'>
         <AlertDialog.Title mb='0'>{title}</AlertDialog.Title>
-      </TitleWithExclamation>
+      </ExclamationTitle>
 
       <AlertDialog.Description>{description}</AlertDialog.Description>
 

apps/frontend/src/components/alerts/RequestErrorAlert.tsx

@@ -2,7 +2,7 @@
 
 import { AlertDialog, Button, Flex } from '@radix-ui/themes'
 
-import { TitleWithExclamation } from '@ui/TitleWithExclamation'
+import { ExclamationTitle } from '@ui/ExclamationTitle'
 import { handleRequestError } from '@api/helpers/handleRequestError'
 
 export function RequestErrorAlert({ open, error, reset, retry }: Props) {
@@ -12,11 +12,11 @@ export function RequestErrorAlert({ open, error, reset, retry }: Props) {
   return (
     <AlertDialog.Root open={open}>
       <AlertDialog.Content size='3' maxWidth='390px'>
-        <TitleWithExclamation mb='3'>
+        <ExclamationTitle mb='3'>
           <AlertDialog.Title mb='0'>
             {isMessageEmpty ? 'Something went wrong' : 'Error'}
           </AlertDialog.Title>
-        </TitleWithExclamation>
+        </ExclamationTitle>
 
         <AlertDialog.Description size='3'>
           {isMessageEmpty ? 'Please try again later' : message}

apps/frontend/src/layouts/default/LayoutHeader/navigation/NavigationDesktop.tsx → apps/frontend/src/components/navigation/NavigationDesktop/NavigationDesktop.tsx

@@ -3,7 +3,7 @@ import type { MarginProps } from '@radix-ui/themes/props'
 import type { FC } from 'react'
 
 import { NavigationItem } from './NavigationItem'
-import { navigationItems } from './data'
+import { navigationItems } from '../data'
 import styles from './NavigationDesktop.module.css'
 
 export const NavigationDesktop: FC<MarginProps> = props => (

apps/frontend/src/layouts/default/LayoutHeader/navigation/NavigationItem/NavigationItem.tsx → apps/frontend/src/components/navigation/NavigationDesktop/NavigationItem/NavigationItem.tsx

@@ -5,7 +5,7 @@ import { Flex, IconButton, Link as RadixLink, Text, Tooltip } from '@radix-ui/th
 import { clsx } from 'clsx'
 
 import { useSelectedPath } from '@hooks/useSelectedPath'
-import type { NavigationItemModel } from '../types'
+import type { NavigationItemModel } from '@components/navigation/types'
 import styles from './NavigationItem.module.css'
 
 export function NavigationItem({

apps/frontend/src/components/navigation/NavigationDesktop/index.ts

@@ -0,0 +1 @@
+export { NavigationDesktop } from './NavigationDesktop'

apps/frontend/src/components/navigation/NavigationMobile/NavigationMobile.module.css

@@ -0,0 +1,3 @@
+.root {
+  row-gap: 2px;
+}

apps/frontend/src/components/navigation/NavigationMobile/NavigationMobile.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { Flex } from '@radix-ui/themes'
+
+import { NavigationMobileItem } from './NavigationMobileItem'
+import { PATH_ROOT } from '@site/paths'
+import { navigationItems } from '../data'
+import type { NavigationItemModel } from '../types'
+import styles from './NavigationMobile.module.css'
+
+const items: NavigationItemModel[] = [
+  {
+    label: 'Homepage',
+    href: PATH_ROOT
+  },
+  ...navigationItems.map(item => ({
+    ...item,
+    icon: undefined
+  }))
+]
+
+export const NavigationMobile = () => (
+  <Flex asChild direction='column' width='100%' className={styles.root}>
+    <nav>
+      {items.map(item => (
+        <NavigationMobileItem key={item.label} {...item} />
+      ))}
+    </nav>
+  </Flex>
+)

apps/frontend/src/layouts/default/LayoutHeader/navigation/NavigationMobile.module.css → apps/frontend/src/components/navigation/NavigationMobile/NavigationMobileItem/NavigationMobileItem.module.css

@@ -1,8 +1,4 @@
 .root {
-  row-gap: 2px;
-}
-
-.item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -18,7 +14,7 @@
   text-decoration: none;
 }
 
-.item:focus-visible {
+.root:focus-visible {
   box-shadow:
     inset 0 0 0 1px var(--accent-8),
     0 0 0 1px var(--accent-8);
@@ -29,7 +25,7 @@
 }
 
 @media (hover: hover) {
-  .item:hover {
+  .root:hover {
     background-color: var(--accent-a4);
   }
 

apps/frontend/src/components/navigation/NavigationMobile/NavigationMobileItem/NavigationMobileItem.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import { Text, Link as RadixLink } from '@radix-ui/themes'
+import { clsx } from 'clsx'
+
+import { useSelectedPath } from '@hooks/useSelectedPath'
+import type { NavigationItemModel } from '@components/navigation/types'
+import styles from './NavigationMobileItem.module.css'
+
+export const NavigationMobileItem = ({
+  href,
+  label,
+  icon,
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  tooltipContent: _,
+  ...attributes
+}: NavigationItemModel) => {
+  const isSelected = useSelectedPath(href)
+
+  return (
+    <RadixLink
+      asChild
+      size='3'
+      className={clsx(styles.root, {
+        [styles.selected]: isSelected
+      })}
+    >
+      <Link {...attributes} href={href}>
+        {icon} <Text ml={icon ? '2' : '0'}>{label}</Text>
+      </Link>
+    </RadixLink>
+  )
+}

apps/frontend/src/components/navigation/NavigationMobile/NavigationMobileItem/index.ts

@@ -0,0 +1 @@
+export { NavigationMobileItem } from './NavigationMobileItem'

apps/frontend/src/components/navigation/NavigationMobile/index.ts

@@ -0,0 +1,2 @@
+export { NavigationMobile } from './NavigationMobile'
+export { NavigationMobileItem } from './NavigationMobileItem'

apps/frontend/src/design-system/checkbox/checkbox.tsx → apps/frontend/src/design-system/Checkbox/Checkbox.tsx

@@ -4,7 +4,7 @@ import { type FC, memo, useId } from 'react'
 import { Checkbox as RadixCheckbox, Flex, Text } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 
-import styles from './checkbox.module.css'
+import styles from './Checkbox.module.css'
 
 export const rootTestId = 'checkbox-root'
 

apps/frontend/src/design-system/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, type Props, rootTestId } from './Checkbox'

apps/frontend/src/design-system/select/select.tsx → apps/frontend/src/design-system/Select/Select.tsx

@@ -6,7 +6,7 @@ import { clsx } from 'clsx'
 import capitalize from 'lodash.capitalize'
 
 import type { Props } from './types'
-import styles from './select.module.css'
+import styles from './Select.module.css'
 
 export function Select({
   data,

apps/frontend/src/design-system/select/index.ts → apps/frontend/src/design-system/Select/index.ts

@@ -1,2 +1,2 @@
-export { Select } from './select'
+export { Select } from './Select'
 export type { SelectData } from './types'

apps/frontend/src/design-system/slider/slider.tsx → apps/frontend/src/design-system/Slider/Slider.tsx

@@ -4,8 +4,8 @@ import { useCallback } from 'react'
 import { Flex, Slider as RadixSlider, Text } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 
-import { NumberInput } from 'src/components/NumberInput'
-import { SliderHeader } from './slider-header'
+import { NumberInput } from '@components/NumberInput'
+import { SliderHeader } from './SliderHeader'
 import { getSliderTitleValue, getSliderValue } from './utils'
 import type { Props } from './types'
 import styles from './slider.module.css'

apps/frontend/src/design-system/slider/slider-header.tsx → apps/frontend/src/design-system/Slider/SliderHeader/SliderHeader.tsx

@@ -2,10 +2,10 @@ import dynamic from 'next/dynamic'
 import { Flex, Heading, Separator } from '@radix-ui/themes'
 import type { FC } from 'react'
 
-import type { Props as SliderProps } from './types'
-import styles from './slider-header.module.css'
+import type { Props as SliderProps } from '../types'
+import styles from './SliderHeader.module.css'
 
-const SliderPopover = dynamic(() => import('./slider-popover').then(mod => mod.SliderPopover), {
+const SliderPopover = dynamic(() => import('./SliderPopover').then(mod => mod.SliderPopover), {
   ssr: false
 })