fix(group field): Allow to configure repeat property in the UI (#1269)

packages/slice-machine/lib/models/common/widgets/Group/Form.jsx

@@ -0,0 +1,70 @@
+import { Checkbox, Label, Box } from "theme-ui";
+
+import { Col, Flex as FlexGrid } from "@components/Flex";
+import { DefaultFields } from "@lib/forms/defaults";
+import WidgetFormField from "@lib/builders/common/EditModal/Field";
+import { CheckBox } from "@lib/forms/fields";
+import { createFieldNameFromKey } from "@lib/forms";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const FormFields = {
+  ...DefaultFields,
+  repeat: CheckBox("Repeatable", false, true),
+};
+
+const Form = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const { initialValues, fields, values, setFieldValue } = props;
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const {
+    config: { repeat },
+  } = values;
+
+  return (
+    <FlexGrid>
+      {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        Object.entries(FormFields)
+          .filter(([key]) => key !== "repeat")
+          .map(([key, field]) => (
+            <Col key={key}>
+              <WidgetFormField
+                fieldName={createFieldNameFromKey(key)}
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                formField={field}
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                fields={fields}
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                initialValues={initialValues}
+              />
+            </Col>
+          ))
+      }
+
+      <Col>
+        <Box
+          sx={{
+            mt: 2,
+            alignItems: "center",
+            display: "flex",
+            height: "130%",
+          }}
+        >
+          <Label variant="label.border" sx={{ mb: 0 }}>
+            <Checkbox
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              checked={repeat}
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/strict-boolean-expressions
+              onChange={() => setFieldValue("config.repeat", !repeat)}
+            />
+            Repeatable
+          </Label>
+        </Box>
+      </Col>
+    </FlexGrid>
+  );
+};
+
+export { FormFields };
+export default Form;

packages/slice-machine/lib/models/common/widgets/Group/index.ts

@@ -1,9 +1,9 @@
 import * as yup from "yup";
-import { DefaultFields } from "@lib/forms/defaults";
 import { MdPlaylistAdd } from "react-icons/md";
 import { Widget } from "../Widget";
 import CustomListItem from "./ListItem";
 import { GroupSM } from "@lib/models/common/Group";
+import Form, { FormFields } from "./Form";
 
 const Meta = {
   icon: MdPlaylistAdd,
@@ -20,18 +20,20 @@ const schema = yup.object().shape({
     fields: yup.array(),
     label: yup.string(),
     placeholder: yup.string(),
+    repeat: yup.boolean().optional(),
   }),
 });
 
 export const GroupWidget: Widget<GroupSM, typeof schema> = {
   Meta,
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  FormFields: DefaultFields,
+  Form,
+  FormFields,
   schema,
   create: (label: string) => ({
     type: "Group",
     config: {
       label,
+      repeat: true,
       fields: [],
     },
   }),

packages/slice-machine/src/features/autoSave/useAutoSave.tsx

@@ -98,12 +98,12 @@ export const useAutoSave = (
     if (autoSaveStatusActual === "saving") {
       setAutoSaveStatusDelayed("saving");
     } else {
-      const debounceTimeout = setTimeout(() => {
+      const delayedTimeout = setTimeout(() => {
         setAutoSaveStatusDelayed(autoSaveStatusActual);
       }, autoSaveStatusDelay);
 
       return () => {
-        clearTimeout(debounceTimeout);
+        clearTimeout(delayedTimeout);
       };
     }