From 260bfc9b11c79ce6e6188d4887f1739b6516073a Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 3 Sep 2024 11:09:45 +0530 Subject: [PATCH 1/8] add code for paragraph-text morphing --- .../config/contentConfig.ts | 3 ++ .../widgets/wds/WDSBaseInputWidget/helpers.ts | 40 +++++++++++++++++++ .../config/propertyPaneConfig/styleConfig.ts | 3 ++ .../wds/WDSParagraphWidget/constants.ts | 6 +++ .../widgets/wds/WDSParagraphWidget/helpers.ts | 27 +++++++++++++ 5 files changed, 79 insertions(+) create mode 100644 app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts create mode 100644 app/client/src/widgets/wds/WDSParagraphWidget/constants.ts create mode 100644 app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts diff --git a/app/client/src/widgets/wds/WDSBaseInputWidget/config/contentConfig.ts b/app/client/src/widgets/wds/WDSBaseInputWidget/config/contentConfig.ts index 25aaeabd6e82..af7adcd8f537 100644 --- a/app/client/src/widgets/wds/WDSBaseInputWidget/config/contentConfig.ts +++ b/app/client/src/widgets/wds/WDSBaseInputWidget/config/contentConfig.ts @@ -1,5 +1,6 @@ import { ValidationTypes } from "constants/WidgetValidation"; +import { isReadOnlyUpdateHook } from "../helpers"; import type { BaseInputWidgetProps } from "../widget/types"; export const propertyPaneContentConfig = [ @@ -121,6 +122,8 @@ export const propertyPaneContentConfig = [ isJSConvertible: true, isBindProperty: true, isTriggerProperty: false, + dependencies: ["type", "inputType"], + updateHook: isReadOnlyUpdateHook, validation: { type: ValidationTypes.BOOLEAN }, }, { diff --git a/app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts b/app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts new file mode 100644 index 000000000000..fa71672fdfc2 --- /dev/null +++ b/app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts @@ -0,0 +1,40 @@ +import type { WidgetProps } from "widgets/BaseWidget"; +import type { PropertyUpdates } from "WidgetProvider/constants"; +import type { InputType } from "../WDSInputWidget/component/types"; +import { INPUT_TYPE_TO_WIDGET_TYPE_MAP } from "../WDSInputWidget/constants"; + +export function isReadOnlyUpdateHook( + props: WidgetProps, + propertyName: string, + propertyValue: boolean, +) { + const updates: PropertyUpdates[] = [ + { + propertyPath: propertyName, + propertyValue: propertyValue, + }, + ]; + + // if user is marking readOnly as true and if the input type is not INPUT_CURRENCY_WIDGET or INPUT_PHONE_WIDGET, + // then we need to update the type to WDS_KEY_VALUE_WIDGET + if ( + !["WDS_CURRENCY_INPUT_WIDGET", "WDS_PHONE_INPUT_WIDGET"].includes( + props.type, + ) + ) { + if (propertyValue) { + updates.push({ + propertyPath: "type", + propertyValue: "WDS_KEY_VALUE_WIDGET", + }); + } else { + updates.push({ + propertyPath: "type", + propertyValue: + INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType], + }); + } + } + + return updates; +} diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts index e8aed4f314d6..883a9c71b0a0 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts @@ -1,6 +1,8 @@ import { TYPOGRAPHY_VARIANTS } from "@appsmith/wds-theming"; import { ValidationTypes } from "constants/WidgetValidation"; +import { fontSizeUpdateHook } from "../../helpers"; + export const propertyPaneStyleConfig = [ { sectionName: "General", @@ -33,6 +35,7 @@ export const propertyPaneStyleConfig = [ isBindProperty: true, isTriggerProperty: false, isReusable: true, + updateHook: fontSizeUpdateHook, validation: { type: ValidationTypes.TEXT, params: { diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts b/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts new file mode 100644 index 000000000000..9640cf66cd44 --- /dev/null +++ b/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts @@ -0,0 +1,6 @@ +export const FONT_SIZE_TO_WIDGET_TYPE_MAP = { + body: "WDS_PARAGRAPH_WIDGET", + subtitle: "WDS_PARAGRAPH_WIDGET", + title: "WDS_PARAGRAPH_WIDGET", + heading: "WDS_HEADING_WIDGET", +}; diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts b/app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts new file mode 100644 index 000000000000..a49c9c87c536 --- /dev/null +++ b/app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts @@ -0,0 +1,27 @@ +import type { PropertyUpdates } from "WidgetProvider/constants"; +import type { WidgetProps } from "widgets/BaseWidget"; + +import { FONT_SIZE_TO_WIDGET_TYPE_MAP } from "./constants"; + +export function fontSizeUpdateHook( + props: WidgetProps, + propertyName: string, + propertyValue: string, +) { + const updates: PropertyUpdates[] = [ + { + propertyPath: propertyName, + propertyValue: propertyValue, + }, + ]; + + updates.push({ + propertyPath: "type", + propertyValue: + FONT_SIZE_TO_WIDGET_TYPE_MAP[ + propertyValue as keyof typeof FONT_SIZE_TO_WIDGET_TYPE_MAP + ], + }); + + return updates; +} From 572f5aee56bc707b00e488f9d73b3ebeb21077f4 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 3 Sep 2024 11:36:50 +0530 Subject: [PATCH 2/8] remove cyclic import --- .../constants.ts | 0 .../widgets/wds/WDSBaseInputWidget/helpers.ts | 25 ++++++++----------- .../widgets/wds/WDSBaseInputWidget/index.ts | 3 +++ .../widgets/wds/WDSBaseInputWidget/types.ts | 3 +++ .../wds/WDSEmailInputWidget/widget/index.tsx | 2 +- .../wds/WDSInputWidget/component/index.tsx | 4 +-- .../wds/WDSInputWidget/component/types.ts | 6 ++--- .../wds/WDSInputWidget/widget/helper.ts | 9 ++++--- .../wds/WDSInputWidget/widget/index.tsx | 2 +- .../WDSMultilineInputWidget/widget/index.tsx | 4 +-- .../wds/WDSNumberInputWidget/widget/index.tsx | 2 +- .../WDSPasswordInputWidget/widget/index.tsx | 4 +-- .../widgets/wds/WDSPhoneInputWidget/index.ts | 1 + 13 files changed, 34 insertions(+), 31 deletions(-) rename app/client/src/widgets/wds/{WDSInputWidget => WDSBaseInputWidget}/constants.ts (100%) create mode 100644 app/client/src/widgets/wds/WDSBaseInputWidget/types.ts diff --git a/app/client/src/widgets/wds/WDSInputWidget/constants.ts b/app/client/src/widgets/wds/WDSBaseInputWidget/constants.ts similarity index 100% rename from app/client/src/widgets/wds/WDSInputWidget/constants.ts rename to app/client/src/widgets/wds/WDSBaseInputWidget/constants.ts diff --git a/app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts b/app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts index fa71672fdfc2..12c1f2e7489a 100644 --- a/app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts +++ b/app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts @@ -1,7 +1,8 @@ import type { WidgetProps } from "widgets/BaseWidget"; import type { PropertyUpdates } from "WidgetProvider/constants"; -import type { InputType } from "../WDSInputWidget/component/types"; -import { INPUT_TYPE_TO_WIDGET_TYPE_MAP } from "../WDSInputWidget/constants"; + +import type { InputType } from "./types"; +import { INPUT_TYPE_TO_WIDGET_TYPE_MAP } from "./constants"; export function isReadOnlyUpdateHook( props: WidgetProps, @@ -16,24 +17,18 @@ export function isReadOnlyUpdateHook( ]; // if user is marking readOnly as true and if the input type is not INPUT_CURRENCY_WIDGET or INPUT_PHONE_WIDGET, - // then we need to update the type to WDS_KEY_VALUE_WIDGET + // then we update the type to WDS_KEY_VALUE_WIDGET, else we update the type based on the input type if ( !["WDS_CURRENCY_INPUT_WIDGET", "WDS_PHONE_INPUT_WIDGET"].includes( props.type, ) ) { - if (propertyValue) { - updates.push({ - propertyPath: "type", - propertyValue: "WDS_KEY_VALUE_WIDGET", - }); - } else { - updates.push({ - propertyPath: "type", - propertyValue: - INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType], - }); - } + updates.push({ + propertyPath: "type", + propertyValue: propertyValue + ? "WDS_KEY_VALUE_WIDGET" + : INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType], + }); } return updates; diff --git a/app/client/src/widgets/wds/WDSBaseInputWidget/index.ts b/app/client/src/widgets/wds/WDSBaseInputWidget/index.ts index f2620b05952d..624925243085 100644 --- a/app/client/src/widgets/wds/WDSBaseInputWidget/index.ts +++ b/app/client/src/widgets/wds/WDSBaseInputWidget/index.ts @@ -1,5 +1,8 @@ import { WDSBaseInputWidget } from "./widget"; export { WDSBaseInputWidget }; + +export * from "./types"; +export * from "./constants"; export type { BaseInputWidgetProps } from "./widget/types"; export type { BaseInputComponentProps } from "./component/types"; diff --git a/app/client/src/widgets/wds/WDSBaseInputWidget/types.ts b/app/client/src/widgets/wds/WDSBaseInputWidget/types.ts new file mode 100644 index 000000000000..81d8cf3e1ba1 --- /dev/null +++ b/app/client/src/widgets/wds/WDSBaseInputWidget/types.ts @@ -0,0 +1,3 @@ +import type { INPUT_TYPES } from "./constants"; + +export type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES]; diff --git a/app/client/src/widgets/wds/WDSEmailInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSEmailInputWidget/widget/index.tsx index 332d42413c7a..721bb9e0e6ec 100644 --- a/app/client/src/widgets/wds/WDSEmailInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSEmailInputWidget/widget/index.tsx @@ -1,7 +1,7 @@ import { WDSInputWidget } from "widgets/wds/WDSInputWidget"; import { EmailInputIcon, EmailInputThumbnail } from "appsmith-icons"; import { WIDGET_TAGS } from "constants/WidgetConstants"; -import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants"; +import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget"; import type { WidgetBaseConfiguration } from "WidgetProvider/constants"; class WDSEmailInputWidget extends WDSInputWidget { diff --git a/app/client/src/widgets/wds/WDSInputWidget/component/index.tsx b/app/client/src/widgets/wds/WDSInputWidget/component/index.tsx index c7b16e234a95..2f01a175e887 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/component/index.tsx +++ b/app/client/src/widgets/wds/WDSInputWidget/component/index.tsx @@ -2,10 +2,10 @@ import React from "react"; import { isNil } from "lodash"; import { TextInput } from "@appsmith/wds"; import { Icon, TextArea } from "@appsmith/wds"; +import { useDebouncedValue } from "@mantine/hooks"; +import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget"; -import { INPUT_TYPES } from "../constants"; import type { InputComponentProps } from "./types"; -import { useDebouncedValue } from "@mantine/hooks"; const DEBOUNCE_TIME = 300; diff --git a/app/client/src/widgets/wds/WDSInputWidget/component/types.ts b/app/client/src/widgets/wds/WDSInputWidget/component/types.ts index 547c77e81787..6a254d53fa0f 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/component/types.ts +++ b/app/client/src/widgets/wds/WDSInputWidget/component/types.ts @@ -1,9 +1,7 @@ import type { IconProps } from "@appsmith/wds"; -import type { BaseInputComponentProps } from "../../WDSBaseInputWidget"; - -import type { INPUT_TYPES } from "../constants"; +import type { InputType } from "widgets/wds/WDSBaseInputWidget/types"; -export type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES]; +import type { BaseInputComponentProps } from "../../WDSBaseInputWidget"; export interface InputComponentProps extends BaseInputComponentProps { inputType: InputType; diff --git a/app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts b/app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts index acc3392993df..203420a10d55 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts +++ b/app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts @@ -8,13 +8,16 @@ import { INPUT_INVALID_TYPE_ERROR, INPUT_TEXT_MAX_CHAR_ERROR, } from "ee/constants/messages"; -import type { InputType } from "../component/types"; +import type { InputType } from "widgets/wds/WDSBaseInputWidget"; import type { WidgetProps } from "widgets/BaseWidget"; import type { InputWidgetProps, Validation } from "./types"; -import { INPUT_TYPE_TO_WIDGET_TYPE_MAP, INPUT_TYPES } from "../constants"; +import { + INPUT_TYPE_TO_WIDGET_TYPE_MAP, + INPUT_TYPES, +} from "widgets/wds/WDSBaseInputWidget"; import type { PropertyUpdates } from "WidgetProvider/constants"; -import { getDefaultISDCode } from "widgets/wds/WDSPhoneInputWidget/constants"; +import { getDefaultISDCode } from "widgets/wds/WDSPhoneInputWidget"; import { getDefaultCurrency } from "widgets/wds/WDSCurrencyInputWidget/constants"; /** diff --git a/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx index 71698b222a2f..5d8730189a84 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx @@ -2,7 +2,6 @@ import React from "react"; import { isNumber, merge, toString } from "lodash"; import * as config from "../config"; import InputComponent from "../component"; -import { INPUT_TYPES } from "../constants"; import type { InputWidgetProps } from "./types"; import { mergeWidgetConfig } from "utils/helpers"; import { parseText, validateInput } from "./helper"; @@ -14,6 +13,7 @@ import type { DerivedPropertiesMap } from "WidgetProvider/factory"; import { EventType } from "constants/AppsmithActionConstants/ActionConstants"; import type { KeyDownEvent } from "widgets/wds/WDSBaseInputWidget/component/types"; import type { WidgetBaseConfiguration } from "WidgetProvider/constants"; +import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget/constants"; class WDSInputWidget extends WDSBaseInputWidget { static type = "WDS_INPUT_WIDGET"; diff --git a/app/client/src/widgets/wds/WDSMultilineInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSMultilineInputWidget/widget/index.tsx index d7174375c8b6..413950312c4a 100644 --- a/app/client/src/widgets/wds/WDSMultilineInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSMultilineInputWidget/widget/index.tsx @@ -1,8 +1,8 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; import { WDSInputWidget } from "widgets/wds/WDSInputWidget"; -import { MultilineInputIcon, MultilineInputThumbnail } from "appsmith-icons"; -import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants"; import type { WidgetBaseConfiguration } from "WidgetProvider/constants"; +import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget/constants"; +import { MultilineInputIcon, MultilineInputThumbnail } from "appsmith-icons"; class WDSMultilineInputWidget extends WDSInputWidget { static type = "WDS_MULTILINE_INPUT_WIDGET"; diff --git a/app/client/src/widgets/wds/WDSNumberInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSNumberInputWidget/widget/index.tsx index f5404cf22d76..0f67165c9c91 100644 --- a/app/client/src/widgets/wds/WDSNumberInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSNumberInputWidget/widget/index.tsx @@ -1,8 +1,8 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; import { WDSInputWidget } from "widgets/wds/WDSInputWidget"; import { NumberInputIcon, NumberInputThumbnail } from "appsmith-icons"; -import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants"; import type { WidgetBaseConfiguration } from "WidgetProvider/constants"; +import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget/constants"; class WDSNumberInputWidget extends WDSInputWidget { static type = "WDS_NUMBER_INPUT_WIDGET"; diff --git a/app/client/src/widgets/wds/WDSPasswordInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSPasswordInputWidget/widget/index.tsx index 69b17b523d81..a47776ab386b 100644 --- a/app/client/src/widgets/wds/WDSPasswordInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSPasswordInputWidget/widget/index.tsx @@ -1,8 +1,8 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; import { WDSInputWidget } from "widgets/wds/WDSInputWidget"; -import { PasswordInputIcon, PasswordInputThumbnail } from "appsmith-icons"; -import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants"; +import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget/constants"; import type { WidgetBaseConfiguration } from "WidgetProvider/constants"; +import { PasswordInputIcon, PasswordInputThumbnail } from "appsmith-icons"; class WDSPasswordInputWidget extends WDSInputWidget { static type = "WDS_PASSWORD_INPUT_WIDGET"; diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/index.ts b/app/client/src/widgets/wds/WDSPhoneInputWidget/index.ts index e90ae83f8e38..7b18e9188ff3 100644 --- a/app/client/src/widgets/wds/WDSPhoneInputWidget/index.ts +++ b/app/client/src/widgets/wds/WDSPhoneInputWidget/index.ts @@ -1 +1,2 @@ +export * from "./constants"; export { WDSPhoneInputWidget } from "./widget"; From 67e82111583536a2c7ac0d90a6e94b6603c9e722 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 3 Sep 2024 13:17:16 +0530 Subject: [PATCH 3/8] incorporate feedback --- app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts | 2 +- .../config/propertyPaneConfig/styleConfig.ts | 1 - app/client/src/widgets/wds/WDSParagraphWidget/constants.ts | 4 ++-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts b/app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts index 203420a10d55..d5799e2d9319 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts +++ b/app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts @@ -17,7 +17,7 @@ import { INPUT_TYPES, } from "widgets/wds/WDSBaseInputWidget"; import type { PropertyUpdates } from "WidgetProvider/constants"; -import { getDefaultISDCode } from "widgets/wds/WDSPhoneInputWidget"; +import { getDefaultISDCode } from "widgets/wds/WDSPhoneInputWidget/constants"; import { getDefaultCurrency } from "widgets/wds/WDSCurrencyInputWidget/constants"; /** diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts index 883a9c71b0a0..06df5d9bbf93 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts @@ -34,7 +34,6 @@ export const propertyPaneStyleConfig = [ isJSConvertible: true, isBindProperty: true, isTriggerProperty: false, - isReusable: true, updateHook: fontSizeUpdateHook, validation: { type: ValidationTypes.TEXT, diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts b/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts index 9640cf66cd44..401777f47cb0 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts @@ -1,6 +1,6 @@ export const FONT_SIZE_TO_WIDGET_TYPE_MAP = { body: "WDS_PARAGRAPH_WIDGET", - subtitle: "WDS_PARAGRAPH_WIDGET", - title: "WDS_PARAGRAPH_WIDGET", + subtitle: "WDS_HEADING_WIDGET", + title: "WDS_HEADING_WIDGET", heading: "WDS_HEADING_WIDGET", }; From 68ce8f2d2bb7e8aea5b6afec8efc944bde107b08 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 3 Sep 2024 13:45:09 +0530 Subject: [PATCH 4/8] fix hydration of font style in paragraph widget --- .../src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts index e05fd9f14e00..7ef9b968ffd8 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts @@ -11,6 +11,7 @@ export const defaultsConfig = { fontSize: "body", textAlign: "left", textColor: "neutral", + fontStyle: "", widgetName: "Paragraph", shouldTruncate: false, version: 1, From 1b1d2abdf4ed10869dad79fda81da9c9a218159f Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 3 Sep 2024 13:56:42 +0530 Subject: [PATCH 5/8] fix hydration of font style in paragraph widget --- .../integrations/sagas/anvilWidgetAdditionSagas/helpers.ts | 1 - .../src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts index 12cbe8e3ab74..b02a03b79f28 100644 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts @@ -43,7 +43,6 @@ export function getWidgetSessionValues( } for (const key in configMap) { - if (configMap[key] === undefined) continue; let sessionStorageKey = `${widgetType}.${key}`; if (type === "ZONE_WIDGET") { diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts index 7ef9b968ffd8..d06d70a414a6 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts @@ -11,7 +11,7 @@ export const defaultsConfig = { fontSize: "body", textAlign: "left", textColor: "neutral", - fontStyle: "", + fontStyle: undefined, widgetName: "Paragraph", shouldTruncate: false, version: 1, From e1b3c9ff3d14397a91648c2fbf9f6b04a8ecb80d Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 4 Sep 2024 10:56:28 +0530 Subject: [PATCH 6/8] update types --- app/client/src/widgets/wds/WDSParagraphWidget/constants.ts | 2 +- app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts b/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts index 401777f47cb0..667d8d10ad14 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/constants.ts @@ -3,4 +3,4 @@ export const FONT_SIZE_TO_WIDGET_TYPE_MAP = { subtitle: "WDS_HEADING_WIDGET", title: "WDS_HEADING_WIDGET", heading: "WDS_HEADING_WIDGET", -}; +} as const; diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts b/app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts index a49c9c87c536..29805cf95fd3 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts @@ -6,7 +6,7 @@ import { FONT_SIZE_TO_WIDGET_TYPE_MAP } from "./constants"; export function fontSizeUpdateHook( props: WidgetProps, propertyName: string, - propertyValue: string, + propertyValue: keyof typeof FONT_SIZE_TO_WIDGET_TYPE_MAP, ) { const updates: PropertyUpdates[] = [ { @@ -17,10 +17,7 @@ export function fontSizeUpdateHook( updates.push({ propertyPath: "type", - propertyValue: - FONT_SIZE_TO_WIDGET_TYPE_MAP[ - propertyValue as keyof typeof FONT_SIZE_TO_WIDGET_TYPE_MAP - ], + propertyValue: FONT_SIZE_TO_WIDGET_TYPE_MAP[propertyValue], }); return updates; From c8be2f86afb36a32028738b6a99037645c649ad6 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 4 Sep 2024 11:08:01 +0530 Subject: [PATCH 7/8] add unit test for the hook --- .../__tests__/helpers.test.ts | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 app/client/src/widgets/wds/WDSParagraphWidget/__tests__/helpers.test.ts diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/__tests__/helpers.test.ts b/app/client/src/widgets/wds/WDSParagraphWidget/__tests__/helpers.test.ts new file mode 100644 index 000000000000..28d5f818171e --- /dev/null +++ b/app/client/src/widgets/wds/WDSParagraphWidget/__tests__/helpers.test.ts @@ -0,0 +1,38 @@ +import type { WidgetProps } from "widgets/BaseWidget"; +import { fontSizeUpdateHook } from "../helpers"; + +describe("fontSizeUpdateHook", () => { + it("should update the font size and type", () => { + const props = { + type: "WDS_PARAGRAPH_WIDGET", + } as unknown as WidgetProps; + + const updates = fontSizeUpdateHook(props, "fontSize", "heading"); + + expect(updates).toEqual([ + { propertyPath: "fontSize", propertyValue: "heading" }, + { propertyPath: "type", propertyValue: "WDS_HEADING_WIDGET" }, + ]); + + const updates2 = fontSizeUpdateHook(props, "fontSize", "body"); + + expect(updates2).toEqual([ + { propertyPath: "fontSize", propertyValue: "body" }, + { propertyPath: "type", propertyValue: "WDS_PARAGRAPH_WIDGET" }, + ]); + + const updates3 = fontSizeUpdateHook(props, "fontSize", "subtitle"); + + expect(updates3).toEqual([ + { propertyPath: "fontSize", propertyValue: "subtitle" }, + { propertyPath: "type", propertyValue: "WDS_HEADING_WIDGET" }, + ]); + + const updates4 = fontSizeUpdateHook(props, "fontSize", "title"); + + expect(updates4).toEqual([ + { propertyPath: "fontSize", propertyValue: "title" }, + { propertyPath: "type", propertyValue: "WDS_HEADING_WIDGET" }, + ]); + }); +}); From 395574adcedb9da91bb49c5ed7e9415d03fd6f87 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 4 Sep 2024 11:15:58 +0530 Subject: [PATCH 8/8] add unit test for the isReadOnlyUpdateHook --- .../__tests__/helpers.test.ts | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 app/client/src/widgets/wds/WDSBaseInputWidget/__tests__/helpers.test.ts diff --git a/app/client/src/widgets/wds/WDSBaseInputWidget/__tests__/helpers.test.ts b/app/client/src/widgets/wds/WDSBaseInputWidget/__tests__/helpers.test.ts new file mode 100644 index 000000000000..3b58f2a7d466 --- /dev/null +++ b/app/client/src/widgets/wds/WDSBaseInputWidget/__tests__/helpers.test.ts @@ -0,0 +1,64 @@ +import type { WidgetProps } from "widgets/BaseWidget"; +import { isReadOnlyUpdateHook } from "../helpers"; + +describe("isReadOnlyUpdateHook", () => { + it("should return the correct updates for input widget", () => { + const props1 = { + type: "WDS_INPUT_WIDGET", + inputType: "TEXT", + } as unknown as WidgetProps; + + const updates = isReadOnlyUpdateHook(props1, "readOnly", true); + expect(updates).toEqual([ + { propertyPath: "readOnly", propertyValue: true }, + { propertyPath: "type", propertyValue: "WDS_KEY_VALUE_WIDGET" }, + ]); + + const updates2 = isReadOnlyUpdateHook(props1, "readOnly", false); + expect(updates2).toEqual([ + { propertyPath: "readOnly", propertyValue: false }, + { propertyPath: "type", propertyValue: "WDS_INPUT_WIDGET" }, + ]); + + const props2 = { + type: "WDS_EMAIL_INPUT_WIDGET", + inputType: "EMAIL", + } as unknown as WidgetProps; + + const updates3 = isReadOnlyUpdateHook(props2, "readOnly", true); + expect(updates3).toEqual([ + { propertyPath: "readOnly", propertyValue: true }, + { propertyPath: "type", propertyValue: "WDS_KEY_VALUE_WIDGET" }, + ]); + + const updates4 = isReadOnlyUpdateHook(props2, "readOnly", false); + expect(updates4).toEqual([ + { propertyPath: "readOnly", propertyValue: false }, + { propertyPath: "type", propertyValue: "WDS_EMAIL_INPUT_WIDGET" }, + ]); + }); + + it("should not change the type for currency widget", () => { + const props = { + type: "WDS_CURRENCY_INPUT_WIDGET", + inputType: "CURRENCY", + } as unknown as WidgetProps; + + const updates = isReadOnlyUpdateHook(props, "readOnly", true); + expect(updates).toEqual([ + { propertyPath: "readOnly", propertyValue: true }, + ]); + }); + + it("should not change the type for phone widget", () => { + const props = { + type: "WDS_PHONE_INPUT_WIDGET", + inputType: "PHONE", + } as unknown as WidgetProps; + + const updates = isReadOnlyUpdateHook(props, "readOnly", true); + expect(updates).toEqual([ + { propertyPath: "readOnly", propertyValue: true }, + ]); + }); +});