Merge pull request #228 from justdlabs/yuxxeun/main

Yuxxeun/main
irsyadadl · Oct 18, 2024 · 0f50eb5 · 0f50eb5
2 parents 6bf2fad + 3550154
commit 0f50eb5
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 15 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/docs/controls/command-menu/command-menu-blur-demo.tsx b/components/docs/controls/command-menu/command-menu-blur-demo.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import React from 'react'
+
+import { IconBill, IconCube, IconGear, IconHome, IconNotes, IconShield } from 'justd-icons'
+// Replace with your router link component
+import Link from 'next/link'
+import { Avatar, Button, CommandMenu } from 'ui'
+
+export default function CommandMenuBlurDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+  return (
+    <>
+      <Button appearance="outline" onPress={() => setIsOpen(true)}>
+        Open
+      </Button>
+      <CommandMenu isBlurred isOpen={isOpen} onOpenChange={setIsOpen}>
+        <CommandMenu.Input placeholder="Quick search..." />
+        <CommandMenu.List>
+          <CommandMenu.Section separator heading="Pages">
+            <CommandMenu.Item asChild>
+              <Link href="#">
+                <IconHome /> Home
+              </Link>
+            </CommandMenu.Item>
+            <CommandMenu.Item asChild>
+              <Link href="#">
+                <IconNotes /> Docs
+                <CommandMenu.Keyboard keys="⌘k" />
+              </Link>
+            </CommandMenu.Item>
+            <CommandMenu.Item asChild>
+              <Link href="#">
+                <IconCube /> Components
+              </Link>
+            </CommandMenu.Item>
+          </CommandMenu.Section>
+          <CommandMenu.Section separator heading="Dashboard">
+            <CommandMenu.Item asChild>
+              <Link href="#">
+                <IconBill /> Billing
+              </Link>
+            </CommandMenu.Item>
+            <CommandMenu.Item asChild>
+              <Link href="#">
+                <IconGear /> Settings
+                <CommandMenu.Keyboard keys="⌘s" />
+              </Link>
+            </CommandMenu.Item>
+            <CommandMenu.Item asChild>
+              <Link href="#">
+                <IconShield /> Security
+              </Link>
+            </CommandMenu.Item>
+          </CommandMenu.Section>
+          <CommandMenu.Section heading="Team">
+            {users.map((user) => (
+              <CommandMenu.Item key={user.id}>
+                <Avatar src={user.image_url} />
+                {user.name}
+              </CommandMenu.Item>
+            ))}
+          </CommandMenu.Section>
+        </CommandMenu.List>
+      </CommandMenu>
+    </>
+  )
+}
+
+const users = [
+  { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' },
+  { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' },
+  { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' },
+  { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' },
+  { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' }
+]
diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from 'react';
+import React from 'react'
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field/date-field-demo": {
@@ -737,6 +737,9 @@ export const previews: Record<string, any> = {
   "controls/command-menu/command-menu-trigger-by-keyboard-demo": {
     component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-trigger-by-keyboard-demo")),
   },
+  "controls/command-menu/command-menu-blur-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-blur-demo")),
+  },
   "controls/command-menu/command-menu-demo": {
     component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-demo")),
   },

diff --git a/components/ui/command-menu.tsx b/components/ui/command-menu.tsx
@@ -19,7 +19,6 @@ const commandStyles = tv({
     command: [
       'flex h-svh w-full flex-col overflow-hidden rounded-md sm:h-full',
       '[&_[cmdk-group-heading]]:ml-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:-mb-1.5 [&_[cmdk-group-heading]]:text-muted-fg [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_[data-slot=icon]]:size-5 [&_[cmdk-input]]:h-12',
-      // for specific properties, it has to be controlled by the command
       '[&_[cmdk-item]]:py-2.5 [&_[cmdk-item]]:pl-2.5 [&_[cmdk-item]]:pr-4'
     ],
     list: 'overflow-y-auto lg:pb-0 max-h-[calc(100vh-35%)] pb-16 [&:not(:has(.xda32kfseccmd))]:p-2 [&:not(:has(.xda32kfseccmd))_.s3xsprt]:my-2 overflow-x-hidden md:max-h-[456px]',
@@ -50,14 +49,10 @@ const commandStyles = tv({
     description: 'sm:inline hidden text-sm ml-auto',
     item: [
       'group relative flex cursor-default select-none items-center rounded-lg py-2 text-sm outline-none',
-      // selected
       'data-[selected=true]:bg-accent data-[selected=true]:text-accent-fg [&[data-selected=true]_[data-slot=icon]]:text-accent-fg',
       'focus-visible:bg-accent focus-visible:text-accent-fg [&:focus-visible_[data-slot=icon]]:text-accent-fg',
-      // danger
       'data-[danger=true]:text-danger data-[danger=true]:data-[selected=true]:bg-danger data-[danger=true]:data-[selected=true]:text-danger-fg',
-      // disabled
       'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-      // icon
       '[&_[data-slot=icon]]:mr-2 [&_[data-slot=icon]]:size-[1.10rem] [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg',
       '[&_[data-slot=avatar]]:mr-2 [&_[data-slot=avatar]]:size-[1.10rem] [&_[data-slot=avatar]]:shrink-0'
     ]
@@ -66,6 +61,9 @@ const commandStyles = tv({
   variants: {
     isDanger: {
       true: 'text-danger data-[selected=true]:bg-danger data-[selected=true]:text-danger-fg [&[data-selected=true]_[data-slot=icon]]:text-danger-fg'
+    },
+    isBlurred: {
+      true: 'backdrop-blur-sm'
     }
   }
 })
@@ -88,6 +86,7 @@ interface CommandMenuContextProps {
   hideSearchIndicator?: boolean
   hideCloseButton?: boolean
   messageOnEmpty?: boolean | string
+  isBlurred?: boolean
 }
 
 const CommandMenuContext = React.createContext<CommandMenuContextProps>({})
@@ -115,6 +114,7 @@ interface CommandMenuProps
     overlay?: string
     content?: string
   }
+  isBlurred?: boolean
 }
 
 const CommandMenu = ({
@@ -125,14 +125,18 @@ const CommandMenu = ({
   value,
   onValueChange,
   children,
+  isBlurred = false,
   ...props
 }: CommandMenuProps) => {
   const isDesktop = useMediaQuery('(min-width: 1024px)')
+
   return (
     <CommandMenuContext.Provider value={{ hideSearchIndicator, hideCloseButton, messageOnEmpty }}>
       <ModalOverlay
         isDismissable
-        className={modalOverlay({ className: classNames?.overlay })}
+        className={modalOverlay({
+          className: twJoin(classNames?.overlay, isBlurred ? 'backdrop-blur' : '')
+        })}
         {...props}
       >
         <Modal className={modal({ className: classNames?.content })}>

diff --git a/components/ui/field.tsx b/components/ui/field.tsx
@@ -2,19 +2,21 @@
 
 import * as React from 'react'
 
+import type {
+  FieldErrorProps,
+  GroupProps,
+  InputProps,
+  LabelProps,
+  TextFieldProps as TextFieldPrimitiveProps,
+  TextProps,
+  ValidationResult
+} from 'react-aria-components'
 import {
   FieldError as FieldErrorPrimitive,
-  type FieldErrorProps,
   Group,
-  type GroupProps,
   Input as InputPrimitive,
-  type InputProps,
   Label as LabelPrimitive,
-  type LabelProps,
-  Text,
-  type TextFieldProps as TextFieldPrimitiveProps,
-  type TextProps,
-  type ValidationResult
+  Text
 } from 'react-aria-components'
 import { tv } from 'tailwind-variants'
 

diff --git a/resources/content/docs/components/controls/command-menu.mdx b/resources/content/docs/components/controls/command-menu.mdx
@@ -24,6 +24,11 @@ This command menu is straightforward and always under your control, allowing you
 ## Anatomy
 <Anatomy show='command-menu-anatomy'/>
 
+
+## Blurred
+The `isBlurred` prop can be used to blur the background of the `CommandMenu` component. To do that, simply add the prop to the `CommandMenu` component:
+<How toUse="controls/command-menu/command-menu-blur-demo" />
+
 ## Separator
 Add a separator between items for clear distinction.
 <How toUse="controls/command-menu/command-menu-separator-demo" />
@@ -140,3 +145,7 @@ export function CommandPalette({ open, setOpen }: Props) {
   }, [pathname, setOpen])
   return (...)
 ```
+
+## Blur
+If you want to blur the background, you can use `isBlurred` prop.
+<How toUse="controls/command-menu/command-menu-blur-demo" />