FE-706: Add design system components to Petrinaut

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",

libs/@hashintel/ds-components/src/components/Button/button.tsx

@@ -65,10 +65,8 @@ type ButtonElementOnlyProps = {
   target?: never;
   download?: never;
   ref?: React.Ref<HTMLButtonElement>;
-} & RequireAtLeastOne<{
-  onClick: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
-  type: "submit" | "reset";
-}>;
+  onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
+};
 
 export type AnchorElementOnlyProps = {
   href: string;

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,19 +28,21 @@ 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";
 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 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";
 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 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";
 import Xmark from "./svgs/regular/xmark.svg";
@@ -131,17 +140,18 @@ const IconMap = {
   calendar: Calendar,
   calendarClock: CalendarClock,
   caretDown: CaretDown,
-  chartColumn: ChartColumn,
+  chartBar: ChartColumn,
+  chartBarSimple: ChartSimple,
   chartLine: ChartLine,
   check: Check,
   chevronDown: ChevronDown,
   chevronLeft: ChevronLeft,
   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,