chore: organize imports with prettier

.prettierrc

@@ -2,5 +2,6 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-organize-imports"]
 }

package.json

@@ -68,6 +68,7 @@
     "dotenv-cli": "^7.2.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.1",
-    "prettier": "^2.8.7"
+    "prettier": "^2.8.7",
+    "prettier-plugin-organize-imports": "^3.2.3"
   }
 }

src/components/Article/Article.ImageBlockWrapper.tsx

@@ -1,7 +1,7 @@
+import { lsdUtils } from '@/utils/lsd.utils'
 import styled from '@emotion/styled'
 import { LPE } from '../../types/lpe.types'
 import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
-import { lsdUtils } from '@/utils/lsd.utils'
 
 type Props = {
   image: LPE.Image.Document

src/components/Authors/index.ts

@@ -1,2 +1,2 @@
-export { default as Authors } from './Authors'
 export { default as Author } from './Author'
+export { default as Authors } from './Authors'

src/components/ContentBlock/ContentBlock.Header.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 
 export enum BlockType {
   TEXT = 'text',

src/components/ContentBlock/ContentBlockFooter.tsx

@@ -1,7 +1,7 @@
+import { LPE } from '@/types/lpe.types'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import Link from 'next/link'
-import { LPE } from '@/types/lpe.types'
 
 type Props = {
   data: LPE.Post.Document

src/components/ContentBlock/ImageBlock.tsx

@@ -1,12 +1,11 @@
+import { lsdUtils } from '@/utils/lsd.utils'
+import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import Link from 'next/link'
 import { LPE } from '../../types/lpe.types'
-import { GridItem } from '../Grid/Grid'
 import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
-import ContentBlockFooter from './ContentBlockFooter'
 import ContentBlockHeader, { BlockType } from './ContentBlock.Header'
-import { lsdUtils } from '@/utils/lsd.utils'
-import { Typography } from '@acid-info/lsd-react'
+import ContentBlockFooter from './ContentBlockFooter'
 
 type Props = LPE.Search.ResultItemBase<LPE.Post.ImageBlock>
 

src/components/ContentBlock/TextBlock.tsx

@@ -1,12 +1,8 @@
-import { SearchResultItem } from '@/types/data.types'
-import { Typography } from '@acid-info/lsd-react'
-import styled from '@emotion/styled'
-import Link from 'next/link'
-import { LPE } from '../../types/lpe.types'
-import { GridItem } from '../Grid/Grid'
-import ContentBlockFooter from './ContentBlockFooter'
-import ContentBlockHeader, { BlockType } from './ContentBlock.Header'
 import { NicerTextFormat } from '@/components/Search/SearchResult.NicerTextFormat'
+import styled from '@emotion/styled'
+import { LPE } from '../../types/lpe.types'
+import ContentBlockHeader, { BlockType } from './ContentBlock.Header'
+import ContentBlockFooter from './ContentBlockFooter'
 
 type Props = LPE.Search.ResultItemBase<LPE.Post.TextBlock>
 

src/components/Episode/Episode.Block.tsx

@@ -2,11 +2,11 @@ import {
   extractClassFromFirstTag,
   extractIdFromFirstTag,
 } from '@/utils/html.utils'
+import { parseText, parseTimestamp } from '@/utils/string.utils'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import ReactPlayer from 'react-player'
 import { LPE } from '../../types/lpe.types'
-import { parseText, parseTimestamp } from '@/utils/string.utils'
 
 export const RenderEpisodeBlock = ({
   block,

src/components/Episode/Episode.Blocks.tsx

@@ -1,8 +1,8 @@
+import { Button } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 import { useState } from 'react'
 import { LPE } from '../../types/lpe.types'
 import { RenderEpisodeBlock } from './Episode.Block'
-import styled from '@emotion/styled'
-import { Button } from '@acid-info/lsd-react'
 
 type Props = {
   data: LPE.Podcast.Document

src/components/Episode/Episode.Body.tsx

@@ -1,11 +1,10 @@
 import styled from '@emotion/styled'
+import { useHookstate } from '@hookstate/core'
 import { LPE } from '../../types/lpe.types'
+import { playerState } from '../GlobalAudioPlayer/globalAudioPlayer.state'
+import EpisodeTranscript from './Episode.Transcript'
 import EpisodeFooter from './Footer/Episode.Footer'
 import EpisodeHeader from './Header/Episode.Header'
-import EpisodeTranscript from './Episode.Transcript'
-import { playerState } from '../GlobalAudioPlayer/globalAudioPlayer.state'
-import { useHookstate } from '@hookstate/core'
-import { uiConfigs } from '@/configs/ui.configs'
 
 interface Props {
   episode: LPE.Podcast.Document

src/components/Episode/Episode.Transcript.tsx

@@ -1,7 +1,7 @@
+import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { LPE } from '../../types/lpe.types'
 import EpisodeBlocks from './Episode.Blocks'
-import { Typography } from '@acid-info/lsd-react'
 import EpisodeDivider from './Episode.Divider'
 
 const EpisodeTranscript = ({ episode }: { episode: LPE.Podcast.Document }) => {

src/components/Episode/Footer/Episode.Credits.tsx

@@ -1,7 +1,7 @@
 import { Collapse, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import { LPE } from '../../../types/lpe.types'
 import { useState } from 'react'
+import { LPE } from '../../../types/lpe.types'
 
 const EpisodeCredits = ({
   credits,

src/components/Episode/Footer/Episode.Footer.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled'
+import { useMemo } from 'react'
 import { LPE } from '../../../types/lpe.types'
 import EpisodeCredits from './Episode.Credits'
-import RelatedEpisodes from './Episode.RelatedEpisodes'
-import { useMemo } from 'react'
 import EpisodeFootnotes from './Episode.Footnotes'
+import RelatedEpisodes from './Episode.RelatedEpisodes'
 
 type Props = {
   episode: LPE.Podcast.Document

src/components/Episode/Footer/Episode.Footnotes.tsx

@@ -1,7 +1,7 @@
 import { Collapse, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import { LPE } from '../../../types/lpe.types'
 import { useState } from 'react'
+import { LPE } from '../../../types/lpe.types'
 
 const EpisodeFootnotes = ({
   footnotes,

src/components/Episode/Header/Episode.Channels.tsx

@@ -1,10 +1,10 @@
-import { Typography } from '@acid-info/lsd-react'
-import styled from '@emotion/styled'
-import { LPE } from '../../../types/lpe.types'
 import { ApplePodcastsIcon } from '@/components/Icons/ApplePodcastsIcon'
 import { GooglePodcastsIcon } from '@/components/Icons/GooglePodcastsIcon'
 import { SpotifyIcon } from '@/components/Icons/SpotifyIcon'
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 import Link from 'next/link'
+import { LPE } from '../../../types/lpe.types'
 
 export type EpisodeChannelProps = {
   channels: LPE.Podcast.Channel[]

src/components/Episode/Header/Episode.Header.tsx

@@ -1,14 +1,12 @@
-import { Tags } from '@/components/Tags'
+import { TagsAndSocial } from '@/components/TagsAndSocial'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import { LPE } from '../../../types/lpe.types'
-import EpisodeChannels from './Episode.Channels'
-import EpisodeStats from '../Episode.Stats'
-import EpisodePlayer from './Episode.Player'
 import Image from 'next/image'
 import Link from 'next/link'
-import { ShareButton } from '@/components/ShareButton'
-import { TagsAndSocial } from '@/components/TagsAndSocial'
+import { LPE } from '../../../types/lpe.types'
+import EpisodeStats from '../Episode.Stats'
+import EpisodeChannels from './Episode.Channels'
+import EpisodePlayer from './Episode.Player'
 
 export type EpisodeHeaderProps = LPE.Podcast.Document & {
   channel: LPE.Podcast.Channel

src/components/Episode/Header/Episode.Player.tsx

@@ -1,13 +1,13 @@
-import styled from '@emotion/styled'
-import ReactPlayer from 'react-player'
-import { useHookstate } from '@hookstate/core'
-import { playerState } from '@/components/GlobalAudioPlayer/globalAudioPlayer.state'
-import { useEffect, useRef, useState } from 'react'
 import { episodeState } from '@/components/GlobalAudioPlayer/episode.state'
-import SimplecastPlayer from './Episode.SimplecastPlayer'
-import { LPE } from '@/types/lpe.types'
-import { useRouter } from 'next/router'
+import { playerState } from '@/components/GlobalAudioPlayer/globalAudioPlayer.state'
 import { ResponsiveImage } from '@/components/ResponsiveImage/ResponsiveImage'
+import { LPE } from '@/types/lpe.types'
+import styled from '@emotion/styled'
+import { useHookstate } from '@hookstate/core'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+import ReactPlayer from 'react-player'
+import SimplecastPlayer from './Episode.SimplecastPlayer'
 
 export type EpisodePlayerProps = {
   channel: LPE.Podcast.Channel

src/components/Episode/Header/Episode.SimplecastPlayer.tsx

@@ -1,13 +1,13 @@
 import { playerState } from '@/components/GlobalAudioPlayer/globalAudioPlayer.state'
-import { LPE } from '@/types/lpe.types'
-import styled from '@emotion/styled'
-import { useHookstate } from '@hookstate/core'
-import { useState } from 'react'
 import {
   LpeAudioPlayerControls,
   PlayerType,
 } from '@/components/LpePlayer/Controls/Controls'
 import { ResponsiveImage } from '@/components/ResponsiveImage/ResponsiveImage'
+import { LPE } from '@/types/lpe.types'
+import styled from '@emotion/styled'
+import { useHookstate } from '@hookstate/core'
+import { useState } from 'react'
 
 export type SimplecastPlayerProps = {
   playing: boolean

src/components/Footer/Footer.BuPanel.tsx

@@ -1,8 +1,8 @@
-import { Typography } from '@acid-info/lsd-react'
-import styled from '@emotion/styled'
 import { FooterLink } from '@/components/Footer/Footer.Link'
 import { FooterSection } from '@/components/Footer/Footer.Section'
 import { FooterLinksItems } from '@/configs/data.configs'
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 
 export const FooterBuPanel = () => {
   return (

src/components/Footer/Footer.Copyright.tsx

@@ -1,5 +1,5 @@
-import { Typography } from '@acid-info/lsd-react'
 import { FooterSection } from '@/components/Footer/Footer.Section'
+import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 
 export const FooterCopyright = () => (

src/components/Footer/Footer.Link.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 
 export const FooterLink = styled(Typography)`
   width: fit-content;

src/components/Footer/Footer.OrgPanel.tsx

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled'
-import { FooterSection } from '@/components/Footer/Footer.Section'
-import { FooterLink } from '@/components/Footer/Footer.Link'
 import { FooterCopyright } from '@/components/Footer/Footer.Copyright'
+import { FooterLink } from '@/components/Footer/Footer.Link'
+import { FooterSection } from '@/components/Footer/Footer.Section'
 import { FooterLinksItems } from '@/configs/data.configs'
+import styled from '@emotion/styled'
 
 export const FooterOrgPanel = () => {
   return (

src/components/Footer/Footer.tsx

@@ -1,8 +1,8 @@
-import { Button } from '@acid-info/lsd-react'
-import styled from '@emotion/styled'
+import { FooterBuPanel } from '@/components/Footer/Footer.BuPanel'
 import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
 import { FooterSectionContainer } from '@/components/Footer/Footer.Section'
-import { FooterBuPanel } from '@/components/Footer/Footer.BuPanel'
+import { Button } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 
 export default function Footer() {
   const handleScrollToTop = () => {

src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx

@@ -1,13 +1,13 @@
-import ReactPlayer from 'react-player'
-import styled from '@emotion/styled'
-import React, { useEffect, useRef } from 'react'
-import { CloseIcon, Typography } from '@acid-info/lsd-react'
-import Image from 'next/image'
-import { playerState } from './globalAudioPlayer.state'
-import { useHookstate } from '@hookstate/core'
-import { episodeState } from './episode.state'
 import { LpeAudioPlayer } from '@/components/LpePlayer/LpeAudioPlayer'
+import { CloseIcon, Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import { useHookstate } from '@hookstate/core'
+import Image from 'next/image'
+import React, { useEffect, useRef } from 'react'
+import ReactPlayer from 'react-player'
 import { PlayerType } from '../LpePlayer/Controls/Controls'
+import { episodeState } from './episode.state'
+import { playerState } from './globalAudioPlayer.state'
 
 export default function GlobalAudioPlayer() {
   const state = useHookstate(playerState)

src/components/Hero/Hero.tags.tsx

@@ -1,6 +1,6 @@
+import { LPETag } from '@/components/LPETag'
 import styled from '@emotion/styled'
 import React from 'react'
-import { LPETag } from '@/components/LPETag'
 
 export type NavbarFilter = Partial<React.ComponentProps<typeof Container>> & {
   tags?: string[]

src/components/Hero/Hero.tsx

@@ -1,11 +1,11 @@
 import { HeroTags } from '@/components/Hero/Hero.tags'
+import { copyConfigs } from '@/configs/copy.configs'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { useEffect, useRef } from 'react'
 import { useWindowScroll } from 'react-use'
 import { uiConfigs } from '../../configs/ui.configs'
 import { useNavbarState } from '../../states/navbarState'
-import { copyConfigs } from '@/configs/copy.configs'
 
 export type HeroProps = Partial<React.ComponentProps<typeof Container>> & {
   tags?: string[]

src/components/Icons/LogosIcon/LogosIcon.tsx

@@ -1,4 +1,4 @@
-import { LsdIcon } from "@acid-info/lsd-react";
+import { LsdIcon } from '@acid-info/lsd-react'
 
 export const LogosIcon = LsdIcon(
   (props) => (
@@ -24,5 +24,5 @@ export const LogosIcon = LsdIcon(
       />
     </svg>
   ),
-  { filled: true }
-);
+  { filled: true },
+)

src/components/Icons/MoonIcon/MoonIcon.tsx

@@ -1,4 +1,4 @@
-import { LsdIcon } from "@acid-info/lsd-react";
+import { LsdIcon } from '@acid-info/lsd-react'
 
 export const MoonIcon = LsdIcon(
   (props) => (
@@ -16,5 +16,5 @@ export const MoonIcon = LsdIcon(
       />
     </svg>
   ),
-  { filled: true }
-);
+  { filled: true },
+)

src/components/Icons/SunIcon/SunIcon.tsx

@@ -1,4 +1,4 @@
-import { LsdIcon } from "@acid-info/lsd-react";
+import { LsdIcon } from '@acid-info/lsd-react'
 
 export const SunIcon = LsdIcon(
   (props) => (
@@ -16,5 +16,5 @@ export const SunIcon = LsdIcon(
       />
     </svg>
   ),
-  { filled: true }
-);
+  { filled: true },
+)

src/components/LPETag/LPETag.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import { Tag } from '@acid-info/lsd-react'
 import { formatTagText } from '@/utils/string.utils'
+import { Tag } from '@acid-info/lsd-react'
 import { TagProps } from '@acid-info/lsd-react/dist/components/Tag/Tag'
 import styled from '@emotion/styled'
+import Link from 'next/link'
 
 interface Props {
   tag: string

src/components/LpePlayer/Controls/Controls.TimeTrack.tsx

@@ -1,6 +1,6 @@
 // TimeTracker.tsx
-import React, { useState, useRef, useEffect } from 'react'
 import styled from '@emotion/styled'
+import React, { useEffect, useRef, useState } from 'react'
 
 export interface ControlsTimeTrackProps {
   min?: number

src/components/LpePlayer/Controls/Controls.tsx

@@ -1,16 +1,15 @@
-import styled from '@emotion/styled'
+import styles from '@/components/GlobalAudioPlayer/GlobalAudioPlayer.module.css'
+import { MuteIcon } from '@/components/Icons/MuteIcon'
 import { PauseIcon } from '@/components/Icons/PauseIcon'
 import { PlayIcon } from '@/components/Icons/PlayIcon'
-import { convertSecToMinAndSec } from '@/utils/string.utils'
-import { Typography } from '@acid-info/lsd-react'
-import { MuteIcon } from '@/components/Icons/MuteIcon'
 import { VolumeIcon } from '@/components/Icons/VolumeIcon'
-import styles from '@/components/GlobalAudioPlayer/GlobalAudioPlayer.module.css'
-import React from 'react'
 import {
   ControlsTimeTrackProps,
   TimeTrack,
 } from '@/components/LpePlayer/Controls/Controls.TimeTrack'
+import { convertSecToMinAndSec } from '@/utils/string.utils'
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 
 export enum PlayerType {
   GLOBAL = 'global',

src/components/LpePlayer/LpeAudioPlayer.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
-import styled from '@emotion/styled'
 import {
   LpeAudioPlayerControls,
   LpeAudioPlayerControlsProps,
 } from '@/components/LpePlayer/Controls/Controls'
+import styled from '@emotion/styled'
 
 interface LpeAudioPlayerProps {
   controlProps: LpeAudioPlayerControlsProps

src/components/NavBar/Navbar.Links.tsx

@@ -1,6 +1,6 @@
-import Link from 'next/link'
-import styled from '@emotion/styled'
 import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 interface Props {

src/components/NavBar/Navbar.MobileMenu.tsx

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled'
+import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
 import { NavbarLinks } from '@/components/NavBar/Navbar.Links'
+import { ThemeSwitchWithLabel } from '@/components/ThemeSwitch/ThemeSwitch'
 import { NavLinksItems } from '@/configs/data.configs'
 import { uiConfigs } from '@/configs/ui.configs'
-import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
 import { useThemeState } from '@/states/themeState'
-import { ThemeSwitchWithLabel } from '@/components/ThemeSwitch/ThemeSwitch'
+import styled from '@emotion/styled'
 import { useEffect } from 'react'
 import { SocialMediaKit } from './Navbar.SocialMediaKit'
 

src/components/NavBar/Navbar.SocialMediaKit.tsx

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled'
-import Link from 'next/link'
 import { DiscordIcon } from '@/components/Icons/DiscordIcon'
 import { XIcon } from '@/components/Icons/XIcon'
 import { YoutubeIcon } from '@/components/Icons/YTIcon'
 import { FooterLinksItems } from '@/configs/data.configs'
 import { LPEFooterGroup } from '@/types/ui.types'
+import styled from '@emotion/styled'
+import Link from 'next/link'
 
 const socialLinks = FooterLinksItems.about.find(
   (item) => item.key === 'social',

src/components/Podcasts/Podcast.Host.tsx

@@ -1,6 +1,5 @@
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import React from 'react'
 import { LPE } from '../../types/lpe.types'
 
 interface Props {

src/components/Podcasts/Podcasts.Lists.tsx

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled'
-import { LPE } from '../../types/lpe.types'
 import { ArrowDownIcon, Button, Typography } from '@acid-info/lsd-react'
-import Link from 'next/link'
+import styled from '@emotion/styled'
 import Image from 'next/image'
+import Link from 'next/link'
+import { LPE } from '../../types/lpe.types'
 import { Grid, GridItem } from '../Grid/Grid'
 import PodcastHost from './Podcast.Host'
 

src/components/PostCard/PostCard.Cover.tsx

@@ -4,10 +4,9 @@ import {
 } from '@/components/ResponsiveImage/ResponsiveImage'
 import { LPE } from '@/types/lpe.types'
 import { IconButton } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 import Link from 'next/link'
 import { FC } from 'react'
-import { PlayIcon } from '../Icons/PlayIcon'
-import styled from '@emotion/styled'
 import { UnfilledPlayIcon } from '../Icons/UnfilledPlayIcon'
 
 export type PostCardCoverProps = React.ComponentProps<typeof Link> & {

src/components/PostCard/PostCard.Subtitle.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@acid-info/lsd-react'
-import React, { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
 export const PostCardSubTitle = ({ children }: PropsWithChildren) => (
   <Typography

src/components/PostCard/PostCard.Title.tsx

@@ -1,7 +1,6 @@
-import styled from '@emotion/styled'
 import { Typography } from '@acid-info/lsd-react'
 import Link from 'next/link'
-import React, { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
 interface Props {
   href: string

src/components/PostCard/PostCard.tsx

@@ -3,6 +3,8 @@ import {
   PostCardShowDetails,
   PostCardShowDetailsProps,
 } from '@/components/PostCard/PostCard.ShowDetails'
+import { PostCardSubTitle } from '@/components/PostCard/PostCard.Subtitle'
+import { PostCardTitle } from '@/components/PostCard/PostCard.Title'
 import { Tags } from '@/components/Tags'
 import { Theme } from '@acid-info/lsd-react'
 import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
@@ -16,8 +18,6 @@ import { Authors } from '../Authors'
 import { AuthorsDirection } from '../Authors/Authors'
 import { ResponsiveImageProps } from '../ResponsiveImage/ResponsiveImage'
 import { PostCardLabel } from './PostCard.Label'
-import { PostCardTitle } from '@/components/PostCard/PostCard.Title'
-import { PostCardSubTitle } from '@/components/PostCard/PostCard.Subtitle'
 
 export type PostAppearanceProps = {
   imageProps?: ResponsiveImageProps

src/components/PostCard/PostResultCard.tsx

@@ -1,23 +1,16 @@
 import { PostCardCover } from '@/components/PostCard/PostCard.Cover'
 import { PostCardShowDetails } from '@/components/PostCard/PostCard.ShowDetails'
 import { Tags } from '@/components/Tags'
-import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
 import styled from '@emotion/styled'
 import clsx from 'clsx'
 
-import React from 'react'
+import { PostCardProps } from '@/components/PostCard/PostCard'
+import { PostCardSubTitle } from '@/components/PostCard/PostCard.Subtitle'
+import { PostCardTitle } from '@/components/PostCard/PostCard.Title'
 import { LPE } from '../../types/lpe.types'
 import { Authors } from '../Authors'
 import { AuthorsDirection } from '../Authors/Authors'
-import { ResponsiveImageProps } from '../ResponsiveImage/ResponsiveImage'
 import { PostCardLabel } from './PostCard.Label'
-import { PostCardTitle } from '@/components/PostCard/PostCard.Title'
-import { PostCardSubTitle } from '@/components/PostCard/PostCard.Subtitle'
-import {
-  PostAppearanceProps,
-  PostCardProps,
-  PostDataProps,
-} from '@/components/PostCard/PostCard'
 
 type PostResultCardProps = Omit<PostCardProps, 'size'>
 

src/components/PostCard/index.ts

@@ -1,2 +1,2 @@
-export type { PostCardProps } from './PostCard'
 export { PostCard } from './PostCard'
+export type { PostCardProps } from './PostCard'

src/components/PostList/PostList.tsx

@@ -1,10 +1,10 @@
+import { PostCard } from '@/components/PostCard'
 import { PostListLayout } from '@/types/ui.types'
 import { Button, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { useEffect, useState } from 'react'
 import { LPE } from '../../types/lpe.types'
 import { Grid, GridItem } from '../Grid/Grid'
-import { PostCard } from '@/components/PostCard'
 import PostTypes = LPE.PostTypes
 
 type Props = {

src/components/PostsGrid/PostsGrid.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { Breakpoints, Theme, useTheme } from '@acid-info/lsd-react'
-import { css, SerializedStyles } from '@emotion/react'
+import { SerializedStyles, css } from '@emotion/react'
 import styled from '@emotion/styled'
 import React, { useMemo } from 'react'
 import { LPE } from '../../types/lpe.types'

src/components/Search/SearchResult.Blocks.tsx

@@ -1,7 +1,6 @@
+import { ImageBlock, TextBlock } from '@/components/ContentBlock'
 import { LPE } from '@/types/lpe.types'
 import styled from '@emotion/styled'
-import { PostCard } from '@/components/PostCard'
-import { ImageBlock, TextBlock } from '@/components/ContentBlock'
 
 interface Props {
   blocks: LPE.Search.ResultItemBase<LPE.Post.ContentBlock>[]

src/components/Search/SearchResult.NicerTextFormat.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { Typography, TypographyProps } from '@acid-info/lsd-react'
+import React from 'react'
 
 type UrlReplacerProps = {
   rawHtml: string

src/components/Search/SearchResult.TopPost.Blocks.tsx

@@ -1,11 +1,9 @@
-import { LPE } from '@/types/lpe.types'
-import styled from '@emotion/styled'
 import { ParagraphIcon } from '@/components/Icons/ParagraphIcon'
 import { ResponsiveImage } from '@/components/ResponsiveImage/ResponsiveImage'
-import { Grid, GridItem } from '@/components/Grid/Grid'
-import { Typography } from '@acid-info/lsd-react'
-import { uiConfigs } from '@/configs/ui.configs'
 import { NicerTextFormat } from '@/components/Search/SearchResult.NicerTextFormat'
+import { LPE } from '@/types/lpe.types'
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
 
 interface Props {
   textBlocks: LPE.Post.TextBlock[]

src/components/Search/SearchResult.TopPost.tsx

@@ -1,9 +1,8 @@
-import { LPE } from '@/types/lpe.types'
-import styled from '@emotion/styled'
 import { PostCard } from '@/components/PostCard'
 import { SearchResultTopPostBlocks } from '@/components/Search/SearchResult.TopPost.Blocks'
-import { Typography } from '@acid-info/lsd-react'
+import { LPE } from '@/types/lpe.types'
 import { lsdUtils } from '@/utils/lsd.utils'
+import styled from '@emotion/styled'
 
 interface Props {
   post: LPE.Search.ResultItemBase<LPE.Post.Document>

src/components/Search/SearchResultList.Posts.tsx

@@ -1,6 +1,6 @@
+import { PostCard } from '@/components/PostCard'
 import { LPE } from '@/types/lpe.types'
 import styled from '@emotion/styled'
-import { PostCard } from '@/components/PostCard'
 
 interface Props {
   posts: LPE.Search.ResultItemBase<LPE.Post.Document>[]

src/components/SearchBox/SearchBox.tsx

@@ -1,23 +1,22 @@
-import styled from '@emotion/styled'
-import { Dropdown, TabItem, Tabs, Typography } from '@acid-info/lsd-react'
-import React, { useEffect, useRef, useState } from 'react'
-import { useRouter } from 'next/router'
-import { nope } from '@/utils/general.utils'
-import { LPE } from '@/types/lpe.types'
-import PostTypes = LPE.PostTypes
-import ContentBlockTypes = LPE.Post.ContentBlockTypes
 import { copyConfigs } from '@/configs/copy.configs'
 import { uiConfigs } from '@/configs/ui.configs'
+import { LPE } from '@/types/lpe.types'
+import { nope } from '@/utils/general.utils'
+import { lsdUtils } from '@/utils/lsd.utils'
+import { formatTagText } from '@/utils/string.utils'
 import { useHydrated } from '@/utils/useHydrated.util'
+import { Dropdown, TabItem, Tabs, Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import React, { useEffect, useRef, useState } from 'react'
+import { useDeepCompareEffect } from 'react-use'
 import {
   ArrayParam,
   StringParam,
   useQueryParam,
   withDefault,
 } from 'use-query-params'
-import { useDeepCompareEffect } from 'react-use'
-import { lsdUtils } from '@/utils/lsd.utils'
-import { formatTagText } from '@/utils/string.utils'
+import PostTypes = LPE.PostTypes
+import ContentBlockTypes = LPE.Post.ContentBlockTypes
 interface SearchBoxProps {
   onSearch?: (query: string, tags: string[], types: LPE.ContentType[]) => void
   tags?: string[]

src/components/SearchResultsSection/SearchResultsSection.tsx

@@ -1,6 +1,6 @@
 import { Section } from '@/components/Section/Section'
-import React, { PropsWithChildren } from 'react'
 import { Typography } from '@acid-info/lsd-react'
+import { PropsWithChildren } from 'react'
 
 type Props = PropsWithChildren<{
   resultSize: number

src/components/ShareButton/ShareButton.tsx

@@ -1,11 +1,11 @@
 import { Tag, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import { ShareIcon } from '../Icons/ShareIcon'
-import { useRef, useState } from 'react'
-import { CopyIcon } from '../Icons/CopyIcon'
-import { XIcon } from '../Icons/XIcon'
 import Link from 'next/link'
+import { useRef, useState } from 'react'
 import { useClickAway } from 'react-use'
+import { CopyIcon } from '../Icons/CopyIcon'
+import { ShareIcon } from '../Icons/ShareIcon'
+import { XIcon } from '../Icons/XIcon'
 
 type Props = {
   url: string

src/components/Tags/Tags.tsx

@@ -1,6 +1,6 @@
+import { LPETag } from '@/components/LPETag'
 import styled from '@emotion/styled'
 import { useRouter } from 'next/router'
-import { LPETag } from '@/components/LPETag'
 
 export type TagsProps = React.ComponentProps<typeof TagsContainer> & {
   tags: string[]

src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -1,8 +1,7 @@
-import { SunIcon } from '@/components/Icons/SunIcon'
 import { MoonIcon } from '@/components/Icons/MoonIcon'
-import { Button, IconButton } from '@acid-info/lsd-react'
-import React from 'react'
+import { SunIcon } from '@/components/Icons/SunIcon'
 import { ThemeState } from '@/states/themeState'
+import { Button, IconButton } from '@acid-info/lsd-react'
 interface Props {
   toggle: () => void
   mode?: ThemeState['mode']

src/configs/data.configs.ts

@@ -1,5 +1,5 @@
-import { LPEFooterGroup } from '@/types/ui.types'
 import { siteConfigs } from '@/configs/site.configs'
+import { LPEFooterGroup } from '@/types/ui.types'
 
 export const ArticleBlocksOrders = {
   title: 0,

src/containers/HomePage/HomePage.tsx

@@ -1,11 +1,10 @@
 import { Button, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import React, { useEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Hero } from '../../components/Hero'
 import { PostsGrid } from '../../components/PostsGrid'
 import { uiConfigs } from '../../configs/ui.configs'
 import { useRecentPosts } from '../../queries/useRecentPosts.query'
-import { api } from '../../services/api.service'
 import { LPE } from '../../types/lpe.types'
 import { lsdUtils } from '../../utils/lsd.utils'
 import { PodcastShowsPreview } from '../PodcastShowsPreview'

src/containers/PodcastsContainer.tsx

@@ -2,7 +2,6 @@ import { Grid, GridItem } from '@/components/Grid/Grid'
 import EpisodesList from '@/components/Podcasts/Episodes.List'
 import PodcastSection from '@/components/Podcasts/Podcast.Section'
 import PodcastsLists from '@/components/Podcasts/Podcasts.Lists'
-import { uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import { LPE } from '../types/lpe.types'
 import { lsdUtils } from '../utils/lsd.utils'

src/containers/Search/ExploreView.tsx

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled'
-import { LPE } from '@/types/lpe.types'
-import { Grid, GridItem } from '@/components/Grid/Grid'
-import { useMemo } from 'react'
-import { PostCard } from '@/components/PostCard'
 import { ImageBlock, TextBlock } from '@/components/ContentBlock'
+import { Grid, GridItem } from '@/components/Grid/Grid'
+import { PostCard } from '@/components/PostCard'
 import { uiConfigs } from '@/configs/ui.configs'
+import { LPE } from '@/types/lpe.types'
+import styled from '@emotion/styled'
+import { useMemo } from 'react'
 
 type Block = LPE.Search.ResultItemBase<LPE.Post.ContentBlock>
 type Post = LPE.Search.ResultItemBase<LPE.Post.Document>

src/containers/Search/ListView.tsx

@@ -1,16 +1,16 @@
-import styled from '@emotion/styled'
-import { LPE } from '@/types/lpe.types'
 import { Grid, GridItem } from '@/components/Grid/Grid'
+import { SearchResultListBlocks } from '@/components/Search/SearchResult.Blocks'
+import { SearchResultTopPost } from '@/components/Search/SearchResult.TopPost'
+import { SearchResultListPosts } from '@/components/Search/SearchResultList.Posts'
 import { SearchResultsListHeader } from '@/components/Search/SearchResultsList.Header'
 import { copyConfigs } from '@/configs/copy.configs'
-import { SearchResultListPosts } from '@/components/Search/SearchResultList.Posts'
-import { useMemo } from 'react'
-import { SearchResultTopPost } from '@/components/Search/SearchResult.TopPost'
-import { SearchResultListBlocks } from '@/components/Search/SearchResult.Blocks'
-import { Typography } from '@acid-info/lsd-react'
-import { lsdUtils } from '@/utils/lsd.utils'
 import { uiConfigs } from '@/configs/ui.configs'
+import { LPE } from '@/types/lpe.types'
+import { lsdUtils } from '@/utils/lsd.utils'
 import useWindowSize from '@/utils/ui.utils'
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import { useMemo } from 'react'
 
 interface Props {
   posts: LPE.Search.ResultItemBase<LPE.Post.Document>[]

src/containers/StaticPage/StaticPage.tsx

@@ -1,8 +1,8 @@
+import { RenderArticleBlock } from '@/components/Article/Article.Block'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import React from 'react'
 import { LPE } from '../../types/lpe.types'
-import { RenderArticleBlock } from '@/components/Article/Article.Block'
 
 export type StaticPageProps = React.DetailedHTMLProps<
   React.HTMLAttributes<HTMLDivElement>,

src/pages/[slug].tsx

@@ -3,7 +3,6 @@ import Error from 'next/error'
 import SEO from '../components/SEO/SEO'
 import { StaticPage, StaticPageProps } from '../containers/StaticPage'
 import unbodyApi from '../services/unbody/unbody.service'
-import NotFoundPage from './404'
 
 type PageProps = Partial<Pick<StaticPageProps, 'data'>> & {
   error?: string

src/pages/podcasts/[showSlug]/[epSlug].tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/router'
 import { LPE } from '../../../types/lpe.types'
 
 import unbodyApi from '@/services/unbody/unbody.service'
-import { DefaultLayout } from '../../../layouts/DefaultLayout'
 
 type EpisodeProps = {
   episode: LPE.Podcast.Document

src/services/unbody/dataTypes/index.ts

@@ -1,7 +1,7 @@
 export * from './ArticleDocument.dataType'
 export * from './ArticleImageBlock.dataType'
 export * from './ArticleTextBlock.dataType'
-export * from './dataTypes'
 export * from './TextBlock.dataType'
-export * from './types'
 export * from './UnbodyDataTypes'
+export * from './dataTypes'
+export * from './types'

src/services/unbody/unbody.service.ts

@@ -15,8 +15,8 @@ import {
 import { ApiResponse, SearchResultItem } from '../../types/data.types'
 import { LPE } from '../../types/lpe.types'
 import {
-  createPromise,
   CreatePromiseResult,
+  createPromise,
   settle,
 } from '../../utils/promise.utils'
 import { unbodyDataTypes } from './dataTypes'

src/types/ui.types.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 export const enum PostListLayout {
   XXXX = 'xxxx',
   XXXX_XX = 'xxxx_xx',

src/utils/lsd.utils.ts

@@ -1,10 +1,10 @@
 import {
   Breakpoints,
+  THEME_BREAKPOINTS,
   Theme,
   TypographyVariants,
-  THEME_BREAKPOINTS,
 } from '@acid-info/lsd-react'
-import { css, SerializedStyles } from '@emotion/react'
+import { SerializedStyles, css } from '@emotion/react'
 
 export class LsdUtils {
   breakpoints = (exclude: Breakpoints[] = []) =>

yarn.lock

@@ -4586,6 +4586,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-organize-imports@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.3.tgz#6b0141ac71f7ee9a673ce83e95456319e3a7cf0d"
+  integrity sha512-KFvk8C/zGyvUaE3RvxN2MhCLwzV6OBbFSkwZ2OamCrs9ZY4i5L77jQ/w4UmUr+lqX8qbaqVq6bZZkApn+IgJSg==
+
 prettier@^2.8.7:
   version "2.8.7"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"