binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* fix: resolve circular dependency crashes in storybook stories

* fix: toolbar circular dependency fix and code refactor
This commit is contained in:
Anmol Singh Bhatia 2025-11-11 19:29:16 +05:30 • committed by GitHub
parent f8a9a1576d
commit 0b78e03055
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 14 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/propel/src/collapsible/collapsible.stories.tsx
View file

@ -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 = {

2
packages/propel/src/context-menu/context-menu.stories.tsx
View file

@ -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.

2
packages/propel/src/dialog/dialog.stories.tsx
View file

@ -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 = {

2
packages/propel/src/popover/popover.stories.tsx
View file

@ -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.

2
packages/propel/src/tabs/tabs.stories.tsx
View file

@ -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 = {

14
packages/propel/src/toolbar/toolbar.stories.tsx
View file

@ -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={ListOrdered} tooltip="Numbered List" />
<Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
<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={ListOrdered} tooltip="Numbered List" isActive />
<Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
<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={ListOrdered} tooltip="Numbered List" />
<Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
<Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
</Toolbar.Group>
</div>
<Toolbar.SubmitButton>Comment</Toolbar.SubmitButton>

3
packages/propel/src/toolbar/toolbar.tsx
View file

@ -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[];