[WEB-5394] fix: propel storybook circular dependencies (#8096)

* fix: resolve circular dependency crashes in storybook stories

* fix: toolbar circular dependency fix and code refactor

packages/propel/src/collapsible/collapsible.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
-import { ChevronDownIcon } from "../icons";
+import { ChevronDownIcon } from "../icons/arrows/chevron-down";
 import { Collapsible } from "./collapsible";
 
 const meta = {

packages/propel/src/context-menu/context-menu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Copy, Download, Edit, Share, Trash, Star, Archive } from "lucide-react";
-import { ChevronRightIcon } from "../icons";
+import { ChevronRightIcon } from "../icons/arrows/chevron-right";
 import { ContextMenu } from "./context-menu";
 
 // cannot use satisfies here because base-ui does not have portable types.

packages/propel/src/dialog/dialog.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
-import { CloseIcon } from "../icons";
+import { CloseIcon } from "../icons/actions/close-icon";
 import { Dialog, EDialogWidth } from "./root";
 
 const meta = {

packages/propel/src/popover/popover.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
-import { CloseIcon } from "../icons";
+import { CloseIcon } from "../icons/actions/close-icon";
 import { Popover } from "./root";
 
 // cannot use satifies here because base-ui does not have portable types.

packages/propel/src/tabs/tabs.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Settings, User, Bell } from "lucide-react";
-import { HomeIcon } from "../icons";
+import { HomeIcon } from "../icons/workspace/home-icon";
 import { Tabs } from "./tabs";
 
 type TabOption = {

packages/propel/src/toolbar/toolbar.stories.tsx

@@ -6,7 +6,6 @@ import {
   Strikethrough,
   Code,
   Link,
-  List,
   ListOrdered,
   Quote,
   AlignLeft,
@@ -17,6 +16,7 @@ import {
   Globe2,
   Lock,
 } from "lucide-react";
+import { ListLayoutIcon } from "../icons/layouts/list-icon";
 import { Toolbar } from "./toolbar";
 
 const meta = {
@@ -51,8 +51,8 @@ export const Default: Story = {
               <Toolbar.Item icon={Strikethrough} tooltip="Strikethrough" />
             </Toolbar.Group>
             <Toolbar.Group>
-              <Toolbar.Item icon={List} tooltip="Bullet List" />
+              <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-              <Toolbar.Item icon={ListOrdered} tooltip="Numbered List" />
+              <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
               <Toolbar.Item icon={Quote} tooltip="Quote" />
             </Toolbar.Group>
             <Toolbar.Group>
@@ -82,8 +82,8 @@ export const WithActiveStates: Story = {
             <Toolbar.Item icon={Underline} tooltip="Underline" shortcut={["Cmd", "U"]} isActive />
           </Toolbar.Group>
           <Toolbar.Group>
-            <Toolbar.Item icon={List} tooltip="Bullet List" />
+            <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-            <Toolbar.Item icon={ListOrdered} tooltip="Numbered List" isActive />
+            <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" isActive />
             <Toolbar.Item icon={Quote} tooltip="Quote" />
           </Toolbar.Group>
           <Toolbar.Group>
@@ -118,8 +118,8 @@ export const CommentToolbar: Story = {
                   <Toolbar.Item icon={Code} tooltip="Code" shortcut={["Cmd", "`"]} />
                 </Toolbar.Group>
                 <Toolbar.Group>
-                  <Toolbar.Item icon={List} tooltip="Bullet List" />
+                  <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-                  <Toolbar.Item icon={ListOrdered} tooltip="Numbered List" />
+                  <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
                 </Toolbar.Group>
               </div>
               <Toolbar.SubmitButton>Comment</Toolbar.SubmitButton>

packages/propel/src/toolbar/toolbar.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { LucideIcon } from "lucide-react";
+import type { ISvgIcons } from "../icons";
 import { Tooltip } from "../tooltip";
 import { cn } from "../utils";
 
@@ -15,7 +16,7 @@ export interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement>
 }
 
 export interface ToolbarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
   isActive?: boolean;
   tooltip?: string;
   shortcut?: string[];