fix: storybook build error

[sriramveeraghanta]

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

Refactor

• Updated internal icon module organization across the UI component library for improved code structure and maintainability.

[coderabbitai]

Walkthrough

Import paths for icon components are updated from external package reference @plane/propel/icons to local relative paths ../icons across seven files in the propel package. No functional or behavioral changes; module resolution only.

Changes

Cohort / File(s)	Change Summary
Icon import path updates packages/propel/src/calendar/root.tsx, packages/propel/src/collapsible/collapsible.stories.tsx, packages/propel/src/context-menu/context-menu.stories.tsx, packages/propel/src/dialog/dialog.stories.tsx, packages/propel/src/emoji-icon-picker/lucide-icons.tsx, packages/propel/src/menu/menu.tsx, packages/propel/src/popover/popover.stories.tsx	Import statements for icon components (ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CloseIcon) changed from @plane/propel/icons to relative module path ../icons.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Highly repetitive, single-pattern change applied consistently across all 7 files
• No logic modifications, no public API changes, no runtime behavioral impact
• Straightforward module resolution path substitution

Poem

🐰 Icons hop from distant shores,
To folders local, right next door!
Relative paths now guide the way,
Propel's components dance and play! ✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description is largely incomplete. While the "Type of Change" section is present with the bug fix checkbox marked, the description is missing critical sections required by the template: the main Description section explaining what was changed and why is entirely absent, Test Scenarios are not provided, and References are missing. A pull request description should minimally include a detailed description of the changes to help reviewers understand the motivation and scope of the fix.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "fix: storybook build error" is directly related to the main changes in this pull request. The changeset consists of updating icon import paths across multiple storybook story files (and related components), changing from "@plane/propel/icons" to "../icons". This type of import path change is a common fix for module resolution and build issues in storybook environments. The title accurately conveys the nature of the fix without being vague or overly generic, allowing a developer scanning the repository history to understand the primary intent of this change.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-storybook-build

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e8bdc47 and 95cd40e.

📒 Files selected for processing (7)

• packages/propel/src/calendar/root.tsx (1 hunks)
• packages/propel/src/collapsible/collapsible.stories.tsx (1 hunks)
• packages/propel/src/context-menu/context-menu.stories.tsx (1 hunks)
• packages/propel/src/dialog/dialog.stories.tsx (1 hunks)
• packages/propel/src/emoji-icon-picker/lucide-icons.tsx (1 hunks)
• packages/propel/src/menu/menu.tsx (1 hunks)
• packages/propel/src/popover/popover.stories.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (4)

📓 Common learnings

Learnt from: mathalav55
PR: makeplane/plane#6107
File: web/ce/components/workspace-notifications/sidebar/notification-card/options/archive.tsx:11-14
Timestamp: 2024-11-28T07:02:54.664Z
Learning: When components are still located in `core`, it's appropriate for files to import them using `@/components/...`, and the migration to the new import paths is not necessary in such cases.

Learnt from: lifeiscontent
PR: makeplane/plane#7888
File: packages/propel/src/collapsible/collapsible.stories.tsx:4-4
Timestamp: 2025-10-06T01:44:38.472Z
Learning: In Storybook v9, imports use bare paths instead of scoped packages. For example, `import { useArgs } from "storybook/preview-api"` is correct (not `storybook/preview-api`). This applies to other Storybook modules as well - the scoped storybook/* packages were consolidated into bare "storybook/*" imports.

Learnt from: vamsikrishnamathala
PR: makeplane/plane#7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making imports like `@/plane-web/hooks/use-notification-preview` correctly resolve to files in `web/ce/hooks/`.

Learnt from: mathalav55
PR: makeplane/plane#6107
File: web/ce/components/workspace-notifications/sidebar/notification-card/options/read.tsx:11-12
Timestamp: 2024-11-28T07:02:15.514Z
Learning: Some components are still in core and have not been moved yet, so their import paths remain the same.

Learnt from: lifeiscontent
PR: makeplane/plane#7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.

Learnt from: lifeiscontent
PR: makeplane/plane#7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.

📚 Learning: 2025-10-06T01:44:38.472Z

Learnt from: lifeiscontent
PR: makeplane/plane#7888
File: packages/propel/src/collapsible/collapsible.stories.tsx:4-4
Timestamp: 2025-10-06T01:44:38.472Z
Learning: In Storybook v9, imports use bare paths instead of scoped packages. For example, `import { useArgs } from "storybook/preview-api"` is correct (not `storybook/preview-api`). This applies to other Storybook modules as well - the scoped storybook/* packages were consolidated into bare "storybook/*" imports.

Applied to files:

• packages/propel/src/dialog/dialog.stories.tsx
• packages/propel/src/popover/popover.stories.tsx
• packages/propel/src/collapsible/collapsible.stories.tsx
• packages/propel/src/calendar/root.tsx
• packages/propel/src/context-menu/context-menu.stories.tsx

📚 Learning: 2025-10-06T01:45:11.248Z

Learnt from: lifeiscontent
PR: makeplane/plane#7888
File: packages/propel/src/table/table.stories.tsx:1-1
Timestamp: 2025-10-06T01:45:11.248Z
Learning: When using Storybook with React + Vite framework, Meta and StoryObj types should be imported from "storybook/react-vite", not from "storybook/react". This is the correct pattern per Storybook's official documentation for framework-specific type imports.

Applied to files:

• packages/propel/src/dialog/dialog.stories.tsx
• packages/propel/src/popover/popover.stories.tsx
• packages/propel/src/collapsible/collapsible.stories.tsx
• packages/propel/src/context-menu/context-menu.stories.tsx

📚 Learning: 2025-10-09T20:42:31.843Z

Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.

Applied to files:

• packages/propel/src/popover/popover.stories.tsx
• packages/propel/src/menu/menu.tsx
• packages/propel/src/calendar/root.tsx

🔇 Additional comments (7)

packages/propel/src/calendar/root.tsx (1)

5-5: LGTM - Import path correctly updated.

The import path change from the external package to a local relative module is correct and aligns with the PR objective to fix the Storybook build error.

packages/propel/src/popover/popover.stories.tsx (1)

4-4: LGTM - Import path correctly updated.

The import path change is consistent with the build fix pattern applied across the propel package.

packages/propel/src/context-menu/context-menu.stories.tsx (1)

3-3: LGTM - Import path correctly updated.

The import path change is consistent with the Storybook build fix.

packages/propel/src/dialog/dialog.stories.tsx (1)

4-4: LGTM - Import path correctly updated.

The import path change is consistent with the build fix pattern.

packages/propel/src/emoji-icon-picker/lucide-icons.tsx (1)

154-154: LGTM - Import path correctly updated.

The import path change for all four chevron icons is consistent with the Storybook build fix.

packages/propel/src/collapsible/collapsible.stories.tsx (1)

4-4: LGTM - Import path correctly updated.

The import path change is consistent with the build fix pattern applied across all Storybook files.

packages/propel/src/menu/menu.tsx (1)

4-4: Approve - All required icons are properly exported and accessible.

The verification confirms that ChevronDownIcon and ChevronRightIcon (and all other required icons) are exported from the local icons module. The relative import path "../icons" correctly resolves from the menu component's location. This change successfully completes the refactoring from external package references to local module imports.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull Request Overview

This PR refactors icon imports within the @plane/propel package to use relative imports instead of the package's public export path. This change improves internal module resolution by treating icons as internal dependencies rather than importing from the package's public API.

• Changed icon imports from @plane/propel/icons to relative ../icons paths
• Applied consistently across story files and component files
• Affects 7 files across different component directories

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/propel/src/popover/popover.stories.tsx	Updated CloseIcon import to use relative path
packages/propel/src/menu/menu.tsx	Updated ChevronDownIcon and ChevronRightIcon imports to use relative path
packages/propel/src/emoji-icon-picker/lucide-icons.tsx	Updated chevron icon imports to use relative path
packages/propel/src/dialog/dialog.stories.tsx	Updated CloseIcon import to use relative path
packages/propel/src/context-menu/context-menu.stories.tsx	Updated ChevronRightIcon import to use relative path
packages/propel/src/collapsible/collapsible.stories.tsx	Updated ChevronDownIcon import to use relative path
packages/propel/src/calendar/root.tsx	Updated ChevronLeftIcon import to use relative path

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.