From 0e9686bdad1bdf0006d8a9951dd590c49da5df56 Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Tue, 12 Mar 2024 20:13:49 -0300
Subject: [PATCH 01/18] feat: add resize hook to make bio section more
responsive
---
.../introduction/components/UserBio.tsx | 6 +++++-
.../introduction/helpers/resizeDelay.ts | 12 +++++++++++
.../introduction/hooks/useResize.tsx | 20 +++++++++++++++++++
3 files changed, 37 insertions(+), 1 deletion(-)
create mode 100644 src/features/page-profile/introduction/helpers/resizeDelay.ts
create mode 100644 src/features/page-profile/introduction/hooks/useResize.tsx
diff --git a/src/features/page-profile/introduction/components/UserBio.tsx b/src/features/page-profile/introduction/components/UserBio.tsx
index 4196136..6a5e632 100644
--- a/src/features/page-profile/introduction/components/UserBio.tsx
+++ b/src/features/page-profile/introduction/components/UserBio.tsx
@@ -2,12 +2,14 @@
import { useEffect, useRef, useState } from 'react'
import { Button } from '@/components/ui/button'
+import { useResize } from '../hooks/useResize'
interface UserBioProps {
description: string
}
export function UserBio({ description }: UserBioProps) {
+ const size = useResize()
const truncatedTextRef = useRef(null)
const [showMore, setShowMore] = useState(false)
const [truncateText, setTruncateText] = useState(true)
@@ -16,8 +18,10 @@ export function UserBio({ description }: UserBioProps) {
const text = truncatedTextRef.current
if (text && text.offsetHeight < text.scrollHeight) {
setShowMore(true)
+ } else {
+ setShowMore(false)
}
- }, [])
+ }, [size])
return (
<>
diff --git a/src/features/page-profile/introduction/helpers/resizeDelay.ts b/src/features/page-profile/introduction/helpers/resizeDelay.ts
new file mode 100644
index 0000000..087dd8a
--- /dev/null
+++ b/src/features/page-profile/introduction/helpers/resizeDelay.ts
@@ -0,0 +1,12 @@
+export const resizeDelay = (func: () => void, milliseconds?: number) => {
+ const time = milliseconds || 400
+ let timer: number
+
+ return (event: Event): void => {
+ if (timer) {
+ clearTimeout(timer)
+ }
+
+ timer = setTimeout(func, time, event)
+ }
+}
diff --git a/src/features/page-profile/introduction/hooks/useResize.tsx b/src/features/page-profile/introduction/hooks/useResize.tsx
new file mode 100644
index 0000000..a1c2adc
--- /dev/null
+++ b/src/features/page-profile/introduction/hooks/useResize.tsx
@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+import { resizeDelay } from '../helpers/resizeDelay'
+
+export function useResize() {
+ const [size, setSize] = useState([window.innerWidth, window.innerHeight])
+
+ useEffect(() => {
+ const resize = resizeDelay(() => {
+ setSize([window.innerWidth, window.innerHeight])
+ })
+
+ window.addEventListener('resize', resize)
+
+ return () => {
+ window.removeEventListener('resize', resize)
+ }
+ }, [])
+
+ return size
+}
From c0722b69d3ad1f789a1c6c7d43b60c5b20a78c3f Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Tue, 12 Mar 2024 21:23:23 -0300
Subject: [PATCH 02/18] refactor: updated styles to match figma's
---
.../page-profile/introduction/components/UserBio.tsx | 10 +++-------
.../introduction/components/UserSection.tsx | 2 +-
.../introduction/components/UserSectionTitle.tsx | 2 +-
3 files changed, 5 insertions(+), 9 deletions(-)
diff --git a/src/features/page-profile/introduction/components/UserBio.tsx b/src/features/page-profile/introduction/components/UserBio.tsx
index 6a5e632..05749ed 100644
--- a/src/features/page-profile/introduction/components/UserBio.tsx
+++ b/src/features/page-profile/introduction/components/UserBio.tsx
@@ -29,19 +29,15 @@ export function UserBio({ description }: UserBioProps) {
ref={truncatedTextRef}
className={`${
truncateText ? 'truncated-text ' : ''
- } text-sm leading-6 text-neutral-500 sm:text-xl`}
+ } text-sm leading-6 text-neutral-400 sm:text-base`}
>
- {description.length === 0 || description === '' ? (
- Nenhuma bio cadastrada
- ) : (
- description
- )}
+ {description}
{showMore && (
diff --git a/src/features/page-profile/introduction/components/UserSection.tsx b/src/features/page-profile/introduction/components/UserSection.tsx
index 208f2be..6a0d37d 100644
--- a/src/features/page-profile/introduction/components/UserSection.tsx
+++ b/src/features/page-profile/introduction/components/UserSection.tsx
@@ -3,5 +3,5 @@ interface UserSectionProps {
}
export function UserSection({ children }: UserSectionProps) {
- return
+ return
}
diff --git a/src/features/page-profile/introduction/components/UserSectionTitle.tsx b/src/features/page-profile/introduction/components/UserSectionTitle.tsx
index c926e28..08c2985 100644
--- a/src/features/page-profile/introduction/components/UserSectionTitle.tsx
+++ b/src/features/page-profile/introduction/components/UserSectionTitle.tsx
@@ -6,7 +6,7 @@ interface UserSectionTitleProps
title: string
}
-const Title = cva('text-2xl text-neutral-950 h-10 leading-[3rem] sm:h-8 w-full')
+const Title = cva('text-2xl font-semibold text-neutral-950 leading-7 w-full')
export function UserSectionTitle({ title, className }: UserSectionTitleProps) {
return {title}
From 6989508e2cf5bdc33365226bd4ee87cb3c18dde8 Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Tue, 12 Mar 2024 21:29:18 -0300
Subject: [PATCH 03/18] refactor: updated missing font-family
---
src/features/page-profile/introduction/components/UserBio.tsx | 4 ++--
.../page-profile/introduction/components/UserSectionTitle.tsx | 4 +++-
2 files changed, 5 insertions(+), 3 deletions(-)
diff --git a/src/features/page-profile/introduction/components/UserBio.tsx b/src/features/page-profile/introduction/components/UserBio.tsx
index 05749ed..3e8a023 100644
--- a/src/features/page-profile/introduction/components/UserBio.tsx
+++ b/src/features/page-profile/introduction/components/UserBio.tsx
@@ -29,7 +29,7 @@ export function UserBio({ description }: UserBioProps) {
ref={truncatedTextRef}
className={`${
truncateText ? 'truncated-text ' : ''
- } text-sm leading-6 text-neutral-400 sm:text-base`}
+ } font-notoSans text-sm leading-6 text-neutral-400 sm:text-base`}
>
{description}
@@ -37,7 +37,7 @@ export function UserBio({ description }: UserBioProps) {
diff --git a/src/features/page-profile/introduction/components/UserSectionTitle.tsx b/src/features/page-profile/introduction/components/UserSectionTitle.tsx
index 08c2985..b19f4bc 100644
--- a/src/features/page-profile/introduction/components/UserSectionTitle.tsx
+++ b/src/features/page-profile/introduction/components/UserSectionTitle.tsx
@@ -6,7 +6,9 @@ interface UserSectionTitleProps
title: string
}
-const Title = cva('text-2xl font-semibold text-neutral-950 leading-7 w-full')
+const Title = cva(
+ 'text-2xl font-semibold text-neutral-950 leading-7 w-full font-notoSans',
+)
export function UserSectionTitle({ title, className }: UserSectionTitleProps) {
return {title}
From ba513a296f9752bdcdf160e36454c557822ccfbd Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Thu, 14 Mar 2024 16:09:57 -0300
Subject: [PATCH 04/18] refactor: refactor component after review
---
.../introduction/UserIntroduction.tsx | 28 +++++--------------
1 file changed, 7 insertions(+), 21 deletions(-)
diff --git a/src/features/page-profile/introduction/UserIntroduction.tsx b/src/features/page-profile/introduction/UserIntroduction.tsx
index fd8f88d..2d6bba3 100644
--- a/src/features/page-profile/introduction/UserIntroduction.tsx
+++ b/src/features/page-profile/introduction/UserIntroduction.tsx
@@ -1,32 +1,18 @@
-import { Card } from '@/components/ui/card'
import { UserIntroduction } from '.'
import { UserIntroductionMock } from './mock'
export function UserIntroductionComponent() {
return (
- <>
+
-
- {/* */}
- {/* */}
- {/* */}
-
-
-
-
-
- >
+
+
+
)
}
From bda8ecb3eb6e8b8227d8e3fafdc615778cc94d31 Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Thu, 14 Mar 2024 21:45:41 -0300
Subject: [PATCH 05/18] refacor: reimported card from shadcn with it's correct
stiles
---
src/components/ui/card.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index ce849b4..2d2702a 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ const Card = React.forwardRef(
(({ className, ...props }, ref) => (
))
From fe496463740a2354622fc2eca8f99794dbad7ff5 Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Fri, 15 Mar 2024 10:13:38 -0300
Subject: [PATCH 06/18] fix: fixing small discrepancies
---
src/features/page-profile/box-image/components/text.tsx | 2 +-
src/features/page-profile/introduction/components/UserBio.tsx | 2 +-
.../page-profile/introduction/components/UserSection.tsx | 2 +-
src/features/page-profile/select-page/selectPage.tsx | 4 ++--
4 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/features/page-profile/box-image/components/text.tsx b/src/features/page-profile/box-image/components/text.tsx
index de58f62..734922f 100644
--- a/src/features/page-profile/box-image/components/text.tsx
+++ b/src/features/page-profile/box-image/components/text.tsx
@@ -10,7 +10,7 @@ export function Text({ content, as: Component = 'p', className }: TextProps) {
return (
diff --git a/src/features/page-profile/introduction/components/UserBio.tsx b/src/features/page-profile/introduction/components/UserBio.tsx
index 3e8a023..4f7e045 100644
--- a/src/features/page-profile/introduction/components/UserBio.tsx
+++ b/src/features/page-profile/introduction/components/UserBio.tsx
@@ -37,7 +37,7 @@ export function UserBio({ description }: UserBioProps) {
diff --git a/src/features/page-profile/introduction/components/UserSection.tsx b/src/features/page-profile/introduction/components/UserSection.tsx
index 6a0d37d..8d199d3 100644
--- a/src/features/page-profile/introduction/components/UserSection.tsx
+++ b/src/features/page-profile/introduction/components/UserSection.tsx
@@ -3,5 +3,5 @@ interface UserSectionProps {
}
export function UserSection({ children }: UserSectionProps) {
- return
+ return
}
diff --git a/src/features/page-profile/select-page/selectPage.tsx b/src/features/page-profile/select-page/selectPage.tsx
index 4a31d6a..226e7f7 100644
--- a/src/features/page-profile/select-page/selectPage.tsx
+++ b/src/features/page-profile/select-page/selectPage.tsx
@@ -6,7 +6,7 @@ import { useSelectPage } from './useSelectPage'
export function SelectPage() {
const { handleSetParams, params, linksWithPath } = useSelectPage()
return (
-
+
{linksWithPath.map(({ path, text }) => {
const bgBLink = params === text && 'bg-[#FFFFFF]'
const bgText =
@@ -14,7 +14,7 @@ export function SelectPage() {
return (
-
Date: Fri, 15 Mar 2024 10:14:09 -0300
Subject: [PATCH 07/18] fix: fixed bio card
---
.../introduction/UserIntroduction.tsx | 16 +++++++---------
1 file changed, 7 insertions(+), 9 deletions(-)
diff --git a/src/features/page-profile/introduction/UserIntroduction.tsx b/src/features/page-profile/introduction/UserIntroduction.tsx
index 2d6bba3..0c82211 100644
--- a/src/features/page-profile/introduction/UserIntroduction.tsx
+++ b/src/features/page-profile/introduction/UserIntroduction.tsx
@@ -1,18 +1,16 @@
+import { Card } from '@/components/ui/card'
import { UserIntroduction } from '.'
import { UserIntroductionMock } from './mock'
export function UserIntroductionComponent() {
return (
-
-
-
+
+
+
+
)
}
From d191c93865dc3ca9bded3088549ba01b3385ac54 Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Fri, 15 Mar 2024 10:14:52 -0300
Subject: [PATCH 08/18] refactor: small changes to have better maintainability
---
.../components/UserSectionTitle.tsx | 16 +++++----
.../user-preference/userPreferences.tsx | 36 ++++++++++---------
2 files changed, 30 insertions(+), 22 deletions(-)
diff --git a/src/features/page-profile/introduction/components/UserSectionTitle.tsx b/src/features/page-profile/introduction/components/UserSectionTitle.tsx
index b19f4bc..b742f30 100644
--- a/src/features/page-profile/introduction/components/UserSectionTitle.tsx
+++ b/src/features/page-profile/introduction/components/UserSectionTitle.tsx
@@ -1,4 +1,3 @@
-import { cva } from 'class-variance-authority'
import { cn } from '@/lib/utils'
interface UserSectionTitleProps
@@ -6,10 +5,15 @@ interface UserSectionTitleProps
title: string
}
-const Title = cva(
- 'text-2xl font-semibold text-neutral-950 leading-7 w-full font-notoSans',
-)
-
export function UserSectionTitle({ title, className }: UserSectionTitleProps) {
- return
{title}
+ return (
+
+ {title}
+
+ )
}
diff --git a/src/features/page-profile/user-preference/userPreferences.tsx b/src/features/page-profile/user-preference/userPreferences.tsx
index 11230fa..9efb36a 100644
--- a/src/features/page-profile/user-preference/userPreferences.tsx
+++ b/src/features/page-profile/user-preference/userPreferences.tsx
@@ -12,21 +12,25 @@ export default function UserPreferenceCategorys({
badges,
}: UserPreferenceCompoenteProps) {
return (
-
-
- Estilos preferidos
-
-
-
- Conquistas
-
-
-
+ <>
+
+
+ Estilos preferidos
+
+
+
+
+
+ Conquistas
+
+
+
+ >
)
}
From b38abec73394694f1cf9030e053902a8d91aba59 Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Fri, 15 Mar 2024 10:15:20 -0300
Subject: [PATCH 09/18] fix: fixed introduction stories after changes
---
.../introduction/introduction.stories.tsx | 47 +++----------------
1 file changed, 6 insertions(+), 41 deletions(-)
diff --git a/src/features/page-profile/introduction/introduction.stories.tsx b/src/features/page-profile/introduction/introduction.stories.tsx
index aecb754..bcc903d 100644
--- a/src/features/page-profile/introduction/introduction.stories.tsx
+++ b/src/features/page-profile/introduction/introduction.stories.tsx
@@ -1,5 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react'
-import { Separator } from '@/components/ui/separator'
import { Card } from '@/components/ui/card'
import { UserIntroduction } from '.'
import { UserIntroductionMock } from './mock'
@@ -19,49 +18,15 @@ export default meta
type Story = StoryObj
-export const FullIntroduction: Story = {
+export const Introduction: Story = {
render: () => (
- <>
-
-
-
-
-
-
-
-
-
-
- >
- ),
-}
-
-export const MissingIntroduction: Story = {
- render: () => (
-
-
-
-
-
+
+
+
-
-
+
+
),
}
From 34a0f109171bca4b2e4d2648cc3ad35b919e5baf Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Fri, 15 Mar 2024 10:16:24 -0300
Subject: [PATCH 10/18] fix: fixed small styling discrepancies
---
src/app/user/profile/page.tsx | 52 +++++++++++++++--------------------
1 file changed, 22 insertions(+), 30 deletions(-)
diff --git a/src/app/user/profile/page.tsx b/src/app/user/profile/page.tsx
index 85a69af..d5d8316 100644
--- a/src/app/user/profile/page.tsx
+++ b/src/app/user/profile/page.tsx
@@ -3,7 +3,6 @@
import { HeaderProfile } from '@/features/page-profile/header/header'
import { UserIntroductionComponent } from '@/features/page-profile/introduction/UserIntroduction'
import { userMock } from '@/features/page-profile/mocks/mock'
-import { PlayerProfileSection } from '@/features/page-profile/playerProfileSection/PlayerProfileSection'
import { SelectPage } from '@/features/page-profile/select-page/selectPage'
import UserDescriptionComponent from '@/features/page-profile/user-description/user-description'
import UserPreferenceCategorys from '@/features/page-profile/user-preference/userPreferences'
@@ -22,7 +21,7 @@ export default function Profile() {
return (
<>
-
+
-
+
+
{/* mobile */}
-
-
-
-
- {showElemnt === 'profile' && (
-
-
-
-
- )}
- {showElemnt === 'profile' &&
}
- {showElemnt === 'images' && (
-
-
-
-
- )}
-
-
+
+
+
+ {showElemnt === 'profile' && (
+ <>
+
+
+ >
+ )}
+ {showElemnt === 'images' && (
+
+
+
+
+ )}
-
+
>
)
}
From f4f4a66c56c2e695f25fec4900fad8637b6f14cb Mon Sep 17 00:00:00 2001
From: Vinicius da Silva Montibeller
Date: Fri, 15 Mar 2024 10:23:36 -0300
Subject: [PATCH 11/18] fix: converted px to rem
---
src/app/user/profile/page.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/app/user/profile/page.tsx b/src/app/user/profile/page.tsx
index d5d8316..2299868 100644
--- a/src/app/user/profile/page.tsx
+++ b/src/app/user/profile/page.tsx
@@ -21,7 +21,7 @@ export default function Profile() {
return (
<>
-
+