Skip to content

feat(custom): implement SubscriptionTable scaffolding and register global module exports - #1660

Open
abhinavkdeval08-design wants to merge 14 commits into
layer5io:masterfrom
abhinavkdeval08-design:feature/subscription-comparison-table
Open

feat(custom): implement SubscriptionTable scaffolding and register global module exports#1660
abhinavkdeval08-design wants to merge 14 commits into
layer5io:masterfrom
abhinavkdeval08-design:feature/subscription-comparison-table

Conversation

@abhinavkdeval08-design

@abhinavkdeval08-design abhinavkdeval08-design commented Jun 29, 2026

Copy link
Copy Markdown

Description

This PR addresses issue #606 by implementing the missing structural baseline scaffolding for the new SubscriptionTable component pattern wrapper matrix within the Sistent design system (src/custom).

Changes Proposed

  • Created a dedicated src/custom/SubscriptionTable/ directory module.
  • Engineered the core table blueprint inside SubscriptionTable.tsx utilizing strict type definitions (PlanFeature props) to dynamically map features.
  • Injected custom layout extensions inside style.tsx utilizing specialized MUI styled engines and Figma typography token overrides (Qanelas Soft and Open Sans).
  • Registered local endpoints globally via both root module index files (src/custom/index.ts and src/custom/index.tsx) to expose the API interface.

Notes for Reviewers

  • The setup is verified locally and ready for seamless integration. I have already initiated a query on the main tracker thread to obtain the explicit production code reference link from the Meshery Cloud UI repository to finalize concrete subscription tier matrices.

Signed commits

  • Yes, I signed my commits. (DCO check passes)

cc @KhushamBansal @leecalcote @Bhumikagarggg

Summary by CodeRabbit

  • New Features
    • Added a subscription-plan comparison table for Free, Team, and Enterprise plans.
    • Displays feature comparisons using text values and visual availability indicators.
    • Supports optional plan-selection actions with customizable labels.
    • Added responsive horizontal scrolling for narrower screens.
    • Improved light and dark theme compatibility with consistent typography, colors, borders, spacing, and visual hierarchy.

…ule exports

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new SubscriptionTable component to compare free, team, and enterprise subscription plans, along with its custom styled components. The feedback suggests integrating the newly defined custom styled components from style.tsx into the main table component to clean up unused Material-UI imports, and exposing hardcoded UI strings as configurable props to support internationalization (i18n).

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread src/custom/SubscriptionTable/SubscriptionTable.tsx
Comment thread src/custom/SubscriptionTable/SubscriptionTable.tsx
Comment thread src/custom/SubscriptionTable/SubscriptionTable.tsx Outdated
@abhinavkdeval08-design
abhinavkdeval08-design force-pushed the feature/subscription-comparison-table branch from 434a2c2 to b7298c4 Compare June 29, 2026 17:38
…ule exports

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>
@abhinavkdeval08-design
abhinavkdeval08-design force-pushed the feature/subscription-comparison-table branch from 56442e9 to 812e1ac Compare June 29, 2026 17:46

@Bhumikagarggg Bhumikagarggg left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@abhinavkdeval08-design Please review all the suggestions raised by Copilot. If a suggestion is valid, please address it. If not, please reply to the comment explaining why no change is needed so that all comments are resolved.

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>
@abhinavkdeval08-design
abhinavkdeval08-design force-pushed the feature/subscription-comparison-table branch from b1b798c to 43af05b Compare July 6, 2026 06:36
@abhinavkdeval08-design

Copy link
Copy Markdown
Author

@Bhumikagarggg @leecalcote @KhushamBansal
I've made the changes kindly review..

@hortison

Copy link
Copy Markdown
Contributor

@leecalcote @KhushamBansal @Bhumikagarggg kindly review the PR

@abhinavkdeval08-design consider and reply to all feedback offered.

@coderabbitai

coderabbitai Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: acfb4634-a95f-44df-9795-fdf6077db444

📥 Commits

Reviewing files that changed from the base of the PR and between 191ae3b and efd53ac.

📒 Files selected for processing (3)
  • src/custom/SubscriptionTable/SubscriptionTable.test.tsx
  • src/custom/SubscriptionTable/SubscriptionTable.tsx
  • src/index.tsx

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.


📝 Walkthrough

Walkthrough

Adds a themed SubscriptionTable React component with configurable plan labels, feature values, selection callbacks, boolean status icons, tests, and public exports through custom and root module barrels.

Changes

Subscription table

Layer / File(s) Summary
Table contract and themed primitives
src/custom/SubscriptionTable/SubscriptionTable.tsx, src/custom/SubscriptionTable/style.tsx
Defines subscription feature and component prop interfaces. Adds theme-based colors and typography, plus horizontal table scrolling.
Table rendering and plan actions
src/custom/SubscriptionTable/SubscriptionTable.tsx, src/custom/SubscriptionTable/SubscriptionTable.test.tsx
Renders plan headers, action buttons, feature rows, boolean status icons, and text values. Tests rendering, custom labels, and plan-selection callbacks.
Public module exports
src/custom/SubscriptionTable/index.ts, src/custom/index.ts, src/custom/index.tsx, src/index.tsx
Re-exports the component and its public types through subscription-table, custom, and root entry points.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to efd53

This change adds and exports a localized subscription comparison UI component without introducing service, permission, persistence, or deployment behavior changes; no actionable merge-blocking risk remains beyond normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant Consumer
  participant SubscriptionTable
  participant onPlanSelect
  Consumer->>SubscriptionTable: provide features and plan labels
  SubscriptionTable->>Consumer: render plan buttons and feature values
  Consumer->>SubscriptionTable: select a plan
  SubscriptionTable->>onPlanSelect: invoke selected plan type
Loading

Suggested reviewers: bhumikagarggg

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main changes: implementing SubscriptionTable scaffolding and registering its module exports.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 6…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 6 files.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/custom/SubscriptionTable/style.tsx`:
- Around line 13-29: Replace raw colors and font-family/weight overrides with
Sistent theme palette and typography tokens across all affected sites: in
src/custom/SubscriptionTable/style.tsx lines 13-29, update StyledHeaderRow,
StyledTableCell, and FeatureHeaderCell to derive colors and typography from the
theme, including theme.palette.text.primary or its Sistent equivalent; in
src/custom/SubscriptionTable/SubscriptionTable.tsx lines 49-65 and 74-104, apply
the appropriate Sistent typography token to the feature and plan header cells
instead of literal family and weight values.
- Around line 5-10: Update the StyledTableContainer styles to allow horizontal
scrolling on narrow viewports instead of clipping the table with overflow
hidden. Preserve the existing visual styles and ensure the 650px-minimum-width
table remains accessible, including later plan columns.

In `@src/custom/SubscriptionTable/SubscriptionTable.tsx`:
- Around line 40-52: Add an accessible text alternative to both boolean branches
in renderValue: label the CheckIcon for the included state and the CloseIcon for
the excluded state using titleAccess, aria-label, or visually hidden text, while
preserving their existing visual styling and test IDs.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a195d272-9565-414b-9f9a-519c7ff87d0c

📥 Commits

Reviewing files that changed from the base of the PR and between 2bb6802 and 0034b96.

📒 Files selected for processing (5)
  • src/custom/SubscriptionTable/SubscriptionTable.tsx
  • src/custom/SubscriptionTable/index.ts
  • src/custom/SubscriptionTable/style.tsx
  • src/custom/index.ts
  • src/custom/index.tsx

Comment thread src/custom/SubscriptionTable/style.tsx
Comment thread src/custom/SubscriptionTable/style.tsx
Comment thread src/custom/SubscriptionTable/SubscriptionTable.tsx

@KhushamBansal KhushamBansal left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@abhinavkdeval08-design Please resolve merge conflicts.

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>
…cessibility

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>
@abhinavkdeval08-design

Copy link
Copy Markdown
Author

@KhushamBansal @Bhumikagarggg Resolved the merge conflicts with master and addressed all review feedback regarding responsive horizontal overflow, Sistent theme/typography tokens, and accessibility labels (titleAccess). CodeRabbit checks are green. Ready for review and merge!

@PARTH-TUSSLE PARTH-TUSSLE left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @abhinavkdeval08-design , pls reply to all the bot suggestions stating how you addressed that feedback or a valid reason if rejecting it and then click on "resolve conversation".

@abhinavkdeval08-design

Copy link
Copy Markdown
Author

Hi @PARTH-TUSSLE @KhushamBansal @Bhumikagarggg,

All bot suggestions have been addressed (commit 191ae3b) and all review conversations are now resolved.

  • Unused imports cleaned up and custom styled wrappers integrated.
  • Sistent theme typography and semantic palette tokens applied across table cells.
  • i18n support enabled with configurable label props and default fallbacks.
  • Horizontal overflow added for responsive mobile viewports.
  • Accessibility labels (titleAccess) added to boolean indicators.

All DCO and CI checks are passing green. Ready for your final approval and merge!

@PARTH-TUSSLE PARTH-TUSSLE left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @PARTH-TUSSLE @KhushamBansal @Bhumikagarggg,

All bot suggestions have been addressed (commit 191ae3b) and all review conversations are now resolved.

  • Unused imports cleaned up and custom styled wrappers integrated.
  • Sistent theme typography and semantic palette tokens applied across table cells.
  • i18n support enabled with configurable label props and default fallbacks.
  • Horizontal overflow added for responsive mobile viewports.
  • Accessibility labels (titleAccess) added to boolean indicators.

All DCO and CI checks are passing green. Ready for your final approval and merge!

Nope, you still haven't replied to the bot conversations before resolving them ^ ^

@abhinavkdeval08-design

Copy link
Copy Markdown
Author

Hi @PARTH-TUSSLE,

All inline review drafts have been submitted and all bot conversation threads are marked resolved under Files Changed. All checks and DCO are green. Ready for your review and approval!

@PARTH-TUSSLE

Copy link
Copy Markdown
Contributor

Hi @PARTH-TUSSLE,

All inline review drafts have been submitted and all bot conversation threads are marked resolved under Files Changed. All checks and DCO are green. Ready for your review and approval!

Missed this one :)
{60DCC8D3-BBB6-49FF-BD3B-7CF1058BF9B5}

@abhinavkdeval08-design

Copy link
Copy Markdown
Author

@PARTH-TUSSLE Done bro :)

@PARTH-TUSSLE PARTH-TUSSLE left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@PARTH-TUSSLE Done bro :)

Still can't see the reply on it , maybe I'm blind :), anyways I don't wanna be annoying. I reviewed the PR and noticed, since SubscriptionTable is a new public component, can you add an explicit root export in src/index.tsx for SubscriptionTable and its public types (SubscriptionTableProps / PlanFeature)? The repo has a known issue where exports that only come through export * from './custom' can be missing from the generated dist/index.d.ts.

also a small SubscriptionTable.test.tsx covering the basic rendering, boolean/string values, plan selection callback, and custom labels would be good. Nothing too extensive, just enough regression coverage for the new public component.
Other than that, the implementation looks good to me. Once those are addressed(and you've replied to all the bot conversations T-T , I promise this is the last time I'm pointing this out :) ), I'm happy to approve.

…nTable

Signed-off-by: Abhinav Deval <abhinavkdeval08@gmail.com>
@abhinavkdeval08-design

Copy link
Copy Markdown
Author

Hi @PARTH-TUSSLE,

I have pushed the requested updates in commit efd53ac:

  1. Explicit Root Export: Added explicit re-exports for SubscriptionTable and its public types (SubscriptionTableProps, PlanFeature) in src/index.tsx to ensure proper dist/index.d.ts generation.
  2. Unit Tests: Added SubscriptionTable.test.tsx covering title & feature rendering, boolean status indicators, plan selection callbacks, and custom label props.
  3. All bot review conversations under Files Changed are submitted and marked as resolved.

All CI checks and DCO are green. Ready for your final approval!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants