From 287319a344ef3d7ad22ed92d6a3dc6458a035e5a Mon Sep 17 00:00:00 2001 From: Vikhyath Mondreti Date: Mon, 10 Aug 2026 19:42:04 -0700 Subject: [PATCH] fix(workflows): port the canvas card icons off lucide-react MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The new workflow block card (#6458) imports 16 icons from `lucide-react`, which #6241 removed from the dependency tree in favour of the in-house `@sim/emcn/icons` set. `next build` fails on both files: Module not found: Can't resolve 'lucide-react' It builds green locally because `fumadocs-ui` pulls lucide-react in for `apps/docs` and the install hoists it into `apps/sim/node_modules`, so dev, `tsc`, and biome all resolve it. Only an install that excludes the docs app — the Docker build — sees it missing. `check-import-specifiers` does not cover this, as it skips bare npm specifiers by design. Eleven of the icons already existed in the house set. Three map onto existing glyphs that are already the same drawing: `Braces` -> `TypeJson` (curly braces), `Hash` -> `TypeNumber` (hash), `KeyRound` -> `Key`. The remaining four are new, ported with the same transform #6241 used — lucide geometry scaled 0.86 and translated so its (12, 12) centre lands on (10.25, 9.75) in a `-1 -2 24 24` viewBox, stroked at the house 1.55. Every icon ported in #6241 sits on that centre; these four measure there exactly. Co-Authored-By: Claude Opus 5 (1M context) --- .../connection-block-selector.tsx | 4 +-- .../workflow-block/workflow-block.tsx | 36 +++++++++---------- packages/emcn/src/icons/index.ts | 4 +++ .../emcn/src/icons/message-square-text.tsx | 27 ++++++++++++++ packages/emcn/src/icons/skip-forward.tsx | 26 ++++++++++++++ .../emcn/src/icons/sliders-horizontal.tsx | 33 +++++++++++++++++ packages/emcn/src/icons/toggle-left.tsx | 26 ++++++++++++++ 7 files changed, 136 insertions(+), 20 deletions(-) create mode 100644 packages/emcn/src/icons/message-square-text.tsx create mode 100644 packages/emcn/src/icons/skip-forward.tsx create mode 100644 packages/emcn/src/icons/sliders-horizontal.tsx create mode 100644 packages/emcn/src/icons/toggle-left.tsx diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx index 2bda0383450..157f6f41278 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx @@ -1,10 +1,10 @@ 'use client' import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react' -import { Button, cn, X } from '@sim/emcn' +import { Button, cn } from '@sim/emcn' +import { Search, X } from '@sim/emcn/icons' import { WorkflowBlockBorder, type WorkflowBorderPort } from '@sim/workflow-renderer' import { Command } from 'cmdk' -import { Search } from 'lucide-react' import { useParams } from 'next/navigation' import { usePostHog } from 'posthog-js/react' import { Handle, type NodeProps, Position } from 'reactflow' diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx index 442c67767cc..889eb2aff47 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx @@ -1,20 +1,10 @@ import { type ComponentType, Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react' -import { - BLOCK_DIMENSIONS, - CanvasSentenceView, - SubBlockRowView, - WorkflowBlockView, -} from '@sim/workflow-renderer' -import { wouldCreateCycle } from '@sim/workflow-types/workflow' -import { isEqual } from 'es-toolkit' import { ArrowLeftRight, ArrowUpDown, - Braces, Clock, Globe, - Hash, - KeyRound, + Key, ListFilter, MessageSquareText, Paperclip, @@ -22,8 +12,18 @@ import { SlidersHorizontal, Sparkles, ToggleLeft, + TypeJson, + TypeNumber, Wrench, -} from 'lucide-react' +} from '@sim/emcn/icons' +import { + BLOCK_DIMENSIONS, + CanvasSentenceView, + SubBlockRowView, + WorkflowBlockView, +} from '@sim/workflow-renderer' +import { wouldCreateCycle } from '@sim/workflow-types/workflow' +import { isEqual } from 'es-toolkit' import { useParams } from 'next/navigation' import { usePostHog } from 'posthog-js/react' import { type NodeProps, useStore as useReactFlowStore, useUpdateNodeInternals } from 'reactflow' @@ -129,22 +129,22 @@ const SUBBLOCK_META_ICONS_BY_ID: Record = { filterCriteria: ListFilter, sortBuilder: ArrowUpDown, sort: ArrowUpDown, - limit: Hash, + limit: TypeNumber, offset: SkipForward, - rowId: KeyRound, + rowId: Key, url: Globe, method: ArrowLeftRight, - body: Braces, - data: Braces, + body: TypeJson, + data: TypeJson, } /** Leading icons for compact meta rows, keyed by subblock type. */ const SUBBLOCK_META_ICONS_BY_TYPE: Record = { - code: Braces, + code: TypeJson, 'messages-input': MessageSquareText, 'tool-input': Wrench, 'skill-input': Sparkles, - 'oauth-input': KeyRound, + 'oauth-input': Key, switch: ToggleLeft, 'file-upload': Paperclip, 'time-input': Clock, diff --git a/packages/emcn/src/icons/index.ts b/packages/emcn/src/icons/index.ts index 6c8d3c14159..54b2f5162ff 100644 --- a/packages/emcn/src/icons/index.ts +++ b/packages/emcn/src/icons/index.ts @@ -93,6 +93,7 @@ export { LogOut } from './log-out' export { Mail } from './mail' export { ManageWorkspace } from './manage-workspace' export { Menu } from './menu' +export { MessageSquareText } from './message-square-text' export { Mic } from './mic' export { MicOff } from './mic-off' export { Minus } from './minus' @@ -131,7 +132,9 @@ export { Share } from './share' export { ShieldCheck } from './shield-check' export { Shuffle } from './shuffle' export { Sim } from './sim' +export { SkipForward } from './skip-forward' export { Slash } from './slash' +export { SlidersHorizontal } from './sliders-horizontal' export { Sparkles } from './sparkles' export { Split } from './split' export { Sprout } from './sprout' @@ -147,6 +150,7 @@ export { TerminalWindow } from './terminal-window' export { TextQuote } from './text-quote' export { ThumbsDown } from './thumbs-down' export { ThumbsUp } from './thumbs-up' +export { ToggleLeft } from './toggle-left' export { Trash } from './trash' export { TriangleAlert } from './triangle-alert' export { TypeBoolean } from './type-boolean' diff --git a/packages/emcn/src/icons/message-square-text.tsx b/packages/emcn/src/icons/message-square-text.tsx new file mode 100644 index 00000000000..08ce0624ffb --- /dev/null +++ b/packages/emcn/src/icons/message-square-text.tsx @@ -0,0 +1,27 @@ +import type { SVGProps } from 'react' + +/** + * MessageSquareText icon component - speech bubble with two lines of text + * @param props - SVG properties including className, fill, etc. + */ +export function MessageSquareText(props: SVGProps) { + return ( + + ) +} diff --git a/packages/emcn/src/icons/skip-forward.tsx b/packages/emcn/src/icons/skip-forward.tsx new file mode 100644 index 00000000000..a33cf119e42 --- /dev/null +++ b/packages/emcn/src/icons/skip-forward.tsx @@ -0,0 +1,26 @@ +import type { SVGProps } from 'react' + +/** + * SkipForward icon component - right-facing triangle against an end bar + * @param props - SVG properties including className, fill, etc. + */ +export function SkipForward(props: SVGProps) { + return ( + + ) +} diff --git a/packages/emcn/src/icons/sliders-horizontal.tsx b/packages/emcn/src/icons/sliders-horizontal.tsx new file mode 100644 index 00000000000..aba7249f50a --- /dev/null +++ b/packages/emcn/src/icons/sliders-horizontal.tsx @@ -0,0 +1,33 @@ +import type { SVGProps } from 'react' + +/** + * SlidersHorizontal icon component - three horizontal tracks, each broken by a handle + * @param props - SVG properties including className, fill, etc. + */ +export function SlidersHorizontal(props: SVGProps) { + return ( + + ) +} diff --git a/packages/emcn/src/icons/toggle-left.tsx b/packages/emcn/src/icons/toggle-left.tsx new file mode 100644 index 00000000000..93a58b78a81 --- /dev/null +++ b/packages/emcn/src/icons/toggle-left.tsx @@ -0,0 +1,26 @@ +import type { SVGProps } from 'react' + +/** + * ToggleLeft icon component - pill track with the knob resting on the left + * @param props - SVG properties including className, fill, etc. + */ +export function ToggleLeft(props: SVGProps) { + return ( + + ) +}