Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Remove 3rd party dependencies from Custom widget (#39894)

Browse Source 
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](https://theappsmith.slack.com/archives/CGBPVEJ5C/p1742841918575179?thread_ts=1742812032.686439&cid=CGBPVEJ5C).


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
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14053696768>
> Commit: db2573d7cc5662e919ad327a768e351447a70899
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14053696768&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Widget, @tag.Anvil`
> Spec:
> <hr>Tue, 25 Mar 2025 09:07:51 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
This commit is contained in:
Rahul Barwal 2025-03-25 14:38:05 +05:30 committed by GitHub
parent a8a831cd47
commit b61b12ec00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 312 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts
View File

@ -8,89 +8,131 @@ export default {
<div id="root"></div>
`,
css: `.app {
justify-content: center;
border: none;
border-radius: var(--appsmith-theme-border-radius-elevation-3);
height: calc(var(--appsmith-ui-height) * 1px);
width: calc(var(--appsmith-ui-width) * 1px);
justify-content: center;
border-radius: var(--appsmith-theme-border-radius-elevation-3);
padding: 29px 25px;
box-sizing: border-box;
font-family: system-ui;
background: #fff;
}
.tip-container {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.571429;
}
.tip-container h2 {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
font-size: 16px;
font-weight: 700;
}
.tip-header {
display: flex;
justify-content: space-between;
align-items: baseline;
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 9px;
}
.tip-header div {
color: #999;
color: #999;
}
.content {
white-space: pre-wrap;
word-break: break-word;
font-size: 14px;
line-height: 1.571429;
}
.button-container {
text-align: right;
text-align: right;
padding-top: 4px;
}
.button-container button {
margin: 0 10px;
border-radius: var(--appsmith-theme-border-radius-elevation-3);
cursor: pointer;
border-radius: var(--appsmith-theme-border-radius-elevation-3);
padding: 6px 16px;
background: none;
height: auto;
transition: all 0.3s ease;
}
.button-container button.primary {
background: var(--appsmith-theme-color-bg-accent) !important;
background: var(--appsmith-theme-color-bg-accent) !important;
color: #fff;
border: 1px solid var(--appsmith-theme-color-bg-accent) !important;
}
.button-container button.primary:hover {
opacity: 0.8;
}
.button-container button.reset {
color: var(--appsmith-theme-color-bg-accent) !important;
border-color: var(--appsmith-theme-color-bg-accent) !important;
border: 1px solid #999;
color: #999;
outline: none;
box-shadow: none;
}
.button-container button.reset:hover:not(:disabled) {
color: var(--appsmith-theme-color-bg-accent);
border-color: var(--appsmith-theme-color-bg-accent);
}
.button-container button.reset:disabled {
cursor: default;
}`,
js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'
import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'
import { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'
import Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm'
const Button = ({ children, className, ...props }) => (
<button className={className} {...props}>
{children}
</button>
);
function App() {
const [currentIndex, setCurrentIndex] = React.useState(0);
const [currentIndex, setCurrentIndex] = React.useState(0);
const handleNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);
};
const handleNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);
};
const handleReset = () => {
setCurrentIndex(0);
appsmith.triggerEvent("onResetClick");
};
const handleReset = () => {
setCurrentIndex(0);
appsmith.triggerEvent("onResetClick");
};
return (
<Card className="app">
<div className="tip-container">
<div className="tip-header">
<h2>Custom Widget</h2>
<div>{currentIndex + 1} / {appsmith.model.tips.length} </div>
</div>
<Markdown>{appsmith.model.tips[currentIndex]}</Markdown>
</div>
<div className="button-container">
<Button className="primary" onClick={handleNext} type="primary">Next Tip</Button>
<Button onClick={handleReset}>Reset</Button>
</div>
</Card>
);
return (
<div className="app">
<div className="tip-container">
<div className="tip-header">
<h2>Custom Widget</h2>
<div>{currentIndex + 1} / {appsmith.model.tips.length}</div>
</div>
<div className="content">{appsmith.model.tips[currentIndex]}</div>
</div>
<div className="button-container">
<Button className="primary" onClick={handleNext}>Next Tip</Button>
<Button className="reset" disabled={currentIndex === 0} onClick={handleReset}>Reset</Button>
</div>
</div>
);
}
appsmith.onReady(() => {
/*
* This handler function will get called when parent application is ready.
* Initialize your component here
* more info - ${CUSTOM_WIDGET_ONREADY_DOC_URL}
*/
reactDom.render(<App />, document.getElementById("root"));
/*
* This handler function will get called when parent application is ready.
* Initialize your component here
* more info - ${CUSTOM_WIDGET_ONREADY_DOC_URL}
*/
reactDom.render(<App />, document.getElementById("root"));
});`,
},
};

65
app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts
View File

@ -13,14 +13,20 @@ export default {
justify-content: center;
border-radius: var(--appsmith-theme-borderRadius);
box-shadow: var(--appsmith-theme-boxShadow);
padding: 29px 25px;
box-sizing: border-box;
font-family: system-ui;
background: #fff;
}
.tip-container {
margin-bottom: 20px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.571429;
}
.tip-container h2 {
margin-bottom: 20px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
}
@ -29,33 +35,64 @@ export default {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 9px;
}
.tip-header div {
color: #999;
}
.content {
white-space: pre-wrap;
word-break: break-word;
font-size: 14px;
line-height: 1.571429;
}
.button-container {
text-align: right;
padding-top: 4px;
}
.button-container button {
margin: 0 10px;
margin: 0 10px;
cursor: pointer;
border-radius: var(--appsmith-theme-borderRadius);
padding: 6px 16px;
background: none;
height: auto;
transition: all 0.3s ease;
}
.button-container button.primary {
background: var(--appsmith-theme-primaryColor) !important;
color: #fff;
border: 1px solid var(--appsmith-theme-primaryColor) !important;
}
.button-container button.reset {
color: var(--appsmith-theme-primaryColor) !important;
border-color: var(--appsmith-theme-primaryColor) !important;
border: 1px solid #999;
color: #999;
outline: none;
box-shadow: none;
}
.button-container button.reset:hover:not(:disabled) {
color: var(--appsmith-theme-primaryColor);
border-color: var(--appsmith-theme-primaryColor);
}
.button-container button.reset:disabled {
cursor: default;
}`,
js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'
import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'
import { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'
import Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm'
const Button = ({ children, className, ...props }) => (
<button className={className} {...props}>
{children}
</button>
);
function App() {
const [currentIndex, setCurrentIndex] = React.useState(0);
@ -70,20 +107,20 @@ function App() {
};
return (
<Card className="app">
<div className="app">
<div className="tip-container">
<div className="tip-header">
<h2>Custom Widget</h2>
<div>{currentIndex + 1} / {appsmith.model.tips.length} </div>
<div>{currentIndex + 1} / {appsmith.model.tips.length}</div>
</div>
<Markdown>{appsmith.model.tips[currentIndex]}</Markdown>
<div className="content">{appsmith.model.tips[currentIndex]}</div>
</div>
<div className="button-container">
<Button className="primary" onClick={handleNext} type="primary">Next Tip</Button>
<Button onClick={handleReset}>Reset</Button>
<Button className="primary" onClick={handleNext}>Next Tip</Button>
<Button className="reset" disabled={currentIndex === 0} onClick={handleReset}>Reset</Button>
</div>
</Card>
);
</div>
);
}
appsmith.onReady(() => {

268
app/client/src/widgets/CustomWidget/widget/defaultApp.ts
View File

@ -6,91 +6,128 @@ export default {
<div id="root"></div>
`,
css: `.app {
width: calc(1px * var(--appsmith-ui-width));
height: calc(var(--appsmith-ui-height) * 1px);
width: calc(var(--appsmith-ui-width) * 1px);
justify-content: center;
border-radius: 0px;
border: none;
.tip-container {
margin-bottom: 20px;
h2 {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
}
.tip-header {
display: flex;
justify-content: space-between;
align-items: baseline;
div {
color: #999;
}
}
}
.button-container {
text-align: right;
button {
margin: 0 10px;
border-radius: var(--appsmith-theme-borderRadius) !important;
&.primary {
background: var(--appsmith-theme-primaryColor) !important;
}
&.reset:not([disabled]) {
color: var(--appsmith-theme-primaryColor) !important;
border-color: var(--appsmith-theme-primaryColor) !important;
}
}
}
border-radius: var(--appsmith-theme-borderRadius);
box-shadow: var(--appsmith-theme-boxShadow);
padding: 29px 25px;
box-sizing: border-box;
font-family: system-ui;
background: #fff;
}
`,
.tip-container {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.571429;
}
.tip-container h2 {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
}
.tip-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 9px;
}
.tip-header div {
color: #999;
}
.content {
white-space: pre-wrap;
word-break: break-word;
font-size: 14px;
line-height: 1.571429;
}
.button-container {
text-align: right;
padding-top: 4px;
}
.button-container button {
margin: 0 10px;
cursor: pointer;
border-radius: var(--appsmith-theme-borderRadius);
padding: 6px 16px;
background: none;
height: auto;
transition: all 0.3s ease;
}
.button-container button.primary {
background: var(--appsmith-theme-primaryColor) !important;
color: #fff;
border: 1px solid var(--appsmith-theme-primaryColor) !important;
}
.button-container button.reset {
border: 1px solid #999;
color: #999;
outline: none;
box-shadow: none;
}
.button-container button.reset:hover:not(:disabled) {
color: var(--appsmith-theme-primaryColor);
border-color: var(--appsmith-theme-primaryColor);
}
.button-container button.reset:disabled {
cursor: default;
}`,
js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'
import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'
import { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'
import Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';
const Button = ({ children, className, ...props }) => (
<button className={className} {...props}>
{children}
</button>
);
function App() {
const [currentIndex, setCurrentIndex] = React.useState(0);
const [currentIndex, setCurrentIndex] = React.useState(0);
const handleNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);
};
const handleNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);
};
const handleReset = () => {
setCurrentIndex(0);
appsmith.triggerEvent("onResetClick");
};
const handleReset = () => {
setCurrentIndex(0);
appsmith.triggerEvent("onResetClick");
};
return (
<Card className="app">
<div className="tip-container">
<div className="tip-header">
<h2>Custom Widget</h2>
<div>{currentIndex + 1} / {appsmith.model.tips.length} </div>
</div>
<Markdown>{appsmith.model.tips[currentIndex]}</Markdown>
</div>
<div className="button-container">
<Button className="primary" onClick={handleNext} type="primary">Next Tip</Button>
<Button className="reset" disabled={currentIndex === 0} onClick={handleReset}>Reset</Button>
</div>
</Card>
);
return (
<div className="app">
<div className="tip-container">
<div className="tip-header">
<h2>Custom Widget</h2>
<div>{currentIndex + 1} / {appsmith.model.tips.length}</div>
</div>
<div className="content">{appsmith.model.tips[currentIndex]}</div>
</div>
<div className="button-container">
<Button className="primary" onClick={handleNext}>Next Tip</Button>
<Button className="reset" disabled={currentIndex === 0} onClick={handleReset}>Reset</Button>
</div>
</div>
);
}
appsmith.onReady(() => {
/*
/*
* This handler function will get called when parent application is ready.
* Initialize your component here
* more info - ${CUSTOM_WIDGET_ONREADY_DOC_URL}
*/
reactDom.render(<App />, document.getElementById("root"));
reactDom.render(<App />, document.getElementById("root"));
});`,
},
srcDoc: {
@ -98,53 +135,94 @@ appsmith.onReady(() => {
<div id="root"></div>
`,
css: `.app {
width: calc(var(--appsmith-ui-width) * 1px);
justify-content: center;
border-radius: 0px;
border: none;
height: calc(var(--appsmith-ui-height) * 1px);
width: calc(var(--appsmith-ui-width) * 1px);
justify-content: center;
border-radius: var(--appsmith-theme-borderRadius);
box-shadow: var(--appsmith-theme-boxShadow);
padding: 29px 25px;
box-sizing: border-box;
font-family: system-ui;
background: #fff;
}
.tip-container {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.571429;
}
.tip-container h2 {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
font-size: 16px;
font-weight: 700;
}
.tip-header {
display: flex;
justify-content: space-between;
align-items: baseline;
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 9px;
}
.tip-header div {
color: #999;
color: #999;
}
.content {
white-space: pre-wrap;
word-break: break-word;
font-size: 14px;
line-height: 1.571429;
}
.button-container {
text-align: right;
text-align: right;
padding-top: 4px;
}
.button-container button {
margin: 0 10px;
border-radius: var(--appsmith-theme-borderRadius) !important;
cursor: pointer;
border-radius: var(--appsmith-theme-borderRadius);
padding: 6px 16px;
background: none;
height: auto;
transition: all 0.3s ease;
}
.button-container button.primary {
background: var(--appsmith-theme-primaryColor) !important;
background: var(--appsmith-theme-primaryColor) !important;
color: #fff;
border: 1px solid var(--appsmith-theme-primaryColor) !important;
}
.button-container button.reset:not([disabled]) {
color: var(--appsmith-theme-primaryColor) !important;
border-color: var(--appsmith-theme-primaryColor) !important;
.button-container button.reset {
border: 1px solid #999;
color: #999;
outline: none;
box-shadow: none;
}
.button-container button.reset:hover:not(:disabled) {
color: var(--appsmith-theme-primaryColor);
border-color: var(--appsmith-theme-primaryColor);
}
.button-container button.reset:disabled {
cursor: default;
}`,
js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';
import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';
import { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm';
import Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';
const Button = ({
children,
className,
...props
}) => /*#__PURE__*/React.createElement("button", {
className: className,
...props
}, children);
function App() {
const [currentIndex, setCurrentIndex] = React.useState(0);
@ -155,24 +233,26 @@ function App() {
setCurrentIndex(0);
appsmith.triggerEvent("onResetClick");
};
return /*#__PURE__*/React.createElement(Card, {
className: "app",
return /*#__PURE__*/React.createElement("div", {
className: "app"
}, /*#__PURE__*/React.createElement("div", {
className: "tip-container"
}, /*#__PURE__*/React.createElement("div", {
className: "tip-header"
}, /*#__PURE__*/React.createElement("h2", null, "Custom Widget"), /*#__PURE__*/React.createElement("div", null, currentIndex + 1, " / ", appsmith.model.tips.length, " ")), /*#__PURE__*/React.createElement(Markdown, null, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement("div", {
}, /*#__PURE__*/React.createElement("h2", null, "Custom Widget"), /*#__PURE__*/React.createElement("div", null, currentIndex + 1, " / ", appsmith.model.tips.length)), /*#__PURE__*/React.createElement("div", {
className: "content"
}, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement("div", {
className: "button-container"
}, /*#__PURE__*/React.createElement(Button, {
className: "primary",
onClick: handleNext,
type: "primary"
onClick: handleNext
}, "Next Tip"), /*#__PURE__*/React.createElement(Button, {
className: "reset",
disabled: currentIndex === 0,
className: "reset",
disabled: currentIndex === 0,
onClick: handleReset
}, "Reset")));
}
appsmith.onReady(() => {
reactDom.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
});`,