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
{children}
+ return
{children}
} 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

{children}
+ return
{children}
} 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 ( <> -
      +