ref: 👷 props, types, interfaces

- major refactor of naming
- separate files for: props, types, interfaces

__tests__/jest/getSkillBadgeColor.test.ts

@@ -1,26 +1,26 @@
 import { getSkillBadgeColor } from '@/utils/getSkillBadgeColor'
-import { CategoryDescriptionType } from '@/utils/types'
+import { SkillCategoryType } from '@/utils/types'
 
 describe('getSkillBadgeColor', () => {
   it('returns "yellow" color for "Frontend"', () => {
-    expect(getSkillBadgeColor('Frontend' as CategoryDescriptionType)).toEqual('yellow')
+    expect(getSkillBadgeColor('Frontend' as SkillCategoryType)).toEqual('yellow')
   })
 
   it('returns "indigo" color for "Design"', () => {
-    expect(getSkillBadgeColor('Design' as CategoryDescriptionType)).toEqual('indigo')
+    expect(getSkillBadgeColor('Design' as SkillCategoryType)).toEqual('indigo')
   })
 
   it('return "lime" color for "Other"', () => {
-    expect(getSkillBadgeColor('Other' as CategoryDescriptionType)).toEqual('lime')
+    expect(getSkillBadgeColor('Other' as SkillCategoryType)).toEqual('lime')
   })
 
   it('returns "neutral" for unknown category', () => {
-    const category: CategoryDescriptionType = 'unknown' as CategoryDescriptionType
+    const category: SkillCategoryType = 'unknown' as SkillCategoryType
     expect(getSkillBadgeColor(category)).toEqual('neutral')
   })
 
   it('returns "neutral" for empty category', () => {
-    const category: CategoryDescriptionType = '' as CategoryDescriptionType
+    const category: SkillCategoryType = '' as SkillCategoryType
     expect(getSkillBadgeColor(category)).toEqual('neutral')
   })
 })

app/error.tsx

@@ -2,7 +2,7 @@
 
 import { ErrorPageLayout } from '@/components/layout/ErrorPageLayout'
 import { ID } from '@/utils/constants'
-import { ErrorProps } from '@/utils/types'
+import { ErrorProps } from '@/utils/sharedComponentProps'
 
 export default function Error({ error, reset }: ErrorProps) {
   return (

app/global-error.tsx

@@ -2,7 +2,7 @@
 
 import { ErrorPageLayout } from '@/components/layout/ErrorPageLayout'
 import { ID } from '@/utils/constants'
-import { ErrorProps } from '@/utils/types'
+import { ErrorProps } from '@/utils/sharedComponentProps'
 
 export default function GlobalError({ error, reset }: ErrorProps) {
   return (

components/NextPageNavigation.tsx

@@ -1,6 +1,6 @@
 import { IconArrow } from '@/components/icons'
 
-type Props = {
+type NextPageNavigationProps = {
   pageLinkPrevious?: string
   pageNamePrevious?: string
   pageLinkNext?: string
@@ -16,7 +16,7 @@ const NextPageNavigation = ({
   pageNameNext,
   dataTestIDPrevious,
   dataTestIDNext,
-}: Props) => {
+}: NextPageNavigationProps) => {
   const hasPrevious = pageLinkPrevious && pageNamePrevious
   const hasNext = pageLinkNext && pageNameNext
 

components/aboutMe/JobItem.tsx

@@ -1,13 +1,13 @@
 import Image from 'next/image'
 
-type Props = {
+type JobItemProps = {
   path: string
   title: string
   description: string
   years: number
 }
 
-const JobItem = ({ path, title, description, years }: Props) => {
+const JobItem = ({ path, title, description, years }: JobItemProps) => {
   return (
     <li className="mb-10 ms-6 last:mb-0">
       <span className="absolute -start-5 flex h-10 w-10 items-center justify-center rounded-full bg-violet-100 ring-1 ring-violet-600">

components/header/ScrollProgressBar.tsx

@@ -1,8 +1,8 @@
-type Props = {
+type ScrollProgressBarProps = {
   scroll: number
 }
 
-const ScrollProgressBar = ({ scroll }: Props) => {
+const ScrollProgressBar = ({ scroll }: ScrollProgressBarProps) => {
   return <div className="absolute bottom-0 left-0 h-1 bg-violet-600" style={{ width: `${scroll}%` }}></div>
 }
 

components/homepage/Skills.tsx

@@ -1,13 +1,9 @@
 import DividerWithText from '@/components/shared/DividerWithText'
 import { iconsSkills1, iconsSkills2, iconsSkills3, iconsSkills4 } from '@/data/skills/skills-main'
 import { ID } from '@/utils/constants'
+import { Icon } from '@/utils/interfaces'
 import Image from 'next/image'
 
-interface Icon {
-  name: string
-  path: string
-}
-
 type SkillsIconGroupProps = {
   icons: Icon[]
   className?: string

components/layout/ErrorPageLayout.tsx

@@ -1,17 +1,24 @@
 import PageContainer from '@/components/layout/PageContainer'
 import imgError from '@/public/images/illustrations/error.webp'
-import { ErrorProps } from '@/utils/types'
+import { ErrorProps } from '@/utils/sharedComponentProps'
 import Image from 'next/image'
 import { useEffect } from 'react'
 
-type Props = {
+type ErrorPageLayoutProps = {
   pageContainerId: string
   imgAlt: string
   textMain: string
   textSmall: string
 } & ErrorProps
 
-export const ErrorPageLayout = ({ error, reset, pageContainerId, imgAlt, textMain, textSmall }: Props) => {
+export const ErrorPageLayout = ({
+  error,
+  reset,
+  pageContainerId,
+  imgAlt,
+  textMain,
+  textSmall,
+}: ErrorPageLayoutProps) => {
   useEffect(() => {
     // Log the error to an error reporting service
     console.error(error)

components/layout/PageContainer.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-type props = {
+type PageContainerProps = {
   id?: string
   children: React.ReactNode
 }
 
-function PageContainer({ id, children }: props) {
+function PageContainer({ id, children }: PageContainerProps) {
   return (
     <div id={id} className="mt-20 px-5">
       <div className="container mx-auto max-w-screen-xl px-5">{children}</div>

components/layout/ProjectsLayout.tsx

@@ -1,12 +1,12 @@
 import PageHeading from '@/components/shared/PageHeading'
 
-type Props = {
+type ProjectsLayoutProps = {
   heading: string
   description: string
   children: React.ReactNode
 }
 
-const ProjectsLayout = ({ heading, description, children }: Props) => {
+const ProjectsLayout = ({ heading, description, children }: ProjectsLayoutProps) => {
   return (
     <>
       <div className="flex flex-col">

components/layout/projectPage/HeaderSection.tsx

@@ -1,7 +1,7 @@
 import { IconArrow } from '@/components/icons'
 import Heading2 from '@/components/shared/Heading2'
 import { getGoBackLinkID } from '@/utils/getGoBackLink'
-import { HeaderSectionProps } from '@/utils/types'
+import { HeaderSectionProps } from '@/utils/sharedComponentProps'
 import Link from 'next/link'
 
 const HeaderSection = ({ title, role, years, company, goBackLink, sectionID }: HeaderSectionProps) => {

components/layout/projectPage/ProjectPageLayout.tsx

@@ -3,13 +3,14 @@ import HeaderSection from '@/components/layout/projectPage/HeaderSection'
 import Section from '@/components/layout/projectPage/Section'
 import ProjectInformation from '@/components/projects/ProjectInformation'
 import BreadCrumbs from '@/components/shared/Breadcrumbs'
-import { BreadCrumbsType, HeaderSectionProps, ProjectInformationProps, SectionItem } from '@/utils/types'
+import { HeaderSectionProps, ProjectInformationProps } from '@/utils/sharedComponentProps'
+import { BreadCrumbsType } from '@/utils/types'
 import Image from 'next/image'
 
-type Props = {
+type ProjectPageLayoutProps = {
   breadCrumbs: BreadCrumbsType
   pageID: string
-  sections: SectionItem[]
+  sections: Section[]
   imageShowcase: string[]
   nextPageNavigation: React.ReactNode
 } & HeaderSectionProps &
@@ -32,7 +33,7 @@ const ProjectPageLayout = ({
   sections,
   imageShowcase,
   nextPageNavigation,
-}: Props) => {
+}: ProjectPageLayoutProps) => {
   return (
     <PageContainer id={pageID}>
       <BreadCrumbs

components/layout/projectPage/ProjectPageLayoutWrapper.tsx

@@ -1,13 +1,14 @@
 import ProjectPageLayout from '@/components/layout/projectPage/ProjectPageLayout'
-import { BreadCrumbsType, GoBackLinkType, Project, SectionItem } from '@/utils/types'
+import { Project, Section } from '@/utils/interfaces'
+import { BreadCrumbsType, GoBackLinkType } from '@/utils/types'
 
-type Props = {
+type ProjectPageLayoutWrapperProps = {
   breadCrumbs: BreadCrumbsType
   pageID: string
   goBackLink: GoBackLinkType
   sectionID: string
   projectData: Project
-  sections: SectionItem[]
+  sections: Section[]
   nextPageNavigation: React.ReactNode
 }
 
@@ -19,7 +20,7 @@ export const ProjectPageLayoutWrapper = ({
   projectData,
   sections,
   nextPageNavigation,
-}: Props) => {
+}: ProjectPageLayoutWrapperProps) => {
   const { title, role, years, company, description, mySkills, customers, projectLinks, imageShowcase } = projectData
 
   return (

components/layout/projectPage/Section.tsx

@@ -1,8 +1,8 @@
 import List from '@/components/shared/List'
 import ListItem from '@/components/shared/ListItem'
-import { SectionItem } from '@/utils/types'
+import { Section } from '@/utils/interfaces'
 
-const Section = ({ title, titleHighlight, items }: SectionItem) => (
+const Section = ({ title, titleHighlight, items }: Section) => (
   <div className="mt-8">
     <h3 className="mb-4 text-3xl font-bold">
       {title} {titleHighlight && <span className="text-violet-600">{titleHighlight}</span>}

components/projects/ProjectInformation.tsx

@@ -1,11 +1,15 @@
 import List from '@/components/shared/List'
 import ListItem from '@/components/shared/ListItem'
 import { getSkillBadgeColor } from '@/utils/getSkillBadgeColor'
-import { ProjectInformationProps } from '@/utils/types'
+import { ProjectInformationProps } from '@/utils/sharedComponentProps'
 
-type Props = ProjectInformationProps
-
-const ProjectInformation = ({ description, mySkills, customers, projectLinks, linkGitHub }: Props) => {
+const ProjectInformation = ({
+  description,
+  mySkills,
+  customers,
+  projectLinks,
+  linkGitHub,
+}: ProjectInformationProps) => {
   const hasMoreLinks = projectLinks.length > 1
   const hasGithub = linkGitHub ? true : false
 

components/projects/ProjectItem.tsx

@@ -1,10 +1,10 @@
 import { IconArrow } from '@/components/icons'
 import Heading2 from '@/components/shared/Heading2'
 import { getFeaturedBorderColor } from '@/utils/getFeaturedBorderColor'
-import { Icon } from '@/utils/types'
+import { Icon } from '@/utils/interfaces'
 import Image from 'next/image'
 
-type Props = {
+type ProjectItemProps = {
   isFeatured?: boolean | undefined
   image: string
   title: string
@@ -32,7 +32,7 @@ const ProjectItem = ({
   linkText,
   linkProjectPage,
   dataTestId,
-}: Props) => {
+}: ProjectItemProps) => {
   return (
     <div className="flex flex-col lg:flex-row lg:space-x-10">
       <div className="mx-auto items-start gap-8 py-8 md:grid md:grid-cols-2 lg:py-8">
@@ -43,10 +43,7 @@ const ProjectItem = ({
             {/* TODO: change to webp or avif format */}
             <Image
               src={image}
-              className={`
-                  mb-4 rounded-lg border bg-neutral-100 shadow-md md:mb-0 
-                  ${getFeaturedBorderColor(isFeatured)}
-                `}
+              className={`mb-4 rounded-lg border bg-neutral-100 shadow-md md:mb-0 ${getFeaturedBorderColor(isFeatured)} `}
               alt={title}
               width={600}
               height={617}

components/projects/ProjectSection.tsx

@@ -1,6 +1,6 @@
 import ProjectItem from '@/components/projects/ProjectItem'
 import ExperienceSection from '@/components/projects/experience/ExperienceSection'
-import { Project } from '@/utils/types'
+import { Project } from '@/utils/interfaces'
 
 type ProjectSectionProps = {
   projectData: Project[]

components/projects/experience/ExperienceCard.tsx

@@ -1,13 +1,13 @@
 import PartTimeLabel from '@/components/shared/PartTimeLabel'
 
-type Props = {
+type ExperienceCardProps = {
   company: string
   role: string
   isPartTime?: boolean
   description: string
 }
 
-const ExperienceCard = ({ company, role, isPartTime, description }: Props) => {
+const ExperienceCard = ({ company, role, isPartTime, description }: ExperienceCardProps) => {
   return (
     <div className="mb-8 w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md md:max-w-[600px]">
       <div>

components/projects/experience/ExperienceSection.tsx

@@ -1,9 +1,9 @@
-type Props = {
+type ExperienceSectionProps = {
   id: string
   text: string
 }
 
-const ExperienceSection = ({ id, text }: Props) => {
+const ExperienceSection = ({ id, text }: ExperienceSectionProps) => {
   return (
     <div id={id} className="mb-2 mt-16 border-b pb-2 text-2xl font-bold uppercase">
       {text}

components/shared/Breadcrumbs.tsx

@@ -2,7 +2,9 @@ import { IconCaretRight, IconHome } from '@/components/icons'
 import { BreadCrumbsType } from '@/utils/types'
 import Link from 'next/link'
 
-const BreadCrumbs = ({ linkLevel1, textLevel1, linkLevel2, textLevel2 }: BreadCrumbsType) => {
+type BreadCrumbsProps = BreadCrumbsType
+
+const BreadCrumbs = ({ linkLevel1, textLevel1, linkLevel2, textLevel2 }: BreadCrumbsProps) => {
   return (
     <>
       <nav className="mb-10 flex text-neutral-700" aria-label="Breadcrumbs" data-testid="breadcrumbs">

components/shared/DividerWithText.tsx

@@ -1,8 +1,8 @@
-type Props = {
+type DividerWithTextProps = {
   text: string
 }
 
-const DividerWithText = ({ text }: Props) => {
+const DividerWithText = ({ text }: DividerWithTextProps) => {
   return (
     <div className="mb-0 inline-flex w-full items-center justify-center">
       <hr className="my-8 h-px w-96 border-0 bg-gray-200" />

components/shared/Heading2.tsx

@@ -1,9 +1,9 @@
-type Props = {
+type Heading2Props = {
   children: React.ReactNode
   textColor: string
 }
 
-const Heading2 = ({ children, textColor }: Props) => {
+const Heading2 = ({ children, textColor }: Heading2Props) => {
   return <h2 className={`mb-2 text-4xl font-bold tracking-tight ${textColor}`}>{children}</h2>
 }
 

components/shared/List.tsx

@@ -1,8 +1,8 @@
-type Props = {
+type ListProps = {
   children: React.ReactNode
 }
 
-const List = ({ children }: Props) => {
+const List = ({ children }: ListProps) => {
   return (
     <>
       <ul className="ml-2 list-inside space-y-2 text-neutral-600">{children}</ul>

components/shared/ListItem.tsx

@@ -1,10 +1,10 @@
 import { IconCheck } from '@/components/icons'
 
-type Props = {
+type ListItemProps = {
   children: React.ReactNode
 }
 
-const ListItem = ({ children }: Props) => {
+const ListItem = ({ children }: ListItemProps) => {
   return (
     <>
       <li className="flex-start flex">

components/shared/PageHeading.tsx

@@ -1,8 +1,8 @@
-type Props = {
+type PageHeadingProps = {
   title: string
 }
 
-const PageHeading = ({ title }: Props) => {
+const PageHeading = ({ title }: PageHeadingProps) => {
   return <h1 className="text-5xl font-bold text-violet-600 sm:text-7xl">{title}</h1>
 }