feat(form): improve published versions of uri, select, date fields

src/forms/widgets/base/DateWidget.jsx

@@ -6,14 +6,13 @@ import dayjs from "dayjs";
 
 import weekday from "dayjs/plugin/weekday";
 import localeData from "dayjs/plugin/localeData";
+import { DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT } from "../../../utils";
 
 dayjs.extend(weekday);
 dayjs.extend(localeData);
 
 const DATE_ISO_FORMAT = "YYYY-MM-DD";
 const DATE_TIME_ISO_FORMAT = "YYYY-MM-DD HH:mm:ss";
-const DATE_DEFAULT_FORMAT = "DD/MM/YYYY";
-const DATE_TIME_DEFAULT_FORMAT = "DD/MM/YYYY HH:mm:ss";
 
 const DateWidget = ({
   autofocus,

src/forms/widgets/published/DateWidget.jsx

@@ -0,0 +1,23 @@
+import { CalendarOutlined } from "@ant-design/icons";
+import dayjs from "dayjs";
+import { DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT } from "../../../utils";
+import TextBoxWidget from "./TextBoxWidget";
+
+const DateWidget = ({ value, schema }) => {
+  return (
+    <TextBoxWidget
+      value={
+        value &&
+        dayjs(value).format(
+          schema.customFormat ||
+            (schema.format === "date-time"
+              ? DATE_TIME_DEFAULT_FORMAT
+              : DATE_DEFAULT_FORMAT),
+        )
+      }
+      Icon={CalendarOutlined}
+    />
+  );
+};
+
+export default DateWidget;

src/forms/widgets/published/SelectWidget.jsx

@@ -0,0 +1,8 @@
+import { AppstoreOutlined } from "@ant-design/icons";
+import TextBoxWidget from "./TextBoxWidget";
+
+const SelectWidget = ({ value }) => {
+  return <TextBoxWidget value={value} Icon={AppstoreOutlined} />;
+};
+
+export default SelectWidget;

src/forms/widgets/published/TextBoxWidget.jsx

@@ -0,0 +1,19 @@
+import { Tag } from "antd";
+
+const TextBoxWidget = ({ value, Icon }) => {
+  const values = Array.isArray(value) ? value : value ? [value] : [];
+  return values.length
+    ? values.map((v) => (
+        <Tag
+          key={v}
+          bordered={false}
+          color={"#0069961A"}
+          style={{ borderRadius: "20px", color: "black" }}
+        >
+          <Icon style={{ color: "gray" }} /> {v}
+        </Tag>
+      ))
+    : undefined;
+};
+
+export default TextBoxWidget;

src/forms/widgets/published/UriWidget.jsx

@@ -1,8 +1,24 @@
-import { Typography } from "antd";
+import { Button, Tooltip, Typography } from "antd";
 import PropTypes from "prop-types";
+import { CopyOutlined } from "@ant-design/icons";
 
 const UriWidget = ({ value }) => {
-  return <Typography.Link href={value}>{value}</Typography.Link>;
+  return (
+    value && (
+      <span>
+        <Typography.Link href={value}>{value}</Typography.Link>
+        <Tooltip title="Copy URI">
+          <Button
+            onClick={() => {
+              navigator.clipboard.writeText(value);
+            }}
+            icon={<CopyOutlined />}
+            type="link"
+          />
+        </Tooltip>
+      </span>
+    )
+  );
 };
 
 UriWidget.propTypes = {

src/forms/widgets/published/index.js

@@ -1,13 +1,17 @@
 import TextWidget from "./TextWidget";
 import RichEditorWidget from "./RichEditorWidget";
 import UriWidget from "./UriWidget";
+import DateWidget from "./DateWidget";
+import SelectWidget from "./SelectWidget";
 
 const widgets = {
   text: TextWidget,
   textarea: TextWidget,
   uri: UriWidget,
   richeditor: RichEditorWidget,
   latex: RichEditorWidget,
+  date: DateWidget,
+  select: SelectWidget,
 };
 
 export default widgets;

src/utils/index.js

@@ -5,6 +5,8 @@ import { stex } from "@codemirror/legacy-modes/mode/stex";
 
 export const URL_REGEX =
   "https?://(www.)?[-a-zA-Z0-9@:%._+~#=]{1,256}.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)";
+export const DATE_DEFAULT_FORMAT = "DD/MM/YYYY";
+export const DATE_TIME_DEFAULT_FORMAT = "DD/MM/YYYY HH:mm:ss";
 
 export const CODEMIRROR_LANGUAGES = {
   json: json(),