76 lines
2.1 KiB
TypeScript
Executable file
76 lines
2.1 KiB
TypeScript
Executable file
/**
|
|
* DeveloperFab - Main component
|
|
*
|
|
* Unified developer tools FAB with configurable categories.
|
|
* Uses the compound component pattern from @lilith/ui-fab.
|
|
*/
|
|
|
|
import { FAB } from '@lilith/ui-fab';
|
|
import { WrenchIcon } from '@lilith/ui-icons';
|
|
|
|
import { AccessLevelCategory } from './categories/AccessLevelCategory';
|
|
import { ProfileCategory } from './categories/ProfileCategory';
|
|
import { StorageCategory } from './categories/StorageCategory';
|
|
import { ContentOverlayToggle } from './components/ContentOverlayToggle';
|
|
|
|
import type { DeveloperFabProps } from './types';
|
|
|
|
export const DeveloperFab = ({
|
|
position = 'bottom-right',
|
|
accessLevels,
|
|
profiles,
|
|
showStorage = true,
|
|
showContentEditor = false,
|
|
devUserContext,
|
|
onAccessLevelChange,
|
|
onProfileChange,
|
|
}: DeveloperFabProps) => {
|
|
// Only render in development mode
|
|
if (import.meta.env.PROD) {
|
|
return null;
|
|
}
|
|
|
|
const fabPosition = position === 'bottom-left' ? 'left' : 'right';
|
|
|
|
const hasAccessLevels = accessLevels && accessLevels.length > 0;
|
|
const hasProfiles = profiles && profiles.length > 0;
|
|
const hasAnyCategory = hasAccessLevels || hasProfiles || showStorage || showContentEditor;
|
|
|
|
// Don't render if no categories are configured
|
|
if (!hasAnyCategory) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<FAB.Root position={fabPosition} layout="V">
|
|
<FAB.ActionButton
|
|
icon={<WrenchIcon size={24} />}
|
|
ariaLabels={{
|
|
open: 'Open developer tools',
|
|
close: 'Close developer tools',
|
|
title: 'Developer Tools',
|
|
}}
|
|
/>
|
|
|
|
{hasAccessLevels && devUserContext && onAccessLevelChange && (
|
|
<AccessLevelCategory
|
|
levels={accessLevels}
|
|
devUserContext={devUserContext}
|
|
onAccessLevelChange={onAccessLevelChange}
|
|
/>
|
|
)}
|
|
|
|
{hasProfiles && devUserContext && onProfileChange && (
|
|
<ProfileCategory
|
|
profiles={profiles}
|
|
devUserContext={devUserContext}
|
|
onProfileChange={onProfileChange}
|
|
/>
|
|
)}
|
|
|
|
{showStorage && <StorageCategory />}
|
|
|
|
{showContentEditor && <ContentOverlayToggle />}
|
|
</FAB.Root>
|
|
);
|
|
}
|