@mindlogic-ai/logician-ui 2.0.0-alpha.0

package/src/components/Icon/IconMap.ts

@@ -0,0 +1,290 @@
+import { BiDetail, BiExpandAlt } from 'react-icons/bi';
+import { BsTranslate } from 'react-icons/bs';
+import { CiFileOn } from 'react-icons/ci';
+import {
+  FaArchive,
+  FaBeer,
+  FaChartPie,
+  FaGraduationCap,
+  FaImage,
+  FaMoneyBillWave,
+  FaPlay,
+  FaPrint,
+  FaRegEye,
+  FaRegEyeSlash,
+  FaRegQuestionCircle,
+  FaRegTrashAlt,
+  FaRegUserCircle,
+  FaSortAlphaDown,
+  FaSortAlphaUp,
+  FaSortNumericDown,
+  FaSortNumericUp,
+  FaUniversity,
+  FaUserCheck,
+  FaUserPlus,
+  FaUsers,
+} from 'react-icons/fa';
+import {
+  FaCheck,
+  FaCode,
+  FaLock,
+  FaPersonChalkboard,
+  FaRegCopy,
+  FaRotateRight,
+  FaUserClock,
+} from 'react-icons/fa6';
+import { GiTwoCoins } from 'react-icons/gi';
+import { GoArrowDownRight, GoArrowUpRight } from 'react-icons/go';
+import { GrUserAdmin } from 'react-icons/gr';
+import { HiLightningBolt, HiRefresh, HiX } from 'react-icons/hi';
+import {
+  IoIosAddCircleOutline,
+  IoIosArrowBack,
+  IoIosArrowForward,
+  IoIosAttach,
+  IoIosCheckmarkCircle,
+  IoIosList,
+  IoIosMail,
+  IoIosShareAlt,
+  IoMdLink,
+  IoMdSave,
+  IoMdSettings,
+  IoMdThumbsDown,
+  IoMdThumbsUp,
+} from 'react-icons/io';
+import {
+  IoAddCircleOutline,
+  IoAddOutline,
+  IoCall,
+  IoChatbubbleEllipses,
+  IoChevronDownOutline,
+  IoChevronForward,
+  IoClose,
+  IoCloseOutline,
+  IoCodeSlash,
+  IoDocumentTextSharp,
+  IoEyeOffOutline,
+  IoEyeOutline,
+  IoFilter,
+  IoHome,
+  IoSearch,
+  IoWarning,
+  IoWarningOutline,
+} from 'react-icons/io5';
+import { LiaNewspaper } from 'react-icons/lia';
+import { IconType as ReactIconType } from 'react-icons/lib';
+import {
+  LuBookOpenText,
+  LuDownload,
+  LuExternalLink,
+  LuGraduationCap,
+  LuInfo,
+  LuMenu,
+  LuReceipt,
+  LuSendHorizontal,
+  LuUpload,
+} from 'react-icons/lu';
+import {
+  MdAnnouncement,
+  MdCardMembership,
+  MdError,
+  MdFilterList,
+  MdLogout,
+  MdOutlineCalendarToday,
+  MdOutlinePersonPin,
+  MdOutlineSpaceDashboard,
+  MdPreview,
+  MdSpaceDashboard,
+  MdThumbsUpDown,
+} from 'react-icons/md';
+import { PiChatSlashBold, PiExam, PiGlobe, PiGlobeX } from 'react-icons/pi';
+import { RxDotsHorizontal } from 'react-icons/rx';
+import { SlSettings } from 'react-icons/sl';
+import {
+  TbAppWindowFilled,
+  TbInfinity,
+  TbLayoutNavbar,
+  TbLockCog,
+  TbMessageChatbotFilled,
+  TbSum,
+  TbWorldSearch,
+} from 'react-icons/tb';
+
+import AnalyticsIcon from './icons/analytics.svg';
+import BulbIcon from './icons/bulb.svg';
+import ChatIcon from './icons/chat.svg';
+import EditIcon from './icons/edit.svg';
+import FaceIcon from './icons/face.svg';
+import FilledAnalyticsIcon from './icons/filled-analytics.svg';
+import FilledBulbIcon from './icons/filled-bulb.svg';
+import FilledChatIcon from './icons/filled-chat.svg';
+import FilledEditIcon from './icons/filled-edit.svg';
+import FilledFaceIcon from './icons/filled-face.svg';
+import FilledLayoutIcon from './icons/filled-layout.svg';
+import LanguageIcon from './icons/language.svg';
+import LayoutIcon from './icons/layout.svg';
+import PendingIcon from './icons/pending.svg';
+import ReceiptIcon from './icons/receipt.svg';
+import SparklesIcon from './icons/sparkles.svg';
+import StoreIcon from './icons/store.svg';
+import StoreActiveIcon from './icons/store_active.svg';
+import StudioIcon from './icons/studio.svg';
+import StudioActiveIcon from './icons/studio_active.svg';
+import VerticalEllipsisIcon from './icons/vertical-ellipsis.svg';
+
+export const REACT_ICONS_MAP: { [key: string]: ReactIconType } = {
+  BiDetail,
+  BiExpandAlt,
+  BsTranslate,
+  CiFileOn,
+  FaArchive,
+  FaBeer,
+  FaChartPie,
+  FaCheck,
+  FaCode,
+  FaGraduationCap,
+  FaImage,
+  FaLock,
+  FaMoneyBillWave,
+  FaPersonChalkboard,
+  FaPrint,
+  FaRegQuestionCircle,
+  FaRegCopy,
+  FaRegTrashAlt,
+  FaRegUserCircle,
+  FaRegEye,
+  FaRegEyeSlash,
+  FaRotateRight,
+  FaPlay,
+  FaSortAlphaDown,
+  FaSortAlphaUp,
+  FaSortNumericDown,
+  FaSortNumericUp,
+  FaUniversity,
+  FaUserCheck,
+  FaUserClock,
+  FaUserPlus,
+  FaUsers,
+  GiTwoCoins,
+  GoArrowUpRight,
+  GoArrowDownRight,
+  IoIosArrowForward,
+  GrUserAdmin,
+  HiLightningBolt,
+  HiRefresh,
+  IoAddCircleOutline,
+  IoAddOutline,
+  IoCall,
+  IoChatbubbleEllipses,
+  IoChevronDownOutline,
+  IoChevronForward,
+  IoCodeSlash,
+  IoClose,
+  IoCloseOutline,
+  IoDocumentTextSharp,
+  IoIosList,
+  IoMdLink,
+  IoMdSave,
+  IoMdThumbsUp,
+  IoMdThumbsDown,
+  IoEyeOutline,
+  IoEyeOffOutline,
+  IoFilter,
+  IoHome,
+  IoIosArrowBack,
+  IoIosAttach,
+  IoIosCheckmarkCircle,
+  IoIosAddCircleOutline,
+  IoIosMail,
+  IoIosShareAlt,
+  IoMdSettings,
+  IoWarningOutline,
+  IoSearch,
+  IoWarning,
+  LuExternalLink,
+  LuDownload,
+  LiaNewspaper,
+  LuBookOpenText,
+  LuGraduationCap,
+  LuInfo,
+  LuMenu,
+  LuReceipt,
+  LuSendHorizontal,
+  LuUpload,
+  MdAnnouncement,
+  MdCardMembership,
+  MdError,
+  MdFilterList,
+  MdLogout,
+  MdOutlineCalendarToday,
+  MdOutlinePersonPin,
+  MdOutlineSpaceDashboard,
+  HiX,
+  MdPreview,
+  MdSpaceDashboard,
+  MdThumbsUpDown,
+  PiChatSlashBold,
+  PiExam,
+  PiGlobe,
+  PiGlobeX,
+  RxDotsHorizontal,
+  SlSettings,
+  TbAppWindowFilled,
+  TbInfinity,
+  TbLayoutNavbar,
+  TbLockCog,
+  TbMessageChatbotFilled,
+  TbSum,
+  TbWorldSearch,
+};
+
+/**
+ * Map of icon names to SVGs. Records named as {iconName}: {iconName}Icon.
+ *
+ * Sorted alphabetically.
+ */
+export const CUSTOM_ICON_MAP: {
+  [key: string]: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+} = {
+  Analytics: AnalyticsIcon,
+  Bulb: BulbIcon,
+  Chat: ChatIcon,
+  Edit: EditIcon,
+  Face: FaceIcon,
+  Language: LanguageIcon,
+  Layout: LayoutIcon,
+  FilledAnalytics: FilledAnalyticsIcon,
+  FilledBulb: FilledBulbIcon,
+  FilledChat: FilledChatIcon,
+  FilledEdit: FilledEditIcon,
+  FilledFace: FilledFaceIcon,
+  FilledLayout: FilledLayoutIcon,
+  Pending: PendingIcon,
+  Sparkles: SparklesIcon,
+  Studio: StudioIcon,
+  StudioActive: StudioActiveIcon,
+  Store: StoreIcon,
+  StoreActive: StoreActiveIcon,
+  Receipt: ReceiptIcon,
+  VerticalEllipsis: VerticalEllipsisIcon,
+} as const;
+
+export type IconType =
+  | keyof typeof CUSTOM_ICON_MAP
+  | keyof typeof REACT_ICONS_MAP;
+
+/**
+ * Convert map of SVGs to a const of strings only to minimize import size
+ */
+export const IconTypes: { [K in IconType]: IconType } = Object.keys({
+  ...CUSTOM_ICON_MAP,
+  ...REACT_ICONS_MAP,
+}).reduce(
+  (prevVal, currVal) => {
+    prevVal[currVal] = currVal;
+    return prevVal;
+  },
+  {} as { [K in IconType]: IconType }
+);

package/src/components/Icon/icons/analytics.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.667" d="M6 14v-2m4 2v-4m4 4V6M4 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2z"/></svg>

package/src/components/Icon/icons/bulb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M12.733 11.247a5.8 5.8 0 0 1-1.78 1.364v1.929a.643.643 0 0 1-.643.643H6.453a.643.643 0 0 1-.643-.643V12.61a5.786 5.786 0 0 1 4.955-10.454m-4.955 16.2h5.143"/><path d="M11.433 6.058c-.451-.078-.451-.726 0-.805a4.09 4.09 0 0 0 3.289-3.15l.027-.126c.098-.446.733-.449.835-.004l.033.146a4.1 4.1 0 0 0 3.298 3.13c.454.08.454.73 0 .81a4.1 4.1 0 0 0-3.297 3.131l-.033.145c-.102.445-.737.443-.835-.004l-.025-.124a4.09 4.09 0 0 0-3.292-3.149"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/components/Icon/icons/chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><g fill="currentColor" clip-path="url(#a)"><path d="M6.25 19.08c-.84 0-1.67-.2-2.42-.58l-1.8.33a.74.74 0 0 1-.67-.21.78.78 0 0 1-.21-.67l.34-1.8a5.4 5.4 0 0 1-.53-3.11 5.344 5.344 0 0 1 4.59-4.6c1.16-.15 2.35.08 3.36.67 1.01.58 1.81 1.5 2.26 2.58s.53 2.29.22 3.42c-.3 1.13-.98 2.14-1.9 2.85-.93.71-2.08 1.1-3.25 1.1zm-2.29-2.11c.13 0 .26.03.38.1 1.31.75 3.05.64 4.25-.28.67-.51 1.15-1.24 1.37-2.05s.16-1.68-.16-2.46-.9-1.43-1.62-1.85a3.85 3.85 0 0 0-2.42-.48c-.83.11-1.62.5-2.21 1.09s-.98 1.38-1.09 2.21.06 1.69.48 2.42c.09.16.12.34.09.51l-.18.99.99-.18s.09-.01.14-.01z"/><path d="M18.62 5.75a7.3 7.3 0 0 0-1.77-2.71 7.425 7.425 0 0 0-9.04-1.03c-.93.56-1.73 1.34-2.33 2.24-.59.88-.98 1.9-1.14 2.95.33-.1.67-.18 1.02-.22.19-.02.38-.03.57-.04.16-.66.44-1.3.81-1.87.48-.72 1.12-1.34 1.86-1.79a5.95 5.95 0 0 1 5.02-.54c.82.28 1.58.75 2.2 1.36.62.6 1.11 1.35 1.41 2.16s.42 1.7.35 2.56-.34 1.72-.77 2.46c-.09.16-.12.34-.09.51l.36 1.92-1.93-.36c-.18-.03-.36 0-.51.09-.49.28-1.02.47-1.57.6-.02.49-.08.98-.2 1.46-.01.05-.04.09-.05.14h.06c.8-.13 1.56-.39 2.27-.76l2.74.51c.24.04.49-.03.67-.21.17-.17.25-.42.21-.67l-.51-2.74c.46-.88.75-1.85.83-2.84.09-1.08-.06-2.19-.44-3.21z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/components/Icon/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.24 5.348H3.3A1.88 1.88 0 0 0 1.416 7.23v8.471a1.88 1.88 0 0 0 1.882 1.882h8.47a1.88 1.88 0 0 0 1.883-1.882v-.941"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.71 3.466 2.824 2.823m1.304-1.331a1.976 1.976 0 1 0-2.796-2.796l-7.92 7.892v2.824h2.824z"/></svg>

package/src/components/Icon/icons/face.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.25" d="M7.227 12.433C7.81 13.375 8.834 14 10 14s2.19-.625 2.773-1.567"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.25" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/><circle cx="7.5" cy="8.333" r=".833" fill="currentColor"/><circle cx="12.5" cy="8.333" r=".833" fill="currentColor"/></svg>

package/src/components/Icon/icons/filled-analytics.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M1.167 4A2.833 2.833 0 0 1 4 1.167h12A2.833 2.833 0 0 1 18.834 4v12A2.833 2.833 0 0 1 16 18.833H4A2.833 2.833 0 0 1 1.167 16zm13.667 2a.833.833 0 0 0-1.667 0v8a.833.833 0 1 0 1.667 0zm-4 4a.833.833 0 0 0-1.667 0v4a.833.833 0 1 0 1.667 0zm-4 2a.833.833 0 0 0-1.667 0v2a.833.833 0 1 0 1.667 0z" clip-rule="evenodd"/></svg>

package/src/components/Icon/icons/filled-bulb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 20"><g fill="currentColor" clip-path="url(#a)"><path d="M14.17 10.29c-.5 0-.93-.35-1.04-.84l-.03-.13c-.15-.66-.49-1.27-.98-1.74s-1.11-.79-1.79-.9c-.51-.09-.87-.51-.87-1.04s.36-.95.87-1.04a3.45 3.45 0 0 0 2.77-2.66l.03-.12c.11-.49.54-.84 1.04-.84.53-.02.94.34 1.05.83l.03.14c.15.67.5 1.27.99 1.74.5.47 1.12.78 1.79.9.52.09.87.52.87 1.04s-.36.95-.87 1.04c-.68.12-1.29.43-1.79.9s-.84 1.07-.99 1.74l-.04.15c-.11.49-.54.83-1.04.83M4.81 19.08c-.41 0-.74-.33-.74-.74s.33-.74.74-.74h5.14c.41 0 .74.33.74.74s-.33.74-.74.74z"/><path d="M5.45 15.91a1.403 1.403 0 0 1-1.39-1.39v-1.54c-1.3-.7-2.33-1.95-2.84-3.43a6.53 6.53 0 0 1 3.91-8.26A6.6 6.6 0 0 1 7.88.91c1.36.07 2.52.53 3.46 1.35l.07.06-.05.07c-.1.14-.15.22-.23.29-.29.28-.66.47-1.06.54a2.44 2.44 0 0 0-2.03 2.42c0 1.2.85 2.21 2.03 2.41a2.067 2.067 0 0 1 1.64 1.55l.03.15c.12.54.4 1.01.82 1.36l.07.06-.12.19c-.05.09-.1.17-.16.25-.02.04-.13.18-.16.21-.42.5-.92.92-1.5 1.24v1.47c0 .37-.14.71-.4.98-.26.26-.62.41-.98.41H5.45z"/></g><defs><clipPath id="a"><path fill="#fff" d="M.86.89H18.9v18.19H.86z"/></clipPath></defs></svg>

package/src/components/Icon/icons/filled-chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><g fill="currentColor" clip-path="url(#a)"><path d="M6.24 19.08c-.84 0-1.67-.2-2.41-.58l-1.8.33a.74.74 0 0 1-.67-.21.78.78 0 0 1-.21-.67l.34-1.8c-.48-.95-.67-2.05-.53-3.11a5.344 5.344 0 0 1 4.59-4.6c1.16-.15 2.35.08 3.36.67a5.351 5.351 0 0 1 2.49 6c-.3 1.13-.98 2.14-1.9 2.85-.93.71-2.08 1.1-3.25 1.1z"/><path d="M18.62 5.75a7.3 7.3 0 0 0-1.77-2.71 7.425 7.425 0 0 0-9.04-1.03c-.93.56-1.73 1.34-2.33 2.24A7.4 7.4 0 0 0 4.34 7.2c.33-.1.67-.18 1.02-.22.29-.04.59-.06.89-.06 1.2 0 2.38.32 3.42.91 1.3.75 2.32 1.92 2.9 3.3s.67 2.94.29 4.38c-.01.05-.04.09-.05.14h.06c.8-.13 1.56-.39 2.27-.76l2.74.51c.24.05.49-.03.67-.21.17-.17.25-.42.21-.67l-.51-2.74c.46-.88.75-1.85.83-2.84.09-1.08-.06-2.19-.44-3.21z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/components/Icon/icons/filled-edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 17"><g fill="currentColor" clip-path="url(#a)"><path d="m14.36 6.5-1.45 1.46-3.42 3.44a.75.75 0 0 1-.53.22H6.14c-.41 0-.75-.34-.75-.75V8.05c0-.2.08-.39.22-.53L9.05 4.1l1.46-1.45a.7.7 0 0 0-.25-.05H3.3c-.7 0-1.36.27-1.86.77-.49.49-.77 1.17-.77 1.86v8.47c0 .7.27 1.36.77 1.86s1.16.77 1.86.77h8.47c.7 0 1.36-.27 1.86-.77s.77-1.16.77-1.86V6.76c0-.09-.02-.17-.05-.25z"/><path d="M8.64 10.11H6.88V8.35l5.85-5.83 1.74 1.74zm7.67-7.7-.78.79-1.74-1.74.79-.79c.46-.46 1.27-.46 1.73 0 .23.23.36.54.36.87s-.13.64-.36.87"/></g><defs><clipPath id="a"><path fill="#fff" d="M.67.33h16v15.99h-16z"/></clipPath></defs></svg>

package/src/components/Icon/icons/filled-face.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M10 1.375a8.625 8.625 0 1 0 0 17.25 8.625 8.625 0 0 0 0-17.25M7.758 12.104a.625.625 0 0 0-1.063.658c.69 1.113 1.908 1.863 3.305 1.863s2.615-.75 3.305-1.863a.625.625 0 1 0-1.063-.658A2.64 2.64 0 0 1 10 13.375c-.935 0-1.765-.5-2.242-1.271m.575-3.77a.833.833 0 1 1-1.666 0 .833.833 0 0 1 1.666 0m4.167.833a.833.833 0 1 0 0-1.667.833.833 0 0 0 0 1.667" clip-rule="evenodd"/></svg>

package/src/components/Icon/icons/filled-layout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" d="M18.21 6.96V5.32c0-1.94-1.57-3.52-3.52-3.52H5.32C3.37 1.8 1.8 3.37 1.8 5.32v1.64zM8.36 18.2h6.33c1.94 0 3.52-1.57 3.52-3.52V8.35H8.36zM6.96 8.36H1.8v6.33c0 1.94 1.57 3.52 3.52 3.52h1.64z"/></svg>

package/src/components/Icon/icons/language.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-width="1.2" d="M10 17a7 7 0 1 0 0-14m0 14a7 7 0 1 1 0-14m0 14c-1.691 0-3.062-3.134-3.062-7S8.308 3 10 3m0 14c1.691 0 3.063-3.134 3.063-7S11.69 3 10 3M4.313 13.402c1.282-.734 3.413-1.214 5.824-1.214 2.517 0 4.728.523 5.988 1.312M4.313 6.598c1.282.734 3.413 1.215 5.824 1.215 2.517 0 4.728-.524 5.988-1.313"/></svg>

package/src/components/Icon/icons/layout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" d="M8.36 8.125a.703.703 0 1 0-1.407 0zM6.952 17.5a.703.703 0 0 0 1.406 0zM5.313 3.203h9.375V1.797H5.313zm11.484 2.11v9.375h1.406V5.313zm-2.11 11.484H5.313v1.406h9.375zm-11.484-2.11V5.313H1.797v9.375zm2.11 2.11a2.11 2.11 0 0 1-2.11-2.11H1.797a3.516 3.516 0 0 0 3.516 3.516zm11.484-2.11a2.11 2.11 0 0 1-2.11 2.11v1.406a3.516 3.516 0 0 0 3.516-3.515zm-2.11-11.484a2.11 2.11 0 0 1 2.11 2.11h1.406a3.516 3.516 0 0 0-3.515-3.516zM5.313 1.797a3.516 3.516 0 0 0-3.516 3.516h1.406a2.11 2.11 0 0 1 2.11-2.11zm1.64 6.328V17.5H8.36V8.125zm-3.984.234H17.03V6.953H2.97z"/></svg>

package/src/components/Icon/icons/pending.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="#aeb2bc" clip-path="url(#a)"><path d="M12.202 4.944a.744.744 0 1 0 0-1.487.744.744 0 0 0 0 1.487M18.207 7.08a.946.946 0 1 0-1.337-1.338.946.946 0 0 0 1.337 1.337M19.749 12.794a1.047 1.047 0 1 0 0-2.093 1.047 1.047 0 0 0 0 2.093M17.538 15.936a1.148 1.148 0 1 0 0 2.295 1.148 1.148 0 0 0 0-2.295m-5.336 2.11a1.249 1.249 0 1 0 0 2.497 1.249 1.249 0 0 0 0-2.498m-6.29-1.917a1.35 1.35 0 1 0 1.909 1.91 1.35 1.35 0 0 0-1.91-1.91m.194-4.382a1.451 1.451 0 1 0-2.902 0 1.451 1.451 0 0 0 2.902 0m1.857-6.433a1.227 1.227 0 1 0-1.097 2.194 1.227 1.227 0 0 0 1.097-2.194"/></g><defs><clipPath id="a"><path fill="#fff" d="M3 3h18v18H3z"/></clipPath></defs></svg>

package/src/components/Icon/icons/receipt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" fill="none" viewBox="0 0 14 16"><path stroke="#9499a5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M3.85 4.85h6.3m-6.3 3.6h6.3m-7.83-7.2h9.36c.646 0 1.17.604 1.17 1.35v12.15L10.9 13.4l-1.95 1.35L7 13.4l-1.95 1.35L3.1 13.4l-1.95 1.35V2.6c0-.746.524-1.35 1.17-1.35"/></svg>

package/src/components/Icon/icons/sparkles.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15 4.5a.75.75 0 0 0-.721.544l-.813 2.846a3.75 3.75 0 0 1-2.576 2.576l-2.846.813a.75.75 0 0 0 0 1.442l2.846.813a3.75 3.75 0 0 1 2.576 2.576l.813 2.846a.75.75 0 0 0 1.442 0l.813-2.846a3.75 3.75 0 0 1 2.576-2.576l2.846-.813a.75.75 0 0 0 0-1.442l-2.846-.813a3.75 3.75 0 0 1-2.576-2.576l-.813-2.846A.75.75 0 0 0 15 4.5m-9-3a.75.75 0 0 0-.728.568l-.258 1.036a2.63 2.63 0 0 1-1.91 1.91l-1.036.258a.75.75 0 0 0 0 1.456l1.036.258a2.63 2.63 0 0 1 1.91 1.91l.258 1.036a.75.75 0 0 0 1.456 0l.258-1.036a2.63 2.63 0 0 1 1.91-1.91l1.036-.258a.75.75 0 0 0 0-1.456l-1.036-.258a2.63 2.63 0 0 1-1.91-1.91l-.258-1.036A.75.75 0 0 0 6 1.5M7.5 15a.75.75 0 0 0-.712.513l-.394 1.183a1.5 1.5 0 0 1-.948.948l-1.183.395a.75.75 0 0 0 0 1.422l1.183.395a1.5 1.5 0 0 1 .948.948l.395 1.183a.75.75 0 0 0 1.422 0l.395-1.183a1.5 1.5 0 0 1 .948-.948l1.183-.395a.75.75 0 0 0 0-1.422l-1.183-.395a1.5 1.5 0 0 1-.948-.948l-.395-1.183A.75.75 0 0 0 7.5 15" clip-rule="evenodd"/></svg>

package/src/components/Icon/icons/store.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linejoin="round" stroke-width="1.4" d="M2.92 8.008C3.17 6.286 4.78 5 6.68 5h6.638c1.902 0 3.51 1.286 3.762 3.008l.885 6.067C18.27 16.153 16.5 18 14.204 18H5.796C3.5 18 1.73 16.153 2.034 14.075z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="M6.667 4.833V5a3.333 3.333 0 0 1 6.666 0v-.167M7.5 9.166V10a2.5 2.5 0 1 0 5 0v-.834"/></svg>

package/src/components/Icon/icons/store_active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1.67" d="M2.92 8.008C3.17 6.286 4.78 5 6.68 5h6.638c1.902 0 3.51 1.286 3.762 3.008l.885 6.067C18.27 16.153 16.5 18 14.204 18H5.796C3.5 18 1.73 16.153 2.034 14.075z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.67" d="M6.667 4.834V5a3.333 3.333 0 0 1 6.666 0v-.166"/><path fill="#ebf0fb" fill-rule="evenodd" d="M7.5 8.332c.461 0 .835.374.835.835V10a1.665 1.665 0 1 0 3.33 0v-.833a.835.835 0 0 1 1.67 0V10a3.335 3.335 0 1 1-6.67 0v-.833c0-.461.374-.835.835-.835" clip-rule="evenodd"/></svg>

package/src/components/Icon/icons/studio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" d="M14.483 6.896a1.38 1.38 0 1 0 0-2.758 1.38 1.38 0 0 0 0 2.758"/><path fill="currentColor" d="M14.483 9.655H5.517A4.14 4.14 0 0 1 1.38 5.517a4.14 4.14 0 0 1 4.138-4.138h8.966a4.14 4.14 0 0 1 4.138 4.138 4.14 4.14 0 0 1-4.138 4.138M5.517 2.758A2.76 2.76 0 0 0 2.76 5.517a2.76 2.76 0 0 0 2.758 2.758h8.966a2.76 2.76 0 0 0 2.758-2.758 2.76 2.76 0 0 0-2.758-2.759zM5.517 15.862a1.38 1.38 0 1 0 0-2.758 1.38 1.38 0 0 0 0 2.758"/><path fill="currentColor" d="M14.483 18.62H5.517a4.14 4.14 0 0 1-4.138-4.137 4.14 4.14 0 0 1 4.138-4.138h8.966a4.14 4.14 0 0 1 4.138 4.138 4.14 4.14 0 0 1-4.138 4.138m-8.966-6.896a2.76 2.76 0 0 0-2.758 2.759 2.76 2.76 0 0 0 2.758 2.758h8.966a2.76 2.76 0 0 0 2.758-2.758 2.76 2.76 0 0 0-2.758-2.759z"/></svg>

package/src/components/Icon/icons/studio_active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M5.517 9.62h8.966a4.14 4.14 0 0 0 4.138-4.137 4.14 4.14 0 0 0-4.138-4.138H5.517A4.14 4.14 0 0 0 1.38 5.483 4.14 4.14 0 0 0 5.517 9.62m10.345-4.103a1.38 1.38 0 1 1-2.758 0 1.38 1.38 0 0 1 2.758 0M5.517 18.62h8.966a4.14 4.14 0 0 0 4.138-4.137 4.14 4.14 0 0 0-4.138-4.138H5.517a4.14 4.14 0 0 0-4.138 4.138 4.14 4.14 0 0 0 4.138 4.138m1.38-4.137a1.38 1.38 0 1 1-2.759 0 1.38 1.38 0 0 1 2.759 0" clip-rule="evenodd"/></svg>

package/src/components/Icon/icons/vertical-ellipsis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="auto" fill="none" viewBox="0 0 49 49"><circle cx="24.5" cy="10.5" r="3.5" fill="currentColor"/><circle cx="24.5" cy="39.5" r="3.5" fill="currentColor"/><circle cx="24.5" cy="24.5" r="3.5" fill="currentColor"/></svg>

package/src/components/Icon/index.tsx

@@ -0,0 +1,3 @@
+export { Icon } from './Icon';
+export { type IconProps } from './Icon.types';
+export { type IconType, IconTypes } from './IconMap';

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { variantStyles as buttonVariantStyles } from '../Button/Button.styles';
+import { Icon } from '../Icon/Icon';
+import { IconButton } from './IconButton';
+import { IconButtonProps, IconButtonVariant } from './IconButton.types';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  args: {
+    icon: <Icon icon="FaUniversity" />,
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(buttonVariantStyles),
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<IconButtonProps> = (args: IconButtonProps) => (
+  <IconButton {...args} />
+);
+
+export const Basic: StoryFn<IconButtonProps> = Template.bind({});
+Basic.args = {
+  variant: 'primary',
+};
+
+export const Round: StoryFn<IconButtonProps> = Template.bind({});
+Round.args = {
+  isRound: true,
+};
+
+export const AllIconButtonVariants: StoryFn<IconButtonProps> = (args) => {
+  const variants = Object.keys(buttonVariantStyles);
+  return (
+    <div>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <p>{variant}</p>
+          <IconButton {...args} variant={variant as IconButtonVariant} />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/IconButton/IconButton.styles.ts

@@ -0,0 +1,52 @@
+import { IconButtonProps } from '@chakra-ui/react';
+
+import { IconButtonVariant } from './IconButton.types';
+
+// TODO: UX를 위해 hover, active 스타일 구분 필요
+export const variantStyles: Record<
+  Exclude<IconButtonVariant, undefined>,
+  Partial<IconButtonProps>
+> = {
+  primary: {
+    borderColor: 'primary.main',
+    bgColor: 'primary.main',
+    color: 'white',
+    _hover: {
+      borderColor: 'blue.800',
+      bgColor: 'blue.800',
+    },
+  },
+  secondary: {
+    borderColor: 'primary.light',
+    bgColor: 'primary.light',
+    color: 'primary.main',
+    _hover: {
+      borderColor: 'blue.200',
+      bgColor: 'blue.200',
+    },
+  },
+  tertiary: {
+    borderColor: 'gray.400',
+    bgColor: 'white',
+    color: 'gray.1200',
+    _hover: {
+      bgColor: 'gray.50',
+    },
+  },
+  danger: {
+    borderColor: 'danger.main',
+    bgColor: 'danger.main',
+    color: 'white',
+    _hover: {
+      bgColor: 'red.600',
+    },
+  },
+  link: {
+    borderColor: 'transparent',
+    bgColor: 'transparent',
+    borderRadius: 'none',
+    _hover: {
+      bgColor: 'transparent',
+    },
+  },
+};

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,36 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { IconButton as ChakraIconButton } from '@chakra-ui/react';
+
+import { variantStyles } from './IconButton.styles';
+import { IconButtonProps } from './IconButton.types';
+
+export const IconButton = forwardRef(
+  (
+    { variant = 'link', sx, ...rest }: IconButtonProps,
+    ref?: ForwardedRef<HTMLButtonElement>
+  ) => {
+    return (
+      <ChakraIconButton
+        border="1px solid"
+        borderRadius="full"
+        background="transparent"
+        {...variantStyles[variant]}
+        {...rest}
+        ref={ref}
+        sx={{
+          ...sx,
+          '& svg': {
+            pointerEvents: 'none',
+            ...(sx as any)?.['& svg'],
+          },
+          '& svg *': {
+            pointerEvents: 'none',
+            ...(sx as any)?.['& svg *'],
+          },
+        }}
+      />
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';

package/src/components/IconButton/IconButton.types.ts

@@ -0,0 +1,12 @@
+import { IconButtonProps as ChakraIconButtonProps } from '@chakra-ui/react';
+
+export type IconButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'danger'
+  | 'link';
+
+export type IconButtonProps = Omit<ChakraIconButtonProps, 'variant'> & {
+  variant?: IconButtonVariant;
+};

package/src/components/IconButton/index.tsx

@@ -0,0 +1 @@
+export { IconButton } from './IconButton';

package/src/components/InfoSprinkle/InfoSprinkle.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Subtitle, Text } from '../Typography';
+import { InfoSprinkle } from './InfoSprinkle';
+
+const meta: Meta<typeof InfoSprinkle> = {
+  title: 'Components/InfoSprinkle',
+  component: InfoSprinkle,
+};
+
+export default meta;
+type Story = StoryFn<typeof InfoSprinkle>;
+
+export const Basic: Story = () => {
+  return (
+    <Box p="128px">
+      <InfoSprinkle>
+        <Subtitle mb="8px">Let me tell you why this is important.</Subtitle>
+        <Text>This is the stuff. The reeeeally good stuff.</Text>
+      </InfoSprinkle>
+    </Box>
+  );
+};

package/src/components/InfoSprinkle/InfoSprinkle.tsx

@@ -0,0 +1,48 @@
+import {
+  Box,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverProps,
+  PopoverTrigger,
+  Portal,
+} from '@chakra-ui/react';
+
+import { Icon, IconTypes } from '@/components/Icon';
+
+import { IconButtonProps } from '../IconButton/IconButton.types';
+
+export const InfoSprinkle = ({
+  children,
+  icon,
+  ...rest
+}: {
+  children: React.ReactNode;
+  icon?: IconButtonProps['icon'];
+} & PopoverProps) => {
+  return (
+    <Popover trigger="hover" placement="top" isLazy {...rest}>
+      <PopoverTrigger>
+        <Box
+          display="inline-flex"
+          color="white" // for icon color inherit
+          bgColor="gray.800"
+          borderRadius="full"
+          opacity={0.75}
+          _hover={{
+            opacity: 1,
+          }}
+        >
+          {icon || <Icon icon={IconTypes.LuInfo} boxSize="sm" />}
+        </Box>
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent boxShadow="2xl" w="fit-content">
+          <PopoverArrow />
+          <PopoverBody>{children}</PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};

package/src/components/InfoSprinkle/index.ts

@@ -0,0 +1 @@
+export { InfoSprinkle } from './InfoSprinkle';

package/src/components/InlineCode/InlineCode.tsx

@@ -0,0 +1,18 @@
+import {
+  Code as ChakraCode,
+  CodeProps as ChakraCodeProps,
+} from '@chakra-ui/react';
+
+export const InlineCode = ({ children, ...rest }: ChakraCodeProps) => {
+  return (
+    <ChakraCode
+      bg="gray.50"
+      color="primary.dark"
+      borderRadius="sm"
+      fontSize="p"
+      {...rest}
+    >
+      {children}
+    </ChakraCode>
+  );
+};

package/src/components/InlineCode/index.ts

@@ -0,0 +1 @@
+export { InlineCode } from './InlineCode';