Missing UseDrawer Hook In @refinedev/antd: A Deep Dive

by Luna Greco 55 views

Hey everyone! Let's dive into a bit of a puzzle we've encountered with the @refinedev/antd library. It seems like a super useful hook, useDrawer, made its way into the source code, but it's playing hide-and-seek when we try to import it. 🕵️‍♂️

What's the Deal? 🤔

So, according to pull request #6892, the useDrawer hook was successfully merged into the @refinedev/antd codebase. That's great news, right? 🎉 However, here's the catch: it looks like this hook isn't being exported from the package's main entry point – you know, the index.ts file where all the cool kids hang out. This means that even though the code is there, we can't actually use it directly. 😭

In essence, the useDrawer hook is like a secret ingredient in a recipe that's never listed – you know it's in there, but you can't get your hands on it!

Diving Deeper into the Issue

Let's break down why this is a problem and how we can spot it.

Imagine you're building a fantastic admin panel using refine, and you want to implement a slick drawer component for editing user details. The useDrawer hook seems like the perfect fit – it should handle all the logic for opening, closing, and managing the drawer's state. But when you go to import it, you hit a wall.

This kind of issue can be super frustrating, especially when you're relying on a library to provide certain functionality. It can lead to wasted time, confusion, and the need to find workarounds.

Why Proper Exports Matter

Exporting components and hooks from a library is crucial for its usability. Think of it like this: a library is a toolbox, and the exported functions and components are the tools themselves. If a tool isn't properly placed in the toolbox (i.e., exported), you can't use it, no matter how much you need it. 🛠️

When a hook like useDrawer isn't exported, it breaks the expected flow of development. Developers assume that if a feature is documented or mentioned in a pull request, it should be readily available for use. This expectation is a core part of the open-source ecosystem, where transparency and ease of use are highly valued.

How to Reproduce the Problem 🐛

Want to see this in action yourself? No problem! Here's a step-by-step guide to reproduce the issue:

  1. Install @refinedev/antd version 5.46.3: This is the version where the useDrawer hook should be included based on the merged pull request.

    npm install @refinedev/[email protected]
# OR
yarn add @refinedev/[email protected]
# OR
pnpm add @refinedev/[email protected]

  2. Attempt to import useDrawer in your project: Try importing the hook like you normally would.

    import { useDrawer } from "@refinedev/antd";

  3. Witness the error! You should see a module import error, something like: `Module '