System Initiative

/* eslint-disable import/no-unresolved,import/extensions,import/order */ // browse available icons at https://icones.js.org/ (or https://iconify.design/icon-sets/) import Loader from "~icons/gg/spinner"; import Resize from "~icons/mdi/resize-bottom-right"; import SlashForward from "~icons/mdi/slash-forward"; import BookOpen from "~icons/heroicons/book-open-20-solid"; import Check from "~icons/heroicons/check-20-solid"; import CheckCircle from "~icons/heroicons/check-circle-20-solid"; import CheckSquare from "./custom-icons/check-square.svg?raw"; import CloudUpload from "~icons/mdi/cloud-upload"; import CloudDownload from "~icons/mdi/cloud-download"; import Cloud from "~icons/mdi/cloud"; import CursorArrayRays from "~icons/heroicons/cursor-arrow-rays"; import EmptySquare from "./custom-icons/empty-square.svg?raw"; import AlertCircle from "~icons/heroicons/exclamation-circle-20-solid"; import AlertSquare from "./custom-icons/exclamation-square.svg?raw"; import AlertTriangle from "~icons/heroicons/exclamation-triangle-20-solid"; import X from "~icons/heroicons/x-mark-20-solid"; import XCircle from "~icons/heroicons/x-circle-20-solid"; import XSquare from "./custom-icons/x-square.svg?raw"; import Minus from "~icons/heroicons/minus-20-solid"; import MinusCircle from "~icons/heroicons/minus-circle-20-solid"; import MinusSquare from "./custom-icons/minus-square.svg?raw"; import CarbonSubtractAlt from "~icons/carbon/subtract-alt"; import SlidersVertical from "./custom-icons/sliders-vertical.svg?raw"; import Plus from "~icons/heroicons/plus-20-solid"; import PlusCircle from "~icons/heroicons/plus-circle-20-solid"; import PlusSquare from "./custom-icons/plus-square.svg?raw"; import Tilde from "./custom-icons/tilde.svg?raw"; import TildeCircle from "./custom-icons/tilde-circle.svg?raw"; import TildeSquare from "./custom-icons/tilde-square.svg?raw"; import Socket from "./custom-icons/socket.svg?raw"; import OutputSocket from "./custom-icons/output-socket.svg?raw"; import InputSocket from "./custom-icons/input-socket.svg?raw"; import CarbonHelp from "~icons/carbon/help"; import Play from "~icons/ion/play-sharp"; import Arrow from "~icons/heroicons-solid/arrow-up"; import Chevron from "~icons/heroicons-solid/chevron-up"; import Star from "~icons/heroicons-solid/star"; import Sparkles from "~icons/heroicons/sparkles-solid"; import Gear from "~icons/heroicons-solid/cog-8-tooth"; import Save from "~icons/heroicons-solid/save"; import Download from "~icons/heroicons-solid/download"; import CarbonTrashCan from "~icons/carbon/trash-can"; import TrashRestore from "~icons/material-symbols/restore-from-trash"; import Eraser from "~icons/solar/eraser-bold"; import ThumbsUp from "~icons/heroicons-solid/thumb-up"; import ThumbsDown from "~icons/heroicons-solid/thumb-down"; import Beaker from "~icons/heroicons-solid/beaker"; import Link from "~icons/heroicons-solid/link"; import Moon from "~icons/heroicons-solid/moon"; import Sun from "~icons/heroicons-solid/sun"; import Eye from "~icons/heroicons-solid/eye"; import EyeOff from "~icons/heroicons-solid/eye-off"; import ClipboardCopy from "~icons/heroicons-solid/clipboard-copy"; import Refresh from "~icons/heroicons-solid/refresh"; import Pencil from "~icons/heroicons-outline/pencil"; import PencilOff from "~icons/material-symbols/edit-off-outline"; import Cube from "~icons/heroicons-outline/cube"; import StarOutline from "~icons/heroicons-outline/star"; import CubePlus from "./custom-icons/cube-plus.svg?raw"; import Clock from "~icons/heroicons-solid/clock"; import ExclamationCircle from "~icons/heroicons-solid/exclamation-circle"; import CreditCard from "~icons/heroicons-solid/credit-card"; import MaterialSymbolsNotifications from "~icons/material-symbols/notifications"; import CheckBadge from "~icons/heroicons-solid/badge-check"; import DotsHorizontal from "~icons/heroicons-solid/dots-horizontal"; import DotsVertical from "~icons/heroicons-solid/dots-vertical"; import Search from "~icons/heroicons-solid/search"; import Selector from "~icons/heroicons-solid/selector"; import Lock from "~icons/heroicons-solid/lock-closed"; import LockOpen from "~icons/heroicons-solid/lock-open"; import Diagram from "~icons/raphael/diagram"; import Bolt from "~icons/heroicons/bolt-20-solid"; import Logout from "~icons/material-symbols/logout"; import Cat from "~icons/fa6-solid/cat"; import Filter from "~icons/heroicons/funnel-20-solid"; import Menu from "~icons/heroicons-solid/menu-alt-1"; import CircleStack from "~icons/heroicons-solid/circle-stack"; import BulletListIndented from "~icons/fluent/text-bullet-list-tree-16-regular"; import BulletList from "~icons/material-symbols/list"; import UserCircle from "~icons/heroicons/user-circle-solid"; import Boxes from "~icons/bi/boxes"; import TreeParents from "~icons/fluent-mdl2/breadcrumb"; import Docs from "~icons/fluent/book-question-mark-20-filled"; import Password from "~icons/material-symbols-light/password"; import Key from "~icons/material-symbols/key"; import TiltedKey from "~icons/heroicons/key"; import Scissors from "~icons/clarity/scissors-solid"; import Frame from "~icons/iconamoon/frame-light"; import MaterialSymbolsKeyboardDoubleArrowLeftRounded from "~icons/material-symbols/keyboard-double-arrow-left-rounded"; import MaterialSymbolsStopCircleOutlineRounded from "~icons/material-symbols/stop-circle-outline-rounded"; import MaterialSymbolsArrowOutward from "~icons/material-symbols/arrow-outward"; import MaterialSymbolsLightTouchpadMouseRounded from "~icons/material-symbols-light/touchpad-mouse"; import IcBaselinePlusMinusAlt from "~icons/ic/baseline-plus-minus-alt"; import MaterialSymbolsKeyboardCommandKey from "~icons/material-symbols/keyboard-command-key"; import MaterialSymbolsKeyboardOptionKey from "~icons/material-symbols/keyboard-option-key"; import MaterialSymbolsSpaceBarRounded from "~icons/material-symbols/space-bar-rounded"; import MdiKeyboardEsc from "~icons/mdi/keyboard-esc"; import MaterialSymbolsBackspaceOutline from "~icons/material-symbols/backspace-outline"; import IconoirMouseScrollWheel from "~icons/iconoir/mouse-scroll-wheel"; import MdiCursorDefaultClickOutline from "~icons/mdi/cursor-default-click-outline"; import MaterialSymbolsShiftLockOutline from "~icons/material-symbols/shift-lock-outline"; import MaterialSymbolsAddLink from "~icons/material-symbols/add-link"; import MaterialSymbolsLink from "~icons/material-symbols/link"; import Map from "~icons/heroicons/map"; import MdiTriangle from "~icons/mdi/triangle"; import TdesignLinkUnlink from "~icons/tdesign/link-unlink"; import NestedArrowRight from "~icons/material-symbols/subdirectory-arrow-right"; import CollapseAll from "~icons/material-symbols/collapse-all"; import ExpandAll from "~icons/material-symbols/expand-all"; import EmptyIcon from "./custom-icons/empty-icon.svg?raw"; import GitBranch from "~icons/mdi/source-branch"; import GitBranchPlus from "~icons/mdi/source-branch-plus"; // octicons (from github) available as no suffix, -16, -24 import GitCommit from "~icons/octicon/git-commit-24"; import GitMerge from "~icons/octicon/git-merge-24"; import Tools from "~icons/octicon/tools"; import ExternalLink from "~icons/octicon/link-external"; import Globe from "~icons/octicon/globe-24"; import Check2 from "~icons/octicon/check-16"; import CircleSlash from "~icons/octicon/circle-slash"; // 3p logos import AwsLogo from "~icons/cib/amazon-aws"; import CoreOsLogo from "~icons/ri/coreos-fill"; import SiLogo from "../../brand-assets/si-logo-symbol-padded.svg?raw"; import DockerLogo from "~icons/mdi/docker"; import KubernetesLogo from "~icons/carbon/kubernetes"; import CarbonLightning from "~icons/carbon/lightning"; import DiscordLogo from "~icons/carbon/logo-discord"; import GitHubLogo from "~icons/carbon/logo-github"; import VimLogo from "~icons/raphael/vim"; import FastlyLogo from "~icons/simple-icons/fastly"; import HetznerLogo from "./custom-icons/hetzner.svg?raw"; import HetznerLogotype from "./custom-icons/hetzner-logotype.svg?raw"; import AzureLogo from "./custom-icons/azure-icon.svg?raw"; import DigitalOceanLogo from "~icons/mdi/digital-ocean"; import GoogleCloudLogo from "./custom-icons/logo-google-cloud.svg?raw"; // carbon import Create from "~icons/carbon/intent-request-create"; import CarbonEdit from "~icons/carbon/edit"; import Hourglass from "~icons/carbon/hourglass"; import CarbonCompare from "~icons/carbon/compare"; import CarbonMaximize from "~icons/carbon/maximize"; import Copy from "~icons/carbon/copy"; // TODO(Wendy) - for some reason this one specific icon fails to import? Not sure why. // import CarbonTransformCode from '~icons/carbon/transform-code'; import CarbonTransformCode from "~icons/carbon/code"; // using this one as a placeholder for now import SettingsEdit from "~icons/carbon/settings-edit"; import CarbonWarningAlt from "~icons/carbon/warning-alt"; import CarbonWarningAltFilled from "~icons/carbon/warning-alt-filled"; import Pin from "~icons/carbon/pin-filled"; import Renew from "~icons/carbon/renew"; import CarbonApps from "~icons/carbon/apps"; import CarbonFlowConnection from "~icons/carbon/flow-connection"; import CategoryNew from "~icons/carbon/category-new"; import CarbonCloseOutline from "~icons/carbon/close-outline"; import CarbonCheckmarkOutline from "~icons/carbon/checkmark-outline"; import CarbonChevronDown from "~icons/carbon/chevron-down"; import CarbonChevronRight from "~icons/carbon/chevron-right"; import CarbonRepeat from "~icons/carbon/repeat"; import CarbonUndo from "~icons/carbon/undo"; import CarbonInformation from "~icons/carbon/information"; import CarbonWarning from "~icons/carbon/warning"; import CarbonRestart from "~icons/carbon/restart"; // streamline import StreamlineBracesCircleSolid from "~icons/streamline/braces-circle-solid"; // Phosphor import BracketsAngle from "~icons/ph/brackets-angle"; import BracketsCurly from "~icons/ph/brackets-curly"; import BracketsSquare from "~icons/ph/brackets-square"; import PhArrowsOutCardinal from "~icons/ph/arrows-out-cardinal"; import PhCursorTextBold from "~icons/ph/cursor-text-bold"; import PhTestTubeFill from "~icons/ph/test-tube-fill"; import Plug from "~icons/ph/plugs-fill"; // MDI import MdiCheckboxBlankCircle from "~icons/mdi/checkbox-blank-circle"; import MdiCheckboxBlankCircleOutline from "~icons/mdi/checkbox-blank-circle-outline"; import MdiMouseLeftClickOutline from "~icons/mdi/mouse-left-click-outline"; import MdiMouseRightClickOutline from "~icons/mdi/mouse-right-click-outline"; // attribute widget types import InputTypeString from "~icons/carbon/string-text"; import InputTypeText from "~icons/carbon/text-long-paragraph"; import InputTypeNumber from "~icons/carbon/string-integer"; import InputTypeSelect from "~icons/octicon/single-select-24"; import Laptop from "~icons/material-symbols/laptop-mac-outline"; import Celebrate from "~icons/game-icons/party-popper"; import XHex from "./custom-icons/x-hex.svg?raw"; import XHexOutline from "./custom-icons/x-hex-outline.svg?raw"; import CheckHexOutline from "./custom-icons/check-hex-outline.svg?raw"; import CheckHex from "./custom-icons/check-hex.svg?raw"; import PlusHex from "./custom-icons/plus-hex.svg?raw"; import PlusHexOutline from "./custom-icons/plus-hex-outline.svg?raw"; import MinusHex from "./custom-icons/minus-hex.svg?raw"; import MinusHexOutline from "./custom-icons/minus-hex-outline.svg?raw"; import RefreshHexOutline from "./custom-icons/refresh-hex-outline.svg?raw"; import QuestionHexOutline from "./custom-icons/question-hex-outline.svg?raw"; import TildeHexOutline from "./custom-icons/tilde-hex-outline.svg?raw"; import CodeDeployed from "./custom-icons/code-deployed.svg?raw"; import CodePop from "./custom-icons/code-pop.svg?raw"; import CodePopRight from "./custom-icons/code-pop-right.svg?raw"; import LogsPop from "./custom-icons/logs-pop.svg?raw"; import CodePopSquare from "./custom-icons/code-pop-square.svg?raw"; import LogsPopSquare from "./custom-icons/logs-pop-square.svg?raw"; import Func from "./custom-icons/func.svg?raw"; import FrameUp from "./custom-icons/frameup.svg?raw"; import FrameDown from "./custom-icons/framedown.svg?raw"; import InputConnection from "./custom-icons/input-connection.svg?raw"; import OutputConnection from "./custom-icons/output-connection.svg?raw"; import Odin from "./custom-icons/odin.svg?raw"; import Niflheim from "./custom-icons/snowflake.svg?raw"; import Mjolnir from "./custom-icons/mjolnir.svg?raw"; import IncomingConnection from "./custom-icons/incoming-connection.svg?raw"; // restricting the type here (Record<string, FunctionalComponent>) kills our IconName type below /* eslint sort-keys: "error" */ export const ICONS = Object.freeze({ "add-connection": MaterialSymbolsAddLink, "alert-circle": AlertCircle, "alert-square": AlertSquare, "alert-triangle": AlertTriangle, "alert-triangle-filled": CarbonWarningAltFilled, "alert-triangle-outline": CarbonWarningAlt, "arrow-outward": MaterialSymbolsArrowOutward, "arrows-out": PhArrowsOutCardinal, backspace: MaterialSymbolsBackspaceOutline, beaker: Beaker, bell: MaterialSymbolsNotifications, bolt: Bolt, "bolt-outline": CarbonLightning, bookOpen: BookOpen, "brackets-angle": BracketsAngle, "brackets-curly": BracketsCurly, "brackets-square": BracketsSquare, "bullet-list": BulletList, "bullet-list-indented": BulletListIndented, cat: Cat, celebrate: Celebrate, check: Check, "check-badge": CheckBadge, "check-circle": CheckCircle, "check-circle-outline": CarbonCheckmarkOutline, "check-hex": CheckHex, "check-hex-outline": CheckHexOutline, "check-square": CheckSquare, check2: Check2, "checkmark-outline": CarbonCheckmarkOutline, "chevron-down": CarbonChevronDown, "chevron-right": CarbonChevronRight, "circle-empty": MdiCheckboxBlankCircleOutline, "circle-full": MdiCheckboxBlankCircle, "circle-slash": CircleSlash, "circle-stack": CircleStack, "circle-stop": MaterialSymbolsStopCircleOutlineRounded, click: MdiCursorDefaultClickOutline, "clipboard-copy": ClipboardCopy, clock: Clock, "close-outline": CarbonCloseOutline, cloud: Cloud, "cloud-download": CloudDownload, "cloud-upload": CloudUpload, "code-circle": StreamlineBracesCircleSolid, "code-deployed": CodeDeployed, "code-pop": CodePop, "code-pop-right": CodePopRight, "code-pop-square": CodePopSquare, "code-transform": CarbonTransformCode, "collapse-row": CollapseAll, command: MaterialSymbolsKeyboardCommandKey, component: Cube, "component-plus": CubePlus, connection: MaterialSymbolsLink, copy: Copy, create: Create, "credit-card": CreditCard, cursor: PhCursorTextBold, "cursor-array-rays": CursorArrayRays, diagram: Diagram, diff: CarbonCompare, docs: Docs, "dots-horizontal": DotsHorizontal, "dots-vertical": DotsVertical, "double-arrow-left": MaterialSymbolsKeyboardDoubleArrowLeftRounded, download: Download, edit: Pencil, edit2: CarbonEdit, "empty-square": EmptySquare, erase: Eraser, esc: MdiKeyboardEsc, "exclamation-circle": ExclamationCircle, "exclamation-circle-carbon": CarbonWarning, "expand-row": ExpandAll, "external-link": ExternalLink, eye: Eye, filter: Filter, frame: Frame, "frame-down": FrameDown, "frame-up": FrameUp, func: Func, "git-branch": GitBranch, "git-branch-plus": GitBranchPlus, "git-commit": GitCommit, "git-merge": GitMerge, globe: Globe, grid: CarbonApps, hide: EyeOff, hourglass: Hourglass, "incoming-connection": IncomingConnection, "info-circle": CarbonInformation, "input-connection": InputConnection, "input-socket": InputSocket, "input-type-number": InputTypeNumber, "input-type-select": InputTypeSelect, "input-type-string": InputTypeString, "input-type-text": InputTypeText, key: Key, "key-tilted": TiltedKey, laptop: Laptop, link: Link, loader: Loader, lock: Lock, "lock-open": LockOpen, logout: Logout, "logs-pop": LogsPop, "logs-pop-square": LogsPopSquare, map: CarbonFlowConnection, maximize: CarbonMaximize, menu: Menu, minimap: Map, minus: Minus, "minus-circle": MinusCircle, "minus-circle-outline": CarbonSubtractAlt, "minus-hex": MinusHex, "minus-hex-outline": MinusHexOutline, "minus-square": MinusSquare, mjolnir: Mjolnir, moon: Moon, "mouse-and-touchpad": MaterialSymbolsLightTouchpadMouseRounded, "mouse-left-click-outline": MdiMouseLeftClickOutline, "mouse-right-click-outline": MdiMouseRightClickOutline, "mouse-scroll": IconoirMouseScrollWheel, multiselect: Boxes, "nested-arrow-right": NestedArrowRight, niflheim: Niflheim, none: EmptyIcon, odin: Odin, option: MaterialSymbolsKeyboardOptionKey, "output-connection": OutputConnection, "output-socket": OutputSocket, password: Password, pin: Pin, play: Play, plug: Plug, plus: Plus, "plus-circle": PlusCircle, "plus-hex": PlusHex, "plus-hex-outline": PlusHexOutline, "plus-minus": IcBaselinePlusMinusAlt, "plus-square": PlusSquare, "question-circle": CarbonHelp, "question-hex-outline": QuestionHexOutline, "read-only": PencilOff, refresh: Refresh, "refresh-active": Refresh, "refresh-carbon-active": Renew, "refresh-hex-outline": RefreshHexOutline, repeat: CarbonRepeat, resize: Resize, restart: CarbonRestart, save: Save, scissors: Scissors, search: Search, selector: Selector, settings: Gear, "settings-edit": SettingsEdit, shift: MaterialSymbolsShiftLockOutline, show: Eye, slash: SlashForward, "sliders-vertical": SlidersVertical, socket: Socket, spacebar: MaterialSymbolsSpaceBarRounded, sparkles: Sparkles, star: Star, starOutline: StarOutline, sun: Sun, "template-new": CategoryNew, "test-tube": PhTestTubeFill, "thumbs-down": ThumbsDown, "thumbs-up": ThumbsUp, tilde: Tilde, "tilde-circle": TildeCircle, "tilde-hex-outline": TildeHexOutline, "tilde-square": TildeSquare, tools: Tools, trash: CarbonTrashCan, "trash-restore": TrashRestore, "tree-parents": TreeParents, triangle: MdiTriangle, undo: CarbonUndo, unlink: TdesignLinkUnlink, "user-circle": UserCircle, x: X, "x-circle": XCircle, "x-hex": XHex, "x-hex-outline": XHexOutline, "x-square": XSquare, }); /* eslint-disable sort-keys */ // these icons are intended to be used with a specific direction, ex: "arrow--down" // make sure the base icon is pointing up! export const SPINNABLE_ICONS = Object.freeze({ arrow: Arrow, // triangle: Triangle, chevron: Chevron, }); // 3rd party logos (used in categories / providers on component schemas) // probably will need to do something else at some point if we are loading these dynamically... // but for now we'll just keep them in here, but in a separate set export const LOGO_ICONS = Object.freeze({ "logo-aws": AwsLogo, "logo-azure": AzureLogo, "logo-google-cloud": GoogleCloudLogo, "logo-coreos": CoreOsLogo, "logo-digital-ocean": DigitalOceanLogo, "logo-docker": DockerLogo, "logo-k8s": KubernetesLogo, "logo-si": SiLogo, "logo-fastly": FastlyLogo, "logo-hetzner": HetznerLogo, // others - not used in providers currently "logo-discord": DiscordLogo, "logo-github": GitHubLogo, "logo-vim": VimLogo, // logotypes - not standard icon size "hetzner-logotype": HetznerLogotype, }); export type IconSizeNumbers = { viewBoxX: number; viewBoxY: number; }; const VIEWBOX24 = { viewBoxX: 24, viewBoxY: 24 }; const VIEWBOX32 = { viewBoxX: 32, viewBoxY: 32 }; export const LOGO_FORCED_SIZE_NUMBERS = { "logo-aws": VIEWBOX32, "logo-azure": VIEWBOX24, "logo-google-cloud": VIEWBOX24, "logo-coreos": VIEWBOX24, "logo-digital-ocean": VIEWBOX24, "logo-docker": VIEWBOX24, "logo-k8s": VIEWBOX32, "logo-si": { viewBoxX: 250, viewBoxY: 250, }, "logo-fastly": VIEWBOX24, "logo-hetzner": { viewBoxX: 30, viewBoxY: 30, }, "logo-discord": VIEWBOX32, "logo-github": VIEWBOX32, "logo-vim": VIEWBOX32, } as Record<IconNames, IconSizeNumbers>; export const COMPONENT_TYPE_ICONS = { component: "component" as IconNames, configurationFrameDown: "frame-down" as IconNames, configurationFrameUp: "frame-up" as IconNames, aggregationFrame: "frame" as IconNames, view: "create" as IconNames, }; /* additional aliases which makes it easy to be more consistent with icon usage while still allowing us to change icons for specific cases later */ const ICON_NAME_ALIASES = {}; type RegularIconNames = keyof typeof ICONS; type LogoIconNames = keyof typeof LOGO_ICONS; type IconNameAliases = keyof typeof ICON_NAME_ALIASES; type SpinnableRawIconNames = keyof typeof SPINNABLE_ICONS; type SpinnableIconNames = `${SpinnableRawIconNames}--${ | "left" | "right" | "up" | "down"}`; export type IconNames = | RegularIconNames | LogoIconNames | IconNameAliases | SpinnableIconNames; export function getIconByName(name: string): string | undefined { /* eslint-disable @typescript-eslint/no-explicit-any */ const nameWithoutModifiers = name.split("--")[0]; if (nameWithoutModifiers) { const icon = (SPINNABLE_ICONS as any)?.[nameWithoutModifiers] || (ICONS as any)?.[nameWithoutModifiers] || (LOGO_ICONS as any)?.[nameWithoutModifiers] || (ICONS as any)[(ICON_NAME_ALIASES as any)?.[nameWithoutModifiers]] || ICONS["question-circle"]; return icon; } }