refactor(pastel): remove keyboard shortcuts and useKeyboard hook
This commit is contained in:
@@ -7,7 +7,6 @@ import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
|
||||
import { ColorInfo } from '@/components/pastel/color/ColorInfo';
|
||||
import { ManipulationPanel } from '@/components/pastel/tools/ManipulationPanel';
|
||||
import { useColorInfo } from '@/lib/pastel/api/queries';
|
||||
import { useKeyboard } from '@/lib/pastel/hooks/useKeyboard';
|
||||
import { useColorHistory } from '@/lib/pastel/stores/historyStore';
|
||||
import { Loader2, Share2, History, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
@@ -58,28 +57,6 @@ function PlaygroundContent() {
|
||||
setColor(randomHex);
|
||||
};
|
||||
|
||||
// Keyboard shortcuts
|
||||
useKeyboard([
|
||||
{
|
||||
key: 'c',
|
||||
meta: true,
|
||||
handler: handleCopyColor,
|
||||
description: 'Copy color',
|
||||
},
|
||||
{
|
||||
key: 's',
|
||||
meta: true,
|
||||
handler: handleShare,
|
||||
description: 'Share color',
|
||||
},
|
||||
{
|
||||
key: 'r',
|
||||
meta: true,
|
||||
handler: handleRandomColor,
|
||||
description: 'Random color',
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-12">
|
||||
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
||||
@@ -88,14 +65,6 @@ function PlaygroundContent() {
|
||||
<p className="text-muted-foreground">
|
||||
Interactive color manipulation and analysis tool
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
|
||||
<kbd className="px-2 py-1 bg-muted rounded border">⌘C</kbd>
|
||||
<span>Copy</span>
|
||||
<kbd className="px-2 py-1 bg-muted rounded border ml-3">⌘S</kbd>
|
||||
<span>Share</span>
|
||||
<kbd className="px-2 py-1 bg-muted rounded border ml-3">⌘R</kbd>
|
||||
<span>Random</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export interface KeyboardShortcut {
|
||||
key: string;
|
||||
ctrl?: boolean;
|
||||
shift?: boolean;
|
||||
alt?: boolean;
|
||||
meta?: boolean;
|
||||
handler: (event: KeyboardEvent) => void;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to register keyboard shortcuts
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* useKeyboard([
|
||||
* {
|
||||
* key: 'c',
|
||||
* meta: true, // Cmd on Mac, Ctrl on Windows
|
||||
* handler: () => copyToClipboard(),
|
||||
* description: 'Copy color',
|
||||
* },
|
||||
* {
|
||||
* key: 'k',
|
||||
* meta: true,
|
||||
* handler: () => openCommandPalette(),
|
||||
* description: 'Open command palette',
|
||||
* },
|
||||
* ]);
|
||||
* ```
|
||||
*/
|
||||
export function useKeyboard(shortcuts: KeyboardShortcut[]) {
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
for (const shortcut of shortcuts) {
|
||||
const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase();
|
||||
|
||||
// Check if required modifiers match (only check if explicitly required)
|
||||
const ctrlMatches = shortcut.ctrl === true ? event.ctrlKey : true;
|
||||
const shiftMatches = shortcut.shift === true ? event.shiftKey : true;
|
||||
const altMatches = shortcut.alt === true ? event.altKey : true;
|
||||
|
||||
// Handle meta/cmd key with cross-platform support
|
||||
let metaMatches = true;
|
||||
if (shortcut.meta === true) {
|
||||
// On Mac: require Cmd key
|
||||
// On Windows/Linux: accept Ctrl key as Cmd equivalent
|
||||
const isMac = navigator.platform.includes('Mac');
|
||||
metaMatches = isMac ? event.metaKey : event.ctrlKey;
|
||||
}
|
||||
|
||||
// Ensure unwanted modifiers are not pressed (unless explicitly required)
|
||||
const noExtraCtrl = shortcut.ctrl === true || shortcut.meta === true || !event.ctrlKey;
|
||||
const noExtraShift = shortcut.shift === true || !event.shiftKey;
|
||||
const noExtraAlt = shortcut.alt === true || !event.altKey;
|
||||
const noExtraMeta = shortcut.meta === true || !event.metaKey;
|
||||
|
||||
if (
|
||||
keyMatches &&
|
||||
ctrlMatches &&
|
||||
shiftMatches &&
|
||||
altMatches &&
|
||||
metaMatches &&
|
||||
noExtraCtrl &&
|
||||
noExtraShift &&
|
||||
noExtraAlt &&
|
||||
noExtraMeta
|
||||
) {
|
||||
event.preventDefault();
|
||||
shortcut.handler(event);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [shortcuts]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to register a single keyboard shortcut (convenience wrapper)
|
||||
*/
|
||||
export function useKeyboardShortcut(
|
||||
key: string,
|
||||
handler: (event: KeyboardEvent) => void,
|
||||
modifiers?: {
|
||||
ctrl?: boolean;
|
||||
shift?: boolean;
|
||||
alt?: boolean;
|
||||
meta?: boolean;
|
||||
}
|
||||
) {
|
||||
useKeyboard([
|
||||
{
|
||||
key,
|
||||
...modifiers,
|
||||
handler,
|
||||
},
|
||||
]);
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
export * from './api/queries';
|
||||
export * from './stores/historyStore';
|
||||
export * from './hooks/useKeyboard';
|
||||
export * from './utils/color';
|
||||
export * from './utils/export';
|
||||
|
||||
Reference in New Issue
Block a user