refactor: components struture

packages/blog/src/BlogPostComments.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import Giscus from "@giscus/react"
-import { useTheme } from "@repo/ui/Header/SwitchTheme"
+import { useTheme } from "@repo/ui/Layout/Header/SwitchTheme"
 
 interface BlogPostCommentsProps {}
 

packages/blog/src/BlogPostUI.tsx

@@ -1,8 +1,8 @@
 import { getISODate } from "@repo/utils/dates"
 import "katex/dist/katex.min.css"
 
-import { Typography } from "@repo/ui/design/Typography"
-import { MainLayout } from "@repo/ui/MainLayout"
+import { Typography } from "@repo/ui/Design/Typography"
+import { MainLayout } from "@repo/ui/Layout/MainLayout"
 import type { BlogPost } from "./BlogPost"
 import { BlogPostContent } from "./BlogPostContent"
 

packages/blog/src/BlogPosts.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@repo/i18n/navigation"
-import { Section, SectionContent } from "@repo/ui/design/Section"
-import { Typography } from "@repo/ui/design/Typography"
+import { Typography } from "@repo/ui/Design/Typography"
+import { Section, SectionContent } from "@repo/ui/Layout/Section"
 import { getISODate } from "@repo/utils/dates"
 import type { BlogPost } from "./BlogPost"
 

packages/blog/src/stories/BlogPostUI.stories.tsx

@@ -4,7 +4,7 @@ import { BLOG_POST_MOCK } from "../BlogPost"
 import { BlogPostUI as BlogPostUIComponent } from "../BlogPostUI"
 
 const meta = {
-  title: "Feature/Blog/BlogPostUI",
+  title: "Blog/BlogPostUI",
   component: BlogPostUIComponent,
 } satisfies Meta<typeof BlogPostUIComponent>
 

packages/blog/src/stories/BlogPosts.stories.tsx

@@ -4,7 +4,7 @@ import { BLOG_POST_MOCK } from "../BlogPost"
 import { BlogPosts as BlogPostsComponent } from "../BlogPosts"
 
 const meta = {
-  title: "Feature/Blog/BlogPosts",
+  title: "Blog/BlogPosts",
   component: BlogPostsComponent,
 } satisfies Meta<typeof BlogPostsComponent>
 

packages/ui/package.json

@@ -4,22 +4,22 @@
   "private": true,
   "type": "module",
   "exports": {
-    "./About": "./src/About/About.tsx",
-    "./design/Button": "./src/design/Button/Button.tsx",
-    "./design/Link": "./src/design/Link/Link.tsx",
-    "./design/Section": "./src/design/Section/Section.tsx",
-    "./design/Spinner": "./src/design/Spinner/Spinner.tsx",
-    "./design/Typography": "./src/design/Typography/Typography.tsx",
+    "./Design/Button": "./src/Design/Button/Button.tsx",
+    "./Design/Link": "./src/Design/Link/Link.tsx",
+    "./Design/Spinner": "./src/Design/Spinner/Spinner.tsx",
+    "./Design/Typography": "./src/Design/Typography/Typography.tsx",
     "./Errors/ErrorNotFound": "./src/Errors/ErrorNotFound/ErrorNotFound.tsx",
     "./Errors/ErrorServer": "./src/Errors/ErrorServer/ErrorServer.tsx",
-    "./Footer": "./src/Footer/Footer.tsx",
-    "./Header": "./src/Header/Header.tsx",
-    "./Interests": "./src/Interests/Interests.tsx",
-    "./Header/SwitchTheme": "./src/Header/SwitchTheme.tsx",
-    "./MainLayout": "./src/MainLayout/MainLayout.tsx",
-    "./OpenSource": "./src/OpenSource/OpenSource.tsx",
-    "./Portfolio": "./src/Portfolio/Portfolio.tsx",
-    "./Skills": "./src/Skills/Skills.tsx"
+    "./Home/About": "./src/Home/About/About.tsx",
+    "./Home/Interests": "./src/Home/Interests/Interests.tsx",
+    "./Home/OpenSource": "./src/Home/OpenSource/OpenSource.tsx",
+    "./Home/Portfolio": "./src/Home/Portfolio/Portfolio.tsx",
+    "./Home/Skills": "./src/Home/Skills/Skills.tsx",
+    "./Layout/Footer": "./src/Layout/Footer/Footer.tsx",
+    "./Layout/Header": "./src/Layout/Header/Header.tsx",
+    "./Layout/Header/SwitchTheme": "./src/Layout/Header/SwitchTheme.tsx",
+    "./Layout/MainLayout": "./src/Layout/MainLayout/MainLayout.tsx",
+    "./Layout/Section": "./src/Layout/Section/Section.tsx"
   },
   "scripts": {
     "lint:eslint": "eslint src --max-warnings 0 --report-unused-disable-directives",

packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl"
-import { MainLayout } from "../../MainLayout/MainLayout"
-import { Link } from "../../design/Link/Link"
-import { Section } from "../../design/Section/Section"
-import { Typography } from "../../design/Typography/Typography"
+import { Link } from "../../Design/Link/Link"
+import { Typography } from "../../Design/Typography/Typography"
+import { MainLayout } from "../../Layout/MainLayout/MainLayout"
+import { Section } from "../../Layout/Section/Section"
 
 export interface ErrorNotFoundProps {}
 

packages/ui/src/Errors/ErrorServer/ErrorServer.tsx

@@ -2,10 +2,10 @@
 
 import { useTranslations } from "next-intl"
 import { useEffect } from "react"
-import { MainLayout } from "../../MainLayout/MainLayout"
-import { Button } from "../../design/Button/Button"
-import { Section } from "../../design/Section/Section"
-import { Typography } from "../../design/Typography/Typography"
+import { Button } from "../../Design/Button/Button"
+import { Typography } from "../../Design/Typography/Typography"
+import { MainLayout } from "../../Layout/MainLayout/MainLayout"
+import { Section } from "../../Layout/Section/Section"
 
 export interface ErrorServerProps {
   error: Error & { digest?: string }

packages/ui/src/Home/About/About.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { About as AboutComponent } from "./About"
 
 const meta = {
-  title: "Feature/About",
+  title: "Home/About",
   component: AboutComponent,
 } satisfies Meta<typeof AboutComponent>
 

packages/ui/src/Home/About/About.tsx

@@ -1,4 +1,4 @@
-import { Section, SectionContent } from "../design/Section/Section"
+import { Section, SectionContent } from "../../Layout/Section/Section"
 import { AboutDescription } from "./AboutDescription"
 import { AboutIntroduction } from "./AboutIntroduction"
 import { AboutList } from "./AboutList/AboutList"

packages/ui/src/Home/About/AboutDescription.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
-import { Button } from "../design/Button/Button"
-import { Typography } from "../design/Typography/Typography"
+import { Button } from "../../Design/Button/Button"
+import { Typography } from "../../Design/Typography/Typography"
 
 export interface AboutDescriptionProps {}
 

packages/ui/src/Home/About/AboutIntroduction.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl"
-import { Typography } from "../design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography"
 
 export interface AboutIntroductionProps {}
 

packages/ui/src/Home/Interests/InterestItem.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "../design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography"
 
 export interface InterestItemProps {
   title: string

packages/ui/src/Home/Interests/Interests.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { Interests as InterestsComponent } from "./Interests"
 
 const meta = {
-  title: "Feature/Interests",
+  title: "Home/Interests",
   component: InterestsComponent,
 } satisfies Meta<typeof InterestsComponent>
 

packages/ui/src/Home/Interests/Interests.tsx

@@ -1,12 +1,12 @@
 import { GIT_REPO_LINK } from "@repo/utils/constants"
 import { useTranslations } from "next-intl"
 import { FaGit, FaMicrochip } from "react-icons/fa"
-import { Link } from "../design/Link/Link"
+import { Link } from "../../Design/Link/Link"
 import {
   Section,
   SectionContent,
   SectionTitle,
-} from "../design/Section/Section"
+} from "../../Layout/Section/Section"
 import { InterestItem } from "./InterestItem"
 
 export interface InterestsProps {}

packages/ui/src/Home/OpenSource/OpenSource.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { OpenSource as OpenSourceComponent } from "./OpenSource"
 
 const meta = {
-  title: "Feature/OpenSource",
+  title: "Home/OpenSource",
   component: OpenSourceComponent,
 } satisfies Meta<typeof OpenSourceComponent>
 

packages/ui/src/Home/OpenSource/OpenSource.tsx

@@ -3,7 +3,7 @@ import {
   Section,
   SectionDescription,
   SectionTitle,
-} from "../design/Section/Section"
+} from "../../Layout/Section/Section"
 import { Repository } from "./Repository"
 
 export interface OpenSourceProps {}

packages/ui/src/Home/OpenSource/Repository.tsx

@@ -1,6 +1,6 @@
+import { Typography } from "../../Design/Typography/Typography"
+import { SectionContent } from "../../Layout/Section/Section"
 import { GitHubIcon } from "../About/SocialMediaList/SocialMediaIcons/GitHubIcon"
-import { SectionContent } from "../design/Section/Section"
-import { Typography } from "../design/Typography/Typography"
 
 export interface RepositoryProps {
   name: string

packages/ui/src/Home/Portfolio/Portfolio.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { Portfolio as PortfolioComponent } from "./Portfolio"
 
 const meta = {
-  title: "Feature/Portfolio",
+  title: "Home/Portfolio",
   component: PortfolioComponent,
 } satisfies Meta<typeof PortfolioComponent>
 

packages/ui/src/Home/Portfolio/Portfolio.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl"
-import { Section, SectionTitle } from "../design/Section/Section"
+import { Section, SectionTitle } from "../../Layout/Section/Section"
 import { PortfolioItem, type PortfolioProject } from "./PortfolioItem"
 
 export interface PortfolioProps {}

packages/ui/src/Home/Portfolio/PortfolioItem.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
-import { SectionContent } from "../design/Section/Section"
-import { Typography } from "../design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography"
+import { SectionContent } from "../../Layout/Section/Section"
 
 export interface PortfolioProject {
   id: string

packages/ui/src/Home/Skills/SkillItem.tsx

@@ -2,8 +2,8 @@
 
 import Image from "next/image"
 import { useMemo } from "react"
-import { Link } from "../design/Link/Link"
-import { useTheme } from "../Header/SwitchTheme"
+import { Link } from "../../Design/Link/Link"
+import { useTheme } from "../../Layout/Header/SwitchTheme"
 import type { SkillName } from "./skills"
 import { skills } from "./skills"
 

packages/ui/src/Home/Skills/Skills.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { Skills as SkillsComponent } from "./Skills"
 
 const meta = {
-  title: "Feature/Skills",
+  title: "Home/Skills",
   component: SkillsComponent,
 } satisfies Meta<typeof SkillsComponent>
 

packages/ui/src/Home/Skills/Skills.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl"
-import { Section, SectionTitle } from "../design/Section/Section"
+import { Section, SectionTitle } from "../../Layout/Section/Section"
 import { SkillItem } from "./SkillItem"
 import { SkillsSection } from "./SkillsSection"
 

packages/ui/src/Home/Skills/SkillsSection.tsx

@@ -1,5 +1,5 @@
-import { SectionContent } from "../design/Section/Section"
-import { Typography } from "../design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography"
+import { SectionContent } from "../../Layout/Section/Section"
 
 export interface SkillsSectionProps extends React.PropsWithChildren {
   title: string

packages/ui/src/Layout/Footer/Footer.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { Footer as FooterComponent } from "./Footer"
 
 const meta = {
-  title: "User Interface/Footer",
+  title: "Layout/Footer",
   component: FooterComponent,
 } satisfies Meta<typeof FooterComponent>
 

packages/ui/src/Layout/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { useTranslations } from "next-intl"
 
 import { GIT_REPO_LINK } from "@repo/utils/constants"
-import { Link } from "../design/Link/Link"
+import { Link } from "../../Design/Link/Link"
 
 export interface FooterProps {
   version: string

packages/ui/src/Layout/Header/Header.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { Header as HeaderComponent } from "./Header"
 
 const meta = {
-  title: "User Interface/Header",
+  title: "Layout/Header",
   component: HeaderComponent,
 } satisfies Meta<typeof HeaderComponent>
 

packages/ui/src/Layout/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import Image from "next/image"
-import { Link } from "../design/Link/Link"
+import { Link } from "../../Design/Link/Link"
 import { Locales } from "./Locales/Locales"
 import { SwitchTheme } from "./SwitchTheme"
 

packages/ui/src/Layout/Section/Section.tsx

@@ -1,6 +1,6 @@
 import { classNames } from "@repo/config-tailwind/classNames"
-import type { TypographyProps } from "../Typography/Typography"
-import { Typography } from "../Typography/Typography"
+import type { TypographyProps } from "../../Design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography"
 
 export * from "./RevealFade"
 

packages/utils/src/dates.ts

@@ -12,6 +12,7 @@ export const getISODate = (date: Date): string => {
 /**
  * Calculates the age of a person based on their birth date.
  * @param birthDate
+ * @returns
  */
 export const getAge = (birthDate: Date): number => {
   const today = new Date()

packages/utils/src/strings.ts

@@ -1,3 +1,9 @@
+/**
+ * Capitalize the first letter of a string.
+ * @param string
+ * @returns
+ * @example capitalize("hello, world!") // "Hello, world!"
+ */
 export const capitalize = (string: string): string => {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }