WIP: Is just a backup

lib/components/Command/Command.stories.tsx

@@ -1,14 +1,11 @@
+import { useContext, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Moon, Sun, Database } from 'react-feather';
 
 import { ThemeProvider, useTheme } from '../../contexts';
 
-import {
-  Command as CommandComponent,
-  CommandGroup,
-  CommandItem,
-} from './Command';
-import { CommandSeparator } from 'cmdk';
+import { Command as CommandComponent } from './Command';
+import { CommandContext, CommandProvider } from './contexts';
+import { CommandInput } from './components';
 
 type Story = StoryObj<typeof CommandComponent>;
 
@@ -20,16 +17,45 @@ const meta: Meta<typeof CommandComponent> = {
 export const Command: Story = {
   render: () => {
     const Wrapper = () => {
-      const { theme, setTheme } = useTheme();
+      const { theme } = useTheme();
+      const { isOpen, setOpen, toggleOpen } = useContext(CommandContext);
+
+      useEffect(() => {
+        const down = (e: KeyboardEvent) => {
+          if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {
+            if (
+              (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+              e.target instanceof HTMLInputElement ||
+              e.target instanceof HTMLTextAreaElement ||
+              e.target instanceof HTMLSelectElement
+            ) {
+              return;
+            }
+
+            e.preventDefault();
+            toggleOpen();
+          }
+        };
+
+        document.addEventListener('keydown', down);
+        return () => document.removeEventListener('keydown', down);
+      }, [toggleOpen]);
 
       return (
         <>
-          <p>
-            Current Theme: <span>{theme}</span>
-          </p>
+          <div className="flex gap-3 items-center">
+            <p>
+              Current Theme: <span>{theme}</span>
+            </p>
 
-          <CommandComponent>
-            <CommandGroup heading="Theme">
+            <kbd className="pointer-events-none h-5 select-none flex items-center gap-1 rounded-md bg-kubefirst-secondary px-1.5 font-mono text-[10px] font-medium opacity-100 text-white">
+              <span className="text-xs">⌘</span>K
+            </kbd>
+          </div>
+
+          <CommandComponent open={isOpen} onOpenChange={setOpen}>
+            <CommandInput placeholder="Type a command or search..." />
+            {/* <CommandGroup heading="Theme">
               <CommandItem onSelect={() => setTheme!('kubefirst')}>
                 <Sun />
                 Kubefirst
@@ -63,15 +89,17 @@ export const Command: Story = {
                 <Database />
                 Civo
               </CommandItem>
-            </CommandGroup>
+            </CommandGroup> */}
           </CommandComponent>
         </>
       );
     };
 
     return (
       <ThemeProvider theme="kubefirst">
-        <Wrapper />
+        <CommandProvider>
+          <Wrapper />
+        </CommandProvider>
       </ThemeProvider>
     );
   },

lib/components/Command/Command.tsx

@@ -1,18 +1,28 @@
 import { FC } from 'react';
+import { DialogTitle, Root } from '@radix-ui/react-dialog';
 
 import {
-  CommandDialog,
+  Command as CommandBase,
   CommandGroup,
   CommandItem,
   CommandSeparator,
+  DialogContent,
 } from './components';
 import { CommandProps } from './Command.types';
-import { CommandProvider } from './contexts/Command.provider';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 
 const Command: FC<CommandProps> = ({ children, ...props }) => (
-  <CommandProvider>
-    <CommandDialog {...props}>{children}</CommandDialog>
-  </CommandProvider>
+  <Root {...props}>
+    <DialogContent className="overflow-hidden p-0">
+      <DialogTitle className="hidden">
+        <VisuallyHidden>Test</VisuallyHidden>
+      </DialogTitle>
+
+      <CommandBase className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        {children}
+      </CommandBase>
+    </DialogContent>
+  </Root>
 );
 
 export { Command, CommandGroup, CommandItem, CommandSeparator };

lib/components/Command/Command.types.ts

@@ -1,11 +1,13 @@
 import { PropsWithChildren } from 'react';
 import { VariantProps } from 'class-variance-authority';
+import { DialogProps } from '@radix-ui/react-dialog';
 
 import { commandVariants } from './Command.variants';
 
 export interface CommandProps
   extends VariantProps<typeof commandVariants>,
-    PropsWithChildren {
+    PropsWithChildren,
+    DialogProps {
   className?: string;
   emptyResults?: string;
   placeholder?: string;

lib/components/Command/components/Command.tsx

@@ -9,7 +9,10 @@ const Command = forwardRef<
 >(({ className, children, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
-    className={cn('flex justify-center items-center', className)}
+    className={cn(
+      'flex justify-center items-center overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
+    )}
     {...props}
   >
     <div className="w-[500px]">{children}</div>

lib/components/Command/components/CommandSeparator.tsx

@@ -13,6 +13,7 @@ const CommandSeparator = forwardRef<
     {...props}
   />
 ));
+
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 export { CommandSeparator };

lib/components/Command/components/CommandShortcut.tsx

@@ -5,17 +5,16 @@ import { cn } from '../../../utils';
 const CommandShortcut = ({
   className,
   ...props
-}: HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground',
-        className,
-      )}
-      {...props}
-    />
-  );
-};
+}: HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn(
+      'ml-auto text-xs tracking-widest text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+);
+
 CommandShortcut.displayName = 'CommandShortcut';
 
 export { CommandShortcut };

lib/components/Command/components/DialogContent.tsx

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react';
+import { Close, Content, DialogPortal } from '@radix-ui/react-dialog';
+import { X } from 'react-feather';
+
+import { cn } from '../../../utils';
+
+import { DialogOverlay } from './DialogOverlay';
+
+const DialogContent = forwardRef<
+  ComponentRef<typeof Content>,
+  ComponentPropsWithoutRef<typeof Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+
+    <Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+
+      <Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </Close>
+    </Content>
+  </DialogPortal>
+));
+
+DialogContent.displayName = Content.displayName;
+
+export { DialogContent };

lib/components/Command/components/DialogOverlay.tsx

@@ -0,0 +1,22 @@
+import { ComponentRef, forwardRef } from 'react';
+import { Overlay } from '@radix-ui/react-dialog';
+
+import { cn } from '../../../utils';
+
+const DialogOverlay = forwardRef<
+  ComponentRef<typeof Overlay>,
+  React.ComponentPropsWithoutRef<typeof Overlay>
+>(({ className, ...props }, ref) => (
+  <Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+
+DialogOverlay.displayName = Overlay.displayName;
+
+export { DialogOverlay };

lib/components/Command/components/index.ts

@@ -1,8 +1,9 @@
-export * from './CommandDialog/CommandDialog';
 export * from './CommandEmpty';
 export * from './CommandGroup';
 export * from './CommandInput';
 export * from './CommandItem';
 export * from './CommandList';
 export * from './CommandSeparator';
 export * from './CommandShortcut';
+export * from './DialogContent';
+export * from './Command';

lib/components/Command/contexts/index.ts

@@ -0,0 +1,3 @@
+export * from './Command.context';
+export * from './Command.provider';
+export * from './Command.types';