@ossy/resources 3.3.0 → 3.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/resources",
   "description": "Resource domain — aggregate and events for the Ossy resource model",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "private": false,
   "type": "module",
   "main": "./src/index.js",
@@ -23,10 +23,10 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/event-store": "^3.2.0",
-    "@ossy/fold": "^3.0.9",
-    "@ossy/platform": "^3.3.0",
-    "@ossy/schema": "^3.0.9"
+    "@ossy/event-store": "^3.4.0",
+    "@ossy/fold": "^3.4.0",
+    "@ossy/platform": "^3.5.0",
+    "@ossy/schema": "^3.5.0"
   },
   "peerDependencies": {
     "@ossy/design-system": ">=1.0.0",
@@ -49,5 +49,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "19e8bae4c1e9df79270218f28c0c9391f4f9871c"
+  "gitHead": "23167600f991596f122765a53f2b9df08314e115"
 }

package/src/ImageResource.jsx

@@ -14,9 +14,17 @@ export const ImageResource = ({
   return (
     <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-m) var(--space-s) var(--space-xl)' }}>
       <Image
-        src={resource?.content?.sizes?.galleryLarge || resource.content.src}
-        placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource.content.src}
-        style={{ width: 'auto', height: '400px', margin: 'var(--space-m) auto var(--space-l)' }}
+        src={resource?.content?.sizes?.galleryLarge || resource?.content?.src}
+        placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+        blurhash={resource?.content?.blurhash}
+        width={resource?.content?.width}
+        height={resource?.content?.height}
+        style={{
+          width: '100%',
+          maxWidth: '960px',
+          height: 'auto',
+          margin: 'var(--space-m) auto var(--space-l)',
+        }}
       />
     </div>
   )

package/src/PlatformFileField.jsx

@@ -6,7 +6,9 @@ import {
   Button,
   UploadInput,
   LocalFilePreview,
+  DropZone,
   acceptsFile,
+  partitionAcceptedFiles,
 } from '@ossy/design-system'
 import { uploadFile } from './resource.helpers.js'
 import { metadata as GetResource } from './get.action.js'
@@ -37,7 +39,7 @@ function resourceIdsFromValue(value) {
 }
 
 /**
- * Platform file field — eager upload on pick via SDK create + PUT.
+ * Platform file field — eager upload on pick or drop via SDK create + PUT.
  * Register as `@ossy/design-system/input/file` / `@ossy/design-system/input/image` through app component slots.
  */
 export function PlatformFileField({
@@ -63,6 +65,7 @@ export function PlatformFileField({
 
   const resourceId = multi ? null : resourceIdFromValue(value)
   const resourceIds = multi ? resourceIdsFromValue(value) : []
+  const busy = disabled || uploading
 
   useEffect(() => {
     if (!resourceId || localFile) {
@@ -105,6 +108,29 @@ export function PlatformFileField({
     [name, onChange, sdk, uploadLocation],
   )
 
+  const uploadMany = useCallback(
+    async files => {
+      const remaining = max - resourceIds.length
+      const batch = files.slice(0, remaining)
+      if (!batch.length) return
+      setUploading(true)
+      setError(null)
+      try {
+        const uploaded = []
+        for (const file of batch) {
+          const resource = await uploadFile(sdk, uploadLocation, file)
+          uploaded.push({ resourceId: resource.id })
+        }
+        commitResourceValue(name, [...resourceIds.map(id => ({ resourceId: id })), ...uploaded], onChange)
+      } catch (err) {
+        setError(err?.message || 'Upload failed')
+      } finally {
+        setUploading(false)
+      }
+    },
+    [max, name, onChange, resourceIds, sdk, uploadLocation],
+  )
+
   const onSinglePick = useCallback(
     e => {
       const file = e.target.files?.[0]
@@ -120,33 +146,38 @@ export function PlatformFileField({
   )
 
   const onMultiPick = useCallback(
-    async e => {
+    e => {
       const picked = Array.from(e.target.files || [])
       e.target.value = ''
       if (!picked.length || uploading) return
-      const valid = picked.filter(f => acceptsFile(f, accept))
-      if (valid.length !== picked.length) {
+      const { accepted, rejected } = partitionAcceptedFiles(picked, accept)
+      if (rejected.length) {
         setError('Some files were rejected by accept filter')
         return
       }
-      const remaining = max - resourceIds.length
-      const batch = valid.slice(0, remaining)
-      setUploading(true)
-      setError(null)
-      try {
-        const uploaded = []
-        for (const file of batch) {
-          const resource = await uploadFile(sdk, uploadLocation, file)
-          uploaded.push({ resourceId: resource.id })
-        }
-        commitResourceValue(name, [...resourceIds.map(id => ({ resourceId: id })), ...uploaded], onChange)
-      } catch (err) {
-        setError(err?.message || 'Upload failed')
-      } finally {
-        setUploading(false)
+      uploadMany(accepted)
+    },
+    [accept, uploadMany, uploading],
+  )
+
+  const onFilesDrop = useCallback(
+    files => {
+      if (busy) return
+      const { accepted, rejected } = partitionAcceptedFiles(files, accept)
+      if (!accepted.length) {
+        if (rejected.length) setError('File type not accepted')
+        return
       }
+      if (rejected.length) {
+        setError('Some files were rejected by accept filter')
+      }
+      if (multi) {
+        uploadMany(accepted)
+        return
+      }
+      uploadSingle(accepted[0])
     },
-    [accept, max, name, onChange, resourceIds, sdk, uploadLocation, uploading],
+    [accept, busy, multi, uploadMany, uploadSingle],
   )
 
   const removeMulti = useCallback(
@@ -163,77 +194,81 @@ export function PlatformFileField({
   if (multi) {
     const canAdd = resourceIds.length < max
     return (
-      <View gap="s" style={style} {...rest}>
-        {resourceIds.map(id => (
-          <View key={id} layout="row" gap="s" alignItems="center">
-            <View
-              as="img"
-              src={`/r/${id}`}
-              alt=""
-              width="32px"
-              height="32px"
-              style={{ objectFit: 'cover', borderRadius: 'var(--space-s)' }}
+      <DropZone onFilesDrop={canAdd ? onFilesDrop : undefined}>
+        <View gap="s" style={style} data-ossy-file-dropzone {...rest}>
+          {resourceIds.map(id => (
+            <View key={id} layout="row" gap="s" alignItems="center">
+              <View
+                as="img"
+                src={`/r/${id}`}
+                alt=""
+                width="32px"
+                height="32px"
+                style={{ objectFit: 'cover', borderRadius: 'var(--space-s)' }}
+              />
+              <Text style={{ flex: 1, fontSize: 14 }}>{id}</Text>
+              <Button
+                type="button"
+                variant="command-danger"
+                prefix="close"
+                size="s"
+                disabled={busy}
+                onClick={() => removeMulti(id)}
+              />
+            </View>
+          ))}
+          {canAdd && (
+            <UploadInput
+              id={name}
+              name={name}
+              accept={accept}
+              disabled={busy}
+              required={required && resourceIds.length === 0}
+              multiple
+              onChange={onMultiPick}
             />
-            <Text style={{ flex: 1, fontSize: 14 }}>{id}</Text>
-            <Button
-              type="button"
-              variant="command-danger"
-              prefix="close"
-              size="s"
-              disabled={disabled || uploading}
-              onClick={() => removeMulti(id)}
-            />
-          </View>
-        ))}
-        {canAdd && (
-          <UploadInput
-            id={name}
-            name={name}
-            accept={accept}
-            disabled={disabled || uploading}
-            required={required && resourceIds.length === 0}
-            multiple
-            onChange={onMultiPick}
-          />
-        )}
-        {uploading && <Text style={{ fontSize: 12 }}>Uploading…</Text>}
-        {error && <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>{error}</Text>}
-      </View>
+          )}
+          {uploading && <Text style={{ fontSize: 12 }}>Uploading…</Text>}
+          {error && <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>{error}</Text>}
+        </View>
+      </DropZone>
     )
   }
 
   const previewSrc = localFile ? null : previewUrl
 
   return (
-    <View gap="s" style={style} {...rest}>
-      {(localFile || previewSrc || resourceId) && (
-        <View layout="row" gap="s" alignItems="center">
-          {localFile && <LocalFilePreview file={localFile} size="48px" />}
-          {!localFile && previewSrc && (
-            <View
-              as="img"
-              src={previewSrc}
-              alt={label || name}
-              width="48px"
-              height="48px"
-              style={{ objectFit: 'cover', borderRadius: 'var(--space-s)' }}
-            />
-          )}
-          {localFile && (
-            <Text style={{ flex: 1, fontSize: 14 }}>{localFile.name}</Text>
-          )}
-          {uploading && <Text style={{ fontSize: 12 }}>Uploading…</Text>}
-        </View>
-      )}
-      <UploadInput
-        id={name}
-        name={name}
-        accept={accept}
-        disabled={disabled || uploading}
-        required={required && !resourceId}
-        onChange={onSinglePick}
-      />
-      {error && <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>{error}</Text>}
-    </View>
+    <DropZone onFilesDrop={onFilesDrop}>
+      <View gap="s" style={style} data-ossy-file-dropzone {...rest}>
+        {(localFile || previewSrc || resourceId) && (
+          <View layout="row" gap="s" alignItems="center">
+            {localFile && <LocalFilePreview file={localFile} size="48px" />}
+            {!localFile && previewSrc && (
+              <View
+                as="img"
+                src={previewSrc}
+                alt={label || name}
+                width="48px"
+                height="48px"
+                style={{ objectFit: 'cover', borderRadius: 'var(--space-s)' }}
+              />
+            )}
+            {localFile && (
+              <Text style={{ flex: 1, fontSize: 14 }}>{localFile.name}</Text>
+            )}
+            {uploading && <Text style={{ fontSize: 12 }}>Uploading…</Text>}
+          </View>
+        )}
+        <UploadInput
+          id={name}
+          name={name}
+          accept={accept}
+          disabled={busy}
+          required={required && !resourceId}
+          onChange={onSinglePick}
+        />
+        {error && <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>{error}</Text>}
+      </View>
+    </DropZone>
   )
 }

package/src/PlatformReferenceField.jsx

@@ -0,0 +1,216 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { View, Text, Button, Select } from '@ossy/design-system'
+import { useSdk, AsyncStatus } from '@ossy/sdk-react'
+import { metadata as SearchResources } from './search.action.js'
+import {
+  commitResourceValue,
+  resourceIdFromValue,
+  resourceIdsFromValue,
+  resourcePickerLabel,
+  sortResourcesForPicker,
+  toReferenceArray,
+} from './reference-field.helpers.js'
+import { useSchema } from './useSchemas.js'
+
+/**
+ * Platform document-link field — stores `{ resourceId }` (or `{ resourceId }[]` when
+ * `max > 1`) pointing at other documents. When `of` is set, lists matching workspace
+ * resources via SearchResources for picking.
+ * Register as `@ossy/design-system/input/reference` through app component slots.
+ *
+ * @param {object} props
+ * @param {string} [props.of] Target schema id (e.g. `@ossy/profile/schema/profile`)
+ */
+export function PlatformReferenceField({
+  name,
+  label,
+  value,
+  onChange,
+  of: targetSchemaId,
+  max = 1,
+  disabled,
+  required,
+  style = {},
+  ...rest
+}) {
+  const sdk = useSdk()
+  const targetSchema = useSchema(targetSchemaId)
+  const targetLabel = targetSchema?.name || targetSchemaId
+  const multi = max > 1
+  const resourceId = multi ? null : resourceIdFromValue(value)
+  const resourceIds = multi ? resourceIdsFromValue(value) : []
+
+  const searchPayload = useMemo(
+    () => (targetSchemaId ? { type: targetSchemaId } : null),
+    [targetSchemaId],
+  )
+
+  const { status, data: resources = [] } = searchPayload
+    ? sdk.read(SearchResources, searchPayload)
+    : { status: AsyncStatus.Success, data: [] }
+
+  const options = useMemo(() => sortResourcesForPicker(resources), [resources])
+
+  const labelForId = useCallback(
+    id => {
+      const match = options.find(resource => resource.id === id)
+      return match ? resourcePickerLabel(match) : id
+    },
+    [options],
+  )
+
+  const selectResourceSingle = useCallback(
+    event => {
+      const next = event.target.value
+      if (!next) {
+        commitResourceValue(name, null, onChange)
+        return
+      }
+      commitResourceValue(name, { resourceId: next }, onChange)
+    },
+    [name, onChange],
+  )
+
+  const clearSingle = useCallback(() => {
+    commitResourceValue(name, null, onChange)
+  }, [name, onChange])
+
+  const addMulti = useCallback(
+    nextId => {
+      const id = typeof nextId === 'string' ? nextId.trim() : ''
+      if (!id || resourceIds.includes(id) || resourceIds.length >= max) return
+      commitResourceValue(name, toReferenceArray([...resourceIds, id]), onChange)
+    },
+    [max, name, onChange, resourceIds],
+  )
+
+  const selectResourceMulti = useCallback(
+    event => {
+      const next = event.target.value
+      event.target.value = ''
+      addMulti(next)
+    },
+    [addMulti],
+  )
+
+  const removeMulti = useCallback(
+    id => {
+      commitResourceValue(
+        name,
+        toReferenceArray(resourceIds.filter(rid => rid !== id)),
+        onChange,
+      )
+    },
+    [name, onChange, resourceIds],
+  )
+
+  if (!targetSchemaId) {
+    return (
+      <Text variant="small" color="neutral-600">
+        Reference fields require a target schema (`of`).
+      </Text>
+    )
+  }
+
+  const loading =
+    status === AsyncStatus.Loading || status === AsyncStatus.NotInitialized
+
+  if (multi) {
+    const canAdd = resourceIds.length < max
+    const availableOptions = options.filter(resource => !resourceIds.includes(resource.id))
+
+    return (
+      <View gap="s" style={style} data-ossy-reference-field={name} data-ossy-reference-multi="">
+        <Text variant="small" color="neutral-600">
+          Links to {targetLabel} (up to {max})
+        </Text>
+
+        {resourceIds.map(id => (
+          <View
+            key={id}
+            layout="row"
+            gap="s"
+            style={{ alignItems: 'center' }}
+            data-ossy-reference-selected={id}
+          >
+            <Text variant="small">{labelForId(id)}</Text>
+            <Button
+              type="button"
+              variant="command"
+              prefix="remove"
+              aria-label="Remove"
+              disabled={disabled}
+              onClick={() => removeMulti(id)}
+              data-ossy-reference-remove={id}
+            />
+          </View>
+        ))}
+
+        {canAdd ? (
+          <Select
+            {...rest}
+            id={name}
+            name={name}
+            value=""
+            disabled={disabled || loading}
+            required={required && resourceIds.length === 0}
+            aria-label={label || name}
+            onChange={selectResourceMulti}
+            data-ossy-reference-picker={name}
+            style={{ minWidth: '50%' }}
+          >
+            <option value="">
+              {loading ? 'Loading…' : 'Add a document…'}
+            </option>
+            {availableOptions.map(resource => (
+              <option key={resource.id} value={resource.id}>
+                {resourcePickerLabel(resource)}
+              </option>
+            ))}
+          </Select>
+        ) : null}
+      </View>
+    )
+  }
+
+  const selectedInOptions = options.some(resource => resource.id === resourceId)
+
+  return (
+    <View gap="s" style={style} data-ossy-reference-field={name}>
+      <Text variant="small" color="neutral-600">
+        Links to {targetLabel}
+      </Text>
+
+      <Select
+        {...rest}
+        id={name}
+        name={name}
+        value={selectedInOptions ? resourceId : ''}
+        disabled={disabled || loading}
+        required={required && !resourceId}
+        aria-label={label || name}
+        onChange={selectResourceSingle}
+        data-ossy-reference-picker={name}
+        style={{ minWidth: '50%' }}
+      >
+        <option value="">
+          {loading ? 'Loading…' : 'Select a document…'}
+        </option>
+        {options.map(resource => (
+          <option key={resource.id} value={resource.id}>
+            {resourcePickerLabel(resource)}
+          </option>
+        ))}
+        {resourceId && !selectedInOptions ? (
+          <option value={resourceId}>{resourceId}</option>
+        ) : null}
+      </Select>
+
+      {resourceId ? (
+        <Button type="button" variant="neutral" disabled={disabled} onClick={clearSingle}>
+          Clear
+        </Button>
+      ) : null}
+    </View>
+  )
+}

package/src/ResourceContentPage.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { metadata as GetResource } from './get.action.js'
+import { resourceDownloadHref } from './resource-download.js'
 import { AsyncStatus, useSdk } from '@ossy/sdk-react'
 import { Switch, View, DelayedRender, Button, Icon, PageSection, Text, Tags, ImageCard } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
@@ -94,8 +95,7 @@ export const ResourceContentPage = (props) => {
                     <View layout="row" gap="m">
                       <Button
                         variant="cta"
-                        target="_blank"
-                        href={resource?.content?.src}
+                        href={resourceDownloadHref(resource)}
                         download={resource?.name}
                         suffix="software-download"
                       >Download
@@ -115,6 +115,9 @@ export const ResourceContentPage = (props) => {
                           onClick={() => { }}
                           src={resource?.content?.sizes?.galleryLarge || resource?.content?.src}
                           placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+                          blurhash={resource?.content?.blurhash}
+                          width={resource?.content?.width}
+                          height={resource?.content?.height}
                           style={{ pageBreakInside: 'avoid', order: 1 }}
                         />
                       )