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 { ColorInfo } from '@/components/pastel/color/ColorInfo';
|
||||||
import { ManipulationPanel } from '@/components/pastel/tools/ManipulationPanel';
|
import { ManipulationPanel } from '@/components/pastel/tools/ManipulationPanel';
|
||||||
import { useColorInfo } from '@/lib/pastel/api/queries';
|
import { useColorInfo } from '@/lib/pastel/api/queries';
|
||||||
import { useKeyboard } from '@/lib/pastel/hooks/useKeyboard';
|
|
||||||
import { useColorHistory } from '@/lib/pastel/stores/historyStore';
|
import { useColorHistory } from '@/lib/pastel/stores/historyStore';
|
||||||
import { Loader2, Share2, History, X } from 'lucide-react';
|
import { Loader2, Share2, History, X } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
@@ -58,28 +57,6 @@ function PlaygroundContent() {
|
|||||||
setColor(randomHex);
|
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 (
|
return (
|
||||||
<div className="min-h-screen py-12">
|
<div className="min-h-screen py-12">
|
||||||
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
||||||
@@ -88,14 +65,6 @@ function PlaygroundContent() {
|
|||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
Interactive color manipulation and analysis tool
|
Interactive color manipulation and analysis tool
|
||||||
</p>
|
</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>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
<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 './api/queries';
|
||||||
export * from './stores/historyStore';
|
export * from './stores/historyStore';
|
||||||
export * from './hooks/useKeyboard';
|
|
||||||
export * from './utils/color';
|
export * from './utils/color';
|
||||||
export * from './utils/export';
|
export * from './utils/export';
|
||||||
|
|||||||
Reference in New Issue
Block a user