feat: display custom types

Author: jomifepe

packages/slice-machine/src/features/customTypes/fields/ContentRelationshipFieldPicker.tsx

@@ -5,8 +5,18 @@ import {
   TreeViewCheckbox,
   TreeViewSection,
 } from "@prismicio/editor-ui";
+import { useSelector } from "react-redux";
+
+import {
+  hasLocal,
+  LocalOrRemoteCustomType,
+} from "@/legacy/lib/models/common/ModelData";
+import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
 
 export function ContentRelationshipFieldPicker() {
+  const customTypes = useSelector(selectAllCustomTypes).filter(hasLocal);
+  const simplifiedCustomTypes = simplifyCustomTypes(customTypes);
+
   return (
     <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
       <Box
@@ -24,32 +34,18 @@ export function ContentRelationshipFieldPicker() {
           </Text>
         </Box>
         <TreeView title="Exposed fields" subtitle="(3)">
-          <TreeViewSection
-            title="Custom Type A"
-            subtitle="(3 fields exposed)"
-            badge="Custom Type"
-          >
-            <TreeViewCheckbox title="Name" />
-            <TreeViewCheckbox title="Biography" />
+          {simplifiedCustomTypes.map((ct) => (
             <TreeViewSection
-              title="Slice A"
-              subtitle="(2 fields exposed)"
-              badge="Slice"
+              key={ct.id}
+              title={ct.label}
+              subtitle={`(${ct.fields.length} fields exposed)`}
+              badge="Custom Type"
             >
-              <TreeViewCheckbox title="Title" />
-              <TreeViewCheckbox title="Subtitle" />
-              <TreeViewCheckbox title="Image" />
+              {ct.fields.map((field) => {
+                return <TreeViewCheckbox key={field.id} title={field.label} />;
+              })}
             </TreeViewSection>
-          </TreeViewSection>
-          <TreeViewSection title="Custom Type B" badge="Custom Type">
-            Something else
-          </TreeViewSection>
-          <TreeViewSection title="Custom Type C" badge="Custom Type">
-            Something else
-          </TreeViewSection>
-          <TreeViewSection title="Custom Type D" badge="Custom Type">
-            Something else
-          </TreeViewSection>
+          ))}
         </TreeView>
       </Box>
       <Box backgroundColor="white" flexDirection="column" padding={12}>
@@ -68,3 +64,25 @@ export function ContentRelationshipFieldPicker() {
     </Box>
   );
 }
+
+type SimplifiedCustomType = {
+  id: string;
+  label: string;
+  fields: { id: string; label: string }[];
+};
+
+function simplifyCustomTypes(customTypes: LocalOrRemoteCustomType[]) {
+  return customTypes.flatMap<SimplifiedCustomType>((ct) => {
+    if (!("local" in ct)) return [];
+
+    const { id, label, tabs } = ct.local;
+    const fields = tabs.flatMap((tab) => {
+      return tab.value.map((field) => ({
+        id: field.key,
+        label: field.value.config?.label ?? field.key,
+      }));
+    });
+
+    return { id, label: label ?? id, fields };
+  });
+}

packages/slice-machine/src/legacy/lib/models/common/widgets/ContentRelationship/Form.tsx

@@ -1,17 +1,12 @@
 import { FormikProps } from "formik";
-import { useSelector } from "react-redux";
-import Select from "react-select";
-import { Box, Label } from "theme-ui";
+import { Box } from "theme-ui";
 import * as yup from "yup";
 
+import { ContentRelationshipFieldPicker } from "@/features/customTypes/fields/ContentRelationshipFieldPicker";
 import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
 import WidgetFormField from "@/legacy/lib/builders/common/EditModal/Field";
 import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
-import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
-
-import { hasLocal } from "../../ModelData";
-import { ContentRelationshipFieldPicker } from "@/features/customTypes/fields/ContentRelationshipFieldPicker";
 
 const FormFields = {
   label: DefaultFields.label,
@@ -29,26 +24,8 @@ type FormProps = {
 
 const WidgetForm = ({
   initialValues,
-  values: formValues,
   fields,
-  setFieldValue,
 }: FormikProps<FormProps> & { fields: Record<string, unknown> }) => {
-  const customTypes = useSelector(selectAllCustomTypes).filter(hasLocal);
-
-  const options = customTypes.map((ct) => ({
-    value: ct.local.id,
-    label: ct.local.label,
-  }));
-
-  const selectValues = formValues.config.customtypes
-    ? formValues.config.customtypes.map((id) => {
-        const ct = customTypes.find(
-          (frontendCustomType) => frontendCustomType.local.id === id,
-        );
-        return { value: ct?.local.id, label: ct?.local.label };
-      })
-    : null;
-
   return (
     <>
       <FlexGrid>