diff --git a/codegen/package.json b/codegen/package.json
index cf044258f..b4b83d0ed 100644
--- a/codegen/package.json
+++ b/codegen/package.json
@@ -20,6 +20,7 @@
},
"dependencies": {
"@metabuilder/api-clients": "workspace:*",
+ "@metabuilder/components": "workspace:*",
"@metabuilder/core-hooks": "workspace:*",
"@metabuilder/fakemui": "workspace:*",
"@metabuilder/hooks-auth": "workspace:*",
diff --git a/codegen/src/components/KeyboardShortcutsDialog.tsx b/codegen/src/components/KeyboardShortcutsDialog.tsx
index 9e062f5d4..0dd4a13be 100644
--- a/codegen/src/components/KeyboardShortcutsDialog.tsx
+++ b/codegen/src/components/KeyboardShortcutsDialog.tsx
@@ -5,17 +5,63 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
-import { Separator } from '@/components/ui/separator'
import { Keyboard } from '@phosphor-icons/react'
+import {
+ KeyboardShortcutsContent,
+ getPlatformModifier,
+ type ShortcutCategory,
+} from '@metabuilder/components'
interface KeyboardShortcutsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
+/**
+ * Get codegen-specific keyboard shortcuts
+ * Shortcuts are defined as data for easy maintenance and localization
+ */
+function getCodegenShortcuts(): ShortcutCategory[] {
+ const ctrlKey = getPlatformModifier()
+
+ return [
+ {
+ category: 'Navigation',
+ items: [
+ { keys: [ctrlKey, '1'], description: 'Go to Dashboard' },
+ { keys: [ctrlKey, '2'], description: 'Go to Code Editor' },
+ { keys: [ctrlKey, '3'], description: 'Go to Models' },
+ { keys: [ctrlKey, '4'], description: 'Go to Components' },
+ { keys: [ctrlKey, '5'], description: 'Go to Component Trees' },
+ { keys: [ctrlKey, '6'], description: 'Go to Workflows' },
+ { keys: [ctrlKey, '7'], description: 'Go to Lambdas' },
+ { keys: [ctrlKey, '8'], description: 'Go to Styling' },
+ { keys: [ctrlKey, '9'], description: 'Go to Favicon Designer' },
+ ],
+ },
+ {
+ category: 'Actions',
+ items: [
+ { keys: [ctrlKey, 'K'], description: 'Search Everything' },
+ { keys: [ctrlKey, 'E'], description: 'Export Project' },
+ { keys: [ctrlKey, 'Shift', 'G'], description: 'AI Generate' },
+ { keys: [ctrlKey, '/'], description: 'Show Keyboard Shortcuts' },
+ ],
+ },
+ {
+ category: 'Code Editor',
+ items: [
+ { keys: [ctrlKey, 'F'], description: 'Find in file' },
+ { keys: [ctrlKey, 'H'], description: 'Find and replace' },
+ { keys: [ctrlKey, 'Z'], description: 'Undo' },
+ { keys: [ctrlKey, 'Shift', 'Z'], description: 'Redo' },
+ ],
+ },
+ ]
+}
+
export function KeyboardShortcutsDialog({ open, onOpenChange }: KeyboardShortcutsDialogProps) {
- const isMac = navigator.platform.includes('Mac')
- const ctrlKey = isMac ? '⌘' : 'Ctrl'
+ const shortcuts = getCodegenShortcuts()
return (
)
}
-
-function ShortcutRow({ keys, description }: { keys: string[]; description: string }) {
- return (
-
-
{description}
-
- {keys.map((key, index) => (
-
- {key}
-
- ))}
-
-
+ {status === 'connected' ? 'Connected' : 'Local'}
+ {showDot && }
+
+ ),
+ statusIndicatorStyles: '',
+}));
+
describe('BackendIndicator', () => {
beforeEach(() => {
jest.clearAllMocks();
@@ -22,37 +33,37 @@ describe('BackendIndicator', () => {
expect(screen.getByText('Local')).toBeInTheDocument();
});
- test('has disconnected styling', () => {
+ test('has disconnected status', () => {
+ render();
+ const indicator = screen.getByTestId('status-badge');
+ expect(indicator).toHaveAttribute('data-status', 'disconnected');
+ });
+
+ test('renders wrapper with test id', () => {
+ render();
+ const wrapper = screen.getByTestId('backend-indicator');
+ expect(wrapper).toBeInTheDocument();
+ });
+
+ test('renders status badge', () => {
+ render();
+ const indicator = screen.getByTestId('status-badge');
+ expect(indicator).toBeInTheDocument();
+ });
+
+ test('has status role for accessibility', () => {
+ render();
+ const indicator = screen.getByRole('status');
+ expect(indicator).toBeInTheDocument();
+ });
+
+ test('renders with correct content', () => {
render();
const indicator = screen.getByTestId('backend-indicator');
expect(indicator).toBeInTheDocument();
});
- test('renders database icon', () => {
- render();
- const indicator = screen.getByTestId('backend-indicator');
- expect(indicator).toBeInTheDocument();
- });
-
- test('has styling applied', () => {
- render();
- const indicator = screen.getByTestId('backend-indicator');
- expect(indicator).toHaveClass('flex');
- });
-
- test('renders with background and border', () => {
- render();
- const indicator = screen.getByTestId('backend-indicator');
- expect(indicator).toBeInTheDocument();
- });
-
- test('renders with proper sizing', () => {
- render();
- const indicator = screen.getByTestId('backend-indicator');
- expect(indicator).toBeInTheDocument();
- });
-
- test('has tooltip on hover', () => {
+ test('has proper structure', () => {
render();
const indicator = screen.getByTestId('backend-indicator');
expect(indicator).toBeInTheDocument();
@@ -71,27 +82,27 @@ describe('BackendIndicator', () => {
expect(screen.getByText('Connected')).toBeInTheDocument();
});
- test('has connected styling', () => {
+ test('has connected status', () => {
render();
- const indicator = screen.getByTestId('backend-indicator');
- expect(indicator).toBeInTheDocument();
+ const indicator = screen.getByTestId('status-badge');
+ expect(indicator).toHaveAttribute('data-status', 'connected');
});
test('displays connected state', () => {
render();
- const indicator = screen.getByTestId('backend-indicator');
+ const indicator = screen.getByTestId('status-badge');
expect(indicator).toBeInTheDocument();
});
- test('renders with accent styling', () => {
+ test('renders with connected styling', () => {
render();
- const indicator = screen.getByTestId('backend-indicator');
+ const indicator = screen.getByTestId('status-badge');
expect(indicator).toBeInTheDocument();
});
- test('renders cloud check icon', () => {
+ test('renders status component', () => {
render();
- const indicator = screen.getByTestId('backend-indicator');
+ const indicator = screen.getByTestId('status-badge');
expect(indicator).toBeInTheDocument();
});
});
@@ -105,8 +116,8 @@ describe('BackendIndicator', () => {
test('shows dot indicator when auto-configured', () => {
(process.env as any).NEXT_PUBLIC_FLASK_BACKEND_URL = 'http://localhost:5000';
- const { container } = render();
- const dot = container.querySelector('[class*="rounded-full"]');
+ render();
+ const dot = screen.getByTestId('activity-dot');
expect(dot).toBeInTheDocument();
});
@@ -117,20 +128,20 @@ describe('BackendIndicator', () => {
});
render();
expect(screen.getByText('Connected')).toBeInTheDocument();
+ expect(screen.queryByTestId('activity-dot')).not.toBeInTheDocument();
});
});
describe('Tooltip functionality', () => {
- test('renders tooltip for local storage', () => {
+ test('renders status for local storage', () => {
(storageModule.getStorageConfig as jest.Mock).mockReturnValue({
backend: 'indexeddb',
});
render();
- // Tooltip content is rendered in TooltipProvider
expect(screen.getByTestId('backend-indicator')).toBeInTheDocument();
});
- test('renders tooltip for Flask backend', () => {
+ test('renders status for Flask backend', () => {
(storageModule.getStorageConfig as jest.Mock).mockReturnValue({
backend: 'flask',
});
@@ -152,16 +163,16 @@ describe('BackendIndicator', () => {
expect(indicator).toHaveTextContent('Local');
});
- test('renders with proper font weight', () => {
+ test('renders status badge component', () => {
render();
- const indicator = screen.getByTestId('backend-indicator');
+ const indicator = screen.getByTestId('status-badge');
expect(indicator).toBeInTheDocument();
});
- test('renders flex container for alignment', () => {
+ test('renders wrapper element', () => {
render();
const indicator = screen.getByTestId('backend-indicator');
- expect(indicator).toHaveClass('flex');
+ expect(indicator).toBeInTheDocument();
});
});
diff --git a/pastebin/src/components/layout/BackendIndicator.tsx b/pastebin/src/components/layout/BackendIndicator.tsx
index 1c4dacf52..83520902c 100644
--- a/pastebin/src/components/layout/BackendIndicator.tsx
+++ b/pastebin/src/components/layout/BackendIndicator.tsx
@@ -1,56 +1,44 @@
-import { Database, CloudCheck } from '@phosphor-icons/react'
-import { getStorageConfig } from '@/lib/storage'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+'use client'
+import { BackendStatus, statusIndicatorStyles } from '@metabuilder/components'
+import { getStorageConfig } from '@/lib/storage'
+import { useEffect } from 'react'
+
+// Inject status indicator styles (only once)
+if (typeof document !== 'undefined') {
+ const styleId = 'backend-status-styles'
+ if (!document.getElementById(styleId)) {
+ const styleTag = document.createElement('style')
+ styleTag.id = styleId
+ styleTag.textContent = statusIndicatorStyles
+ document.head.appendChild(styleTag)
+ }
+}
+
+/**
+ * Backend connection indicator component.
+ * Uses the shared BackendStatus component from @metabuilder/components.
+ * Reads storage configuration and displays connection status.
+ */
export function BackendIndicator() {
const { backend } = getStorageConfig()
const isEnvConfigured = Boolean(process.env.NEXT_PUBLIC_FLASK_BACKEND_URL)
- if (backend === 'indexeddb') {
- return (
-
-
-
-
-
- Local
-
-
-
- Disconnected from backend - Using local storage
-
-
-
- )
- }
+ // Determine status based on backend type
+ const status = backend === 'indexeddb' ? 'disconnected' : 'connected'
return (
-
-
-
-
-
- Connected
- {isEnvConfigured && (
-
- )}
-
-
-
- Connected to Flask Backend
- {isEnvConfigured && Auto-configured
}
-
-
-
+
+
+
)
}
diff --git a/workflowui/package.json b/workflowui/package.json
index 3a62ce722..543a63837 100644
--- a/workflowui/package.json
+++ b/workflowui/package.json
@@ -21,6 +21,7 @@
"dependencies": {
"@metabuilder/api-clients": "file:../../redux/api-clients",
"@metabuilder/core-hooks": "file:../../redux/core-hooks",
+ "@metabuilder/components": "file:../components",
"@metabuilder/fakemui": "file:../fakemui",
"@reduxjs/toolkit": "^2.5.2",
"axios": "^1.7.7",
diff --git a/workflowui/src/components/Layout/RootLayoutClient.tsx b/workflowui/src/components/Layout/RootLayoutClient.tsx
index 806a73749..9cfca9fab 100644
--- a/workflowui/src/components/Layout/RootLayoutClient.tsx
+++ b/workflowui/src/components/Layout/RootLayoutClient.tsx
@@ -9,7 +9,7 @@ import React from 'react';
import { Provider } from 'react-redux';
import { store } from '../../store/store';
import MainLayout from './MainLayout';
-import { NotificationContainer } from '../UI/NotificationContainer';
+import { NotificationAdapter } from '../UI/NotificationAdapter';
import { LoadingOverlay } from '../UI/LoadingOverlay';
import { AuthInitializer } from '../Auth/AuthInitializer';
@@ -24,7 +24,7 @@ export default function RootLayoutClient({ children }: RootLayoutClientProps) {
{children}
-
+
);
diff --git a/workflowui/src/components/UI/NotificationAdapter.tsx b/workflowui/src/components/UI/NotificationAdapter.tsx
new file mode 100644
index 000000000..864a7409e
--- /dev/null
+++ b/workflowui/src/components/UI/NotificationAdapter.tsx
@@ -0,0 +1,62 @@
+/**
+ * Notification Adapter Component
+ * Bridges the useUI() Redux hook to the shared NotificationContainer component
+ *
+ * This adapter connects workflowui's Redux-based notification state
+ * to the framework-agnostic NotificationContainer from @metabuilder/components
+ */
+
+'use client';
+
+import React from 'react';
+import {
+ NotificationContainer,
+ type NotificationData,
+ type NotificationPosition,
+} from '@metabuilder/components';
+import { useUINotifications } from '../../hooks/ui';
+
+export interface NotificationAdapterProps {
+ /** Position on screen - defaults to top-right */
+ position?: NotificationPosition;
+ /** Maximum notifications to show at once */
+ maxVisible?: number;
+ /** Custom className for container */
+ className?: string;
+}
+
+/**
+ * Notification adapter that connects Redux state to the shared component
+ *
+ * @example
+ * // In your layout:
+ *
+ */
+export const NotificationAdapter: React.FC = ({
+ position = 'top-right',
+ maxVisible = 5,
+ className,
+}) => {
+ const { notifications, removeNotification } = useUINotifications();
+
+ // Map workflowui Notification type to shared NotificationData type
+ // Both types are compatible - id, type, message, duration
+ const mappedNotifications: NotificationData[] = notifications.map((n) => ({
+ id: n.id,
+ type: n.type,
+ message: n.message,
+ duration: n.duration,
+ }));
+
+ return (
+
+ );
+};
+
+export default NotificationAdapter;
diff --git a/workflowui/src/components/UI/NotificationContainer.tsx b/workflowui/src/components/UI/NotificationContainer.tsx
index 1a5adffc1..3e4066554 100644
--- a/workflowui/src/components/UI/NotificationContainer.tsx
+++ b/workflowui/src/components/UI/NotificationContainer.tsx
@@ -1,6 +1,14 @@
/**
- * Notification Container Component
- * Displays notifications from Redux state
+ * @deprecated This component is deprecated in favor of the shared NotificationContainer
+ * from @metabuilder/components. Use NotificationAdapter instead, which bridges
+ * the Redux state to the shared component.
+ *
+ * Migration guide:
+ * - Replace imports of NotificationContainer with NotificationAdapter
+ * - The adapter automatically connects to useUI() hook
+ *
+ * @see /src/components/UI/NotificationAdapter.tsx
+ * @see @metabuilder/components NotificationContainer
*/
import React, { useEffect } from 'react';