Reorder array items

apps/demo/config/blocks/ButtonGroup/index.tsx

@@ -10,7 +10,7 @@ const getClassName = getClassNameFactory("ButtonGroup", styles);
 
 export type ButtonGroupProps = {
   align?: string;
-  buttons: { label: string; href: string; variant?: "primary" | "secondary" }[];
+  buttons: { label: string; href: string; variant: "primary" | "secondary" }[];
 };
 
 export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
@@ -29,6 +29,11 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
           ],
         },
       },
+      defaultItemProps: {
+        label: "Button",
+        href: "#",
+        variant: "primary",
+      },
     },
     align: {
       type: "radio",
@@ -39,7 +44,7 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
     },
   },
   defaultProps: {
-    buttons: [{ label: "Learn more", href: "#" }],
+    buttons: [{ label: "Learn more", href: "#", variant: "primary" }],
   },
   render: ({ align, buttons }) => {
     return (

packages/core/components/ComponentList/index.tsx

@@ -1,10 +1,10 @@
 import DroppableStrictMode from "../DroppableStrictMode";
-import { ComponentConfig, Config } from "../../types/Config";
-import { Draggable } from "react-beautiful-dnd";
+import { Config } from "../../types/Config";
 
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Grid } from "react-feather";
+import { Draggable } from "../Draggable";
 
 const getClassName = getClassNameFactory("ComponentList", styles);
 
@@ -15,49 +15,26 @@ export const ComponentList = ({ config }: { config: Config }) => {
         <div
           {...provided.droppableProps}
           ref={provided.innerRef}
-          className={getClassName()}
+          className={getClassName({
+            isDraggingFrom: !!snapshot.draggingFromThisWith,
+          })}
         >
           {Object.keys(config.components).map((componentKey, i) => {
-            const componentConfig: ComponentConfig = config[componentKey];
-
             return (
               <Draggable
                 key={componentKey}
-                draggableId={componentKey}
+                id={componentKey}
                 index={i}
+                showShadow
+                disableAnimations
               >
-                {(provided, snapshot) => (
-                  <>
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      className={getClassName("item")}
-                      style={{
-                        ...provided.draggableProps.style,
-                        transform: snapshot.isDragging
-                          ? provided.draggableProps.style?.transform
-                          : "translate(0px, 0px)",
-                      }}
-                    >
-                      {componentKey}
-                      <div className={getClassName("itemIcon")}>
-                        <Grid size={18} />
-                      </div>
+                {() => (
+                  <div className={getClassName("item")}>
+                    {componentKey}
+                    <div className={getClassName("itemIcon")}>
+                      <Grid size={18} />
                     </div>
-                    {/* See https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-906890987 */}
-                    {snapshot.isDragging && (
-                      <div
-                        className={getClassName("itemShadow")}
-                        style={{ transform: "none !important" }}
-                      >
-                        {componentKey}
-                        <div className={getClassName("itemIcon")}>
-                          <Grid size={18} />
-                        </div>
-                      </div>
-                    )}
-                  </>
+                  </div>
                 )}
               </Draggable>
             );

packages/core/components/ComponentList/styles.module.css

@@ -6,8 +6,7 @@
   grid-gap: 12px;
 }
 
-.ComponentList-item,
-.ComponentList-itemShadow {
+.ComponentList-item {
   background: white;
   padding: 12px;
   display: flex;
@@ -20,15 +19,14 @@
   cursor: grab;
 }
 
-.ComponentList-item:last-of-type,
-.ComponentList-itemShadow:last-of-type {
+.ComponentList-item:last-of-type {
   margin-bottom: 0px;
 }
 
 .ComponentList-itemIcon {
   color: var(--puck-color-grey-4);
 }
 
-.ComponentList-item:hover {
+.ComponentList:not(.ComponentList--isDraggingFrom) .ComponentList-item:hover {
   background-color: var(--puck-color-azure-9);
 }

packages/core/components/DragIcon/index.tsx

@@ -0,0 +1,13 @@
+import { getClassNameFactory } from "../../lib";
+
+import styles from "./styles.module.css";
+
+const getClassName = getClassNameFactory("DragIcon", styles);
+
+export const DragIcon = () => (
+  <div className={getClassName()}>
+    <svg viewBox="0 0 20 20" width="12" fill="currentColor">
+      <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+    </svg>
+  </div>
+);

packages/core/components/DragIcon/styles.module.css

@@ -0,0 +1,10 @@
+.DragIcon {
+  color: var(--puck-color-grey-4);
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.DragIcon:hover {
+  cursor: grab;
+  background: var(--puck-color-grey-9);
+}

packages/core/components/Draggable/index.tsx

@@ -0,0 +1,58 @@
+import { ReactNode } from "react";
+import {
+  Draggable as DndDraggable,
+  DraggableProvided,
+  DraggableStateSnapshot,
+} from "react-beautiful-dnd";
+
+export const Draggable = ({
+  className,
+  children,
+  id,
+  index,
+  showShadow,
+  disableAnimations = false,
+}: {
+  className?: (
+    provided: DraggableProvided,
+    snapshot: DraggableStateSnapshot
+  ) => string;
+  children: (
+    provided: DraggableProvided,
+    snapshot: DraggableStateSnapshot
+  ) => ReactNode;
+  id: string;
+  index: number;
+  showShadow?: boolean;
+  disableAnimations?: boolean;
+}) => {
+  return (
+    <DndDraggable draggableId={id} index={index}>
+      {(provided, snapshot) => (
+        <>
+          <div
+            className={className && className(provided, snapshot)}
+            ref={provided.innerRef}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            style={{
+              ...provided.draggableProps.style,
+              transform:
+                snapshot.isDragging || !disableAnimations
+                  ? provided.draggableProps.style?.transform
+                  : "translate(0px, 0px)",
+            }}
+          >
+            {children(provided, snapshot)}
+          </div>
+          {/* See https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-906890987 */}
+          {showShadow && snapshot.isDragging && (
+            <div style={{ transform: "none !important" }}>
+              {children(provided, snapshot)}
+            </div>
+          )}
+        </>
+      )}
+    </DndDraggable>
+  );
+};