@ossy/design-system 3.3.0 → 3.5.0

package/src/image/Image.jsx

@@ -1,7 +1,11 @@
 import React, { useState, useRef, useEffect } from 'react'
+import { blurhashToDataUrl } from './blurhash-to-data-url.js'
 
 export const Image = ({
   placeholderSrc,
+  blurhash,
+  width,
+  height,
   src,
   alt,
   style,
@@ -10,6 +14,7 @@ export const Image = ({
 }) => {
   const imageRef = useRef(null)
   const [loaded, setLoaded] = useState(false)
+  const [blurhashSrc, setBlurhashSrc] = useState(null)
 
   useEffect(() => {
     // check if image is already loaded, the onLoad event will not be triggered
@@ -18,8 +23,35 @@ export const Image = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (!blurhash) {
+      setBlurhashSrc(null)
+      return
+    }
+    // Decode at a small size that matches natural aspect ratio (not a forced square).
+    const maxSide = 32
+    let decodeW = maxSide
+    let decodeH = maxSide
+    if (width > 0 && height > 0) {
+      if (width >= height) {
+        decodeW = maxSide
+        decodeH = Math.max(1, Math.round((maxSide * height) / width))
+      } else {
+        decodeH = maxSide
+        decodeW = Math.max(1, Math.round((maxSide * width) / height))
+      }
+    }
+    setBlurhashSrc(blurhashToDataUrl(blurhash, decodeW, decodeH))
+  }, [blurhash, width, height])
+
+  const resolvedPlaceholder = blurhashSrc || placeholderSrc
+  const mergedStyle = {
+    ...(width && height ? { aspectRatio: `${width} / ${height}` } : null),
+    ...style,
+  }
+
   return (
-    <div style={style} data-image data-object-fit={objectFit}>
+    <div style={mergedStyle} data-image data-object-fit={objectFit}>
 
       <style href="@ossy/design-system/image" precedence="high" >
       {`
@@ -77,8 +109,8 @@ export const Image = ({
       `}
       </style>
 
-      { !placeholderSrc ? null :
-          <img data-loaded={loaded} className="placeholder" src={placeholderSrc} alt={alt}  />
+      { !resolvedPlaceholder ? null :
+          <img data-loaded={loaded} className="placeholder" src={resolvedPlaceholder} alt={alt}  />
       }
 
       <img
@@ -87,6 +119,8 @@ export const Image = ({
         ref={imageRef}
         src={src}
         alt={alt}
+        width={width}
+        height={height}
         {...props}
         onLoad={(e) => { setLoaded(true) }}
       />

package/src/image/Image.stories.jsx

@@ -15,3 +15,12 @@ export const Default = {
     placeholderSrc: 'https://picsum.photos/20/30',
   },
 }
+
+export const WithBlurhash = {
+  args: {
+    src: 'https://picsum.photos/200/300',
+    blurhash: 'LEHV6nWB2yk8pyo0adR*.7kCMdnj',
+    width: 200,
+    height: 300,
+  },
+}

package/src/image/blurhash-to-data-url.js

@@ -0,0 +1,28 @@
+import { decode } from 'blurhash'
+
+/**
+ * Decode a BlurHash string to a PNG data URL (browser canvas).
+ * Returns null when canvas is unavailable (SSR) or decoding fails.
+ *
+ * @param {string} hash
+ * @param {number} [width=32]
+ * @param {number} [height=32]
+ * @returns {string | null}
+ */
+export function blurhashToDataUrl (hash, width = 32, height = 32) {
+  if (!hash || typeof document === 'undefined') return null
+  try {
+    const pixels = decode(hash, width, height)
+    const canvas = document.createElement('canvas')
+    canvas.width = width
+    canvas.height = height
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return null
+    const imageData = ctx.createImageData(width, height)
+    imageData.data.set(pixels)
+    ctx.putImageData(imageData, 0, 0)
+    return canvas.toDataURL()
+  } catch {
+    return null
+  }
+}

package/src/image/blurhash-to-data-url.spec.js

@@ -0,0 +1,12 @@
+import { blurhashToDataUrl } from './blurhash-to-data-url.js'
+
+describe('blurhashToDataUrl', () => {
+  it('returns null without a document/canvas (node)', () => {
+    expect(blurhashToDataUrl('LEHV6nWB2yk8pyo0adR*.7kCMdnj')).toBeNull()
+  })
+
+  it('returns null for empty hash', () => {
+    expect(blurhashToDataUrl('')).toBeNull()
+    expect(blurhashToDataUrl(null)).toBeNull()
+  })
+})

package/src/image-card/ImageCard.jsx

@@ -6,6 +6,9 @@ export const ImageCard = ({
   subTitle,
   src,
   placeholderSrc,
+  blurhash,
+  width,
+  height,
   href,
   target,
   as: Container = 'div',
@@ -84,6 +87,9 @@ export const ImageCard = ({
               src={src}
               alt={title}
               placeholderSrc={placeholderSrc}
+              blurhash={blurhash}
+              width={width}
+              height={height}
             />
           </div>
           {(!!title || !!subTitle) && (

package/src/inputs/FileField.jsx

@@ -2,9 +2,10 @@ import React, { useCallback, useState } from 'react'
 import { View } from '../view'
 import { Text } from '../text'
 import { Button } from '../button'
+import { DropZone } from '../drop-zone'
 import { UploadInput } from './Input.jsx'
 import { LocalFilePreview } from './LocalFilePreview.jsx'
-import { acceptsFile } from './acceptsFile.js'
+import { acceptsFile, partitionAcceptedFiles } from './acceptsFile.js'
 
 function commitResourceValue(name, value, onChange) {
   onChange({
@@ -32,7 +33,7 @@ function resourceIdsFromValue(value) {
 }
 
 /**
- * Default built-in file field: picker + local FileReader preview before a
+ * Default built-in file field: picker + drag-and-drop + local FileReader preview before a
  * `resourceId` is set. Production apps should register `@ossy/design-system/input/file` /
  * `@ossy/design-system/input/image` platform components for eager upload (see `@ossy/resources`).
  */
@@ -74,20 +75,42 @@ export function FileField({
       const picked = Array.from(e.target.files || [])
       e.target.value = ''
       if (!picked.length) return
-      const valid = picked.filter(f => acceptsFile(f, accept))
-      if (valid.length !== picked.length) {
+      const { accepted, rejected } = partitionAcceptedFiles(picked, accept)
+      if (rejected.length) {
         setAcceptError('Some files were rejected by accept filter')
       } else {
         setAcceptError(null)
       }
       setLocalFiles(prev => {
-        const next = [...prev, ...valid].slice(0, max)
+        const next = [...prev, ...accepted].slice(0, max)
         return next
       })
     },
     [accept, max],
   )
 
+  const onFilesDrop = useCallback(
+    files => {
+      if (disabled) return
+      const { accepted, rejected } = partitionAcceptedFiles(files, accept)
+      if (!accepted.length) {
+        if (rejected.length) setAcceptError(rejected[0]?.name || 'rejected')
+        return
+      }
+      if (rejected.length) {
+        setAcceptError('Some files were rejected by accept filter')
+      } else {
+        setAcceptError(null)
+      }
+      if (multi) {
+        setLocalFiles(prev => [...prev, ...accepted].slice(0, max))
+        return
+      }
+      setLocalFile(accepted[0])
+    },
+    [accept, disabled, max, multi],
+  )
+
   const removeMultiLocal = useCallback(index => {
     setLocalFiles(prev => prev.filter((_, i) => i !== index))
   }, [])
@@ -109,89 +132,93 @@ export function FileField({
     const canAdd = refs.length + localFiles.length < max
 
     return (
-      <View gap="s" style={style} {...rest}>
-        {refs.map(ref => (
-          <View key={ref.resourceId} layout="row" gap="s" alignItems="center">
-            <Text style={{ flex: 1, fontSize: 14 }}>{ref.resourceId}</Text>
-            <Button
-              type="button"
-              variant="command-danger"
-              prefix="close"
-              size="s"
-              disabled={disabled}
-              onClick={() => removeMultiResource(ref.resourceId)}
-              aria-label={`Remove ${label || name}`}
-            />
-          </View>
-        ))}
-        {localFiles.map((file, index) => (
-          <View key={`${file.name}-${index}`} layout="row" gap="s" alignItems="center">
-            <LocalFilePreview file={file} />
-            <Text style={{ flex: 1, fontSize: 14 }}>{file.name}</Text>
-            <Button
-              type="button"
-              variant="command-danger"
-              prefix="close"
-              size="s"
+      <DropZone onFilesDrop={canAdd ? onFilesDrop : undefined}>
+        <View gap="s" style={style} data-ossy-file-dropzone {...rest}>
+          {refs.map(ref => (
+            <View key={ref.resourceId} layout="row" gap="s" alignItems="center">
+              <Text style={{ flex: 1, fontSize: 14 }}>{ref.resourceId}</Text>
+              <Button
+                type="button"
+                variant="command-danger"
+                prefix="close"
+                size="s"
+                disabled={disabled}
+                onClick={() => removeMultiResource(ref.resourceId)}
+                aria-label={`Remove ${label || name}`}
+              />
+            </View>
+          ))}
+          {localFiles.map((file, index) => (
+            <View key={`${file.name}-${index}`} layout="row" gap="s" alignItems="center">
+              <LocalFilePreview file={file} />
+              <Text style={{ flex: 1, fontSize: 14 }}>{file.name}</Text>
+              <Button
+                type="button"
+                variant="command-danger"
+                prefix="close"
+                size="s"
+                disabled={disabled}
+                onClick={() => removeMultiLocal(index)}
+              />
+            </View>
+          ))}
+          {canAdd && (
+            <UploadInput
+              id={name}
+              name={name}
+              accept={accept}
               disabled={disabled}
-              onClick={() => removeMultiLocal(index)}
+              required={required && refs.length === 0 && localFiles.length === 0}
+              multiple
+              onChange={onMultiPick}
             />
-          </View>
-        ))}
-        {canAdd && (
-          <UploadInput
-            id={name}
-            name={name}
-            accept={accept}
-            disabled={disabled}
-            required={required && refs.length === 0 && localFiles.length === 0}
-            multiple
-            onChange={onMultiPick}
-          />
-        )}
-        {acceptError && (
-          <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>{acceptError}</Text>
-        )}
-        <Text style={{ fontSize: 12, opacity: 0.65 }}>
-          Stub field — register <code>@ossy/design-system/input/file</code> for upload.
-        </Text>
-      </View>
+          )}
+          {acceptError && (
+            <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>{acceptError}</Text>
+          )}
+          <Text style={{ fontSize: 12, opacity: 0.65 }}>
+            Stub field — register <code>@ossy/design-system/input/file</code> for upload.
+          </Text>
+        </View>
+      </DropZone>
     )
   }
 
   const resourceId = resourceIdFromValue(value)
 
   return (
-    <View gap="s" style={style} {...rest}>
-      {(localFile || resourceId) && (
-        <View layout="row" gap="s" alignItems="center">
-          {localFile && <LocalFilePreview file={localFile} size="48px" />}
-          {resourceId && !localFile && (
-            <Text style={{ fontSize: 14 }}>{resourceId}</Text>
-          )}
-          {localFile && (
-            <Text style={{ flex: 1, fontSize: 14 }}>{localFile.name}</Text>
-          )}
-        </View>
-      )}
-      <UploadInput
-        id={name}
-        name={name}
-        accept={accept}
-        disabled={disabled}
-        required={required && !resourceId && !localFile}
-        onChange={onSinglePick}
-      />
-      {acceptError && (
-        <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>
-          File not accepted: {acceptError}
-        </Text>
-      )}
-      {!resourceId && (
-        <Text style={{ fontSize: 12, opacity: 0.65 }}>
-          Stub field — register <code>@ossy/design-system/input/file</code> for upload.
-        </Text>
-      )}
-    </View>
+    <DropZone onFilesDrop={onFilesDrop}>
+      <View gap="s" style={style} data-ossy-file-dropzone {...rest}>
+        {(localFile || resourceId) && (
+          <View layout="row" gap="s" alignItems="center">
+            {localFile && <LocalFilePreview file={localFile} size="48px" />}
+            {resourceId && !localFile && (
+              <Text style={{ fontSize: 14 }}>{resourceId}</Text>
+            )}
+            {localFile && (
+              <Text style={{ flex: 1, fontSize: 14 }}>{localFile.name}</Text>
+            )}
+          </View>
+        )}
+        <UploadInput
+          id={name}
+          name={name}
+          accept={accept}
+          disabled={disabled}
+          required={required && !resourceId && !localFile}
+          onChange={onSinglePick}
+        />
+        {acceptError && (
+          <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>
+            File not accepted: {acceptError}
+          </Text>
+        )}
+        {!resourceId && (
+          <Text style={{ fontSize: 12, opacity: 0.65 }}>
+            Stub field — register <code>@ossy/design-system/input/file</code> for upload.
+          </Text>
+        )}
+      </View>
+    </DropZone>
   )
 }

package/src/inputs/ReferenceField.jsx

@@ -0,0 +1,199 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { View } from '../view'
+import { Text } from '../text'
+import { Input } from './Input.jsx'
+import { Button } from '../button'
+
+function commitResourceValue(name, value, onChange) {
+  onChange({
+    target: {
+      id: name,
+      name,
+      dataset: { ossyFileResourceReplace: 'true' },
+      value: JSON.stringify(value),
+    },
+  })
+}
+
+function resourceIdFromValue(value) {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return typeof value.resourceId === 'string' ? value.resourceId : null
+  }
+  return null
+}
+
+function resourceIdsFromValue(value) {
+  if (!Array.isArray(value)) return []
+  return value
+    .map(item => (item && typeof item.resourceId === 'string' ? item.resourceId : null))
+    .filter(Boolean)
+}
+
+/**
+ * Default document-link field: enter a target resource id.
+ * Production apps register `@ossy/design-system/input/reference` for a
+ * SearchResources-backed picker (see `@ossy/resources` `PlatformReferenceField`).
+ * When `max > 1`, stores `{ resourceId }[]`.
+ */
+export function ReferenceField({
+  name,
+  label,
+  value,
+  onChange,
+  of: targetSchemaId,
+  max = 1,
+  disabled,
+  required,
+  style = {},
+  ...rest
+}) {
+  const multi = max > 1
+  const resourceId = multi ? null : resourceIdFromValue(value)
+  const resourceIds = multi ? resourceIdsFromValue(value) : []
+  const [draft, setDraft] = useState(multi ? '' : (resourceId ?? ''))
+
+  useEffect(() => {
+    if (!multi) setDraft(resourceId ?? '')
+  }, [multi, resourceId])
+
+  const applySingle = useCallback(() => {
+    const next = draft.trim()
+    if (!next) {
+      commitResourceValue(name, null, onChange)
+      return
+    }
+    commitResourceValue(name, { resourceId: next }, onChange)
+  }, [draft, name, onChange])
+
+  const clearSingle = useCallback(() => {
+    setDraft('')
+    commitResourceValue(name, null, onChange)
+  }, [name, onChange])
+
+  const addMulti = useCallback(() => {
+    const next = draft.trim()
+    if (!next || resourceIds.includes(next) || resourceIds.length >= max) return
+    commitResourceValue(
+      name,
+      [...resourceIds, next].map(id => ({ resourceId: id })),
+      onChange,
+    )
+    setDraft('')
+  }, [draft, max, name, onChange, resourceIds])
+
+  const removeMulti = useCallback(
+    id => {
+      commitResourceValue(
+        name,
+        resourceIds.filter(rid => rid !== id).map(rid => ({ resourceId: rid })),
+        onChange,
+      )
+    },
+    [name, onChange, resourceIds],
+  )
+
+  if (multi) {
+    const canAdd = resourceIds.length < max
+    return (
+      <View gap="s" style={style} data-ossy-reference-multi="">
+        {targetSchemaId ? (
+          <Text variant="small" color="neutral-600">
+            Links to {targetSchemaId} (up to {max})
+          </Text>
+        ) : (
+          <Text variant="small" color="neutral-600">
+            Up to {max} document links
+          </Text>
+        )}
+        {resourceIds.map(id => (
+          <View
+            key={id}
+            layout="row"
+            gap="s"
+            style={{ alignItems: 'center' }}
+            data-ossy-reference-selected={id}
+          >
+            <Text variant="small">{id}</Text>
+            <Button
+              type="button"
+              variant="command"
+              prefix="remove"
+              aria-label="Remove"
+              disabled={disabled}
+              onClick={() => removeMulti(id)}
+              data-ossy-reference-remove={id}
+            />
+          </View>
+        ))}
+        {canAdd ? (
+          <View direction="row" gap="s" style={{ alignItems: 'center', flexWrap: 'wrap' }}>
+            <Input
+              {...rest}
+              id={name}
+              name={name}
+              type="text"
+              value={draft}
+              disabled={disabled}
+              required={required && resourceIds.length === 0}
+              placeholder="resourceId"
+              aria-label={label ? `${label} resource id` : `${name} resource id`}
+              onChange={e => setDraft(e.target.value)}
+              onBlur={addMulti}
+              onKeyDown={e => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  addMulti()
+                }
+              }}
+              style={{ minWidth: '50%' }}
+            />
+            <Button
+              type="button"
+              variant="command"
+              disabled={disabled || !draft.trim()}
+              onClick={addMulti}
+            >
+              Add
+            </Button>
+          </View>
+        ) : null}
+      </View>
+    )
+  }
+
+  return (
+    <View gap="s" style={style}>
+      {targetSchemaId ? (
+        <Text variant="small" color="neutral-600">
+          Links to {targetSchemaId}
+        </Text>
+      ) : null}
+      <View direction="row" gap="s" style={{ alignItems: 'center', flexWrap: 'wrap' }}>
+        <Input
+          {...rest}
+          id={name}
+          name={name}
+          type="text"
+          value={draft}
+          disabled={disabled}
+          required={required && !resourceId}
+          placeholder="resourceId"
+          onChange={e => setDraft(e.target.value)}
+          onBlur={applySingle}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              applySingle()
+            }
+          }}
+          style={{ minWidth: '50%' }}
+        />
+        {resourceId ? (
+          <Button type="button" variant="neutral" disabled={disabled} onClick={clearSingle}>
+            Clear
+          </Button>
+        ) : null}
+      </View>
+    </View>
+  )
+}

package/src/inputs/acceptsFile.js

@@ -22,3 +22,22 @@ export function acceptsFile(file, accept) {
     return type.toLowerCase() === rule
   })
 }
+
+/**
+ * Split dropped/picked files into those matching `accept` and those that do not.
+ * Used by file/image fields and upload drop zones.
+ *
+ * @param {Iterable<File> | FileList | null | undefined} files
+ * @param {string | undefined} accept
+ * @returns {{ accepted: File[], rejected: File[] }}
+ */
+export function partitionAcceptedFiles(files, accept) {
+  const list = Array.from(files || [])
+  const accepted = []
+  const rejected = []
+  for (const file of list) {
+    if (acceptsFile(file, accept)) accepted.push(file)
+    else rejected.push(file)
+  }
+  return { accepted, rejected }
+}

package/src/inputs/acceptsFile.spec.js

@@ -0,0 +1,44 @@
+import { describe, expect, it } from '@jest/globals'
+import { acceptsFile, partitionAcceptedFiles } from './acceptsFile.js'
+
+function fakeFile({ name = 'x.bin', type = 'application/octet-stream' } = {}) {
+  return { name, type }
+}
+
+describe('acceptsFile', () => {
+  it('allows any file when accept is empty', () => {
+    expect(acceptsFile(fakeFile(), undefined)).toBe(true)
+    expect(acceptsFile(fakeFile(), '')).toBe(true)
+  })
+
+  it('matches MIME wildcards used by image fields', () => {
+    expect(acceptsFile(fakeFile({ name: 'a.png', type: 'image/png' }), 'image/*')).toBe(true)
+    expect(acceptsFile(fakeFile({ name: 'a.txt', type: 'text/plain' }), 'image/*')).toBe(false)
+  })
+
+  it('matches extensions and exact MIME types', () => {
+    expect(acceptsFile(fakeFile({ name: 'doc.PDF', type: '' }), '.pdf')).toBe(true)
+    expect(acceptsFile(fakeFile({ name: 'a.png', type: 'image/png' }), 'image/png,image/jpeg')).toBe(true)
+  })
+})
+
+describe('partitionAcceptedFiles', () => {
+  it('returns empty lists for missing input', () => {
+    expect(partitionAcceptedFiles(null, 'image/*')).toEqual({ accepted: [], rejected: [] })
+  })
+
+  it('partitions by accept filter', () => {
+    const png = fakeFile({ name: 'a.png', type: 'image/png' })
+    const txt = fakeFile({ name: 'a.txt', type: 'text/plain' })
+    expect(partitionAcceptedFiles([png, txt], 'image/*')).toEqual({
+      accepted: [png],
+      rejected: [txt],
+    })
+  })
+
+  it('accepts all when accept is omitted', () => {
+    const a = fakeFile({ name: 'a' })
+    const b = fakeFile({ name: 'b' })
+    expect(partitionAcceptedFiles([a, b])).toEqual({ accepted: [a, b], rejected: [] })
+  })
+})

package/src/inputs/index.js

@@ -1,4 +1,5 @@
 export * from './Input.jsx'
 export { LocalFilePreview } from './LocalFilePreview.jsx'
 export { FileField } from './FileField.jsx'
-export { acceptsFile } from './acceptsFile.js'
+export { ReferenceField } from './ReferenceField.jsx'
+export { acceptsFile, partitionAcceptedFiles } from './acceptsFile.js'

package/src/theme/Theme.jsx

@@ -91,6 +91,12 @@ export const Theme = ({
           --background: var(--background-active);
           --foreground: var(--foreground-active);
         }
+
+        [data-selectable][data-selected] {
+          --background: var(--background-active);
+          --foreground: var(--foreground-active, var(--foreground));
+          box-shadow: inset 3px 0 0 var(--foreground-active, var(--separator));
+        }
       `}
       </style>
       <style href={styleHref}>