feat: Create xml-time component to convert time to iso string in xml documents

Author: istarkov

packages/sdk-components-react/src/__generated__/xml-time.props.ts

@@ -33,6 +33,7 @@ export { VimeoPreviewImage } from "./vimeo-preview-image";
 export { VimeoPlayButton } from "./vimeo-play-button";
 export { VimeoSpinner } from "./vimeo-spinner";
 export { XmlNode } from "./xml-node";
+export { XmlTime } from "./xml-time";
 export { Time } from "./time";
 export { Select } from "./select";
 export { Option } from "./option";

packages/sdk-components-react/src/components.ts

@@ -34,6 +34,7 @@ export { meta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { meta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { meta as VimeoSpinner } from "./vimeo-spinner.ws";
 export { meta as XmlNode } from "./xml-node.ws";
+export { meta as XmlTime } from "./xml-time.ws";
 export { meta as Time } from "./time.ws";
 export { meta as Select } from "./select.ws";
 export { meta as Option } from "./option.ws";

packages/sdk-components-react/src/metas.ts

@@ -33,6 +33,7 @@ export { propsMeta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";
 export { propsMeta as XmlNode } from "./xml-node.ws";
+export { propsMeta as XmlTime } from "./xml-time.ws";
 export { propsMeta as Time } from "./time.ws";
 export { propsMeta as Select } from "./select.ws";
 export { propsMeta as Option } from "./option.ws";

packages/sdk-components-react/src/props.ts

@@ -0,0 +1,62 @@
+import { forwardRef, useContext, type ElementRef } from "react";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+
+const DEFAULT_DATE_STYLE = "short";
+const INITIAL_DATE_STRING = "dateTime attribute is not set";
+const INVALID_DATE_STRING = "";
+
+type XmlTimeProps = {
+  dateStyle: "long" | "short";
+  datetime: string;
+};
+
+const parseDate = (datetimeString: string) => {
+  if (datetimeString === "") {
+    return;
+  }
+  let date = new Date(datetimeString);
+
+  // Check if the date already in valid format, e.g. "2024"
+  if (Number.isNaN(date.getTime()) === false) {
+    return date;
+  }
+
+  // If its a number, we assume it's a timestamp and we may need to normalize it
+  if (/^\d+$/.test(datetimeString)) {
+    let timestamp = Number(datetimeString);
+    // Normalize a 10-digit timestamp to 13-digit
+    if (datetimeString.length === 10) {
+      timestamp *= 1000;
+    }
+    date = new Date(timestamp);
+  }
+
+  if (Number.isNaN(date.getTime()) === false) {
+    return date;
+  }
+};
+
+export const XmlTime = forwardRef<ElementRef<"time">, XmlTimeProps>(
+  ({ dateStyle = DEFAULT_DATE_STYLE, datetime = INITIAL_DATE_STRING }, ref) => {
+    const { renderer } = useContext(ReactSdkContext);
+
+    const datetimeString =
+      datetime === null ? INVALID_DATE_STRING : datetime.toString();
+
+    const date = parseDate(datetimeString);
+
+    let formattedDate = datetimeString;
+    if (date) {
+      formattedDate = date.toISOString();
+      if (dateStyle === "short") {
+        formattedDate = formattedDate.split("T")[0];
+      }
+    }
+
+    if (renderer === undefined) {
+      return formattedDate;
+    }
+
+    return <time ref={ref}>{formattedDate}</time>;
+  }
+);

packages/sdk-components-react/src/xml-time.tsx

@@ -0,0 +1,22 @@
+import { CalendarIcon } from "@webstudio-is/icons/svg";
+
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+
+import { props } from "./__generated__/xml-time.props";
+
+export const meta: WsComponentMeta = {
+  category: "xml",
+  type: "container",
+  description: "Converts machine-readable date and time to ISO format.",
+  icon: CalendarIcon,
+  stylable: false,
+  order: 7,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["datetime", "dateStyle"],
+};