@ossy/resources 3.9.0 → 3.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/resources",
   "description": "Resource domain — aggregate and events for the Ossy resource model",
-  "version": "3.9.0",
+  "version": "3.11.0",
   "private": false,
   "type": "module",
   "main": "./src/index.js",
@@ -23,9 +23,9 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/event-store": "^3.8.0",
+    "@ossy/event-store": "^3.11.0",
     "@ossy/fold": "^3.4.0",
-    "@ossy/platform": "^3.9.0",
+    "@ossy/platform": "^3.11.0",
     "@ossy/schema": "^3.8.0"
   },
   "peerDependencies": {
@@ -49,5 +49,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "f404be69becb27a1fd853a6ff1903554e76e7d17"
+  "gitHead": "53ff8456920e09151c9d88df4a6c3ee958d811eb"
 }

package/src/CreateDirectory.jsx

@@ -1,91 +1,85 @@
-import React, { useState, useRef } from 'react'
+import React, { useMemo, useState } from 'react'
 import { createDirectory } from './resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
-import { Input, Button, View, useInputValue, Text, useLocale } from '@ossy/design-system'
+import { Alert, Button, FieldFactory, Form, View, Text, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
+import { Schema, contentValidator } from '@ossy/schema'
+import { metadata as CreateDirectoryAction } from './create-directory.action.js'
+import { metadata as CreateDirectoryForm } from './create-directory.form.js'
+import createDirectoryTemplate from './create-directory.schema.js'
 
 export const CreateDirectory = () => {
   const { t } = useLocale()
   const router = useRouter()
   const sdk = useSdk()
-  const [directoryName, setDirectoryName] = useInputValue('')
   const [error, setError] = useState()
-  const formRef = useRef()
   const directoryLocation = router.searchParams.location || '/'
 
-  const onCreateDirectory = event => {
-    event.preventDefault()
-    setError()
+  const validate = useMemo(
+    () => contentValidator(Schema.of({ schemas: [createDirectoryTemplate] }), createDirectoryTemplate),
+    [],
+  )
 
+  const onCreateDirectory = (data) => {
+    setError()
+    const directoryName = String(data?.name ?? '').trim()
 
-    if (!directoryName || directoryName.trim() === '') {
-      return setError(t('resources.createDirectory.errorEmpty'))
+    if (!directoryName) {
+      setError(t('resources.createDirectory.errorEmpty'))
+      return
     }
 
-    if (directoryName?.startsWith?.('@ossy') || directoryName?.startsWith?.('/@ossy')) {
+    if (directoryName.startsWith('@ossy') || directoryName.startsWith('/@ossy')) {
       setError(t('resources.createDirectory.errorOssyPrefix'))
       return
     }
 
-    formRef.current.reportValidity() && createDirectory(sdk, {
+    createDirectory(sdk, {
       name: directoryName,
-      location: directoryLocation
+      location: directoryLocation,
     })
       .then(() => {
-        setDirectoryName()
-        router.navigate(`@storage/home?location=${directoryLocation}`)
+        router.navigate(`@storage/home?location=${encodeURIComponent(directoryLocation)}`)
       })
-      .catch(err => {
-        setError(err.message)
+      .catch((err) => {
+        setError(err?.message || t('resources.form.createFailed'))
       })
   }
 
   return (
-    <View gap="s" style={{ height: '100%' }}>
-
-      <Text variant="heading-primary" style={{ marginBottom: 'var(--space-m)' }} as="h1" text="resources.createDirectory.title" />
-
-      <Text style={{ marginBottom: 'var(--space-m)' }}>
-        {t('resources.createDirectory.description', { location: directoryLocation })}
-      </Text>
-
-      <form
-        ref={formRef}
+    <View gap="s" style={{ height: '100%' }} data-flow-stage="create-directory">
+      <Form
+        id={CreateDirectoryForm.id}
+        schemaId={CreateDirectoryForm.schemaId}
+        fields={createDirectoryTemplate.fields}
+        defaultData={{}}
         onSubmit={onCreateDirectory}
-        style={{ width: '100%', flexGrow: '1', display: 'flex', flexDirection: 'column', gap: 'var(--space-m)', justifyContent: 'space-between' }}
+        validate={validate}
+        gap="m"
+        style={{ width: '100%', flexGrow: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
       >
+        <View gap="m">
+          <Text variant="heading-primary" as="h1" text="resources.createDirectory.title" />
+          <Text>
+            {t('resources.createDirectory.description', { location: directoryLocation })}
+          </Text>
+          <FieldFactory />
+          {error ? <Alert variant="danger">{error}</Alert> : null}
+        </View>
 
-        <Input
-          id="path"
-          type="text"
-          placeholder={t('resources.createDirectory.namePlaceholder')}
-          value={directoryName}
-          onChange={setDirectoryName}
-          style={{ width: '100%', marginBottom: 'var(--space-l)' }}
-        />
-
-        <div>{ error }</div>
-
-
-        <View layout="row" style={{ gap: 'var(--space-s)', justifyContent: 'flex-end' }} >
-
+        <View layout="row" gap="s" justifyContent="flex-end">
           <Button
-            id="cancel"
+            variant="link"
             onClick={() => router.navigate('@back')}
-          >{t('design-system.cancel')}
-          </Button>
-
+            label="design-system.cancel"
+          />
           <Button
-            id="createDirectory"
+            {...CreateDirectoryAction}
             variant="cta"
-            onClick={onCreateDirectory}
-          >{t('resources.createDirectory.submit')}
-          </Button>
-
+            type="submit"
+          />
         </View>
-      </form>
-
+      </Form>
     </View>
   )
 }
-

package/src/CreateDocument.jsx

@@ -77,6 +77,7 @@ export const CreateDocument = () => {
                   key={schema.id}
                   variant="neutral"
                   prefix={schema.icon || 'add'}
+                  data-schema-id={schema.id}
                   onClick={() => selectSchema(schema.id)}
                 >
                   {schema.name || schema.id}

package/src/GenericResourceForm.jsx

@@ -1,21 +1,24 @@
 import React, { useMemo, useState } from 'react'
 import { useSchema } from './useSchemas.js'
 import { useSchemaEngine } from './useSchemaEngine.js'
-import { validateContent } from '@ossy/schema'
+import { Schema, contentValidator, validateContent } from '@ossy/schema'
 import { resolveFormComponentChain } from '@ossy/schema/resolve'
 import {
   Slot,
   View,
   Text,
-  InputTitle,
   Button,
   Alert,
   Fields,
+  Form,
+  FieldFactory,
   applyFieldChange,
-  useInputValue,
   useLocale,
 } from '@ossy/design-system'
 import { SchemaFormDefault } from './SchemaFormDefault.jsx'
+import { metadata as CreateResource } from './create.action.js'
+import { metadata as CreateDocumentForm } from './create-document.form.js'
+import createDocumentTemplate from './create-document.schema.js'
 
 /** CMS create-resource form — name + schema fields (resources-specific tertiary fallback). */
 function ResourceCreateFormFallback ({
@@ -29,13 +32,17 @@ function ResourceCreateFormFallback ({
   const { t } = useLocale()
   const template = useSchema(schemaId)
   const engine = useSchemaEngine()
-  const [name, setName] = useInputValue(initialName)
   const [content, setContent] = useState(initialContent)
   const [error, setError] = useState()
 
-  const handleSubmit = (event) => {
-    event?.preventDefault?.()
-    const title = name?.trim() || (typeof content?.name === 'string' ? content.name.trim() : '')
+  const validate = useMemo(
+    () => contentValidator(Schema.of({ schemas: [createDocumentTemplate] }), createDocumentTemplate),
+    [],
+  )
+
+  const handleSubmit = (data) => {
+    const title = String(data?.name ?? '').trim()
+      || (typeof content?.name === 'string' ? content.name.trim() : '')
     if (!title) {
       setError(t('resources.form.nameRequired'))
       return
@@ -58,31 +65,42 @@ function ResourceCreateFormFallback ({
     }
   }
 
+  const defaultSubmitLabel = template?.name
+    ? `${t('design-system.add')} ${template.name}`
+    : t('resources.form.createResource')
+
   return (
-    <View as="form" stack gap="m" onSubmit={handleSubmit}>
-      <InputTitle
-        id="resource-name"
-        type="text"
-        placeholder={t('resources.form.untitled')}
-        value={name}
-        onChange={setName}
-      />
-      <Fields
-        schemaId={schemaId}
-        data={content}
-        onChange={(event) => {
-          setError(undefined)
-          setContent((prev) => applyFieldChange(prev, event))
-        }}
-        fields={template?.fields || []}
-      />
-      {error && <Alert variant="danger">{error}</Alert>}
-      <View layout="row" gap="s" justifyContent="flex-end">
-        {onCancel && <Button variant="link" onClick={onCancel} label="design-system.cancel" />}
-        <Button type="submit" variant="cta">
-          {submitLabel || (template?.name ? `${t('design-system.add')} ${template.name}` : t('resources.form.createResource'))}
-        </Button>
-      </View>
+    <View gap="s" data-flow-stage="create-document" data-schema-id={schemaId}>
+      <Form
+        id={CreateDocumentForm.id}
+        schemaId={CreateDocumentForm.schemaId}
+        fields={createDocumentTemplate.fields}
+        defaultData={{ name: initialName }}
+        onSubmit={handleSubmit}
+        validate={validate}
+        gap="m"
+      >
+        <FieldFactory />
+        <Fields
+          schemaId={schemaId}
+          data={content}
+          onChange={(event) => {
+            setError(undefined)
+            setContent((prev) => applyFieldChange(prev, event))
+          }}
+          fields={template?.fields || []}
+        />
+        {error && <Alert variant="danger">{error}</Alert>}
+        <View layout="row" gap="s" justifyContent="flex-end">
+          {onCancel && <Button variant="link" onClick={onCancel} label="design-system.cancel" />}
+          <Button
+            {...CreateResource}
+            type="submit"
+            variant="cta"
+            label={submitLabel || defaultSubmitLabel}
+          />
+        </View>
+      </Form>
     </View>
   )
 }

package/src/ResourceDialogMove.jsx

@@ -1,65 +1,114 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { moveResource } from './resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
-import { Button, View, Input, Text, useInputValue } from '@ossy/design-system'
+import {
+  Alert,
+  Button,
+  FieldFactory,
+  Form,
+  Overlay,
+  Text,
+  View,
+  useLocale,
+} from '@ossy/design-system'
+import { metadata as GetResource } from './get.action.js'
+import { metadata as UpdateResourceLocation } from './update-location.action.js'
+import { metadata as MoveForm } from './move.form.js'
+import moveTemplate from './move.schema.js'
 
+/**
+ * Move a resource to a new location.
+ *
+ * @param {{
+ *   resourceId?: string | null,
+ *   isVisible?: boolean,
+ *   onClose?: () => void,
+ * }} props
+ */
 export const ResourceDialogMove = ({
-    resourceId,
+  resourceId,
+  isVisible = true,
   onClose = () => {},
 }) => {
   const sdk = useSdk()
-  const [location, setLocation] = useInputValue('')
-
-  const onMove = () => {
-    moveResource(sdk, resourceId, location)
-        .then(() => {
-            onClose()
-        })
-        .catch(error => {
-            console.error('Failed to move resource:', error)
-            // Handle error (e.g., show a notification)
-        })
-  }
+  const { t } = useLocale()
+  const [error, setError] = useState()
+  const [busy, setBusy] = useState(false)
+  const { data: resource = {} } = sdk.read(
+    GetResource,
+    { resourceId },
+    { enabled: Boolean(resourceId) && isVisible },
+  )
 
-  return (
-    <View
-        layout="off-center-s" style={{ height: '100%' }}
-    >
+  useEffect(() => {
+    if (!isVisible) {
+      setError(undefined)
+      setBusy(false)
+    }
+  }, [isVisible])
 
-        <View data-region="content">
-            <View surface="primary" roundness="s">
-                                <View surface="primary" inset="l" roundness="s" gap="m">
+  const onMove = (data) => {
+    const target = String(data?.target ?? '').trim()
+    if (!resourceId || busy) return
+    if (!target) {
+      setError(t('resources.move.errorEmpty'))
+      return
+    }
 
+    setError(undefined)
+    setBusy(true)
+    moveResource(sdk, resourceId, target, resource?.location)
+      .then(() => onClose())
+      .catch((err) => {
+        console.error('Failed to move resource:', err)
+        setError(err?.message || t('resources.move.errorFailed'))
+      })
+      .finally(() => setBusy(false))
+  }
 
-      <View>
-        <Text variant="heading-tertiary" as="h3">Move Resource</Text>
-      </View>
+  if (!isVisible) return null
 
-        <View>
-            <Text style={{ fontWeight: 'bold' }}>
-                New location:
-            </Text>
-            <Input
-                value={location}
-                onChange={setLocation}
-                placeholder="/path/to/target/resource"
-            />
+  return (
+    <Overlay isVisible={true} onClose={onClose}>
+      <View
+        layout="off-center-s"
+        style={{ height: '100%' }}
+        data-flow-stage="move-resource"
+      >
+        <View data-region="content">
+          <View surface="primary" roundness="s">
+            <View surface="primary" inset="l" roundness="s" gap="m">
+              <Text variant="heading-tertiary" as="h3" text="resources.move.title" />
+              <Form
+                id={MoveForm.id}
+                schemaId={MoveForm.schemaId}
+                fields={moveTemplate.fields}
+                defaultData={{}}
+                onSubmit={onMove}
+                gap="m"
+              >
+                <FieldFactory />
+                {error ? <Alert variant="danger">{error}</Alert> : null}
+                <View layout="row" gap="s" justifyContent="flex-end">
+                  <Button
+                    type="button"
+                    variant="command"
+                    onClick={onClose}
+                    label="design-system.cancel"
+                    disabled={busy}
+                  />
+                  <Button
+                    {...UpdateResourceLocation}
+                    variant="cta"
+                    type="submit"
+                    disabled={busy}
+                  />
+                </View>
+              </Form>
+            </View>
+          </View>
         </View>
-
-      <View>
-
-        <Button onClick={onClose} style={{ marginTop: 'var(--space-m)' }}>
-            Close
-        </Button>
-
-        <Button variant="cta" onClick={onMove}>
-          Move
-        </Button>
-      </View>
-
-      </View>
-      </View>
       </View>
-    </View>
+    </Overlay>
   )
-}
+}

package/src/ResourceGrid.jsx

@@ -4,6 +4,7 @@ import { useSchemas } from './useSchemas.js'
 import {
   Dropdown,
   DropZone,
+  GridView,
   Icon,
   Image,
   View,
@@ -15,8 +16,6 @@ import { formatBytes } from './utils/format-bytes.js'
 import { ResourceSelectionCheckbox } from './ResourceSelectionCheckbox.jsx'
 import { resourceAccessIcon, isShareableResource } from './resource-share.js'
 
-const TILE_WIDTH = 160
-
 function useSchemaMap() {
   const templates = useSchemas()
   return useMemo(
@@ -40,13 +39,7 @@ export const ResourceGrid = ({
   }, [selectedIds])
 
   return (
-    <View
-      layout="row-wrap"
-      gap="m"
-      inset="m"
-      alignItems="stretch"
-      style={{ alignContent: 'flex-start' }}
-    >
+    <GridView>
       {inlineFolder && <InlineFolderTile {...inlineFolder} />}
       {resources.map(resource => (
         <ResourceGridItem
@@ -59,7 +52,7 @@ export const ResourceGrid = ({
           selected={selectedSet.has(resource.id) || Boolean(resource.selected)}
         />
       ))}
-    </View>
+    </GridView>
   )
 }
 
@@ -90,20 +83,10 @@ function InlineFolderTile({ name, onChange, onSave, onCancel }) {
   }
 
   return (
-    <View
-      surface="primary"
-      roundness="m"
-      inset="m"
-      gap="s"
-      style={{
-        width: TILE_WIDTH,
-        border: '1px dashed var(--separator-primary)',
-        boxSizing: 'border-box',
-      }}
+    <GridView.Item
+      leading={<Icon size="m" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />}
+      style={{ borderStyle: 'dashed' }}
     >
-      <View layout="row" alignItems="center" justifyContent="center" style={{ height: 96 }}>
-        <Icon size="m" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />
-      </View>
       <input
         ref={inputRef}
         value={name}
@@ -124,7 +107,7 @@ function InlineFolderTile({ name, onChange, onSave, onCancel }) {
           boxSizing: 'border-box',
         }}
       />
-    </View>
+    </GridView.Item>
   )
 }
 
@@ -177,32 +160,8 @@ const ResourceGridItem = memo(function ResourceGridItem({
     Container = DropZone.Dragable
   }
 
-  const tile = (
-    <View
-      as={href ? 'a' : 'div'}
-      href={href}
-      onClick={handleClick}
-      onContextMenu={handleContextMenu}
-      selectable
-      data-selected={selected || undefined}
-      surface="primary"
-      roundness="m"
-      inset="m"
-      gap="s"
-      data-resource-id={resource.id}
-      data-resource-access={resource.access || 'restricted'}
-      style={{
-        width: TILE_WIDTH,
-        textDecoration: 'none',
-        color: 'inherit',
-        cursor: 'pointer',
-        border: selected
-          ? '1px solid var(--foreground-active, var(--separator-primary))'
-          : '1px solid var(--separator-primary)',
-        boxSizing: 'border-box',
-        position: 'relative',
-      }}
-    >
+  const overlay = (
+    <>
       {showSelectionControls && (
         <View
           style={{
@@ -236,41 +195,34 @@ const ResourceGridItem = memo(function ResourceGridItem({
           />
         </View>
       )}
-      {actions ? (
-        <View
-          style={{
-            position: 'absolute',
-            top: 'var(--space-xs, 4px)',
-            right: 'var(--space-xs, 4px)',
-            zIndex: 1,
-          }}
-          onClick={event => event.stopPropagation()}
-        >
-          <RowActions
-            actions={actions}
-            open={menuOpen}
-            onOpenChange={handleMenuOpenChange}
-            position={menuPosition}
-            onTriggerClick={handleActionsTriggerClick}
-          />
-        </View>
+    </>
+  )
+
+  const tile = (
+    <GridView.Item
+      href={href}
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+      selectable
+      selected={selected}
+      overlay={overlay}
+      leading={<ResourceThumb type={type} content={content} templateMap={templateMap} />}
+      meta={<Size content={content} />}
+      trailing={actions ? (
+        <RowActions
+          actions={actions}
+          open={menuOpen}
+          onOpenChange={handleMenuOpenChange}
+          position={menuPosition}
+          onTriggerClick={handleActionsTriggerClick}
+        />
       ) : null}
-      <View layout="row" alignItems="center" justifyContent="center" style={{ height: 96 }}>
-        <ResourceThumb type={type} content={content} templateMap={templateMap} />
-      </View>
-      <Text
-        variant="small"
-        style={{
-          fontWeight: 'bold',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {typeof name === 'string' ? name : ''}
-      </Text>
-      <Size content={content} />
-    </View>
+      data-resource-id={resource.id}
+      data-resource-name={typeof resource.name === 'string' ? resource.name : undefined}
+      data-resource-access={resource.access || 'restricted'}
+    >
+      {typeof name === 'string' ? name : ''}
+    </GridView.Item>
   )
 
   return (

package/src/ResourceList.jsx

@@ -203,6 +203,7 @@ const ResourceListItem = memo(function ResourceListItem({
             />
           )}
           data-resource-id={resource.id}
+          data-resource-name={typeof name === 'string' ? name : undefined}
           data-resource-access={resource.access || 'restricted'}
         >
           {typeof name === 'string' ? name : ''}
@@ -255,7 +256,15 @@ function RowActions({ actions, open, onOpenChange, position, onTriggerClick }) {
 
     return (
       <Dropdown
-        trigger={<Button prefix="more-vertical-alt" variant="command" onClick={onTriggerClick} />}
+        trigger={(
+          <Button
+            prefix="more-vertical-alt"
+            variant="command"
+            onClick={onTriggerClick}
+            data-resource-actions
+            aria-label="Resource actions"
+          />
+        )}
         open={open}
         onOpenChange={onOpenChange}
         position={position}