Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat/Component] refactor demo components #35

Merged
merged 1 commit into from
Aug 7, 2023
Merged

[Feat/Component] refactor demo components #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions apps/web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,21 @@ export const metadata: Metadata = {
title: siteConfig.name,
description: siteConfig.description,
siteName: siteConfig.name,
images: [
{
url: siteConfig.ogImage,
width: 1200,
height: 630,
alt: siteConfig.name,
},
],
// images: [
// {
// url: siteConfig.ogImage,
// width: 1200,
// height: 630,
// alt: siteConfig.name,
// },
// ],
},
icons: {
icon: './favicon.ico',
shortcut: './favicon-16x16.png',
apple: './apple-touch-icon.png',
},
manifest: `${siteConfig.url}/site.webmanifest`,
// manifest: `${siteConfig.url}/site.webmanifest`,
};

export default function RootLayout({
Expand Down
4 changes: 3 additions & 1 deletion apps/web/components/component-example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
extractedClassNames?: string;
align?: 'center' | 'start' | 'end';
src?: string;
category?: string;
}

export function ComponentExample({
Expand All @@ -19,6 +20,7 @@ export function ComponentExample({
extractClassName,
extractedClassNames,
align = 'center',
category = 'Sample',
src: _,
...props
}: ComponentExampleProps) {
Expand Down Expand Up @@ -49,7 +51,7 @@ export function ComponentExample({
value='Sample'
className='relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none'
>
Sample
{category}
</TabsTrigger>
{/* Code Area */}
{/* <TabsTrigger
Expand Down
83 changes: 83 additions & 0 deletions apps/web/components/component-multi-examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
'use client';

import * as React from 'react';

import { cn } from '@/lib';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useState, useCallback } from 'react';

interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
extractClassName?: boolean;
extractedClassNames?: string;
align?: 'center' | 'start' | 'end';
src?: string;
categories?: string[];
}

export function ComponentMultiExamples({
children,
className,
extractClassName,
extractedClassNames,
align = 'center',
categories,
src: _,
...props
}: ComponentExampleProps) {
const childrens = React.Children.toArray(children) as React.ReactElement[];
const [currentCategory, setCurrentCategory] = useState<string>('default');

const handleCategory = useCallback(
(category: string) => setCurrentCategory(category),
[]
);

return (
<div
className={cn('group relative my-4 flex flex-col space-y-2', className)}
{...props}
>
<Tabs defaultValue='default' className='relative mr-auto w-full'>
<div className='flex items-center justify-between pb-3'>
<TabsList className='w-full justify-start rounded-none border-b bg-transparent p-0'>
{categories?.map((category, idx) => (
<TabsTrigger
key={`${category}/${idx}`}
value={category}
className='relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none'
onClick={() => handleCategory(category)}
>
{category}
</TabsTrigger>
))}
</TabsList>
</div>
{categories?.map((category, idx) => (
<TabsContent
key={`category/${idx}`}
value={category}
className='rounded-md border'
>
{childrens.map(
(children, idx) =>
currentCategory === children.props.buttonVariant && (
<div
key={`example/${idx}`}
className={cn('flex min-h-[350px] justify-center p-10', {
'items-center': align === 'center',
'items-start': align === 'start',
'items-end': align === 'end',
})}
>
<div className='flex w-full max-w-[70%] flex-col justify-between gap-x-5'>
{children}
</div>
</div>
)
)}
</TabsContent>
))}
</Tabs>
</div>
);
}
91 changes: 22 additions & 69 deletions apps/web/components/examples/avatar/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useCallback, useState } from 'react';
import { Avatar, AvatarImage, AvatarFallback } from 'ui/components/avatar';
import { TypographyH4 } from 'ui/components/typography';
import { cn } from '@/lib';
Expand All @@ -8,96 +7,50 @@ interface AvatarProps {
alt: string;
fallback: string;
size: number;
description: string;
}

const SAMPLE_AVATAR: AvatarProps[] = [
{
src: 'https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80',
alt: 'sample-avatar1',
fallback: 'sample',
fallback: 'LZ',
size: 45,
description: 'Default',
},
{
src: 'https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80',
src: 'https://images.unsplash.com/photo-1608889175123-8ee362201f81?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
alt: 'sample-avatar2',
fallback: 'sample',
size: 45,
description: 'Large',
},
];

const FALLBACK_AVATAR: AvatarProps[] = [
{
src: '',
alt: 'sample-avatar1/fallback',
fallback: 'FB',
size: 45,
description: 'Default',
},
{
src: '',
alt: 'sample-avatar2/fallback',
fallback: 'FB',
fallback: 'KH',
size: 45,
description: 'Large',
},
];

export default function AvatarDemo() {
const [isHovered, setIsHovered] = useState(false);

const handleIsHovered = useCallback(
(hover: boolean) => setIsHovered(hover),
[]
);

return (
<div className='flex items-center justify-center gap-10'>
{!isHovered &&
SAMPLE_AVATAR.map(({ src, alt, fallback, size, description }, idx) => (
<div
key={`${alt}/${idx}`}
className='flex h-[180px] w-[180px] flex-col items-center justify-start gap-y-2 font-bold'
>
<TypographyH4 className='flex-1 bg-cover font-light text-foreground/60'>
{description}
</TypographyH4>
<div className='flex w-[50%] items-center justify-center'>
{SAMPLE_AVATAR.map(({ src, alt, fallback }, idx) => (
<div
key={`${alt}/${idx}`}
className='flex items-center justify-center gap-10'
>
<div className='flex h-[180px] w-[180px] flex-col items-center justify-start gap-y-2 font-bold'>
<div className={cn('flex flex-1 items-center')}>
<Avatar
onMouseEnter={() => handleIsHovered(true)}
onMouseLeave={() => handleIsHovered(false)}
// size={size}
>
<Avatar>
<AvatarImage src={src} alt={alt} />
<AvatarFallback>{fallback}</AvatarFallback>
</Avatar>
</div>
</div>
))}
{isHovered &&
FALLBACK_AVATAR.map(
({ src, alt, fallback, size, description }, idx) => (
<div
key={`${alt}/${idx}`}
className='flex h-[180px] w-[180px] flex-col items-center justify-start gap-y-2 font-bold'
>
<TypographyH4 className='flex-1 font-light text-foreground/60'>
{description}
</TypographyH4>
<div className={cn('flex flex-1 items-center')}>
<Avatar
onMouseEnter={() => handleIsHovered(true)}
onMouseLeave={() => handleIsHovered(false)}
>
<AvatarImage src={src} alt={alt} />
<AvatarFallback>{fallback}</AvatarFallback>
</Avatar>
</div>
</div>
)
)}
</div>
))}
<div className='flex items-center justify-center gap-10'>
<div className='flex h-[180px] w-[180px] flex-col items-center justify-start gap-y-2 font-bold'>
<div className={cn('flex flex-1 items-center')}>
<Avatar>
<AvatarFallback className='bg-transparent'>LZ</AvatarFallback>
</Avatar>
</div>
</div>
</div>
</div>
);
}
90 changes: 27 additions & 63 deletions apps/web/components/examples/button/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,38 @@
'use client';

import { useHandleButtonVariant } from '@/components/examples/hooks';
import { Button } from 'ui/components/button';
import { TypographyH4 } from 'ui/components/typography';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from 'ui/components/select';
import { TypographyMuted } from 'ui/components/typography';

const BUTTON = {
variant: ['default', 'secondary', 'destructive', 'ghost', 'link', 'disabled'],
size: ['default', 'sm', 'lg'],
};

// TODO: 버튼 사이즈 조절이 가능한 컴포넌트 혹은 공통으로 사용 가능한 컴포넌트가 데모 페이지에 공통으로 필요
interface ButtonProps {
buttonVariant:
| 'default'
| 'secondary'
| 'destructive'
| 'ghost'
| 'link'
| 'disabled';
buttonSize: 'sm' | 'default' | 'md' | 'lg';
}

export default function ButtonDemo() {
const {
buttonVariant,
buttonSize,
handleSetButtonVariant,
handleSetButtonSize,
} = useHandleButtonVariant();
const BUTTON_SIZE = [
'sm',
'default',
'md',
'lg',
] as ButtonProps['buttonSize'][];

export default function ButtonDemo({ buttonVariant }: ButtonProps) {
return (
<div>
<div className='flex justify-between'>
<div>
<TypographyH4>Variants</TypographyH4>
<Select onValueChange={handleSetButtonVariant}>
<SelectTrigger className='w-[180px]'>
<SelectValue placeholder={buttonVariant} />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{BUTTON.variant.map((button, idx) => (
<SelectItem key={`${button}/${idx}`} value={button}>
{button}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
<div>
<TypographyH4>Size</TypographyH4>
<Select onValueChange={handleSetButtonSize}>
<SelectTrigger className='w-[180px]'>
<SelectValue placeholder={buttonSize} />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{BUTTON.size.map((size, idx) => (
<SelectItem key={`${size}/${idx}`} value={size}>
{size}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
</div>
<div className='flex justify-center'>
<Button variant={buttonVariant} size={buttonSize}>
{buttonVariant}
</Button>
<div className='flex items-center justify-center gap-x-5'>
{BUTTON_SIZE.map((size, idx) => (
<div key={`${size}/${idx}`} className=' flex flex-col items-center'>
<TypographyMuted className='mb-5'>{size}</TypographyMuted>
<Button variant={buttonVariant} size={size}>
{buttonVariant}
</Button>
</div>
))}
</div>
</div>
);
Expand Down
Loading