@ossy/resources 1.12.2 → 1.12.3

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,7 +9,7 @@ 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%' }}>
@@ -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,
@@ -32,7 +32,7 @@ export const ResourceDialogMove = ({
 
 
       <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>

package/src/ResourceList.jsx

@@ -1,7 +1,6 @@
 'use client'
-import React, { useRef, useEffect } from 'react'
-import { useSdk } from '@ossy/sdk-react'
-import { GetWorkspace } from '@ossy/workspaces'
+import React, { useRef, useEffect, useMemo, useCallback, memo } from 'react'
+import { useSchemas } from './useSchemas.js'
 import {
   Dropdown,
   DropZone,
@@ -11,29 +10,37 @@ import {
   Text,
   Button,
   ContextMenu,
+  List,
 } from '@ossy/design-system'
 import { formatBytes } from './utils/format-bytes.js'
 
+function useSchemaMap() {
+  const templates = useSchemas()
+  return useMemo(
+    () => templates.reduce((acc, template) => ({ ...acc, [template.id]: template }), {}),
+    [templates],
+  )
+}
+
 export const ResourceList = ({
     resources = [],
     onClick = () => {},
     inlineFolder = null,
 }) => {
+    const templateMap = useSchemaMap()
 
     return (
-      <>
+      <List>
         {inlineFolder && <InlineFolderRow {...inlineFolder} />}
         {resources.map(resource => (
             <ResourceListItem
-                {...resource}
                 key={resource.id}
-                onClick={() => {
-                    onClick(resource)
-                    resource?.onClick?.(resource)
-                }}
+                resource={resource}
+                templateMap={templateMap}
+                onItemClick={onClick}
             />
         ))}
-      </>
+      </List>
     )
 }
 
@@ -64,51 +71,47 @@ function InlineFolderRow({ name, onChange, onSave, onCancel }) {
   }
 
   return (
-    <View
-      layout="row"
-      gap="m"
-      style={{
-        height: '56px',
-        flexShrink: 0,
-        borderBottom: '1px solid var(--separator-primary)',
-      }}
+    <List.Item
+      leading={<Icon size="s" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />}
     >
-      <View gap="m" layout="row" alignItems="center" style={{ flexGrow: 1, padding: '12px 0 12px 20px' }}>
-        <Icon size="s" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />
-        <input
-          ref={inputRef}
-          value={name}
-          onChange={event => onChange(event.target.value)}
-          onKeyDown={handleKeyDown}
-          onBlur={handleBlur}
-          style={{
-            flexGrow: 1,
-            border: 'none',
-            background: 'transparent',
-            outline: 'none',
-            fontSize: 'var(--text-default-font-size, 16px)',
-            fontFamily: 'var(--text-default-font-family, sans-serif)',
-            fontWeight: 'var(--text-default-font-weight, 400)',
-            color: 'var(--text-default-color, CanvasText)',
-            padding: 0,
-            minWidth: 0,
-          }}
-        />
-      </View>
-    </View>
+      <input
+        ref={inputRef}
+        value={name}
+        onChange={event => onChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        style={{
+          flexGrow: 1,
+          border: 'none',
+          background: 'transparent',
+          outline: 'none',
+          fontSize: 'var(--text-default-font-size, 16px)',
+          fontFamily: 'var(--text-default-font-family, sans-serif)',
+          fontWeight: 'var(--text-default-font-weight, 400)',
+          color: 'var(--text-default-color, CanvasText)',
+          padding: 0,
+          minWidth: 0,
+          width: '100%',
+        }}
+      />
+    </List.Item>
   )
 }
 
-function ResourceListItem({
-    onClick,
-    href,
-    onDrop,
-    dragData,
-    ...resource
+const ResourceListItem = memo(function ResourceListItem({
+    resource,
+    templateMap,
+    onItemClick,
   }) {
-  
+    const { onClick, href, onDrop, dragData, actions, name, type, content } = resource
+
+    const handleClick = useCallback(() => {
+        onItemClick(resource)
+        onClick?.(resource)
+    }, [onItemClick, onClick, resource])
+
     let Container = ({ children }) => <>{children}</>
-  
+
     if (onDrop) {
       Container = DropZone
     } else if (dragData) {
@@ -117,77 +120,58 @@ function ResourceListItem({
 
     return (
       <Container onDrop={onDrop} dragData={dragData}>
-        <View
-          layout="row"
+        <List.Item
+          href={href}
+          onClick={handleClick}
           selectable
-          gap="m"
-          style={{
-            height: '56px',
-            flexShrink: 0,
-            borderBottom: '1px solid var(--separator-primary)',
-          }}
+          leading={<ResourceIcon type={type} content={content} templateMap={templateMap} />}
+          meta={<Size content={content} />}
+          trailing={<RowActions actions={actions} />}
+          data-resource-id={resource.id}
         >
-          <View as={href ? 'a' : undefined} gap="m" layout='row' alignItems="center" style={{ flexGrow: 1, padding: '12px 0 12px 20px', }} href={href} onClick={onClick}>
-            <ResourceIcon {...resource} />
-            <Text>{typeof resource.name === 'string' && resource.name}</Text>
-            <View style={{ flexGrow: 1 }}/>
-            <Size {...resource} />
-          </View>
-          
-          <View style={{ padding: '12px 8px 12px 0'}}>
-            <RowActions {...resource} />
-          </View>
-      </View>
+          {typeof name === 'string' ? name : ''}
+        </List.Item>
     </Container>
     )
-  
-  }
-  
-  function Size(resource) {
-  
-    if (resource.content?.ContentLength) {
-      return (
-        <Text variant="small">
-          {formatBytes(resource.content.ContentLength)}
-        </Text>
-      )
-    }
-  
-    return <></>
-  }
-  
-  function ResourceIcon({ ...resource }) {
-    const sdk = useSdk()
-    const { data: workspace } = sdk.read(GetWorkspace)
-  
-    const resourceTemplates = (workspace.resourceTemplates || [])
-      .reduce((acc, curr) => ({ ...acc, [curr.id]: curr }), {})
-  
-    if (resource?.type === 'directory') {
+})
+
+const ResourceIcon = memo(function ResourceIcon({ type, content, templateMap }) {
+    if (type === 'directory') {
       return (
         <Icon size="s" name="folder" style={{ fill: 'hsl(0, 0%, 60%)'}} />
       )
     }
-  
-    else if (resource.type.startsWith('image')) {
+
+    if (type?.startsWith('image')) {
       return (
         <Image
-          src={resource?.content?.sizes?.thumbnailSmall || resource?.content?.src}
-          placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+          src={content?.sizes?.thumbnailSmall || content?.src}
+          placeholderSrc={content?.sizes?.['loader-square-blurred-after'] || content?.src}
           style={{ width: '24px', height: '24px', borderRadius: '25%' }}
         />
       )
     }
-  
+
     return (
-      <Icon size="s" name={resourceTemplates[resource.type]?.icon || 'file'} style={{ fill: 'hsl(0, 0%, 80%)'}} />
+      <Icon size="s" name={templateMap[type]?.icon || 'file'} style={{ fill: 'hsl(0, 0%, 80%)'}} />
     )
-  }
-  
-  function RowActions({actions}) {
-  
-    if (!actions) return <></>
-  
+})
+
+function Size({ content }) {
+    if (content?.ContentLength) {
+      return (
+        <Text variant="small">
+          {formatBytes(content.ContentLength)}
+        </Text>
+      )
+    }
+
+    return null
+}
+
+function RowActions({ actions }) {
+    if (!actions) return null
+
     return (
       <Dropdown trigger={<Button prefix="more-vertical-alt" variant="command" /> } >
         <View inset="xs" surface="primary" roundness="s">
@@ -197,5 +181,4 @@ function ResourceListItem({
         </View>
       </Dropdown>
     )
-  
-  }
+}