refactor(ui): move header component to ui package (#250)

* refactor(ui): move header component to ui package

* chore(common): formatting

Author: pasevin

.changeset/move-header-to-ui.md

@@ -0,0 +1,5 @@
+---
+'@openzeppelin/ui-builder-ui': minor
+---
+
+Move Header component to UI package

packages/builder/src/components/Common/Header.tsx

@@ -1,6 +1,5 @@
-import { Menu } from 'lucide-react';
-
 import { WalletConnectionHeader } from '@openzeppelin/ui-builder-react-core';
+import { Header as UIHeader } from '@openzeppelin/ui-builder-ui';
 
 interface HeaderProps {
   title?: string;
@@ -13,31 +12,10 @@ interface HeaderProps {
  */
 export const Header = ({ title, onOpenSidebar }: HeaderProps) => {
   return (
-    <header className="border-b border-[#F5F5F5] bg-background">
-      <div className="flex h-16 items-center px-3 sm:px-4 md:px-5 min-w-0">
-        {/* Mobile menu button */}
-        <button
-          type="button"
-          aria-label="Open menu"
-          onClick={onOpenSidebar}
-          className="mr-2 sm:mr-3 inline-flex items-center justify-center rounded-md p-2 text-primary hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary xl:hidden"
-        >
-          <Menu className="size-5" />
-        </button>
-        {/* Left side - Title (conditional) */}
-        {title && (
-          <div className="flex items-center min-w-0">
-            <h1 className="truncate max-w-[50vw] text-base font-semibold text-foreground">
-              {title}
-            </h1>
-          </div>
-        )}
-
-        {/* Right side - Wallet Connection */}
-        <div className="ml-auto flex items-center">
-          <WalletConnectionHeader />
-        </div>
-      </div>
-    </header>
+    <UIHeader
+      title={title}
+      onOpenSidebar={onOpenSidebar}
+      rightContent={<WalletConnectionHeader />}
+    />
   );
 };

packages/ui/src/components/ui/header.tsx

@@ -0,0 +1,39 @@
+import { Menu } from 'lucide-react';
+import React from 'react';
+
+export interface HeaderProps {
+  title?: string;
+  /** Open the mobile sidebar */
+  onOpenSidebar?: () => void;
+  /** Content to display on the right side of the header */
+  rightContent?: React.ReactNode;
+}
+
+export const Header = ({ title, onOpenSidebar, rightContent }: HeaderProps): React.ReactElement => {
+  return (
+    <header className="border-b border-[#F5F5F5] bg-background">
+      <div className="flex h-16 items-center px-3 sm:px-4 md:px-5 min-w-0">
+        {/* Mobile menu button */}
+        <button
+          type="button"
+          aria-label="Open menu"
+          onClick={onOpenSidebar}
+          className="mr-2 sm:mr-3 inline-flex items-center justify-center rounded-md p-2 text-primary hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary xl:hidden"
+        >
+          <Menu className="size-5" />
+        </button>
+        {/* Left side - Title (conditional) */}
+        {title && (
+          <div className="flex items-center min-w-0">
+            <h1 className="truncate max-w-[50vw] text-base font-semibold text-foreground">
+              {title}
+            </h1>
+          </div>
+        )}
+
+        {/* Right side - Wallet Connection or other content */}
+        <div className="ml-auto flex items-center">{rightContent}</div>
+      </div>
+    </header>
+  );
+};

packages/ui/src/components/ui/index.ts

@@ -11,6 +11,7 @@ export * from './empty-state';
 export * from './external-link';
 export * from './footer';
 export * from './form';
+export * from './header';
 export * from './input';
 export * from './label';
 export * from './loading-button';