From 9feb609c472b831c26d17c54238f7c3c1926df43 Mon Sep 17 00:00:00 2001 From: alex leon Date: Fri, 15 May 2026 15:52:00 +0200 Subject: [PATCH 1/7] Switched petrinaut icons to DS icon component --- libs/@hashintel/ds-components/package.json | 2 +- .../src/components/Icon/icon.tsx | 68 ++++++++++++------- .../Icon/svgs/light/arrow-up-wide-short.svg | 1 - .../src/components/Icon/svgs/light/bell.svg | 1 - .../Icon/svgs/light/circle-nodes.svg | 1 - .../Icon/svgs/light/diagram-nested.svg | 1 - .../components/Icon/svgs/light/infinity.svg | 1 - .../svgs/light/magnifying-glass-minus.svg | 1 - .../Icon/svgs/light/magnifying-glass-plus.svg | 1 - .../components/Icon/svgs/light/sparkles.svg | 1 - .../components/Icon/svgs/light/terminal.svg | 1 - .../Icon/svgs/light/thought-bubble.svg | 1 - ...down-left-and-arrow-up-right-to-center.svg | 1 + .../svgs/regular/arrow-down-wide-short.svg | 1 + .../Icon/svgs/regular/arrow-right-to-line.svg | 1 + ...-right-and-arrow-down-left-from-center.svg | 1 + .../Icon/svgs/regular/arrow-up-wide-short.svg | 1 + .../src/components/Icon/svgs/regular/bell.svg | 1 + .../Icon/svgs/regular/chart-simple.svg | 1 + .../Icon/svgs/regular/circle-nodes.svg | 1 + .../components/Icon/svgs/regular/circle.svg | 1 + .../Icon/svgs/regular/circles-overlap-3.svg | 1 + .../Icon/svgs/regular/diagram-nested.svg | 1 + .../Icon/svgs/regular/forward-step.svg | 1 + .../components/Icon/svgs/regular/infinity.svg | 1 + .../Icon/svgs/regular/layer-group.svg | 1 - .../components/Icon/svgs/regular/layer.svg | 1 + .../Icon/svgs/regular/lock-keyhole.svg | 1 + .../svgs/regular/magnifying-glass-minus.svg | 1 + .../svgs/regular/magnifying-glass-plus.svg | 1 + .../Icon/svgs/regular/pen-to-square.svg | 1 + .../src/components/Icon/svgs/regular/play.svg | 1 + .../Icon/svgs/regular/right-to-line.svg | 1 - .../components/Icon/svgs/regular/sparkles.svg | 1 + .../components/Icon/svgs/regular/terminal.svg | 1 + .../Icon/svgs/regular/thought-bubble.svg | 1 + .../Icon/svgs/regular/unlock-keyhole.svg | 1 + ...down-left-and-arrow-up-right-to-center.svg | 1 - ...-right-and-arrow-down-left-from-center.svg | 1 - .../Icon/svgs/solid/circles-overlap-3.svg | 1 - .../src/components/Icon/svgs/solid/pause.svg | 1 + .../Icon/svgs/solid/pen-to-square.svg | 1 - .../src/components/Icon/svgs/solid/star.svg | 1 + libs/@hashintel/ds-components/tsup.config.ts | 3 + libs/@hashintel/petrinaut/package.json | 1 - .../petrinaut/src/ui/components/arc-item.tsx | 7 +- .../petrinaut/src/ui/components/dialog.tsx | 4 +- .../petrinaut/src/ui/components/drawer.tsx | 4 +- .../src/ui/components/panel-primitives.tsx | 4 +- .../petrinaut/src/ui/components/popover.tsx | 4 +- .../petrinaut/src/ui/components/section.tsx | 4 +- .../ui/components/segment-group.stories.tsx | 31 +++++---- .../petrinaut/src/ui/components/select.tsx | 14 ++-- .../vertical/vertical-sub-views-container.tsx | 10 +-- .../petrinaut/src/ui/components/tooltip.tsx | 8 +-- .../src/ui/constants/entity-icons.tsx | 42 +++++++++--- .../components/BottomBar/bottom-bar.tsx | 6 +- .../BottomBar/diagnostics-indicator.tsx | 6 +- .../BottomBar/playback-settings-menu.tsx | 37 ++++------ .../BottomBar/simulation-controls.tsx | 11 +-- .../components/BottomBar/toolbar-modes.tsx | 18 +++-- .../components/TopBar/mode-selector.tsx | 8 +-- .../Editor/components/TopBar/top-bar.tsx | 14 +--- .../TopBar/version-history-button.tsx | 6 +- .../views/Editor/panels/BottomPanel/panel.tsx | 4 +- .../BottomPanel/subviews/diagnostics.tsx | 9 ++- .../subviews/simulation-settings.tsx | 14 ++-- .../subviews/simulation-timeline.tsx | 8 +-- .../subviews/differential-equations-list.tsx | 6 +- .../LeftSideBar/subviews/entities-tree.tsx | 4 +- .../subviews/filterable-list-sub-view.tsx | 10 ++- .../LeftSideBar/subviews/parameters-list.tsx | 6 +- .../LeftSideBar/subviews/search-panel.tsx | 6 +- .../LeftSideBar/subviews/types-list.tsx | 6 +- .../PropertiesPanel/arc-properties/main.tsx | 9 +-- .../subviews/main.tsx | 6 +- .../PropertiesPanel/multi-selection-panel.tsx | 9 +-- .../place-properties/subviews/main.tsx | 9 ++- .../subviews/place-initial-state/subview.tsx | 7 +- .../subviews/place-visualizer/subview.tsx | 6 +- .../transition-properties/subviews/main.tsx | 4 +- .../transition-firing-time/subview.tsx | 6 +- .../subviews/transition-results/subview.tsx | 6 +- .../type-properties/subviews/main.tsx | 6 +- .../SimulateView/create-experiment-drawer.tsx | 4 +- .../panels/SimulateView/scenario-form.tsx | 6 +- .../panels/SimulateView/simulate-view.tsx | 16 ++--- .../SDCPN/components/classic-place-node.tsx | 4 +- .../components/classic-transition-node.tsx | 6 +- .../ui/views/SDCPN/components/place-node.tsx | 6 +- .../SDCPN/components/transition-node.tsx | 8 +-- .../SDCPN/components/viewport-controls.tsx | 18 ++--- yarn.lock | 32 ++++----- 93 files changed, 310 insertions(+), 284 deletions(-) delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/arrow-up-wide-short.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/bell.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/circle-nodes.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/diagram-nested.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/infinity.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-minus.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-plus.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/sparkles.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/terminal.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/light/thought-bubble.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-wide-short.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-right-to-line.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-wide-short.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/bell.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/chart-simple.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-nodes.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circles-overlap-3.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/diagram-nested.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/forward-step.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/infinity.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer-group.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/lock-keyhole.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-minus.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-plus.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/pen-to-square.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/play.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/right-to-line.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/sparkles.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/terminal.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/thought-bubble.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/unlock-keyhole.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circles-overlap-3.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pause.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pen-to-square.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/star.svg diff --git a/libs/@hashintel/ds-components/package.json b/libs/@hashintel/ds-components/package.json index 95f1bdf61fd..48115bd1df2 100644 --- a/libs/@hashintel/ds-components/package.json +++ b/libs/@hashintel/ds-components/package.json @@ -90,7 +90,6 @@ "@mantine/hooks": "8.3.5", "@playwright/test": "1.58.2", "@radix-ui/colors": "3.0.0", - "@svgr/rollup": "8.1.0", "@tanstack/react-virtual": "3.13.24", "@tsconfig/strictest": "^2.0.8", "@types/node": "22.18.13", @@ -101,6 +100,7 @@ "bumpp": "^10.3.2", "case-anything": "3.1.0", "colorjs.io": "0.6.1", + "esbuild-plugin-svgr": "3.1.1", "eslint": "9.39.4", "lorem-ipsum": "2.0.8", "lucide-react": "0.544.0", diff --git a/libs/@hashintel/ds-components/src/components/Icon/icon.tsx b/libs/@hashintel/ds-components/src/components/Icon/icon.tsx index 865fe57cf3b..47ea2977289 100644 --- a/libs/@hashintel/ds-components/src/components/Icon/icon.tsx +++ b/libs/@hashintel/ds-components/src/components/Icon/icon.tsx @@ -2,22 +2,24 @@ import { cx } from "@hashintel/ds-helpers/css"; import type { DataAttributes } from "../../util/dom"; import ArrowDown from "./svgs/regular/arrow-down.svg"; -import ArrowDownLeftAndArrowUpRightToCenter from "./svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg"; +import ArrowDownLeftAndArrowUpRightToCenter from "./svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg"; +import ArrowDownWideShort from "./svgs/regular/arrow-down-wide-short.svg"; import ArrowLeft from "./svgs/regular/arrow-left.svg"; import ArrowPointer from "./svgs/regular/arrow-pointer.svg"; import ArrowRight from "./svgs/regular/arrow-right.svg"; +import ArrowRightToLine from "./svgs/regular/arrow-right-to-line.svg"; import ArrowRotateLeft from "./svgs/regular/arrow-rotate-left.svg"; import ArrowUp from "./svgs/regular/arrow-up.svg"; import ArrowUpRight from "./svgs/regular/arrow-up-right.svg"; -import ArrowUpRightAndArrowDownLeftFromCenter from "./svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg"; +import ArrowUpRightAndArrowDownLeftFromCenter from "./svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg"; import ArrowUpRightFromSquare from "./svgs/regular/arrow-up-right-from-square.svg"; -import ArrowUpWideShort from "./svgs/light/arrow-up-wide-short.svg"; +import ArrowUpWideShort from "./svgs/regular/arrow-up-wide-short.svg"; import ArrowsRotate from "./svgs/regular/arrows-rotate.svg"; import Asterisk from "./svgs/regular/asterisk.svg"; import At from "./svgs/regular/at.svg"; import Barcode from "./svgs/regular/barcode.svg"; import Bars from "./svgs/regular/bars.svg"; -import Bell from "./svgs/light/bell.svg"; +import Bell from "./svgs/regular/bell.svg"; import Bolt from "./svgs/regular/bolt.svg"; import BracketsCurly from "./svgs/regular/brackets-curly.svg"; import BracketsSquare from "./svgs/regular/brackets-square.svg"; @@ -26,6 +28,7 @@ import Bullseye from "./svgs/light/bullseye.svg"; import Calendar from "./svgs/regular/calendar.svg"; import CalendarClock from "./svgs/regular/calendar-clock.svg"; import CaretDown from "./svgs/solid/caret-down.svg"; +import ChartSimple from "./svgs/regular/chart-simple.svg"; import ChartColumn from "./svgs/regular/chart-column.svg"; import ChartLine from "./svgs/regular/chart-line.svg"; import Check from "./svgs/regular/check.svg"; @@ -33,12 +36,13 @@ import ChevronDown from "./svgs/regular/chevron-down.svg"; import ChevronLeft from "./svgs/regular/chevron-left.svg"; import ChevronRight from "./svgs/regular/chevron-right.svg"; import ChevronUp from "./svgs/regular/chevron-up.svg"; -import Circle from "./svgs/solid/circle.svg"; +import Circle from "./svgs/regular/circle.svg"; +import CircleSolid from "./svgs/solid/circle.svg"; import CircleCheck from "./svgs/regular/circle-check.svg"; import CircleEllipsis from "./svgs/regular/circle-ellipsis.svg"; import CircleExclamation from "./svgs/solid/circle-exclamation.svg"; import CircleInfo from "./svgs/solid/circle-info.svg"; -import CircleNodes from "./svgs/light/circle-nodes.svg"; +import CircleNodes from "./svgs/regular/circle-nodes.svg"; import CircleOne from "./svgs/regular/circle-1.svg"; import CirclePlus from "./svgs/regular/circle-plus.svg"; import Clock from "./svgs/regular/clock.svg"; @@ -47,7 +51,7 @@ import Code from "./svgs/regular/code.svg"; import Copy from "./svgs/regular/copy.svg"; import Cube from "./svgs/regular/cube.svg"; import Cubes from "./svgs/regular/cubes.svg"; -import DiagramNested from "./svgs/light/diagram-nested.svg"; +import DiagramNested from "./svgs/regular/diagram-nested.svg"; import DiagramProject from "./svgs/regular/diagram-project.svg"; import DiagramSubtask from "./svgs/regular/diagram-subtask.svg"; import Download from "./svgs/regular/download.svg"; @@ -60,52 +64,57 @@ import Feather from "./svgs/regular/feather.svg"; import File from "./svgs/regular/file.svg"; import FileSpreadsheet from "./svgs/regular/file-spreadsheet.svg"; import Flask from "./svgs/regular/flask.svg"; -import ForwardStep from "./svgs/solid/forward-step.svg"; +import ForwardStep from "./svgs/regular/forward-step.svg"; +import ForwardStepSolid from "./svgs/solid/forward-step.svg"; import FunctionSymbol from "./svgs/regular/function.svg"; import Gear from "./svgs/regular/gear.svg"; import Hand from "./svgs/regular/hand.svg"; import Image from "./svgs/regular/image.svg"; -import InfinityLoop from "./svgs/light/infinity.svg"; +import InfinityLoop from "./svgs/regular/infinity.svg"; import InputPipe from "./svgs/regular/input-pipe.svg"; import Lambda from "./svgs/regular/lambda.svg"; -import LayerGroup from "./svgs/regular/layer-group.svg"; +import Layer from "./svgs/regular/layer.svg"; import LightbulbOn from "./svgs/regular/lightbulb-on.svg"; import List from "./svgs/regular/list.svg"; import ListTree from "./svgs/regular/list-tree.svg"; +import LockKeyhole from "./svgs/regular/lock-keyhole.svg"; import MagnifyingGlass from "./svgs/regular/magnifying-glass.svg"; -import MagnifyingGlassMinus from "./svgs/light/magnifying-glass-minus.svg"; -import MagnifyingGlassPlus from "./svgs/light/magnifying-glass-plus.svg"; +import MagnifyingGlassMinus from "./svgs/regular/magnifying-glass-minus.svg"; +import MagnifyingGlassPlus from "./svgs/regular/magnifying-glass-plus.svg"; import MemoCircleCheck from "./svgs/regular/memo-circle-check.svg"; import Microscope from "./svgs/regular/microscope.svg"; import Minus from "./svgs/solid/minus.svg"; import OneHundred from "./svgs/regular/100.svg"; import Pause from "./svgs/regular/pause.svg"; +import PauseSolid from "./svgs/solid/pause.svg"; import Pen from "./svgs/regular/pen.svg"; -import PenToSquare from "./svgs/solid/pen-to-square.svg"; +import PenToSquare from "./svgs/regular/pen-to-square.svg"; import PersonRunning from "./svgs/regular/person-running.svg"; -import Play from "./svgs/solid/play.svg"; +import Play from "./svgs/regular/play.svg"; +import PlaySolid from "./svgs/solid/play.svg"; import Plug from "./svgs/regular/plug.svg"; import Plus from "./svgs/regular/plus.svg"; -import RightToLine from "./svgs/regular/right-to-line.svg"; import Rotate from "./svgs/regular/rotate.svg"; import Ruler from "./svgs/regular/ruler.svg"; import Scribble from "./svgs/regular/scribble.svg"; import Shapes from "./svgs/regular/shapes.svg"; import Sidebar from "./svgs/regular/sidebar.svg"; import Sliders from "./svgs/regular/sliders.svg"; -import Sparkles from "./svgs/light/sparkles.svg"; +import Sparkles from "./svgs/regular/sparkles.svg"; import Square from "./svgs/regular/square.svg"; import SquareCheck from "./svgs/regular/square-check.svg"; import SquarePlus from "./svgs/regular/square-plus.svg"; import Star from "./svgs/regular/star.svg"; +import StarSolid from "./svgs/solid/star.svg"; import Stop from "./svgs/solid/stop.svg"; import Table from "./svgs/light/table.svg"; -import Terminal from "./svgs/light/terminal.svg"; +import Terminal from "./svgs/regular/terminal.svg"; import Text from "./svgs/regular/text.svg"; -import ThoughtBubble from "./svgs/light/thought-bubble.svg"; -import ThreeCircles from "./svgs/solid/circles-overlap-3.svg"; +import ThoughtBubble from "./svgs/regular/thought-bubble.svg"; +import ThreeCircles from "./svgs/regular/circles-overlap-3.svg"; import TrashCan from "./svgs/regular/trash-can.svg"; import TriangleExclamation from "./svgs/solid/triangle-exclamation.svg"; +import UnlockKeyhole from "./svgs/regular/unlock-keyhole.svg"; import UserPlus from "./svgs/regular/user-plus.svg"; import WandMagicSparkles from "./svgs/regular/wand-magic-sparkles.svg"; import Xmark from "./svgs/regular/xmark.svg"; @@ -131,7 +140,8 @@ const IconMap = { calendar: Calendar, calendarClock: CalendarClock, caretDown: CaretDown, - chartColumn: ChartColumn, + chartBar: ChartColumn, + chartBarSimple: ChartSimple, chartLine: ChartLine, check: Check, chevronDown: ChevronDown, @@ -139,9 +149,9 @@ const IconMap = { chevronRight: ChevronRight, chevronUp: ChevronUp, circle: Circle, + circleFilled: CircleSolid, circleCheck: CircleCheck, circleEllipsis: CircleEllipsis, - circleNodes: CircleNodes, circleOne: CircleOne, circlePlus: CirclePlus, clock: Clock, @@ -157,6 +167,7 @@ const IconMap = { diagramNested: DiagramNested, diagramProject: DiagramProject, diagramSubtask: DiagramSubtask, + diagramNodes: CircleNodes, download: Download, edit: PenToSquare, ellipsis: Ellipsis, @@ -179,23 +190,27 @@ const IconMap = { info: CircleInfo, inputPipe: InputPipe, lambda: Lambda, - layerGroup: LayerGroup, + layer: Layer, lightbulbOn: LightbulbOn, lightning: Bolt, list: List, listTree: ListTree, + lockOpen: UnlockKeyhole, + lockClosed: LockKeyhole, magic: WandMagicSparkles, memoCircleCheck: MemoCircleCheck, microscope: Microscope, oneHundred: OneHundred, pause: Pause, + pauseFilled: PauseSolid, pencil: Pen, personRunning: PersonRunning, play: Play, + playFilled: PlaySolid, plug: Plug, plus: Plus, refresh: ArrowsRotate, - rightToLine: RightToLine, + rightToLine: ArrowRightToLine, rotate: Rotate, rotateLeft: ArrowRotateLeft, ruler: Ruler, @@ -204,14 +219,19 @@ const IconMap = { shapes: Shapes, sidebar: Sidebar, skipForward: ForwardStep, + skipForwardFilled: ForwardStepSolid, sliders: Sliders, + sortDown: ArrowDownWideShort, sortUp: ArrowUpWideShort, sparkles: Sparkles, square: Square, + squareFilled: Stop, squareCheck: SquareCheck, squarePlus: SquarePlus, star: Star, - stop: Stop, + starFilled: StarSolid, + stop: Square, + stopFilled: Stop, table: Table, terminal: Terminal, text: Text, diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/arrow-up-wide-short.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/arrow-up-wide-short.svg deleted file mode 100644 index e48599d6820..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/arrow-up-wide-short.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/bell.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/bell.svg deleted file mode 100644 index a1ba389a291..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/bell.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/circle-nodes.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/circle-nodes.svg deleted file mode 100644 index 4b75ca2eb4b..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/circle-nodes.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/diagram-nested.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/diagram-nested.svg deleted file mode 100644 index 34fdda93cc6..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/diagram-nested.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/infinity.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/infinity.svg deleted file mode 100644 index 276c809690a..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/infinity.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-minus.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-minus.svg deleted file mode 100644 index 74b9f9c6770..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-minus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-plus.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-plus.svg deleted file mode 100644 index c0653aa469c..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-plus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/sparkles.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/sparkles.svg deleted file mode 100644 index 0d139780f22..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/sparkles.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/terminal.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/terminal.svg deleted file mode 100644 index a7f1b7656f3..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/terminal.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/thought-bubble.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/thought-bubble.svg deleted file mode 100644 index 629c9e8e20c..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/thought-bubble.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg new file mode 100644 index 00000000000..131d9a61909 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-wide-short.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-wide-short.svg new file mode 100644 index 00000000000..e01b92d46cb --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-wide-short.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-right-to-line.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-right-to-line.svg new file mode 100644 index 00000000000..676fcbc2623 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-right-to-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg new file mode 100644 index 00000000000..2a7d9117f0b --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-wide-short.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-wide-short.svg new file mode 100644 index 00000000000..5d83e26a784 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-wide-short.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/bell.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/bell.svg new file mode 100644 index 00000000000..e80851271c3 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/bell.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/chart-simple.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/chart-simple.svg new file mode 100644 index 00000000000..c0dd95c01ea --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/chart-simple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-nodes.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-nodes.svg new file mode 100644 index 00000000000..e768a7564af --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-nodes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle.svg new file mode 100644 index 00000000000..bf1b2758410 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circles-overlap-3.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circles-overlap-3.svg new file mode 100644 index 00000000000..8def05a8fce --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circles-overlap-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/diagram-nested.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/diagram-nested.svg new file mode 100644 index 00000000000..1fcd92c1b14 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/diagram-nested.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/forward-step.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/forward-step.svg new file mode 100644 index 00000000000..e206e6ac64d --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/forward-step.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/infinity.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/infinity.svg new file mode 100644 index 00000000000..c882de5ecd8 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/infinity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer-group.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer-group.svg deleted file mode 100644 index fc9baba1f09..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer-group.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer.svg new file mode 100644 index 00000000000..7bf0d2651af --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/lock-keyhole.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/lock-keyhole.svg new file mode 100644 index 00000000000..66893576156 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/lock-keyhole.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-minus.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-minus.svg new file mode 100644 index 00000000000..6f37b5582be --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-minus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-plus.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-plus.svg new file mode 100644 index 00000000000..f1643b95af4 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/pen-to-square.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/pen-to-square.svg new file mode 100644 index 00000000000..f3349f49c55 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/pen-to-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/play.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/play.svg new file mode 100644 index 00000000000..f78b73191a8 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/right-to-line.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/right-to-line.svg deleted file mode 100644 index 28d1cd8c1b2..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/right-to-line.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/sparkles.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/sparkles.svg new file mode 100644 index 00000000000..2f8e5a928c6 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/sparkles.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/terminal.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/terminal.svg new file mode 100644 index 00000000000..d29ffa365a0 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/terminal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/thought-bubble.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/thought-bubble.svg new file mode 100644 index 00000000000..1d358c04c52 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/thought-bubble.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/unlock-keyhole.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/unlock-keyhole.svg new file mode 100644 index 00000000000..23913477105 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/unlock-keyhole.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg deleted file mode 100644 index 4358171ba41..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg deleted file mode 100644 index f0ff1a1ea4d..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circles-overlap-3.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circles-overlap-3.svg deleted file mode 100644 index fbedc90245d..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circles-overlap-3.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pause.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pause.svg new file mode 100644 index 00000000000..526c2c7e099 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pen-to-square.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pen-to-square.svg deleted file mode 100644 index 105ceb1dce3..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pen-to-square.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/star.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/star.svg new file mode 100644 index 00000000000..1715e2672af --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/tsup.config.ts b/libs/@hashintel/ds-components/tsup.config.ts index 99290d06bc1..067773bd18a 100644 --- a/libs/@hashintel/ds-components/tsup.config.ts +++ b/libs/@hashintel/ds-components/tsup.config.ts @@ -1,6 +1,8 @@ import { globSync } from "node:fs"; import path from "node:path"; +import svgr from "esbuild-plugin-svgr"; + const componentEntries = Object.fromEntries( globSync("./src/components/*/*.tsx", { exclude: ["**/*.stories.tsx"] }).map( (file) => [`components/${path.basename(file, ".tsx")}`, file], @@ -16,6 +18,7 @@ export default { tokens: "./src/tokens.ts", ...componentEntries, }, + esbuildPlugins: [svgr()], format: ["esm"], outDir: "dist", platform: "neutral", diff --git a/libs/@hashintel/petrinaut/package.json b/libs/@hashintel/petrinaut/package.json index 58b12f408c0..d35a074ffb6 100644 --- a/libs/@hashintel/petrinaut/package.json +++ b/libs/@hashintel/petrinaut/package.json @@ -71,7 +71,6 @@ "immer": "10.1.3", "lodash-es": "4.18.1", "monaco-editor": "0.55.1", - "react-icons": "5.5.0", "react-resizable-panels": "4.6.5", "typescript": "5.9.3", "uplot": "1.6.32", diff --git a/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx b/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx index a91e21728bc..c9898a6df22 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx @@ -1,8 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import type { ReactNode } from "react"; import { useMemo } from "react"; -import { FaChevronDown } from "react-icons/fa6"; -import { TbTrash } from "react-icons/tb"; import { NumberInput } from "./number-input"; import { Select, type SelectOption } from "./select"; @@ -284,7 +283,7 @@ export const ArcItem = ({ style={{ backgroundColor: color ?? "#d4d4d4" }} /> {placeName} - + ); @@ -360,7 +359,7 @@ export const ArcItem = ({ onClick={onDelete} aria-label="Delete arc" > - + )} diff --git a/libs/@hashintel/petrinaut/src/ui/components/dialog.tsx b/libs/@hashintel/petrinaut/src/ui/components/dialog.tsx index 56ffe875d33..33969c0499d 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/dialog.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/dialog.tsx @@ -1,8 +1,8 @@ import { Dialog as ArkDialog } from "@ark-ui/react/dialog"; import { Portal } from "@ark-ui/react/portal"; +import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import type { ComponentProps, ReactNode } from "react"; -import { TbX } from "react-icons/tb"; import { usePortalContainerRef } from "../../react/state/portal-container-context"; import { @@ -86,7 +86,7 @@ const Card = ({ children }: { children: ReactNode }) => ( - + } > diff --git a/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx b/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx index 7dde0721c6f..5fd2aeb28ab 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx @@ -1,7 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import { type ReactNode, use, useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; -import { TbX } from "react-icons/tb"; import { PortalContainerContext } from "../../react/state/portal-container-context"; import { @@ -152,7 +152,7 @@ const Card = ({ aria-label="Close" onClick={onClose} > - + } > diff --git a/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx b/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx index 9e09329a868..9bfb9082f4f 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import type { ReactNode } from "react"; -import { TbX } from "react-icons/tb"; /** * Shared visual primitives used by Dialog and Drawer. @@ -74,7 +74,7 @@ export const Card = ({ {children} {closeButton ?? ( )} diff --git a/libs/@hashintel/petrinaut/src/ui/components/popover.tsx b/libs/@hashintel/petrinaut/src/ui/components/popover.tsx index 44b25004491..4e905390e34 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/popover.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/popover.tsx @@ -1,8 +1,8 @@ import { Popover as ArkPopover } from "@ark-ui/react/popover"; import { Portal } from "@ark-ui/react/portal"; +import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import type { ComponentProps, ReactNode } from "react"; -import { TbX } from "react-icons/tb"; import { usePortalContainerRef } from "../../react/state/portal-container-context"; import { IconButton } from "./icon-button"; @@ -119,7 +119,7 @@ const Header = ({ children }: { children: ReactNode }) => ( variant="ghost" className={closeButtonStyle} > - + diff --git a/libs/@hashintel/petrinaut/src/ui/components/section.tsx b/libs/@hashintel/petrinaut/src/ui/components/section.tsx index 3e80e76ee84..c38a3e7604f 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/section.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/section.tsx @@ -1,7 +1,7 @@ import { Collapsible } from "@ark-ui/react/collapsible"; +import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import { type ReactNode, use } from "react"; -import { FaChevronUp } from "react-icons/fa6"; import { UserSettingsContext } from "../../react/state/user-settings-context"; import { IconButton } from "./icon-button"; @@ -189,7 +189,7 @@ export const Section = ({ {renderHeaderAction &&
{renderHeaderAction()}
} - + diff --git a/libs/@hashintel/petrinaut/src/ui/components/segment-group.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/segment-group.stories.tsx index 221600241bf..19208bb1ecc 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/segment-group.stories.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/segment-group.stories.tsx @@ -1,9 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import type { Meta, StoryObj } from "@storybook/react-vite"; import type { ComponentProps } from "react"; import { useState } from "react"; -import { LuLayers2 } from "react-icons/lu"; -import { PiFlaskBold } from "react-icons/pi"; -import { TbCategory, TbCircleFilled, TbPlayerPlay } from "react-icons/tb"; import type { SegmentOption } from "./segment-group"; import { SegmentGroup } from "./segment-group"; @@ -46,9 +44,9 @@ export const Small: Story = { }; const iconOptions: SegmentOption[] = [ - { value: "edit", label: "Edit", icon: }, - { value: "simulate", label: "Simulate", icon: }, - { value: "actual", label: "Actual", icon: }, + { value: "edit", label: "Edit", icon: }, + { value: "simulate", label: "Simulate", icon: }, + { value: "actual", label: "Actual", icon: }, ]; export const WithIcons: Story = { @@ -56,17 +54,22 @@ export const WithIcons: Story = { }; const iconOnlyOptions: SegmentOption[] = [ - { value: "edit", label: "Edit", icon: , hideLabel: true }, + { + value: "edit", + label: "Edit", + icon: , + hideLabel: true, + }, { value: "simulate", label: "Simulate", - icon: , + icon: , hideLabel: true, }, { value: "actual", label: "Actual", - icon: , + icon: , hideLabel: true, }, ]; @@ -82,18 +85,18 @@ export const WithDisabledItems: Story = { }, + { value: "edit", label: "Edit", icon: }, { value: "simulate", label: "Simulate", - icon: , + icon: , disabled: true, tooltip: "Simulate mode is not yet available.", }, { value: "actual", label: "Actual", - icon: , + icon: , disabled: true, tooltip: "Actual mode is not yet available.", }, @@ -124,14 +127,14 @@ const verticalIconOptions: SegmentOption[] = [ { value: "experiments", label: "Experiments", - icon: , + icon: , hideLabel: true, tooltip: "Experiments", }, { value: "results", label: "Results", - icon: , + icon: , hideLabel: true, tooltip: "Results", }, diff --git a/libs/@hashintel/petrinaut/src/ui/components/select.tsx b/libs/@hashintel/petrinaut/src/ui/components/select.tsx index b301a757ac1..f847049fb2f 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/select.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/select.tsx @@ -3,10 +3,10 @@ import { createListCollection, Select as ArkSelect, } from "@ark-ui/react/select"; +import { Icon } from "@hashintel/ds-components"; import { css, cva, cx } from "@hashintel/ds-helpers/css"; import type { ReactNode } from "react"; import { useMemo } from "react"; -import { FaChevronDown } from "react-icons/fa6"; import { usePortalContainerRef } from "../../react/state/portal-container-context"; import { withTooltip } from "./hoc/with-tooltip"; @@ -24,11 +24,11 @@ const ConditionalPortal: React.FC<{ type SelectSize = "xs" | "sm" | "md" | "lg"; -const ICON_SIZE: Record = { - xs: 10, - sm: 12, - md: 14, - lg: 16, +const ICON_SIZE: Record = { + xs: "xs", + sm: "xs", + md: "sm", + lg: "sm", }; // -- Styles ------------------------------------------------------------------- @@ -289,7 +289,7 @@ const SelectBase: React.FC = ({ > {selectedOption?.label ?? placeholder} - + )} diff --git a/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx b/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx index 69128c2e2a3..5e6c33004a0 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva, cx } from "@hashintel/ds-helpers/css"; import React, { Fragment, use, useEffect, useRef, useState } from "react"; -import { FaChevronRight } from "react-icons/fa6"; import { Group, Panel, Separator } from "react-resizable-panels"; import { UserSettingsContext } from "../../../../react/state/user-settings-context"; @@ -358,7 +358,7 @@ const SubViewHeader: React.FC = ({ id, title, tooltip, - icon: Icon, + icon: HeaderIcon, main = false, renderTitle, isExpanded, @@ -373,9 +373,9 @@ const SubViewHeader: React.FC = ({ > {main ? (
- {Icon && ( + {HeaderIcon && ( - + )} {renderTitle ? ( @@ -406,7 +406,7 @@ const SubViewHeader: React.FC = ({ isExpanded && sectionToggleIconExpandedStyle, )} > - +
{title} diff --git a/libs/@hashintel/petrinaut/src/ui/components/tooltip.tsx b/libs/@hashintel/petrinaut/src/ui/components/tooltip.tsx index 424f9959311..fb9f8bf27b8 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/tooltip.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/tooltip.tsx @@ -1,10 +1,9 @@ import { ark } from "@ark-ui/react/factory"; import { Portal } from "@ark-ui/react/portal"; import { Tooltip as ArkTooltip } from "@ark-ui/react/tooltip"; +import { Icon } from "@hashintel/ds-components"; import { css, cva, cx } from "@hashintel/ds-helpers/css"; import type { ReactNode } from "react"; -import { FaInfoCircle } from "react-icons/fa"; -import { LuInfo } from "react-icons/lu"; import { usePortalContainerRef } from "../../react/state/portal-container-context"; @@ -121,16 +120,13 @@ const circleInfoIconStyle = css({ export const InfoIconTooltip = ({ tooltip, - outlined, }: { tooltip: string; outlined?: boolean; }) => { - const Icon = outlined ? LuInfo : FaInfoCircle; - return ( - + ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/constants/entity-icons.tsx b/libs/@hashintel/petrinaut/src/ui/constants/entity-icons.tsx index 504fbfa22ed..86dbfba091b 100644 --- a/libs/@hashintel/petrinaut/src/ui/constants/entity-icons.tsx +++ b/libs/@hashintel/petrinaut/src/ui/constants/entity-icons.tsx @@ -4,17 +4,39 @@ * Each entity has an outline icon (used in PropertiesPanel headers) * and optionally a filled icon (used in list item rows). */ -import { FaCircle, FaSquare } from "react-icons/fa6"; -import { LuCircle, LuSettings2, LuSquare } from "react-icons/lu"; -import { RiColorFilterFill, RiFormula } from "react-icons/ri"; +import { Icon, type IconName } from "@hashintel/ds-components"; + +type IconSize = "xxs" | "xs" | "sm" | "md" | "lg"; + +const sizeToIconSize = (size: number): IconSize => { + if (size <= 9) { + return "xxs"; + } + if (size <= 13) { + return "xs"; + } + if (size <= 19) { + return "sm"; + } + if (size <= 27) { + return "md"; + } + return "lg"; +}; + +const makeIcon = + (name: IconName) => + ({ size }: { size: number }) => ( + + ); /** Outline icons — used in PropertiesPanel headers */ -export const PlaceIcon = LuCircle; -export const TransitionIcon = LuSquare; -export const ParameterIcon = LuSettings2; -export const TokenTypeIcon = RiColorFilterFill; -export const DifferentialEquationIcon = RiFormula; +export const PlaceIcon = makeIcon("circle"); +export const TransitionIcon = makeIcon("square"); +export const ParameterIcon = makeIcon("sliders"); +export const TokenTypeIcon = makeIcon("threeCircles"); +export const DifferentialEquationIcon = makeIcon("function"); /** Filled icons — used in list item rows */ -export const PlaceFilledIcon = FaCircle; -export const TransitionFilledIcon = FaSquare; +export const PlaceFilledIcon = makeIcon("circle"); +export const TransitionFilledIcon = makeIcon("square"); diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx index eeda9b6536c..5ff21d6e49e 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx @@ -1,7 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva } from "@hashintel/ds-helpers/css"; import { refractive } from "@hashintel/refractive"; import { use, useCallback, useEffect } from "react"; -import { FaChevronDown, FaChevronUp } from "react-icons/fa6"; import { LanguageClientContext } from "../../../../../react/lsp/context"; import { @@ -154,9 +154,9 @@ export const BottomBar: React.FC = ({ ariaExpanded={isBottomPanelOpen} > {isBottomPanelOpen ? ( - + ) : ( - + )} = ({ > {hasErrors ? ( <> - + {totalDiagnosticsCount} ) : ( - + )} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/playback-settings-menu.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/playback-settings-menu.tsx index f9444f6a66f..7b6728e8395 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/playback-settings-menu.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/playback-settings-menu.tsx @@ -1,13 +1,6 @@ -import { css, cva } from "@hashintel/ds-helpers/css"; +import { Icon } from "@hashintel/ds-components"; +import { css, cva, cx } from "@hashintel/ds-helpers/css"; import { use } from "react"; -import { MdCheck, MdOutlinePlayArrow } from "react-icons/md"; -import { - TbArrowBarToRight, - TbChartLine, - TbClock, - TbInfinity, - TbSettings, -} from "react-icons/tb"; import { NumberInput } from "../../../../components/number-input"; import { Popover } from "../../../../components/popover"; @@ -185,7 +178,7 @@ export const PlaybackSettingsMenu = () => { tooltip="Playback settings" ariaLabel="Playback settings" > - + @@ -211,12 +204,12 @@ export const PlaybackSettingsMenu = () => { : undefined } > - + Play computed steps only {playMode === "viewOnly" && ( - + )}
@@ -307,10 +300,10 @@ export const PlaybackSettingsMenu = () => { : undefined } > - + Run indefinitely {stoppingCondition === "indefinitely" && ( - + )} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/simulation-controls.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/simulation-controls.tsx index 3e8d462bfba..33282bb915e 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/simulation-controls.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/simulation-controls.tsx @@ -1,7 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; -import { IoMdPause, IoMdPlay } from "react-icons/io"; -import { MdRotateLeft } from "react-icons/md"; import { PlaybackContext } from "../../../../../react/playback/context"; import { SimulationContext } from "../../../../../react/simulation/context"; @@ -171,7 +170,7 @@ export const SimulationControls: React.FC = ({ disabled={isDisabled} ariaLabel="Reset simulation" > - + @@ -184,7 +183,11 @@ export const SimulationControls: React.FC = ({ disabled={isPlayDisabled} ariaLabel={getPlayPauseAriaLabel()} > - {isPlaybackPlaying ? : } + {isPlaybackPlaying ? ( + + ) : ( + + )} {/* Frame controls - only visible when simulation exists */} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx index e7c8acaacde..5ede5180fc3 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx @@ -1,7 +1,5 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva } from "@hashintel/ds-helpers/css"; -import { FaChevronDown, FaRegHand } from "react-icons/fa6"; -import { LuMousePointerClick } from "react-icons/lu"; -import { TbCirclePlus2, TbSquarePlus2 } from "react-icons/tb"; import { Menu, type MenuItem } from "../../../../components/menu"; import type { @@ -74,7 +72,7 @@ const CursorModeDropdown: React.FC<{ const items: MenuItem[] = [ { id: "select", - icon: , + icon: , label: "Select", suffix: "V", selected: cursorMode === "select", @@ -82,7 +80,7 @@ const CursorModeDropdown: React.FC<{ }, { id: "pan", - icon: , + icon: , label: "Pan", suffix: "H", selected: cursorMode === "pan", @@ -99,11 +97,11 @@ const CursorModeDropdown: React.FC<{ aria-label="Cursor mode" > {cursorMode === "pan" ? ( - + ) : ( - + )} - + } items={items} @@ -151,7 +149,7 @@ export const ToolbarModes: React.FC = ({ event.dataTransfer.setData("application/reactflow", "place"); }} > - + = ({ event.dataTransfer.setData("application/reactflow", "transition"); }} > - + )} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx index df37bce271e..e7cbd3ce8f8 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx @@ -1,4 +1,4 @@ -import { TbCategory, TbCircleFilled, TbPlayerPlay } from "react-icons/tb"; +import { Icon } from "@hashintel/ds-components"; import type { SegmentOption } from "../../../../components/segment-group"; import { SegmentGroup } from "../../../../components/segment-group"; @@ -12,17 +12,17 @@ const options: SegmentOption[] = [ { label: "Edit", value: "edit", - icon: , + icon: , }, { label: "Simulate", value: "simulate", - icon: , + icon: , }, { label: "Actual", value: "actual", - icon: , + icon: , disabled: true, tooltip: "Actual mode is not yet available.", }, diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx index d69befbce96..945974492ff 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx @@ -1,10 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; -import { FaBars } from "react-icons/fa6"; -import { - TbLayoutSidebarLeftCollapse, - TbLayoutSidebarRightCollapse, -} from "react-icons/tb"; import { IconButton } from "../../../../components/icon-button"; import { Menu, type MenuItem } from "../../../../components/menu"; @@ -84,17 +80,13 @@ export const TopBar: React.FC = ({ }} aria-label={isLeftSidebarOpen ? "Collapse sidebar" : "Expand sidebar"} > - {isLeftSidebarOpen ? ( - - ) : ( - - )} + - + } items={menuItems} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/version-history-button.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/version-history-button.tsx index 639c721c999..7085b82822e 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/version-history-button.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/version-history-button.tsx @@ -1,5 +1,5 @@ +import { Icon } from "@hashintel/ds-components"; import { use, useMemo } from "react"; -import { LuCheck, LuHistory } from "react-icons/lu"; import { IconButton } from "../../../../components/icon-button"; import { Menu, type MenuItem } from "../../../../components/menu"; @@ -29,7 +29,7 @@ export const VersionHistoryButton = () => { return { id: `version-${String(realIndex)}`, label: formatTime(entry.timestamp), - suffix: isCurrent && , + suffix: isCurrent && , selected: isCurrent, onClick: () => goToIndex(realIndex), }; @@ -44,7 +44,7 @@ export const VersionHistoryButton = () => { - + } items={menuItems} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx index 719a46b8764..bc5010e6438 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva, cx } from "@hashintel/ds-helpers/css"; import { use, useEffect, useRef } from "react"; -import { FaXmark } from "react-icons/fa6"; import { GlassPanel } from "../../../../components/glass-panel"; import { IconButton } from "../../../../components/icon-button"; @@ -185,7 +185,7 @@ export const BottomPanel: React.FC = () => { onClick={toggleBottomPanel} aria-label="Close panel" > - +
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx index a455cf667d7..7bd992d22cb 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx @@ -1,7 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useCallback, useMemo, useState } from "react"; -import { FaChevronDown, FaChevronRight } from "react-icons/fa6"; -import { TbArrowRight } from "react-icons/tb"; import type { Diagnostic } from "vscode-languageserver-types"; import type { SubView } from "../../../../../components/sub-view/types"; @@ -273,7 +272,7 @@ const DiagnosticsContent: React.FC = () => { className={editButtonStyle} > Edit Item - + )} @@ -296,9 +295,9 @@ const DiagnosticsContent: React.FC = () => { className={entityButtonStyle} > {isExpanded ? ( - + ) : ( - + )} {entityLabel} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx index 2836c0b0033..1fce1b679e1 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useState } from "react"; -import { TbList, TbMinus, TbPencil, TbPlus } from "react-icons/tb"; import { IconButton } from "../../../../../components/icon-button"; import { NumberInput } from "../../../../../components/number-input"; @@ -238,7 +238,11 @@ const SimulationSettingsContent: React.FC = () => { renderItem={(option) => ( {option.value === NO_SCENARIO && ( - + )} {option.label} @@ -253,7 +257,7 @@ const SimulationSettingsContent: React.FC = () => { tooltip="Edit Scenario" onClick={() => setIsViewScenarioOpen(true)} > - + )} { tooltip="Create Scenario" onClick={() => setIsCreateScenarioOpen(true)} > - + { tooltip="Manage Scenarios" onClick={() => setGlobalMode("simulate")} > - + diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx index 54da3d730c2..ecfd8820e76 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useEffect, useMemo, useRef, useState } from "react"; -import { TbList, TbPencil, TbPlus } from "react-icons/tb"; import uPlot from "uplot"; import "uplot/dist/uPlot.min.css"; @@ -242,7 +242,7 @@ const TimelineViewPicker: React.FC = () => { tooltip="Edit Metric" onClick={() => setIsViewOpen(true)} > - + )} { tooltip="Create Metric" onClick={() => setIsCreateOpen(true)} > - + { setGlobalMode("simulate"); }} > - + { selectItem({ type: "differentialEquation", id }); }} > - + ); }; @@ -61,7 +61,7 @@ const DiffEqRowMenu: React.FC<{ item: { id: string } }> = ({ item }) => { { id: "delete", label: "Delete", - icon: , + icon: , destructive: true, disabled: isReadOnly, onClick: () => removeDifferentialEquation(item.id), diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx index f439d73e342..35eafdd3fec 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx @@ -1,7 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import type { ComponentType } from "react"; import { use } from "react"; -import { TbTrash } from "react-icons/tb"; import type { SubView } from "../../../../../components/sub-view/types"; import { @@ -82,7 +82,7 @@ const EntityRowMenu: React.FC<{ item: EntityTreeItem }> = ({ item }) => { { id: "delete", label: "Delete", - icon: , + icon: , destructive: true, disabled: isReadOnly, onClick: deleteAction, diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx index ccde5e0dd9d..5dec90bd2f7 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx @@ -1,8 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva } from "@hashintel/ds-helpers/css"; import type { ComponentType, ReactNode } from "react"; import { Fragment, use, useEffect, useRef, useState } from "react"; -import { LuChevronRight, LuSearch } from "react-icons/lu"; -import { TbDots } from "react-icons/tb"; import { IconButton } from "../../../../../components/icon-button"; import type { MenuItem } from "../../../../../components/menu"; @@ -158,7 +157,6 @@ const chevronStyle = cva({ }, }); -const CHEVRON_SIZE = 10; const NESTING_INDENT = 16; const emptyMessageStyle = css({ @@ -208,7 +206,7 @@ const FilterHeaderAction: React.FC<{ size="xs" onClick={() => setSearchOpen(true)} > - + {renderExtraAction?.()} @@ -234,7 +232,7 @@ export const RowMenu: React.FC<{ items: MenuItem[] }> = ({ items }) => { data-row-action onClick={(event) => event.stopPropagation()} > - + } items={items} @@ -567,7 +565,7 @@ const FilterableListContent = ({
{isItemGroup && ( - + )} {item.icon && ( diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx index fa5284404c1..a81f13c4320 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; -import { TbPlus, TbTrash } from "react-icons/tb"; import { v4 as uuidv4 } from "uuid"; import { IconButton } from "../../../../../components/icon-button"; @@ -57,7 +57,7 @@ export const ParametersHeaderAction: React.FC = () => { tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : undefined} onClick={handleAddParameter} > - + ); }; @@ -77,7 +77,7 @@ const ParameterRowMenu: React.FC<{ item: { id: string } }> = ({ item }) => { { id: "delete", label: "Delete", - icon: , + icon: , destructive: true, disabled: isReadOnly, onClick: () => removeParameter(item.id), diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx index 211690d5001..3e5e0ae8446 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx @@ -1,8 +1,10 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva } from "@hashintel/ds-helpers/css"; import fuzzysort from "fuzzysort"; import type { ComponentType, ReactNode } from "react"; import { use, useEffect, useRef, useState } from "react"; -import { LuSearch } from "react-icons/lu"; + +const SearchIcon = () => ; import { IconButton } from "../../../../../components/icon-button"; import type { SubView } from "../../../../../components/sub-view/types"; @@ -434,7 +436,7 @@ const SearchHeaderAction: React.FC = () => { export const searchSubView: SubView = { id: "search", title: "Search", - icon: LuSearch, + icon: SearchIcon, component: SearchContent, renderTitle: () => , renderHeaderAction: () => , diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx index 1c81f6b7442..f00119a23a8 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx @@ -1,5 +1,5 @@ +import { Icon } from "@hashintel/ds-components"; import { use } from "react"; -import { TbPlus, TbTrash } from "react-icons/tb"; import { IconButton } from "../../../../../components/icon-button"; import type { SubView } from "../../../../../components/sub-view/types"; @@ -100,7 +100,7 @@ export const TypesSectionHeaderAction: React.FC = () => { selectItem({ type: "type", id }); }} > - + ); }; @@ -115,7 +115,7 @@ const TypeRowMenu: React.FC<{ item: { id: string } }> = ({ item }) => { { id: "delete", label: "Delete", - icon: , + icon: , destructive: true, disabled: isReadOnly, onClick: () => removeType(item.id), diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx index c7579973681..379b0957aaa 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx @@ -1,7 +1,8 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { createContext, use } from "react"; -import { PiScribbleLoopBold } from "react-icons/pi"; -import { TbTrash } from "react-icons/tb"; + +const ArcIcon = () => ; import { IconButton } from "../../../../../components/icon-button"; import { NumberInput } from "../../../../../components/number-input"; @@ -149,7 +150,7 @@ const DeleteArcAction: React.FC = () => { disabled={isReadOnly} tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"} > - + ); }; @@ -157,7 +158,7 @@ const DeleteArcAction: React.FC = () => { const arcMainContentSubView: SubView = { id: "arc-main-content", title: "Arc", - icon: PiScribbleLoopBold, + icon: ArcIcon, main: true, component: ArcMainContent, renderHeaderAction: () => , diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx index 13695d5d558..847e6444743 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { useState } from "react"; -import { TbDotsVertical, TbSparkles } from "react-icons/tb"; import { Button } from "../../../../../../components/button"; import { IconButton } from "../../../../../../components/icon-button"; @@ -296,7 +296,7 @@ const DiffEqCodeAction: React.FC = () => { animated trigger={ - + } items={[ @@ -326,7 +326,7 @@ const DiffEqCodeAction: React.FC = () => { display="inline" >
- + Generate with AI
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx index e013b3c3883..6dd693e0986 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx @@ -1,7 +1,8 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { createContext, use } from "react"; -import { GrMultiple } from "react-icons/gr"; -import { TbTrash } from "react-icons/tb"; + +const MultipleIcon = () => ; import { IconButton } from "../../../../components/icon-button"; import type { SubView } from "../../../../components/sub-view/types"; @@ -89,7 +90,7 @@ const DeleteSelectionAction: React.FC = () => { }} tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete selected"} > - + ); }; @@ -97,7 +98,7 @@ const DeleteSelectionAction: React.FC = () => { const multiSelectionMainSubView: SubView = { id: "multi-selection-main", title: "Multiple Selection", - icon: GrMultiple, + icon: MultipleIcon, main: true, component: MultiSelectionContent, renderHeaderAction: () => , diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx index c2170705aed..50a3f7e7ac2 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx @@ -1,7 +1,6 @@ -import { Checkbox } from "@hashintel/ds-components"; +import { Checkbox, Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useEffect, useRef, useState } from "react"; -import { TbArrowRight, TbTrash } from "react-icons/tb"; import { Button } from "../../../../../../components/button"; import { IconButton } from "../../../../../../components/icon-button"; @@ -214,7 +213,7 @@ const PlaceMainContent: React.FC = () => { } } }} - suffix={} + suffix={} > Jump to Type @@ -303,7 +302,7 @@ const PlaceMainContent: React.FC = () => { }); } }} - suffix={} + suffix={} > Jump to Differential Equation @@ -352,7 +351,7 @@ const DeletePlaceAction: React.FC = () => { disabled={isReadOnly} tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"} > - + ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx index d5308e48110..0641b15f544 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx @@ -1,7 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; -import { LuLayers2 } from "react-icons/lu"; -import { TbTrash } from "react-icons/tb"; import { NumberInput } from "../../../../../../../components/number-input"; import type { SubView } from "../../../../../../../components/sub-view/types"; @@ -67,7 +66,7 @@ const ClearStateHeaderAction: React.FC = () => { if (selectedScenarioId) { return (
- + Defined by scenario
); @@ -87,7 +86,7 @@ const ClearStateHeaderAction: React.FC = () => { return ( ); diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx index aa90453ecd8..d148a62c86a 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useEffect, useMemo, useState } from "react"; -import { TbDotsVertical, TbSparkles } from "react-icons/tb"; import { IconButton } from "../../../../../../../components/icon-button"; import { Menu } from "../../../../../../../components/menu"; @@ -268,7 +268,7 @@ const VisualizerHeaderAction: React.FC = () => { animated trigger={ - + } items={[ @@ -295,7 +295,7 @@ const VisualizerHeaderAction: React.FC = () => { display="inline" >
- + Generate with AI
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx index 8cabaad15b4..5bedb123bfc 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useEffect, useState } from "react"; -import { TbTrash } from "react-icons/tb"; import { ArcItem, @@ -256,7 +256,7 @@ const DeleteTransitionAction: React.FC = () => { disabled={isReadOnly} tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"} > - + ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx index 537e40559f0..71b5c6785e1 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; -import { TbDotsVertical, TbSparkles } from "react-icons/tb"; import { IconButton } from "../../../../../../../components/icon-button"; import { Menu } from "../../../../../../../components/menu"; @@ -58,7 +58,7 @@ const FiringTimeHeaderAction: React.FC = () => { animated trigger={ - + } items={[ @@ -81,7 +81,7 @@ const FiringTimeHeaderAction: React.FC = () => { display="inline" >
- + Generate with AI
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx index 7cdf5cd5534..00f58b1e811 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; -import { TbDotsVertical, TbSparkles } from "react-icons/tb"; import { IconButton } from "../../../../../../../components/icon-button"; import { Menu } from "../../../../../../../components/menu"; @@ -60,7 +60,7 @@ const ResultsHeaderAction: React.FC = () => { animated trigger={ - + } items={[ @@ -118,7 +118,7 @@ const ResultsHeaderAction: React.FC = () => { display="inline" >
- + Generate with AI
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/type-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/type-properties/subviews/main.tsx index 87076ad94bf..c798a516ed3 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/type-properties/subviews/main.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/type-properties/subviews/main.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva } from "@hashintel/ds-helpers/css"; import { useState } from "react"; -import { TbPlus, TbX } from "react-icons/tb"; import { v4 as uuidv4 } from "uuid"; import { IconButton } from "../../../../../../components/icon-button"; @@ -281,7 +281,7 @@ const TypeMainContent: React.FC = () => { aria-label="Add dimension" tooltip={isDisabled ? UI_MESSAGES.READ_ONLY_MODE : undefined} > - + )} > @@ -353,7 +353,7 @@ const TypeMainContent: React.FC = () => { aria-label={`Delete dimension ${element.name}`} tooltip={isDisabled ? UI_MESSAGES.READ_ONLY_MODE : undefined} > - +
))} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/create-experiment-drawer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/create-experiment-drawer.tsx index 43225d9973f..3d469114abe 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/create-experiment-drawer.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/create-experiment-drawer.tsx @@ -1,6 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useState } from "react"; -import { TbPlayerPlay } from "react-icons/tb"; import { Button } from "../../../../components/button"; import { Drawer } from "../../../../components/drawer"; @@ -205,7 +205,7 @@ export const CreateExperimentDrawer = ({ variant="solid" tone="neutral" size="sm" - prefix={} + prefix={} onClick={() => {}} > Play diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenario-form.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenario-form.tsx index 63588390658..e66f6281829 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenario-form.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenario-form.tsx @@ -1,7 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { useForm, useStore } from "@tanstack/react-form"; import { use, useEffect, useRef, useState } from "react"; -import { TbPlus, TbTrash } from "react-icons/tb"; import { IconButton } from "../../../../components/icon-button"; import { Input } from "../../../../components/input"; @@ -639,7 +639,7 @@ const ScenarioFormSections = ({ aria-label="Add scenario parameter" onClick={addScenarioParam} > - + )} > @@ -727,7 +727,7 @@ const ScenarioFormSections = ({ aria-label="Remove parameter" onClick={() => removeScenarioParam(param._key)} > - + )) diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.tsx index 6d8848e0a07..e2a35e62661 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.tsx @@ -1,8 +1,6 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useState } from "react"; -import { LuLayers2 } from "react-icons/lu"; -import { PiFlaskBold } from "react-icons/pi"; -import { TbChartBar, TbPlus } from "react-icons/tb"; import { Button } from "../../../../components/button"; import type { SegmentOption } from "../../../../components/segment-group"; @@ -170,21 +168,21 @@ const modeOptions: SegmentOption[] = [ { value: "scenarios", label: "Scenarios", - icon: , + icon: , hideLabel: true, tooltip: "Scenarios", }, { value: "metrics", label: "Metrics", - icon: , + icon: , hideLabel: true, tooltip: "Metrics", }, { value: "experiments", label: "Experiments", - icon: , + icon: , hideLabel: true, tooltip: "Experiments not yet available", disabled: true, @@ -343,7 +341,7 @@ export const SimulateView = () => { variant="ghost" tone="neutral" size="xs" - prefix={} + prefix={} onClick={() => setDrawer({ type: "create-scenario" })} > Create scenario @@ -354,7 +352,7 @@ export const SimulateView = () => { variant="ghost" tone="neutral" size="xs" - prefix={} + prefix={} onClick={() => setDrawer({ type: "create-metric" })} > Create metric @@ -365,7 +363,7 @@ export const SimulateView = () => { variant="ghost" tone="neutral" size="xs" - prefix={} + prefix={} onClick={() => setDrawer({ type: "create-experiment" })} > Create experiment diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx index 40b7e7c4cfb..2ca8d2e5c5a 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx @@ -1,7 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva } from "@hashintel/ds-helpers/css"; import { Handle, type NodeProps, Position } from "@xyflow/react"; import { use } from "react"; -import { TbMathFunction } from "react-icons/tb"; import { hexToHsl } from "../../../lib/hsl-color"; import { splitPascalCase } from "../../../lib/split-pascal-case"; @@ -176,7 +176,7 @@ export const ClassicPlaceNode: React.FC> = ({ > {data.dynamicsEnabled && (
- +
)}
{label}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx index 5cb924cb9b4..e4533948780 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx @@ -1,7 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva } from "@hashintel/ds-helpers/css"; import { Handle, type NodeProps, Position } from "@xyflow/react"; import { use, useEffect, useRef } from "react"; -import { TbBolt, TbLambda } from "react-icons/tb"; import { EditorContext } from "../../../../react/state/editor-context"; import { useFiringDelta } from "../hooks/use-firing-delta"; @@ -214,12 +214,12 @@ export const ClassicTransitionNode: React.FC> = ({ > {data.lambdaType === "stochastic" && (
- +
)}
{label}
- +
> = ({ className={`${iconContainerBaseStyle} ${placeIconContainerStyle}`} style={{ color: typeColorBorder }} > - + {data.dynamicsEnabled && (
- +
)} diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx index 3febc40fe10..e5da5cccc76 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx @@ -1,7 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import type { NodeProps } from "@xyflow/react"; import { use, useEffect, useRef } from "react"; -import { TbBolt, TbLambda, TbSquareFilled } from "react-icons/tb"; import { EditorContext } from "../../../../react/state/editor-context"; import { useFiringDelta } from "../hooks/use-firing-delta"; @@ -146,10 +146,10 @@ export const TransitionNode: React.FC> = ({
- + {data.lambdaType === "stochastic" && (
- +
)}
@@ -158,7 +158,7 @@ export const TransitionNode: React.FC> = ({ subtitle={subtitle} badge={
- +
} isConnectable={isConnectable} diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-controls.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-controls.tsx index 28ef11c2cd9..1083fad20e4 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-controls.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-controls.tsx @@ -1,13 +1,7 @@ +import { Icon } from "@hashintel/ds-components"; import { css, cva } from "@hashintel/ds-helpers/css"; import { useReactFlow } from "@xyflow/react"; import { use, useState } from "react"; -import { - TbLockOpen, - TbMaximize, - TbMinus, - TbPlus, - TbSettings, -} from "react-icons/tb"; import { IconButton } from "../../../components/icon-button"; import { PANEL_MARGIN } from "../../../constants/ui"; @@ -70,7 +64,7 @@ export const ViewportControls: React.FC<{ // eslint-disable-next-line @typescript-eslint/no-misused-promises onClick={() => zoomIn()} > - + zoomOut()} > - + - + - + setIsSettingsOpen(true)} > - + Date: Fri, 15 May 2026 16:48:18 +0200 Subject: [PATCH 2/7] Switch IconButton to Button component in petrinaut --- .../src/components/Button/button.tsx | 6 +- .../src/components/Icon/icon.tsx | 6 +- .../Icon/svgs/regular/circle-exclamation.svg | 1 + .../Icon/svgs/regular/circle-info.svg | 1 + .../svgs/regular/triangle-exclamation.svg | 1 + .../Icon/svgs/solid/circle-exclamation.svg | 1 - .../Icon/svgs/solid/circle-info.svg | 1 - .../Icon/svgs/solid/triangle-exclamation.svg | 1 - .../petrinaut/src/ui/components/arc-item.tsx | 2 +- .../petrinaut/src/ui/components/button.tsx | 21 +- .../src/ui/components/icon-button.tsx | 230 ------------------ .../petrinaut/src/ui/components/popover.tsx | 12 +- .../petrinaut/src/ui/components/section.tsx | 14 +- .../ui/components/segment-group.stories.tsx | 18 +- .../petrinaut/src/ui/components/tooltip.tsx | 2 +- .../BottomBar/playback-settings-menu.tsx | 25 +- .../components/BottomBar/toolbar-modes.tsx | 2 +- .../components/TopBar/mode-selector.tsx | 6 +- .../Editor/components/TopBar/top-bar.tsx | 25 +- .../TopBar/version-history-button.tsx | 13 +- .../views/Editor/panels/BottomPanel/panel.tsx | 12 +- .../BottomPanel/subviews/diagnostics.tsx | 4 +- .../subviews/simulation-settings.tsx | 32 +-- .../subviews/simulation-timeline.tsx | 33 ++- .../subviews/differential-equations-list.tsx | 15 +- .../subviews/filterable-list-sub-view.tsx | 22 +- .../LeftSideBar/subviews/parameters-list.tsx | 13 +- .../LeftSideBar/subviews/search-panel.tsx | 12 +- .../LeftSideBar/subviews/types-list.tsx | 13 +- .../PropertiesPanel/arc-properties/main.tsx | 15 +- .../subviews/main.tsx | 12 +- .../PropertiesPanel/multi-selection-panel.tsx | 13 +- .../place-properties/subviews/main.tsx | 12 +- .../subviews/place-visualizer/subview.tsx | 13 +- .../transition-properties/subviews/main.tsx | 14 +- .../transition-firing-time/subview.tsx | 13 +- .../subviews/transition-results/subview.tsx | 13 +- .../type-properties/subviews/main.tsx | 31 +-- .../panels/SimulateView/scenario-form.tsx | 23 +- .../SDCPN/components/viewport-controls.tsx | 89 ++++--- 40 files changed, 319 insertions(+), 473 deletions(-) create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-exclamation.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-info.svg create mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/regular/triangle-exclamation.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-exclamation.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-info.svg delete mode 100644 libs/@hashintel/ds-components/src/components/Icon/svgs/solid/triangle-exclamation.svg delete mode 100644 libs/@hashintel/petrinaut/src/ui/components/icon-button.tsx diff --git a/libs/@hashintel/ds-components/src/components/Button/button.tsx b/libs/@hashintel/ds-components/src/components/Button/button.tsx index 9973184cbfb..577c23eb2bf 100644 --- a/libs/@hashintel/ds-components/src/components/Button/button.tsx +++ b/libs/@hashintel/ds-components/src/components/Button/button.tsx @@ -65,10 +65,8 @@ type ButtonElementOnlyProps = { target?: never; download?: never; ref?: React.Ref; -} & RequireAtLeastOne<{ - onClick: React.ButtonHTMLAttributes["onClick"]; - type: "submit" | "reset"; -}>; + onClick?: React.ButtonHTMLAttributes["onClick"]; +}; export type AnchorElementOnlyProps = { href: string; diff --git a/libs/@hashintel/ds-components/src/components/Icon/icon.tsx b/libs/@hashintel/ds-components/src/components/Icon/icon.tsx index 47ea2977289..e1aec2e3109 100644 --- a/libs/@hashintel/ds-components/src/components/Icon/icon.tsx +++ b/libs/@hashintel/ds-components/src/components/Icon/icon.tsx @@ -40,8 +40,8 @@ import Circle from "./svgs/regular/circle.svg"; import CircleSolid from "./svgs/solid/circle.svg"; import CircleCheck from "./svgs/regular/circle-check.svg"; import CircleEllipsis from "./svgs/regular/circle-ellipsis.svg"; -import CircleExclamation from "./svgs/solid/circle-exclamation.svg"; -import CircleInfo from "./svgs/solid/circle-info.svg"; +import CircleExclamation from "./svgs/regular/circle-exclamation.svg"; +import CircleInfo from "./svgs/regular/circle-info.svg"; import CircleNodes from "./svgs/regular/circle-nodes.svg"; import CircleOne from "./svgs/regular/circle-1.svg"; import CirclePlus from "./svgs/regular/circle-plus.svg"; @@ -113,7 +113,7 @@ import Text from "./svgs/regular/text.svg"; import ThoughtBubble from "./svgs/regular/thought-bubble.svg"; import ThreeCircles from "./svgs/regular/circles-overlap-3.svg"; import TrashCan from "./svgs/regular/trash-can.svg"; -import TriangleExclamation from "./svgs/solid/triangle-exclamation.svg"; +import TriangleExclamation from "./svgs/regular/triangle-exclamation.svg"; import UnlockKeyhole from "./svgs/regular/unlock-keyhole.svg"; import UserPlus from "./svgs/regular/user-plus.svg"; import WandMagicSparkles from "./svgs/regular/wand-magic-sparkles.svg"; diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-exclamation.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-exclamation.svg new file mode 100644 index 00000000000..1113b2ddee4 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-exclamation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-info.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-info.svg new file mode 100644 index 00000000000..1ebf5cc2986 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/triangle-exclamation.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/triangle-exclamation.svg new file mode 100644 index 00000000000..4f149ef6e27 --- /dev/null +++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/triangle-exclamation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-exclamation.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-exclamation.svg deleted file mode 100644 index 7b0a735f782..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-exclamation.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-info.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-info.svg deleted file mode 100644 index 39bb6f4acb8..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-info.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/triangle-exclamation.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/triangle-exclamation.svg deleted file mode 100644 index 4f67c4e4767..00000000000 --- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/triangle-exclamation.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx b/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx index c9898a6df22..da0e803d1d4 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx @@ -283,7 +283,7 @@ export const ArcItem = ({ style={{ backgroundColor: color ?? "#d4d4d4" }} /> {placeName} - + ); diff --git a/libs/@hashintel/petrinaut/src/ui/components/button.tsx b/libs/@hashintel/petrinaut/src/ui/components/button.tsx index 8b6d48159d9..caf41e6f71d 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/button.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/button.tsx @@ -2,9 +2,26 @@ import { Button as DsButton, type ButtonProps as DsButtonProps, } from "@hashintel/ds-components"; +import type { ComponentType } from "react"; import { withTooltip } from "./hoc/with-tooltip"; -export type ButtonProps = DsButtonProps; +/** + * Wrap the ds-components Button to: + * - Allow arbitrary `data-*` attributes (e.g. CSS hooks like `[data-row-action]`). + * - Relax the requirement that a ` -); - -export const IconButton = withTooltip(IconButtonBase, "inline"); diff --git a/libs/@hashintel/petrinaut/src/ui/components/popover.tsx b/libs/@hashintel/petrinaut/src/ui/components/popover.tsx index 4e905390e34..d5ceb1d1b8e 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/popover.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/popover.tsx @@ -1,11 +1,10 @@ import { Popover as ArkPopover } from "@ark-ui/react/popover"; import { Portal } from "@ark-ui/react/portal"; -import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import type { ComponentProps, ReactNode } from "react"; import { usePortalContainerRef } from "../../react/state/portal-container-context"; -import { IconButton } from "./icon-button"; +import { Button } from "./button"; // -- Styles ------------------------------------------------------------------ @@ -113,14 +112,15 @@ const Header = ({ children }: { children: ReactNode }) => (
{children} - - - + iconName="close" + tooltip="Close" + tooltipDisplay="inline" + />
); diff --git a/libs/@hashintel/petrinaut/src/ui/components/section.tsx b/libs/@hashintel/petrinaut/src/ui/components/section.tsx index c38a3e7604f..e851cd382a3 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/section.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/section.tsx @@ -1,10 +1,9 @@ import { Collapsible } from "@ark-ui/react/collapsible"; -import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import { type ReactNode, use } from "react"; import { UserSettingsContext } from "../../react/state/user-settings-context"; -import { IconButton } from "./icon-button"; +import { Button } from "./button"; import { InfoIconTooltip } from "./tooltip"; // -- SectionList (wrapper) -------------------------------------------------- @@ -188,9 +187,14 @@ export const Section = ({ {headerLeft} {renderHeaderAction &&
{renderHeaderAction()}
} - - - +
@@ -300,10 +304,10 @@ export const PlaybackSettingsMenu = () => { : undefined } > - + Run indefinitely {stoppingCondition === "indefinitely" && ( - + )} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx index 5ede5180fc3..6c1a8b4653a 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx @@ -101,7 +101,7 @@ const CursorModeDropdown: React.FC<{ ) : ( )} - + } items={items} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx index e7cbd3ce8f8..f12a7841687 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx @@ -12,17 +12,17 @@ const options: SegmentOption[] = [ { label: "Edit", value: "edit", - icon: , + icon: , }, { label: "Simulate", value: "simulate", - icon: , + icon: , }, { label: "Actual", value: "actual", - icon: , + icon: , disabled: true, tooltip: "Actual mode is not yet available.", }, diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx index 945974492ff..e9cce919bf2 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx @@ -1,8 +1,7 @@ -import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; -import { IconButton } from "../../../../components/icon-button"; +import { Button } from "../../../../components/button"; import { Menu, type MenuItem } from "../../../../components/menu"; import { EditorContext, @@ -69,8 +68,8 @@ export const TopBar: React.FC = ({ return (
- { setLeftSidebarOpen(!isLeftSidebarOpen); @@ -79,15 +78,21 @@ export const TopBar: React.FC = ({ } }} aria-label={isLeftSidebarOpen ? "Collapse sidebar" : "Expand sidebar"} - > - - + tooltip={isLeftSidebarOpen ? "Collapse sidebar" : "Expand sidebar"} + tooltipDisplay="inline" + iconName="sidebar" + /> - - +
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx index 7bd992d22cb..4643a0b83e4 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx @@ -295,9 +295,9 @@ const DiagnosticsContent: React.FC = () => { className={entityButtonStyle} > {isExpanded ? ( - + ) : ( - + )} {entityLabel} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx index 1fce1b679e1..963addb5bc8 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx @@ -2,7 +2,7 @@ import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useState } from "react"; -import { IconButton } from "../../../../../components/icon-button"; +import { Button } from "../../../../../components/button"; import { NumberInput } from "../../../../../components/number-input"; import { Select } from "../../../../../components/select"; import { Slider } from "../../../../../components/slider"; @@ -250,34 +250,34 @@ const SimulationSettingsContent: React.FC = () => { />
{selectedScenario && ( - setIsViewScenarioOpen(true)} - > - - + /> )} - setIsCreateScenarioOpen(true)} - > - - - +
{
{selectedMetric && ( - setIsViewOpen(true)} - > - - + /> )} - setIsCreateOpen(true)} - > - - - +
{ const isReadOnly = useIsReadOnly(); return ( - { const name = `Equation ${differentialEquations.length + 1}`; const id = uuidv4(); @@ -45,9 +50,7 @@ export const DifferentialEquationsSectionHeaderAction: React.FC = () => { }); selectItem({ type: "differentialEquation", id }); }} - > - - + /> ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx index 5dec90bd2f7..86a1757227c 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx @@ -3,7 +3,7 @@ import { css, cva } from "@hashintel/ds-helpers/css"; import type { ComponentType, ReactNode } from "react"; import { Fragment, use, useEffect, useRef, useState } from "react"; -import { IconButton } from "../../../../../components/icon-button"; +import { Button } from "../../../../../components/button"; import type { MenuItem } from "../../../../../components/menu"; import { Menu } from "../../../../../components/menu"; import type { @@ -201,13 +201,15 @@ const FilterHeaderAction: React.FC<{ return ( <> - setSearchOpen(true)} - > - - + /> {renderExtraAction?.()} ); @@ -226,14 +228,16 @@ export const RowMenu: React.FC<{ items: MenuItem[] }> = ({ items }) => { event.stopPropagation()} - > - - + /> } items={items} placement="bottom-end" diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx index a81f13c4320..40ed10a95f8 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx @@ -3,7 +3,7 @@ import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; import { v4 as uuidv4 } from "uuid"; -import { IconButton } from "../../../../../components/icon-button"; +import { Button } from "../../../../../components/button"; import type { SubView } from "../../../../../components/sub-view/types"; import { ParameterIcon } from "../../../../../constants/entity-icons"; import { UI_MESSAGES } from "../../../../../constants/ui-messages"; @@ -50,15 +50,16 @@ export const ParametersHeaderAction: React.FC = () => { }; return ( - - - + /> ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx index 3e5e0ae8446..55a81e7f5a2 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx @@ -6,7 +6,7 @@ import { use, useEffect, useRef, useState } from "react"; const SearchIcon = () => ; -import { IconButton } from "../../../../../components/icon-button"; +import { Button } from "../../../../../components/button"; import type { SubView } from "../../../../../components/sub-view/types"; import { DifferentialEquationIcon, @@ -423,13 +423,15 @@ const SearchHeaderAction: React.FC = () => { const { setSearchOpen } = use(EditorContext); return ( - setSearchOpen(false)} - > - ✕ - + /> ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx index f00119a23a8..513553d8908 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx @@ -1,7 +1,7 @@ import { Icon } from "@hashintel/ds-components"; import { use } from "react"; -import { IconButton } from "../../../../../components/icon-button"; +import { Button } from "../../../../../components/button"; import type { SubView } from "../../../../../components/sub-view/types"; import { TokenTypeIcon } from "../../../../../constants/entity-icons"; import { UI_MESSAGES } from "../../../../../constants/ui-messages"; @@ -71,11 +71,14 @@ export const TypesSectionHeaderAction: React.FC = () => { const isReadOnly = useIsReadOnly(); return ( - { const existingColors = types.map((type) => type.displayColor); const existingNames = types.map((type) => type.name); @@ -99,9 +102,7 @@ export const TypesSectionHeaderAction: React.FC = () => { addType(newType); selectItem({ type: "type", id }); }} - > - - + /> ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx index 379b0957aaa..e1331afc190 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx @@ -2,9 +2,9 @@ import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { createContext, use } from "react"; -const ArcIcon = () => ; +import { Button } from "../../../../../components/button"; -import { IconButton } from "../../../../../components/icon-button"; +const ArcIcon = () => ; import { NumberInput } from "../../../../../components/number-input"; import { Section, SectionList } from "../../../../../components/section"; import { Select } from "../../../../../components/select"; @@ -139,19 +139,20 @@ const DeleteArcAction: React.FC = () => { const isReadOnly = useIsReadOnly(); return ( - { removeArc(transitionId, arcDirection, placeId); clearSelection(); }} disabled={isReadOnly} tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"} - > - - + tooltipDisplay="inline" + /> ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx index 847e6444743..38a279ecd63 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx @@ -3,7 +3,6 @@ import { css } from "@hashintel/ds-helpers/css"; import { useState } from "react"; import { Button } from "../../../../../../components/button"; -import { IconButton } from "../../../../../../components/icon-button"; import { Input } from "../../../../../../components/input"; import { Menu } from "../../../../../../components/menu"; import { Section, SectionList } from "../../../../../../components/section"; @@ -295,9 +294,14 @@ const DiffEqCodeAction: React.FC = () => { - - + + tooltip="Delete arc" + tooltipDisplay="inline" + iconName="trash" + /> )} diff --git a/libs/@hashintel/petrinaut/src/ui/components/dialog.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/dialog.stories.tsx index 3042c529c98..7eac78d5892 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/dialog.stories.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/dialog.stories.tsx @@ -2,6 +2,7 @@ import { css } from "@hashintel/ds-helpers/css"; import type { Meta, StoryObj } from "@storybook/react-vite"; import { useState } from "react"; +import { Button } from "./button"; import { Dialog } from "./dialog"; const meta = { @@ -17,63 +18,6 @@ type Story = StoryObj; // -- Shared styles ----------------------------------------------------------- -const triggerButtonStyle = css({ - display: "inline-flex", - alignItems: "center", - justifyContent: "center", - height: "[32px]", - paddingX: "[12px]", - fontSize: "[14px]", - fontWeight: "medium", - color: "neutral.s120", - backgroundColor: "[white]", - border: "[1px solid]", - borderColor: "neutral.s30", - borderRadius: "[8px]", - cursor: "pointer", - _hover: { - backgroundColor: "neutral.s10", - }, -}); - -const cancelButtonStyle = css({ - display: "inline-flex", - alignItems: "center", - justifyContent: "center", - paddingX: "[12px]", - paddingY: "[8px]", - fontSize: "[14px]", - fontWeight: "medium", - lineHeight: "[14px]", - color: "[#484848]", - backgroundColor: "[white]", - border: "[1px solid rgba(0, 0, 0, 0.09)]", - borderRadius: "[10px]", - cursor: "pointer", - _hover: { - backgroundColor: "[rgba(0, 0, 0, 0.03)]", - }, -}); - -const confirmButtonStyle = css({ - display: "inline-flex", - alignItems: "center", - justifyContent: "center", - paddingX: "[12px]", - paddingY: "[8px]", - fontSize: "[14px]", - fontWeight: "medium", - lineHeight: "[14px]", - color: "[white]", - backgroundColor: "[#484848]", - border: "none", - borderRadius: "[10px]", - cursor: "pointer", - _hover: { - backgroundColor: "[#3a3a3a]", - }, -}); - const bodyTextStyle = css({ fontSize: "[14px]", fontWeight: "medium", @@ -89,9 +33,7 @@ export const Default: Story = { render: () => ( - + @@ -104,13 +46,9 @@ export const Default: Story = { - + - + @@ -122,9 +60,7 @@ export const WithDescription: Story = { render: () => ( - + @@ -140,13 +76,11 @@ export const WithDescription: Story = { - + - + @@ -158,9 +92,7 @@ export const WithoutFooter: Story = { render: () => ( - + @@ -184,13 +116,9 @@ const ControlledDialogExample = () => { return ( <> - + setOpen(details.open)} @@ -207,17 +135,11 @@ const ControlledDialogExample = () => { - + - + @@ -235,9 +157,7 @@ export const OpenByDefault: Story = { render: () => ( - + @@ -252,13 +172,9 @@ export const OpenByDefault: Story = { - + - + diff --git a/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx b/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx index 5fd2aeb28ab..03557d6a474 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx @@ -1,9 +1,9 @@ -import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import { type ReactNode, use, useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { PortalContainerContext } from "../../react/state/portal-container-context"; +import { Button } from "./button"; import { Body, Card as PanelCard, @@ -146,14 +146,15 @@ const Card = ({ }) => ( - - + /> } > {children} diff --git a/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx b/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx index 9bfb9082f4f..15ad7682c44 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx @@ -1,7 +1,8 @@ -import { Icon } from "@hashintel/ds-components"; import { css, cx } from "@hashintel/ds-helpers/css"; import type { ReactNode } from "react"; +import { Button } from "./button"; + /** * Shared visual primitives used by Dialog and Drawer. * @@ -73,9 +74,14 @@ export const Card = ({
{children} {closeButton ?? ( - +
); diff --git a/libs/@hashintel/petrinaut/src/ui/components/popover.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/popover.stories.tsx index a46447c6b3a..9df6c2fa091 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/popover.stories.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/popover.stories.tsx @@ -1,6 +1,7 @@ import { css } from "@hashintel/ds-helpers/css"; import type { Meta, StoryObj } from "@storybook/react-vite"; +import { Button } from "./button"; import { Popover } from "./popover"; const meta = { @@ -14,47 +15,14 @@ export default meta; type Story = StoryObj; -const triggerButtonStyle = css({ - display: "inline-flex", - alignItems: "center", - justifyContent: "center", - height: "[32px]", - paddingX: "[12px]", - fontSize: "[14px]", - fontWeight: "medium", - color: "neutral.s120", - backgroundColor: "[white]", - border: "[1px solid]", - borderColor: "neutral.s30", - borderRadius: "[8px]", - cursor: "pointer", - _hover: { - backgroundColor: "neutral.s10", - }, -}); - const contentWidthStyle = css({ width: "[240px]", }); const itemStyle = css({ - display: "flex", - alignItems: "center", - gap: "[8px]", width: "[100%]", - height: "[28px]", - paddingX: "[8px]", - borderRadius: "[8px]", - fontSize: "[14px]", - fontWeight: "medium", - color: "neutral.s120", - backgroundColor: "[transparent]", - border: "none", - cursor: "pointer", + justifyContent: "flex-start", textAlign: "left", - _hover: { - backgroundColor: "neutral.s10", - }, }); export const Default: Story = { @@ -62,24 +30,22 @@ export const Default: Story = { render: () => ( - + Settings Options - - + - + + @@ -92,32 +58,30 @@ export const MultipleSections: Story = { render: () => ( - + Preferences Display - - + + Language - - + + @@ -130,21 +94,19 @@ export const TopPlacement: Story = { render: () => ( - + Info Details - - + + @@ -157,18 +119,16 @@ export const OpenByDefault: Story = { render: () => ( - + Popover Content - + diff --git a/libs/@hashintel/petrinaut/src/ui/components/section.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/section.stories.tsx index c72802a938b..3aaa5acf815 100644 --- a/libs/@hashintel/petrinaut/src/ui/components/section.stories.tsx +++ b/libs/@hashintel/petrinaut/src/ui/components/section.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; +import { Button } from "./button"; import { Section, SectionList } from "./section"; const meta = { @@ -82,19 +83,9 @@ export const WithHeaderAction: Story = {
( - + )} > diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx index 4643a0b83e4..d861194f6ab 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx @@ -1,4 +1,4 @@ -import { Icon } from "@hashintel/ds-components"; +import { Icon, Button } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use, useCallback, useMemo, useState } from "react"; import type { Diagnostic } from "vscode-languageserver-types"; @@ -117,25 +117,10 @@ const simulationErrorTextStyle = css({ }); const editButtonStyle = css({ - fontSize: "[11px]", - paddingY: "1", - paddingX: "2", - border: "[1px solid rgba(211, 47, 47, 0.3)]", - borderRadius: "sm", - backgroundColor: "neutral.s00", - cursor: "pointer", - color: "red.s60", - display: "inline-flex", - alignItems: "center", - gap: "1", marginTop: "1", alignSelf: "flex-start", }); -const editButtonIconStyle = css({ - fontSize: "xs", -}); - type EntityType = "transition" | "differential-equation"; interface GroupedDiagnostics { @@ -260,8 +245,7 @@ const DiagnosticsContent: React.FC = () => { 
{simulationError}
{errorItemId && ( - + )}
)} diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx index 0641b15f544..48cdb2acdee 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx @@ -2,6 +2,7 @@ import { Icon } from "@hashintel/ds-components"; import { css } from "@hashintel/ds-helpers/css"; import { use } from "react"; +import { Button } from "../../../../../../../components/button"; import { NumberInput } from "../../../../../../../components/number-input"; import type { SubView } from "../../../../../../../components/sub-view/types"; import { UI_MESSAGES } from "../../../../../../../constants/ui-messages"; @@ -85,10 +86,16 @@ const ClearStateHeaderAction: React.FC = () => { }; return ( - + ); }; diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx index 2ca8d2e5c5a..be6fa73ff5e 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx @@ -176,7 +176,7 @@ export const ClassicPlaceNode: React.FC> = ({ > {data.dynamicsEnabled && (
- +
)}
{label}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx index e4533948780..54e7387f77d 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx @@ -214,12 +214,12 @@ export const ClassicTransitionNode: React.FC> = ({ > {data.lambdaType === "stochastic" && (
- +
)}
{label}
- +
> = ({ {data.dynamicsEnabled && (
- +
)} diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx index e5da5cccc76..f14948375b7 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx @@ -149,7 +149,7 @@ export const TransitionNode: React.FC> = ({ {data.lambdaType === "stochastic" && (
- +
)} From 52a0a17fd2cdc315760d0a7ce30d37615d4ffce8 Mon Sep 17 00:00:00 2001 From: alex leon Date: Fri, 15 May 2026 17:22:59 +0200 Subject: [PATCH 4/7] Switch BottomBar - - +
@@ -267,16 +272,17 @@ export const PlaybackSettingsMenu = () => { {speedRows.map((row) => (
{row.map((speed) => ( - + ))}
))} @@ -288,8 +294,9 @@ export const PlaybackSettingsMenu = () => { Stopping conditions - - +
From c4d18b81df10a7417d1bb0e6448a8ddaf2d5a0f5 Mon Sep 17 00:00:00 2001 From: alex leon Date: Fri, 15 May 2026 17:51:19 +0200 Subject: [PATCH 5/7] Remove unnecessary