@ossy/resources 1.12.2 → 1.12.3

package/src/ResourcePanel.jsx

@@ -1,24 +1,16 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, memo } from 'react'
 import { metadata as GetResource } from './get.action.js'
 import { removeResource, updateResourceContent, renameResource } from './resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
-import {
-  Title,
-  Overlay,
-  Switch,
-  Guide,
-  View,
-  Text,
-  Button,
-  InputTitle,
-  useInputValue,
-} from '@ossy/design-system'
+import { Switch, View, Text, Button, InputTitle, Alert, useInputValue } from '@ossy/design-system'
 import { ResourceFactory } from './ResourceFactory.jsx'
-import { useRouter } from '@ossy/router-react'
 import { ResourceDetails } from './ResourceDetails.jsx'
 import { ResourceTags } from './ResourceTags.jsx'
 import { ResourceDescription } from './ResourceDescription.jsx'
 import { useForm } from './useForm.js'
+import { useSchema } from './useSchemas.js'
+import { useSchemaEngine } from './useSchemaEngine.js'
+import { validateContent } from '@ossy/schema'
 
 const ViewMode = {
   Closed: 'Closed',
@@ -26,11 +18,6 @@ const ViewMode = {
   Edit: 'Edit'
 }
 
-const Overlays = {
-  None: 'None',
-  Removedirectory : 'RemoveDirectory'
-}
-
 const DefaultViewModes = {
   'panel-resource-content': ViewMode.View,
   'panel-header': ViewMode.View,
@@ -39,19 +26,19 @@ const DefaultViewModes = {
   'panel-resource-tags': ViewMode.Closed,
 }
 
-export const ResourcePanel = ({
+export const ResourcePanel = memo(function ResourcePanel ({
   resourceId,
   onClose: _onClose,
   extraPanels = [],
-}) => {
-  const router = useRouter()
+}) {
   const sdk = useSdk()
-  const [overlay, setOverlay] = useState(Overlays.None)
-  const [error] = useState()
+  const [contentError, setContentError] = useState()
   const [resourceName, setResourceName] = useInputValue('')
   const [panelViewModes, setPanelViewModes] = useState(DefaultViewModes)
 
-  const { data: resource = {} } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
+  const { data: resource = {} } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
+  const template = useSchema(resource?.type)
+  const engine = useSchemaEngine()
 
   const form = useForm({ defaultData: resource.content })
 
@@ -69,6 +56,18 @@ export const ResourcePanel = ({
   }
 
   const onUpdateResource = () => {
+    if (template) {
+      const result = validateContent(engine, template, form.data)
+      if (!result.ok) {
+        setContentError(result.message)
+        return
+      }
+      setContentError(undefined)
+      updateResourceContent(sdk, resourceId, result.data)
+        .then(() => setPanelViewModes(x => ({ ...x, 'panel-resource-content': ViewMode.View })))
+        .catch(() => alert('Something went wrong!'))
+      return
+    }
     updateResourceContent(sdk, resourceId, form.data)
       .then(() => setPanelViewModes(x => ({ ...x, 'panel-resource-content': ViewMode.View })))
       .catch(() => alert('Something went wrong!'))
@@ -91,16 +90,26 @@ export const ResourcePanel = ({
     setResourceName(resource.name)
   }, [resource])
 
+  useEffect(() => {
+    setContentError(undefined)
+  }, [form.data])
+
   const panels = [
     {
       id: 'panel-resource-content',
       label: 'View',
       suffix: panelViewModes['panel-resource-content'] === ViewMode.Edit
         ? [
-          { prefix: 'close', variant: 'command', onClick:  () => setPanelViewModes(x => ({ ...x, 'panel-resource-content': ViewMode.View })) },
+          { prefix: 'close', variant: 'command', onClick: () => {
+            setContentError(undefined)
+            setPanelViewModes(x => ({ ...x, 'panel-resource-content': ViewMode.View }))
+          } },
           { prefix: 'check', variant: 'command', onClick: onUpdateResource }
         ]
-        : [{ prefix: 'pen', variant: 'command', onClick: () => setPanelViewModes(x => ({ ...x, 'panel-resource-content': ViewMode.Edit })) }],
+        : [{ prefix: 'pen', variant: 'command', onClick: () => {
+          setContentError(undefined)
+          setPanelViewModes(x => ({ ...x, 'panel-resource-content': ViewMode.Edit }))
+        } }],
       fill: true,
       content: ResourceFactory
     },
@@ -143,9 +152,9 @@ export const ResourcePanel = ({
       `}</style>
 
       {
-        !!error && (
+        !!contentError && (
           <View.Item>
-            {error}
+            <Alert variant="danger">{contentError}</Alert>
           </View.Item>
         )
       }
@@ -159,7 +168,7 @@ export const ResourcePanel = ({
             <Switch.Case match={[ViewMode.View]}>
 
                 <View.Item fill surface="primary" style={{ padding: '4px 8px' }}>
-                  <Title as="h3" variant="tertiary">{resourceName}</Title>
+                  <Text as="h3" variant="breadcrumb">{resourceName}</Text>
                </View.Item>
 
               <Button prefix="trash-empty"  variant="command-danger" onClick={onRemoveResource}/>
@@ -174,7 +183,7 @@ export const ResourcePanel = ({
                   <InputTitle
                     id="document-name"
                     type="text"
-                    style={{ display: 'block', width: '100%', padding: '16px 8px' }}
+                    style={{ display: 'block', width: '100%' }}
                     value={resourceName}
                     onChange={setResourceName}
                     onBlur={onRenameResource} 
@@ -237,32 +246,6 @@ export const ResourcePanel = ({
 
       </View.Item>
 
-      {
-        overlay === Overlays.RemoveDirectory && (
-          <Overlay isVisible={true} onClose={() => setOverlay(Overlays.None)}>
-            <View layout="off-center-s" style={{ height: '100%' }}>
-              <View slot="content">
-                <View surface="primary" roundness="s">
-                  <View surface="primary" inset="l" roundness="s">
-                    <Guide
-                      title="Remove directory"
-                      text="Are you sure you want to remove this directory and everything in it?"
-                      actions={[
-                        { label: 'Cancel', variant: "command", onClick: () => setOverlay(Overlays.None) },
-                        { label: 'Remove', variant: 'command-danger', onClick: () => {
-                          removeResource(sdk, resourceId, resource?.location)
-                          setOverlay(Overlays.None)
-                        }}
-                      ]}
-                    />
-                  </View>
-                </View>
-              </View>
-            </View>
-          </Overlay>
-        )
-      }
-
     </View>
   )
-}
+})

package/src/ResourceTags.jsx

@@ -5,7 +5,7 @@ import { View, Tags, Text } from '@ossy/design-system'
 
 export const ResourceTags = ({ resourceId }) => {
     const sdk = useSdk()
-    const { data: resource } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
+    const { data: resource } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
 
     let resourceContentTags = resource?.content?.Tags || []
 

package/src/ResourcesPage.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { SDK } from '@ossy/sdk'
 import { metadata as ListResources } from './list.action.js'
 import { AsyncStatus, WorkspaceProvider, useSdk } from '@ossy/sdk-react'
-import { Title, Text, Switch, View, ImageCard, Tags, useLocale } from '@ossy/design-system'
+import { Text, Switch, View, ImageCard, Tags, Page, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 
 const sdk = SDK.of({
@@ -27,41 +27,32 @@ export const ResourcesPage= () => {
   return (
     <Switch on={status}>
       <Switch.Case match={[AsyncStatus.Success]}>
-
-        <main style={{
-          height: '100%',
-          gridArea: 'main',
-          padding: '32px 16px 0'
-        }}>
-          <View gap="l" style={{ margin: '0 auto' }}>
-
-            <View gap="m">
-              <Title>{t('resources.home.title')}</Title>
-              <Text style={{ maxWidth: '900px'}}>{t('resources.home.description')}</Text>
-            </View>
-            
-            <WorkspaceProvider sdk={sdk}>
-              <section style={freeResourcesGridStyles}>
-                { resources.map(resource => (
-                    <ImageCard
-                      href={router.getHref({ id: "@resource", params: { resourceId: resource?.id } })}
-                      src={resource?.content?.sizes?.galleryMedium || resource?.content?.src}
-                      placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
-                      style={{ pageBreakInside: 'avoid', cursor: 'pointer' }}
-                      key={resources.id}
-                    />
-                ))}
-              </section>
-            </WorkspaceProvider>
-
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-xxs)', marginTop: '24px' }}>
-              <Tags tags={Object.entries(tagsCount).map(([tag, count]) => `${count} ${tag}`)} />
-            </div>
+        <Page
+          maxWidth="xl"
+          title="resources.home.title"
+          description="resources.home.description"
+          descriptionMaxWidth="m"
+        >
+          <View gap="m">
+          <WorkspaceProvider sdk={sdk}>
+            <section style={freeResourcesGridStyles}>
+              { resources.map(resource => (
+                  <ImageCard
+                    href={router.getHref({ id: "@resource", params: { resourceId: resource?.id } })}
+                    src={resource?.content?.sizes?.galleryMedium || resource?.content?.src}
+                    placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+                    style={{ pageBreakInside: 'avoid', cursor: 'pointer' }}
+                    key={resource.id}
+                  />
+              ))}
+            </section>
+          </WorkspaceProvider>
+
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-xxs)', marginTop: '24px' }}>
+            <Tags tags={Object.entries(tagsCount).map(([tag, count]) => `${count} ${tag}`)} />
+          </div>
           </View>
-
-
-        </main>
-
+        </Page>
       </Switch.Case>
     </Switch>
   )

package/src/SchemaPresenter.jsx

@@ -0,0 +1,215 @@
+import React, { useMemo } from 'react'
+import { metadata as GetResource } from './get.action.js'
+import { AsyncStatus, useSdk } from '@ossy/sdk-react'
+import { useSchemas } from './useSchemas.js'
+import {
+  isMimeType,
+  isSchemaDocumentType,
+  resolveFormComponentId,
+  resolveMimeViewChain,
+  resolveViewComponentChain,
+} from '@ossy/schema/resolve'
+import { PlatformSchema } from '@ossy/platform'
+import { Guide, Text, DelayedRender, Slot, View, Fields } from '@ossy/design-system'
+import { useSchema } from './useSchemas.js'
+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 { GenericResourceForm } from './GenericResourceForm.jsx'
+
+/** MIME type for rendering — file envelope stores MIME in content. */
+export function resolveMediaType (resource) {
+  if (resource?.content?.ContentType) return resource.content.ContentType
+  return resource?.type
+}
+
+function SchemaViewFallback ({ resource, projection, resourceId }) {
+  const template = useSchema(resource?.type)
+
+  if (template?.fields?.length) {
+    return (
+      <View stack gap="m" inset="m">
+        <Text variant="heading-default" as="h1">{resource?.name}</Text>
+        <Fields data={resource.content || {}} fields={template.fields} />
+      </View>
+    )
+  }
+
+  if (resource?.content) {
+    const fields = Object.entries(resource.content)
+    return (
+      <View stack gap="m" inset="m">
+        <Text variant="heading-default" as="h1">{resource?.name}</Text>
+        {fields.map(([name, value]) => (
+          <View gap="xs" key={name}>
+            <Text style={{ fontWeight: 'bold' }}>{name}</Text>
+            <Text>{typeof value === 'object' ? JSON.stringify(value) : String(value ?? '')}</Text>
+          </View>
+        ))}
+        {projection && <Text size="s" color="secondary">projection: {projection}</Text>}
+      </View>
+    )
+  }
+
+  return <ResourceGenericView resourceId={resourceId} />
+}
+
+function SchemaViewPresenter ({ resource, projection, resourceId }) {
+  const chain = useMemo(
+    () => resolveViewComponentChain(resource.type, projection),
+    [resource.type, projection],
+  )
+  const [primary, secondary] = chain
+
+  return (
+    <Slot
+      name={primary}
+      resourceId={resourceId}
+      resource={resource}
+      schemaId={resource.type}
+      projection={projection}
+      fallback={
+        <Slot
+          name={secondary}
+          resourceId={resourceId}
+          resource={resource}
+          schemaId={resource.type}
+          projection={projection}
+          fallback={<SchemaViewFallback resource={resource} projection={projection} resourceId={resourceId} />}
+        />
+      }
+    />
+  )
+}
+
+function MimeViewPresenter ({ resource, projection, resourceId, onClose }) {
+  const mime = resolveMediaType(resource)
+  if (['image/jpeg', 'image/png', 'image/webp'].includes(mime)) {
+    return <ImageResource resourceId={resourceId} onClose={onClose} />
+  }
+  if (mime?.startsWith('video/')) {
+    return <VideoResource resourceId={resourceId} onClose={onClose} />
+  }
+  if (mime?.startsWith('audio/')) {
+    return <AudioResource resourceId={resourceId} onClose={onClose} />
+  }
+  if (mime === 'application/pdf') {
+    return <PDFResource resourceId={resourceId} onClose={onClose} />
+  }
+
+  const chain = resolveMimeViewChain(mime, projection)
+  const [primary, secondary] = chain
+  return (
+    <Slot
+      name={primary}
+      resourceId={resourceId}
+      resource={resource}
+      projection={projection}
+      fallback={
+        <Slot
+          name={secondary}
+          resourceId={resourceId}
+          resource={resource}
+          projection={projection}
+          fallback={<ResourceGenericView resourceId={resourceId} onClose={onClose} />}
+        />
+      }
+    />
+  )
+}
+
+/**
+ * ADR 0006 host: `resourceId` → fetch → `resource.type` → view/form component chain.
+ */
+export function SchemaPresenter ({
+  resourceId,
+  resource: resourceProp,
+  flow = 'View',
+  projection,
+  form,
+  onClose,
+  onSubmit,
+  onCancel,
+  mode,
+  initialName,
+  initialContent,
+  submitLabel,
+}) {
+  const sdk = useSdk()
+  const schemas = useSchemas()
+  const { data: loaded, status } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId && !resourceProp })
+  const resource = resourceProp ?? loaded
+
+  if (!resourceProp && AsyncStatus.Error === status) {
+    return (
+      <Guide
+        title="Not found"
+        text="We can't find the resource you are looking for"
+        style={{ padding: '40px 16px' }}
+      />
+    )
+  }
+
+  if (!resource && [AsyncStatus.Loading, AsyncStatus.NotInitialized].includes(status)) {
+    return (
+      <DelayedRender>
+        <Text>loading...</Text>
+      </DelayedRender>
+    )
+  }
+
+  if (!resource) return null
+
+  const isDocumentSchema =
+    isSchemaDocumentType(resource.type) || schemas.some(s => s.id === resource.type)
+
+  if (flow === 'Edit' || flow === 'edit') {
+    if (isDocumentSchema) {
+      return (
+        <GenericResourceForm
+          schemaId={resource.type}
+          mode="edit"
+          resourceId={resourceId}
+          resource={resource}
+          form={form}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          submitLabel={submitLabel}
+        />
+      )
+    }
+    return <ResourceGenericView resourceId={resourceId} onClose={onClose} />
+  }
+
+  if (resource.type === PlatformSchema.directory || resource.type === 'directory') {
+    return <Text>directory</Text>
+  }
+
+  if (isDocumentSchema) {
+    return <SchemaViewPresenter resource={resource} projection={projection} resourceId={resourceId} />
+  }
+
+  const mime = resolveMediaType(resource)
+  if (isMimeType(mime) || resource.type === PlatformSchema.file) {
+    return <MimeViewPresenter resource={resource} projection={projection} resourceId={resourceId} onClose={onClose} />
+  }
+
+  return <ResourceGenericView resourceId={resourceId} onClose={onClose} />
+}
+
+/**
+ * Create flow — resolves form component for a schema id.
+ */
+export function SchemaFormPresenter (props) {
+  const { schemaId, ...rest } = props
+  return (
+    <GenericResourceForm
+      schemaId={schemaId}
+      {...rest}
+    />
+  )
+}
+
+export { resolveFormComponentId }

package/src/Upload.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react'
-import { Button, View, Text, Upload as _Upload, Icon } from '@ossy/design-system'
+import React, { useState } from 'react'
+import { Button, View, Text, UploadInput, Icon, LocalFilePreview } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 
 const FlowStage = {
@@ -53,8 +53,8 @@ export const Upload = ({
           <View gap="s" style={{ flexGrow: '1', overflow: 'auto', padding: 'var(--space-m) 0' }}>
           {
             files.map(({ status, file }) => (
-              <View layout="row" gap="m" alignItems="center">
-                <UploadImgPreview file={file} />
+              <View key={file.name} layout="row" gap="m" alignItems="center">
+                <LocalFilePreview file={file} />
                 <Text style={{ margin: '0', lineHeight: '1', textWrap: 'nowrap', textOverflow: 'ellipsis', flexGrow: '1' }}>{file?.name || 'Untitled'}</Text>
                 <View layout="row" gap="xs">
                   <UploadStatus status={status} size="8px" />
@@ -68,7 +68,8 @@ export const Upload = ({
       }
 
       {files.length === 0 && (
-        <_Upload
+        <UploadInput
+          id="upload-resources"
           type="file"
           multiple
           onChange={onUserInput}
@@ -133,26 +134,6 @@ export const Upload = ({
 
 
 
-function UploadImgPreview({ file, size = "32px" }) {
-  const [src, setSrc] = useState()
-
-  useEffect(() => {
-    const reader = new FileReader()
-    reader.onload = (e) => setSrc(e.target.result)
-    reader.readAsDataURL(file)
-  }, [file])
-
-  return (
-    <View
-      as="img"
-      src={src}
-      width={size}
-      height={size}
-      style={{ backgroundSize: 'cover', borderRadius: 'var(--space-s)' }}
-    />
-  )
-}
-
 function UploadStatus({ status }) {
   if (status === 'preview') return <></>
   if (status === 'uploading') return <Icon name="spinner" size="s" animation="rotate" />

package/src/UploadResources.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { uploadFile } from './resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
-import { Title, View, Text, useLocale } from '@ossy/design-system'
+import { View, Text, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 import { Upload } from './Upload.jsx'
 
@@ -14,7 +14,7 @@ export const UploadResources = () => {
   return (
     <View gap="s" style={{ height: '100%' }}>
       <View gap="s">
-        <Title variant="tertiary" style={{ marginBottom: '0' }}>{t('resources.upload.title')}</Title>
+        <Text variant="heading-tertiary" style={{ marginBottom: '0' }} as="h3" text="resources.upload.title" />
         <View layout="row" gap="s">
           <Text variant="small">{t('resources.upload.location', { location })}</Text>
         </View>

package/src/VideoResource.jsx

@@ -7,7 +7,7 @@ export const VideoResource = ({
   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/access-filter.spec.js

@@ -50,7 +50,7 @@ describe('accessFilter', () => {
       const user = { id: 'u-1', workspaces: ['ws-1', 'ws-2'], policies: [] }
       const filter = accessFilter(user)
       expect(filter.$or).toContainEqual({
-        'state.access': { $in: ['public', 'workspace'] },
+        'state.access': { $in: ['public', 'workspace', 'restricted'] },
         'state.belongsTo': { $in: ['ws-1', 'ws-2'] },
       })
     })

package/src/create-page-view.action.js

@@ -1 +1 @@
-export const metadata = { id: 'resources/create-page-view', access: 'workspace' }
+export const metadata = { id: '@ossy/resources/actions/create-page-view', access: 'workspace' }

package/src/create-page-view.task.js

@@ -1,21 +1,20 @@
+import { nanoid } from 'nanoid'
 import { Aggregate } from '@ossy/event-store'
-import { Resource } from './resource.aggregate.js'
-import { ResourcesEvents } from './resources.events.js'
 import { Workspace } from '@ossy/workspaces/server'
-import { normalizeAndValidateDocumentContent } from '@ossy/platform'
+import { ResourcesEvents } from './resources.events.js'
+import { commitResource } from './resource-stream.helpers.js'
 
-export const metadata = { id: 'resources/create-page-view' }
+export const metadata = { id: '@ossy/resources/tasks/create-page-view' }
 
-const PAGE_VIEW_TEMPLATE_ID = '@ossy/web/page-view'
+const PAGE_VIEW_SCHEMA_ID = '@ossy/web/schema/page-view'
 const PAGE_VIEW_LOCATION = '/@ossy/analytics/page-views/'
 
-export async function run({ payload, req }) {
+export async function run ({ payload, req }) {
   const workspaceId = payload?.workspaceId ?? req?.workspaceId
   if (!workspaceId) throw Object.assign(new Error('workspaceId is required'), { status: 400 })
 
   const workspace = await Aggregate.Of(Workspace, workspaceId).then(Aggregate.View())
 
-  // Page-view template is a built-in; instantiate directly without schema validation
   const contentInput = {
     ...(payload ?? {}),
     userAgent: payload?.userAgent ?? req?.headers?.['user-agent'],
@@ -23,8 +22,10 @@ export async function run({ payload, req }) {
     path: payload?.path ?? '/',
   }
 
+  const resourceId = nanoid()
   const event = ResourcesEvents.Created({
-    type: PAGE_VIEW_TEMPLATE_ID,
+    resourceId,
+    schemaId: PAGE_VIEW_SCHEMA_ID,
     createdBy: payload?.userId ?? req?.userId ?? 'public',
     belongsTo: workspace.id,
     location: PAGE_VIEW_LOCATION,
@@ -33,6 +34,6 @@ export async function run({ payload, req }) {
     access: 'restricted',
   })
 
-  const resource = await Aggregate.Of(Resource, event).then(Aggregate.View())
+  const resource = await commitResource(event)
   return { id: resource.id }
 }

package/src/create.action.js

@@ -1 +1 @@
-export const metadata = { id: 'resources/create', access: 'workspace' }
+export const metadata = { id: '@ossy/resources/actions/create', access: 'workspace' }