@hanzo/ui 4.1.0 → 4.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -44,7 +44,7 @@
     "./util-client": "./util/index-client.ts"
   },
   "dependencies": {
-    "@hanzo/react-drawer": "0.1.7",
+    "@hanzo/react-drawer": "^0.1.8",
     "@next/third-parties": "^15.0.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -92,13 +92,13 @@
   "peerDependencies": {
     "@hookform/resolvers": "^3.3.2",
     "embla-carousel": "^8.1.6",
-    "lucide-react": "^0.344.0",
+    "lucide-react": "catalog:",
     "mobx": "^6.12.3",
-    "next": "^14.2.16",
+    "next": "catalog:",
     "next-themes": "^0.2.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.4",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-hook-form": "catalog:",
     "validator": "^13.11.0",
     "zod": "3.23.8"
   },
@@ -109,10 +109,10 @@
     "@types/gtag.js": "^0.0.19",
     "@types/lodash.merge": "^4.6.9",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^17.0.45",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
-    "tailwindcss": "^3.4.3",
-    "typescript": "5.6.3"
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
   }
 }

package/primitives/combobox.tsx

@@ -19,64 +19,68 @@ import {
   PopoverTrigger,
 } from './popover'
 
-interface SelectElement {
-  value: string,
-  label?: string,
-  imageUrl?: string
-}
-
-const IMAGE_SIZE = 32
+import type ListAdaptor from './list-adaptor'
 
 const ElementImage: React.FC<{
   url: string | undefined
   alt?: string
   w: number
   h: number
+  className?: string
 }> = ({
   url,
   alt,
   w,
-  h
-}) => (url &&
-  <img
-    src={url}
-    alt={alt ?? 'image'}
-    height={h}
-    width={w}
-    loading="eager"
-    className="rounded-sm object-contain"
-  />
+  h,
+  className=''
+}) => (url ? (
+    <img
+      src={url}
+      alt={alt ?? 'image'}
+      height={h}
+      width={w}
+      loading="eager"
+      className={className}
+    />
+  ) : null
 )
+// "rounded-sm object-contain"
 
-
-const Combobox: React.FC<{
-  elements: SelectElement[]
-  buttonClx?: string 
-  popoverClx?: string
-  buttonPlaceholder?: string
-  searchPlaceholder?: string
-  initial?: SelectElement,
-  elementSelected: (e: SelectElement) => void
-  disabled?: boolean
-}> = ({
-  elements,
-  buttonClx='',
-  popoverClx='',
-  initial,
-  searchPlaceholder='Search...',
-  buttonPlaceholder='Select...',
-  elementSelected,
-  disabled=false
+const Combobox = <T,>(
+  {
+    elements,
+    adaptor,
+    buttonClx='',
+    popoverClx='',
+    imageClx='',
+    initial,
+    searchPlaceholder='Search...',
+    buttonPlaceholder='Select...',
+    noneFoundMessage='None found.',
+    elementSelected,
+    disabled=false,
+    imageSize=32
+  }: {
+    elements: T[]
+    adaptor: ListAdaptor<T>
+    elementSelected: (e: T) => void
+    buttonClx?: string 
+    popoverClx?: string
+    imageClx?: string
+    buttonPlaceholder?: string
+    searchPlaceholder?: string
+    noneFoundMessage?: string
+    initial?: T,
+    disabled?: boolean
+    imageSize?: number
 }) => {
 
   const [open, setOpen] = useState<boolean>(false)
-  const [current, setCurrent] = useState<SelectElement | null>(initial ?? null)
+  const [current, setCurrent] = useState<T | null>(initial ?? null)
 
-  const handleSelect = (selectedValue: string) => {
-
-      // some issue w case... I know, right??
-    const found = elements.find((el: SelectElement) => (el.value.toUpperCase() === selectedValue.toUpperCase()) )
+  const handleSelect = (selString: string) => {
 
+    const found = elements.find((el: T) => (adaptor.valueEquals(el, selString)))
     if (found) {
       setCurrent(found)
       elementSelected(found)
@@ -84,9 +88,17 @@ const Combobox: React.FC<{
     setOpen(false)
   }
 
-  const isCurrent = (el: SelectElement): boolean => (
-    !!current && (el.value.toUpperCase() === current.value.toUpperCase())
-  )  
+  const isCurrent = (el: T): boolean => (!!current && (adaptor.equals(el, current)))  
+
+  let currentValue: string | undefined
+  let currentLabel: string | undefined
+  let currentImageUrl: string | undefined
+
+  if (current) {
+    currentValue = adaptor.getValue(current)
+    currentLabel = adaptor.getLabel ? adaptor.getLabel(current) : undefined
+    currentImageUrl = adaptor.getImageUrl ? adaptor.getImageUrl(current) : undefined
+  }
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -100,9 +112,9 @@ const Combobox: React.FC<{
         >
           <div className='flex justify-start items-center gap-2'>
             {current && (
-              <ElementImage url={current.imageUrl} w={IMAGE_SIZE} h={IMAGE_SIZE} alt={current.value + ' image'}/>
+              <ElementImage url={currentImageUrl} w={imageSize} h={imageSize} className={imageClx} alt={currentValue + ' image'}/>
             )}
-            <span>{ current ? (current.label ?? current.value) : buttonPlaceholder }</span>
+            <span>{ current ? (currentLabel ?? currentValue) : buttonPlaceholder }</span>
           </div>
           <ChevronDown className={open ? '' : 'opacity-50'} />
         </Button>
@@ -111,21 +123,27 @@ const Combobox: React.FC<{
         <Command>
           <CommandInput placeholder={searchPlaceholder} />
           <CommandList>
-            <CommandEmpty>No element found.</CommandEmpty>
+            <CommandEmpty>{noneFoundMessage}</CommandEmpty>
             <CommandGroup>
-            {elements.map((element) => (
+            {elements.map((el) => (
               <CommandItem
-                key={element.value}
-                value={element.value}
+                key={adaptor.getValue(el)}
+                value={adaptor.getValue(el)}
                 onSelect={handleSelect}
                 className='flex justify-between'
               >
                 <div className='flex justify-start items-center gap-2'>
-                  <ElementImage url={element.imageUrl} w={IMAGE_SIZE} h={IMAGE_SIZE} alt={element.value + ' image'}/>
-                  <span>{ element.label ?? element.value }</span>
+                  <ElementImage 
+                    url={adaptor.getImageUrl ? adaptor.getImageUrl(el) : undefined} 
+                    w={imageSize} 
+                    h={imageSize}  
+                    className={imageClx} 
+                    alt={adaptor.getValue(el) + ' image'}
+                  />
+                  <span>{ adaptor.getLabel ? adaptor.getLabel(el) : adaptor.getValue(el) }</span>
                 </div>
                 <div>
-                  <Check className={cn('ml-auto', (isCurrent(element)) ? '' : 'invisible' )} />
+                  <Check className={cn('ml-auto', (isCurrent(el)) ? '' : 'invisible' )} />
                 </div>
               </CommandItem>
             ))}
@@ -137,7 +155,4 @@ const Combobox: React.FC<{
   )
 }
 
-export {
-  type SelectElement,
-  Combobox as default
-} 
+export default Combobox

package/primitives/index-common.ts

@@ -198,10 +198,11 @@ export { default as Badge } from './badge'
 export { default as BreakpointIndicator } from './breakpoint-indicator'
 export { default as Calendar } from './calendar' 
 export { default as Checkbox } from './checkbox' 
-export { default as Combobox, type SelectElement } from './combobox' 
+export { default as Combobox } from './combobox' 
 export { default as DialogVideoController } from './dialog-video-controller'
 export { default as Input } from './input'
 export { default as Label } from './label'
+export type { default as ListAdaptor } from './list-adaptor'
 export { default as ListBox } from './list-box'
 export { default as Progress } from './progress' 
 export { RadioGroup, RadioGroupItem } from './radio-group'

package/primitives/list-adaptor.ts

@@ -0,0 +1,11 @@
+interface ListAdaptor<T> {
+  getValue:   (el: T) => string
+  equals:     (el1: T, el2: T) => boolean
+  valueEquals: (el: T, v: string) => boolean
+  getLabel?:  (el: T) => string 
+  getImageUrl?:  (el: T) => string
+}
+
+export {
+  type ListAdaptor as default
+}