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

package.json

@@ -38,10 +38,10 @@
     "@codemirror/lint": "^6.5.0",
     "@codemirror/merge": "^6.1.1",
     "@reduxjs/toolkit": "^1.9.5",
-    "@rjsf/antd": "5.19.4",
-    "@rjsf/core": "5.19.4",
-    "@rjsf/utils": "5.19.4",
-    "@rjsf/validator-ajv8": "5.19.4",
+    "@rjsf/antd": "^5.21.0",
+    "@rjsf/core": "^5.21.0",
+    "@rjsf/utils": "^5.21.0",
+    "@rjsf/validator-ajv8": "^5.21.0",
     "antd": "^5.7.3",
     "axios": "^1.4.0",
     "codemirror": "^6.0.1",

src/admin/formComponents/ObjectFieldTemplate.jsx

@@ -5,10 +5,15 @@ import update from "immutability-helper";
 import { useDispatch } from "react-redux";
 import { updateUiSchemaByPath } from "../../store/schemaWizard";
 
-const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
+const ObjectFieldTemplate = ({
+  properties,
+  uiSchema,
+  formContext,
+  idSchema,
+}) => {
   const [cards, setCards] = useState([]);
 
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   useEffect(
     () => {
@@ -34,16 +39,16 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
       // if there is no change with the number of the items it means that either there is a re ordering
       // or some update at each props data
       if (propertiesLength === cardsLength) {
-        let uiCards = cards.map(item => item.name);
-        let uiProperties = properties.map(item => item.name);
+        let uiCards = cards.map((item) => item.name);
+        let uiProperties = properties.map((item) => item.name);
         let different;
-        uiProperties.map(item => {
+        uiProperties.map((item) => {
           if (!uiCards.includes(item)) {
             different = item;
           }
         });
 
-        const newCards = [...cards]
+        const newCards = [...cards];
 
         // the different variable will define if there was a change in the prop keys or there is just a re ordering
         if (different) {
@@ -53,7 +58,7 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
           });
 
           let itemProps;
-          properties.map(item => {
+          properties.map((item) => {
             if (item.name === different) itemProps = item;
           });
 
@@ -62,39 +67,43 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
             name: different,
             prop: itemProps,
           };
-          newCards[diffIndex] = item
+          newCards[diffIndex] = item;
         } else {
           newCards.map((card, index) => {
             card.prop = properties[index];
           });
         }
-        setCards(newCards)
+        setCards(newCards);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [properties]
+    [properties],
   );
 
-  // Updates the uiSchema after the cards update with the new ui:order 
+  // Updates the uiSchema after the cards update with the new ui:order
   // (so that the form preview displays the correct order)
-  useEffect(
-    () => {
-      let uiCards = cards.map(item => item.name);
-      let uiProperties = properties.map(item => item.name);
-      let { ...rest } = uiSchema;
+  useEffect(() => {
+    const uiCards = cards.map((item) => item.name);
+    const uiProperties = properties.map((item) => item.name);
+    const { ...rest } = uiSchema;
 
-      uiCards = uiProperties.length < uiCards.length ? uiProperties : uiCards;
+    const isOrderChanged = !uiCards.every(
+      (card, index) => card === uiProperties[index],
+    );
 
-      dispatch(updateUiSchemaByPath({
-        path: formContext.uiSchema.length > 0 ? formContext.uiSchema : [],
-        value: {
-          ...rest,
-          "ui:order": [...uiCards, "*"],
-        }
-      }));
+    if (isOrderChanged) {
+      dispatch(
+        updateUiSchemaByPath({
+          path: formContext.uiSchema.length > 0 ? formContext.uiSchema : [],
+          value: {
+            ...rest,
+            "ui:order": [...uiCards, "*"],
+          },
+        }),
+      );
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cards]
-  );
+  }, [cards]);
 
   // create a new array to keep track of the changes in the order
   properties.map((prop, index) => {
@@ -117,17 +126,22 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
       if (dragCard) {
         setCards(
           update(cards, {
-            $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]],
-          })
+            $splice: [
+              [dragIndex, 1],
+              [hoverIndex, 0, dragCard],
+            ],
+          }),
         );
       }
     },
-    [cards]
+    [cards],
   );
   if (idSchema.$id == "root") {
     return (
       <div>
-        {cards.map((card, i) => RenderSortable(formContext.uiSchema, card, i, moveCard))}
+        {cards.map((card, i) =>
+          RenderSortable(formContext.uiSchema, card, i, moveCard),
+        )}
       </div>
     );
   }
@@ -141,5 +155,4 @@ ObjectFieldTemplate.propTypes = {
   uiSchema: PropTypes.object,
 };
 
-
-export default ObjectFieldTemplate
+export default ObjectFieldTemplate;

src/admin/utils/index.js

@@ -6,17 +6,6 @@ export const SIZE_OPTIONS = {
   xlarge: 24,
 };
 
-export const slugify = (text) => {
-  return text
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, "-") // Replace spaces with -
-    .replace(/[^\w-]+/g, "") // Remove all non-word chars
-    .replace(/--+/g, "-") // Replace multiple - with single -
-    .replace(/^-+/, "") // Trim - from start of text
-    .replace(/-+$/, ""); // Trim - from end of text
-};
-
 export const initSchemaStructure = (name = "New schema", description = "") => ({
   schema: {
     title: name,

src/forms/fields/internal/TitleField.jsx

@@ -9,7 +9,7 @@ import {
 import Markdown from "../../../partials/Markdown/Markdown";
 
 const TitleField = ({
-  formContext,
+  formContext = {},
   id,
   fieldId,
   prefixCls,
@@ -131,8 +131,4 @@ TitleField.propTypes = {
   enableImport: PropTypes.func,
 };
 
-TitleField.defaultProps = {
-  formContext: {},
-};
-
 export default TitleField;

src/forms/templates/ArrayFieldTemplates/ArrayFieldTemplateItem.jsx

@@ -49,7 +49,6 @@ const ArrayFieldTemplateItem = ({
 ArrayFieldTemplateItem.propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
-  formContext: PropTypes.object,
   hasMoveDown: PropTypes.bool,
   hasMoveUp: PropTypes.bool,
   hasRemove: PropTypes.bool,
@@ -60,8 +59,4 @@ ArrayFieldTemplateItem.propTypes = {
   readonly: PropTypes.bool,
 };
 
-ArrayFieldTemplateItem.defaultProps = {
-  formContext: {},
-};
-
 export default ArrayFieldTemplateItem;

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(),