From 67394c255956035b446e1008c6e3185612a8bc26 Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Sun, 5 May 2024 20:45:17 +0800 Subject: [PATCH 1/6] Revert "fix: merge icon and icon v2" This reverts commit bb5db829 --- components/shared/Button/v2/Button.tsx | 9 +- components/shared/Icon/icons/index.ts | 43 --------- components/shared/Icon/icons/svgs/arcade.svg | 2 +- .../shared/Icon/icons/svgs/archery-match.svg | 2 +- components/shared/Icon/icons/svgs/archery.svg | 2 +- .../Icon/icons/svgs/arrow-left-circle.svg | 2 +- .../shared/Icon/icons/svgs/arrow-left.svg | 2 +- .../Icon/icons/svgs/arrow-right-circle.svg | 2 +- .../shared/Icon/icons/svgs/arrow-right.svg | 2 +- .../shared/Icon/icons/svgs/bounce-right.svg | 2 +- .../shared/Icon/icons/svgs/bright-crown.svg | 2 +- .../shared/Icon/icons/svgs/bright-star.svg | 2 +- components/shared/Icon/icons/svgs/cellar.svg | 2 +- .../shared/Icon/icons/svgs/chat-lines.svg | 2 +- components/shared/Icon/icons/svgs/check.svg | 2 +- .../shared/Icon/icons/svgs/chess-rook.svg | 2 +- .../shared/Icon/icons/svgs/collectbook.svg | 2 +- .../shared/Icon/icons/svgs/community.svg | 2 +- components/shared/Icon/icons/svgs/crown.svg | 2 +- components/shared/Icon/icons/svgs/discord.svg | 4 +- components/shared/Icon/icons/svgs/droplet.svg | 2 +- .../shared/Icon/icons/svgs/edit-pencil.svg | 2 +- components/shared/Icon/icons/svgs/edit.svg | 4 +- components/shared/Icon/icons/svgs/emoji.svg | 2 +- components/shared/Icon/icons/svgs/error.svg | 2 +- components/shared/Icon/icons/svgs/explore.svg | 2 +- .../shared/Icon/icons/svgs/gamepad-simple.svg | 2 +- components/shared/Icon/icons/svgs/gamepad.svg | 4 +- components/shared/Icon/icons/svgs/github.svg | 4 +- components/shared/Icon/icons/svgs/globe.svg | 2 +- components/shared/Icon/icons/svgs/google.svg | 7 +- components/shared/Icon/icons/svgs/heart.svg | 4 +- components/shared/Icon/icons/svgs/home.svg | 2 +- .../Icon/icons/svgs/hot-air-balloon.svg | 4 +- .../shared/Icon/icons/svgs/kick_user.svg | 2 +- components/shared/Icon/icons/svgs/label.svg | 2 +- components/shared/Icon/icons/svgs/layout.svg | 2 +- .../shared/Icon/icons/svgs/leaderboard.svg | 2 +- components/shared/Icon/icons/svgs/lens.svg | 2 +- .../shared/Icon/icons/svgs/linkedin.svg | 5 +- components/shared/Icon/icons/svgs/logo.svg | 2 +- .../shared/Icon/icons/svgs/nav-arrow-left.svg | 2 +- .../Icon/icons/svgs/nav-arrow-right.svg | 2 +- .../shared/Icon/icons/svgs/neighbourhood.svg | 2 +- .../shared/Icon/icons/svgs/page-left.svg | 2 +- .../shared/Icon/icons/svgs/page-right.svg | 2 +- components/shared/Icon/icons/svgs/pending.svg | 2 +- .../shared/Icon/icons/svgs/planimetry.svg | 2 +- components/shared/Icon/icons/svgs/play.svg | 2 +- components/shared/Icon/icons/svgs/player.svg | 2 +- components/shared/Icon/icons/svgs/players.svg | 2 +- components/shared/Icon/icons/svgs/search.svg | 2 +- .../shared/Icon/icons/svgs/send-diagonal.svg | 2 +- components/shared/Icon/icons/svgs/sent.svg | 2 +- .../shared/Icon/icons/svgs/sleeper-chair.svg | 2 +- components/shared/Icon/icons/svgs/spiral.svg | 2 +- .../shared/Icon/icons/svgs/star-dashed.svg | 2 +- .../Icon/icons/svgs/star-half-dashed.svg | 2 +- components/shared/Icon/icons/svgs/star.svg | 2 +- components/shared/Icon/icons/svgs/tower.svg | 2 +- components/shared/Icon/icons/svgs/trophy.svg | 2 +- components/shared/Icon/icons/svgs/tunnel.svg | 2 +- components/shared/Icon/v2/Icon.tsx | 30 ++++++ components/shared/Icon/v2/icon.stories.tsx | 88 +++++++++++++++++ components/shared/Icon/v2/icon.test.tsx | 27 ++++++ components/shared/Icon/v2/icons/index.ts | 95 +++++++++++++++++++ .../shared/Icon/v2/icons/svgs/arcade.svg | 7 ++ .../shared/Icon/v2/icons/svgs/archery.svg | 3 + .../shared/Icon/v2/icons/svgs/arrow-left.svg | 3 + .../shared/Icon/v2/icons/svgs/arrow-right.svg | 3 + .../Icon/v2/icons/svgs/bright-crown.svg | 15 +++ .../Icon/{ => v2}/icons/svgs/calendar.svg | 0 .../Icon/{ => v2}/icons/svgs/chat-default.svg | 0 .../Icon/{ => v2}/icons/svgs/chat-updates.svg | 0 .../shared/Icon/v2/icons/svgs/chess-rook.svg | 3 + .../shared/Icon/{ => v2}/icons/svgs/clock.svg | 0 .../shared/Icon/v2/icons/svgs/collectbook.svg | 7 ++ .../shared/Icon/v2/icons/svgs/discord.svg | 3 + .../Icon/{ => v2}/icons/svgs/edit-mode.svg | 0 components/shared/Icon/v2/icons/svgs/edit.svg | 3 + .../shared/Icon/v2/icons/svgs/explore.svg | 5 + .../shared/Icon/{ => v2}/icons/svgs/frame.svg | 0 .../shared/Icon/v2/icons/svgs/gamepad.svg | 4 + .../shared/Icon/v2/icons/svgs/github.svg | 3 + .../shared/Icon/v2/icons/svgs/google.svg | 6 ++ .../shared/Icon/v2/icons/svgs/heart.svg | 3 + .../Icon/{ => v2}/icons/svgs/help-circle.svg | 0 components/shared/Icon/v2/icons/svgs/home.svg | 3 + .../Icon/v2/icons/svgs/hot-air-balloon.svg | 5 + .../Icon/{ => v2}/icons/svgs/house-lock.svg | 0 .../shared/Icon/{ => v2}/icons/svgs/house.svg | 0 .../Icon/{ => v2}/icons/svgs/leading-icon.svg | 0 .../shared/Icon/v2/icons/svgs/linkedin.svg | 4 + .../Icon/{ => v2}/icons/svgs/log-out.svg | 0 .../icons/svgs/long-arrow-up-left.svg | 0 .../Icon/v2/icons/svgs/nav-arrow-left.svg | 3 + .../Icon/v2/icons/svgs/nav-arrow-right.svg | 3 + .../Icon/{ => v2}/icons/svgs/nonpublic.svg | 0 .../icons/svgs/notification-default.svg | 0 .../icons/svgs/notification-updates.svg | 0 .../shared/Icon/v2/icons/svgs/player.svg | 3 + .../Icon/{ => v2}/icons/svgs/preview.svg | 0 .../Icon/{ => v2}/icons/svgs/refresh.svg | 0 .../shared/Icon/v2/icons/svgs/search.svg | 3 + components/shared/Icon/v2/icons/svgs/sent.svg | 3 + .../Icon/{ => v2}/icons/svgs/sharing.svg | 0 .../shared/Icon/{ => v2}/icons/svgs/sort.svg | 0 .../shared/Icon/v2/icons/svgs/spiral.svg | 3 + components/shared/Icon/v2/icons/svgs/star.svg | 3 + .../shared/Icon/{ => v2}/icons/svgs/x.svg | 0 components/shared/Icon/v2/index.tsx | 2 + pages/login.tsx | 8 +- 112 files changed, 416 insertions(+), 127 deletions(-) create mode 100644 components/shared/Icon/v2/Icon.tsx create mode 100644 components/shared/Icon/v2/icon.stories.tsx create mode 100644 components/shared/Icon/v2/icon.test.tsx create mode 100644 components/shared/Icon/v2/icons/index.ts create mode 100644 components/shared/Icon/v2/icons/svgs/arcade.svg create mode 100644 components/shared/Icon/v2/icons/svgs/archery.svg create mode 100644 components/shared/Icon/v2/icons/svgs/arrow-left.svg create mode 100644 components/shared/Icon/v2/icons/svgs/arrow-right.svg create mode 100644 components/shared/Icon/v2/icons/svgs/bright-crown.svg rename components/shared/Icon/{ => v2}/icons/svgs/calendar.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/chat-default.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/chat-updates.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/chess-rook.svg rename components/shared/Icon/{ => v2}/icons/svgs/clock.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/collectbook.svg create mode 100644 components/shared/Icon/v2/icons/svgs/discord.svg rename components/shared/Icon/{ => v2}/icons/svgs/edit-mode.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/edit.svg create mode 100644 components/shared/Icon/v2/icons/svgs/explore.svg rename components/shared/Icon/{ => v2}/icons/svgs/frame.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/gamepad.svg create mode 100644 components/shared/Icon/v2/icons/svgs/github.svg create mode 100644 components/shared/Icon/v2/icons/svgs/google.svg create mode 100644 components/shared/Icon/v2/icons/svgs/heart.svg rename components/shared/Icon/{ => v2}/icons/svgs/help-circle.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/home.svg create mode 100644 components/shared/Icon/v2/icons/svgs/hot-air-balloon.svg rename components/shared/Icon/{ => v2}/icons/svgs/house-lock.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/house.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/leading-icon.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/linkedin.svg rename components/shared/Icon/{ => v2}/icons/svgs/log-out.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/long-arrow-up-left.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/nav-arrow-left.svg create mode 100644 components/shared/Icon/v2/icons/svgs/nav-arrow-right.svg rename components/shared/Icon/{ => v2}/icons/svgs/nonpublic.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/notification-default.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/notification-updates.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/player.svg rename components/shared/Icon/{ => v2}/icons/svgs/preview.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/refresh.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/search.svg create mode 100644 components/shared/Icon/v2/icons/svgs/sent.svg rename components/shared/Icon/{ => v2}/icons/svgs/sharing.svg (100%) rename components/shared/Icon/{ => v2}/icons/svgs/sort.svg (100%) create mode 100644 components/shared/Icon/v2/icons/svgs/spiral.svg create mode 100644 components/shared/Icon/v2/icons/svgs/star.svg rename components/shared/Icon/{ => v2}/icons/svgs/x.svg (100%) create mode 100644 components/shared/Icon/v2/index.tsx diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx index bf7817f8..94fd31dd 100644 --- a/components/shared/Button/v2/Button.tsx +++ b/components/shared/Button/v2/Button.tsx @@ -7,8 +7,8 @@ import React, { } from "react"; import { cn } from "@/lib/utils"; import BoxFancy, { BoxFancyBorderGradientVariant } from "../../BoxFancy"; -import { IconName } from "@/components/shared/Icon/icons"; -import Icon from "@/components/shared/Icon"; +import { IconNameV2 } from "@/components/shared/Icon/v2/icons"; +import IconV2 from "@/components/shared/Icon/v2"; import { PolymorphicComponentProp, PolymorphicRef } from "@/lib/types"; export enum ButtonType { @@ -40,7 +40,7 @@ interface BaseButtonProps { variant?: ButtonType; size?: ButtonSize; icon?: ReactNode; - iconName?: IconName; + iconName?: IconNameV2; disabled?: boolean; // inner div className for styling boxFancyClassName?: string; @@ -128,7 +128,8 @@ const InteralButton: InnerButtonComponent = ( borderGradientColor={borderGradientColor} className={buttonClassName} > - {icon || (iconName && )} + {icon || + (iconName && )} {children} diff --git a/components/shared/Icon/icons/index.ts b/components/shared/Icon/icons/index.ts index 199d159c..ece942ba 100644 --- a/components/shared/Icon/icons/index.ts +++ b/components/shared/Icon/icons/index.ts @@ -60,28 +60,6 @@ import star from "./svgs/star.svg"; import tower from "./svgs/tower.svg"; import trophy from "./svgs/trophy.svg"; import tunnel from "./svgs/tunnel.svg"; - -import calendar from "./svgs/calendar.svg"; -import chatDefault from "./svgs/chat-default.svg"; -import chatUpdates from "./svgs/chat-updates.svg"; -import clock from "./svgs/clock.svg"; -import editMode from "./svgs/edit-mode.svg"; -import frame from "./svgs/frame.svg"; -import helpCircle from "./svgs/help-circle.svg"; -import house from "./svgs/house.svg"; -import houseLock from "./svgs/house-lock.svg"; -import leadingIcon from "./svgs/leading-icon.svg"; -import logOut from "./svgs/log-out.svg"; -import longArrowUpLeft from "./svgs/long-arrow-up-left.svg"; -import nonpublic from "./svgs/nonpublic.svg"; -import notificationDefault from "./svgs/notification-default.svg"; -import notificationUpdates from "./svgs/notification-updates.svg"; -import preview from "./svgs/preview.svg"; -import refresh from "./svgs/refresh.svg"; -import sharing from "./svgs/sharing.svg"; -import sort from "./svgs/sort.svg"; -import x from "./svgs/x.svg"; - const icons = { logo, check, @@ -145,27 +123,6 @@ const icons = { tower, trophy, tunnel, - - calendar, - chatDefault, - chatUpdates, - clock, - editMode, - frame, - helpCircle, - house, - houseLock, - leadingIcon, - logOut, - longArrowUpLeft, - nonpublic, - notificationDefault, - notificationUpdates, - preview, - refresh, - sharing, - sort, - x, }; export type IconName = keyof typeof icons; diff --git a/components/shared/Icon/icons/svgs/arcade.svg b/components/shared/Icon/icons/svgs/arcade.svg index c74677c0..8e6cbc2b 100644 --- a/components/shared/Icon/icons/svgs/arcade.svg +++ b/components/shared/Icon/icons/svgs/arcade.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/archery-match.svg b/components/shared/Icon/icons/svgs/archery-match.svg index 9112604a..5c7b52f4 100644 --- a/components/shared/Icon/icons/svgs/archery-match.svg +++ b/components/shared/Icon/icons/svgs/archery-match.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/archery.svg b/components/shared/Icon/icons/svgs/archery.svg index 22e6cd32..d027c3cc 100644 --- a/components/shared/Icon/icons/svgs/archery.svg +++ b/components/shared/Icon/icons/svgs/archery.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/arrow-left-circle.svg b/components/shared/Icon/icons/svgs/arrow-left-circle.svg index 7c3b7a70..cef1962c 100644 --- a/components/shared/Icon/icons/svgs/arrow-left-circle.svg +++ b/components/shared/Icon/icons/svgs/arrow-left-circle.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/arrow-left.svg b/components/shared/Icon/icons/svgs/arrow-left.svg index 0d407538..7e00cba9 100644 --- a/components/shared/Icon/icons/svgs/arrow-left.svg +++ b/components/shared/Icon/icons/svgs/arrow-left.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/arrow-right-circle.svg b/components/shared/Icon/icons/svgs/arrow-right-circle.svg index 60ba0bd6..8e7ce11e 100644 --- a/components/shared/Icon/icons/svgs/arrow-right-circle.svg +++ b/components/shared/Icon/icons/svgs/arrow-right-circle.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/arrow-right.svg b/components/shared/Icon/icons/svgs/arrow-right.svg index c51c7c37..05ba6e59 100644 --- a/components/shared/Icon/icons/svgs/arrow-right.svg +++ b/components/shared/Icon/icons/svgs/arrow-right.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/bounce-right.svg b/components/shared/Icon/icons/svgs/bounce-right.svg index be68873c..b4e06605 100644 --- a/components/shared/Icon/icons/svgs/bounce-right.svg +++ b/components/shared/Icon/icons/svgs/bounce-right.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/bright-crown.svg b/components/shared/Icon/icons/svgs/bright-crown.svg index b1480d27..89a97523 100644 --- a/components/shared/Icon/icons/svgs/bright-crown.svg +++ b/components/shared/Icon/icons/svgs/bright-crown.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/bright-star.svg b/components/shared/Icon/icons/svgs/bright-star.svg index 2b37b3ad..7a7ade4b 100644 --- a/components/shared/Icon/icons/svgs/bright-star.svg +++ b/components/shared/Icon/icons/svgs/bright-star.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/cellar.svg b/components/shared/Icon/icons/svgs/cellar.svg index 2c8a114d..81935d2f 100644 --- a/components/shared/Icon/icons/svgs/cellar.svg +++ b/components/shared/Icon/icons/svgs/cellar.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/chat-lines.svg b/components/shared/Icon/icons/svgs/chat-lines.svg index 6605ac38..7238253e 100644 --- a/components/shared/Icon/icons/svgs/chat-lines.svg +++ b/components/shared/Icon/icons/svgs/chat-lines.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/check.svg b/components/shared/Icon/icons/svgs/check.svg index eb7fe466..af453c48 100644 --- a/components/shared/Icon/icons/svgs/check.svg +++ b/components/shared/Icon/icons/svgs/check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/components/shared/Icon/icons/svgs/chess-rook.svg b/components/shared/Icon/icons/svgs/chess-rook.svg index 65486c08..f1a9d731 100644 --- a/components/shared/Icon/icons/svgs/chess-rook.svg +++ b/components/shared/Icon/icons/svgs/chess-rook.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/collectbook.svg b/components/shared/Icon/icons/svgs/collectbook.svg index 9b12e6ab..4ade3e06 100644 --- a/components/shared/Icon/icons/svgs/collectbook.svg +++ b/components/shared/Icon/icons/svgs/collectbook.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/community.svg b/components/shared/Icon/icons/svgs/community.svg index e2566d46..2997f7b4 100644 --- a/components/shared/Icon/icons/svgs/community.svg +++ b/components/shared/Icon/icons/svgs/community.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/crown.svg b/components/shared/Icon/icons/svgs/crown.svg index aef58eed..9ae1a1e9 100644 --- a/components/shared/Icon/icons/svgs/crown.svg +++ b/components/shared/Icon/icons/svgs/crown.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/discord.svg b/components/shared/Icon/icons/svgs/discord.svg index 497664f8..02cd9e67 100644 --- a/components/shared/Icon/icons/svgs/discord.svg +++ b/components/shared/Icon/icons/svgs/discord.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/components/shared/Icon/icons/svgs/droplet.svg b/components/shared/Icon/icons/svgs/droplet.svg index d0fb13b4..74666767 100644 --- a/components/shared/Icon/icons/svgs/droplet.svg +++ b/components/shared/Icon/icons/svgs/droplet.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/edit-pencil.svg b/components/shared/Icon/icons/svgs/edit-pencil.svg index d213f36d..d2688598 100644 --- a/components/shared/Icon/icons/svgs/edit-pencil.svg +++ b/components/shared/Icon/icons/svgs/edit-pencil.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/edit.svg b/components/shared/Icon/icons/svgs/edit.svg index 4bca3b6c..680bf061 100644 --- a/components/shared/Icon/icons/svgs/edit.svg +++ b/components/shared/Icon/icons/svgs/edit.svg @@ -1,3 +1,3 @@ - - + + diff --git a/components/shared/Icon/icons/svgs/emoji.svg b/components/shared/Icon/icons/svgs/emoji.svg index afda8016..8921b36d 100644 --- a/components/shared/Icon/icons/svgs/emoji.svg +++ b/components/shared/Icon/icons/svgs/emoji.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/error.svg b/components/shared/Icon/icons/svgs/error.svg index c5a8f314..62e8784c 100644 --- a/components/shared/Icon/icons/svgs/error.svg +++ b/components/shared/Icon/icons/svgs/error.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/components/shared/Icon/icons/svgs/explore.svg b/components/shared/Icon/icons/svgs/explore.svg index 4b4660e1..067e96f5 100644 --- a/components/shared/Icon/icons/svgs/explore.svg +++ b/components/shared/Icon/icons/svgs/explore.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/gamepad-simple.svg b/components/shared/Icon/icons/svgs/gamepad-simple.svg index b579e520..1011e31e 100644 --- a/components/shared/Icon/icons/svgs/gamepad-simple.svg +++ b/components/shared/Icon/icons/svgs/gamepad-simple.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/gamepad.svg b/components/shared/Icon/icons/svgs/gamepad.svg index 8cc582c3..8a12ef7f 100644 --- a/components/shared/Icon/icons/svgs/gamepad.svg +++ b/components/shared/Icon/icons/svgs/gamepad.svg @@ -1,4 +1,4 @@ - - + + diff --git a/components/shared/Icon/icons/svgs/github.svg b/components/shared/Icon/icons/svgs/github.svg index f9bd8179..40e8178e 100644 --- a/components/shared/Icon/icons/svgs/github.svg +++ b/components/shared/Icon/icons/svgs/github.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/components/shared/Icon/icons/svgs/globe.svg b/components/shared/Icon/icons/svgs/globe.svg index 77614bac..2cf1d099 100644 --- a/components/shared/Icon/icons/svgs/globe.svg +++ b/components/shared/Icon/icons/svgs/globe.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/google.svg b/components/shared/Icon/icons/svgs/google.svg index 9e17f731..2c272733 100644 --- a/components/shared/Icon/icons/svgs/google.svg +++ b/components/shared/Icon/icons/svgs/google.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/components/shared/Icon/icons/svgs/heart.svg b/components/shared/Icon/icons/svgs/heart.svg index 37832bcf..3d069cfc 100644 --- a/components/shared/Icon/icons/svgs/heart.svg +++ b/components/shared/Icon/icons/svgs/heart.svg @@ -1,3 +1,3 @@ - - + + diff --git a/components/shared/Icon/icons/svgs/home.svg b/components/shared/Icon/icons/svgs/home.svg index ce4e78fd..008bfa49 100644 --- a/components/shared/Icon/icons/svgs/home.svg +++ b/components/shared/Icon/icons/svgs/home.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/hot-air-balloon.svg b/components/shared/Icon/icons/svgs/hot-air-balloon.svg index 9c107ff3..ace05b3a 100644 --- a/components/shared/Icon/icons/svgs/hot-air-balloon.svg +++ b/components/shared/Icon/icons/svgs/hot-air-balloon.svg @@ -1,5 +1,5 @@ - + - + diff --git a/components/shared/Icon/icons/svgs/kick_user.svg b/components/shared/Icon/icons/svgs/kick_user.svg index 12de3580..1162b676 100644 --- a/components/shared/Icon/icons/svgs/kick_user.svg +++ b/components/shared/Icon/icons/svgs/kick_user.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/label.svg b/components/shared/Icon/icons/svgs/label.svg index 2df1be6d..5638ec16 100644 --- a/components/shared/Icon/icons/svgs/label.svg +++ b/components/shared/Icon/icons/svgs/label.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/layout.svg b/components/shared/Icon/icons/svgs/layout.svg index dc1e0433..e5b2d189 100644 --- a/components/shared/Icon/icons/svgs/layout.svg +++ b/components/shared/Icon/icons/svgs/layout.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/leaderboard.svg b/components/shared/Icon/icons/svgs/leaderboard.svg index a07218d8..a8dfa5d8 100644 --- a/components/shared/Icon/icons/svgs/leaderboard.svg +++ b/components/shared/Icon/icons/svgs/leaderboard.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/lens.svg b/components/shared/Icon/icons/svgs/lens.svg index 4fc4d3cb..4db5a1af 100644 --- a/components/shared/Icon/icons/svgs/lens.svg +++ b/components/shared/Icon/icons/svgs/lens.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/linkedin.svg b/components/shared/Icon/icons/svgs/linkedin.svg index 84cb97dc..3b9cc056 100644 --- a/components/shared/Icon/icons/svgs/linkedin.svg +++ b/components/shared/Icon/icons/svgs/linkedin.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/components/shared/Icon/icons/svgs/logo.svg b/components/shared/Icon/icons/svgs/logo.svg index e9454a3c..422e9ed5 100644 --- a/components/shared/Icon/icons/svgs/logo.svg +++ b/components/shared/Icon/icons/svgs/logo.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/nav-arrow-left.svg b/components/shared/Icon/icons/svgs/nav-arrow-left.svg index 94c664fa..97b6816f 100644 --- a/components/shared/Icon/icons/svgs/nav-arrow-left.svg +++ b/components/shared/Icon/icons/svgs/nav-arrow-left.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/nav-arrow-right.svg b/components/shared/Icon/icons/svgs/nav-arrow-right.svg index 892847de..44cd88d4 100644 --- a/components/shared/Icon/icons/svgs/nav-arrow-right.svg +++ b/components/shared/Icon/icons/svgs/nav-arrow-right.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/neighbourhood.svg b/components/shared/Icon/icons/svgs/neighbourhood.svg index eef23bd7..0888aa3a 100644 --- a/components/shared/Icon/icons/svgs/neighbourhood.svg +++ b/components/shared/Icon/icons/svgs/neighbourhood.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/page-left.svg b/components/shared/Icon/icons/svgs/page-left.svg index 8b754adc..9910ff48 100644 --- a/components/shared/Icon/icons/svgs/page-left.svg +++ b/components/shared/Icon/icons/svgs/page-left.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/page-right.svg b/components/shared/Icon/icons/svgs/page-right.svg index ff16b08c..5f64ab35 100644 --- a/components/shared/Icon/icons/svgs/page-right.svg +++ b/components/shared/Icon/icons/svgs/page-right.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/pending.svg b/components/shared/Icon/icons/svgs/pending.svg index 39f65de4..25e83812 100644 --- a/components/shared/Icon/icons/svgs/pending.svg +++ b/components/shared/Icon/icons/svgs/pending.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/components/shared/Icon/icons/svgs/planimetry.svg b/components/shared/Icon/icons/svgs/planimetry.svg index ff838679..d4b66304 100644 --- a/components/shared/Icon/icons/svgs/planimetry.svg +++ b/components/shared/Icon/icons/svgs/planimetry.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/play.svg b/components/shared/Icon/icons/svgs/play.svg index 6dc24b51..ac9c3099 100644 --- a/components/shared/Icon/icons/svgs/play.svg +++ b/components/shared/Icon/icons/svgs/play.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/player.svg b/components/shared/Icon/icons/svgs/player.svg index ef9bbdee..b5623439 100644 --- a/components/shared/Icon/icons/svgs/player.svg +++ b/components/shared/Icon/icons/svgs/player.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/players.svg b/components/shared/Icon/icons/svgs/players.svg index d74e487b..ed11bc41 100644 --- a/components/shared/Icon/icons/svgs/players.svg +++ b/components/shared/Icon/icons/svgs/players.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/search.svg b/components/shared/Icon/icons/svgs/search.svg index e6adfbe5..13c8672f 100644 --- a/components/shared/Icon/icons/svgs/search.svg +++ b/components/shared/Icon/icons/svgs/search.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/send-diagonal.svg b/components/shared/Icon/icons/svgs/send-diagonal.svg index dc6a1016..4b901a59 100644 --- a/components/shared/Icon/icons/svgs/send-diagonal.svg +++ b/components/shared/Icon/icons/svgs/send-diagonal.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/sent.svg b/components/shared/Icon/icons/svgs/sent.svg index a19eeb04..e919193c 100644 --- a/components/shared/Icon/icons/svgs/sent.svg +++ b/components/shared/Icon/icons/svgs/sent.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/sleeper-chair.svg b/components/shared/Icon/icons/svgs/sleeper-chair.svg index b61fed42..2eed7eb4 100644 --- a/components/shared/Icon/icons/svgs/sleeper-chair.svg +++ b/components/shared/Icon/icons/svgs/sleeper-chair.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/spiral.svg b/components/shared/Icon/icons/svgs/spiral.svg index ab64bda6..db6bb11a 100644 --- a/components/shared/Icon/icons/svgs/spiral.svg +++ b/components/shared/Icon/icons/svgs/spiral.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/star-dashed.svg b/components/shared/Icon/icons/svgs/star-dashed.svg index a39c415b..42111d21 100644 --- a/components/shared/Icon/icons/svgs/star-dashed.svg +++ b/components/shared/Icon/icons/svgs/star-dashed.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/star-half-dashed.svg b/components/shared/Icon/icons/svgs/star-half-dashed.svg index 7b9edfbe..a06412da 100644 --- a/components/shared/Icon/icons/svgs/star-half-dashed.svg +++ b/components/shared/Icon/icons/svgs/star-half-dashed.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/star.svg b/components/shared/Icon/icons/svgs/star.svg index fb86baa5..ce3facca 100644 --- a/components/shared/Icon/icons/svgs/star.svg +++ b/components/shared/Icon/icons/svgs/star.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/tower.svg b/components/shared/Icon/icons/svgs/tower.svg index 1915e4aa..3a92c57c 100644 --- a/components/shared/Icon/icons/svgs/tower.svg +++ b/components/shared/Icon/icons/svgs/tower.svg @@ -1,3 +1,3 @@ - + diff --git a/components/shared/Icon/icons/svgs/trophy.svg b/components/shared/Icon/icons/svgs/trophy.svg index 83097e0a..f649cd24 100644 --- a/components/shared/Icon/icons/svgs/trophy.svg +++ b/components/shared/Icon/icons/svgs/trophy.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/icons/svgs/tunnel.svg b/components/shared/Icon/icons/svgs/tunnel.svg index 785e4032..36a49943 100644 --- a/components/shared/Icon/icons/svgs/tunnel.svg +++ b/components/shared/Icon/icons/svgs/tunnel.svg @@ -1,4 +1,4 @@ - + diff --git a/components/shared/Icon/v2/Icon.tsx b/components/shared/Icon/v2/Icon.tsx new file mode 100644 index 00000000..320a52ed --- /dev/null +++ b/components/shared/Icon/v2/Icon.tsx @@ -0,0 +1,30 @@ +import type { ClassValue } from "clsx"; +import { cn } from "@/lib/utils"; +import icons, { IconNameV2 } from "./icons"; + +type IconProps = { + name: IconNameV2; + className?: ClassValue; +}; + +/** + * 新增 Svg 可以將檔案放至 `@/components/shared/Icon/v2/icons/svgs` 裡， + * 在 `@/components/shared/Icon/v2/icons/index.ts` 引入 svg + * 並放入 **icons** 這個物件，即可使用 + */ +const Icon = (props: IconProps) => { + const { className, name, ...rest } = props; + const transformClassName = cn("stroke-basic-black", className); + const SvgIcon = name && icons[name]; + + return ( + + ); +}; + +export default Icon; diff --git a/components/shared/Icon/v2/icon.stories.tsx b/components/shared/Icon/v2/icon.stories.tsx new file mode 100644 index 00000000..81517ba1 --- /dev/null +++ b/components/shared/Icon/v2/icon.stories.tsx @@ -0,0 +1,88 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; + +import IconV2 from "."; +import icons from "./icons"; +import { keys } from "@/lib/utils"; +import { Input } from "@/components/shared/Input"; +import { ToastQueueProvider, useToast } from "@/components/shared/Toast"; + +const meta: Meta = { + title: "General/IconV2", + component: IconV2, + tags: ["autodocs"], + decorators: [ + (Story) => ( + +
+ +
+ + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Playground: Story = { + render: (args) => , +}; + +Playground.args = { + name: "arcade", + className: "w-9 h-9", +}; + +const AllIcons = () => { + const [value, setValue] = useState(""); + const toast = useToast(); + + const handleClick = (iconName: string) => () => { + const cb = navigator.clipboard; + const text = ``; + + toast({ children: "已複製成功!!" }, { duration: 1000 }); + + cb.writeText(text).then(); + }; + + return ( + <> +

+ 點擊 icon 即可複製 +

+ +
+ {keys(icons) + .filter((iconName) => iconName.includes(value)) + .map((iconName) => ( +
+ +

+ {iconName} +

+
+ ))} +
+ + ); +}; + +export const All: Story = { + render: () => , +}; diff --git a/components/shared/Icon/v2/icon.test.tsx b/components/shared/Icon/v2/icon.test.tsx new file mode 100644 index 00000000..180f7e7c --- /dev/null +++ b/components/shared/Icon/v2/icon.test.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import Icon from "./index"; +import type { IconNameV2 } from "./icons"; + +jest.mock("path/to/image.svg", () => "svg"); + +describe("IconV2", () => { + const TEST_ICON_NAME: IconNameV2 = "arcade"; + it("render Icon with correct name", () => { + const { container } = render(); + + const svg = container.querySelector("svg"); + expect(svg).toBeInTheDocument(); + }); + + it("Icon has correct className", () => { + const className = "test class"; + const { container } = render( + + ); + + const svg = container.querySelector("svg"); + expect(svg).toHaveClass(className); + }); +}); diff --git a/components/shared/Icon/v2/icons/index.ts b/components/shared/Icon/v2/icons/index.ts new file mode 100644 index 00000000..2cf55179 --- /dev/null +++ b/components/shared/Icon/v2/icons/index.ts @@ -0,0 +1,95 @@ +import arcade from "./svgs/arcade.svg"; +import archery from "./svgs/archery.svg"; +import arrowLeft from "./svgs/arrow-left.svg"; +import arrowRight from "./svgs/arrow-right.svg"; +import brightCrown from "./svgs/bright-crown.svg"; +import calendar from "./svgs/calendar.svg"; +import chatDefault from "./svgs/chat-default.svg"; +import chatUpdates from "./svgs/chat-updates.svg"; +import chessRook from "./svgs/chess-rook.svg"; +import clock from "./svgs/clock.svg"; +import collectbook from "./svgs/collectbook.svg"; +import discord from "./svgs/discord.svg"; +import edit from "./svgs/edit.svg"; +import editMode from "./svgs/edit-mode.svg"; +import explore from "./svgs/explore.svg"; +import frame from "./svgs/frame.svg"; +import gamepad from "./svgs/gamepad.svg"; +import github from "./svgs/github.svg"; +import google from "./svgs/google.svg"; +import heart from "./svgs/heart.svg"; +import helpCircle from "./svgs/help-circle.svg"; +import home from "./svgs/home.svg"; +import hotAirBalloon from "./svgs/hot-air-balloon.svg"; +import house from "./svgs/house.svg"; +import houseLock from "./svgs/house-lock.svg"; +import leadingIcon from "./svgs/leading-icon.svg"; +import linkedin from "./svgs/linkedin.svg"; +import logOut from "./svgs/log-out.svg"; +import longArrowUpLeft from "./svgs/long-arrow-up-left.svg"; +import navAarrowLeft from "./svgs/nav-arrow-left.svg"; +import navArrowRight from "./svgs/nav-arrow-right.svg"; +import nonpublic from "./svgs/nonpublic.svg"; +import notificationDefault from "./svgs/notification-default.svg"; +import notificationUpdates from "./svgs/notification-updates.svg"; +import player from "./svgs/player.svg"; +import preview from "./svgs/preview.svg"; +import refresh from "./svgs/refresh.svg"; +import search from "./svgs/search.svg"; +import sent from "./svgs/sent.svg"; +import sharing from "./svgs/sharing.svg"; +import sort from "./svgs/sort.svg"; +import spiral from "./svgs/spiral.svg"; +import star from "./svgs/star.svg"; +import x from "./svgs/x.svg"; + +const icons = { + arcade, + archery, + arrowLeft, + arrowRight, + brightCrown, + calendar, + chatDefault, + chatUpdates, + chessRook, + clock, + collectbook, + discord, + edit, + editMode, + explore, + frame, + gamepad, + github, + google, + heart, + helpCircle, + home, + hotAirBalloon, + house, + houseLock, + leadingIcon, + linkedin, + logOut, + longArrowUpLeft, + navAarrowLeft, + navArrowRight, + nonpublic, + notificationDefault, + notificationUpdates, + player, + preview, + refresh, + search, + sent, + sharing, + sort, + spiral, + star, + x, +}; + +export type IconNameV2 = keyof typeof icons; + +export default icons; diff --git a/components/shared/Icon/v2/icons/svgs/arcade.svg b/components/shared/Icon/v2/icons/svgs/arcade.svg new file mode 100644 index 00000000..c74677c0 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/arcade.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/components/shared/Icon/v2/icons/svgs/archery.svg b/components/shared/Icon/v2/icons/svgs/archery.svg new file mode 100644 index 00000000..22e6cd32 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/archery.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/arrow-left.svg b/components/shared/Icon/v2/icons/svgs/arrow-left.svg new file mode 100644 index 00000000..0d407538 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/arrow-right.svg b/components/shared/Icon/v2/icons/svgs/arrow-right.svg new file mode 100644 index 00000000..c51c7c37 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/bright-crown.svg b/components/shared/Icon/v2/icons/svgs/bright-crown.svg new file mode 100644 index 00000000..b1480d27 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/bright-crown.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/components/shared/Icon/icons/svgs/calendar.svg b/components/shared/Icon/v2/icons/svgs/calendar.svg similarity index 100% rename from components/shared/Icon/icons/svgs/calendar.svg rename to components/shared/Icon/v2/icons/svgs/calendar.svg diff --git a/components/shared/Icon/icons/svgs/chat-default.svg b/components/shared/Icon/v2/icons/svgs/chat-default.svg similarity index 100% rename from components/shared/Icon/icons/svgs/chat-default.svg rename to components/shared/Icon/v2/icons/svgs/chat-default.svg diff --git a/components/shared/Icon/icons/svgs/chat-updates.svg b/components/shared/Icon/v2/icons/svgs/chat-updates.svg similarity index 100% rename from components/shared/Icon/icons/svgs/chat-updates.svg rename to components/shared/Icon/v2/icons/svgs/chat-updates.svg diff --git a/components/shared/Icon/v2/icons/svgs/chess-rook.svg b/components/shared/Icon/v2/icons/svgs/chess-rook.svg new file mode 100644 index 00000000..65486c08 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/chess-rook.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/icons/svgs/clock.svg b/components/shared/Icon/v2/icons/svgs/clock.svg similarity index 100% rename from components/shared/Icon/icons/svgs/clock.svg rename to components/shared/Icon/v2/icons/svgs/clock.svg diff --git a/components/shared/Icon/v2/icons/svgs/collectbook.svg b/components/shared/Icon/v2/icons/svgs/collectbook.svg new file mode 100644 index 00000000..9b12e6ab --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/collectbook.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/components/shared/Icon/v2/icons/svgs/discord.svg b/components/shared/Icon/v2/icons/svgs/discord.svg new file mode 100644 index 00000000..497664f8 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/icons/svgs/edit-mode.svg b/components/shared/Icon/v2/icons/svgs/edit-mode.svg similarity index 100% rename from components/shared/Icon/icons/svgs/edit-mode.svg rename to components/shared/Icon/v2/icons/svgs/edit-mode.svg diff --git a/components/shared/Icon/v2/icons/svgs/edit.svg b/components/shared/Icon/v2/icons/svgs/edit.svg new file mode 100644 index 00000000..4bca3b6c --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/explore.svg b/components/shared/Icon/v2/icons/svgs/explore.svg new file mode 100644 index 00000000..4b4660e1 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/explore.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/shared/Icon/icons/svgs/frame.svg b/components/shared/Icon/v2/icons/svgs/frame.svg similarity index 100% rename from components/shared/Icon/icons/svgs/frame.svg rename to components/shared/Icon/v2/icons/svgs/frame.svg diff --git a/components/shared/Icon/v2/icons/svgs/gamepad.svg b/components/shared/Icon/v2/icons/svgs/gamepad.svg new file mode 100644 index 00000000..8cc582c3 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/gamepad.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/shared/Icon/v2/icons/svgs/github.svg b/components/shared/Icon/v2/icons/svgs/github.svg new file mode 100644 index 00000000..f9bd8179 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/google.svg b/components/shared/Icon/v2/icons/svgs/google.svg new file mode 100644 index 00000000..9e17f731 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/google.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/components/shared/Icon/v2/icons/svgs/heart.svg b/components/shared/Icon/v2/icons/svgs/heart.svg new file mode 100644 index 00000000..37832bcf --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/icons/svgs/help-circle.svg b/components/shared/Icon/v2/icons/svgs/help-circle.svg similarity index 100% rename from components/shared/Icon/icons/svgs/help-circle.svg rename to components/shared/Icon/v2/icons/svgs/help-circle.svg diff --git a/components/shared/Icon/v2/icons/svgs/home.svg b/components/shared/Icon/v2/icons/svgs/home.svg new file mode 100644 index 00000000..ce4e78fd --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/hot-air-balloon.svg b/components/shared/Icon/v2/icons/svgs/hot-air-balloon.svg new file mode 100644 index 00000000..9c107ff3 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/hot-air-balloon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/components/shared/Icon/icons/svgs/house-lock.svg b/components/shared/Icon/v2/icons/svgs/house-lock.svg similarity index 100% rename from components/shared/Icon/icons/svgs/house-lock.svg rename to components/shared/Icon/v2/icons/svgs/house-lock.svg diff --git a/components/shared/Icon/icons/svgs/house.svg b/components/shared/Icon/v2/icons/svgs/house.svg similarity index 100% rename from components/shared/Icon/icons/svgs/house.svg rename to components/shared/Icon/v2/icons/svgs/house.svg diff --git a/components/shared/Icon/icons/svgs/leading-icon.svg b/components/shared/Icon/v2/icons/svgs/leading-icon.svg similarity index 100% rename from components/shared/Icon/icons/svgs/leading-icon.svg rename to components/shared/Icon/v2/icons/svgs/leading-icon.svg diff --git a/components/shared/Icon/v2/icons/svgs/linkedin.svg b/components/shared/Icon/v2/icons/svgs/linkedin.svg new file mode 100644 index 00000000..84cb97dc --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/linkedin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/shared/Icon/icons/svgs/log-out.svg b/components/shared/Icon/v2/icons/svgs/log-out.svg similarity index 100% rename from components/shared/Icon/icons/svgs/log-out.svg rename to components/shared/Icon/v2/icons/svgs/log-out.svg diff --git a/components/shared/Icon/icons/svgs/long-arrow-up-left.svg b/components/shared/Icon/v2/icons/svgs/long-arrow-up-left.svg similarity index 100% rename from components/shared/Icon/icons/svgs/long-arrow-up-left.svg rename to components/shared/Icon/v2/icons/svgs/long-arrow-up-left.svg diff --git a/components/shared/Icon/v2/icons/svgs/nav-arrow-left.svg b/components/shared/Icon/v2/icons/svgs/nav-arrow-left.svg new file mode 100644 index 00000000..94c664fa --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/nav-arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/nav-arrow-right.svg b/components/shared/Icon/v2/icons/svgs/nav-arrow-right.svg new file mode 100644 index 00000000..892847de --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/nav-arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/icons/svgs/nonpublic.svg b/components/shared/Icon/v2/icons/svgs/nonpublic.svg similarity index 100% rename from components/shared/Icon/icons/svgs/nonpublic.svg rename to components/shared/Icon/v2/icons/svgs/nonpublic.svg diff --git a/components/shared/Icon/icons/svgs/notification-default.svg b/components/shared/Icon/v2/icons/svgs/notification-default.svg similarity index 100% rename from components/shared/Icon/icons/svgs/notification-default.svg rename to components/shared/Icon/v2/icons/svgs/notification-default.svg diff --git a/components/shared/Icon/icons/svgs/notification-updates.svg b/components/shared/Icon/v2/icons/svgs/notification-updates.svg similarity index 100% rename from components/shared/Icon/icons/svgs/notification-updates.svg rename to components/shared/Icon/v2/icons/svgs/notification-updates.svg diff --git a/components/shared/Icon/v2/icons/svgs/player.svg b/components/shared/Icon/v2/icons/svgs/player.svg new file mode 100644 index 00000000..ef9bbdee --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/player.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/icons/svgs/preview.svg b/components/shared/Icon/v2/icons/svgs/preview.svg similarity index 100% rename from components/shared/Icon/icons/svgs/preview.svg rename to components/shared/Icon/v2/icons/svgs/preview.svg diff --git a/components/shared/Icon/icons/svgs/refresh.svg b/components/shared/Icon/v2/icons/svgs/refresh.svg similarity index 100% rename from components/shared/Icon/icons/svgs/refresh.svg rename to components/shared/Icon/v2/icons/svgs/refresh.svg diff --git a/components/shared/Icon/v2/icons/svgs/search.svg b/components/shared/Icon/v2/icons/svgs/search.svg new file mode 100644 index 00000000..e6adfbe5 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/sent.svg b/components/shared/Icon/v2/icons/svgs/sent.svg new file mode 100644 index 00000000..a19eeb04 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/sent.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/icons/svgs/sharing.svg b/components/shared/Icon/v2/icons/svgs/sharing.svg similarity index 100% rename from components/shared/Icon/icons/svgs/sharing.svg rename to components/shared/Icon/v2/icons/svgs/sharing.svg diff --git a/components/shared/Icon/icons/svgs/sort.svg b/components/shared/Icon/v2/icons/svgs/sort.svg similarity index 100% rename from components/shared/Icon/icons/svgs/sort.svg rename to components/shared/Icon/v2/icons/svgs/sort.svg diff --git a/components/shared/Icon/v2/icons/svgs/spiral.svg b/components/shared/Icon/v2/icons/svgs/spiral.svg new file mode 100644 index 00000000..ab64bda6 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/spiral.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/v2/icons/svgs/star.svg b/components/shared/Icon/v2/icons/svgs/star.svg new file mode 100644 index 00000000..fb86baa5 --- /dev/null +++ b/components/shared/Icon/v2/icons/svgs/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/shared/Icon/icons/svgs/x.svg b/components/shared/Icon/v2/icons/svgs/x.svg similarity index 100% rename from components/shared/Icon/icons/svgs/x.svg rename to components/shared/Icon/v2/icons/svgs/x.svg diff --git a/components/shared/Icon/v2/index.tsx b/components/shared/Icon/v2/index.tsx new file mode 100644 index 00000000..900bb84a --- /dev/null +++ b/components/shared/Icon/v2/index.tsx @@ -0,0 +1,2 @@ +import IconV2 from "./Icon"; +export default IconV2; diff --git a/pages/login.tsx b/pages/login.tsx index e19219b1..c6d66b46 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -11,7 +11,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import ButtonV2, { ButtonType } from "@/components/shared/Button/v2"; import Cover from "@/components/shared/Cover"; -import Icon from "@/components/shared/Icon"; +import IconV2 from "@/components/shared/Icon/v2"; import useAuth from "@/hooks/context/useAuth"; import useUser from "@/hooks/useUser"; @@ -21,11 +21,11 @@ import { LoginType } from "@/requests/auth"; import { NextPageWithProps } from "./_app"; import { BoxFancy } from "@/components/shared/BoxFancy"; import Link from "next/link"; -import { IconName } from "@/components/shared/Icon/icons"; +import { IconNameV2 } from "@/components/shared/Icon/v2/icons"; import { useSearchParams } from "next/navigation"; import { cn } from "@/lib/utils"; -const LoginMethods: { text: string; type: LoginType; icon: IconName }[] = [ +const LoginMethods: { text: string; type: LoginType; icon: IconNameV2 }[] = [ { text: "Google 帳號登入", type: LoginType.GOOGLE, icon: "google" }, { text: "GitHub 帳號登入", type: LoginType.GITHUB, icon: "github" }, { text: "LinkedIn 帳號登入", type: LoginType.LINKEDIN, icon: "linkedin" }, @@ -103,7 +103,7 @@ const Login: NextPageWithProps = () => {

) : null}

- + 遊戲微服務大平台

{!bye ? ( From a81f754d48129f1a6cedb92de23cc6b45f02f7e8 Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Sun, 5 May 2024 20:56:52 +0800 Subject: [PATCH 2/6] test: use light background in IconV2 storybook --- components/shared/Icon/v2/icon.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/shared/Icon/v2/icon.stories.tsx b/components/shared/Icon/v2/icon.stories.tsx index 81517ba1..c6b6b776 100644 --- a/components/shared/Icon/v2/icon.stories.tsx +++ b/components/shared/Icon/v2/icon.stories.tsx @@ -14,7 +14,7 @@ const meta: Meta = { decorators: [ (Story) => ( -
+
From 05d8e607a540f7cc29e568a2484eb63eaa3dced3 Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Sun, 5 May 2024 21:20:04 +0800 Subject: [PATCH 3/6] fix: visible, non-interactive elements with click handlers must have at least one keyboard listener --- components/shared/Icon/v2/icon.stories.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/components/shared/Icon/v2/icon.stories.tsx b/components/shared/Icon/v2/icon.stories.tsx index c6b6b776..a2a94853 100644 --- a/components/shared/Icon/v2/icon.stories.tsx +++ b/components/shared/Icon/v2/icon.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { useState } from "react"; +import { MouseEventHandler, useState } from "react"; import IconV2 from "."; import icons from "./icons"; @@ -39,14 +39,18 @@ const AllIcons = () => { const [value, setValue] = useState(""); const toast = useToast(); - const handleClick = (iconName: string) => () => { - const cb = navigator.clipboard; - const text = ``; + const handleClick = + (iconName: string): MouseEventHandler => + (e) => { + e.stopPropagation(); - toast({ children: "已複製成功!!" }, { duration: 1000 }); + const cb = navigator.clipboard; + const text = ``; - cb.writeText(text).then(); - }; + toast({ children: "已複製成功!!" }, { duration: 1000 }); + + cb.writeText(text).then(); + }; return ( <> @@ -67,7 +71,7 @@ const AllIcons = () => { {keys(icons) .filter((iconName) => iconName.includes(value)) .map((iconName) => ( -
{

{iconName}

-
+ ))}
From 435e9e9774b54a8df89cd586f8a236e782aa7a8b Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Sun, 5 May 2024 22:18:12 +0800 Subject: [PATCH 4/6] fix: change some test code to avoid SonarQube yell about duplicated codes --- components/shared/Icon/v2/Icon.tsx | 12 +++--------- components/shared/Icon/v2/icon.test.tsx | 10 +++++----- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/components/shared/Icon/v2/Icon.tsx b/components/shared/Icon/v2/Icon.tsx index 320a52ed..ace078d7 100644 --- a/components/shared/Icon/v2/Icon.tsx +++ b/components/shared/Icon/v2/Icon.tsx @@ -1,6 +1,7 @@ import type { ClassValue } from "clsx"; import { cn } from "@/lib/utils"; import icons, { IconNameV2 } from "./icons"; +import { HTMLProps } from "react"; type IconProps = { name: IconNameV2; @@ -15,16 +16,9 @@ type IconProps = { const Icon = (props: IconProps) => { const { className, name, ...rest } = props; const transformClassName = cn("stroke-basic-black", className); - const SvgIcon = name && icons[name]; + const SvgIcon: React.FC> = name && icons[name]; - return ( - - ); + return ; }; export default Icon; diff --git a/components/shared/Icon/v2/icon.test.tsx b/components/shared/Icon/v2/icon.test.tsx index 180f7e7c..62dea1bb 100644 --- a/components/shared/Icon/v2/icon.test.tsx +++ b/components/shared/Icon/v2/icon.test.tsx @@ -8,20 +8,20 @@ jest.mock("path/to/image.svg", () => "svg"); describe("IconV2", () => { const TEST_ICON_NAME: IconNameV2 = "arcade"; - it("render Icon with correct name", () => { + it("should render Icon with correct name", () => { const { container } = render(); const svg = container.querySelector("svg"); expect(svg).toBeInTheDocument(); }); - it("Icon has correct className", () => { - const className = "test class"; + it("should render Icon with correct class name", () => { const { container } = render( - + ); const svg = container.querySelector("svg"); - expect(svg).toHaveClass(className); + expect(svg).toHaveClass("stroke-red-500"); + expect(svg).toHaveClass("fill-black"); }); }); From 9d1aaa867510bc473825c4150a1e345c37bc8cef Mon Sep 17 00:00:00 2001 From: physicsSorcererKing Date: Sun, 5 May 2024 22:29:37 +0800 Subject: [PATCH 5/6] feat: add style prop to IconV2 --- components/shared/Icon/v2/Icon.tsx | 1 + components/shared/Icon/v2/icon.test.tsx | 15 +++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/components/shared/Icon/v2/Icon.tsx b/components/shared/Icon/v2/Icon.tsx index ace078d7..01d560d7 100644 --- a/components/shared/Icon/v2/Icon.tsx +++ b/components/shared/Icon/v2/Icon.tsx @@ -6,6 +6,7 @@ import { HTMLProps } from "react"; type IconProps = { name: IconNameV2; className?: ClassValue; + style?: React.CSSProperties; }; /** diff --git a/components/shared/Icon/v2/icon.test.tsx b/components/shared/Icon/v2/icon.test.tsx index 62dea1bb..67d0484e 100644 --- a/components/shared/Icon/v2/icon.test.tsx +++ b/components/shared/Icon/v2/icon.test.tsx @@ -24,4 +24,19 @@ describe("IconV2", () => { expect(svg).toHaveClass("stroke-red-500"); expect(svg).toHaveClass("fill-black"); }); + + it("should render Icon with correct style", () => { + const { container } = render( + + ); + + const svg = container.querySelector("svg"); + expect(svg).toHaveStyle("width: 20px"); + expect(svg).toHaveStyle("height: 20px"); + expect(svg).toHaveStyle("stroke: red"); + expect(svg).toHaveStyle("fill: aqua"); + }); }); From f430ce7cb4dca2ad0e9225d994d1cfa4d42e98c2 Mon Sep 17 00:00:00 2001 From: Nicky Wang <36099986+physicsSorcererKing@users.noreply.github.com> Date: Tue, 28 May 2024 22:36:41 +0800 Subject: [PATCH 6/6] chore: update icon.stories.tsx text color --- components/shared/Icon/v2/icon.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/shared/Icon/v2/icon.stories.tsx b/components/shared/Icon/v2/icon.stories.tsx index a2a94853..579a7d10 100644 --- a/components/shared/Icon/v2/icon.stories.tsx +++ b/components/shared/Icon/v2/icon.stories.tsx @@ -54,14 +54,14 @@ const AllIcons = () => { return ( <> -

+

點擊 icon 即可複製

{ onClick={handleClick(iconName)} > -

+

{iconName}