refactor(ui): move sidebar components to ui package for reusability

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

@@ -0,0 +1,5 @@
+---
+'@openzeppelin/ui-builder-ui': minor
+---
+
+Add reusable sidebar components (SidebarButton, SidebarLayout, SidebarSection) to enable sidebar reuse across projects

packages/builder/src/components/Sidebar/AppSidebar/AppSidebar.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { cn } from '@openzeppelin/ui-builder-utils';
+import { SidebarLayout } from '@openzeppelin/ui-builder-ui';
 
 import ContractUIImportDialog from '../ContractUIs/ContractUIImportDialog';
 import SidebarContent from './SidebarContent';
@@ -21,7 +21,8 @@ interface AppSidebarProps {
 }
 
 /**
- * Main application sidebar component with logo, actions, and saved Contract UIs
+ * Main application sidebar component with logo, actions, and saved Contract UIs.
+ * Uses the generic SidebarLayout from @openzeppelin/ui-builder-ui.
  */
 export default function AppSidebar({
   className,
@@ -35,110 +36,35 @@ export default function AppSidebar({
 }: AppSidebarProps) {
   const [showImportDialog, setShowImportDialog] = useState(false);
 
-  /** Shared sidebar scrollable content wrapper */
-  const SidebarBody = ({
-    paddingClass,
-    gapClass = 'gap-12',
-    onLoadContractUiHandler,
-  }: {
-    paddingClass: string;
-    gapClass?: string;
-    onLoadContractUiHandler: (id: string) => void;
-  }) => (
-    <div className={cn('flex-1 overflow-y-auto', paddingClass)}>
-      <SidebarContent
-        onCreateNew={onCreateNew}
-        onShowImportDialog={() => setShowImportDialog(true)}
-        isInNewUIMode={isInNewUIMode}
-        onLoadContractUI={onLoadContractUiHandler}
-        onResetAfterDelete={onResetAfterDelete}
-        currentLoadedConfigurationId={currentLoadedConfigurationId}
-        gapClass={gapClass}
-      />
-    </div>
-  );
+  const handleLoadContractUI = (id: string) => {
+    // Close mobile sidebar when loading a contract UI
+    if (onOpenChange) {
+      onOpenChange(false);
+    }
+    onLoadContractUI?.(id);
+  };
 
   return (
     <>
-      {/* Sidebar */}
-      <div
-        className={cn(
-          // TODO: Replace hard-coded sidebar background with OpenZeppelin theme
-          // Should use semantic token like 'bg-sidebar-background'
-          'fixed left-0 top-0 z-40 h-full w-[289px] bg-[rgba(245,245,245,0.31)] hidden xl:flex xl:flex-col',
-          className
-        )}
+      <SidebarLayout
+        className={className}
+        header={<SidebarLogo />}
+        footer={<SidebarNavIcons />}
+        mobileOpen={open}
+        onMobileOpenChange={onOpenChange}
       >
-        {/* Fixed Header - Logo */}
-        <div className="flex-shrink-0 px-8 pt-12">
-          <SidebarLogo />
-        </div>
-
-        {/* Scrollable Content Area */}
-        <SidebarBody
-          paddingClass="px-8 pb-24"
-          onLoadContractUiHandler={(id) => onLoadContractUI?.(id)}
+        <SidebarContent
+          onCreateNew={onCreateNew}
+          onShowImportDialog={() => setShowImportDialog(true)}
+          isInNewUIMode={isInNewUIMode}
+          onLoadContractUI={handleLoadContractUI}
+          onResetAfterDelete={onResetAfterDelete}
+          currentLoadedConfigurationId={currentLoadedConfigurationId}
         />
-
-        {/* Fixed footer icons */}
-        <div className="pointer-events-auto sticky bottom-0 px-8 py-4">
-          <SidebarNavIcons />
-        </div>
-      </div>
+      </SidebarLayout>
 
       {/* Import Dialog */}
       <ContractUIImportDialog open={showImportDialog} onOpenChange={setShowImportDialog} />
-
-      {/* Spacer to push content (desktop only) */}
-      <div className="hidden xl:block w-[289px]" />
-
-      {/* Mobile slide-over */}
-      {typeof open === 'boolean' && onOpenChange && (
-        <div
-          className={cn(
-            'xl:hidden fixed inset-0 z-50',
-            open ? 'pointer-events-auto' : 'pointer-events-none'
-          )}
-          aria-hidden={!open}
-        >
-          {/* Backdrop */}
-          <div
-            className={cn(
-              'absolute inset-0 bg-black/40 transition-opacity',
-              open ? 'opacity-100' : 'opacity-0'
-            )}
-            onClick={() => onOpenChange(false)}
-          />
-          {/* Panel */}
-          <div
-            className={cn(
-              'absolute left-0 top-0 h-full w-[85%] max-w-[320px] bg-[rgba(245,245,245,0.98)] shadow-xl transition-transform',
-              open ? 'translate-x-0' : '-translate-x-full'
-            )}
-            role="dialog"
-            aria-modal="true"
-            aria-label="Menu"
-          >
-            <div className="flex h-full flex-col">
-              <div className="flex-shrink-0 px-6 pt-10 pb-4">
-                <SidebarLogo />
-              </div>
-              <SidebarBody
-                paddingClass="px-6 pb-20"
-                gapClass="gap-10"
-                onLoadContractUiHandler={(id) => {
-                  onOpenChange(false);
-                  onLoadContractUI?.(id);
-                }}
-              />
-              {/* Mobile fixed footer icons */}
-              <div className="px-6 py-4">
-                <SidebarNavIcons />
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
     </>
   );
 }

packages/builder/src/components/Sidebar/AppSidebar/ContractUIsSection.tsx

@@ -1,3 +1,5 @@
+import { SidebarSection } from '@openzeppelin/ui-builder-ui';
+
 import { useContractUIStorage } from '../../../contexts/useContractUIStorage';
 import ContractUIsList from '../ContractUIs/ContractUIsList';
 
@@ -26,22 +28,12 @@ export default function ContractUIsSection({
   }
 
   return (
-    <div className="flex flex-col w-full flex-1">
-      {/* Section Header */}
-      <div className="flex items-center justify-between mb-1">
-        {/* TODO: Replace hard-coded text color with OpenZeppelin theme */}
-        {/* Should use semantic token like 'text-sidebar-section-header' */}
-        <div className="text-[#5e5e5e] text-xs font-semibold leading-4">Contract UIs</div>
-      </div>
-
-      {/* List Container */}
-      <div className="flex-1 overflow-hidden">
-        <ContractUIsList
-          onLoadContractUI={onLoadContractUI}
-          onResetAfterDelete={onResetAfterDelete}
-          currentLoadedConfigurationId={currentLoadedConfigurationId}
-        />
-      </div>
-    </div>
+    <SidebarSection title="Contract UIs" grow>
+      <ContractUIsList
+        onLoadContractUI={onLoadContractUI}
+        onResetAfterDelete={onResetAfterDelete}
+        currentLoadedConfigurationId={currentLoadedConfigurationId}
+      />
+    </SidebarSection>
   );
 }

packages/builder/src/components/Sidebar/AppSidebar/MainActions.tsx

@@ -6,12 +6,12 @@ import {
   SquarePen,
 } from 'lucide-react';
 
+import { SidebarButton } from '@openzeppelin/ui-builder-ui';
 import { cn } from '@openzeppelin/ui-builder-utils';
 
 import { useContractUIStorage } from '../../../contexts/useContractUIStorage';
 import { useAnalytics } from '../../../hooks/useAnalytics';
 import { recordHasMeaningfulContent } from '../../UIBuilder/utils/meaningfulContent';
-import SidebarButton from './SidebarButton';
 
 interface MainActionsProps {
   onCreateNew?: () => void;

packages/builder/src/components/Sidebar/AppSidebar/OtherToolsSection.tsx

@@ -1,8 +1,8 @@
+import { SidebarButton, SidebarSection } from '@openzeppelin/ui-builder-ui';
 import { appConfigService } from '@openzeppelin/ui-builder-utils';
 
 import ContractsWizardIconSvg from '../../../assets/icons/contracts-wizard-icon.svg';
 import { DevToolsDropdown } from '../../Common/DevToolsDropdown';
-import SidebarButton from './SidebarButton';
 
 /**
  * Other Tools section component for the sidebar
@@ -12,27 +12,22 @@ export default function OtherToolsSection() {
   const showDevTools = appConfigService.isFeatureEnabled('show_dev_tools');
 
   return (
-    <div className="flex flex-col w-full">
-      {/* TODO: Replace hard-coded text color with OpenZeppelin theme */}
-      {/* Should use semantic token like 'text-sidebar-section-header' */}
-      <div className="text-[#5e5e5e] text-xs font-semibold leading-4 mb-1">Other Tools</div>
-      <div className="flex flex-col">
-        <SidebarButton
-          icon={<img src={ContractsWizardIconSvg} alt="Contracts Wizard" className="size-4" />}
-          href="https://wizard.openzeppelin.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Contracts Wizard
-        </SidebarButton>
+    <SidebarSection title="Other Tools">
+      <SidebarButton
+        icon={<img src={ContractsWizardIconSvg} alt="Contracts Wizard" className="size-4" />}
+        href="https://wizard.openzeppelin.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Contracts Wizard
+      </SidebarButton>
 
-        {/* Dev Tools - Only shown when feature flag is enabled */}
-        {showDevTools && (
-          <div className="relative">
-            <DevToolsDropdown />
-          </div>
-        )}
-      </div>
-    </div>
+      {/* Dev Tools - Only shown when feature flag is enabled */}
+      {showDevTools && (
+        <div className="relative">
+          <DevToolsDropdown />
+        </div>
+      )}
+    </SidebarSection>
   );
 }

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

@@ -18,6 +18,7 @@ export * from './network-status-badge';
 export * from './progress';
 export * from './radio-group';
 export * from './select';
+export * from './sidebar';
 export * from './tabs';
 export * from './textarea';
 export * from './tooltip';