feat(color-picker): reorder theme colors via drag and drop (#10713)

- Add @dnd-kit sortable list on config screen
- Use F36 DragHandle as activator; 8px activation to avoid input conflicts
- Keyboard reordering via dnd-kit KeyboardSensor
- Unique ids per swatch row for a11y

Made-with: Cursor

Author: mgoudy91

apps/color-picker/package-lock.json

@@ -8,6 +8,8 @@
     "@contentful/f36-components": "4.67.0",
     "@contentful/f36-tokens": "4.0.5",
     "@contentful/react-apps-toolkit": "1.2.16",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@emotion/css": "^11.13.0",
     "@tsconfig/create-react-app": "1.0.3",
     "@vitejs/plugin-legacy": "^5.4.2",

apps/color-picker/package.json

@@ -1,4 +1,6 @@
-import { Flex, FormControl, IconButton, TextInput } from '@contentful/f36-components';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DragHandle, Flex, FormControl, IconButton, TextInput } from '@contentful/f36-components';
 import { DeleteIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { css } from 'emotion';
@@ -20,21 +22,48 @@ interface SwatchEditorProps {
 }
 
 export default function SwatchEditor({ swatch, onChange, onRemove }: SwatchEditorProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: swatch.id });
+
+  const rowStyle = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
   return (
-    <div>
+    <div ref={setNodeRef} style={rowStyle}>
       <FormControl marginBottom="spacingM">
         <Flex gap={tokens.spacingXs} alignItems="center">
-          <FormControl.Label htmlFor="SwatchEditor" className={styles.displayNone}>
+          <DragHandle
+            as="button"
+            type="button"
+            ref={setActivatorNodeRef}
+            {...listeners}
+            {...attributes}
+            label="Reorder color in list"
+            variant="transparent"
+            isActive={isDragging}
+          />
+          <FormControl.Label
+            htmlFor={`SwatchEditorColor-${swatch.id}`}
+            className={styles.displayNone}>
             Color
           </FormControl.Label>
           <input
             value={swatch.value}
             onChange={(e) => onChange({ ...swatch, value: e.target.value })}
-            id="SwatchEditorColor"
+            id={`SwatchEditorColor-${swatch.id}`}
             type="color"
           />
           <TextInput
-            name="SwatchEditorName"
+            name={`SwatchEditorName-${swatch.id}`}
             placeholder="Color name"
             size="small"
             value={swatch.name}

apps/color-picker/src/components/SwatchEditor.tsx

@@ -1,3 +1,18 @@
+import {
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
 import { ConfigAppSDK } from '@contentful/app-sdk';
 import {
   Button,
@@ -47,6 +62,39 @@ const ConfigScreen = () => {
   });
   const sdk = useSDK<ConfigAppSDK>();
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleColorsDragEnd = useCallback((event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    setParameters((prev) => {
+      const colors = prev.themes[0].colors;
+      const oldIndex = colors.findIndex((c) => c.id === active.id);
+      const newIndex = colors.findIndex((c) => c.id === over.id);
+      if (oldIndex === -1 || newIndex === -1) {
+        return prev;
+      }
+      return {
+        ...prev,
+        themes: [
+          {
+            ...prev.themes[0],
+            colors: arrayMove(colors, oldIndex, newIndex),
+          },
+        ],
+      };
+    });
+  }, []);
+
   const addSwatch = () => {
     setParameters({
       ...parameters,
@@ -146,17 +194,27 @@ const ConfigScreen = () => {
           <div>
             <Subheading marginBottom="spacingXs">Theme</Subheading>
             <Paragraph>
-              Optionally, specify a set of predefined colors that editors can choose from.
+              Optionally, specify a set of predefined colors that editors can choose from. Drag the
+              handle beside each row to change the order shown in the entry editor.
             </Paragraph>
 
-            {parameters.themes[0].colors.map((swatch) => (
-              <SwatchEditor
-                key={swatch.id}
-                swatch={swatch}
-                onChange={updateSwatch}
-                onRemove={removeSwatch}
-              />
-            ))}
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleColorsDragEnd}>
+              <SortableContext
+                items={parameters.themes[0].colors.map((c) => c.id)}
+                strategy={verticalListSortingStrategy}>
+                {parameters.themes[0].colors.map((swatch) => (
+                  <SwatchEditor
+                    key={swatch.id}
+                    swatch={swatch}
+                    onChange={updateSwatch}
+                    onRemove={removeSwatch}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
 
             <Button size="small" startIcon={<PlusIcon />} onClick={addSwatch}>
               Add color