Move Icon and LoadingIcon to shared package

packages/ui/src/components/Button.tsx

@@ -1,16 +1,6 @@
+import type { Color } from "@yaakapp-internal/plugins";
 import type { HTMLAttributes, ReactNode } from "react";
 
-type ButtonColor =
-  | "default"
-  | "custom"
-  | "primary"
-  | "secondary"
-  | "info"
-  | "success"
-  | "notice"
-  | "warning"
-  | "danger";
-
 type ButtonVariant = "border" | "solid";
 type ButtonSize = "2xs" | "xs" | "sm" | "md" | "auto";
 
@@ -19,8 +9,8 @@ export type ButtonProps = Omit<
   "color" | "onChange"
 > & {
   innerClassName?: string;
-  color?: ButtonColor;
-  tone?: Exclude<ButtonColor, "custom">;
+  color?: Color | "custom" | "default";
+  tone?: Color | "default";
   variant?: ButtonVariant;
   isLoading?: boolean;
   size?: ButtonSize;

packages/ui/src/components/Icon.tsx

@@ -0,0 +1,326 @@
+import type { Color } from '@yaakapp-internal/plugins';
+import classNames from 'classnames';
+import {
+  AlarmClockIcon,
+  AlertTriangleIcon,
+  ArchiveIcon,
+  ArrowBigDownDashIcon,
+  ArrowBigLeftDashIcon,
+  ArrowBigRightDashIcon,
+  ArrowBigRightIcon,
+  ArrowBigUpDashIcon,
+  ArrowDownIcon,
+  ArrowDownToDotIcon,
+  ArrowDownToLineIcon,
+  ArrowLeftIcon,
+  ArrowRightCircleIcon,
+  ArrowRightIcon,
+  ArrowUpDownIcon,
+  ArrowUpFromDotIcon,
+  ArrowUpFromLineIcon,
+  ArrowUpIcon,
+  BadgeCheckIcon,
+  BookOpenText,
+  BoxIcon,
+  CakeIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsDownUpIcon,
+  ChevronsUpDownIcon,
+  CircleAlertIcon,
+  CircleDashedIcon,
+  CircleDollarSignIcon,
+  CircleFadingArrowUpIcon,
+  CircleHelpIcon,
+  CircleOffIcon,
+  ClipboardPasteIcon,
+  ClockIcon,
+  CodeIcon,
+  Columns2Icon,
+  CommandIcon,
+  CookieIcon,
+  CopyCheck,
+  CopyIcon,
+  CornerRightDownIcon,
+  CornerRightUpIcon,
+  CreditCardIcon,
+  CrosshairIcon,
+  DotIcon,
+  DownloadIcon,
+  EllipsisIcon,
+  EllipsisVerticalIcon,
+  ExpandIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileTextIcon,
+  FilterIcon,
+  FlameIcon,
+  FlaskConicalIcon,
+  FolderCodeIcon,
+  FolderCogIcon,
+  FolderDownIcon,
+  FolderGitIcon,
+  FolderIcon,
+  FolderInputIcon,
+  FolderOpenIcon,
+  FolderOutputIcon,
+  FolderSymlinkIcon,
+  FolderSyncIcon,
+  FolderUpIcon,
+  GiftIcon,
+  GitBranchIcon,
+  GitBranchPlusIcon,
+  GitCommitIcon,
+  GitCommitVerticalIcon,
+  GitForkIcon,
+  GitPullRequestIcon,
+  GlobeIcon,
+  GripVerticalIcon,
+  HandIcon,
+  HardDriveDownloadIcon,
+  HistoryIcon,
+  HomeIcon,
+  ImportIcon,
+  InfoIcon,
+  KeyboardIcon,
+  KeyRoundIcon,
+  LockIcon,
+  LockOpenIcon,
+  MergeIcon,
+  MessageSquare,
+  MinusCircleIcon,
+  MinusIcon,
+  MoonIcon,
+  MoreVerticalIcon,
+  PaletteIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  PencilIcon,
+  PinIcon,
+  PinOffIcon,
+  Plug,
+  PlusCircleIcon,
+  PlusIcon,
+  PuzzleIcon,
+  RefreshCcwIcon,
+  RefreshCwIcon,
+  RocketIcon,
+  RotateCcwIcon,
+  Rows2Icon,
+  SaveIcon,
+  SearchIcon,
+  SendHorizontalIcon,
+  SettingsIcon,
+  ShieldAlertIcon,
+  ShieldCheckIcon,
+  ShieldIcon,
+  ShieldOffIcon,
+  SparklesIcon,
+  SquareCheckIcon,
+  SquareIcon,
+  SquareTerminalIcon,
+  SunIcon,
+  TableIcon,
+  Trash2Icon,
+  UploadIcon,
+  VariableIcon,
+  Wand2Icon,
+  WifiIcon,
+  WrenchIcon,
+  XIcon,
+} from 'lucide-react';
+import type { CSSProperties, HTMLAttributes } from 'react';
+import { memo } from 'react';
+
+const icons = {
+  alarm_clock: AlarmClockIcon,
+  alert_triangle: AlertTriangleIcon,
+  archive: ArchiveIcon,
+  arrow_big_down_dash: ArrowBigDownDashIcon,
+  arrow_big_left_dash: ArrowBigLeftDashIcon,
+  arrow_big_right: ArrowBigRightIcon,
+  arrow_big_right_dash: ArrowBigRightDashIcon,
+  arrow_big_up_dash: ArrowBigUpDashIcon,
+  arrow_down: ArrowDownIcon,
+  arrow_down_to_dot: ArrowDownToDotIcon,
+  arrow_down_to_line: ArrowDownToLineIcon,
+  arrow_left: ArrowLeftIcon,
+  arrow_right: ArrowRightIcon,
+  arrow_right_circle: ArrowRightCircleIcon,
+  arrow_up: ArrowUpIcon,
+  arrow_up_down: ArrowUpDownIcon,
+  arrow_up_from_dot: ArrowUpFromDotIcon,
+  arrow_up_from_line: ArrowUpFromLineIcon,
+  badge_check: BadgeCheckIcon,
+  book_open_text: BookOpenText,
+  box: BoxIcon,
+  cake: CakeIcon,
+  chat: MessageSquare,
+  check: CheckIcon,
+  check_circle: CheckCircleIcon,
+  check_square_checked: SquareCheckIcon,
+  check_square_unchecked: SquareIcon,
+  chevron_down: ChevronDownIcon,
+  chevron_left: ChevronLeftIcon,
+  chevrons_up_down: ChevronsUpDownIcon,
+  chevrons_down_up: ChevronsDownUpIcon,
+  chevron_right: ChevronRightIcon,
+  circle_alert: CircleAlertIcon,
+  circle_dashed: CircleDashedIcon,
+  circle_dollar_sign: CircleDollarSignIcon,
+  circle_fading_arrow_up: CircleFadingArrowUpIcon,
+  clock: ClockIcon,
+  code: CodeIcon,
+  columns_2: Columns2Icon,
+  command: CommandIcon,
+  cookie: CookieIcon,
+  copy: CopyIcon,
+  copy_check: CopyCheck,
+  corner_right_down: CornerRightDownIcon,
+  corner_right_up: CornerRightUpIcon,
+  credit_card: CreditCardIcon,
+  crosshair: CrosshairIcon,
+  dot: DotIcon,
+  download: DownloadIcon,
+  ellipsis: EllipsisIcon,
+  ellipsis_vertical: EllipsisVerticalIcon,
+  expand: ExpandIcon,
+  external_link: ExternalLinkIcon,
+  eye: EyeIcon,
+  eye_closed: EyeOffIcon,
+  file: FileIcon,
+  file_code: FileCodeIcon,
+  file_text: FileTextIcon,
+  filter: FilterIcon,
+  flame: FlameIcon,
+  flask: FlaskConicalIcon,
+  folder: FolderIcon,
+  folder_code: FolderCodeIcon,
+  folder_cog: FolderCogIcon,
+  folder_git: FolderGitIcon,
+  folder_input: FolderInputIcon,
+  folder_open: FolderOpenIcon,
+  folder_output: FolderOutputIcon,
+  folder_symlink: FolderSymlinkIcon,
+  folder_sync: FolderSyncIcon,
+  folder_down: FolderDownIcon,
+  folder_up: FolderUpIcon,
+  gift: GiftIcon,
+  git_branch: GitBranchIcon,
+  git_branch_plus: GitBranchPlusIcon,
+  git_commit: GitCommitIcon,
+  git_commit_vertical: GitCommitVerticalIcon,
+  git_fork: GitForkIcon,
+  git_pull_request: GitPullRequestIcon,
+  globe: GlobeIcon,
+  grip_vertical: GripVerticalIcon,
+  circle_off: CircleOffIcon,
+  hand: HandIcon,
+  hard_drive_download: HardDriveDownloadIcon,
+  help: CircleHelpIcon,
+  history: HistoryIcon,
+  house: HomeIcon,
+  import: ImportIcon,
+  info: InfoIcon,
+  key_round: KeyRoundIcon,
+  keyboard: KeyboardIcon,
+  left_panel_hidden: PanelLeftOpenIcon,
+  left_panel_visible: PanelLeftCloseIcon,
+  lock: LockIcon,
+  lock_open: LockOpenIcon,
+  magic_wand: Wand2Icon,
+  merge: MergeIcon,
+  minus: MinusIcon,
+  minus_circle: MinusCircleIcon,
+  moon: MoonIcon,
+  more_vertical: MoreVerticalIcon,
+  palette: PaletteIcon,
+  paste: ClipboardPasteIcon,
+  pencil: PencilIcon,
+  pin: PinIcon,
+  plug: Plug,
+  plus: PlusIcon,
+  plus_circle: PlusCircleIcon,
+  puzzle: PuzzleIcon,
+  refresh: RefreshCwIcon,
+  rocket: RocketIcon,
+  rotate_ccw: RotateCcwIcon,
+  rows_2: Rows2Icon,
+  save: SaveIcon,
+  search: SearchIcon,
+  send_horizontal: SendHorizontalIcon,
+  settings: SettingsIcon,
+  shield: ShieldIcon,
+  shield_check: ShieldCheckIcon,
+  shield_off: ShieldOffIcon,
+  sparkles: SparklesIcon,
+  square_terminal: SquareTerminalIcon,
+  sun: SunIcon,
+  table: TableIcon,
+  text: FileTextIcon,
+  trash: Trash2Icon,
+  unpin: PinOffIcon,
+  update: RefreshCcwIcon,
+  upload: UploadIcon,
+  variable: VariableIcon,
+  wifi: WifiIcon,
+  wrench: WrenchIcon,
+  x: XIcon,
+  _unknown: ShieldAlertIcon,
+
+  empty: (props: HTMLAttributes<HTMLSpanElement>) => <div {...props} />,
+};
+
+export interface IconProps {
+  icon: keyof typeof icons;
+  className?: string;
+  style?: CSSProperties;
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  spin?: boolean;
+  title?: string;
+  color?: Color | 'custom' | 'default';
+}
+
+export const Icon = memo(function Icon({
+  icon,
+  color = 'default',
+  spin,
+  size = 'md',
+  style,
+  className,
+  title,
+}: IconProps) {
+  const Component = icons[icon] ?? icons._unknown;
+  return (
+    <Component
+      style={style}
+      title={title}
+      className={classNames(
+        className,
+        !spin && 'transform-gpu',
+        spin && 'animate-spin',
+        'flex-shrink-0',
+        size === 'xl' && 'h-6 w-6',
+        size === 'lg' && 'h-5 w-5',
+        size === 'md' && 'h-4 w-4',
+        size === 'sm' && 'h-3.5 w-3.5',
+        size === 'xs' && 'h-3 w-3',
+        size === '2xs' && 'h-2.5 w-2.5',
+        color === 'default' && 'inherit',
+        color === 'danger' && 'text-danger',
+        color === 'warning' && 'text-warning',
+        color === 'notice' && 'text-notice',
+        color === 'info' && 'text-info',
+        color === 'success' && 'text-success',
+        color === 'primary' && 'text-primary',
+        color === 'secondary' && 'text-secondary',
+      )}
+    />
+  );
+});

packages/ui/src/components/LoadingIcon.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+
+interface Props {
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
+
+export function LoadingIcon({ size = 'md', className }: Props) {
+  const classes = classNames(
+    className,
+    'text-inherit flex-shrink-0',
+    size === 'xl' && 'h-6 w-6',
+    size === 'lg' && 'h-5 w-5',
+    size === 'md' && 'h-4 w-4',
+    size === 'sm' && 'h-3.5 w-3.5',
+    size === 'xs' && 'h-3 w-3',
+    size === '2xs' && 'h-2.5 w-2.5',
+    'animate-spin',
+  );
+
+  return (
+    <div
+      className={classNames(
+        classes,
+        'border-[currentColor] border-b-transparent rounded-full',
+        size === 'xl' && 'border-[0.2rem]',
+        size === 'lg' && 'border-[0.16rem]',
+        size === 'md' && 'border-[0.13rem]',
+        size === 'sm' && 'border-[0.1rem]',
+        size === 'xs' && 'border-[0.08rem]',
+        size === '2xs' && 'border-[0.06rem]',
+      )}
+    />
+  );
+}

packages/ui/src/index.ts

@@ -1,6 +1,9 @@
 export { Button } from "./components/Button";
 export type { ButtonProps } from "./components/Button";
 export { HeaderSize } from "./components/HeaderSize";
+export { Icon } from "./components/Icon";
+export type { IconProps } from "./components/Icon";
+export { LoadingIcon } from "./components/LoadingIcon";
 export { WindowControls } from "./components/WindowControls";
 export { useIsFullscreen } from "./hooks/useIsFullscreen";
 export { useDebouncedValue } from "./hooks/useDebouncedValue";