chore: Remove 3rd party dependencies from Custom widget

[rahulbarwal]

Fixes #39584

Description

This was an unnecessary third-party dependency in our code. While we will not prevent anyone from using it in their applications, it is not required in the default templates. Therefore, we are removing it. For further information, please refer to this conversation.

Fixes #39584
or
Fixes Issue URL

Warning

If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.

Automation

/ok-to-test tags="@tag.Sanity, @tag.Widget, @tag.Anvil"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14053696768
Commit: db2573d
Cypress dashboard.
Tags: @tag.Sanity, @tag.Widget, @tag.Anvil
Spec:

---

Tue, 25 Mar 2025 09:07:51 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

• Yes
• No

[coderabbitai]

Walkthrough

This pull request updates several React templates and the custom widget's default application by modifying CSS styles and the component structures. The changes remove external dependencies by redefining components (e.g., replacing a third-party Button and Card with locally defined functional components and native HTML elements) while adjusting CSS properties for better layout and presentation. These updates are implemented across multiple files to standardize the UI components and event handling in the custom widget.

Changes

File(s)	Change Summary
app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/[anvilTemplates/react.ts, react.ts]	Updated CSS styles for classes (.app, .tip-container, .content, .button-container, etc.); replaced imported Card and Markdown components with native div elements; redefined Button as a functional component; adjusted event handlers and disabled state for the Reset button.
app/client/src/widgets/CustomWidget/widget/defaultApp.ts	Enhanced CSS styling (including box-shadow, padding, and border-radius updates); restructured the App function to return a div instead of a Card; removed external component dependencies by defining a local functional Button component.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Button
    participant App
    participant DOM
    User->>Button: Click (Reset/Next Tip)
    Button->>App: Trigger state update
    App->>DOM: Rerender content with updated tip
    DOM-->>User: Display updated UI

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Remove 3rd party dependencies from Custom widget (#39584, #39584)	✅

Possibly related PRs

• fix: antd library package update for custom widget #39574: Involves modifications to the Button component and React structure.
• chore: Refactor WDS custom widget #38038: Alters the structure and functionality of the Button and App components.
• fix: Min width in certain ADS Button usage #37624: Focuses on redefining the Button component and its integration within the application.

Suggested labels

Task, Widgets Product, Custom Widgets, Anvil Pod, ok-to-test, skip-changelog

Suggested reviewers

• ApekshaBhosale
• jacquesikot
• hetunandu

Poem

In lines of code our changes bloom,
Divs replace the Card’s old room,
CSS sings its revamped tune,
Buttons now light up like stars in June,
A widget reborn – new paths to zoom!
🚀🎨
Happy coding through every zoom!

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1183208 and db2573d.

📒 Files selected for processing (3)

• app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts (1 hunks)
• app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts (3 hunks)
• app/client/src/widgets/CustomWidget/widget/defaultApp.ts (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (5)

• GitHub Check: client-build / client-build
• GitHub Check: client-unit-tests / client-unit-tests
• GitHub Check: client-lint / client-lint
• GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
• GitHub Check: client-prettier / prettier-check

🔇 Additional comments (18)

app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts (7)

16-19: Good styling improvements for the app container.

The added CSS properties improve the container's visual presentation with proper padding, box-sizing, font styling, and background color.

---

24-25: Improved text readability.

The added font-size and line-height properties enhance readability of the tip container text.

---

45-50: Well-defined content styling.

The new content class with appropriate text wrapping and sizing properties ensures proper text presentation.

---

57-65: Enhanced button styling and interactions.

The improved button styling with proper cursor, padding, background, and transition properties creates a better user experience.

---

80-87: Good implementation of button states.

The hover and disabled states for the reset button provide appropriate visual feedback.

---

91-95: Clean Button component implementation.

This implementation successfully replaces the third-party dependency with a simple functional component that maintains the same functionality.

---

110-122: Component structure effectively simplified.

The Card and Markdown components have been successfully replaced with standard HTML elements while maintaining the same functionality.

app/client/src/widgets/CustomWidget/widget/defaultApp.ts (6)

9-17: Good consistent styling for the app container.

The styling is consistent with the template files and provides a clean, well-defined container.

---

20-48: Well-structured typography and layout.

The styling for containers, headers and content maintains consistent spacing and typography.

---

55-85: Comprehensive button styling with state management.

The button styling includes proper states for hover, disabled, and active states with smooth transitions.

---

89-93: Clean Button component implementation.

This component successfully replaces the third-party dependency with the same functionality.

---

95-121: Component structure effectively simplified.

The replacement of Card and Markdown components with standard HTML elements maintains functionality while removing dependencies.

---

236-253: Consistent compiled output for the component structure.

The compiled JavaScript maintains the same structure and functionality as the source JSX.

app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts (5)

11-19: Appropriate styling with Anvil-specific theme variables.

The container styling correctly uses Anvil-specific theme variables like --appsmith-theme-border-radius-elevation-3.

---

67-74: Anvil-specific button styling with hover effect.

The primary button correctly uses the Anvil theme variable --appsmith-theme-color-bg-accent with an appropriate hover effect.

---

83-90: Good implementation of interactive states for reset button.

The hover and disabled states for the reset button provide appropriate visual feedback using Anvil theme variables.

---

94-98: Clean Button component implementation.

This component successfully replaces the third-party dependency with the same functionality, consistent with other templates.

---

100-127: Component structure effectively simplified.

The App component has been successfully refactored to use native HTML elements and the custom Button component while maintaining the same functionality.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[rahulbarwal]

/build-deploy-preview skip-tests=true

[github-actions]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/14053738084.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 39894.
recreate: .

[github-actions]

Deploy-Preview-URL: https://ce-39894.dp.appsmith.com