diff --git a/app/client/src/components/wds/constants.ts b/app/client/src/components/wds/constants.ts index b7f75929ee..c89ff8b026 100644 --- a/app/client/src/components/wds/constants.ts +++ b/app/client/src/components/wds/constants.ts @@ -2,5 +2,6 @@ export const WDS_V2_WIDGET_MAP = { BUTTON_WIDGET: "WDS_BUTTON_WIDGET", INPUT_WIDGET_V2: "WDS_INPUT_WIDGET", CHECKBOX_WIDGET: "WDS_CHECKBOX_WIDGET", + TEXT_WIDGET: "WDS_TEXT_WIDGET", TABLE_WIDGET_V2: "WDS_TABLE_WIDGET", }; diff --git a/app/client/src/widgets/index.ts b/app/client/src/widgets/index.ts index b011ad59a0..d022c05e2d 100644 --- a/app/client/src/widgets/index.ts +++ b/app/client/src/widgets/index.ts @@ -60,6 +60,7 @@ import ListWidgetV2 from "./ListWidgetV2"; import { WDSButtonWidget } from "./wds/WDSButtonWidget"; import { WDSInputWidget } from "./wds/WDSInputWidget"; import { WDSCheckboxWidget } from "./wds/WDSCheckboxWidget"; +import { WDSTextWidget } from "./wds/WDSTextWidget"; import type BaseWidget from "./BaseWidget"; import { WDSTableWidget } from "./wds/WDSTableWidget"; @@ -116,6 +117,7 @@ const Widgets = [ WDSButtonWidget, WDSInputWidget, WDSCheckboxWidget, + WDSTextWidget, WDSTableWidget, //Deprecated Widgets diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/autocompleteConfig.ts b/app/client/src/widgets/wds/WDSTextWidget/config/autocompleteConfig.ts new file mode 100644 index 0000000000..93f81c1057 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/autocompleteConfig.ts @@ -0,0 +1,9 @@ +import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; + +export const autocompleteConfig = { + "!doc": + "‌Text widget is used to display textual information. Whether you want to display a paragraph or information or add a heading to a container, a text widget makes it easy to style and display text", + "!url": "https://docs.appsmith.com/widget-reference/text", + isVisible: DefaultAutocompleteDefinitions.isVisible, + text: "string", +}; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSTextWidget/config/defaultsConfig.ts new file mode 100644 index 0000000000..e38de62cf3 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/defaultsConfig.ts @@ -0,0 +1,52 @@ +import { get } from "lodash"; +import type { WidgetProps } from "widgets/BaseWidget"; +import { isDynamicValue } from "utils/DynamicBindingUtils"; +import type { DynamicPath } from "utils/DynamicBindingUtils"; +import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants"; +import { BlueprintOperationTypes } from "WidgetProvider/constants"; +import { ResponsiveBehavior } from "layoutSystems/common/utils/constants"; + +export const defaultsConfig = { + text: "Hello {{appsmith.user.name || appsmith.user.email}}", + fontSize: "body", + textAlign: "left", + textColor: "neutral", + rows: 4, + columns: 16, + widgetName: "Text", + shouldTruncate: false, + version: 1, + animateLoading: true, + responsiveBehavior: ResponsiveBehavior.Fill, + minWidth: FILL_WIDGET_MIN_WIDTH, + blueprint: { + operations: [ + { + type: BlueprintOperationTypes.MODIFY_PROPS, + fn: (widget: WidgetProps & { children?: WidgetProps[] }) => { + if (!isDynamicValue(widget.text)) { + return []; + } + + const dynamicBindingPathList: DynamicPath[] = [ + ...get(widget, "dynamicBindingPathList", []), + ]; + + dynamicBindingPathList.push({ + key: "text", + }); + + const updatePropertyMap = [ + { + widgetId: widget.widgetId, + propertyName: "dynamicBindingPathList", + propertyValue: dynamicBindingPathList, + }, + ]; + + return updatePropertyMap; + }, + }, + ], + }, +}; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/featuresConfig.ts b/app/client/src/widgets/wds/WDSTextWidget/config/featuresConfig.ts new file mode 100644 index 0000000000..ae5d5d2038 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/featuresConfig.ts @@ -0,0 +1,6 @@ +export const featuresConfig = { + dynamicHeight: { + sectionIndex: 0, + active: true, + }, +}; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/index.ts b/app/client/src/widgets/wds/WDSTextWidget/config/index.ts new file mode 100644 index 0000000000..9c9abc2424 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/index.ts @@ -0,0 +1,7 @@ +export * from "./propertyPaneConfig"; +export { metaConfig } from "./metaConfig"; +export { settersConfig } from "./settersConfig"; +export { methodsConfig } from "./methodsConfig"; +export { defaultsConfig } from "./defaultsConfig"; +export { featuresConfig } from "./featuresConfig"; +export { autocompleteConfig } from "./autocompleteConfig"; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSTextWidget/config/metaConfig.ts new file mode 100644 index 0000000000..455ac9b971 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/metaConfig.ts @@ -0,0 +1,9 @@ +import IconSVG from "../icon.svg"; +import { WIDGET_TAGS } from "constants/WidgetConstants"; + +export const metaConfig = { + name: "Text", + iconSVG: IconSVG, + tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.CONTENT], + searchTags: ["typography", "paragraph", "label"], +}; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSTextWidget/config/methodsConfig.ts new file mode 100644 index 0000000000..2222c9a73b --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/methodsConfig.ts @@ -0,0 +1,18 @@ +import type { + PropertyUpdates, + SnipingModeProperty, +} from "WidgetProvider/constants"; + +export const methodsConfig = { + getSnipingModeUpdates: ( + propValueMap: SnipingModeProperty, + ): PropertyUpdates[] => { + return [ + { + propertyPath: "text", + propertyValue: propValueMap.data, + isDynamicPropertyPath: true, + }, + ]; + }, +}; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/contentConfig.ts new file mode 100644 index 0000000000..60289881ad --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/contentConfig.ts @@ -0,0 +1,58 @@ +import { ValidationTypes } from "constants/WidgetValidation"; + +export const propertyPaneContentConfig = [ + { + sectionName: "General", + children: [ + { + propertyName: "text", + helpText: "Sets the text of the widget", + label: "Text", + controlType: "INPUT_TEXT", + placeholderText: "Name:", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { limitLineBreaks: true }, + }, + }, + { + propertyName: "lineClamp", + helpText: "Controls the number of lines displayed", + label: "Line clamp (max lines)", + controlType: "INPUT_TEXT", + placeholderText: "No. of lines to display", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.NUMBER, + params: { + min: 1, + }, + }, + }, + { + propertyName: "isVisible", + helpText: "Controls the visibility of the widget", + label: "Visible", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + { + propertyName: "animateLoading", + label: "Animate loading", + controlType: "SWITCH", + helpText: "Controls the loading of the widget", + defaultValue: true, + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + ], + }, +]; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/index.ts b/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/index.ts new file mode 100644 index 0000000000..4273f74125 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/index.ts @@ -0,0 +1,2 @@ +export { propertyPaneContentConfig } from "./contentConfig"; +export { propertyPaneStyleConfig } from "./styleConfig"; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/styleConfig.ts b/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/styleConfig.ts new file mode 100644 index 0000000000..45002e2e8b --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/styleConfig.ts @@ -0,0 +1,159 @@ +import { COLORS } from "@design-system/widgets"; +import { TYPOGRAPHY_VARIANTS } from "@design-system/theming"; +import { ValidationTypes } from "constants/WidgetValidation"; + +export const propertyPaneStyleConfig = [ + { + sectionName: "General", + children: [ + { + propertyName: "fontSize", + label: "Font size", + helpText: "Controls the size of the font used", + controlType: "DROP_DOWN", + defaultValue: "body", + options: [ + { + label: "Footnote", + value: "footnote", + }, + { + label: "Body", + value: "body", + }, + { + label: "Caption", + value: "caption", + }, + { + label: "Subtitle", + value: "subtitle", + }, + { + label: "Title", + value: "title", + }, + { + label: "Heading", + value: "heading", + }, + ], + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + allowedValues: Object.values(TYPOGRAPHY_VARIANTS), + default: TYPOGRAPHY_VARIANTS.body, + }, + }, + }, + ], + }, + { + sectionName: "Color", + children: [ + { + propertyName: "textColor", + label: "Text Color", + helpText: "Controls the color of the text displayed", + controlType: "DROP_DOWN", + defaultValue: "neutral", + options: [ + { + label: "Accent", + value: "accent", + }, + { + label: "Neutral", + value: "neutral", + }, + { + label: "Positive", + value: "positive", + }, + { + label: "Negative", + value: "negative", + }, + { + label: "Warning", + value: "warning", + }, + { + label: "Heading", + value: "heading", + }, + ], + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + allowedValues: Object.values(COLORS), + default: COLORS.neutral, + }, + }, + }, + ], + }, + { + sectionName: "Text formatting", + children: [ + { + propertyName: "textAlign", + label: "Alignment", + helpText: "Controls the horizontal alignment of the text", + controlType: "ICON_TABS", + fullWidth: true, + options: [ + { + startIcon: "align-left", + value: "left", + }, + { + startIcon: "align-center", + value: "center", + }, + { + startIcon: "align-right", + value: "right", + }, + ], + defaultValue: "left", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + allowedValues: ["left", "center", "right"], + default: "left", + }, + }, + }, + { + propertyName: "fontStyle", + label: "Emphasis", + helpText: "Controls the font emphasis of the text displayed", + controlType: "BUTTON_GROUP", + options: [ + { + icon: "text-bold", + value: "bold", + }, + { + icon: "text-italic", + value: "italic", + }, + ], + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + ], + }, +]; diff --git a/app/client/src/widgets/wds/WDSTextWidget/config/settersConfig.ts b/app/client/src/widgets/wds/WDSTextWidget/config/settersConfig.ts new file mode 100644 index 0000000000..db9f8e4646 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/config/settersConfig.ts @@ -0,0 +1,24 @@ +export const settersConfig = { + __setters: { + setVisibility: { + path: "isVisible", + type: "boolean", + }, + setDisabled: { + path: "isDisabled", + type: "boolean", + }, + setRequired: { + path: "isRequired", + type: "boolean", + }, + setText: { + path: "text", + type: "string", + }, + setTextColor: { + path: "textColor", + type: "string", + }, + }, +}; diff --git a/app/client/src/widgets/wds/WDSTextWidget/icon.svg b/app/client/src/widgets/wds/WDSTextWidget/icon.svg new file mode 100644 index 0000000000..a4058c4d93 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/widgets/wds/WDSTextWidget/index.ts b/app/client/src/widgets/wds/WDSTextWidget/index.ts new file mode 100644 index 0000000000..23bcf89eb9 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/index.ts @@ -0,0 +1,3 @@ +import { WDSTextWidget } from "./widget"; + +export { WDSTextWidget }; diff --git a/app/client/src/widgets/wds/WDSTextWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSTextWidget/widget/index.tsx new file mode 100644 index 0000000000..4baef8e3c2 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/widget/index.tsx @@ -0,0 +1,81 @@ +import React from "react"; +import type { SetterConfig } from "entities/AppTheming"; +import type { DerivedPropertiesMap } from "WidgetProvider/factory"; + +import * as config from "./../config"; +import BaseWidget from "widgets/BaseWidget"; +import { Text } from "@design-system/widgets"; +import type { TextWidgetProps } from "./types"; +import type { WidgetState } from "widgets/BaseWidget"; + +class WDSTextWidget extends BaseWidget { + static type = "WDS_TEXT_WIDGET"; + + static getConfig() { + return config.metaConfig; + } + + static getFeatures() { + return config.featuresConfig; + } + + static getDefaults() { + return config.defaultsConfig; + } + + static getMethods() { + return config.methodsConfig; + } + + static getAutoLayoutConfig() { + return {}; + } + + static getAutocompleteDefinitions() { + return config.autocompleteConfig; + } + + static getPropertyPaneContentConfig() { + return config.propertyPaneContentConfig; + } + + static getPropertyPaneStyleConfig() { + return config.propertyPaneStyleConfig; + } + + static getDefaultPropertiesMap(): Record { + return {}; + } + + static getDerivedPropertiesMap(): DerivedPropertiesMap { + return { + value: `{{ this.text }}`, + }; + } + + static getMetaPropertiesMap(): Record { + return {}; + } + + static getSetterConfig(): SetterConfig { + return config.settersConfig; + } + + getWidgetView() { + return ( + + {this.props.text} + + ); + } +} + +export { WDSTextWidget }; diff --git a/app/client/src/widgets/wds/WDSTextWidget/widget/types.ts b/app/client/src/widgets/wds/WDSTextWidget/widget/types.ts new file mode 100644 index 0000000000..c796c7cfa1 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTextWidget/widget/types.ts @@ -0,0 +1,3 @@ +import type { WidgetProps } from "widgets/BaseWidget"; + +export interface TextWidgetProps extends WidgetProps {}