feat: support inline Drawers, deprecating unnecessary props

measuredco · Nov 21, 2024 · 081915f · 081915f
1 parent 1b9a4ba
commit 081915f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 34 deletions.
diff --git a/apps/docs/pages/docs/api-reference/components/drawer-item.mdx b/apps/docs/pages/docs/api-reference/components/drawer-item.mdx
@@ -28,7 +28,6 @@ export function Editor() {
 | Prop                    | Example                   | Type     | Status   |
 | ----------------------- | ------------------------- | -------- | -------- |
 | [`name`](#name)         | `name: "Orange"`          | String   | Required |
-| [`index`](#index)       | `index: 0`                | Number   | Required |
 | [`children`](#children) | `children: () => <div />` | Function | -        |
 | [`id`](#id)             | `id: "OrangeComponent"`   | String   | -        |
 
@@ -41,13 +40,6 @@ The name of this drawer item.
 - This will be rendered on the item by default.
 - Will be used as the `id`, unless otherwise specified
 
-### `index`
-
-A numerical index for each item in the drawer.
-
-- Must be sequential, i.e. `0`, `1`, `2`.
-- Must start at `0`.
-
 ## Optional props
 
 ### `children`
@@ -61,9 +53,7 @@ export function Editor() {
   return (
     <Puck>
       <Drawer>
-        <Drawer.Item name="Orange" index={0}>
-          {() => <div>Orange 🍊</div>}
-        </Drawer.Item>
+        <Drawer.Item name="Orange">{() => <div>Orange 🍊</div>}</Drawer.Item>
       </Drawer>
     </Puck>
   );

diff --git a/apps/docs/pages/docs/api-reference/components/drawer.mdx b/apps/docs/pages/docs/api-reference/components/drawer.mdx
@@ -8,7 +8,7 @@ import { Puck } from "@/core/components/Puck";
 
 # \<Drawer\>
 
-A vertical or horizontal list of items that can be dragged into a [`<Puck.Preview>`](puck-preview). Used for composing custom Puck UIs.
+A list of items that can be dragged into a [`<Puck.Preview>`](puck-preview). Used for composing custom Puck UIs.
 
 <PuckPreview
   config={{ components: { Orange: { render: () => <div>Orange</div> } } }}
@@ -35,31 +35,12 @@ export function Editor() {
 
 ## Props
 
-| Param                         | Example                     | Type                     | Status   |
-| ----------------------------- | --------------------------- | ------------------------ | -------- |
-| [`children`](#children)       | `children: <Drawer.Item />` | ReactNode                | Required |
-| [`direction`](#direction)     | `direction: "horizontal"`   | `horizontal`, `vertical` | -        |
-| [`droppableId`](#droppableId) | `droppableId: "my-drawer"`  | String                   | -        |
+| Param                   | Example                     | Type      | Status   |
+| ----------------------- | --------------------------- | --------- | -------- |
+| [`children`](#children) | `children: <Drawer.Item />` | ReactNode | Required |
 
 ## Required props
 
 ### `children`
 
 A React node representing the contents of the `<Drawer>`. Will likely contain [`<Drawer.Item>`](drawer-item) nodes.
-
-## Optional props
-
-### `direction`
-
-Set the direction of the drawer.
-
-Defaults to `vertical`.
-
-### `droppableId`
-
-Set a custom ID for the underlying [Droppable](https://github.com/hello-pangea/dnd/blob/main/docs/api/droppable.md).
-
-- Must be unique.
-- Will be prefixed with `component-list:`.
-
-Defaults to `default`.
diff --git a/packages/core/components/Drawer/index.tsx b/packages/core/components/Drawer/index.tsx
@@ -92,6 +92,7 @@ const DrawerItem = ({
   children,
   id,
   label,
+  index,
   isDragDisabled,
 }: {
   name: string;
@@ -104,6 +105,12 @@ const DrawerItem = ({
   const resolvedId = id || name;
   const [dynamicId, setDynamicId] = useState(generateId(resolvedId));
 
+  if (typeof index !== "undefined") {
+    console.error(
+      "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
+    );
+  }
+
   useDragListener(
     "dragend",
     () => {
@@ -128,11 +135,25 @@ const DrawerItem = ({
 
 export const Drawer = ({
   children,
+  droppableId,
+  direction,
 }: {
   children: ReactNode;
   droppableId?: string; // TODO deprecate
   direction?: "vertical" | "horizontal"; // TODO deprecate
 }) => {
+  if (droppableId) {
+    console.error(
+      "Warning: The `droppableId` prop on Drawer is deprecated and no longer required."
+    );
+  }
+
+  if (direction) {
+    console.error(
+      "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
+    );
+  }
+
   return <div className={getClassName()}>{children}</div>;
 };