[WIKI-563] refactor: subscription styles #7444
Conversation
WalkthroughThe changes update import paths for several billing-related utility functions across multiple components, shifting them from local paths to the shared Changes
Sequence Diagram(s)sequenceDiagram
participant Component as Billing Component
participant UI as @plane/ui
Component->>UI: Import utility function (e.g., getSubscriptionBackgroundColor)
UI-->>Component: Provide utility function
Estimated code review effort1 (<30 minutes) Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/ui/src/index.ts (1)
38-38: Barrel export added – keep an eye on bundle sizeWildcard-exporting
./billingis fine, but may pull more code than necessary if the bundler’s tree-shaking is imperfect. Consider named re-exports if size ever becomes an issue.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx(1 hunks)apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx(1 hunks)apps/web/ce/components/workspace/billing/root.tsx(1 hunks)apps/web/core/components/license/modal/card/base-paid-plan-card.tsx(1 hunks)apps/web/core/components/license/modal/card/checkout-button.tsx(1 hunks)apps/web/core/components/license/modal/card/plan-upgrade.tsx(2 hunks)apps/web/core/components/license/modal/card/talk-to-sales.tsx(1 hunks)apps/web/core/components/workspace/billing/comparison/feature-detail.tsx(1 hunks)packages/ui/src/billing/index.ts(1 hunks)packages/ui/src/billing/subscription.ts(0 hunks)packages/ui/src/index.ts(1 hunks)
💤 Files with no reviewable changes (1)
- packages/ui/src/billing/subscription.ts
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
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: 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: 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/`.
apps/web/ce/components/workspace/billing/root.tsx (1)
Learnt from: lifeiscontent
PR: makeplane/plane#7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
apps/web/core/components/license/modal/card/checkout-button.tsx (2)
Learnt from: lifeiscontent
PR: makeplane/plane#7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
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.
apps/web/core/components/license/modal/card/talk-to-sales.tsx (1)
Learnt from: lifeiscontent
PR: makeplane/plane#7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx (1)
Learnt from: lifeiscontent
PR: makeplane/plane#7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
apps/web/core/components/workspace/billing/comparison/feature-detail.tsx (1)
5-5: Import consolidation looks goodSwitching to the central
@plane/uibarrel keeps the component decoupled from internal folder structure and avoids duplication.apps/web/ce/components/workspace/billing/root.tsx (1)
7-7: 👍 Consistent use of the new UI barrelImport path updated correctly;
getSubscriptionTextColoris still used (line 52) so no dead code concerns.apps/web/core/components/license/modal/card/talk-to-sales.tsx (1)
8-8: No stale getButtonStyling imports remainA search across the codebase found zero imports of
getButtonStylingfrom@plane/utils; all usages now correctly import from@plane/ui.apps/web/core/components/license/modal/card/base-paid-plan-card.tsx (1)
10-10: Good move to shared UI packageCentralising these helpers under
@plane/uireduces cross-layer coupling and keeps plan-related styling in one place.packages/ui/src/billing/index.ts (1)
1-1: LGTM! Clean barrel export for billing utilities.This export statement correctly enables the centralization of billing utilities by making subscription-related functions available through the
@plane/uipackage, supporting the refactoring objectives.apps/web/core/components/license/modal/card/checkout-button.tsx (1)
6-6: LGTM! Clean import consolidation.The import of
getUpgradeButtonStylehas been successfully consolidated from a local path to the shared@plane/uipackage, aligning with the refactoring objectives. The function usage remains unchanged.apps/web/core/components/license/modal/card/plan-upgrade.tsx (1)
8-8: LGTM! Clean import consolidation.The import of
getDiscountPillStylehas been successfully moved from a local path to the shared@plane/uipackage, following the refactoring pattern.apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx (1)
13-13: LGTM! Clean import consolidation.The import of
getUpgradeButtonStylehas been successfully consolidated from a local path to the shared@plane/uipackage, following the refactoring pattern. The function usage remains unchanged.apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx (1)
5-5: LGTM! Clean import consolidation.The imports of
getSubscriptionBackgroundColorandgetDiscountPillStylehave been successfully moved from a local path to the shared@plane/uipackage, following the refactoring pattern. Both functions are used correctly in the component.
iam-vipin
added
🌐web
* refactor: billing UI * refactor : fix typo
4 participants
Description
This PR put all the subscription related styles in a UI package so that it can be used in editor and spaces without code duplication.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit