feat(form): improve collection fields

Closes #19

Author: miguelgrc

README.md

@@ -4,8 +4,6 @@
 
 [![Try our demo](https://img.shields.io/badge/try_our-🕹️_demo_🕹️-deepskyblue.svg?style=for-the-badge)](https://cern-sis.github.io/react-formule/)
 
-</div>
-
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
 [![NPM Version](https://img.shields.io/npm/v/react-formule?style=flat-square&color=orchid)](https://www.npmjs.com/package/react-formule?activeTab=readme)
 [![GitHub commits since tagged version](https://img.shields.io/github/commits-since/cern-sis/react-formule/latest?style=flat-square&color=orange)](https://github.com/cern-sis/react-formule/commits/master/)
@@ -15,6 +13,8 @@
 [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/cern-sis/react-formule/cypress.yml?style=flat-square&label=cypress)](https://github.com/cern-sis/react-formule/actions/workflows/cypress.yml)
 [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/cern-sis/react-formule/deploy-demo.yml?style=flat-square&label=deploy-demo)](https://github.com/cern-sis/react-formule/actions/workflows/commit-lint.yml)
 
+</div>
+
 ## :horse: What is Formule?
 
 Formule is a **powerful, user-friendly, extensible and mobile-friendly form building library** based on [JSON Schema](https://json-schema.org/) and [RJSF](https://github.com/rjsf-team/react-jsonschema-form), which aims to make form creation easier for both technical and non-technical people.
@@ -70,8 +70,8 @@ Formule includes a variety of predefined field types, grouped in three categorie
 - **Collections**:
   - `Object`: Use it of you want to group fields or to add several of them inside of a `List`.
   - `List`: It allows you to have as many instances of a field or `Object` as you want.
-  - `Accordion`: When containing a `List`, it works as a `List` with collapsible entries.
-  - `Layer`: When containing a `List`, it works as a `List` whose entries will open in a dialog window.
+  - `Accordion`: It works as a `List` with collapsible entries.
+  - `Layer`: It works as a `List` whose entries will open in a dialog window.
   - `Tab`: It's commonly supposed to be used as a wrapper around the rest of the elements. You will normally want to add an `Object` inside and you can use it to separate the form in different pages or sections.
 - **Advanced fields**: More complex or situational fields such as `URI`, `Rich/Latex editor`, `Tags`, `ID Fetcher`, `Code Editor` and `Files`.
 
@@ -110,27 +110,39 @@ return (
 
 ### Customizing and adding new field types
 
-Override (if existing) or create your own field types (rjsf type definitions) similarly to how it's done in `fieldTypes.jsx`, passing them as `customFieldTypes`. Implement your own custom fields and widgets (react components) by passing them as `customFields` and/or `customWidgets` (see `forms/fields/` and `forms/widgets/` for examples). If you also want to use a different published version of a field or widget, pass the component in `customPublishedFields` or `customPublishedWidgets`.
+Override (if existing) or create your own field types (rjsf type definitions) similarly to how it's done in `fieldTypes.jsx`, passing them as `customFieldTypes`. Implement your own custom fields and widgets (react components) by passing them as `customFields` and/or `customWidgets` (see `forms/fields/` and `forms/widgets/` for examples). If you also want to use a different published version of a field or widget, pass the component in `customPublishedFields` or `customPublishedWidgets`. You can read more about the difference between fields and widgets and how to customize or wrap them in the [rjsf docs](https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-widgets-fields), but make sure you provide Formule with something like the following:
 
 ```jsx
+const CustomWidget = ({value, required, onChange}) => {
+  return (
+    <input
+      type='text'
+      className='custom'
+      value={value}
+      required={required}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+};
+
 const customFieldTypes = {
   advanced: {
-    myfield: {
+    myCustomWidget: {
       title: ...
       ...
     }
   }
 }
 
-const customFields: {
-  myfield: MyField  // react component
+const customWidgets: {
+  myCustomWidget: CustomWidget
 }
 
 <FormuleContext
   theme={{token: {colorPrimary: "blue"}}} // antd theme
   customFieldTypes={customFieldTypes}
-  customFields={customFields}
-  customWidgets={...}
+  customFields={...}
+  customWidgets={customWidgets}
   customPublishedFields={...}
   customPublishedWidgets={...}>
 // ...

formule-demo/cypress/e2e/builder.cy.ts

@@ -312,7 +312,9 @@ describe("test basic functionality", () => {
       .should("exist");
     cy.get(`fieldset#root${SEP}enum`).getByDataCy("addItemButton").click();
     cy.get(`input#root${SEP}enum${SEP}0`).clearTypeBlur("First option");
-    cy.get(`fieldset#root${SEP}enum`).getByDataCy("addItemButton").click();
+    cy.get(`fieldset#root${SEP}enum`)
+      .getByDataCy("addItemButton")
+      .click({ force: true });
     cy.get(`input#root${SEP}enum${SEP}1`).clearTypeBlur("Second option");
     cy.get(`#root${SEP}enum .arrayFieldRow`)
       .eq(0)
@@ -335,7 +337,9 @@ describe("test basic functionality", () => {
       .parent()
       .find('[title="Select one value (number)"]')
       .should("exist");
-    cy.get(`fieldset#root${SEP}enum`).getByDataCy("addItemButton").click();
+    cy.get(`fieldset#root${SEP}enum`)
+      .getByDataCy("addItemButton")
+      .click({ force: true });
     cy.get(`input#root${SEP}enum${SEP}0`).clearTypeBlur("asd");
     cy.get(`input#root${SEP}enum${SEP}0`).should("have.value", "");
     cy.get(`input#root${SEP}enum${SEP}0`).clearTypeBlur("1");
@@ -551,7 +555,7 @@ describe("test basic functionality", () => {
     cy.getByDataCy("treeItem").contains("myarray").as("arrayField");
     cy.addField("text", "@arrayField");
 
-    // test basic add, move, delete functionality
+    // Test basic add, move, delete functionality
     cy.getByDataCy("formPreview")
       .find(`fieldset#root${SEP}myarray`)
       .getByDataCy("addItemButton")
@@ -576,29 +580,76 @@ describe("test basic functionality", () => {
     cy.getByDataCy("formPreview")
       .find(`input#root${SEP}myarray${SEP}1`)
       .should("not.exist");
+
+    // Test multiple fields inside
+    // check that with one item the array contains the item as direct child
+    cy.getByDataCy("treeItem")
+      .contains("items")
+      .parents("[data-cy=treeItem]")
+      .find(".anticon-font-size");
+    // check that with two items the array now contains an object containing the items
+    cy.addField("text", "@arrayField");
+    cy.getByDataCy("treeItem")
+      .contains("items")
+      .parents("[data-cy=treeItem]")
+      .contains("{ }");
+    cy.getByDataCy("treeItem")
+      .find(".anticon-font-size")
+      .should("have.length", 2);
+    // remove one item and check that the object is removed and the remaining item is a direct child of the array
+    cy.getByDataCy("treeItem").find(".anticon-font-size").first().click();
+    cy.getByDataCy("deleteField").click();
+    cy.get("div.ant-popconfirm").find("button").contains("Delete").click();
+    cy.getByDataCy("treeItem")
+      .contains("items")
+      .parents("[data-cy=treeItem]")
+      .find(".anticon-font-size")
+      .should("have.length", 1);
+    cy.getByDataCy("treeItem")
+      .contains("items")
+      .parents("[data-cy=treeItem]")
+      .contains("{ }")
+      .should("not.exist");
   });
 
-  it.skip("tests accordion field", () => {
-    // cy.addFieldWithName("array", "myarray")
-    // cy.getByDataCy("treeItem").contains("myarray").as("arrayField")
-    // cy.addField("accordionObjectField", "@arrayField")
-    // cy.getByDataCy("treeItem").contains("items").as("accordionItems")
-    // cy.addField("text", "@accordionItems")
-    // cy.getByDataCy("formPreview").find(`fieldset#root${SEP}myarray`).getByDataCy("addItemButton").as("addItem").click()
-    // cy.get("@addItem").click()
-    // cy.getByDataCy("formPreview").find(".ant-collapse-item").first().click()
-    // FIXME: To be properly tested once the accordion field is reviewed and its function is more clearly defined
+  it("tests accordion field", () => {
+    cy.addFieldWithName("accordion", "myaccordion");
+    cy.getByDataCy("treeItem").contains("myaccordion").as("accordionField");
+    cy.addField("text", "@accordionField");
+
+    cy.getByDataCy("formPreview")
+      .find(`fieldset#root${SEP}myaccordion`)
+      .getByDataCy("addItemButton")
+      .as("addItem")
+      .click();
+    cy.get("@addItem").click();
+    cy.getByDataCy("formPreview")
+      .find(".ant-collapse-item")
+      .as("accordionItems")
+      .first()
+      .click();
+    cy.getByDataCy("formPreview")
+      .find(`input#root${SEP}myaccordion${SEP}0`)
+      .clearTypeBlur("First item");
+    cy.get("@accordionItems").last().click();
+    cy.getByDataCy("formPreview")
+      .find(`.ant-collapse-content-hidden`)
+      .should("have.length", 1);
+    cy.getByDataCy("formPreview")
+      .find(`input#root${SEP}myaccordion${SEP}1`)
+      .clearTypeBlur("Second item");
+    cy.getByDataCy("formPreview")
+      .find(`.ant-collapse-content-hidden`)
+      .should("have.length", 1);
   });
 
   it("tests layer field", () => {
-    cy.addFieldWithName("array", "myarray");
-    cy.getByDataCy("treeItem").contains("myarray").as("arrayField");
-    cy.addField("layerObjectField", "@arrayField");
-    cy.getByDataCy("treeItem").contains("items").as("layerItems");
-    cy.addFieldWithName("text", "myfield", "@layerItems");
+    cy.addFieldWithName("layer", "mylayer");
+    cy.getByDataCy("treeItem").contains("mylayer").as("layerField");
+    cy.addField("text", "@layerField");
 
     cy.getByDataCy("formPreview")
-      .find(`fieldset#root${SEP}myarray`)
+      .find(`fieldset#root${SEP}mylayer`)
       .getByDataCy("addItemButton")
       .as("addItem")
       .click();
@@ -610,14 +661,14 @@ describe("test basic functionality", () => {
       .first()
       .click();
     cy.getByDataCy("layerModal")
-      .find(`input#root${SEP}myarray${SEP}0${SEP}myfield`)
+      .find(`input#root${SEP}mylayer${SEP}0`)
       .as("input0")
       .clearTypeBlur("First item");
     cy.getByDataCy("layerModal").find("button").contains("OK").click();
 
     cy.get("@layerItem").last().click();
     cy.getByDataCy("layerModal")
-      .find(`input#root${SEP}myarray${SEP}1${SEP}myfield`)
+      .find(`input#root${SEP}mylayer${SEP}1`)
       .as("input1")
       .should("exist");
     cy.getByDataCy("layerModal").find("button").contains("Cancel").click();

formule-demo/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/formule-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formule demo</title>
   </head>

formule-demo/public/formule-icon.png

@@ -350,11 +350,7 @@ function App() {
               <Col
                 xs={24}
                 md={14}
-                style={{
-                  overflowX: "hidden",
-                  height: "100%",
-                  padding: "0px 25px",
-                }}
+                style={{ overflowX: "hidden", height: "100%" }}
               >
                 <FormPreview liveValidate={true} hideAnchors={false} />
               </Col>

formule-demo/src/App.tsx

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formule</title>
   </head>

index.html

@@ -28,7 +28,7 @@ const FormPreview = ({ liveValidate, hideAnchors }) => {
       }}
       data-cy="formPreview"
     >
-      <Row justify="center" style={{ margin: "15px" }}>
+      <Row justify="center" style={{ margin: "18px" }}>
         <Segmented
           options={[
             { label: "Editable", value: "editable", icon: <EditOutlined /> },
@@ -39,17 +39,26 @@ const FormPreview = ({ liveValidate, hideAnchors }) => {
           onChange={handleSegmentChange}
         />
       </Row>
-      {segment === "editable" ? (
-        <EditablePreview hideTitle liveValidate={liveValidate} />
-      ) : (
-        <Form
-          schema={customizationContext.transformSchema(schema)}
-          uiSchema={uiSchema}
-          formData={formData}
-          hideAnchors={hideAnchors}
-          isPublished
-        />
-      )}
+      <div
+        style={{
+          padding: "0 25px",
+          flex: 1,
+          overflowY: "auto",
+          overflowX: "hidden",
+        }}
+      >
+        {segment === "editable" ? (
+          <EditablePreview hideTitle liveValidate={liveValidate} />
+        ) : (
+          <Form
+            schema={customizationContext.transformSchema(schema)}
+            uiSchema={uiSchema}
+            formData={formData}
+            hideAnchors={hideAnchors}
+            isPublished
+          />
+        )}
+      </div>
     </div>
   );
 };

public/vite.svg

@@ -6,6 +6,7 @@ import {
   Grid,
   Popconfirm,
   Row,
+  Space,
   Typography,
 } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
@@ -114,26 +115,38 @@ const PropertyEditor = () => {
           <Typography.Title
             level={5}
             editable={
-              path.length && {
+              path.length &&
+              path[path.length - 1] != "items" && {
                 text: name,
-                onChange: (value) =>
+                onChange: (value) => {
                   dispatch(
                     renameIdByPath({
                       path: { path, uiPath },
                       newName: value,
                       separator: customizationContext.separator,
                     }),
-                  ),
+                  );
+                },
+                onStart: () => {
+                  // using setTimeout to ensure the input is mounted
+                  setTimeout(() => {
+                    document
+                      .querySelector(".ant-typography-edit-content textarea")
+                      ?.select();
+                  }, 0);
+                },
               }
             }
             style={{ textAlign: "center", margin: "10px 0" }}
           >
-            {getIconByType(
-              schema,
-              uiSchema,
-              customizationContext.allFieldTypes,
-            )}{" "}
-            {name}
+            <Space wrap={false}>
+              {getIconByType(
+                schema,
+                uiSchema,
+                customizationContext.allFieldTypes,
+              )}
+              {name}
+            </Space>
           </Typography.Title>
         </Col>
       </Row>

src/admin/components/FormPreview.jsx

@@ -44,23 +44,26 @@ const ArrayFieldTemplate = (props) => {
           {Object.keys(props.schema.items).length == 0 ? (
             <DropArea />
           ) : (
-            <Form
-              schema={props.schema.items}
-              uiSchema={props.uiSchema.items}
-              formData={{}}
-              tagName="div"
-              showErrorList={false}
-              FieldTemplate={FieldTemplate}
-              ObjectFieldTemplate={ObjectFieldTemplate}
-              ArrayFieldTemplate={ArrayFieldTemplate}
-              liveValidate={true}
-              validate={_validate}
-              noHtml5Validate={true}
-              onChange={() => {}}
-              formContext={{ ..._path, nestedForm: true }}
-            >
-              <span />
-            </Form>
+            <>
+              <Form
+                schema={props.schema.items}
+                uiSchema={props.uiSchema.items}
+                formData={{}}
+                tagName="div"
+                showErrorList={false}
+                FieldTemplate={FieldTemplate}
+                ObjectFieldTemplate={ObjectFieldTemplate}
+                ArrayFieldTemplate={ArrayFieldTemplate}
+                liveValidate={true}
+                validate={_validate}
+                noHtml5Validate={true}
+                onChange={() => {}}
+                formContext={{ ..._path, nestedForm: true }}
+              >
+                <span />
+              </Form>
+              {!props.schema.items.properties && <DropArea />}
+            </>
           )}
         </div>
       )}