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

Jump to bottom

feat: Icon 컴포넌트 추가 #21

Merged
merged 7 commits into from
Jan 29, 2024
Merged

feat: Icon 컴포넌트 추가 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5790808
feat: Icon 컴포넌트 추가
alstn2468 Jan 28, 2024
7020606
feat: 버튼에 들어간 아이콘 사이즈 수정
alstn2468 Jan 28, 2024
0d4ec1e
feat: Icon을 뒤에 붙이도록 수정
alstn2468 Jan 28, 2024
17836a3
fix: 타입 오류 수정
alstn2468 Jan 28, 2024
8731375
feat: @boolti/icon 패키지 분리
alstn2468 Jan 29, 2024
7e87ad1
Merge branch 'main' into feat/icon
alstn2468 Jan 29, 2024
8c06e14
fix: lint 오류 수정
alstn2468 Jan 29, 2024
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
24 changes: 24 additions & 0 deletions .pnp.cjs
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file modified .yarn/install-state.gz
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions apps/preview/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"preview": "vite preview"
},
"dependencies": {
"@boolti/icon": "*",
"@boolti/ui": "*",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
Expand Down
91 changes: 60 additions & 31 deletions apps/preview/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
import { Badge, Button, TextButton, BooltiUIProvider } from '@boolti/ui';

const Icon = () => (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z"
fill="currentColor"
/>
</svg>
);
import {
AppleIcon,
ArrowLeftIcon,
ArrowRightIcon,
CalendarIcon,
ChevronLeftIcon,
ChevronRightIcon,
ClockIcon,
CloseIcon,
EditIcon,
GithubIcon,
InstagramIcon,
KakaotalkIcon,
PlusIcon,
SearchIcon,
TicketIcon,
UpDownIcon,
UsersIcon,
WalletIcon,
} from '@boolti/icon';

const App = () => {
return (
Expand Down Expand Up @@ -53,22 +62,22 @@ const App = () => {
alignItems: 'flex-end',
}}
>
<Button icon={<Icon />} size="bold" colorTheme="primary">
<Button icon={<AppleIcon size={20} />} size="bold" colorTheme="primary">
BUTTON
</Button>
<Button icon={<Icon />} size="medium" colorTheme="primary">
<Button icon={<AppleIcon size={20} />} size="medium" colorTheme="primary">
BUTTON
</Button>
<Button icon={<Icon />} size="regular" colorTheme="primary">
<Button icon={<AppleIcon size={20} />} size="regular" colorTheme="primary">
BUTTON
</Button>
<Button icon={<Icon />} size="small" colorTheme="primary">
<Button icon={<AppleIcon size={20} />} size="small" colorTheme="primary">
BUTTON
</Button>
<Button icon={<Icon />} size="x-small" colorTheme="primary">
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="primary">
BUTTON
</Button>
<Button icon={<Icon />} size="x-small" colorTheme="primary" disabled>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="primary" disabled>
BUTTON
</Button>
</div>
Expand All @@ -81,22 +90,22 @@ const App = () => {
alignItems: 'flex-end',
}}
>
<Button icon={<Icon />} size="bold" colorTheme="netural">
<Button icon={<AppleIcon size={20} />} size="bold" colorTheme="netural">
BUTTON
</Button>
<Button icon={<Icon />} size="medium" colorTheme="netural">
<Button icon={<AppleIcon size={20} />} size="medium" colorTheme="netural">
BUTTON
</Button>
<Button icon={<Icon />} size="regular" colorTheme="netural">
<Button icon={<AppleIcon size={20} />} size="regular" colorTheme="netural">
BUTTON
</Button>
<Button icon={<Icon />} size="small" colorTheme="netural">
<Button icon={<AppleIcon size={20} />} size="small" colorTheme="netural">
BUTTON
</Button>
<Button icon={<Icon />} size="x-small" colorTheme="netural">
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="netural">
BUTTON
</Button>
<Button icon={<Icon />} size="x-small" colorTheme="netural" disabled>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="netural" disabled>
BUTTON
</Button>
</div>
Expand Down Expand Up @@ -137,22 +146,22 @@ const App = () => {
alignItems: 'flex-end',
}}
>
<Button icon={<Icon />} size="bold" colorTheme="line">
<Button icon={<AppleIcon size={20} />} size="bold" colorTheme="line">
BUTTON
</Button>
<Button icon={<Icon />} size="medium" colorTheme="line">
<Button icon={<AppleIcon size={20} />} size="medium" colorTheme="line">
BUTTON
</Button>
<Button icon={<Icon />} size="regular" colorTheme="line">
<Button icon={<AppleIcon size={20} />} size="regular" colorTheme="line">
BUTTON
</Button>
<Button icon={<Icon />} size="small" colorTheme="line">
<Button icon={<AppleIcon size={20} />} size="small" colorTheme="line">
BUTTON
</Button>
<Button icon={<Icon />} size="x-small" colorTheme="line">
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="line">
BUTTON
</Button>
<Button icon={<Icon />} size="x-small" colorTheme="line" disabled>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="line" disabled>
BUTTON
</Button>
</div>
Expand Down Expand Up @@ -186,9 +195,9 @@ const App = () => {
</div>
<div style={{ marginBottom: 20 }}>
<TextButton>TEXT BUTTON</TextButton>
<TextButton icon={<Icon />}>TEXT BUTTON</TextButton>
<TextButton icon={<AppleIcon size={20} />}>TEXT BUTTON</TextButton>
<TextButton disabled>TEXT BUTTON</TextButton>
<TextButton icon={<Icon />} disabled>
<TextButton icon={<AppleIcon size={20} />} disabled>
TEXT BUTTON
</TextButton>
</div>
Expand All @@ -199,6 +208,26 @@ const App = () => {
<Badge colorTheme="red">공연 당일</Badge>
<Badge colorTheme="grey">공연 종료</Badge>
</div>
<div style={{ color: 'blue' }}>
<AppleIcon size={20} /> <AppleIcon size={24} />
<GithubIcon size={20} /> <GithubIcon size={24} />
<InstagramIcon size={20} /> <InstagramIcon size={24} />
<KakaotalkIcon size={20} /> <KakaotalkIcon size={24} />
<TicketIcon size={20} /> <TicketIcon size={24} />
<WalletIcon size={20} /> <WalletIcon size={24} />
<UsersIcon size={20} /> <UsersIcon size={24} />
<EditIcon size={20} /> <EditIcon size={24} />
<CalendarIcon size={20} /> <CalendarIcon size={24} />
<ClockIcon size={20} /> <ClockIcon size={24} />
<SearchIcon size={20} /> <SearchIcon size={24} />
<UpDownIcon size={20} /> <UpDownIcon size={24} />
<ChevronRightIcon size={20} /> <ChevronRightIcon size={24} />
<ChevronLeftIcon size={20} /> <ChevronLeftIcon size={24} />
<ArrowLeftIcon size={20} /> <ArrowLeftIcon size={24} />
<ArrowRightIcon size={20} /> <ArrowRightIcon size={24} />
<PlusIcon size={20} /> <PlusIcon size={24} />
<CloseIcon size={20} /> <CloseIcon size={24} />
</div>
</h1>
</BooltiUIProvider>
);
Expand Down
24 changes: 24 additions & 0 deletions packages/icon/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "@boolti/icon",
"private": true,
"version": "0.0.0",
"type": "module",
"main": "src/index.ts",
"types": "src/index.ts",
"scripts": {
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
},
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@boolti/eslint-config": "*",
"@boolti/typescript-config": "*",
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"typescript": "^5.2.2"
}
}
16 changes: 16 additions & 0 deletions packages/icon/src/components/Apple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export const Apple = ({ size }: { size: 20 | 24 }) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.7516 12.0953C17.7422 10.375 18.5203 9.07656 20.0953 8.12031C19.2141 6.85938 17.8828 6.16563 16.125 6.02969C14.4609 5.89844 12.6422 7 11.9766 7C11.2734 7 9.66094 6.07656 8.39531 6.07656C5.77969 6.11875 3 8.1625 3 12.3203C3 13.5484 3.225 14.8172 3.675 16.1266C4.275 17.8469 6.44062 22.0656 8.7 21.9953C9.88125 21.9672 10.7156 21.1563 12.2531 21.1563C13.7437 21.1563 14.5172 21.9953 15.8344 21.9953C18.1125 21.9625 20.0719 18.1281 20.6437 16.4031C17.5875 14.9641 17.7516 12.1844 17.7516 12.0953ZM15.0984 4.39844C16.3781 2.87969 16.2609 1.49688 16.2234 1C15.0938 1.06563 13.7859 1.76875 13.0406 2.63594C12.2203 3.56406 11.7375 4.7125 11.8406 6.00625C13.0641 6.1 14.1797 5.47188 15.0984 4.39844Z"
fill="currentColor"
/>
</svg>
);
};
26 changes: 26 additions & 0 deletions packages/icon/src/components/ArrowLeft.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export const ArrowLeft = ({ size }: { size: 20 | 24 }) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 19L5 12L12 5"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19 12H5"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
26 changes: 26 additions & 0 deletions packages/icon/src/components/ArrowRIght.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export const ArrowRight = ({ size }: { size: 20 | 24 }) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 5L19 12L12 19"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5 12L19 12"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
Loading
Loading