@ossy/resources 1.12.2 → 3.0.1

package/src/ImageResource.jsx

@@ -9,7 +9,7 @@ export const ImageResource = ({
   resourceId
 }) => {
   const sdk = useSdk()
-  const { data: resource } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
+  const { data: resource } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
 
   return (
     <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-m) var(--space-s) var(--space-xl)' }}>

package/src/PDFResource.jsx

@@ -7,7 +7,7 @@ export const PDFResource = ({
   resourceId
 }) => {
   const sdk = useSdk()
-  const { data: resource } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
+  const { data: resource } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
 
   return (
     <View stack bordered>

package/src/PlatformFileField.jsx

@@ -0,0 +1,239 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useSdk } from '@ossy/sdk-react'
+import {
+  View,
+  Text,
+  Button,
+  UploadInput,
+  LocalFilePreview,
+  acceptsFile,
+} from '@ossy/design-system'
+import { uploadFile } from './resource.helpers.js'
+import { metadata as GetResource } from './get.action.js'
+
+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)
+}
+
+/**
+ * Platform file field — eager upload on pick via SDK create + PUT.
+ * Register as `@ossy/design-system/input/file` / `@ossy/design-system/input/image` through app component slots.
+ */
+export function PlatformFileField({
+  name,
+  label,
+  value,
+  onChange,
+  accept,
+  min = 0,
+  max = 1,
+  disabled,
+  required,
+  uploadLocation = '/media/uploads/',
+  style = {},
+  ...rest
+}) {
+  const sdk = useSdk()
+  const multi = max > 1
+  const [localFile, setLocalFile] = useState(null)
+  const [previewUrl, setPreviewUrl] = useState(null)
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState(null)
+
+  const resourceId = multi ? null : resourceIdFromValue(value)
+  const resourceIds = multi ? resourceIdsFromValue(value) : []
+
+  useEffect(() => {
+    if (!resourceId || localFile) {
+      if (!localFile) setPreviewUrl(null)
+      return
+    }
+
+    let cancelled = false
+    sdk.invoke(GetResource, { resourceId })
+      .then(resource => {
+        if (cancelled) return
+        const src = resource?.content?.src || `/r/${resourceId}`
+        setPreviewUrl(src)
+      })
+      .catch(() => {
+        if (!cancelled) setPreviewUrl(`/r/${resourceId}`)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [resourceId, localFile, sdk])
+
+  const uploadSingle = useCallback(
+    async file => {
+      setUploading(true)
+      setError(null)
+      setLocalFile(file)
+      try {
+        const resource = await uploadFile(sdk, uploadLocation, file)
+        commitResourceValue(name, { resourceId: resource.id }, onChange)
+        setLocalFile(null)
+      } catch (err) {
+        setError(err?.message || 'Upload failed')
+        setLocalFile(null)
+      } finally {
+        setUploading(false)
+      }
+    },
+    [name, onChange, sdk, uploadLocation],
+  )
+
+  const onSinglePick = useCallback(
+    e => {
+      const file = e.target.files?.[0]
+      e.target.value = ''
+      if (!file || uploading) return
+      if (!acceptsFile(file, accept)) {
+        setError(`File type not accepted: ${file.name}`)
+        return
+      }
+      uploadSingle(file)
+    },
+    [accept, uploadSingle, uploading],
+  )
+
+  const onMultiPick = useCallback(
+    async 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) {
+        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)
+      }
+    },
+    [accept, max, name, onChange, resourceIds, sdk, uploadLocation, uploading],
+  )
+
+  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} {...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={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>
+    )
+  }
+
+  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>
+  )
+}

package/src/ResourceContentPage.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { metadata as GetResource } from './get.action.js'
 import { AsyncStatus, useSdk } from '@ossy/sdk-react'
-import { Switch, View, DelayedRender, Button, Icon, PageSection, Title, Text, Tags, ImageCard } from '@ossy/design-system'
+import { Switch, View, DelayedRender, Button, Icon, PageSection, Text, Tags, ImageCard } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 
 
@@ -9,10 +9,10 @@ export const ResourceContentPage = (props) => {
   const router = useRouter()
   const resourceId = router.params.resourceId
   const sdk = useSdk()
-  const { status, data: resource } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
+  const { status, data: resource } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
 
   return (
-    <View {...props} slot="content" style={{ flexDirection: 'column', wrap: 'no-wrap',  height: '100%' }}>
+    <View {...props} data-region="content" style={{ flexDirection: 'column', wrap: 'no-wrap',  height: '100%' }}>
       
       <style>
       {`
@@ -66,7 +66,7 @@ export const ResourceContentPage = (props) => {
       </PageSection>
 
       <View layout="off-center" style={{ flexGrow: '1' }}>
-        <View slot="content" style={{ padding: 'var(--space-m) var(--space-m) var(--space-xxl)'}}>
+        <View data-region="content" style={{ padding: 'var(--space-m) var(--space-m) var(--space-xxl)'}}>
           <Switch on={status}>
 
             <Switch.Case match={[AsyncStatus.Error]}>
@@ -87,7 +87,7 @@ export const ResourceContentPage = (props) => {
                   <View gap="l" className="resource-content-page__text-view">
 
                     <View gap="m">
-                      <Title>{resource?.name}</Title>
+                      <Text variant="heading-default" as="h1">{resource?.name}</Text>
                       <Text>{resource?.content?.description}</Text>
                     </View>
 

package/src/ResourceDescription.jsx

@@ -5,7 +5,7 @@ import { View, Text } from '@ossy/design-system'
 
 export const ResourceDescription = ({ resourceId }) => {
     const sdk = useSdk()
-    const { data: resource } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
+    const { data: resource } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
 
     const description = resource?.content?.description;
 

package/src/ResourceDetails.jsx

@@ -1,16 +1,15 @@
 import React, { useState } from 'react'
 import { metadata as GetResource } from './get.action.js'
 import { updateResourceAccess } from './resource.helpers.js'
-import { GetWorkspace } from '@ossy/workspaces'
 import { useSdk } from '@ossy/sdk-react'
+import { useSchema } from './useSchemas.js'
 import { Text, View } from '@ossy/design-system'
 import { formatBytes } from './utils/format-bytes.js'
 
 export const ResourceDetails = ({ resourceId }) => {
     const sdk = useSdk()
-    const { data: resource } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
-    const { data: workspace } = sdk.read(GetWorkspace)
-    const template = workspace?.resourceTemplates?.find(t => t.id === resource?.type)
+    const { data: resource } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
+    const template = useSchema(resource?.type)
     const [accessBusy, setAccessBusy] = useState(false)
     const [accessError, setAccessError] = useState(null)
 

package/src/ResourceDialogMove.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { moveResource } from './resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
-import { Button, View, Title, Input, Text, useInputValue } from '@ossy/design-system'
+import { Button, View, Input, Text, useInputValue } from '@ossy/design-system'
 
 export const ResourceDialogMove = ({
     resourceId,
@@ -26,13 +26,13 @@ export const ResourceDialogMove = ({
         layout="off-center-s" style={{ height: '100%' }}
     >
 
-        <View slot="content">
+        <View data-region="content">
             <View surface="primary" roundness="s">
                                 <View surface="primary" inset="l" roundness="s" gap="m">
 
 
       <View>
-        <Title variant="tertiary">Move Resource</Title>
+        <Text variant="heading-tertiary" as="h3">Move Resource</Text>
       </View>
 
         <View>

package/src/ResourceFactory.jsx

@@ -1,71 +1,18 @@
 import React from 'react'
 import { metadata as GetResource } from './get.action.js'
 import { AsyncStatus, useSdk } from '@ossy/sdk-react'
-import { GetWorkspace } from '@ossy/workspaces'
-import { Guide, Text, DelayedRender } from '@ossy/design-system'
-import { DocumentEdit } from './DocumentEdit.jsx'
-import { ImageResource } from './ImageResource.jsx'
-import { AudioResource } from './AudioResource.jsx'
-import { VideoResource } from './VideoResource.jsx'
-import { PDFResource } from './PDFResource.jsx'
-import { ResourceGenericView } from './ResourceGenericView.jsx'
-import { GenericResourceDetail } from './GenericResourceDetail.jsx'
+import { SchemaPresenter } from './SchemaPresenter.jsx'
 
 export const ResourceFactory = ({
   resourceId,
   mode,
-  onClose: _onClose,
-  form
-}) => {
-  const sdk = useSdk()
-  const { data: workspace } = sdk.read(GetWorkspace)
-  const { data: resource, status } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
-
-  console.log('ResourceFactory', { resourceId, mode, resource, status })
-
-  if (AsyncStatus.Error === status) {
-    return (
-      <Guide
-        title="Not found"
-        text="We can't find the resource you are looking for"
-        style={{ padding: '40px 16px' }}
-      />
-    )
-  }
-
-  if ([AsyncStatus.Loading, AsyncStatus.NotInitialized].includes(status)) {
-    return (
-      <DelayedRender>
-        <Text>loading...</Text>
-      </DelayedRender>
-    )
-  }
-
-  if (workspace?.resourceTemplates?.find(({ id }) => id === resource.type)) {
-    if (mode === 'View') {
-      return <GenericResourceDetail resourceId={resourceId} />
-    }
-    if (mode === 'Edit') {
-      return <DocumentEdit resourceId={resourceId} form={form} />
-    }
-  }
-
-  if (['image/jpeg', 'image/png'].includes(resource.type)) {
-    return <ImageResource resourceId={resourceId} onClose={_onClose} />
-  }
-
-  if (resource.type.startsWith('video/')) {
-    return <VideoResource resourceId={resourceId} onClose={_onClose} />
-  }
-
-  if (resource.type.startsWith('audio/')) {
-    return <AudioResource resourceId={resourceId} onClose={_onClose} />
-  }
-
-  if (resource.type === 'application/pdf') {
-    return <PDFResource resourceId={resourceId} onClose={_onClose} />
-  }
-
-  return <ResourceGenericView resourceId={resourceId} onClose={_onClose} />
-
-}
+  onClose,
+  form,
+}) => (
+  <SchemaPresenter
+    resourceId={resourceId}
+    flow={mode}
+    form={form}
+    onClose={onClose}
+  />
+)

package/src/ResourceGenericView.jsx

@@ -10,7 +10,7 @@ export const ResourceGenericView = ({
   resourceId
 }) => {
   const sdk = useSdk()
-  const { data: resource } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
+  const { data: resource } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
 
   return (
     <View stack bordered>