diff --git a/app/client/package.json b/app/client/package.json index b307b2cfff..8026d3f3f2 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -95,6 +95,7 @@ "@uppy/webcam": "^1.8.4", "@welldone-software/why-did-you-render": "^4.2.5", "algoliasearch": "^4.2.0", + "appsmith-icons": "workspace:^", "assert-never": "^1.2.1", "astring": "^1.7.5", "axios": "^1.6.0", diff --git a/app/client/packages/icons/.env.example b/app/client/packages/icons/.env.example new file mode 100644 index 0000000000..8d3c4762aa --- /dev/null +++ b/app/client/packages/icons/.env.example @@ -0,0 +1 @@ +FIGMA_TOKEN= diff --git a/app/client/packages/icons/.eslintrc.json b/app/client/packages/icons/.eslintrc.json new file mode 100644 index 0000000000..50203e2397 --- /dev/null +++ b/app/client/packages/icons/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["../../.eslintrc.base.json"], + "ignorePatterns": ["icons", "components", "stories"] +} diff --git a/app/client/packages/icons/.gitignore b/app/client/packages/icons/.gitignore new file mode 100755 index 0000000000..60609fd61a --- /dev/null +++ b/app/client/packages/icons/.gitignore @@ -0,0 +1 @@ +.figmagic/* diff --git a/app/client/packages/icons/.prettierignore b/app/client/packages/icons/.prettierignore new file mode 100644 index 0000000000..c44775c277 --- /dev/null +++ b/app/client/packages/icons/.prettierignore @@ -0,0 +1,2 @@ +src/icons/* +src/components/* diff --git a/app/client/packages/icons/README.md b/app/client/packages/icons/README.md new file mode 100644 index 0000000000..93ee98f5bb --- /dev/null +++ b/app/client/packages/icons/README.md @@ -0,0 +1,22 @@ +# Appsmith Icons + +We automatically import icons from Figma, optimise and prepare some of them for further use in the main app. + +> **_NOTE:_** All files in folders are created automatically. Do not change them manually, after running generation scripts, the changes will be lost. To make changes, see the files in the `utils` folder. + +## How to use? + +To update the icons, you only need to run the **generate-icons** script — `yarn run build`. + +To make everything work right, you just need to set [Figma token](https://www.figma.com/developers/api#authentication) (press **Get personal access token**) in the `.env` file. It's easy to create `.env` file, just copy `.env.example`. + +```typescript +import { ButtonIcon } from "appsmith-icons"; + + +``` + +## Used packages + +- [Figmagic](https://github.com/mikaelvesavuori/figmagic?tab=readme-ov-file) — provides an interface for importing graphics from Figma. +- [SVGO](https://github.com/svg/svgo) — optimizes SVG diff --git a/app/client/packages/icons/figmagic.json b/app/client/packages/icons/figmagic.json new file mode 100644 index 0000000000..2f40458547 --- /dev/null +++ b/app/client/packages/icons/figmagic.json @@ -0,0 +1,6 @@ +{ + "syncGraphics": true, + "syncTokens": false, + "outputFolderGraphics": "./src/icons", + "url": "ySwwPDgItFMS6FjSvvfpPG" +} diff --git a/app/client/packages/icons/package.json b/app/client/packages/icons/package.json new file mode 100644 index 0000000000..d19fa9bd79 --- /dev/null +++ b/app/client/packages/icons/package.json @@ -0,0 +1,26 @@ +{ + "name": "appsmith-icons", + "version": "1.0.0", + "author": "Valera Melnikov , Pawan Kumar ", + "license": "MIT", + "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", + "lint": "yarn g:lint", + "prettier": "yarn g:prettier" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + }, + "devDependencies": { + "fast-glob": "^3.3.2", + "figmagic": "^4.5.13", + "fs-extra": "^11.2.0", + "svgo": "^3.2.0" + } +} diff --git a/app/client/packages/icons/src/components/Icons/ButtonIcon.tsx b/app/client/packages/icons/src/components/Icons/ButtonIcon.tsx new file mode 100644 index 0000000000..1c1db17747 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/ButtonIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ButtonIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx b/app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx new file mode 100644 index 0000000000..f862133236 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const CheckboxGroupIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx b/app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx new file mode 100644 index 0000000000..29369bcba7 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const CheckboxIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx b/app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx new file mode 100644 index 0000000000..92cfe3cb3a --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const CurrencyInputIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/HeadingIcon.tsx b/app/client/packages/icons/src/components/Icons/HeadingIcon.tsx new file mode 100644 index 0000000000..ce21cb63e1 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/HeadingIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const HeadingIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx b/app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx new file mode 100644 index 0000000000..510d24d590 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const IconButtonIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx b/app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx new file mode 100644 index 0000000000..83ccec3e0a --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const InlineButtonsIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/InputIcon.tsx b/app/client/packages/icons/src/components/Icons/InputIcon.tsx new file mode 100644 index 0000000000..fd209ac8da --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/InputIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const InputIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx b/app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx new file mode 100644 index 0000000000..09a5bd7321 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const KeyValueIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx b/app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx new file mode 100644 index 0000000000..26470441e9 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const MenuButtonIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/ModalIcon.tsx b/app/client/packages/icons/src/components/Icons/ModalIcon.tsx new file mode 100644 index 0000000000..8496db1df6 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/ModalIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ModalIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx b/app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx new file mode 100644 index 0000000000..fb72170e2a --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ParagraphIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/PhoneInputIcon.tsx b/app/client/packages/icons/src/components/Icons/PhoneInputIcon.tsx new file mode 100644 index 0000000000..c0c3b77c6b --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/PhoneInputIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const PhoneInputIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/RadioGroupIcon.tsx b/app/client/packages/icons/src/components/Icons/RadioGroupIcon.tsx new file mode 100644 index 0000000000..9f24ed327c --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/RadioGroupIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const RadioGroupIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/SectionIcon.tsx b/app/client/packages/icons/src/components/Icons/SectionIcon.tsx new file mode 100644 index 0000000000..e1f0889433 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/SectionIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const SectionIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/StatsBoxIcon.tsx b/app/client/packages/icons/src/components/Icons/StatsBoxIcon.tsx new file mode 100644 index 0000000000..48e9f4f9c9 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/StatsBoxIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const StatsBoxIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/SwitchGroupIcon.tsx b/app/client/packages/icons/src/components/Icons/SwitchGroupIcon.tsx new file mode 100644 index 0000000000..babbde8020 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/SwitchGroupIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const SwitchGroupIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/SwitchIcon.tsx b/app/client/packages/icons/src/components/Icons/SwitchIcon.tsx new file mode 100644 index 0000000000..e487c66e50 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/SwitchIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const SwitchIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/TableIcon.tsx b/app/client/packages/icons/src/components/Icons/TableIcon.tsx new file mode 100644 index 0000000000..b5f1b5e98c --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/TableIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const TableIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx b/app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx new file mode 100644 index 0000000000..2c1e7aa2a3 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ToolbarButtonsIcon = () => ; diff --git a/app/client/packages/icons/src/components/Icons/ZoneIcon.tsx b/app/client/packages/icons/src/components/Icons/ZoneIcon.tsx new file mode 100644 index 0000000000..4352f9ad33 --- /dev/null +++ b/app/client/packages/icons/src/components/Icons/ZoneIcon.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ZoneIcon = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/ButtonThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ButtonThumbnail.tsx new file mode 100644 index 0000000000..e094cbfb02 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/ButtonThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ButtonThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/CheckboxGroupThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/CheckboxGroupThumbnail.tsx new file mode 100644 index 0000000000..89d4c96035 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/CheckboxGroupThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const CheckboxGroupThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/CheckboxThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/CheckboxThumbnail.tsx new file mode 100644 index 0000000000..0fb1b66446 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/CheckboxThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const CheckboxThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/CurrencyInputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/CurrencyInputThumbnail.tsx new file mode 100644 index 0000000000..26ceec3f04 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/CurrencyInputThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const CurrencyInputThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/HeadingThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/HeadingThumbnail.tsx new file mode 100644 index 0000000000..133f49dea9 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/HeadingThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const HeadingThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/IconButtonThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/IconButtonThumbnail.tsx new file mode 100644 index 0000000000..7b38c959d4 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/IconButtonThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const IconButtonThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx new file mode 100644 index 0000000000..435cb6fce6 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const InlineButtonsThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/InputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/InputThumbnail.tsx new file mode 100644 index 0000000000..2ec5890f15 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/InputThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const InputThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx new file mode 100644 index 0000000000..848c466cfc --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const KeyValueThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/MenuButtonThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/MenuButtonThumbnail.tsx new file mode 100644 index 0000000000..de371e7412 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/MenuButtonThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const MenuButtonThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/ModalThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ModalThumbnail.tsx new file mode 100644 index 0000000000..66d31520bd --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/ModalThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ModalThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/ParagraphThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ParagraphThumbnail.tsx new file mode 100644 index 0000000000..ceea22e464 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/ParagraphThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ParagraphThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/PhoneInputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/PhoneInputThumbnail.tsx new file mode 100644 index 0000000000..95d2de69e4 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/PhoneInputThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const PhoneInputThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/RadioGroupThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/RadioGroupThumbnail.tsx new file mode 100644 index 0000000000..7505b07b6f --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/RadioGroupThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const RadioGroupThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx new file mode 100644 index 0000000000..a0d6fb9df1 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const StatsBoxThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/SwitchGroupThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/SwitchGroupThumbnail.tsx new file mode 100644 index 0000000000..48a78b2096 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/SwitchGroupThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const SwitchGroupThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/SwitchThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/SwitchThumbnail.tsx new file mode 100644 index 0000000000..cebc8d84d5 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/SwitchThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const SwitchThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/TableThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/TableThumbnail.tsx new file mode 100644 index 0000000000..e30756bff1 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/TableThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const TableThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx new file mode 100644 index 0000000000..d7d2c5f8ea --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ToolbarButtonsThumbnail = () => ; diff --git a/app/client/packages/icons/src/components/Thumbnails/ZoneThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ZoneThumbnail.tsx new file mode 100644 index 0000000000..e6b81df9b3 --- /dev/null +++ b/app/client/packages/icons/src/components/Thumbnails/ZoneThumbnail.tsx @@ -0,0 +1,2 @@ +import React from "react"; +export const ZoneThumbnail = () => ; diff --git a/app/client/packages/icons/src/icons/Icons/Button.svg b/app/client/packages/icons/src/icons/Icons/Button.svg new file mode 100644 index 0000000000..70152e107d --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/Button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/Checkbox.svg b/app/client/packages/icons/src/icons/Icons/Checkbox.svg new file mode 100644 index 0000000000..f9da3356ae --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/Checkbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/CheckboxGroup.svg b/app/client/packages/icons/src/icons/Icons/CheckboxGroup.svg new file mode 100644 index 0000000000..176bc20165 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/CheckboxGroup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/CurrencyInput.svg b/app/client/packages/icons/src/icons/Icons/CurrencyInput.svg new file mode 100644 index 0000000000..0bb07ce557 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/CurrencyInput.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSHeadingWidget/icon.svg b/app/client/packages/icons/src/icons/Icons/Heading.svg similarity index 100% rename from app/client/src/widgets/wds/WDSHeadingWidget/icon.svg rename to app/client/packages/icons/src/icons/Icons/Heading.svg diff --git a/app/client/packages/icons/src/icons/Icons/IconButton.svg b/app/client/packages/icons/src/icons/Icons/IconButton.svg new file mode 100644 index 0000000000..7d30d92e31 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/IconButton.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/InlineButtons.svg b/app/client/packages/icons/src/icons/Icons/InlineButtons.svg new file mode 100644 index 0000000000..b1a16d021b --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/InlineButtons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/Input.svg b/app/client/packages/icons/src/icons/Icons/Input.svg new file mode 100644 index 0000000000..7b6ecec755 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/Input.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/KeyValue.svg b/app/client/packages/icons/src/icons/Icons/KeyValue.svg new file mode 100644 index 0000000000..d96f56a5e9 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/KeyValue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/MenuButton.svg b/app/client/packages/icons/src/icons/Icons/MenuButton.svg new file mode 100644 index 0000000000..3a04f71cd1 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/MenuButton.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/Modal.svg b/app/client/packages/icons/src/icons/Icons/Modal.svg new file mode 100644 index 0000000000..0cba46b9f5 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/Modal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/icon.svg b/app/client/packages/icons/src/icons/Icons/Paragraph.svg similarity index 100% rename from app/client/src/widgets/wds/WDSParagraphWidget/icon.svg rename to app/client/packages/icons/src/icons/Icons/Paragraph.svg diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/icon.svg b/app/client/packages/icons/src/icons/Icons/PhoneInput.svg similarity index 51% rename from app/client/src/widgets/wds/WDSPhoneInputWidget/icon.svg rename to app/client/packages/icons/src/icons/Icons/PhoneInput.svg index 3dceb11a69..9c079b8384 100644 --- a/app/client/src/widgets/wds/WDSPhoneInputWidget/icon.svg +++ b/app/client/packages/icons/src/icons/Icons/PhoneInput.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/RadioGroup.svg b/app/client/packages/icons/src/icons/Icons/RadioGroup.svg new file mode 100644 index 0000000000..c30ea34c11 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/RadioGroup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/Section.svg b/app/client/packages/icons/src/icons/Icons/Section.svg new file mode 100644 index 0000000000..932d11772c --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/Section.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/StatsBox.svg b/app/client/packages/icons/src/icons/Icons/StatsBox.svg new file mode 100644 index 0000000000..7732201f3f --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/StatsBox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/Switch.svg b/app/client/packages/icons/src/icons/Icons/Switch.svg new file mode 100644 index 0000000000..fb608dcd1e --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/Switch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/SwitchGroup.svg b/app/client/packages/icons/src/icons/Icons/SwitchGroup.svg new file mode 100644 index 0000000000..7d646058a0 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/SwitchGroup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/Table.svg b/app/client/packages/icons/src/icons/Icons/Table.svg new file mode 100644 index 0000000000..4eb43c3bc9 --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/Table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/icon.svg b/app/client/packages/icons/src/icons/Icons/ToolbarButtons.svg similarity index 93% rename from app/client/src/widgets/wds/WDSToolbarButtonsWidget/icon.svg rename to app/client/packages/icons/src/icons/Icons/ToolbarButtons.svg index 055c53b029..aabcb5d282 100644 --- a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/icon.svg +++ b/app/client/packages/icons/src/icons/Icons/ToolbarButtons.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Icons/Zone.svg b/app/client/packages/icons/src/icons/Icons/Zone.svg new file mode 100644 index 0000000000..e265517e7a --- /dev/null +++ b/app/client/packages/icons/src/icons/Icons/Zone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/Button.svg b/app/client/packages/icons/src/icons/Thumbnails/Button.svg new file mode 100644 index 0000000000..547ef7ff53 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/Button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/Checkbox.svg b/app/client/packages/icons/src/icons/Thumbnails/Checkbox.svg new file mode 100644 index 0000000000..e2e04b010b --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/Checkbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/CheckboxGroup.svg b/app/client/packages/icons/src/icons/Thumbnails/CheckboxGroup.svg new file mode 100644 index 0000000000..90b040656c --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/CheckboxGroup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/CurrencyInput.svg b/app/client/packages/icons/src/icons/Thumbnails/CurrencyInput.svg new file mode 100644 index 0000000000..7e6041f9c5 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/CurrencyInput.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSHeadingWidget/thumbnail.svg b/app/client/packages/icons/src/icons/Thumbnails/Heading.svg similarity index 53% rename from app/client/src/widgets/wds/WDSHeadingWidget/thumbnail.svg rename to app/client/packages/icons/src/icons/Thumbnails/Heading.svg index ef59badc75..51f4fd2be3 100644 --- a/app/client/src/widgets/wds/WDSHeadingWidget/thumbnail.svg +++ b/app/client/packages/icons/src/icons/Thumbnails/Heading.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/IconButton.svg b/app/client/packages/icons/src/icons/Thumbnails/IconButton.svg new file mode 100644 index 0000000000..302d8cf7e0 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/IconButton.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/InlineButtons.svg b/app/client/packages/icons/src/icons/Thumbnails/InlineButtons.svg new file mode 100644 index 0000000000..2d2eee6826 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/InlineButtons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/Input.svg b/app/client/packages/icons/src/icons/Thumbnails/Input.svg new file mode 100644 index 0000000000..b534375dce --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/Input.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/KeyValue.svg b/app/client/packages/icons/src/icons/Thumbnails/KeyValue.svg new file mode 100644 index 0000000000..345c0cba41 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/KeyValue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/MenuButton.svg b/app/client/packages/icons/src/icons/Thumbnails/MenuButton.svg new file mode 100644 index 0000000000..ed171dffcb --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/MenuButton.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/Modal.svg b/app/client/packages/icons/src/icons/Thumbnails/Modal.svg new file mode 100644 index 0000000000..85122d8027 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/Modal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/thumbnail.svg b/app/client/packages/icons/src/icons/Thumbnails/Paragraph.svg similarity index 100% rename from app/client/src/widgets/wds/WDSParagraphWidget/thumbnail.svg rename to app/client/packages/icons/src/icons/Thumbnails/Paragraph.svg diff --git a/app/client/packages/icons/src/icons/Thumbnails/PhoneInput.svg b/app/client/packages/icons/src/icons/Thumbnails/PhoneInput.svg new file mode 100644 index 0000000000..057f3f14f8 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/PhoneInput.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/RadioGroup.svg b/app/client/packages/icons/src/icons/Thumbnails/RadioGroup.svg new file mode 100644 index 0000000000..23e4dc902c --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/RadioGroup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/StatsBox.svg b/app/client/packages/icons/src/icons/Thumbnails/StatsBox.svg new file mode 100644 index 0000000000..481dd39d8b --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/StatsBox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/Switch.svg b/app/client/packages/icons/src/icons/Thumbnails/Switch.svg new file mode 100644 index 0000000000..251c4fc232 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/Switch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/SwitchGroup.svg b/app/client/packages/icons/src/icons/Thumbnails/SwitchGroup.svg new file mode 100644 index 0000000000..3592e67643 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/SwitchGroup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/Table.svg b/app/client/packages/icons/src/icons/Thumbnails/Table.svg new file mode 100644 index 0000000000..c52df9e398 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/Table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/ToolbarButtons.svg b/app/client/packages/icons/src/icons/Thumbnails/ToolbarButtons.svg new file mode 100644 index 0000000000..324c791c64 --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/ToolbarButtons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/icons/Thumbnails/Zone.svg b/app/client/packages/icons/src/icons/Thumbnails/Zone.svg new file mode 100644 index 0000000000..5476878ccb --- /dev/null +++ b/app/client/packages/icons/src/icons/Thumbnails/Zone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/icons/src/index.ts b/app/client/packages/icons/src/index.ts new file mode 100644 index 0000000000..d6c621a247 --- /dev/null +++ b/app/client/packages/icons/src/index.ts @@ -0,0 +1,41 @@ +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 { HeadingThumbnail } from "./components/Thumbnails/HeadingThumbnail"; +export { IconButtonThumbnail } from "./components/Thumbnails/IconButtonThumbnail"; +export { InlineButtonsThumbnail } from "./components/Thumbnails/InlineButtonsThumbnail"; +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 { ParagraphThumbnail } from "./components/Thumbnails/ParagraphThumbnail"; +export { PhoneInputThumbnail } from "./components/Thumbnails/PhoneInputThumbnail"; +export { RadioGroupThumbnail } from "./components/Thumbnails/RadioGroupThumbnail"; +export { StatsBoxThumbnail } from "./components/Thumbnails/StatsBoxThumbnail"; +export { SwitchGroupThumbnail } from "./components/Thumbnails/SwitchGroupThumbnail"; +export { SwitchThumbnail } from "./components/Thumbnails/SwitchThumbnail"; +export { TableThumbnail } from "./components/Thumbnails/TableThumbnail"; +export { ToolbarButtonsThumbnail } from "./components/Thumbnails/ToolbarButtonsThumbnail"; +export { ZoneThumbnail } from "./components/Thumbnails/ZoneThumbnail"; +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 { HeadingIcon } from "./components/Icons/HeadingIcon"; +export { IconButtonIcon } from "./components/Icons/IconButtonIcon"; +export { InlineButtonsIcon } from "./components/Icons/InlineButtonsIcon"; +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 { ParagraphIcon } from "./components/Icons/ParagraphIcon"; +export { PhoneInputIcon } from "./components/Icons/PhoneInputIcon"; +export { RadioGroupIcon } from "./components/Icons/RadioGroupIcon"; +export { SectionIcon } from "./components/Icons/SectionIcon"; +export { StatsBoxIcon } from "./components/Icons/StatsBoxIcon"; +export { SwitchGroupIcon } from "./components/Icons/SwitchGroupIcon"; +export { SwitchIcon } from "./components/Icons/SwitchIcon"; +export { TableIcon } from "./components/Icons/TableIcon"; +export { ToolbarButtonsIcon } from "./components/Icons/ToolbarButtonsIcon"; +export { ZoneIcon } from "./components/Icons/ZoneIcon"; diff --git a/app/client/packages/icons/src/stories/Icons.mdx b/app/client/packages/icons/src/stories/Icons.mdx new file mode 100644 index 0000000000..ff57c0bbd5 --- /dev/null +++ b/app/client/packages/icons/src/stories/Icons.mdx @@ -0,0 +1,59 @@ +import { Meta } from "@storybook/addon-docs"; +import { Flex } from "@design-system/widgets"; +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 { HeadingIcon } from "../components/Icons/HeadingIcon"; +import { IconButtonIcon } from "../components/Icons/IconButtonIcon"; +import { InlineButtonsIcon } from "../components/Icons/InlineButtonsIcon"; +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 { ParagraphIcon } from "../components/Icons/ParagraphIcon"; +import { PhoneInputIcon } from "../components/Icons/PhoneInputIcon"; +import { RadioGroupIcon } from "../components/Icons/RadioGroupIcon"; +import { SectionIcon } from "../components/Icons/SectionIcon"; +import { StatsBoxIcon } from "../components/Icons/StatsBoxIcon"; +import { SwitchGroupIcon } from "../components/Icons/SwitchGroupIcon"; +import { SwitchIcon } from "../components/Icons/SwitchIcon"; +import { TableIcon } from "../components/Icons/TableIcon"; +import { ToolbarButtonsIcon } from "../components/Icons/ToolbarButtonsIcon"; +import { ZoneIcon } from "../components/Icons/ZoneIcon"; + + + +# Icons + +Icon set for Entity Explorer Panel, which provides a visual representation of the widgets. + +export const Icons = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + + diff --git a/app/client/packages/icons/src/stories/Thumbnails.mdx b/app/client/packages/icons/src/stories/Thumbnails.mdx new file mode 100644 index 0000000000..638e091e95 --- /dev/null +++ b/app/client/packages/icons/src/stories/Thumbnails.mdx @@ -0,0 +1,57 @@ +import { Meta } from "@storybook/addon-docs"; +import { Flex } from "@design-system/widgets"; +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 { HeadingThumbnail } from "../components/Thumbnails/HeadingThumbnail"; +import { IconButtonThumbnail } from "../components/Thumbnails/IconButtonThumbnail"; +import { InlineButtonsThumbnail } from "../components/Thumbnails/InlineButtonsThumbnail"; +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 { ParagraphThumbnail } from "../components/Thumbnails/ParagraphThumbnail"; +import { PhoneInputThumbnail } from "../components/Thumbnails/PhoneInputThumbnail"; +import { RadioGroupThumbnail } from "../components/Thumbnails/RadioGroupThumbnail"; +import { StatsBoxThumbnail } from "../components/Thumbnails/StatsBoxThumbnail"; +import { SwitchGroupThumbnail } from "../components/Thumbnails/SwitchGroupThumbnail"; +import { SwitchThumbnail } from "../components/Thumbnails/SwitchThumbnail"; +import { TableThumbnail } from "../components/Thumbnails/TableThumbnail"; +import { ToolbarButtonsThumbnail } from "../components/Thumbnails/ToolbarButtonsThumbnail"; +import { ZoneThumbnail } from "../components/Thumbnails/ZoneThumbnail"; + + + +# Thumbnails + +Icon set for Widget Explorer Panel, which provides a visual representation of the widgets. + +export const Icons = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}; + + diff --git a/app/client/packages/icons/src/types/svg.d.ts b/app/client/packages/icons/src/types/svg.d.ts new file mode 100644 index 0000000000..2ff147833c --- /dev/null +++ b/app/client/packages/icons/src/types/svg.d.ts @@ -0,0 +1,4 @@ +declare module "*.svg" { + const content: React.FunctionComponent>; + export default content; +} diff --git a/app/client/packages/icons/src/utils/cleanup.ts b/app/client/packages/icons/src/utils/cleanup.ts new file mode 100644 index 0000000000..8deb1ed26f --- /dev/null +++ b/app/client/packages/icons/src/utils/cleanup.ts @@ -0,0 +1,12 @@ +import fs from "fs-extra"; + +async function cleanup() { + await fs.emptyDirSync("./src/icons/Icons"); + await fs.emptyDirSync("./src/icons/Thumbnails"); + await fs.emptyDirSync("./src/components/Icons"); + await fs.emptyDirSync("./src/components/Thumbnails"); + await fs.emptyDirSync("./src/stories"); + await fs.writeFile(`./src/index.ts`, ""); +} + +cleanup(); diff --git a/app/client/packages/icons/src/utils/generateComponents.ts b/app/client/packages/icons/src/utils/generateComponents.ts new file mode 100644 index 0000000000..ac773967ad --- /dev/null +++ b/app/client/packages/icons/src/utils/generateComponents.ts @@ -0,0 +1,52 @@ +import fg from "fast-glob"; +import type { PathLike } from "fs"; +import fs from "fs-extra"; +import path from "path"; + +const createReactComponent = (name: string, svg: string) => { + return `import React from "react"; +export const ${name} = () => ${svg}; +`; +}; + +async function generateComponents() { + const entries = await fg("./src/icons/**/*.svg"); + + entries.map(async (filepath: PathLike) => { + await fs.readFile(filepath, "utf-8", async (err, file) => { + if (err) { + // eslint-disable-next-line no-console + return console.error(err); + } + + const dir = path.dirname(filepath as string).replace("./src/icons/", ""); + let name = path.basename(filepath as string).replace(".svg", ""); + + switch (dir) { + case "Icons": + name += "Icon"; + break; + case "Thumbnails": + name += "Thumbnail"; + break; + } + + await fs.writeFile( + `./src/components/${dir}/${name}.tsx`, + createReactComponent(name, file), + "utf8", + function (err) { + // eslint-disable-next-line no-console + if (err) return console.error(err); + }, + ); + }); + }); + + // eslint-disable-next-line no-console + console.error( + "\x1b[32mReact components generation completed successfully!\x1b[0m", + ); +} + +generateComponents(); diff --git a/app/client/packages/icons/src/utils/generateIndex.ts b/app/client/packages/icons/src/utils/generateIndex.ts new file mode 100644 index 0000000000..eaa99e7430 --- /dev/null +++ b/app/client/packages/icons/src/utils/generateIndex.ts @@ -0,0 +1,39 @@ +import fs from "fs-extra"; + +const createImportListString = (name: string, dir: string) => { + return `export { ${name} } from "./components/${dir}/${name}"; +`; +}; + +async function generateIndex() { + await appendExports("Thumbnails"); + await appendExports("Icons"); + + // eslint-disable-next-line no-console + console.error( + "\x1b[32mIndex.ts file generation completed successfully!\x1b[0m", + ); +} + +async function appendExports(dir: string) { + await fs.readdir(`./src/components/${dir}/`, async (err, files) => { + if (err) { + // eslint-disable-next-line no-console + return console.error(err); + } + + let importList = ``; + + files.forEach((file) => { + const name = file.replace(".tsx", ""); + importList += createImportListString(name, dir); + }); + + await fs.appendFile(`./src/index.ts`, importList, "utf8", function (err) { + // eslint-disable-next-line no-console + if (err) return console.error(err); + }); + }); +} + +generateIndex(); diff --git a/app/client/packages/icons/src/utils/generateStories.ts b/app/client/packages/icons/src/utils/generateStories.ts new file mode 100644 index 0000000000..9f079f6d35 --- /dev/null +++ b/app/client/packages/icons/src/utils/generateStories.ts @@ -0,0 +1,80 @@ +import fs from "fs-extra"; + +const createImportListString = (name: string, dir: string) => { + return `import { ${name} } from "../components/${dir}/${name}"; +`; +}; + +const createComponentListString = (name: string) => { + return `<${name} />`; +}; + +const createStory = ( + title: string, + description: string, + importList: string, + componentList: string, +) => { + return `import { Meta } from "@storybook/addon-docs"; +import { Flex } from "@design-system/widgets"; +${importList} + + +# ${title} + +${description} + +export const Icons = () => { + return ( + + ${componentList} + + ); +}; + + +`; +}; + +async function generateStories() { + await generateStory( + "Thumbnails", + "Icon set for Widget Explorer Panel, which provides a visual representation of the widgets.", + ); + await generateStory( + "Icons", + "Icon set for Entity Explorer Panel, which provides a visual representation of the widgets.", + ); + // eslint-disable-next-line no-console + console.error("\x1b[32mStories generation completed successfully!\x1b[0m"); +} + +async function generateStory(title: string, description: string) { + await fs.readdir(`./src/components/${title}/`, async (err, files) => { + if (err) { + // eslint-disable-next-line no-console + return console.error(err); + } + + let importList = ``; + let componentList = ``; + + files.forEach((file) => { + const name = file.replace(".tsx", ""); + importList += createImportListString(name, title); + componentList += createComponentListString(name); + }); + + await fs.writeFile( + `./src/stories/${title}.mdx`, + createStory(title, description, importList, componentList), + "utf8", + function (err) { + // eslint-disable-next-line no-console + if (err) return console.error(err); + }, + ); + }); +} + +generateStories(); diff --git a/app/client/packages/icons/src/utils/optimizeIcons.ts b/app/client/packages/icons/src/utils/optimizeIcons.ts new file mode 100644 index 0000000000..5fc6cdfa0a --- /dev/null +++ b/app/client/packages/icons/src/utils/optimizeIcons.ts @@ -0,0 +1,29 @@ +#!/usr/bin/env node + +import type { PathLike } from "fs"; +import fg from "fast-glob"; +import fs from "fs-extra"; +import { optimize } from "svgo"; + +async function optimizeIcons() { + const entries = await fg("./src/icons/**/*.svg"); + + entries.map(async (filepath: PathLike) => { + await fs.readFile(filepath, "utf-8", async (err, file) => { + if (err) { + // eslint-disable-next-line no-console + return console.error(err); + } + + await fs.writeFile(filepath, optimize(file).data, "utf8", function (err) { + // eslint-disable-next-line no-console + if (err) return console.error(err); + }); + }); + }); + + // eslint-disable-next-line no-console + console.error("\x1b[32mIcon optimisation completed successfully!\x1b[0m"); +} + +optimizeIcons(); diff --git a/app/client/packages/icons/tsconfig.json b/app/client/packages/icons/tsconfig.json new file mode 100644 index 0000000000..d31268cb1b --- /dev/null +++ b/app/client/packages/icons/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "include": ["./src/**/*"], + "ts-node": { + "compilerOptions": { + "module": "commonjs", + "types": ["node"] + } + } +} diff --git a/app/client/packages/storybook/.storybook/main.ts b/app/client/packages/storybook/.storybook/main.ts index 2916061f5c..0271999d37 100644 --- a/app/client/packages/storybook/.storybook/main.ts +++ b/app/client/packages/storybook/.storybook/main.ts @@ -13,7 +13,7 @@ function getStories() { .sync(`${dsDir}/**/*.stories.@(ts|tsx)`, { nosort: true }) .filter((storyPath) => !storyPath.includes("chromatic")); - return ["../../design-system/**/*.mdx", ...tsStories]; + return ["../../design-system/**/*.mdx", "../../icons/**/*.mdx", ...tsStories]; } const config: StorybookConfig = { diff --git a/app/client/packages/storybook/package.json b/app/client/packages/storybook/package.json index ae12cf9631..606340f510 100644 --- a/app/client/packages/storybook/package.json +++ b/app/client/packages/storybook/package.json @@ -39,6 +39,7 @@ "@design-system/theming": "workspace:^", "@design-system/widgets": "workspace:^", "@design-system/widgets-old": "workspace:^", + "appsmith-icons": "workspace:^", "colorjs.io": "^0.4.3" } } diff --git a/app/client/packages/storybook/src/components/CopyLink.tsx b/app/client/packages/storybook/src/components/CopyLink.tsx index 5fe84f19f5..360c89f3f8 100644 --- a/app/client/packages/storybook/src/components/CopyLink.tsx +++ b/app/client/packages/storybook/src/components/CopyLink.tsx @@ -14,7 +14,7 @@ export const StyledCopyLink = styled.a` &[data-hint="true"]:after { content: "copied"; position: absolute; - right: calc(-1 * var(--sizing-11)); + right: calc(-1 * var(--sizing-13)); color: var(--color-fg-positive); } `; diff --git a/app/client/src/WidgetProvider/constants.ts b/app/client/src/WidgetProvider/constants.ts index 49457b2021..f9df093983 100644 --- a/app/client/src/WidgetProvider/constants.ts +++ b/app/client/src/WidgetProvider/constants.ts @@ -131,6 +131,8 @@ export interface WidgetMethods { getCanvasHeightOffset?: GetCanvasHeightOffset; getEditorCallouts?: GetEditorCallouts; getOneClickBindingConnectableWidgetConfig?: GetOneClickBindingConnectableWidgetConfig; + IconCmp?: () => JSX.Element; + ThumbnailCmp?: () => JSX.Element; } type GetEditorCallouts = (props: WidgetProps) => WidgetCallout[]; diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx index bd39c177a5..ea3a5395a6 100644 --- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx +++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx @@ -1,4 +1,5 @@ import React, { memo, useCallback, useMemo } from "react"; +import WidgetFactory from "../../../../WidgetProvider/factory"; import Entity, { EntityClassNames } from "../Entity"; import type { WidgetProps } from "widgets/BaseWidget"; import type { WidgetType } from "constants/WidgetConstants"; @@ -75,7 +76,9 @@ export interface WidgetEntityProps { export const WidgetEntity = memo((props: WidgetEntityProps) => { const widgetsToExpand = useSelector(getEntityExplorerWidgetsToExpand); - const icon = ; + // If the widget icon is a React component, then we get it from the Widget methods. + const { IconCmp } = WidgetFactory.getWidgetMethods(props.widgetType); + const icon = IconCmp ? : ; const location = useLocation(); const forceExpand = widgetsToExpand.includes(props.widgetId); diff --git a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx index 94b2ba7ab0..4a726eeaae 100644 --- a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx +++ b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx @@ -106,8 +106,8 @@ function WidgetCard(props: CardProps) { }; const type = `${props.details.type.split("_").join("").toLowerCase()}`; - const className = `t--widget-card-draggable t--widget-card-draggable-${type} - }`; + const className = `t--widget-card-draggable t--widget-card-draggable-${type}`; + const { ThumbnailCmp } = props.details; return ( - + {props.details.thumbnail && } + {ThumbnailCmp && } {props.details.displayName} {props.details.isBeta && Beta} diff --git a/app/client/src/pages/Templates/WidgetInfo.tsx b/app/client/src/pages/Templates/WidgetInfo.tsx index d766a50fb5..e9bb86e950 100644 --- a/app/client/src/pages/Templates/WidgetInfo.tsx +++ b/app/client/src/pages/Templates/WidgetInfo.tsx @@ -26,7 +26,10 @@ function WidgetInfo({ widgetType }: WidgetInfoProps) { return ( - + {widgetInfo?.displayName} diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx index b6385c066a..bd894a0a50 100644 --- a/app/client/src/selectors/editorSelectors.tsx +++ b/app/client/src/selectors/editorSelectors.tsx @@ -351,6 +351,10 @@ export const getWidgetCards = createSelector( columns = autoLayoutConfig?.defaults?.columns ?? columns; } + const { IconCmp, ThumbnailCmp } = WidgetFactory.getWidgetMethods( + config.type, + ); + return { key, type, @@ -360,6 +364,8 @@ export const getWidgetCards = createSelector( displayName, icon: iconSVG, thumbnail: thumbnailSVG, + IconCmp, + ThumbnailCmp, searchTags, tags, isDynamicHeight: isAutoHeightEnabledForWidget(config as WidgetProps), diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx index 0d92ec99c9..5582b2b6b6 100644 --- a/app/client/src/widgets/BaseWidget.tsx +++ b/app/client/src/widgets/BaseWidget.tsx @@ -561,6 +561,8 @@ export interface WidgetCardProps { isBeta?: boolean; tags?: WidgetTags[]; isSearchWildcard?: boolean; + IconCmp?: () => JSX.Element; + ThumbnailCmp?: () => JSX.Element; } export const WidgetOperations = { diff --git a/app/client/src/widgets/anvil/SectionWidget/icon.svg b/app/client/src/widgets/anvil/SectionWidget/icon.svg deleted file mode 100644 index 4fe3fb1960..0000000000 --- a/app/client/src/widgets/anvil/SectionWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/anvil/SectionWidget/thumbnail.svg b/app/client/src/widgets/anvil/SectionWidget/thumbnail.svg deleted file mode 100644 index 0de6fe7095..0000000000 --- a/app/client/src/widgets/anvil/SectionWidget/thumbnail.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/app/client/src/widgets/anvil/SectionWidget/widget/config/baseConfig.ts b/app/client/src/widgets/anvil/SectionWidget/widget/config/baseConfig.ts index 7d19de3a13..57f07d6776 100644 --- a/app/client/src/widgets/anvil/SectionWidget/widget/config/baseConfig.ts +++ b/app/client/src/widgets/anvil/SectionWidget/widget/config/baseConfig.ts @@ -1,13 +1,9 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; import type { WidgetBaseConfiguration } from "WidgetProvider/constants"; -import IconSVG from "../../icon.svg"; -import ThumbnailSVG from "../../thumbnail.svg"; export const baseConfig: WidgetBaseConfiguration = { name: "Section", hideCard: true, - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.LAYOUT], isCanvas: true, searchTags: ["div", "parent", "group"], diff --git a/app/client/src/widgets/anvil/SectionWidget/widget/config/index.ts b/app/client/src/widgets/anvil/SectionWidget/widget/config/index.ts index ad71000252..04a85aeccf 100644 --- a/app/client/src/widgets/anvil/SectionWidget/widget/config/index.ts +++ b/app/client/src/widgets/anvil/SectionWidget/widget/config/index.ts @@ -3,6 +3,7 @@ import { baseConfig } from "./baseConfig"; import { defaultConfig } from "./defaultConfig"; import { propertyPaneContent } from "./propertyPaneContent"; import { propertyPaneStyle } from "./propertyPaneStyle"; +import { methodsConfig } from "./methodsConfig"; export { anvilConfig, @@ -10,4 +11,5 @@ export { defaultConfig, propertyPaneContent, propertyPaneStyle, + methodsConfig, }; diff --git a/app/client/src/widgets/anvil/SectionWidget/widget/config/methodsConfig.ts b/app/client/src/widgets/anvil/SectionWidget/widget/config/methodsConfig.ts new file mode 100644 index 0000000000..3ce088f72b --- /dev/null +++ b/app/client/src/widgets/anvil/SectionWidget/widget/config/methodsConfig.ts @@ -0,0 +1,5 @@ +import { SectionIcon } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: SectionIcon, +}; diff --git a/app/client/src/widgets/anvil/SectionWidget/widget/index.tsx b/app/client/src/widgets/anvil/SectionWidget/widget/index.tsx index d9515323bd..cc56bb1c95 100644 --- a/app/client/src/widgets/anvil/SectionWidget/widget/index.tsx +++ b/app/client/src/widgets/anvil/SectionWidget/widget/index.tsx @@ -15,6 +15,7 @@ import { defaultConfig, propertyPaneContent, propertyPaneStyle, + methodsConfig, } from "./config"; import type { WidgetProps, WidgetState } from "widgets/BaseWidget"; import type { LayoutProps } from "layoutSystems/anvil/utils/anvilTypes"; @@ -93,6 +94,10 @@ class SectionWidget extends BaseWidget { return anvilConfig; } + static getMethods() { + return methodsConfig; + } + static getStylesheetConfig(): Stylesheet { return {}; } diff --git a/app/client/src/widgets/anvil/ZoneWidget/icon.svg b/app/client/src/widgets/anvil/ZoneWidget/icon.svg deleted file mode 100644 index 60d6244f6f..0000000000 --- a/app/client/src/widgets/anvil/ZoneWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/anvil/ZoneWidget/thumbnail.svg b/app/client/src/widgets/anvil/ZoneWidget/thumbnail.svg deleted file mode 100644 index a76933031e..0000000000 --- a/app/client/src/widgets/anvil/ZoneWidget/thumbnail.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/app/client/src/widgets/anvil/ZoneWidget/widget/config/baseConfig.ts b/app/client/src/widgets/anvil/ZoneWidget/widget/config/baseConfig.ts index 9172e3fa83..9eae3f9f4b 100644 --- a/app/client/src/widgets/anvil/ZoneWidget/widget/config/baseConfig.ts +++ b/app/client/src/widgets/anvil/ZoneWidget/widget/config/baseConfig.ts @@ -1,12 +1,8 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; import type { WidgetBaseConfiguration } from "WidgetProvider/constants"; -import IconSVG from "../../icon.svg"; -import ThumbnailSVG from "../../thumbnail.svg"; export const baseConfig: WidgetBaseConfiguration = { name: "Zone", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.LAYOUT], isCanvas: true, searchTags: ["div", "parent", "group"], diff --git a/app/client/src/widgets/anvil/ZoneWidget/widget/config/index.ts b/app/client/src/widgets/anvil/ZoneWidget/widget/config/index.ts index ad71000252..04a85aeccf 100644 --- a/app/client/src/widgets/anvil/ZoneWidget/widget/config/index.ts +++ b/app/client/src/widgets/anvil/ZoneWidget/widget/config/index.ts @@ -3,6 +3,7 @@ import { baseConfig } from "./baseConfig"; import { defaultConfig } from "./defaultConfig"; import { propertyPaneContent } from "./propertyPaneContent"; import { propertyPaneStyle } from "./propertyPaneStyle"; +import { methodsConfig } from "./methodsConfig"; export { anvilConfig, @@ -10,4 +11,5 @@ export { defaultConfig, propertyPaneContent, propertyPaneStyle, + methodsConfig, }; diff --git a/app/client/src/widgets/anvil/ZoneWidget/widget/config/methodsConfig.ts b/app/client/src/widgets/anvil/ZoneWidget/widget/config/methodsConfig.ts new file mode 100644 index 0000000000..144772310b --- /dev/null +++ b/app/client/src/widgets/anvil/ZoneWidget/widget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { ZoneIcon, ZoneThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: ZoneIcon, + ThumbnailCmp: ZoneThumbnail, +}; diff --git a/app/client/src/widgets/anvil/ZoneWidget/widget/index.tsx b/app/client/src/widgets/anvil/ZoneWidget/widget/index.tsx index a07f9e0482..4eafc0d63f 100644 --- a/app/client/src/widgets/anvil/ZoneWidget/widget/index.tsx +++ b/app/client/src/widgets/anvil/ZoneWidget/widget/index.tsx @@ -15,6 +15,7 @@ import { defaultConfig, propertyPaneContent, propertyPaneStyle, + methodsConfig, } from "./config"; import BaseWidget from "widgets/BaseWidget"; import type { WidgetProps, WidgetState } from "widgets/BaseWidget"; @@ -56,6 +57,10 @@ class ZoneWidget extends BaseWidget { return propertyPaneStyle; } + static getMethods() { + return methodsConfig; + } + static getAutocompleteDefinitions(): AutocompletionDefinitions { return { isVisible: DefaultAutocompleteDefinitions.isVisible, diff --git a/app/client/src/widgets/wds/WDSBaseInputWidget/icon.svg b/app/client/src/widgets/wds/WDSBaseInputWidget/icon.svg deleted file mode 100644 index 6e3c1fdaef..0000000000 --- a/app/client/src/widgets/wds/WDSBaseInputWidget/icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/app/client/src/widgets/wds/WDSBaseInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSBaseInputWidget/widget/index.tsx index 546a5ad5c8..7af73b2018 100644 --- a/app/client/src/widgets/wds/WDSBaseInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSBaseInputWidget/widget/index.tsx @@ -6,7 +6,6 @@ import { EventType } from "constants/AppsmithActionConstants/ActionConstants"; import type { ExecutionResult } from "constants/AppsmithActionConstants/ActionConstants"; import * as config from "../config"; -import IconSVG from "../icon.svg"; import type { BaseInputWidgetProps } from "./types"; import type { WidgetDefaultProps } from "WidgetProvider/constants"; import { ResponsiveBehavior } from "layoutSystems/common/utils/constants"; @@ -24,7 +23,6 @@ class WDSBaseInputWidget< return { name: "Input", hideCard: true, - iconSVG: IconSVG, needsMeta: true, }; } diff --git a/app/client/src/widgets/wds/WDSButtonWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSButtonWidget/config/metaConfig.ts index 0b48f4a940..7e9fbe5237 100644 --- a/app/client/src/widgets/wds/WDSButtonWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSButtonWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Button", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, needsMeta: false, isCanvas: false, tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.BUTTONS], diff --git a/app/client/src/widgets/wds/WDSButtonWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSButtonWidget/config/methodsConfig.ts index 5117356cdd..fc1f2cedb2 100644 --- a/app/client/src/widgets/wds/WDSButtonWidget/config/methodsConfig.ts +++ b/app/client/src/widgets/wds/WDSButtonWidget/config/methodsConfig.ts @@ -2,6 +2,7 @@ import type { PropertyUpdates, SnipingModeProperty, } from "WidgetProvider/constants"; +import { ButtonIcon, ButtonThumbnail } from "appsmith-icons"; export const methodsConfig = { getSnipingModeUpdates: ( @@ -15,4 +16,6 @@ export const methodsConfig = { }, ]; }, + IconCmp: ButtonIcon, + ThumbnailCmp: ButtonThumbnail, }; diff --git a/app/client/src/widgets/wds/WDSButtonWidget/icon.svg b/app/client/src/widgets/wds/WDSButtonWidget/icon.svg deleted file mode 100644 index fd113a8ebc..0000000000 --- a/app/client/src/widgets/wds/WDSButtonWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSButtonWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSButtonWidget/thumbnail.svg deleted file mode 100644 index 571a63d68e..0000000000 --- a/app/client/src/widgets/wds/WDSButtonWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/index.ts b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/index.ts index 99951f8622..e716c15b30 100644 --- a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/index.ts @@ -5,3 +5,4 @@ export { defaultsConfig } from "./defaultsConfig"; export { featuresConfig } from "./featuresConfig"; export { metaConfig } from "./metaConfig"; export { settersConfig } from "./settersConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/metaConfig.ts index 1d47d3f90c..d36ce2a406 100644 --- a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Checkbox Group", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, }; diff --git a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..10b97c7b89 --- /dev/null +++ b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { CheckboxGroupIcon, CheckboxGroupThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: CheckboxGroupIcon, + ThumbnailCmp: CheckboxGroupThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/icon.svg b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/icon.svg deleted file mode 100644 index da0af83d59..0000000000 --- a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/thumbnail.svg deleted file mode 100644 index 2906313eac..0000000000 --- a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/widget/index.tsx index 2b7869c8a5..21bc9fbf19 100644 --- a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/widget/index.tsx @@ -16,7 +16,8 @@ import { metaConfig, propertyPaneContentConfig, settersConfig, -} from "./../config"; + methodsConfig, +} from "../config"; import { validateInput } from "./helpers"; import type { CheckboxGroupWidgetProps, OptionProps } from "./types"; @@ -78,6 +79,10 @@ class WDSCheckboxGroupWidget extends BaseWidget< }; } + static getMethods() { + return methodsConfig; + } + componentDidUpdate(prevProps: CheckboxGroupWidgetProps) { if ( xor(this.props.defaultSelectedValues, prevProps.defaultSelectedValues) diff --git a/app/client/src/widgets/wds/WDSCheckboxWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSCheckboxWidget/config/metaConfig.ts index 71f9897fc8..9e41115620 100644 --- a/app/client/src/widgets/wds/WDSCheckboxWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSCheckboxWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Checkbox", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, searchTags: ["boolean"], diff --git a/app/client/src/widgets/wds/WDSCheckboxWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSCheckboxWidget/config/methodsConfig.ts index abc9e021f3..9fc6ffc527 100644 --- a/app/client/src/widgets/wds/WDSCheckboxWidget/config/methodsConfig.ts +++ b/app/client/src/widgets/wds/WDSCheckboxWidget/config/methodsConfig.ts @@ -2,6 +2,7 @@ import type { PropertyUpdates, SnipingModeProperty, } from "WidgetProvider/constants"; +import { CheckboxIcon, CheckboxThumbnail } from "appsmith-icons"; export const methodsConfig = { getSnipingModeUpdates: ( @@ -15,4 +16,6 @@ export const methodsConfig = { }, ]; }, + IconCmp: CheckboxIcon, + ThumbnailCmp: CheckboxThumbnail, }; diff --git a/app/client/src/widgets/wds/WDSCheckboxWidget/icon.svg b/app/client/src/widgets/wds/WDSCheckboxWidget/icon.svg deleted file mode 100644 index bb482dac14..0000000000 --- a/app/client/src/widgets/wds/WDSCheckboxWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSCheckboxWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSCheckboxWidget/thumbnail.svg deleted file mode 100644 index f06b7ca13a..0000000000 --- a/app/client/src/widgets/wds/WDSCheckboxWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/index.ts b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/index.ts index 08b08e53c6..5a2da21f55 100644 --- a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/index.ts @@ -6,3 +6,4 @@ export { featuresConfig } from "./featuresConfig"; export { autocompleteConfig } from "./autocompleteConfig"; export { anvilConfig } from "./anvilConfig"; export { propertyPaneContentConfig } from "./propertyPaneConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/metaConfig.ts index 4193b1a768..0eba043d6d 100644 --- a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/metaConfig.ts @@ -1,12 +1,7 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; -import ThumbnailSVG from "../thumbnail.svg"; -import IconSVG from "../icon.svg"; - export const metaConfig = { name: "Currency Input", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.INPUTS], needsMeta: true, searchTags: ["amount", "total"], diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..ca60cff615 --- /dev/null +++ b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { CurrencyInputIcon, CurrencyInputThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: CurrencyInputIcon, + ThumbnailCmp: CurrencyInputThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/icon.svg b/app/client/src/widgets/wds/WDSCurrencyInputWidget/icon.svg deleted file mode 100644 index d0cb083e77..0000000000 --- a/app/client/src/widgets/wds/WDSCurrencyInputWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSCurrencyInputWidget/thumbnail.svg deleted file mode 100644 index 96468c94b8..0000000000 --- a/app/client/src/widgets/wds/WDSCurrencyInputWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSCurrencyInputWidget/widget/index.tsx index 6a3e575787..fcf4d4a14c 100644 --- a/app/client/src/widgets/wds/WDSCurrencyInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSCurrencyInputWidget/widget/index.tsx @@ -58,6 +58,10 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget< return config.settersConfig; } + static getMethods() { + return config.methodsConfig; + } + static getPropertyPaneContentConfig() { const parentConfig = clone(super.getPropertyPaneContentConfig()); const labelSectionIndex = parentConfig.findIndex( diff --git a/app/client/src/widgets/wds/WDSHeadingWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSHeadingWidget/widget/index.tsx index 1d4023bc27..12563bccba 100644 --- a/app/client/src/widgets/wds/WDSHeadingWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSHeadingWidget/widget/index.tsx @@ -2,9 +2,7 @@ import { klona as clone } from "klona"; import { WIDGET_TAGS } from "constants/WidgetConstants"; import { ValidationTypes } from "constants/WidgetValidation"; import { WDSParagraphWidget } from "widgets/wds/WDSParagraphWidget"; - -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; +import { HeadingIcon, HeadingThumbnail } from "appsmith-icons"; class WDSHeadingWidget extends WDSParagraphWidget { static type = "WDS_HEADING_WIDGET"; @@ -14,8 +12,6 @@ class WDSHeadingWidget extends WDSParagraphWidget { ...super.getConfig(), tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.CONTENT], name: "Heading", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, }; } @@ -28,6 +24,14 @@ class WDSHeadingWidget extends WDSParagraphWidget { }; } + static getMethods() { + return { + ...super.getMethods(), + IconCmp: HeadingIcon, + ThumbnailCmp: HeadingThumbnail, + }; + } + static getPropertyPaneContentConfig() { const parentConfig = clone(super.getPropertyPaneContentConfig()); diff --git a/app/client/src/widgets/wds/WDSHeadingWidget/widget/types.ts b/app/client/src/widgets/wds/WDSHeadingWidget/widget/types.ts deleted file mode 100644 index c796c7cfa1..0000000000 --- a/app/client/src/widgets/wds/WDSHeadingWidget/widget/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { WidgetProps } from "widgets/BaseWidget"; - -export interface TextWidgetProps extends WidgetProps {} diff --git a/app/client/src/widgets/wds/WDSIconButtonWidget/config/index.ts b/app/client/src/widgets/wds/WDSIconButtonWidget/config/index.ts index f37645858c..0532bdb136 100644 --- a/app/client/src/widgets/wds/WDSIconButtonWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSIconButtonWidget/config/index.ts @@ -4,3 +4,4 @@ export { defaultsConfig } from "./defaultsConfig"; export { metaConfig } from "./metaConfig"; export { settersConfig } from "./settersConfig"; export { anvilConfig } from "./anvilConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSIconButtonWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSIconButtonWidget/config/metaConfig.ts index 50bc61907b..75c8d0b0a9 100644 --- a/app/client/src/widgets/wds/WDSIconButtonWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSIconButtonWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Icon Button", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.BUTTONS], searchTags: ["click", "submit"], }; diff --git a/app/client/src/widgets/wds/WDSIconButtonWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSIconButtonWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..a15b02bf29 --- /dev/null +++ b/app/client/src/widgets/wds/WDSIconButtonWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { IconButtonIcon, IconButtonThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: IconButtonIcon, + ThumbnailCmp: IconButtonThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSIconButtonWidget/icon.svg b/app/client/src/widgets/wds/WDSIconButtonWidget/icon.svg deleted file mode 100644 index 6ef6d3aa62..0000000000 --- a/app/client/src/widgets/wds/WDSIconButtonWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSIconButtonWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSIconButtonWidget/thumbnail.svg deleted file mode 100644 index cb75c47b11..0000000000 --- a/app/client/src/widgets/wds/WDSIconButtonWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSIconButtonWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSIconButtonWidget/widget/index.tsx index c2582c94d1..d2f11e0457 100644 --- a/app/client/src/widgets/wds/WDSIconButtonWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSIconButtonWidget/widget/index.tsx @@ -50,6 +50,10 @@ class WDSIconButtonWidget extends BaseWidget< return config.settersConfig; } + static getMethods() { + return config.methodsConfig; + } + hasOnClickAction = () => { const { isDisabled, onClick } = this.props; diff --git a/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/index.ts b/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/index.ts index f37645858c..0532bdb136 100644 --- a/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/index.ts @@ -4,3 +4,4 @@ export { defaultsConfig } from "./defaultsConfig"; export { metaConfig } from "./metaConfig"; export { settersConfig } from "./settersConfig"; export { anvilConfig } from "./anvilConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/metaConfig.ts index 65dc42a53c..becbda3e75 100644 --- a/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/metaConfig.ts @@ -1,12 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; - import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Inline Buttons", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, needsMeta: false, isCanvas: false, searchTags: ["click", "submit"], diff --git a/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..b7be21a3fd --- /dev/null +++ b/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { InlineButtonsIcon, InlineButtonsThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: InlineButtonsIcon, + ThumbnailCmp: InlineButtonsThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSInlineButtonsWidget/icon.svg b/app/client/src/widgets/wds/WDSInlineButtonsWidget/icon.svg deleted file mode 100644 index 60e3c8ac85..0000000000 --- a/app/client/src/widgets/wds/WDSInlineButtonsWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSInlineButtonsWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSInlineButtonsWidget/thumbnail.svg deleted file mode 100644 index 8aaff72647..0000000000 --- a/app/client/src/widgets/wds/WDSInlineButtonsWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSInlineButtonsWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSInlineButtonsWidget/widget/index.tsx index 47f2b391bb..d9d830fdef 100644 --- a/app/client/src/widgets/wds/WDSInlineButtonsWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSInlineButtonsWidget/widget/index.tsx @@ -9,7 +9,8 @@ import { propertyPaneContentConfig, settersConfig, anvilConfig, -} from "./../config"; + methodsConfig, +} from "../config"; import type { InlineButtonsWidgetProps } from "./types"; import { InlineButtonsComponent } from "../component"; import type { ExecutionResult } from "constants/AppsmithActionConstants/ActionConstants"; @@ -54,6 +55,10 @@ class WDSInlineButtonsWidget extends BaseWidget< return anvilConfig; } + static getMethods() { + return methodsConfig; + } + onButtonClick = ( onClick: string | undefined, callback?: (result: ExecutionResult) => void, diff --git a/app/client/src/widgets/wds/WDSInputWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSInputWidget/config/metaConfig.ts index 8662aa784c..1d29008f7d 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSInputWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Input", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.INPUTS], needsMeta: true, searchTags: ["form", "text input", "number", "textarea"], diff --git a/app/client/src/widgets/wds/WDSInputWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSInputWidget/config/methodsConfig.ts index b5d3aee62c..bc07a546e6 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/config/methodsConfig.ts +++ b/app/client/src/widgets/wds/WDSInputWidget/config/methodsConfig.ts @@ -2,6 +2,7 @@ import type { PropertyUpdates, SnipingModeProperty, } from "WidgetProvider/constants"; +import { InputIcon, InputThumbnail } from "appsmith-icons"; export const methodsConfig = { getSnipingModeUpdates: ( @@ -15,4 +16,6 @@ export const methodsConfig = { }, ]; }, + IconCmp: InputIcon, + ThumbnailCmp: InputThumbnail, }; diff --git a/app/client/src/widgets/wds/WDSInputWidget/icon.svg b/app/client/src/widgets/wds/WDSInputWidget/icon.svg deleted file mode 100644 index 5e0bfcc233..0000000000 --- a/app/client/src/widgets/wds/WDSInputWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSInputWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSInputWidget/thumbnail.svg deleted file mode 100644 index 59ef02571b..0000000000 --- a/app/client/src/widgets/wds/WDSInputWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx index f3f9198463..c286e09a4a 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx @@ -1,6 +1,5 @@ import React from "react"; import { isNumber, merge, toString } from "lodash"; - import * as config from "../config"; import InputComponent from "../component"; import { INPUT_TYPES } from "../constants"; diff --git a/app/client/src/widgets/wds/WDSKeyValueWidget/icon.svg b/app/client/src/widgets/wds/WDSKeyValueWidget/icon.svg deleted file mode 100644 index da992e7eae..0000000000 --- a/app/client/src/widgets/wds/WDSKeyValueWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSKeyValueWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSKeyValueWidget/thumbnail.svg deleted file mode 100644 index 5e311434fb..0000000000 --- a/app/client/src/widgets/wds/WDSKeyValueWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSKeyValueWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSKeyValueWidget/widget/index.tsx index c0d767dbc8..6e1be03232 100644 --- a/app/client/src/widgets/wds/WDSKeyValueWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSKeyValueWidget/widget/index.tsx @@ -1,6 +1,5 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WDSInputWidget } from "widgets/wds/WDSInputWidget"; +import { KeyValueIcon, KeyValueThumbnail } from "appsmith-icons"; class WDSKeyValueWidget extends WDSInputWidget { static type = "WDS_KEY_VALUE_WIDGET"; @@ -9,8 +8,6 @@ class WDSKeyValueWidget extends WDSInputWidget { return { ...super.getConfig(), name: "KeyValue", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, }; } @@ -21,6 +18,14 @@ class WDSKeyValueWidget extends WDSInputWidget { widgetName: "KeyValue", }; } + + static getMethods() { + return { + ...super.getMethods(), + IconCmp: KeyValueIcon, + ThumbnailCmp: KeyValueThumbnail, + }; + } } export { WDSKeyValueWidget }; diff --git a/app/client/src/widgets/wds/WDSMenuButtonWidget/config/index.ts b/app/client/src/widgets/wds/WDSMenuButtonWidget/config/index.ts index 3233e112d9..ab36e7a74f 100644 --- a/app/client/src/widgets/wds/WDSMenuButtonWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSMenuButtonWidget/config/index.ts @@ -3,3 +3,4 @@ export { autocompleteConfig } from "./autocompleteConfig"; export { defaultsConfig } from "./defaultsConfig"; export { metaConfig } from "./metaConfig"; export { settersConfig } from "./settersConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSMenuButtonWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSMenuButtonWidget/config/metaConfig.ts index d7d08a4f88..7b3569a897 100644 --- a/app/client/src/widgets/wds/WDSMenuButtonWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSMenuButtonWidget/config/metaConfig.ts @@ -1,10 +1,6 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Menu Button", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.BUTTONS], }; diff --git a/app/client/src/widgets/wds/WDSMenuButtonWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSMenuButtonWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..744bb7742f --- /dev/null +++ b/app/client/src/widgets/wds/WDSMenuButtonWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { MenuButtonIcon, MenuButtonThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: MenuButtonIcon, + ThumbnailCmp: MenuButtonThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSMenuButtonWidget/icon.svg b/app/client/src/widgets/wds/WDSMenuButtonWidget/icon.svg deleted file mode 100644 index 877f99ef42..0000000000 --- a/app/client/src/widgets/wds/WDSMenuButtonWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSMenuButtonWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSMenuButtonWidget/thumbnail.svg deleted file mode 100644 index 0a362474f2..0000000000 --- a/app/client/src/widgets/wds/WDSMenuButtonWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSMenuButtonWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSMenuButtonWidget/widget/index.tsx index d55c5d082f..d3b54a7ce3 100644 --- a/app/client/src/widgets/wds/WDSMenuButtonWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSMenuButtonWidget/widget/index.tsx @@ -9,7 +9,8 @@ import { propertyPaneContentConfig, propertyPaneStyleConfig, settersConfig, -} from "./../config"; + methodsConfig, +} from "../config"; import type { AnvilConfig } from "WidgetProvider/constants"; import { Button, Item, Menu, MenuList } from "@design-system/widgets"; import { isArray, orderBy } from "lodash"; @@ -70,6 +71,10 @@ class WDSMenuButtonWidget extends BaseWidget< return settersConfig; } + static getMethods() { + return methodsConfig; + } + menuItemClickHandler = (onClick: string | undefined, index: number) => { if (onClick) { const config: ExecuteTriggerPayload = { diff --git a/app/client/src/widgets/wds/WDSModalWidget/config/index.ts b/app/client/src/widgets/wds/WDSModalWidget/config/index.ts index f83261a22a..35e67adc66 100644 --- a/app/client/src/widgets/wds/WDSModalWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSModalWidget/config/index.ts @@ -2,3 +2,4 @@ export * from "./propertyPaneConfig"; export { defaultsConfig } from "./defaultsConfig"; export { anvilConfig } from "./anvilConfig"; export { metaConfig } from "./metaConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSModalWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSModalWidget/config/metaConfig.ts index e3516cfe6a..b4abd088ee 100644 --- a/app/client/src/widgets/wds/WDSModalWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSModalWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; export const metaConfig = { name: "Modal", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.LAYOUT], needsMeta: true, searchTags: ["dialog", "popup", "notification"], diff --git a/app/client/src/widgets/wds/WDSModalWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSModalWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..82af8462cc --- /dev/null +++ b/app/client/src/widgets/wds/WDSModalWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { ModalThumbnail, ModalIcon } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: ModalIcon, + ThumbnailCmp: ModalThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSModalWidget/icon.svg b/app/client/src/widgets/wds/WDSModalWidget/icon.svg deleted file mode 100644 index 074c479dc0..0000000000 --- a/app/client/src/widgets/wds/WDSModalWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSModalWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSModalWidget/thumbnail.svg deleted file mode 100644 index 4586114d62..0000000000 --- a/app/client/src/widgets/wds/WDSModalWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx index aa054e1c44..c08b07b66a 100644 --- a/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx @@ -24,6 +24,7 @@ import { call } from "redux-saga/effects"; import { pasteWidgetsIntoMainCanvas } from "layoutSystems/anvil/utils/paste/mainCanvasPasteUtils"; import { ModalLayoutProvider } from "layoutSystems/anvil/layoutComponents/ModalLayoutProvider"; import styles from "./styles.module.css"; + class WDSModalWidget extends BaseWidget { static type = "WDS_MODAL_WIDGET"; @@ -55,6 +56,10 @@ class WDSModalWidget extends BaseWidget { return config.propertyPaneStyleConfig; } + static getMethods() { + return config.methodsConfig; + } + static *performPasteOperation( allWidgets: CanvasWidgetsReduxState, copiedWidgets: CopiedWidgetData[], diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/metaConfig.ts index c52cd336c6..8b5c18d377 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/metaConfig.ts @@ -1,12 +1,8 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import type { WidgetTags } from "constants/WidgetConstants"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Paragraph", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.CONTENT] as WidgetTags[], searchTags: ["typography", "paragraph", "label"], }; diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/methodsConfig.ts index 2222c9a73b..00885c164c 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/methodsConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/methodsConfig.ts @@ -2,6 +2,7 @@ import type { PropertyUpdates, SnipingModeProperty, } from "WidgetProvider/constants"; +import { ParagraphIcon, ParagraphThumbnail } from "appsmith-icons"; export const methodsConfig = { getSnipingModeUpdates: ( @@ -15,4 +16,6 @@ export const methodsConfig = { }, ]; }, + IconCmp: ParagraphIcon, + ThumbnailCmp: ParagraphThumbnail, }; diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/config/index.ts b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/index.ts index f95f602ba6..7e6d298a98 100644 --- a/app/client/src/widgets/wds/WDSPhoneInputWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/index.ts @@ -5,3 +5,4 @@ export { metaConfig } from "./metaConfig"; export { propertyPaneContentConfig } from "./propertyPaneConfig"; export { autocompleteConfig } from "./autocompleteConfig"; export { settersConfig } from "./settersConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/metaConfig.ts index 58960a1951..cd750e0bfa 100644 --- a/app/client/src/widgets/wds/WDSPhoneInputWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/metaConfig.ts @@ -1,12 +1,7 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; - export const metaConfig = { name: "Phone Input", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.INPUTS], needsMeta: true, searchTags: ["call"], diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..40f4b38018 --- /dev/null +++ b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { PhoneInputIcon, PhoneInputThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: PhoneInputIcon, + ThumbnailCmp: PhoneInputThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSPhoneInputWidget/thumbnail.svg deleted file mode 100644 index 7cbdf85852..0000000000 --- a/app/client/src/widgets/wds/WDSPhoneInputWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSPhoneInputWidget/widget/index.tsx index 754617ef97..fdb44fd8a2 100644 --- a/app/client/src/widgets/wds/WDSPhoneInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSPhoneInputWidget/widget/index.tsx @@ -45,6 +45,10 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget< return config.anvilConfig; } + static getMethods() { + return config.methodsConfig; + } + static getPropertyPaneContentConfig() { const parentConfig = clone(super.getPropertyPaneContentConfig()); diff --git a/app/client/src/widgets/wds/WDSRadioGroupWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSRadioGroupWidget/config/metaConfig.ts index efd48f2a07..d9f2029543 100644 --- a/app/client/src/widgets/wds/WDSRadioGroupWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSRadioGroupWidget/config/metaConfig.ts @@ -1,12 +1,7 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; - export const metaConfig = { name: "Radio Group", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, searchTags: ["choice"], diff --git a/app/client/src/widgets/wds/WDSRadioGroupWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSRadioGroupWidget/config/methodsConfig.ts index 52906fb8e3..1b8eceeca6 100644 --- a/app/client/src/widgets/wds/WDSRadioGroupWidget/config/methodsConfig.ts +++ b/app/client/src/widgets/wds/WDSRadioGroupWidget/config/methodsConfig.ts @@ -2,6 +2,7 @@ import type { PropertyUpdates, SnipingModeProperty, } from "WidgetProvider/constants"; +import { RadioGroupIcon, RadioGroupThumbnail } from "appsmith-icons"; export const methodsConfig = { getSnipingModeUpdates: ( @@ -15,4 +16,6 @@ export const methodsConfig = { }, ]; }, + IconCmp: RadioGroupIcon, + ThumbnailCmp: RadioGroupThumbnail, }; diff --git a/app/client/src/widgets/wds/WDSRadioGroupWidget/icon.svg b/app/client/src/widgets/wds/WDSRadioGroupWidget/icon.svg deleted file mode 100644 index b2d435b28d..0000000000 --- a/app/client/src/widgets/wds/WDSRadioGroupWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSRadioGroupWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSRadioGroupWidget/thumbnail.svg deleted file mode 100644 index 2c567fe436..0000000000 --- a/app/client/src/widgets/wds/WDSRadioGroupWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/index.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/index.ts index f37645858c..0532bdb136 100644 --- a/app/client/src/widgets/wds/WDSStatBoxWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/index.ts @@ -4,3 +4,4 @@ export { defaultsConfig } from "./defaultsConfig"; export { metaConfig } from "./metaConfig"; export { settersConfig } from "./settersConfig"; export { anvilConfig } from "./anvilConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/metaConfig.ts index 3eb9d8fc12..4537fba5ef 100644 --- a/app/client/src/widgets/wds/WDSStatBoxWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Statbox", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, needsMeta: false, isCanvas: false, searchTags: ["statbox"], diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..328469fe0b --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { StatsBoxIcon, StatsBoxThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: StatsBoxIcon, + ThumbnailCmp: StatsBoxThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/icon.svg b/app/client/src/widgets/wds/WDSStatBoxWidget/icon.svg deleted file mode 100644 index c7b6ca9ea7..0000000000 --- a/app/client/src/widgets/wds/WDSStatBoxWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSStatBoxWidget/thumbnail.svg deleted file mode 100644 index 6dc7ebad33..0000000000 --- a/app/client/src/widgets/wds/WDSStatBoxWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSStatBoxWidget/widget/index.tsx index f1fcbd2f73..8743c626c7 100644 --- a/app/client/src/widgets/wds/WDSStatBoxWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/widget/index.tsx @@ -43,6 +43,10 @@ class WDSStatBoxWidget extends BaseWidget { return config.anvilConfig; } + static getMethods() { + return config.methodsConfig; + } + getWidgetView() { return ; } diff --git a/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/index.ts b/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/index.ts index 47a4551c1e..ff75973ba3 100644 --- a/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/index.ts @@ -5,3 +5,4 @@ export { defaultsConfig } from "./defaultsConfig"; export { featuresConfig } from "./featuresConfig"; export { autocompleteConfig } from "./autocompleteConfig"; export { anvilConfig } from "./anvilConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/metaConfig.ts index 3673e62f65..8fa7ea3053 100644 --- a/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Switch Group", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, }; diff --git a/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..4b74f63592 --- /dev/null +++ b/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { SwitchGroupIcon, SwitchGroupThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: SwitchGroupIcon, + ThumbnailCmp: SwitchGroupThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSSwitchGroupWidget/icon.svg b/app/client/src/widgets/wds/WDSSwitchGroupWidget/icon.svg deleted file mode 100644 index 6d1a35265c..0000000000 --- a/app/client/src/widgets/wds/WDSSwitchGroupWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSSwitchGroupWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSSwitchGroupWidget/thumbnail.svg deleted file mode 100644 index 8fb9a2ddfe..0000000000 --- a/app/client/src/widgets/wds/WDSSwitchGroupWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSSwitchGroupWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSSwitchGroupWidget/widget/index.tsx index b4d45667cc..de66fe4830 100644 --- a/app/client/src/widgets/wds/WDSSwitchGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSSwitchGroupWidget/widget/index.tsx @@ -16,7 +16,8 @@ import { metaConfig, propertyPaneContentConfig, settersConfig, -} from "./../config"; + methodsConfig, +} from "../config"; import { validateInput } from "./helpers"; import type { SwitchGroupWidgetProps, OptionProps } from "./types"; @@ -78,6 +79,10 @@ class WDSSwitchGroupWidget extends BaseWidget< }; } + static getMethods() { + return methodsConfig; + } + componentDidUpdate(prevProps: SwitchGroupWidgetProps) { if ( xor(this.props.defaultSelectedValues, prevProps.defaultSelectedValues) diff --git a/app/client/src/widgets/wds/WDSSwitchWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSSwitchWidget/config/metaConfig.ts index d2c7f085bb..266c4070d2 100644 --- a/app/client/src/widgets/wds/WDSSwitchWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSSwitchWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Switch", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, searchTags: ["boolean"], diff --git a/app/client/src/widgets/wds/WDSSwitchWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSSwitchWidget/config/methodsConfig.ts index 112e9d60b3..48badc2e06 100644 --- a/app/client/src/widgets/wds/WDSSwitchWidget/config/methodsConfig.ts +++ b/app/client/src/widgets/wds/WDSSwitchWidget/config/methodsConfig.ts @@ -2,6 +2,7 @@ import type { PropertyUpdates, SnipingModeProperty, } from "WidgetProvider/constants"; +import { SwitchIcon, SwitchThumbnail } from "appsmith-icons"; export const methodsConfig = { getSnipingModeUpdates: ( @@ -15,4 +16,6 @@ export const methodsConfig = { }, ]; }, + IconCmp: SwitchIcon, + ThumbnailCmp: SwitchThumbnail, }; diff --git a/app/client/src/widgets/wds/WDSSwitchWidget/icon.svg b/app/client/src/widgets/wds/WDSSwitchWidget/icon.svg deleted file mode 100644 index 0b2bd22984..0000000000 --- a/app/client/src/widgets/wds/WDSSwitchWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSSwitchWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSSwitchWidget/thumbnail.svg deleted file mode 100644 index cefa9309cc..0000000000 --- a/app/client/src/widgets/wds/WDSSwitchWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/metaConfig.ts index 7310ee95c1..67c44a4d9d 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/metaConfig.ts @@ -1,11 +1,7 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; export const metaConfig = { name: "Table", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.DISPLAY], needsMeta: true, needsHeightForContent: true, diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/methodsConfig.ts index f5fb30c9d0..bce35acb55 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/methodsConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/methodsConfig.ts @@ -11,8 +11,11 @@ import type { WidgetProps } from "widgets/BaseWidget"; import { ColumnTypes, type TableWidgetProps } from "../constants"; import type { DynamicPath } from "utils/DynamicBindingUtils"; import { createEditActionColumn } from "../widget/utilities"; +import { TableIcon, TableThumbnail } from "appsmith-icons"; export const methodsConfig = { + IconCmp: TableIcon, + ThumbnailCmp: TableThumbnail, getQueryGenerationConfig: (widget: WidgetProps) => { return { select: { diff --git a/app/client/src/widgets/wds/WDSTableWidget/icon.svg b/app/client/src/widgets/wds/WDSTableWidget/icon.svg deleted file mode 100644 index 8e58fde2fe..0000000000 --- a/app/client/src/widgets/wds/WDSTableWidget/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSTableWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSTableWidget/thumbnail.svg deleted file mode 100644 index a155275d8b..0000000000 --- a/app/client/src/widgets/wds/WDSTableWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/index.ts b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/index.ts index f37645858c..0532bdb136 100644 --- a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/index.ts +++ b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/index.ts @@ -4,3 +4,4 @@ export { defaultsConfig } from "./defaultsConfig"; export { metaConfig } from "./metaConfig"; export { settersConfig } from "./settersConfig"; export { anvilConfig } from "./anvilConfig"; +export { methodsConfig } from "./methodsConfig"; diff --git a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/metaConfig.ts index 9f918a1e48..fa59969722 100644 --- a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/metaConfig.ts @@ -1,12 +1,7 @@ -import IconSVG from "../icon.svg"; -import ThumbnailSVG from "../thumbnail.svg"; - import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Toolbar Buttons", - iconSVG: IconSVG, - thumbnailSVG: ThumbnailSVG, needsMeta: false, isCanvas: false, searchTags: ["click", "submit"], diff --git a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..52d88c5d48 --- /dev/null +++ b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/methodsConfig.ts @@ -0,0 +1,6 @@ +import { ToolbarButtonsIcon, ToolbarButtonsThumbnail } from "appsmith-icons"; + +export const methodsConfig = { + IconCmp: ToolbarButtonsIcon, + ThumbnailCmp: ToolbarButtonsThumbnail, +}; diff --git a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/thumbnail.svg b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/thumbnail.svg deleted file mode 100644 index c1c5702620..0000000000 --- a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/thumbnail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/widget/index.tsx index 20ab45c9ea..7184041b3a 100644 --- a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/widget/index.tsx @@ -47,6 +47,10 @@ class WDSToolbarButtonsWidget extends BaseWidget< return config.anvilConfig; } + static getMethods() { + return config.methodsConfig; + } + onButtonClick = ( onClick: string | undefined, callback?: (result: ExecutionResult) => void, diff --git a/app/client/yarn.lock b/app/client/yarn.lock index a63605e1d4..a67e12f7bd 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -3031,6 +3031,7 @@ __metadata: "@storybook/react-vite": ^8.0.8 "@storybook/theming": ^8.0.8 "@vitejs/plugin-react": ^4.2.1 + appsmith-icons: "workspace:^" babel-loader: 9.1.2 chromatic: ^11.3.0 colorjs.io: ^0.4.3 @@ -12933,6 +12934,19 @@ __metadata: languageName: node linkType: hard +"appsmith-icons@workspace:^, appsmith-icons@workspace:packages/icons": + version: 0.0.0-use.local + resolution: "appsmith-icons@workspace:packages/icons" + dependencies: + fast-glob: ^3.3.2 + figmagic: ^4.5.13 + fs-extra: ^11.2.0 + svgo: ^3.2.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 + languageName: unknown + linkType: soft + "appsmith-rts@workspace:packages/rts": version: 0.0.0-use.local resolution: "appsmith-rts@workspace:packages/rts" @@ -13074,6 +13088,7 @@ __metadata: "@uppy/webcam": ^1.8.4 "@welldone-software/why-did-you-render": ^4.2.5 algoliasearch: ^4.2.0 + appsmith-icons: "workspace:^" assert-never: ^1.2.1 astring: ^1.7.5 axios: ^1.6.0 @@ -16271,7 +16286,7 @@ __metadata: languageName: node linkType: hard -"css-tree@npm:^2.2.1": +"css-tree@npm:^2.3.1": version: 2.3.1 resolution: "css-tree@npm:2.3.1" dependencies: @@ -16298,6 +16313,13 @@ __metadata: languageName: node linkType: hard +"css-what@npm:^6.1.0": + version: 6.1.0 + resolution: "css-what@npm:6.1.0" + checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe + languageName: node + linkType: hard + "css.escape@npm:^1.5.0, css.escape@npm:^1.5.1": version: 1.5.1 resolution: "css.escape@npm:1.5.1" @@ -19166,16 +19188,16 @@ __metadata: languageName: node linkType: hard -"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0": - version: 3.3.1 - resolution: "fast-glob@npm:3.3.1" +"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2": + version: 3.3.2 + resolution: "fast-glob@npm:3.3.2" dependencies: "@nodelib/fs.stat": ^2.0.2 "@nodelib/fs.walk": ^1.2.3 glob-parent: ^5.1.2 merge2: ^1.3.0 micromatch: ^4.0.4 - checksum: b6f3add6403e02cf3a798bfbb1183d0f6da2afd368f27456010c0bc1f9640aea308243d4cb2c0ab142f618276e65ecb8be1661d7c62a7b4e5ba774b9ce5432e5 + checksum: 900e4979f4dbc3313840078419245621259f349950411ca2fa445a2f9a1a6d98c3b5e7e0660c5ccd563aa61abe133a21765c6c0dec8e57da1ba71d8000b05ec1 languageName: node linkType: hard @@ -19324,6 +19346,15 @@ __metadata: languageName: node linkType: hard +"figmagic@npm:^4.5.13": + version: 4.5.13 + resolution: "figmagic@npm:4.5.13" + bin: + figmagic: build/index.js + checksum: 59e7efa1272a18932f9c2417299bb71af7ad49fbb2b5e7ad7cd04d4bd9daa4b6ee134773556cb4e357f98a73598243c1170274b72c89de70c8368d523dc5fd0b + languageName: node + linkType: hard + "figures@npm:^3.0.0, figures@npm:^3.2.0": version: 3.2.0 resolution: "figures@npm:3.2.0" @@ -19801,7 +19832,7 @@ __metadata: languageName: node linkType: hard -"fs-extra@npm:11.1.1, fs-extra@npm:^11.1.0": +"fs-extra@npm:11.1.1": version: 11.1.1 resolution: "fs-extra@npm:11.1.1" dependencies: @@ -19823,6 +19854,17 @@ __metadata: languageName: node linkType: hard +"fs-extra@npm:^11.1.0, fs-extra@npm:^11.2.0": + version: 11.2.0 + resolution: "fs-extra@npm:11.2.0" + dependencies: + graceful-fs: ^4.2.0 + jsonfile: ^6.0.1 + universalify: ^2.0.0 + checksum: b12e42fa40ba47104202f57b8480dd098aa931c2724565e5e70779ab87605665594e76ee5fb00545f772ab9ace167fe06d2ab009c416dc8c842c5ae6df7aa7e8 + languageName: node + linkType: hard + "fs-extra@npm:^7.0.1": version: 7.0.1 resolution: "fs-extra@npm:7.0.1" @@ -32330,19 +32372,20 @@ __metadata: languageName: node linkType: hard -"svgo@npm:^3.0.2": - version: 3.0.2 - resolution: "svgo@npm:3.0.2" +"svgo@npm:^3.0.2, svgo@npm:^3.2.0": + version: 3.2.0 + resolution: "svgo@npm:3.2.0" dependencies: "@trysound/sax": 0.2.0 commander: ^7.2.0 css-select: ^5.1.0 - css-tree: ^2.2.1 + css-tree: ^2.3.1 + css-what: ^6.1.0 csso: ^5.0.5 picocolors: ^1.0.0 bin: - svgo: bin/svgo - checksum: 381ba14aa782e71ab7033227634a3041c11fa3e2769aeaf0df43a08a615de61925108e34f55af6e7c5146f4a3109e78deabb4fa9d687e36d45d1f848b4e23d17 + svgo: ./bin/svgo + checksum: 42168748a5586d85d447bec2867bc19814a4897f973ff023e6aad4ff19ba7408be37cf3736e982bb78e3f1e52df8785da5dca77a8ebc64c0ebd6fcf9915d2895 languageName: node linkType: hard