blocks-dusted 0.1.0

package/templates/shared/fields/lucide-icon-picker/index.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import { TextFieldClientProps } from 'payload'
+import { useField } from '@payloadcms/ui'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { icons } from 'lucide-react'
+import { useState, useMemo, useRef } from 'react'
+import Fuse from 'fuse.js'
+import * as LucideIcons from 'lucide-react'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+export type IconName = keyof typeof icons
+
+const iconNames = Object.keys(icons) as IconName[]
+
+const IconPickerField: React.FC<TextFieldClientProps> = ({ field, path }) => {
+  const { value, setValue } = useField<string>({ path: path || field.name })
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+
+  const parentRef = useRef<HTMLDivElement>(null)
+
+  // Fuzzy search setup
+  const fuse = useMemo(() => {
+    return new Fuse(iconNames, {
+      threshold: 0.3,
+      keys: ['name']
+    })
+  }, [])
+
+  // Filter icons based on search
+  const filteredIcons = useMemo(() => {
+    if (!search) return iconNames
+    return fuse.search(search).map((result) => result.item)
+  }, [search, fuse])
+
+  // Virtualization
+  const rowVirtualizer = useVirtualizer({
+    count: Math.ceil(filteredIcons.length / 6),
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 50,
+    overscan: 5
+  })
+
+  const handleSelect = (iconName: string) => {
+    setValue(iconName)
+    setOpen(false)
+    setSearch('')
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setValue('')
+    setOpen(false)
+  }
+
+  const Icon = value && icons[value as IconName] ? LucideIcons[value as IconName] : null
+
+  return (
+    <div
+      className="w-full"
+      style={{
+        minWidth: 'calc(50% - 1rem)',
+        borderRadius: '0.2rem',
+        paddingBottom: '1rem'
+      }}
+    >
+      {field.admin?.description && typeof field.admin.description === 'string' && (
+        <div className="text-sm text-gray-500" style={{ paddingBottom: '1rem' }}>
+          {field.admin.description}
+        </div>
+      )}
+      <div className="flex items-center gap-2" style={{ padding: '0 1rem' }}>
+        <Button
+          type="button"
+          onClick={() => setOpen(!open)}
+          className="w-auto justify-between border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 cursor-pointer"
+          style={{ cursor: 'pointer' }}
+        >
+          {value ? (
+            <div
+              className="flex items-center gap-2"
+              style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
+            >
+              {Icon && <Icon className="h-4 w-4" />}
+              <span>{value}</span>
+            </div>
+          ) : (
+            <span>Select Icon</span>
+          )}
+        </Button>
+
+        {/* clear icon button */}
+        {value && (
+          <Button
+            type="button"
+            size="sm"
+            onClick={handleClear}
+            className="clear-icon-button cursor-pointer"
+            style={{
+              cursor: 'pointer',
+              padding: '0.5rem',
+              background: 'transparent',
+              border: '0',
+              scale: '0.8',
+              top: '-0.6rem'
+            }}
+            title="Clear icon"
+          >
+            <LucideIcons.X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      <div
+        className="relative flex flex-row items-center gap-2"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          justifyItems: 'center',
+          gap: '1rem',
+          backgroundColor: 'var(--theme-elevation-50)',
+          borderRadius: '0.5rem'
+          // border: '1px solid var(--border-color)'
+        }}
+      >
+        {open && (
+          <div className="icon-picker-dropdown">
+            <Input
+              placeholder="Search icons..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="mb-4"
+              style={{
+                margin: '1rem 0',
+                position: 'relative',
+                width: '100%',
+                maxWidth: '21rem',
+                padding: '0.5rem',
+                zIndex: 50
+              }}
+            />
+
+            <div
+              ref={parentRef}
+              className="dropdown-icon-container"
+              style={{ maxHeight: '300px', overflowY: 'auto' }}
+            >
+              <div
+                style={{
+                  height: `${rowVirtualizer.getTotalSize()}px`,
+                  width: '100%',
+                  position: 'relative'
+                }}
+              >
+                {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                  const startIdx = virtualRow.index * 6
+                  const rowIcons = filteredIcons.slice(startIdx, startIdx + 6)
+
+                  return (
+                    <div
+                      key={virtualRow.index}
+                      style={{
+                        position: 'relative',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: `${virtualRow.size}px`,
+                        transform: `translateY(${virtualRow.start}px)`,
+                        display: 'flex',
+                        gap: '8px',
+                        marginBottom: '-40px'
+                      }}
+                      className="container-fluid"
+                    >
+                      {rowIcons.map((iconName) => {
+                        const IconComponent = LucideIcons[iconName]
+                        return (
+                          <button
+                            key={iconName}
+                            type="button"
+                            onClick={() => handleSelect(iconName)}
+                            className="flex items-center justify-center p-2 rounded hover:bg-gray-100 transition-colors group"
+                            title={iconName}
+                          >
+                            <IconComponent className="h-3 w-3 transition-transform duration-200 group-hover:scale-125" />
+                          </button>
+                        )
+                      })}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default IconPickerField

package/templates/shared/utilities/canUseDOM.ts

@@ -0,0 +1 @@
+export default !!(typeof window !== 'undefined' && window.document && window.document.createElement)

package/templates/shared/utilities/getURL.ts

@@ -0,0 +1,31 @@
+import canUseDOM from './canUseDOM'
+
+export const getServerSideURL = () => {
+  let url = process.env.NEXT_PUBLIC_SERVER_URL
+
+  if (!url && process.env.VERCEL_PROJECT_PRODUCTION_URL) {
+    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+  }
+
+  if (!url) {
+    url = 'http://localhost:3000'
+  }
+
+  return url
+}
+
+export const getClientSideURL = () => {
+  if (canUseDOM) {
+    const protocol = window.location.protocol
+    const domain = window.location.hostname
+    const port = window.location.port
+
+    return `${protocol}//${domain}${port ? `:${port}` : ''}`
+  }
+
+  if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {
+    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+  }
+
+  return process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000'
+}