@ossy/resources 1.12.2 → 3.0.1

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>
     )
-  
-  }
+}

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/SchemaDetailView.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { Text, View, useLocale, hasTranslation } from '@ossy/design-system'
+
+const labelStyle = { fontWeight: 600, opacity: 0.65 }
+const valueStyle = { whiteSpace: 'pre-wrap' }
+
+/**
+ * Generic read-only detail projection for schema-backed resources.
+ *
+ * @param {{
+ *   schemaId?: string,
+ *   fields?: { name: string, label?: string, derived?: boolean }[],
+ *   data?: Record<string, unknown>,
+ *   title?: string,
+ *   emptyMessage?: string,
+ * }} props
+ */
+export function SchemaDetailView ({
+  schemaId,
+  fields: fieldsProp,
+  data = {},
+  title,
+  emptyMessage = 'No data',
+}) {
+  const { messages } = useLocale()
+  const fields = (fieldsProp ?? []).filter((field) => !field.derived)
+  const displayTitle = title ?? data.name ?? 'Preview'
+
+  if (!fields.length) {
+    const entries = Object.entries(data)
+
+    return (
+      <View stack gap="m">
+        {displayTitle && (
+          <Text variant="heading-default" as="h1">{displayTitle}</Text>
+        )}
+        {entries.length
+          ? entries.map(([name, value]) => (
+            <View gap="xs" key={name}>
+              <Text variant="small" style={labelStyle}>{name}</Text>
+              <Text variant="small" style={valueStyle}>
+                {value == null || value === ''
+                  ? '—'
+                  : typeof value === 'boolean'
+                    ? (value ? 'Yes' : 'No')
+                    : typeof value === 'object'
+                      ? JSON.stringify(value, null, 2)
+                      : String(value)}
+              </Text>
+            </View>
+          ))
+          : <Text variant="small" style={{ opacity: 0.6 }}>{emptyMessage}</Text>}
+      </View>
+    )
+  }
+
+  return (
+    <View stack gap="m">
+      {displayTitle && (
+        <Text variant="heading-default" as="h1">{displayTitle}</Text>
+      )}
+      {fields.map((field) => {
+        const value = data[field.name]
+        const labelKey = schemaId && !field.label ? `${schemaId}.${field.name}.label` : null
+
+        return (
+          <View gap="xs" key={field.name}>
+            {field.label
+              ? (
+                <Text variant="small" style={labelStyle}>{field.label}</Text>
+              )
+              : labelKey && hasTranslation(messages, labelKey)
+                ? (
+                  <Text
+                    variant="small"
+                    style={labelStyle}
+                    text={labelKey}
+                  />
+                )
+                : (
+                  <Text variant="small" style={labelStyle}>{field.name}</Text>
+                )}
+            <Text variant="small" style={valueStyle}>
+              {value == null || value === ''
+                ? '—'
+                : typeof value === 'boolean'
+                  ? (value ? 'Yes' : 'No')
+                  : typeof value === 'object'
+                    ? JSON.stringify(value, null, 2)
+                    : String(value)}
+            </Text>
+          </View>
+        )
+      })}
+    </View>
+  )
+}