chore: add wds datepicker widget (appsmithorg#37711)

![CleanShot 2024-11-26 at 15 56
15](https://github.com/user-attachments/assets/d812f475-11e1-4750-9018-bdd39d5a5de3)

/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced the WDS Date Picker Widget, enhancing date selection
capabilities within the UI.
- Added configuration options for widget size, visibility, and
autocomplete behavior.
- Implemented comprehensive validation for date input, ensuring accurate
user selections.
- Expanded widget collection to include the new WDS Date Picker Widget.
- Introduced new constants for date format options, facilitating diverse
formatting choices.
- Added support for a new "Date" input type, enhancing input widget
configurability.

- **Documentation**
- Updated property pane configurations to include detailed settings for
date format, validation, and event handling.

- **Bug Fixes**
- Improved handling of derived properties to ensure proper context
during widget interactions.

These updates collectively improve user experience and flexibility in
date selection within the application.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12083004714>
> Commit: b17348e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12083004714&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 29 Nov 2024 10:44:39 UTC
<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Vadim Vaitenko <vadim@appsmith.com>

packages/design-system/widgets/src/components/Calendar/src/styles.module.css

@@ -61,6 +61,10 @@
 }
 
 .calendar tbody [role="button"][data-focus-visible] {
-  outline: var(--border-width-2) solid var(--color-bd-accent);
-  outline-offset: var(--border-width-2);
+  --box-shadow-offset: 2px;
+
+  box-shadow:
+    0 0 0 var(--box-shadow-offset) var(--color-bg),
+    0 0 0 calc(var(--box-shadow-offset) + var(--border-width-2))
+      var(--color-bd-focus);
 }

src/modules/ui-builder/ui/wds/WDSBaseInputWidget/constants.ts

@@ -6,6 +6,7 @@ export const INPUT_TYPES = {
   PASSWORD: "PASSWORD",
   PHONE_NUMBER: "PHONE_NUMBER",
   MULTI_LINE_TEXT: "MULTI_LINE_TEXT",
+  DATE: "DATE",
 } as const;
 
 export const INPUT_TYPE_TO_WIDGET_TYPE_MAP = {
@@ -16,4 +17,5 @@ export const INPUT_TYPE_TO_WIDGET_TYPE_MAP = {
   [INPUT_TYPES.MULTI_LINE_TEXT]: "WDS_MULTILINE_INPUT_WIDGET",
   [INPUT_TYPES.CURRENCY]: "WDS_CURRENCY_INPUT_WIDGET",
   [INPUT_TYPES.PHONE_NUMBER]: "WDS_PHONE_INPUT_WIDGET",
+  [INPUT_TYPES.DATE]: "WDS_DATEPICKER_WIDGET",
 };

src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/config/defaultsConfig.ts

@@ -1,4 +1,7 @@
-import { WDSBaseInputWidget } from "modules/ui-builder/ui/wds/WDSBaseInputWidget";
+import {
+  INPUT_TYPES,
+  WDSBaseInputWidget,
+} from "modules/ui-builder/ui/wds/WDSBaseInputWidget";
 import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
 import type { WidgetDefaultProps } from "WidgetProvider/constants";
 
@@ -14,4 +17,5 @@ export const defaultsConfig = {
   showStepArrows: false,
   label: "Current Price",
   responsiveBehavior: ResponsiveBehavior.Fill,
+  inputType: INPUT_TYPES.CURRENCY,
 } as WidgetDefaultProps;

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/anvilConfig.ts

@@ -0,0 +1,11 @@
+import type { AnvilConfig } from "WidgetProvider/constants";
+
+export const anvilConfig: AnvilConfig = {
+  isLargeWidget: false,
+  widgetSize: {
+    minWidth: {
+      base: "100%",
+      "180px": "sizing-30",
+    },
+  },
+};

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/autocompleteConfig.ts

@@ -0,0 +1,11 @@
+import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
+
+export const autocompleteConfig = {
+  "!doc":
+    "Datepicker is used to capture the date and time from a user. It can be used to filter data base on the input date range as well as to capture personal information such as date of birth",
+  "!url": "https://docs.appsmith.com/widget-reference/datepicker",
+  isVisible: DefaultAutocompleteDefinitions.isVisible,
+  selectedDate: "string",
+  formattedDate: "string",
+  isDisabled: "bool",
+};

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/defaultsConfig.ts

@@ -0,0 +1,20 @@
+import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
+import type { WidgetDefaultProps } from "WidgetProvider/constants";
+import { INPUT_TYPES } from "modules/ui-builder/ui/wds/WDSBaseInputWidget";
+
+export const defaultsConfig = {
+  animateLoading: true,
+  label: "Label",
+  dateFormat: "YYYY-MM-DD HH:mm",
+  defaultOptionValue: "",
+  isRequired: false,
+  isDisabled: false,
+  isVisible: true,
+  isInline: false,
+  widgetName: "DatePicker",
+  widgetType: "WDS_DATE_PICKER",
+  version: 1,
+  timePrecision: "day",
+  responsiveBehavior: ResponsiveBehavior.Fill,
+  inputType: INPUT_TYPES.DATE,
+} as unknown as WidgetDefaultProps;

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/index.ts

@@ -0,0 +1,7 @@
+export * from "./propertyPaneConfig";
+export { metaConfig } from "./metaConfig";
+export { anvilConfig } from "./anvilConfig";
+export { defaultsConfig } from "./defaultsConfig";
+export { settersConfig } from "./settersConfig";
+export { methodsConfig } from "./methodsConfig";
+export { autocompleteConfig } from "./autocompleteConfig";

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/metaConfig.ts

@@ -0,0 +1,21 @@
+import { WIDGET_TAGS } from "constants/WidgetConstants";
+
+export const metaConfig = {
+  name: "DatePicker",
+  tags: [WIDGET_TAGS.INPUTS],
+  needsMeta: true,
+  searchTags: [
+    "datepicker",
+    "appointment",
+    "calendar",
+    "date",
+    "day",
+    "hour",
+    "meeting",
+    "moment",
+    "schedule",
+    "time",
+    "week",
+    "year",
+  ],
+};

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/methodsConfig.ts

@@ -0,0 +1,6 @@
+import { DatePickerIcon, DatePickerThumbnail } from "appsmith-icons";
+
+export const methodsConfig = {
+  IconCmp: DatePickerIcon,
+  ThumbnailCmp: DatePickerThumbnail,
+};

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/propertyPaneConfig/contentConfig.ts

@@ -0,0 +1,191 @@
+import { ValidationTypes } from "constants/WidgetValidation";
+import { DATE_FORMAT_OPTIONS } from "../../constants";
+
+import { propertyPaneContentConfig as WdsInputWidgetPropertyPaneContentConfig } from "modules/ui-builder/ui/wds/WDSInputWidget/config/propertyPaneConfig/contentConfig";
+import type { PropertyPaneConfig } from "constants/PropertyControlConstants";
+
+const inputTypeSectionConfig = WdsInputWidgetPropertyPaneContentConfig.find(
+  (config) => config.sectionName === "Type",
+);
+
+export const propertyPaneContentConfig = [
+  inputTypeSectionConfig,
+  {
+    sectionName: "Data",
+    children: [
+      {
+        helpText: "Sets the format of the selected date",
+        propertyName: "dateFormat",
+        label: "Date format",
+        controlType: "DROP_DOWN",
+        isJSConvertible: true,
+        optionWidth: "340px",
+        options: DATE_FORMAT_OPTIONS,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.TEXT },
+        hideSubText: true,
+      },
+      {
+        propertyName: "defaultDate",
+        label: "Default Date",
+        helpText:
+          "Sets the default date of the widget. The date is updated if the default date changes",
+        controlType: "DATE_PICKER",
+        placeholderText: "Enter Default Date",
+        useValidationMessage: true,
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.DATE_ISO_STRING },
+      },
+      {
+        propertyName: "timePrecision",
+        label: "Time Precision",
+        controlType: "DROP_DOWN",
+        helpText: "Sets the time precision or hides the time picker.",
+        defaultValue: "day",
+        options: [
+          {
+            label: "Day",
+            value: "day",
+          },
+          {
+            label: "Hour",
+            value: "hour",
+          },
+          {
+            label: "Minute",
+            value: "minute",
+          },
+          {
+            label: "Second",
+            value: "second",
+          },
+        ],
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: {
+          type: ValidationTypes.TEXT,
+          params: {
+            allowedValues: ["day", "hour", "minute", "second"],
+            default: "day",
+          },
+        },
+      },
+    ],
+  },
+  {
+    sectionName: "Label",
+    children: [
+      {
+        helpText: "Sets the label text of the date picker widget",
+        propertyName: "label",
+        label: "Text",
+        controlType: "INPUT_TEXT",
+        placeholderText: "Label",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.TEXT },
+      },
+    ],
+  },
+  {
+    sectionName: "Validations",
+    children: [
+      {
+        propertyName: "isRequired",
+        label: "Required",
+        helpText: "Makes input to the widget mandatory",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.BOOLEAN },
+      },
+      {
+        propertyName: "minDate",
+        label: "Minimum Date",
+        helpText: "Sets the minimum date that can be selected",
+        controlType: "DATE_PICKER",
+        placeholderText: "Enter Minimum Date",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.DATE_ISO_STRING },
+      },
+      {
+        propertyName: "maxDate",
+        label: "Maximum Date",
+        helpText: "Sets the maximum date that can be selected",
+        controlType: "DATE_PICKER",
+        placeholderText: "Enter Maximum Date",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.DATE_ISO_STRING },
+      },
+    ],
+  },
+  {
+    sectionName: "General",
+    children: [
+      {
+        helpText: "Shows help text or details about the current input",
+        propertyName: "labelTooltip",
+        label: "Tooltip",
+        controlType: "INPUT_TEXT",
+        placeholderText: "",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.TEXT },
+      },
+      {
+        helpText: "Controls the visibility of the widget",
+        propertyName: "isVisible",
+        label: "Visible",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.BOOLEAN },
+      },
+      {
+        propertyName: "isDisabled",
+        label: "Disabled",
+        helpText: "Disables input to this widget",
+        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 },
+      },
+    ],
+  },
+  {
+    sectionName: "Events",
+    children: [
+      {
+        propertyName: "onDateSelected",
+        label: "onDateSelected",
+        helpText: "when a date is selected in the calendar",
+        controlType: "ACTION_SELECTOR",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+    ],
+  },
+] as PropertyPaneConfig[];

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/propertyPaneConfig/index.ts

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

src/modules/ui-builder/ui/wds/WDSDatePickerWidget/config/settersConfig.ts

@@ -0,0 +1,12 @@
+export const settersConfig = {
+  __setters: {
+    setVisibility: {
+      path: "isVisible",
+      type: "boolean",
+    },
+    setDisabled: {
+      path: "isDisabled",
+      type: "boolean",
+    },
+  },
+};