refactor(components): rename element -> item

src/components/element/card.spec.tsx → src/components/item/card/index.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import { describe } from 'vitest'
 
-import { ElementCard } from './card'
+import { ItemCard } from '.'
 
 import { albumMock, artistMock } from '@tests/mocks'
 
@@ -16,23 +16,21 @@ describe('ElementCard', () => {
   const genres = ['pop', 'rock', 'rap']
 
   test('should render component with required props', () => {
-    render(<ElementCard name={name} image={image} href={href} />)
+    render(<ItemCard name={name} image={image} href={href} />)
 
     expect(screen.getByText('Element 1')).toBeInTheDocument()
   })
 
   test('should render with artists', () => {
-    render(
-      <ElementCard name={name} image={image} href={href} artists={artists} />
-    )
+    render(<ItemCard name={name} image={image} href={href} artists={artists} />)
 
     expect(screen.getByText('Element 1')).toBeInTheDocument()
     expect(screen.getByText('Artist 1')).toBeInTheDocument()
   })
 
   test('should render with position', () => {
     render(
-      <ElementCard name={name} image={image} href={href} position={position} />
+      <ItemCard name={name} image={image} href={href} position={position} />
     )
 
     expect(screen.getByText('Element 1')).toBeInTheDocument()
@@ -41,7 +39,7 @@ describe('ElementCard', () => {
 
   test('should render with playedAt', () => {
     render(
-      <ElementCard name={name} image={image} href={href} playedAt={playedAt} />
+      <ItemCard name={name} image={image} href={href} playedAt={playedAt} />
     )
 
     expect(screen.getByText('Element 1')).toBeInTheDocument()
@@ -50,7 +48,7 @@ describe('ElementCard', () => {
 
   test('should render with showGenres prop', () => {
     render(
-      <ElementCard
+      <ItemCard
         name={name}
         image={image}
         href={href}

src/components/element/card.tsx → src/components/item/card/index.tsx

@@ -3,41 +3,27 @@ import { Image } from 'primereact/image'
 import { classNames } from 'primereact/utils'
 import { Chip } from 'primereact/chip'
 
-import { OpenInSpotifyButton } from '../common'
-import { RelativeTime } from '../utils'
+import { ItemCardBaseProps, ItemCardSize, ItemCardColor } from './types'
 
+import { OpenInSpotifyButton } from '@components/common'
+import { RelativeTime } from '@components/utils'
 import { Album, Artist, TrackArtist } from '@api/types'
 import { getArtists } from '@utils/get-artists'
 import { isMobile } from '@utils/is-mobile'
 
-export enum ElementCardColor {
-  SURFACE_GROUND = 'surface-ground',
-  SURFACE_CARD = 'surface-card',
-}
-
-export enum ElementCardSize {
-  SMALL = 'small',
-  MEDIUM = 'medium',
-  LARGE = 'large',
-}
-
-export interface ElementCardProps {
-  position?: number
+export interface ItemCardProps extends ItemCardBaseProps {
   name?: string
   image?: string
   href?: string
   album?: Album
   artists?: (Artist | TrackArtist)[]
   playedAt?: string
   genres?: string[]
-  showGenres?: boolean
-  color?: ElementCardColor
-  size?: ElementCardSize
 }
 
-const { LARGE, MEDIUM, SMALL } = ElementCardSize
+const { LARGE, MEDIUM, SMALL } = ItemCardSize
 
-export function ElementCard({
+export function ItemCard({
   position,
   image,
   name,
@@ -47,9 +33,9 @@ export function ElementCard({
   playedAt,
   genres,
   showGenres,
-  color = ElementCardColor.SURFACE_CARD,
+  color = ItemCardColor.SURFACE_CARD,
   size = SMALL,
-}: ElementCardProps) {
+}: ItemCardProps) {
   return (
     <Card
       onClick={() => isMobile() && window.open(href, '_blank')}
@@ -132,3 +118,6 @@ export function ElementCard({
     </Card>
   )
 }
+
+export * from './types'
+export * from './skeleton'

src/components/element/card-skeleton.tsx → src/components/item/card/skeleton.tsx

@@ -2,27 +2,23 @@ import { Card } from 'primereact/card'
 import { classNames } from 'primereact/utils'
 import { Skeleton } from 'primereact/skeleton'
 
-import { OpenInSpotifyButton } from '../common'
+import { ItemCardBaseProps, ItemCardColor, ItemCardSize } from './types'
 
-import { ElementCardColor, ElementCardSize } from '.'
+import { OpenInSpotifyButton } from '@components/common'
 
-export interface ElementCardSkeletonProps {
-  position?: number
-  artists?: boolean
-  showGenres?: boolean
-  color?: ElementCardColor
-  size?: ElementCardSize
+export interface ItemCardSkeletonProps extends ItemCardBaseProps {
+  hasArtists?: boolean
 }
 
-const { LARGE, SMALL } = ElementCardSize
+const { LARGE, SMALL } = ItemCardSize
 
-export function ElementCardSkeleton({
+export function ItemCardSkeleton({
   position,
-  artists,
+  hasArtists,
   showGenres,
-  color = ElementCardColor.SURFACE_CARD,
+  color = ItemCardColor.SURFACE_CARD,
   size = SMALL,
-}: ElementCardSkeletonProps) {
+}: ItemCardSkeletonProps) {
   return (
     <Card className={classNames(color, 'max-w-full')}>
       <main
@@ -61,12 +57,12 @@ export function ElementCardSkeleton({
               'flex-column justify-content-between flex min-w-0 w-full h-full',
               size === LARGE && 'flex-wrap',
               showGenres && 'gap-2',
-              artists && 'gap-2'
+              hasArtists && 'gap-2'
             )}
           >
             <Skeleton height="2rem" width="10rem" />
 
-            {artists && <Skeleton width="7rem" />}
+            {hasArtists && <Skeleton width="7rem" />}
 
             {showGenres && (
               <Skeleton borderRadius="10px" height="2rem" width="5rem" />

src/components/item/card/types/index.ts

@@ -0,0 +1,3 @@
+export * from './item-card-base-props'
+export * from './item-card-color'
+export * from './item-card-size'

src/components/item/card/types/item-card-base-props.ts

@@ -0,0 +1,9 @@
+import { ItemCardColor } from './item-card-color'
+import { ItemCardSize } from './item-card-size'
+
+export interface ItemCardBaseProps {
+  position?: number
+  showGenres?: boolean
+  color?: ItemCardColor
+  size?: ItemCardSize
+}

src/components/item/card/types/item-card-color.ts

@@ -0,0 +1,4 @@
+export enum ItemCardColor {
+  SURFACE_GROUND = 'surface-ground',
+  SURFACE_CARD = 'surface-card',
+}

src/components/item/card/types/item-card-size.ts

@@ -0,0 +1,5 @@
+export enum ItemCardSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}

src/components/element/top-one-card.spec.tsx → src/components/item/top-one-card/index.spec.tsx

@@ -1,18 +1,18 @@
 import { render, screen } from '@testing-library/react'
 import { describe } from 'vitest'
 
-import { TopOneElementCard, TopOneElementCardProps } from './top-one-card'
+import { TopOneItemCard, TopOneItemCardProps } from '.'
 
 describe('TopOneElementCard', () => {
-  const props: TopOneElementCardProps = {
+  const props: TopOneItemCardProps = {
     name: 'Element 1',
     image: 'image',
     href: 'href',
     genres: ['pop', 'rock', 'rap', 'hip-hop'],
   }
 
   test('should render component with props', () => {
-    render(<TopOneElementCard {...props} />)
+    render(<TopOneItemCard {...props} />)
 
     expect(screen.getByText('Element 1')).toBeInTheDocument()
     expect(screen.getByText('pop')).toBeInTheDocument()

src/components/element/top-one-card.tsx → src/components/item/top-one-card/index.tsx

@@ -3,27 +3,27 @@ import { Image } from 'primereact/image'
 import { Badge } from 'primereact/badge'
 import { classNames } from 'primereact/utils'
 
-import { OpenInSpotifyButton } from '../common'
+import { stars } from './stars'
 
+import { OpenInSpotifyButton } from '@components/common'
 import { isMobile } from '@utils/is-mobile'
 import { Album } from '@api/types'
 
-export interface TopOneElementCardProps {
+export interface TopOneItemCardProps {
   name: string
   image: string
   href: string
   genres?: string[]
   album?: Album
 }
 
-export function TopOneElementCard({
+export function TopOneItemCard({
   name,
   image,
   genres,
   href,
   album,
-}: TopOneElementCardProps) {
-  const stars = [10, 15, 20, 15, 10]
+}: TopOneItemCardProps) {
   return (
     <div className="flex-column align-items-center flex gap-4 xl:w-4">
       <div
@@ -88,3 +88,5 @@ export function TopOneElementCard({
     </div>
   )
 }
+
+export * from './skeleton'

src/components/element/top-one-card-skeleton.tsx → src/components/item/top-one-card/skeleton.tsx

@@ -2,18 +2,19 @@ import { Badge } from 'primereact/badge'
 import { classNames } from 'primereact/utils'
 import { Skeleton } from 'primereact/skeleton'
 
-import { OpenInSpotifyButton } from '../common'
+import { OpenInSpotifyButton } from '../../common'
 
-export interface TopOneElementCardSkeletonProps {
-  genres?: boolean
-  album?: boolean
+import { stars } from './stars'
+
+export interface TopOneItemCardSkeletonProps {
+  hasGenres?: boolean
+  hasAlbum?: boolean
 }
 
-export function TopOneElementCardSkeleton({
-  genres,
-  album,
-}: TopOneElementCardSkeletonProps) {
-  const stars = [10, 15, 20, 15, 10]
+export function TopOneItemCardSkeleton({
+  hasGenres,
+  hasAlbum,
+}: TopOneItemCardSkeletonProps) {
   return (
     <div className="flex-column align-items-center flex gap-4 xl:w-4">
       <div
@@ -27,7 +28,7 @@ export function TopOneElementCardSkeleton({
         </div>
       </div>
 
-      <div className={classNames('flex flex-column', genres && 'gap-4')}>
+      <div className={classNames('flex flex-column', hasGenres && 'gap-4')}>
         <div className="flex align-items-center flex-column gap-2">
           <Skeleton width="10rem" height="2rem" />
 
@@ -50,7 +51,7 @@ export function TopOneElementCardSkeleton({
 
         <div className="justify-content-center flex flex-wrap gap-2">
           <div className="flex flex-row gap-1">
-            {genres &&
+            {hasGenres &&
               Array.from({ length: 3 }).map((item, index) => (
                 <Skeleton
                   width="6rem"
@@ -61,7 +62,7 @@ export function TopOneElementCardSkeleton({
               ))}
           </div>
 
-          {album && <Skeleton height="2rem" className="my-4" />}
+          {hasAlbum && <Skeleton height="2rem" className="my-4" />}
         </div>
 
         <div className="flex align-self-center">

src/components/item/top-one-card/stars.ts

@@ -0,0 +1 @@
+export const stars = [10, 15, 20, 15, 10]