chore: Input morphing (#35845)
/ok-to-test tags="@tag.Widget" <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added new input widgets: Email, Password, Number, and Multiline. - Enhanced configuration options for phone and currency inputs. - **Bug Fixes** - Improved type handling for input properties, ensuring better validation and reliability. - **Documentation** - Updated widget exports for better modularity and usage across the application. - **Chores** - Introduced new constants to support the latest input widget types in the application. <!-- end of auto-generated comment: release notes by coderabbit.ai --> <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10572140876> > Commit: a5c4b41eb615a6c655439f977fc0442cf0e0a237 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10572140876&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Widget` > Spec: > <hr>Tue, 27 Aug 2024 06:28:05 UTC <!-- end of auto-generated comment: Cypress test results --> --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
This commit is contained in:
Pawan Kumar
GitHub
parent
c79b62e536
commit
68e1bcf9fa
|
|
@ -6,11 +6,11 @@
|
|||
"main": "src/index.ts",
|
||||
"scripts": {
|
||||
"build": "yarn cleanup && figmagic && yarn optimize-icons && yarn generate-components && yarn generate-index && yarn generate-stories && yarn prettier . --write --log-level=silent",
|
||||
"cleanup": "ts-node ./src/utils/cleanup.ts",
|
||||
"optimize-icons": "ts-node ./src/utils/optimizeIcons.ts",
|
||||
"generate-components": "ts-node ./src/utils/generateComponents.ts",
|
||||
"generate-index": "ts-node ./src/utils/generateIndex.ts",
|
||||
"generate-stories": "ts-node ./src/utils/generateStories.ts",
|
||||
"cleanup": "npx ts-node ./src/utils/cleanup.ts",
|
||||
"optimize-icons": "npx ts-node ./src/utils/optimizeIcons.ts",
|
||||
"generate-components": "npx ts-node ./src/utils/generateComponents.ts",
|
||||
"generate-index": "npx ts-node ./src/utils/generateIndex.ts",
|
||||
"generate-stories": "npx ts-node ./src/utils/generateStories.ts",
|
||||
"lint": "yarn g:lint",
|
||||
"prettier": "yarn g:prettier"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const EmailInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M6.5 8.5v-1a1 1 0 0 0-1-1v0a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1zm0 0h.667c.736 0 1.333-.597 1.333-1.333v0A2.667 2.667 0 0 0 5.833 4.5H5.5a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h2"/></svg>;
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
import React from "react";
|
||||
export const InlineButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="square" stroke-opacity=".25" d="M8.5 8.5v1a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-1M7.5 8.5v1a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-1"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 3.5h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2M2.5 3.5h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2"/></svg>;
|
||||
export const InlineButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m11.5 7.5 1 1 1-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="m3.5 8.5 2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="M5.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/></svg>;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
import React from "react";
|
||||
export const InputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;
|
||||
export const InputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7M14.5 7.5l-1 1-1-1"/></svg>;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const MultilineInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 7.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 1.5h-12a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M3.5 12v-2a.5.5 0 0 1 .5-.5h2a1.5 1.5 0 0 1 0 3H4a.5.5 0 0 1-.5-.5Z"/></svg>;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const NumberInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M3.5 9.5h1m1 0h-1m-1-3 1-1v4M9.5 9.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M7.5 9.5v.01"/></svg>;
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
import React from "react";
|
||||
export const ParagraphIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7"/></svg>;
|
||||
export const ParagraphIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" d="M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7"/></svg>;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const PasswordInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" stroke-width="2.1" d="M4 7h.01M7 7h.01M10 7h.01"/></svg>;
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
import React from "react";
|
||||
export const ToolbarButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m3.5 7.5 1 1 1-2M9.5 8.5l2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 3.5h-10a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>;
|
||||
export const ToolbarButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#000" fill-rule="evenodd" d="M5 5.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H4v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H5zM13.854 5.854a.5.5 0 0 0-.708-.708l-3 3a.5.5 0 0 0 .708.708zM9.775 9.765a.375.375 0 1 0-.53-.53l-.01.01a.375.375 0 0 0 .53.53z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" d="M13.5 3.5h-11a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const EmailInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M21.5 40.5H19a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v3.5Zm0 0 1.026.342a1.5 1.5 0 0 0 1.974-1.423V36.5a4 4 0 0 0-4-4h-2a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4H23"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
import React from "react";
|
||||
export const InlineButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18.5 37.5 3 3 5-5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 35 6 6m0-6-6 6"/></svg>;
|
||||
export const InlineButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m45.5 37.5 3 3 5-5"/><path stroke="#6A7585" stroke-linecap="round" d="m20 35 6 6m0-6-6 6"/></svg>;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
import React from "react";
|
||||
export const KeyValueThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M35 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 35 43.146V42.5a2 2 0 0 0-2-2h-3M38 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M38 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;
|
||||
export const KeyValueThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M34.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M37.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M37.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const MultilineInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="41" x="8.5" y="14.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M49.5 23.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v0M14.5 49.5h4a3 3 0 0 0 3-3v-6a3 3 0 0 0-3-3h-4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1ZM33.5 40.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v3m8 3v0a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-3m0 0h5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M28.5 20.5h5c1.657 0 3 .843 3 2.5s-1.343 2.5-3 2.5h-4M29.5 25.5h5c1.657 0 3 1.843 3 3.5s-1.343 3.5-3 3.5h-6M29.5 20.5v12M14.5 32.5l1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 49.5h2m2 0h-2m0 0v12m-2 0h4"/><path stroke="#CC3D00" stroke-linecap="round" d="M37.5 49.5v-6m7-6h-4a3 3 0 0 0-3 3v3m0 0h4"/></svg>;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const NumberInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-width="1.25" d="M23.5 43.5h.01"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M26 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M33.5 33.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M33.5 43.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const PasswordInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/><path fill="#CC3D00" fill-rule="evenodd" d="M17 34.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L16 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L17.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L17 36.617zm8 0a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L24 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L25.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L25 36.617zm7.5-.5a.5.5 0 0 1 .5.5v2.117l1.743-1.046a.5.5 0 0 1 .514.858L33.472 37.5l1.785 1.071a.5.5 0 1 1-.514.858L33 38.383V40.5a.5.5 0 1 1-1 0v-2.117l-1.743 1.046a.5.5 0 1 1-.514-.858l1.785-1.071-1.785-1.071a.5.5 0 1 1 .514-.858L32 36.617V34.5a.5.5 0 0 1 .5-.5m8.5.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L40 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L41.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L41 36.617z" clip-rule="evenodd"/></svg>;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import React from "react";
|
||||
export const SelectThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m56.5 36.5-3 3-3-3"/></svg>;
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
import React from "react";
|
||||
export const StatsBoxThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M29 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 29 43.146V42.5a2 2 0 0 0-2-2h-3M32 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M32 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>;
|
||||
export const StatsBoxThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M28.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M31.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M31.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
import React from "react";
|
||||
export const ToolbarButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="19" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="18" height="16" x="27.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path fill="#CC3D00" d="M19.5 43.5v.5h.5v-.5zm-9 0H10v.5h.5zm4.5-10 .332-.374a.5.5 0 0 0-.664 0zm-1.5 10v.5h.5v-.5zm0-4V39H13v.5zm3 0h.5V39h-.5zm0 4H16v.5h.5zm2.664-6.298.332-.374zm-8.328 0-.332-.374zM11 43.5v-5.551h-1v5.55zm8-5.551v5.55h1v-5.55zm-7.832-.374 4.164-3.701-.664-.748-4.164 3.702zm3.5-3.701 4.164 3.701.665-.747-4.165-3.702zM13.5 43h-3v1h3zm.5.5v-4h-1v4zm-.5-3.5h3v-1h-3zm6 3h-3v1h3zM16 39.5v4h1v-4zm4-1.551a1.5 1.5 0 0 0-.503-1.121l-.665.747a.5.5 0 0 1 .168.374zm-9 0a.5.5 0 0 1 .168-.374l-.664-.747a1.5 1.5 0 0 0-.504 1.12z"/><circle cx="36.5" cy="38.5" r="5" stroke="#6A7585"/><path stroke="#6A7585" stroke-linecap="round" d="M34.5 38.5h4M36.5 40.5v-4"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/></svg>;
|
||||
export const ToolbarButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="18" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M10.5 38.5h8M14.5 42.5v-8"/><rect width="18" height="16" x="26.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m38 35-5.5 5.5 1 1L39 36a.707.707 0 0 0-1-1"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/><path fill="#6A7585" stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="m32 41.5.5.5-1 .5z"/></svg>;
|
||||
|
|
|
|||
1
app/client/packages/icons/src/icons/Icons/EmailInput.svg
Normal file
1
app/client/packages/icons/src/icons/Icons/EmailInput.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M6.5 8.5v-1a1 1 0 0 0-1-1v0a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1zm0 0h.667c.736 0 1.333-.597 1.333-1.333v0A2.667 2.667 0 0 0 5.833 4.5H5.5a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h2"/></svg>
|
||||
|
After Width: | Height: | Size: 536 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="square" stroke-opacity=".25" d="M8.5 8.5v1a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-1M7.5 8.5v1a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-1"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 3.5h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2M2.5 3.5h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m11.5 7.5 1 1 1-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="m3.5 8.5 2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="M5.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/></svg>
|
||||
|
Before Width: | Height: | Size: 461 B After Width: | Height: | Size: 601 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7M14.5 7.5l-1 1-1-1"/></svg>
|
||||
|
Before Width: | Height: | Size: 445 B After Width: | Height: | Size: 338 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 7.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 1.5h-12a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M3.5 12v-2a.5.5 0 0 1 .5-.5h2a1.5 1.5 0 0 1 0 3H4a.5.5 0 0 1-.5-.5Z"/></svg>
|
||||
|
After Width: | Height: | Size: 561 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M3.5 9.5h1m1 0h-1m-1-3 1-1v4M9.5 9.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M7.5 9.5v.01"/></svg>
|
||||
|
After Width: | Height: | Size: 514 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" d="M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7"/></svg>
|
||||
|
Before Width: | Height: | Size: 296 B After Width: | Height: | Size: 389 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" stroke-width="2.1" d="M4 7h.01M7 7h.01M10 7h.01"/></svg>
|
||||
|
After Width: | Height: | Size: 417 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m3.5 7.5 1 1 1-2M9.5 8.5l2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 3.5h-10a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#000" fill-rule="evenodd" d="M5 5.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H4v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H5zM13.854 5.854a.5.5 0 0 0-.708-.708l-3 3a.5.5 0 0 0 .708.708zM9.775 9.765a.375.375 0 1 0-.53-.53l-.01.01a.375.375 0 0 0 .53.53z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" d="M13.5 3.5h-11a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>
|
||||
|
Before Width: | Height: | Size: 340 B After Width: | Height: | Size: 528 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M21.5 40.5H19a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v3.5Zm0 0 1.026.342a1.5 1.5 0 0 0 1.974-1.423V36.5a4 4 0 0 0-4-4h-2a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4H23"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>
|
||||
|
After Width: | Height: | Size: 511 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18.5 37.5 3 3 5-5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 35 6 6m0-6-6 6"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m45.5 37.5 3 3 5-5"/><path stroke="#6A7585" stroke-linecap="round" d="m20 35 6 6m0-6-6 6"/></svg>
|
||||
|
Before Width: | Height: | Size: 508 B After Width: | Height: | Size: 508 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M35 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 35 43.146V42.5a2 2 0 0 0-2-2h-3M38 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M38 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M34.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M37.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M37.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>
|
||||
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 539 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="41" x="8.5" y="14.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M49.5 23.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v0M14.5 49.5h4a3 3 0 0 0 3-3v-6a3 3 0 0 0-3-3h-4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1ZM33.5 40.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v3m8 3v0a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-3m0 0h5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M28.5 20.5h5c1.657 0 3 .843 3 2.5s-1.343 2.5-3 2.5h-4M29.5 25.5h5c1.657 0 3 1.843 3 3.5s-1.343 3.5-3 3.5h-6M29.5 20.5v12M14.5 32.5l1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 49.5h2m2 0h-2m0 0v12m-2 0h4"/><path stroke="#CC3D00" stroke-linecap="round" d="M37.5 49.5v-6m7-6h-4a3 3 0 0 0-3 3v3m0 0h4"/></svg>
|
||||
|
After Width: | Height: | Size: 937 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-width="1.25" d="M23.5 43.5h.01"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M26 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M33.5 33.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M33.5 43.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>
|
||||
|
After Width: | Height: | Size: 686 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/><path fill="#CC3D00" fill-rule="evenodd" d="M17 34.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L16 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L17.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L17 36.617zm8 0a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L24 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L25.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L25 36.617zm7.5-.5a.5.5 0 0 1 .5.5v2.117l1.743-1.046a.5.5 0 0 1 .514.858L33.472 37.5l1.785 1.071a.5.5 0 1 1-.514.858L33 38.383V40.5a.5.5 0 1 1-1 0v-2.117l-1.743 1.046a.5.5 0 1 1-.514-.858l1.785-1.071-1.785-1.071a.5.5 0 1 1 .514-.858L32 36.617V34.5a.5.5 0 0 1 .5-.5m8.5.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L40 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L41.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L41 36.617z" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m56.5 36.5-3 3-3-3"/></svg>
|
||||
|
After Width: | Height: | Size: 410 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M29 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 29 43.146V42.5a2 2 0 0 0-2-2h-3M32 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M32 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M28.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M31.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M31.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>
|
||||
|
Before Width: | Height: | Size: 686 B After Width: | Height: | Size: 694 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="19" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="18" height="16" x="27.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path fill="#CC3D00" d="M19.5 43.5v.5h.5v-.5zm-9 0H10v.5h.5zm4.5-10 .332-.374a.5.5 0 0 0-.664 0zm-1.5 10v.5h.5v-.5zm0-4V39H13v.5zm3 0h.5V39h-.5zm0 4H16v.5h.5zm2.664-6.298.332-.374zm-8.328 0-.332-.374zM11 43.5v-5.551h-1v5.55zm8-5.551v5.55h1v-5.55zm-7.832-.374 4.164-3.701-.664-.748-4.164 3.702zm3.5-3.701 4.164 3.701.665-.747-4.165-3.702zM13.5 43h-3v1h3zm.5.5v-4h-1v4zm-.5-3.5h3v-1h-3zm6 3h-3v1h3zM16 39.5v4h1v-4zm4-1.551a1.5 1.5 0 0 0-.503-1.121l-.665.747a.5.5 0 0 1 .168.374zm-9 0a.5.5 0 0 1 .168-.374l-.664-.747a1.5 1.5 0 0 0-.504 1.12z"/><circle cx="36.5" cy="38.5" r="5" stroke="#6A7585"/><path stroke="#6A7585" stroke-linecap="round" d="M34.5 38.5h4M36.5 40.5v-4"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="18" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M10.5 38.5h8M14.5 42.5v-8"/><rect width="18" height="16" x="26.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m38 35-5.5 5.5 1 1L39 36a.707.707 0 0 0-1-1"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/><path fill="#6A7585" stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="m32 41.5.5.5-1 .5z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 770 B |
|
|
@ -2,6 +2,7 @@ export { ButtonThumbnail } from "./components/Thumbnails/ButtonThumbnail";
|
|||
export { CheckboxGroupThumbnail } from "./components/Thumbnails/CheckboxGroupThumbnail";
|
||||
export { CheckboxThumbnail } from "./components/Thumbnails/CheckboxThumbnail";
|
||||
export { CurrencyInputThumbnail } from "./components/Thumbnails/CurrencyInputThumbnail";
|
||||
export { EmailInputThumbnail } from "./components/Thumbnails/EmailInputThumbnail";
|
||||
export { HeadingThumbnail } from "./components/Thumbnails/HeadingThumbnail";
|
||||
export { IconButtonThumbnail } from "./components/Thumbnails/IconButtonThumbnail";
|
||||
export { InlineButtonsThumbnail } from "./components/Thumbnails/InlineButtonsThumbnail";
|
||||
|
|
@ -9,10 +10,14 @@ export { InputThumbnail } from "./components/Thumbnails/InputThumbnail";
|
|||
export { KeyValueThumbnail } from "./components/Thumbnails/KeyValueThumbnail";
|
||||
export { MenuButtonThumbnail } from "./components/Thumbnails/MenuButtonThumbnail";
|
||||
export { ModalThumbnail } from "./components/Thumbnails/ModalThumbnail";
|
||||
export { MultilineInputThumbnail } from "./components/Thumbnails/MultilineInputThumbnail";
|
||||
export { NumberInputThumbnail } from "./components/Thumbnails/NumberInputThumbnail";
|
||||
export { ParagraphThumbnail } from "./components/Thumbnails/ParagraphThumbnail";
|
||||
export { PasswordInputThumbnail } from "./components/Thumbnails/PasswordInputThumbnail";
|
||||
export { PhoneInputThumbnail } from "./components/Thumbnails/PhoneInputThumbnail";
|
||||
export { RadioGroupThumbnail } from "./components/Thumbnails/RadioGroupThumbnail";
|
||||
export { SectionThumbnail } from "./components/Thumbnails/SectionThumbnail";
|
||||
export { SelectThumbnail } from "./components/Thumbnails/SelectThumbnail";
|
||||
export { StatsBoxThumbnail } from "./components/Thumbnails/StatsBoxThumbnail";
|
||||
export { SwitchGroupThumbnail } from "./components/Thumbnails/SwitchGroupThumbnail";
|
||||
export { SwitchThumbnail } from "./components/Thumbnails/SwitchThumbnail";
|
||||
|
|
@ -23,6 +28,7 @@ export { ButtonIcon } from "./components/Icons/ButtonIcon";
|
|||
export { CheckboxGroupIcon } from "./components/Icons/CheckboxGroupIcon";
|
||||
export { CheckboxIcon } from "./components/Icons/CheckboxIcon";
|
||||
export { CurrencyInputIcon } from "./components/Icons/CurrencyInputIcon";
|
||||
export { EmailInputIcon } from "./components/Icons/EmailInputIcon";
|
||||
export { HeadingIcon } from "./components/Icons/HeadingIcon";
|
||||
export { IconButtonIcon } from "./components/Icons/IconButtonIcon";
|
||||
export { InlineButtonsIcon } from "./components/Icons/InlineButtonsIcon";
|
||||
|
|
@ -30,7 +36,10 @@ export { InputIcon } from "./components/Icons/InputIcon";
|
|||
export { KeyValueIcon } from "./components/Icons/KeyValueIcon";
|
||||
export { MenuButtonIcon } from "./components/Icons/MenuButtonIcon";
|
||||
export { ModalIcon } from "./components/Icons/ModalIcon";
|
||||
export { MultilineInputIcon } from "./components/Icons/MultilineInputIcon";
|
||||
export { NumberInputIcon } from "./components/Icons/NumberInputIcon";
|
||||
export { ParagraphIcon } from "./components/Icons/ParagraphIcon";
|
||||
export { PasswordInputIcon } from "./components/Icons/PasswordInputIcon";
|
||||
export { PhoneInputIcon } from "./components/Icons/PhoneInputIcon";
|
||||
export { RadioGroupIcon } from "./components/Icons/RadioGroupIcon";
|
||||
export { SectionIcon } from "./components/Icons/SectionIcon";
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { ButtonIcon } from "../components/Icons/ButtonIcon";
|
|||
import { CheckboxGroupIcon } from "../components/Icons/CheckboxGroupIcon";
|
||||
import { CheckboxIcon } from "../components/Icons/CheckboxIcon";
|
||||
import { CurrencyInputIcon } from "../components/Icons/CurrencyInputIcon";
|
||||
import { EmailInputIcon } from "../components/Icons/EmailInputIcon";
|
||||
import { HeadingIcon } from "../components/Icons/HeadingIcon";
|
||||
import { IconButtonIcon } from "../components/Icons/IconButtonIcon";
|
||||
import { InlineButtonsIcon } from "../components/Icons/InlineButtonsIcon";
|
||||
|
|
@ -11,7 +12,10 @@ import { InputIcon } from "../components/Icons/InputIcon";
|
|||
import { KeyValueIcon } from "../components/Icons/KeyValueIcon";
|
||||
import { MenuButtonIcon } from "../components/Icons/MenuButtonIcon";
|
||||
import { ModalIcon } from "../components/Icons/ModalIcon";
|
||||
import { MultilineInputIcon } from "../components/Icons/MultilineInputIcon";
|
||||
import { NumberInputIcon } from "../components/Icons/NumberInputIcon";
|
||||
import { ParagraphIcon } from "../components/Icons/ParagraphIcon";
|
||||
import { PasswordInputIcon } from "../components/Icons/PasswordInputIcon";
|
||||
import { PhoneInputIcon } from "../components/Icons/PhoneInputIcon";
|
||||
import { RadioGroupIcon } from "../components/Icons/RadioGroupIcon";
|
||||
import { SectionIcon } from "../components/Icons/SectionIcon";
|
||||
|
|
@ -35,6 +39,7 @@ export const Icons = () => {
|
|||
<CheckboxGroupIcon />
|
||||
<CheckboxIcon />
|
||||
<CurrencyInputIcon />
|
||||
<EmailInputIcon />
|
||||
<HeadingIcon />
|
||||
<IconButtonIcon />
|
||||
<InlineButtonsIcon />
|
||||
|
|
@ -42,7 +47,10 @@ export const Icons = () => {
|
|||
<KeyValueIcon />
|
||||
<MenuButtonIcon />
|
||||
<ModalIcon />
|
||||
<MultilineInputIcon />
|
||||
<NumberInputIcon />
|
||||
<ParagraphIcon />
|
||||
<PasswordInputIcon />
|
||||
<PhoneInputIcon />
|
||||
<RadioGroupIcon />
|
||||
<SectionIcon />
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { ButtonThumbnail } from "../components/Thumbnails/ButtonThumbnail";
|
|||
import { CheckboxGroupThumbnail } from "../components/Thumbnails/CheckboxGroupThumbnail";
|
||||
import { CheckboxThumbnail } from "../components/Thumbnails/CheckboxThumbnail";
|
||||
import { CurrencyInputThumbnail } from "../components/Thumbnails/CurrencyInputThumbnail";
|
||||
import { EmailInputThumbnail } from "../components/Thumbnails/EmailInputThumbnail";
|
||||
import { HeadingThumbnail } from "../components/Thumbnails/HeadingThumbnail";
|
||||
import { IconButtonThumbnail } from "../components/Thumbnails/IconButtonThumbnail";
|
||||
import { InlineButtonsThumbnail } from "../components/Thumbnails/InlineButtonsThumbnail";
|
||||
|
|
@ -11,10 +12,14 @@ import { InputThumbnail } from "../components/Thumbnails/InputThumbnail";
|
|||
import { KeyValueThumbnail } from "../components/Thumbnails/KeyValueThumbnail";
|
||||
import { MenuButtonThumbnail } from "../components/Thumbnails/MenuButtonThumbnail";
|
||||
import { ModalThumbnail } from "../components/Thumbnails/ModalThumbnail";
|
||||
import { MultilineInputThumbnail } from "../components/Thumbnails/MultilineInputThumbnail";
|
||||
import { NumberInputThumbnail } from "../components/Thumbnails/NumberInputThumbnail";
|
||||
import { ParagraphThumbnail } from "../components/Thumbnails/ParagraphThumbnail";
|
||||
import { PasswordInputThumbnail } from "../components/Thumbnails/PasswordInputThumbnail";
|
||||
import { PhoneInputThumbnail } from "../components/Thumbnails/PhoneInputThumbnail";
|
||||
import { RadioGroupThumbnail } from "../components/Thumbnails/RadioGroupThumbnail";
|
||||
import { SectionThumbnail } from "../components/Thumbnails/SectionThumbnail";
|
||||
import { SelectThumbnail } from "../components/Thumbnails/SelectThumbnail";
|
||||
import { StatsBoxThumbnail } from "../components/Thumbnails/StatsBoxThumbnail";
|
||||
import { SwitchGroupThumbnail } from "../components/Thumbnails/SwitchGroupThumbnail";
|
||||
import { SwitchThumbnail } from "../components/Thumbnails/SwitchThumbnail";
|
||||
|
|
@ -35,6 +40,7 @@ export const Icons = () => {
|
|||
<CheckboxGroupThumbnail />
|
||||
<CheckboxThumbnail />
|
||||
<CurrencyInputThumbnail />
|
||||
<EmailInputThumbnail />
|
||||
<HeadingThumbnail />
|
||||
<IconButtonThumbnail />
|
||||
<InlineButtonsThumbnail />
|
||||
|
|
@ -42,10 +48,14 @@ export const Icons = () => {
|
|||
<KeyValueThumbnail />
|
||||
<MenuButtonThumbnail />
|
||||
<ModalThumbnail />
|
||||
<MultilineInputThumbnail />
|
||||
<NumberInputThumbnail />
|
||||
<ParagraphThumbnail />
|
||||
<PasswordInputThumbnail />
|
||||
<PhoneInputThumbnail />
|
||||
<RadioGroupThumbnail />
|
||||
<SectionThumbnail />
|
||||
<SelectThumbnail />
|
||||
<StatsBoxThumbnail />
|
||||
<SwitchGroupThumbnail />
|
||||
<SwitchThumbnail />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
"ts-node": {
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"types": ["node"]
|
||||
"types": ["node"],
|
||||
"verbatimModuleSyntax": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ export interface AnvilConfig {
|
|||
|
||||
export interface WidgetBaseConfiguration {
|
||||
name: string;
|
||||
displayOrder?: number;
|
||||
iconSVG?: string;
|
||||
thumbnailSVG?: string;
|
||||
hideCard?: boolean;
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@ class WidgetFactory {
|
|||
isDeprecated: !!config.isDeprecated,
|
||||
replacement: config.replacement,
|
||||
displayName: config.name,
|
||||
displayOrder: config.displayOrder,
|
||||
key: generateReactKey(),
|
||||
iconSVG: config.iconSVG,
|
||||
thumbnailSVG: config.thumbnailSVG,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import ReactDOM from "react-dom";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useLocation } from "react-router";
|
||||
import { debounce, random } from "lodash";
|
||||
import { debounce, random, sortBy } from "lodash";
|
||||
import type {
|
||||
WidgetCardsGroupedByTags,
|
||||
WidgetTags,
|
||||
|
|
@ -40,6 +40,7 @@ import {
|
|||
EditorViewMode,
|
||||
} from "ee/entities/IDE/constants";
|
||||
import { FocusEntity } from "navigation/FocusEntity";
|
||||
import { objectKeys } from "@appsmith/utils";
|
||||
|
||||
export const draggableElement = (
|
||||
id: string,
|
||||
|
|
@ -331,6 +332,15 @@ export const groupWidgetCardsByTags = (widgetCards: WidgetCardProps[]) => {
|
|||
}
|
||||
});
|
||||
|
||||
objectKeys(groupedCards).forEach((tag) => {
|
||||
if (tag === WIDGET_TAGS.SUGGESTED_WIDGETS) return;
|
||||
|
||||
groupedCards[tag] = sortBy(groupedCards[tag], [
|
||||
"displayOrder",
|
||||
"displayName",
|
||||
]);
|
||||
});
|
||||
|
||||
return groupedCards;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -348,6 +348,7 @@ export const getWidgetCards = createSelector(
|
|||
const {
|
||||
detachFromLayout = false,
|
||||
displayName,
|
||||
displayOrder,
|
||||
iconSVG,
|
||||
isSearchWildcard,
|
||||
key,
|
||||
|
|
@ -375,6 +376,7 @@ export const getWidgetCards = createSelector(
|
|||
columns,
|
||||
detachFromLayout,
|
||||
displayName,
|
||||
displayOrder,
|
||||
icon: iconSVG,
|
||||
thumbnail: thumbnailSVG,
|
||||
IconCmp,
|
||||
|
|
|
|||
|
|
@ -571,6 +571,7 @@ export interface WidgetCardProps {
|
|||
type: WidgetType;
|
||||
key?: string;
|
||||
displayName: string;
|
||||
displayOrder?: number;
|
||||
icon: string;
|
||||
thumbnail?: string;
|
||||
isBeta?: boolean;
|
||||
|
|
|
|||
|
|
@ -81,6 +81,10 @@ import { WDSModalWidget } from "./wds/WDSModalWidget";
|
|||
import { WDSStatsWidget } from "./wds/WDSStatsWidget";
|
||||
import { WDSKeyValueWidget } from "./wds/WDSKeyValueWidget";
|
||||
import { WDSInlineButtonsWidget } from "./wds/WDSInlineButtonsWidget";
|
||||
import { WDSEmailInputWidget } from "./wds/WDSEmailInputWidget";
|
||||
import { WDSPasswordInputWidget } from "./wds/WDSPasswordInputWidget";
|
||||
import { WDSNumberInputWidget } from "./wds/WDSNumberInputWidget";
|
||||
import { WDSMultilineInputWidget } from "./wds/WDSMultilineInputWidget";
|
||||
|
||||
const LegacyWidgets = [
|
||||
CanvasWidget,
|
||||
|
|
@ -173,6 +177,10 @@ const WDSWidgets = [
|
|||
WDSStatsWidget,
|
||||
WDSKeyValueWidget,
|
||||
WDSInlineButtonsWidget,
|
||||
WDSEmailInputWidget,
|
||||
WDSPasswordInputWidget,
|
||||
WDSNumberInputWidget,
|
||||
WDSMultilineInputWidget,
|
||||
];
|
||||
|
||||
const Widgets = [
|
||||
|
|
|
|||
|
|
@ -1,11 +1,17 @@
|
|||
import { CurrencyTypeOptions } from "constants/Currency";
|
||||
import { ValidationTypes } from "constants/WidgetValidation";
|
||||
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
|
||||
import { propertyPaneContentConfig as WdsInputWidgetPropertyPaneContentConfig } from "widgets/wds/WDSInputWidget/config/propertyPaneConfig/contentConfig";
|
||||
|
||||
import * as validations from "./validations";
|
||||
import { countryToFlag } from "../../widget/helpers";
|
||||
|
||||
const inputTypeSectionConfig = WdsInputWidgetPropertyPaneContentConfig.find(
|
||||
(config) => config.sectionName === "Type",
|
||||
);
|
||||
|
||||
export const propertyPaneContentConfig = [
|
||||
inputTypeSectionConfig,
|
||||
{
|
||||
sectionName: "Data",
|
||||
children: [
|
||||
|
|
|
|||
3
app/client/src/widgets/wds/WDSEmailInputWidget/index.ts
Normal file
3
app/client/src/widgets/wds/WDSEmailInputWidget/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { WDSEmailInputWidget } from "./widget";
|
||||
|
||||
export { WDSEmailInputWidget };
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
|
||||
import { EmailInputIcon, EmailInputThumbnail } from "appsmith-icons";
|
||||
import { WIDGET_TAGS } from "constants/WidgetConstants";
|
||||
import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants";
|
||||
import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
|
||||
|
||||
class WDSEmailInputWidget extends WDSInputWidget {
|
||||
static type = "WDS_EMAIL_INPUT_WIDGET";
|
||||
|
||||
static getConfig(): WidgetBaseConfiguration {
|
||||
return {
|
||||
...super.getConfig(),
|
||||
displayOrder: undefined,
|
||||
tags: [WIDGET_TAGS.INPUTS],
|
||||
name: "Email Input",
|
||||
};
|
||||
}
|
||||
|
||||
static getDefaults() {
|
||||
return {
|
||||
...super.getDefaults(),
|
||||
inputType: INPUT_TYPES.EMAIL,
|
||||
widgetName: "EmailInput",
|
||||
};
|
||||
}
|
||||
|
||||
static getMethods() {
|
||||
return {
|
||||
...super.getMethods(),
|
||||
IconCmp: EmailInputIcon,
|
||||
ThumbnailCmp: EmailInputThumbnail,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export { WDSEmailInputWidget };
|
||||
|
|
@ -2,6 +2,7 @@ import { WIDGET_TAGS } from "constants/WidgetConstants";
|
|||
|
||||
export const metaConfig = {
|
||||
name: "Input",
|
||||
displayOrder: 1,
|
||||
tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.INPUTS],
|
||||
needsMeta: true,
|
||||
searchTags: [
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import type { InputWidgetProps } from "../../widget/types";
|
|||
|
||||
export const propertyPaneContentConfig = [
|
||||
{
|
||||
sectionName: "Data",
|
||||
sectionName: "Type",
|
||||
children: [
|
||||
{
|
||||
helpText: "Changes the type of data captured in the input",
|
||||
|
|
@ -40,12 +40,25 @@ export const propertyPaneContentConfig = [
|
|||
label: "Email",
|
||||
value: "EMAIL",
|
||||
},
|
||||
{
|
||||
label: "Phone number",
|
||||
value: "PHONE_NUMBER",
|
||||
},
|
||||
{
|
||||
label: "Currency",
|
||||
value: "CURRENCY",
|
||||
},
|
||||
],
|
||||
isBindProperty: false,
|
||||
isTriggerProperty: false,
|
||||
updateHook: inputTypeUpdateHook,
|
||||
dependencies: ["defaultText"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Data",
|
||||
children: [
|
||||
{
|
||||
helpText:
|
||||
"Sets the default text of the widget. The text is updated if the default text changes",
|
||||
|
|
|
|||
|
|
@ -7,3 +7,13 @@ export const INPUT_TYPES = {
|
|||
PHONE_NUMBER: "PHONE_NUMBER",
|
||||
MULTI_LINE_TEXT: "MULTI_LINE_TEXT",
|
||||
} as const;
|
||||
|
||||
export const INPUT_TYPE_TO_WIDGET_TYPE_MAP = {
|
||||
[INPUT_TYPES.TEXT]: "WDS_INPUT_WIDGET",
|
||||
[INPUT_TYPES.EMAIL]: "WDS_EMAIL_INPUT_WIDGET",
|
||||
[INPUT_TYPES.NUMBER]: "WDS_NUMBER_INPUT_WIDGET",
|
||||
[INPUT_TYPES.PASSWORD]: "WDS_PASSWORD_INPUT_WIDGET",
|
||||
[INPUT_TYPES.MULTI_LINE_TEXT]: "WDS_MULTILINE_INPUT_WIDGET",
|
||||
[INPUT_TYPES.CURRENCY]: "WDS_CURRENCY_INPUT_WIDGET",
|
||||
[INPUT_TYPES.PHONE_NUMBER]: "WDS_PHONE_INPUT_WIDGET",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,8 +11,11 @@ import {
|
|||
import type { InputType } from "../component/types";
|
||||
import type { WidgetProps } from "widgets/BaseWidget";
|
||||
|
||||
import { INPUT_TYPES } from "../constants";
|
||||
import type { InputWidgetProps, Validation } from "./types";
|
||||
import { INPUT_TYPE_TO_WIDGET_TYPE_MAP, INPUT_TYPES } from "../constants";
|
||||
import type { PropertyUpdates } from "WidgetProvider/constants";
|
||||
import { getDefaultISDCode } from "widgets/wds/WDSPhoneInputWidget/constants";
|
||||
import { getDefaultCurrency } from "widgets/wds/WDSCurrencyInputWidget/constants";
|
||||
|
||||
/**
|
||||
* parses text to number if inputType is number
|
||||
|
|
@ -131,11 +134,9 @@ export const validateInput = (props: InputWidgetProps): Validation => {
|
|||
export function inputTypeUpdateHook(
|
||||
props: WidgetProps,
|
||||
propertyName: string,
|
||||
// TODO: Fix this the next time the file is edited
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
propertyValue: any,
|
||||
propertyValue: InputType,
|
||||
) {
|
||||
const updates = [
|
||||
const updates: PropertyUpdates[] = [
|
||||
{
|
||||
propertyPath: propertyName,
|
||||
propertyValue: propertyValue,
|
||||
|
|
@ -149,5 +150,35 @@ export function inputTypeUpdateHook(
|
|||
propertyValue: isInputTypeEmailOrPassword(propertyValue),
|
||||
});
|
||||
|
||||
// we will also change the widgetType based on the inputType
|
||||
updates.push({
|
||||
propertyPath: "type",
|
||||
propertyValue: INPUT_TYPE_TO_WIDGET_TYPE_MAP[propertyValue],
|
||||
});
|
||||
|
||||
// in case we are chaging to phone input type & there is no
|
||||
// defaultDiaCode property in the widget, we will default the country code to US
|
||||
if (
|
||||
props.defaultDialCode === undefined &&
|
||||
propertyValue === INPUT_TYPES.PHONE_NUMBER
|
||||
) {
|
||||
updates.push({
|
||||
propertyPath: "defaultDialCode",
|
||||
propertyValue: getDefaultISDCode().dial_code,
|
||||
});
|
||||
}
|
||||
|
||||
// in case we are changing to currency input type & there is no
|
||||
// defaultCurrency property in the widget, we will default the currency to USD
|
||||
if (
|
||||
props.defaultCurrencyCode === undefined &&
|
||||
propertyValue === INPUT_TYPES.CURRENCY
|
||||
) {
|
||||
updates.push({
|
||||
propertyPath: "defaultCurrencyCode",
|
||||
propertyValue: getDefaultCurrency().currency,
|
||||
});
|
||||
}
|
||||
|
||||
return updates;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,11 +13,12 @@ import { WDSBaseInputWidget } from "../../WDSBaseInputWidget";
|
|||
import type { DerivedPropertiesMap } from "WidgetProvider/factory";
|
||||
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
||||
import type { KeyDownEvent } from "widgets/wds/WDSBaseInputWidget/component/types";
|
||||
import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
|
||||
|
||||
class WDSInputWidget extends WDSBaseInputWidget<InputWidgetProps, WidgetState> {
|
||||
static type = "WDS_INPUT_WIDGET";
|
||||
|
||||
static getConfig() {
|
||||
static getConfig(): WidgetBaseConfiguration {
|
||||
return config.metaConfig;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import { WIDGET_TAGS } from "constants/WidgetConstants";
|
||||
import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
|
||||
import { KeyValueIcon, KeyValueThumbnail } from "appsmith-icons";
|
||||
import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
|
||||
|
||||
class WDSKeyValueWidget extends WDSInputWidget {
|
||||
static type = "WDS_KEY_VALUE_WIDGET";
|
||||
|
||||
static getConfig() {
|
||||
static getConfig(): WidgetBaseConfiguration {
|
||||
return {
|
||||
...super.getConfig(),
|
||||
displayOrder: undefined,
|
||||
tags: [WIDGET_TAGS.INPUTS],
|
||||
name: "KeyValue",
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import { WDSMultilineInputWidget } from "./widget";
|
||||
|
||||
export { WDSMultilineInputWidget };
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { WIDGET_TAGS } from "constants/WidgetConstants";
|
||||
import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
|
||||
import { MultilineInputIcon, MultilineInputThumbnail } from "appsmith-icons";
|
||||
import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants";
|
||||
import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
|
||||
|
||||
class WDSMultilineInputWidget extends WDSInputWidget {
|
||||
static type = "WDS_MULTILINE_INPUT_WIDGET";
|
||||
|
||||
static getConfig(): WidgetBaseConfiguration {
|
||||
return {
|
||||
...super.getConfig(),
|
||||
displayOrder: undefined,
|
||||
tags: [WIDGET_TAGS.INPUTS],
|
||||
name: "Multiline Input",
|
||||
};
|
||||
}
|
||||
|
||||
static getDefaults() {
|
||||
return {
|
||||
...super.getDefaults(),
|
||||
inputType: INPUT_TYPES.MULTI_LINE_TEXT,
|
||||
widgetName: "MultilineInput",
|
||||
};
|
||||
}
|
||||
|
||||
static getMethods() {
|
||||
return {
|
||||
...super.getMethods(),
|
||||
IconCmp: MultilineInputIcon,
|
||||
ThumbnailCmp: MultilineInputThumbnail,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export { WDSMultilineInputWidget };
|
||||
3
app/client/src/widgets/wds/WDSNumberInputWidget/index.ts
Normal file
3
app/client/src/widgets/wds/WDSNumberInputWidget/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { WDSNumberInputWidget } from "./widget";
|
||||
|
||||
export { WDSNumberInputWidget };
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { WIDGET_TAGS } from "constants/WidgetConstants";
|
||||
import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
|
||||
import { NumberInputIcon, NumberInputThumbnail } from "appsmith-icons";
|
||||
import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants";
|
||||
import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
|
||||
|
||||
class WDSNumberInputWidget extends WDSInputWidget {
|
||||
static type = "WDS_NUMBER_INPUT_WIDGET";
|
||||
|
||||
static getConfig(): WidgetBaseConfiguration {
|
||||
return {
|
||||
...super.getConfig(),
|
||||
displayOrder: undefined,
|
||||
tags: [WIDGET_TAGS.INPUTS],
|
||||
name: "Number Input",
|
||||
};
|
||||
}
|
||||
|
||||
static getDefaults() {
|
||||
return {
|
||||
...super.getDefaults(),
|
||||
inputType: INPUT_TYPES.NUMBER,
|
||||
widgetName: "NumberInput",
|
||||
};
|
||||
}
|
||||
|
||||
static getMethods() {
|
||||
return {
|
||||
...super.getMethods(),
|
||||
IconCmp: NumberInputIcon,
|
||||
ThumbnailCmp: NumberInputThumbnail,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export { WDSNumberInputWidget };
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { WDSPasswordInputWidget } from "./widget";
|
||||
|
||||
export { WDSPasswordInputWidget };
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { WIDGET_TAGS } from "constants/WidgetConstants";
|
||||
import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
|
||||
import { PasswordInputIcon, PasswordInputThumbnail } from "appsmith-icons";
|
||||
import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants";
|
||||
import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
|
||||
|
||||
class WDSPasswordInputWidget extends WDSInputWidget {
|
||||
static type = "WDS_PASSWORD_INPUT_WIDGET";
|
||||
|
||||
static getConfig(): WidgetBaseConfiguration {
|
||||
return {
|
||||
...super.getConfig(),
|
||||
displayOrder: undefined,
|
||||
tags: [WIDGET_TAGS.INPUTS],
|
||||
name: "Password Input",
|
||||
};
|
||||
}
|
||||
|
||||
static getDefaults() {
|
||||
return {
|
||||
...super.getDefaults(),
|
||||
inputType: INPUT_TYPES.PASSWORD,
|
||||
widgetName: "PasswordInput",
|
||||
};
|
||||
}
|
||||
|
||||
static getMethods() {
|
||||
return {
|
||||
...super.getMethods(),
|
||||
IconCmp: PasswordInputIcon,
|
||||
ThumbnailCmp: PasswordInputThumbnail,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export { WDSPasswordInputWidget };
|
||||
|
|
@ -2,11 +2,17 @@ import { ISDCodeOptions } from "constants/ISDCodes_v2";
|
|||
import type { ISDCodeProps } from "constants/ISDCodes_v2";
|
||||
import { ValidationTypes } from "constants/WidgetValidation";
|
||||
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
|
||||
import { propertyPaneContentConfig as WdsInputWidgetPropertyPaneContentConfig } from "widgets/wds/WDSInputWidget/config/propertyPaneConfig/contentConfig";
|
||||
|
||||
import { countryToFlag } from "../../widget/helpers";
|
||||
import { defaultValueValidation } from "./validations";
|
||||
|
||||
const inputTypeSectionConfig = WdsInputWidgetPropertyPaneContentConfig.find(
|
||||
(config) => config.sectionName === "Type",
|
||||
);
|
||||
|
||||
export const propertyPaneContentConfig = [
|
||||
inputTypeSectionConfig,
|
||||
{
|
||||
sectionName: "Data",
|
||||
children: [
|
||||
|
|
|
|||
|
|
@ -53,6 +53,10 @@ export const WDS_V2_WIDGET_MAP = {
|
|||
STATBOX_WIDGET: "WDS_STATS_WIDGET",
|
||||
KEY_VALUE_WIDGET: "WDS_KEY_VALUE_WIDGET",
|
||||
INLINE_BUTTONS_WIDGET: "WDS_INLINE_BUTTONS_WIDGET",
|
||||
EMAIL_INPUT_WIDGET: "WDS_EMAIL_INPUT_WIDGET",
|
||||
PASSWORD_INPUT_WIDGET: "WDS_PASSWORD_INPUT_WIDGET",
|
||||
NUMBER_INPUT_WIDGET: "WDS_NUMBER_INPUT_WIDGET",
|
||||
MULTILINE_INPUT_WIDGET: "WDS_MULTILINE_INPUT_WIDGET",
|
||||
|
||||
// Anvil layout widgets
|
||||
ZONE_WIDGET: anvilWidgets.ZONE_WIDGET,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user