chore: Create WDS Text Widget (#28211)

Fixes #28210

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",
 };

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

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",
+};

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;
+        },
+      },
+    ],
+  },
+};

app/client/src/widgets/wds/WDSTextWidget/config/featuresConfig.ts

@@ -0,0 +1,6 @@
+export const featuresConfig = {
+  dynamicHeight: {
+    sectionIndex: 0,
+    active: true,
+  },
+};

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";

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"],
+};

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,
+      },
+    ];
+  },
+};

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 },
+      },
+    ],
+  },
+];

app/client/src/widgets/wds/WDSTextWidget/config/propertyPaneConfig/index.ts

@@ -0,0 +1,2 @@
+export { propertyPaneContentConfig } from "./contentConfig";
+export { propertyPaneStyleConfig } from "./styleConfig";

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 },
+      },
+    ],
+  },
+];

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",
+    },
+  },
+};

app/client/src/widgets/wds/WDSTextWidget/icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3334 19V5.66666H5.66667V8.33337H3V3H21.6667V8.33337H19V5.66666H14.3333V19H17V21.6667H7.66665V19H10.3334Z" fill="#4C5664"/>
+</svg>

app/client/src/widgets/wds/WDSTextWidget/index.ts

@@ -0,0 +1,3 @@
+import { WDSTextWidget } from "./widget";
+
+export { WDSTextWidget };

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<TextWidgetProps, WidgetState> {
+  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<string, string> {
+    return {};
+  }
+
+  static getDerivedPropertiesMap(): DerivedPropertiesMap {
+    return {
+      value: `{{ this.text }}`,
+    };
+  }
+
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {};
+  }
+
+  static getSetterConfig(): SetterConfig {
+    return config.settersConfig;
+  }
+
+  getWidgetView() {
+    return (
+      <Text
+        color={this.props.textColor}
+        isBold={this.props?.fontStyle?.includes("bold")}
+        isItalic={this.props?.fontStyle?.includes("italic")}
+        lineClamp={this.props.lineClamp ? this.props.lineClamp : undefined}
+        textAlign={this.props.textAlign}
+        title={this.props.lineClamp ? this.props.text : undefined}
+        variant={this.props.fontSize}
+      >
+        {this.props.text}
+      </Text>
+    );
+  }
+}
+
+export { WDSTextWidget };

app/client/src/widgets/wds/WDSTextWidget/widget/types.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "widgets/BaseWidget";
+
+export interface TextWidgetProps extends WidgetProps {}