refactor: replace /libs with /lib and /server

src/app/api/convert/route.ts

@@ -1,9 +1,9 @@
 import { type NextRequest, NextResponse } from 'next/server'
 import isEmpty from 'lodash.isempty'
 
-import { Sharp } from '@libs/Sharp/Sharp'
+import { Sharp } from '@server/Sharp/Sharp'
 import { isValidFileSize } from '@helpers/isValidFileSize'
-import type { ConvertSettings } from '@libs/Sharp'
+import type { ConvertSettings } from '@server/Sharp'
 
 export async function POST(req: NextRequest) {
   const formData = await req.formData()

src/app/docs/components/DocsContent/sections/MainSection/rows/BlurRow/GaussianBlurPopover.tsx

@@ -3,7 +3,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DetailsPopover } from '@app/docs/components/DocsContent/DetailsPopover'
-import { MAX_BLUR_SIGMA, MIN_BLUR_SIGMA } from '@libs/Sharp'
+import { MAX_BLUR_SIGMA, MIN_BLUR_SIGMA } from '@server/Sharp'
 
 export default function GaussianBlurPopover() {
   return (

src/app/docs/components/DocsContent/sections/MainSection/rows/GammaRow.tsx

@@ -1,7 +1,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_GAMMA } from '@libs/Sharp'
+import { DEFAULT_GAMMA } from '@server/Sharp'
 
 export function GammaRow() {
   return (

src/app/docs/components/DocsContent/sections/MainSection/rows/NormaliseRow.tsx

@@ -1,7 +1,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { MAX_NORMALISE, MIN_NORMALISE } from '@libs/Sharp'
+import { MAX_NORMALISE, MIN_NORMALISE } from '@server/Sharp'
 
 export function NormaliseRow() {
   return (

src/app/docs/components/DocsContent/sections/MainSection/rows/RotateAngleRow.tsx

@@ -1,7 +1,7 @@
 import { Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_ROTATE_ANGLE } from '@libs/Sharp'
+import { DEFAULT_ROTATE_ANGLE } from '@server/Sharp'
 
 export function RotateAngleRow() {
   return (

src/app/docs/components/DocsContent/sections/MainSection/rows/RotateBackgroundRow.tsx

@@ -1,7 +1,7 @@
 import { Box, Code, Flex, Table, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_ROTATE_BACKGROUND } from '@libs/Sharp'
+import { DEFAULT_ROTATE_BACKGROUND } from '@server/Sharp'
 
 const previewBoxStyle = {
   backgroundColor: DEFAULT_ROTATE_BACKGROUND

src/app/docs/components/DocsContent/sections/ModulateSection/rows/BrightnessRow.tsx

@@ -1,7 +1,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { MAX_BRIGHTNESS, MIN_BRIGHTNESS } from '@libs/Sharp'
+import { MAX_BRIGHTNESS, MIN_BRIGHTNESS } from '@server/Sharp'
 
 export function BrightnessRow() {
   return (

src/app/docs/components/DocsContent/sections/ModulateSection/rows/HueRow.tsx

@@ -1,7 +1,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { MAX_HUE, MIN_HUE } from '@libs/Sharp'
+import { MAX_HUE, MIN_HUE } from '@server/Sharp'
 
 export function HueRow() {
   return (

src/app/docs/components/DocsContent/sections/ModulateSection/rows/LightnessRow.tsx

@@ -1,7 +1,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { MIN_LIGHTNESS } from '@libs/Sharp'
+import { MIN_LIGHTNESS } from '@server/Sharp'
 
 export function LightnessRow() {
   return (

src/app/docs/components/DocsContent/sections/ModulateSection/rows/SaturationRow.tsx

@@ -1,7 +1,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { MAX_SATURATION, MIN_SATURATION } from '@libs/Sharp'
+import { MAX_SATURATION, MIN_SATURATION } from '@server/Sharp'
 
 export function SaturationRow() {
   return (

src/app/docs/components/DocsContent/sections/ResizeSection/rows/BackgroundRow.tsx

@@ -1,7 +1,7 @@
 import { Box, Code, Flex, Table, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_RESIZE_BACKGROUND, ResizeFit } from '@libs/Sharp'
+import { DEFAULT_RESIZE_BACKGROUND, ResizeFit } from '@server/Sharp'
 
 const previewBoxStyle = {
   backgroundColor: DEFAULT_RESIZE_BACKGROUND

src/app/docs/components/DocsContent/sections/ResizeSection/rows/EnlargementRow.tsx

@@ -1,7 +1,7 @@
 import { Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_WITHOUT_ENLARGEMENT } from '@libs/Sharp'
+import { DEFAULT_WITHOUT_ENLARGEMENT } from '@server/Sharp'
 
 export function EnlargementRow() {
   return (

src/app/docs/components/DocsContent/sections/ResizeSection/rows/FastShrinkRow/FastShrinkRow.tsx

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic'
 import { Code, Strong, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_FAST_SHRINK } from '@libs/Sharp'
+import { DEFAULT_FAST_SHRINK } from '@server/Sharp'
 
 const MoirePatternPopover = dynamic(() => import('./MoirePatternPopover'), {
   ssr: false,

src/app/docs/components/DocsContent/sections/ResizeSection/rows/FitRow.tsx

@@ -3,7 +3,7 @@ import { Code, Text } from '@radix-ui/themes'
 import capitalize from 'lodash.capitalize'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_RESIZE_FIT, ResizeFit } from '@libs/Sharp'
+import { DEFAULT_RESIZE_FIT, ResizeFit } from '@server/Sharp'
 
 export function FitRow() {
   return (

src/app/docs/components/DocsContent/sections/ResizeSection/rows/HeightRow.tsx

@@ -1,7 +1,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { MAX_RESIZE_HEIGHT, MIN_RESIZE_SIZE } from '@libs/Sharp'
+import { MAX_RESIZE_HEIGHT, MIN_RESIZE_SIZE } from '@server/Sharp'
 
 export function HeightRow() {
   return (

src/app/docs/components/DocsContent/sections/ResizeSection/rows/KernelRow.tsx

@@ -2,7 +2,7 @@ import { Text } from '@radix-ui/themes'
 import capitalize from 'lodash.capitalize'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_RESIZE_KERNEL } from '@libs/Sharp'
+import { DEFAULT_RESIZE_KERNEL } from '@server/Sharp'
 
 export function KernelRow() {
   return (

src/app/docs/components/DocsContent/sections/ResizeSection/rows/PositionRow.tsx

@@ -2,7 +2,7 @@ import { Code, Text } from '@radix-ui/themes'
 import capitalize from 'lodash.capitalize'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_RESIZE_POSITION, ResizeFit } from '@libs/Sharp'
+import { DEFAULT_RESIZE_POSITION, ResizeFit } from '@server/Sharp'
 
 export function PositionRow() {
   return (

src/app/docs/components/DocsContent/sections/ResizeSection/rows/ReductionRow.tsx

@@ -1,7 +1,7 @@
 import { Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { DEFAULT_WITHOUT_REDUCTION } from '@libs/Sharp'
+import { DEFAULT_WITHOUT_REDUCTION } from '@server/Sharp'
 
 export function ReductionRow() {
   return (

src/app/docs/components/DocsContent/sections/ResizeSection/rows/WidthRow.tsx

@@ -1,7 +1,7 @@
 import { Code, Text } from '@radix-ui/themes'
 
 import { DocsTableRow } from '../../../DocsSection/DocsTable/DocsTableRow'
-import { MAX_RESIZE_WIDTH, MIN_RESIZE_SIZE } from '@libs/Sharp'
+import { MAX_RESIZE_WIDTH, MIN_RESIZE_SIZE } from '@server/Sharp'
 
 export function WidthRow() {
   return (

src/app/layout.tsx

@@ -7,7 +7,7 @@ import 'yet-another-react-lightbox/styles.css'
 import 'react-loading-skeleton/dist/skeleton.css'
 
 import { Layout } from '@layouts/default'
-import { getThemeAppearance } from '@shared/theme'
+import { getThemeAppearance } from '@lib/theme'
 import { isDevelopment } from '@helpers/isDevelopment'
 import './globals.css'
 

src/app/page.tsx

@@ -11,8 +11,8 @@ import { UploadedFileLoading } from '@components/UploadedFile/UploadedFileLoadin
 import { FileUploadZone } from '@components/uploading/FileUploadZone'
 import { useOutputStore } from '@stores/output'
 import { useConvertImage } from '@hooks/useConvertImage'
-import { ALLOWED_IMAGE_FORMATS } from '@libs/Sharp'
-import type { FlexDirection } from '@libs/radix'
+import { ALLOWED_IMAGE_FORMATS } from '@server/Sharp'
+import type { FlexDirection } from '@lib/theme'
 import styles from './page.module.css'
 
 const RequestErrorAlert = dynamic(

src/components/UploadedFile/UploadedFileCard/UploadedFileCard.tsx

@@ -7,7 +7,7 @@ import { LoadingSpinner } from '@ui/LoadingSpinner'
 import { ButtonDelete } from '@ui/ButtonDelete'
 import { ButtonFileUpload } from '@components/uploading/ButtonFileUpload'
 import { useOutputStore } from '@stores/output'
-import { ALLOWED_IMAGE_FORMATS } from '@libs/Sharp'
+import { ALLOWED_IMAGE_FORMATS } from '@server/Sharp'
 import styles from './UploadedFileCard.module.css'
 
 export function UploadedFileCard({ file, isLoading }: Props) {

src/components/UploadedFile/UploadedFileLoading.tsx

@@ -2,7 +2,7 @@ import { Flex } from '@radix-ui/themes'
 import Skeleton from 'react-loading-skeleton'
 
 import { LoadingSpinner } from '@ui/LoadingSpinner'
-import type { Size } from '@libs/radix'
+import type { Size } from '@lib/theme'
 
 const spinnerSize: Size = {
   initial: '7',

src/components/uploading/FileUploadZone/FileUploadZone.tsx

@@ -6,8 +6,8 @@ import { clsx } from 'clsx'
 
 import { type ComponentProps, withFileUploader } from '@hoc/withFileUploader'
 import { MAX_FILE_SIZE_MB } from '@helpers/isValidFileSize'
-import { ConvertFormat } from '@libs/Sharp'
-import type { TextSize } from '@libs/radix'
+import { ConvertFormat } from '@server/Sharp'
+import type { TextSize } from '@lib/theme'
 import styles from './FileUploadZone.module.css'
 
 const uploadTextSize: TextSize = {

src/hooks/useConvertMutation.ts

@@ -2,7 +2,7 @@ import { useMutation } from '@tanstack/react-query'
 
 import { convertImage } from '@api/convertImage'
 import { useOutputStore } from '@stores/output'
-import type { ConvertSettings } from '@libs/Sharp'
+import type { ConvertSettings } from '@server/Sharp'
 import type { DownloadPayload } from '@app-types/DownloadPayload'
 
 interface ConvertPayload {

src/layouts/default/Layout.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import type { PropsWithChildren } from 'react'
 
 import { LayoutHeader } from './LayoutHeader'
-import type { ThemeProps } from '@shared/theme'
+import type { ThemeProps } from '@lib/theme'
 
 const queryClient = new QueryClient({
   defaultOptions: {

src/layouts/default/LayoutHeader/DocumentationLink/DocumentationLink.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { Flex, IconButton, Link as RadixLink, Text, Tooltip } from '@radix-ui/themes'
 import { ReaderIcon } from '@radix-ui/react-icons'
 
-import { Route } from '@shared/router'
+import { Route } from '@lib/router'
 import styles from './DocumentationLink.module.css'
 
 export function DocumentationLink() {

src/layouts/default/LayoutHeader/LayoutHeader.tsx

@@ -6,8 +6,8 @@ import { LogoIcon } from '@ui/icons'
 import { ButtonGithub } from './ButtonGithub'
 import { DocumentationLink } from './DocumentationLink'
 import { SettingsPopoverSkeleton } from './SettingsPopover'
-import { Route } from '@shared/router'
-import type { ThemeProps } from '@shared/theme'
+import { Route } from '@lib/router'
+import type { ThemeProps } from '@lib/theme'
 import styles from './LayoutHeader.module.css'
 
 const SettingsPopover = dynamic(

src/layouts/default/LayoutHeader/SettingsPopover/SettingsPopover.tsx

@@ -5,7 +5,7 @@ import { MixerHorizontalIcon } from '@radix-ui/react-icons'
 
 import { ToggleTheme } from './ToggleTheme'
 import { ThemeColorGrid } from './ThemeColorGrid'
-import type { ThemeProps } from '@shared/theme'
+import type { ThemeProps } from '@lib/theme'
 
 export function SettingsPopover({ theme, themeColor }: ThemeProps) {
   return (

src/layouts/default/LayoutHeader/SettingsPopover/ThemeColorGrid/ThemeColorGrid.tsx

@@ -4,7 +4,7 @@ import { Flex, Grid } from '@radix-ui/themes'
 
 import { ThemeColorGridItem } from './ThemeColorGridItem'
 import { SettingsPopoverTitle } from '../SettingsPopoverTitle'
-import { themeColorItems, type ThemeProps } from '@shared/theme'
+import { themeColorItems, type ThemeProps } from '@lib/theme'
 
 export function ThemeColorGrid({ themeColor }: Pick<ThemeProps, 'themeColor'>) {
   return (

src/layouts/default/LayoutHeader/SettingsPopover/ThemeColorGrid/ThemeColorGridItem/ThemeColorGridItem.tsx

@@ -5,7 +5,7 @@ import { Box, Tooltip } from '@radix-ui/themes'
 import capitalize from 'lodash.capitalize'
 import { clsx } from 'clsx'
 
-import { setThemeColorCookie, type ThemeColorItem } from '@shared/theme'
+import { setThemeColorCookie, type ThemeColorItem } from '@lib/theme'
 import styles from './ThemeColorGridItem.module.css'
 
 export function ThemeColorGridItem({ color, isSelected }: Props) {

src/layouts/default/LayoutHeader/SettingsPopover/ToggleTheme/ToggleTheme.tsx

@@ -5,7 +5,7 @@ import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
 import { clsx } from 'clsx'
 
 import { SettingsPopoverTitle } from '../SettingsPopoverTitle'
-import { setThemeCookie, type Theme, type ThemeProps } from '@shared/theme'
+import { setThemeCookie, type Theme, type ThemeProps } from '@lib/theme'
 import type { ClassNameProps } from '@app-types/ClassNameProps'
 import styles from './ToggleTheme.module.css'
 

src/shared/theme/actions.ts → src/lib/theme/actions.ts

@@ -4,7 +4,7 @@ import { cookies } from 'next/headers'
 
 import { THEME_COLOR_COOKIE_NAME, THEME_COOKIE_NAME } from './constants'
 import type { Theme } from './types'
-import type { RadixThemeColor } from '@libs/radix'
+import type { RadixThemeColor } from '@lib/theme'
 
 export async function setThemeCookie(value: Theme): Promise<void> {
   const cookieStore = cookies()

src/shared/theme/index.ts → src/lib/theme/index.ts

@@ -1,4 +1,5 @@
-export * from './appearance'
+export * from './radix/appearance'
+export * from './radix/types'
 export * from './actions'
 export * from './constants'
 export * from './types'

src/shared/theme/appearance.ts → src/lib/theme/radix/appearance.ts

@@ -1,4 +1,4 @@
-import type { ThemeColorItem } from './types'
+import type { ThemeColorItem } from '@lib/theme/types'
 
 export const themeColorItems: ThemeColorItem[] = [
   { key: 'tomato', color: 'tomato' },

src/shared/theme/types.ts → src/lib/theme/types.ts

@@ -1,4 +1,4 @@
-import type { RadixThemeColor } from '@libs/radix'
+import type { RadixThemeColor } from './radix/types'
 
 export type Theme = 'light' | 'dark'
 

src/shared/ui/ButtonBackTop/ButtonBackTop.tsx → src/lib/ui/ButtonBackTop/ButtonBackTop.tsx

@@ -5,7 +5,7 @@ import { ChevronUpIcon } from '@radix-ui/react-icons'
 import { type MutableRefObject, useEffect, useState } from 'react'
 import { clsx } from 'clsx'
 
-import type { ButtonSize } from '@libs/radix'
+import type { ButtonSize } from '@lib/theme'
 import type { ClassNameProps } from '@app-types/ClassNameProps'
 import styles from './ButtonBackTop.module.css'
 

src/shared/ui/ButtonClipboardCopy.tsx → src/lib/ui/ButtonClipboardCopy.tsx

@@ -4,7 +4,7 @@ import { IconButton } from '@radix-ui/themes'
 import { ClipboardCopyIcon } from '@radix-ui/react-icons'
 
 import { copyToClipboard } from '@helpers/copyToClipboard'
-import type { ButtonProps } from '@libs/radix'
+import type { ButtonProps } from '@lib/theme'
 
 export function ButtonClipboardCopy({ copyValue, size, variant = 'ghost', color = 'gray' }: Props) {
   const handleCopy = () => copyToClipboard(copyValue)

src/shared/ui/ButtonReset.tsx → src/lib/ui/ButtonReset.tsx

@@ -4,7 +4,7 @@ import { IconButton, Tooltip } from '@radix-ui/themes'
 import { ResetIcon } from '@radix-ui/react-icons'
 
 import { isTooltipOpen } from '@helpers/isTooltipOpen'
-import type { ButtonVariant } from '@libs/radix'
+import type { ButtonVariant } from '@lib/theme'
 
 export function ButtonReset({ tooltipTitle, disabled, variant, onClick }: Props) {
   return (

src/shared/ui/HexColorInput/HexColorInput.tsx → src/lib/ui/HexColorInput/HexColorInput.tsx

@@ -2,7 +2,7 @@ import { TextField } from '@radix-ui/themes'
 
 import { ButtonClipboardCopy } from '@ui/ButtonClipboardCopy'
 import { ColorInput } from './ColorInput'
-import type { TextFieldInputProps } from '@libs/radix'
+import type { TextFieldInputProps } from '@lib/theme'
 
 export const validHex = (value: string, alpha?: boolean): boolean => {
   const matcher = /^#?([0-9A-F]{3,8})$/i

src/shared/ui/LoadingSpinner/LoadingSpinner.tsx → src/lib/ui/LoadingSpinner/LoadingSpinner.tsx

@@ -1,6 +1,6 @@
 import { Box, type MarginProps } from '@radix-ui/themes'
 
-import type { Size } from '@libs/radix'
+import type { Size } from '@lib/theme'
 import styles from './LoadingSpinner.module.css'
 
 export function LoadingSpinner({ width, height, ...marginProps }: Props) {

src/shared/ui/icons/BlurIcon.tsx → src/lib/ui/icons/BlurIcon.tsx

@@ -1,11 +1,14 @@
-export function BlurIcon({ width = 24, height = 24 }: Props) {
+import type { SVGProps } from 'react'
+
+export function BlurIcon({ width = 24, height = 24, ...props }: SVGProps<SVGSVGElement>) {
   return (
     <svg
       width={width}
       height={height}
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      {...props}
     >
       <path
         d='M4.17768 3.18817C3.21205 3.37567 2.83705 4.58036 3.52612 5.29286C4.12612 5.90692 5.16674 5.73817 5.5558 4.96473C5.60268 4.87567 5.64955 4.66005 5.66362 4.4913C5.68237 4.2288 5.6683 4.13973 5.56987 3.9288C5.31205 3.3663 4.76362 3.07567 4.17768 3.18817Z'
@@ -74,8 +77,3 @@ export function BlurIcon({ width = 24, height = 24 }: Props) {
     </svg>
   )
 }
-
-interface Props {
-  width?: number
-  height?: number
-}