@nan0web/ui-payload 3.3.1 → 3.4.1

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@nan0web/ui-payload",
-  "version": "3.3.1",
+  "version": "3.4.1",
   "description": "NaN0Web Universal Payload CMS UI Components Package (ImageCell, MapCell, BooleanCell, richtext)",
   "type": "module",
   "main": "./src/index.js",
   "types": "./types/index.d.ts",
   "files": [
     "src/**/*.js",
+    "src/**/*.jsx",
     "src/**/*.ts",
     "src/**/*.tsx",
     "!src/**/*.spec.js",
+    "!src/**/*.spec.jsx",
     "!src/**/*.spec.tsx",
     "types/**/*.d.ts"
   ],
@@ -22,6 +24,10 @@
       "types": "./types/index.d.ts",
       "import": "./src/index.js"
     },
+    "./access": {
+      "types": "./types/access.d.ts",
+      "import": "./src/access.js"
+    },
     "./components/*": {
       "types": "./types/components/*.d.ts",
       "import": "./src/components/*.js"

package/src/components/BooleanCell.jsx

@@ -0,0 +1,64 @@
+'use client'
+
+import React from 'react'
+import { useTranslation } from '@payloadcms/ui'
+
+/**
+ * @typedef {Object} BooleanCellProps
+ * @property {boolean} [cellData]
+ * @property {boolean} [value]
+ * @property {any} [field]
+ */
+
+/**
+ * Custom BooleanCell renderer for Payload CMS admin tables.
+ * @param {BooleanCellProps} props
+ * @returns {React.JSX.Element}
+ */
+export function BooleanCell({ cellData, value, field }) {
+  const { i18n } = useTranslation()
+  const lang = i18n?.language?.toLowerCase().startsWith('en') ? 'en' : 'uk'
+  const val = Boolean(cellData ?? value)
+
+  const isHiddenField = field?.name?.toLowerCase() === 'hidden'
+  const customLabels = field?.admin?.custom?.labels
+
+  const defaultLabels = isHiddenField
+    ? { true: { uk: '🙈 Приховано', en: '🙈 Hidden' }, false: { uk: '🌐 Активно', en: '🌐 Active' } }
+    : { true: { uk: '✅ Так', en: '✅ Yes' }, false: { uk: '❌ Ні', en: '❌ No' } }
+
+  const labels = customLabels || defaultLabels
+  const text = labels[val ? 'true' : 'false']?.[lang] || (val ? 'Yes' : 'No')
+
+  const isWarning = isHiddenField ? val : !val
+  const variant = isWarning ? 'warning' : 'success'
+
+  return (
+    <span
+      className={`badge bg-${variant}-subtle text-${variant}-emphasis border border-${variant}-subtle`}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+        padding: '3px 8px',
+        borderRadius: '12px',
+        fontSize: '11px',
+        fontWeight: 600,
+        backgroundColor: isWarning
+          ? 'var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.15))'
+          : 'var(--bs-success-bg-subtle, rgba(25, 135, 84, 0.15))',
+        color: isWarning
+          ? 'var(--bs-warning-text-emphasis, #664d03)'
+          : 'var(--bs-success-text-emphasis, #0a3622)',
+        borderColor: isWarning
+          ? 'var(--bs-warning-border-subtle, rgba(255, 193, 7, 0.3))'
+          : 'var(--bs-success-border-subtle, rgba(25, 135, 84, 0.3))',
+      }}
+      suppressHydrationWarning
+    >
+      {text}
+    </span>
+  )
+}
+
+export default BooleanCell

package/src/components/ImageCell.jsx

@@ -0,0 +1,73 @@
+'use client'
+
+import React, { useState } from 'react'
+
+/**
+ * @typedef {Object} ImageCellProps
+ * @property {string | { url?: string; thumbnailURL?: string }} [cellData]
+ * @property {string | { url?: string; thumbnailURL?: string }} [value]
+ */
+
+/**
+ * Image preview cell for Payload CMS admin tables.
+ * @param {ImageCellProps} props
+ * @returns {React.JSX.Element | null}
+ */
+export function ImageCell(props) {
+  const [hasError, setHasError] = useState(false)
+  const rawValue = props.cellData || props.value
+
+  if (!rawValue || hasError) {
+    return (
+      <div
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '192px',
+          height: '108px',
+          borderRadius: '6px',
+          background: 'rgba(255, 255, 255, 0.05)',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          fontSize: '12px',
+          color: '#888',
+        }}
+        suppressHydrationWarning
+      >
+        <span>🖼️ Без фото</span>
+      </div>
+    )
+  }
+
+  const srcValue = typeof rawValue === 'object' ? rawValue.url || rawValue.thumbnailURL : rawValue
+  if (!srcValue || typeof srcValue !== 'string') {
+    return null
+  }
+
+  const src = srcValue.startsWith('http') || srcValue.startsWith('/') ? srcValue : `/${srcValue}`
+
+  return (
+    <div style={{ display: 'inline-flex', alignItems: 'center' }} suppressHydrationWarning>
+      <img
+        src={src}
+        alt="Preview"
+        style={{
+          width: '192px',
+          minWidth: '192px',
+          height: '108px',
+          minHeight: '108px',
+          display: 'block',
+          objectFit: 'cover',
+          borderRadius: '6px',
+          border: '1px solid rgba(255, 255, 255, 0.25)',
+          background: '#111',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.4)',
+        }}
+        onError={() => setHasError(true)}
+        suppressHydrationWarning
+      />
+    </div>
+  )
+}
+
+export default ImageCell

package/src/components/MapCell.jsx

@@ -0,0 +1,73 @@
+'use client'
+
+import React from 'react'
+
+/**
+ * @typedef {Object} MapCellProps
+ * @property {any} [cellData]
+ * @property {any} [value]
+ * @property {any} [rowData]
+ */
+
+/**
+ * Map preview cell for Payload CMS admin tables with OpenStreetMap link.
+ * @param {MapCellProps} props
+ * @returns {React.JSX.Element}
+ */
+export function MapCell({ rowData }) {
+  const lat = rowData?.lat || rowData?.latitude || '50.4501'
+  const lon = rowData?.lng || rowData?.longitude || '30.5234'
+  const address = rowData?.address || rowData?.title || 'Відділення'
+
+  const zoom = 15
+  const latNum = parseFloat(String(lat)) || 50.4501
+  const lonNum = parseFloat(String(lon)) || 30.5234
+
+  const x = Math.floor(((lonNum + 180) / 360) * Math.pow(2, zoom))
+  const y = Math.floor(
+    ((1 - Math.log(Math.tan((latNum * Math.PI) / 180) + 1 / Math.cos((latNum * Math.PI) / 180)) / Math.PI) / 2) *
+      Math.pow(2, zoom)
+  )
+
+  const osmTileUrl = `https://tile.openstreetmap.org/${zoom}/${x}/${y}.png`
+  const osmMapUrl = `https://www.openstreetmap.org/?mlat=${latNum}&mlon=${lonNum}#map=16/${latNum}/${lonNum}`
+
+  return (
+    <a
+      href={osmMapUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '8px',
+        textDecoration: 'none',
+        color: 'inherit',
+      }}
+      suppressHydrationWarning
+    >
+      <img
+        src={osmTileUrl}
+        alt="OpenStreetMap"
+        style={{
+          width: '100px',
+          height: '56px',
+          objectFit: 'cover',
+          borderRadius: '4px',
+          border: '1px solid rgba(255, 255, 255, 0.2)',
+          background: '#222',
+        }}
+        onError={(e) => {
+          /** @type {HTMLElement} */ (e.target).style.display = 'none'
+        }}
+        suppressHydrationWarning
+      />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+        <span style={{ fontSize: '12px', fontWeight: 600 }}>📍 {address}</span>
+        <span style={{ fontSize: '10px', color: '#1471d1' }}>🗺️ OpenStreetMap ({latNum.toFixed(4)}, {lonNum.toFixed(4)})</span>
+      </div>
+    </a>
+  )
+}
+
+export default MapCell