@ossy/resources 1.12.2 → 3.0.1

package/package.json

@@ -1,31 +1,43 @@
 {
   "name": "@ossy/resources",
   "description": "Resource domain — aggregate and events for the Ossy resource model",
-  "version": "1.12.2",
+  "version": "3.0.1",
   "private": false,
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
+    "./schemaViewSlots.js": "./src/schemaViewSlots.js",
+    "./schemaFormSlots.js": "./src/schemaFormSlots.js",
+    "./resource.helpers.js": "./src/resource.helpers.js",
     "./server": "./src/server.js"
   },
   "scripts": {
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose"
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "test:integration": "NODE_OPTIONS=--experimental-vm-modules jest --config jest.integration.config.js --verbose"
   },
   "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
   "license": "MIT",
   "ossy": {
     "src": "./src"
   },
+  "dependencies": {
+    "@ossy/event-store": "^3.0.1",
+    "@ossy/fold": "^3.0.1",
+    "@ossy/platform": "^3.0.1",
+    "@ossy/schema": "^3.0.1"
+  },
   "peerDependencies": {
+    "@ossy/design-system": ">=1.0.0",
+    "@ossy/schema": "*",
     "@ossy/sdk-react": ">=1.0.0",
     "@ossy/workspaces": ">=1.0.0",
     "react": ">=19.0.0 <20.0.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.2.0",
-    "@ossy/platform": "^1.39.2",
+    "@ossy/platform": "^3.0.0",
     "casual": "^1.6.2",
     "jest": "^30.2.0"
   },
@@ -37,5 +49,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "2b8745d57fee8b6c08787e2755b4df489291a5cd"
+  "gitHead": "4a70ec216448680d2fddc57b2a8a0077489720ae"
 }

package/src/AudioResource.jsx

@@ -8,7 +8,7 @@ export const AudioResource = ({
   onClose: _onClose
 }) => {
   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>
@@ -18,7 +18,7 @@ export const AudioResource = ({
         <View
           as="audio"
           controls
-          slot="content"
+          data-region="content"
           src={resource.content.src}
         />
       </View>

package/src/CreateDirectory.jsx

@@ -1,15 +1,7 @@
 import React, { useState, useRef } from 'react'
 import { createDirectory } from './resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
-import {
-  Input,
-  Title,
-  Button,
-  View,
-  useInputValue,
-  Text,
-  useLocale,
-} from '@ossy/design-system'
+import { Input, Button, View, useInputValue, Text, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 
 export const CreateDirectory = () => {
@@ -51,7 +43,7 @@ export const CreateDirectory = () => {
   return (
     <View gap="s" style={{ height: '100%' }}>
 
-      <Title variant="primary" style={{ marginBottom: 'var(--space-m)' }}>{t('resources.createDirectory.title')}</Title>
+      <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 })}

package/src/CreateDirectory.page.jsx

@@ -14,7 +14,7 @@ export const metadata = {
 export const CreateDirectoryPage = () => {
   return (
     <View layout="off-center-s" style={{ height: '100%' }}>
-      <View slot="content" surface="primary" roundness="m" inset="m">
+      <View data-region="content" surface="primary" roundness="m" inset="m">
         <CreateDirectory/>
       </View>
     </View>

package/src/CreateDocument.jsx

@@ -8,7 +8,7 @@ import { GenericResourceForm } from './GenericResourceForm.jsx'
 export const CreateDocument = () => {
   const { t } = useLocale()
   const router = useRouter()
-  const templateId = router.searchParams.templateId
+  const schemaId = router.searchParams.schemaId
   const location = router.searchParams.location
   const sdk = useSdk()
   const [error, setError] = useState()
@@ -27,7 +27,7 @@ export const CreateDocument = () => {
   return (
     <>
       <GenericResourceForm
-        templateId={templateId}
+        schemaId={schemaId}
         mode="create"
         onSubmit={onSubmit}
         onCancel={onCancel}

package/src/CreateDocument.page.jsx

@@ -14,7 +14,7 @@ export const metadata = {
 export const CreateDocumentPage = () => {
   return (
     <View layout="off-center-m" style={{ height: '100%' }}>
-      <View slot="content" surface='primary' roundness='m' inset="m">
+      <View data-region="content" surface='primary' roundness='m' inset="m">
         <CreateDocument />
       </View>
     </View>

package/src/Definition.js

@@ -1,6 +1,6 @@
 export const Definition = {
   id: 'resources',
-  title: 'Free Resources',
+  title: 'Resources',
   description: `
     We believe in providing value at every step of your journey with us.
     That's why we've curated a collection of free resources.
@@ -9,5 +9,6 @@ export const Definition = {
     We hope you find them useful, and we're here if you have any questions!
   `,
   icon: 'image',
-  statuses: ['beta'],
+  status: ['beta'],
+  entitlementRequired: false,
 }

package/src/DocumentEdit.jsx

@@ -1,51 +1,23 @@
 import React from 'react'
 import { metadata as GetResource } from './get.action.js'
-import { GetWorkspace } from '@ossy/workspaces'
 import { useSdk } from '@ossy/sdk-react'
-import {
-  Text,
-  View,
-  DelayedRender,
-  Fields,
-} from '@ossy/design-system'
+import { GenericResourceForm } from './GenericResourceForm.jsx'
 
+/** @deprecated Prefer SchemaPresenter flow="Edit" or GenericResourceForm directly. */
 export const DocumentEdit = ({
   resourceId,
   form,
 }) => {
   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)
-
-  if (template?.fields && form.data) {
-    return (
-      <View style={{ padding: '16px 0' }}>
-        <Fields data={form.data} onChange={form.onChange} fields={template.fields} />
-      </View>
-    )
-  }
-
-  // Loading
-  if (template?.fields && !form.data) {
-    return (
-      <DelayedRender>
-        <View style={{ padding: '16px 0' }}>
-          Loading...
-        </View>
-      </DelayedRender>
-    )
-  }
+  const { data: resource } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
 
   return (
-    <View style={{ padding: '16px 0' }}>
-      <View inset="m" >
-        <Text>
-          This documents template has been deleted and can therefore not be edited
-        </Text>
-        </View>
-    </View>
+    <GenericResourceForm
+      schemaId={resource?.type}
+      mode="edit"
+      resourceId={resourceId}
+      resource={resource}
+      form={form}
+    />
   )
-
-
 }

package/src/DocumentView.jsx

@@ -1,36 +1,25 @@
 import React from 'react'
-import { pipe, keys, map } from 'ramda'
 import { metadata as GetResource } from './get.action.js'
-import { GetWorkspace } from '@ossy/workspaces'
 import { useSdk } from '@ossy/sdk-react'
-import { Text, View } from '@ossy/design-system'
+import { useSchema } from './useSchemas.js'
+import { View } from '@ossy/design-system'
+import { SchemaDetailView } from './SchemaDetailView.jsx'
 
 export const DocumentView = ({
   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)
 
   return (
     <View style={{ padding: '16px 0' }}>
-      <View gap="m">
-          {
-            !!resource?.content && (template?.fields || [])
-              .map(field => ({ name: field.name, value: resource?.content?.[field.name] }))
-              .map(field => (
-                <View gap="s" key={field.name}>
-                  <Text style={{ fontWeight: 'bold' }} >{field.name}</Text>
-                  {
-                    typeof field.value === 'object'
-                      ? pipe(keys, map(key => field.value[key] && <div>{key}</div>))(field.value)
-                      : <Text style={{ maxWidth: '500px' }}>{field.value}</Text>
-                  }
-                </View>
-              ))
-          }
-        </View>
+      <SchemaDetailView
+        schemaId={resource?.type}
+        fields={template?.fields}
+        data={resource?.content ?? {}}
+        title={resource?.name}
+      />
     </View>
   )
 }

package/src/GenericResourceCard.jsx

@@ -1,13 +1,14 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { metadata as GetResource } from './get.action.js'
 import { useSdk } from '@ossy/sdk-react'
-import { Slot, resourceSlot, View, Title, Text, DelayedRender } from '@ossy/design-system'
+import { resolveViewComponentChain } from '@ossy/schema/resolve'
+import { Slot, View, Text, DelayedRender } from '@ossy/design-system'
 
 function GenericResourceCardFallback ({ resource }) {
   if (!resource) return null
   return (
     <View surface="secondary" roundness="m" inset="m" gap="xs">
-      <Title variant="secondary">{resource.name}</Title>
+      <Text variant="heading-secondary" as="h2">{resource.name}</Text>
       {resource.content?.description && (
         <Text size="s" color="secondary">{resource.content.description}</Text>
       )}
@@ -15,11 +16,15 @@ function GenericResourceCardFallback ({ resource }) {
   )
 }
 
-/** Card-sized resource preview — `resource:{type}/card`. */
+/** Card projection for a schema-backed resource — ADR 0006. */
 export function GenericResourceCard ({ resourceId, resource: resourceProp }) {
   const sdk = useSdk()
-  const { data: loaded } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId && !resourceProp })
+  const { data: loaded } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId && !resourceProp })
   const resource = resourceProp ?? loaded
+  const chain = useMemo(
+    () => (resource?.type ? resolveViewComponentChain(resource.type, 'card') : []),
+    [resource?.type],
+  )
 
   if (!resource) {
     return (
@@ -29,12 +34,25 @@ export function GenericResourceCard ({ resourceId, resource: resourceProp }) {
     )
   }
 
+  const [primary, secondary] = chain
+
   return (
     <Slot
-      name={resourceSlot(resource.type, 'card')}
+      view={primary}
       resourceId={resourceId}
       resource={resource}
-      fallback={<GenericResourceCardFallback resource={resource} />}
+      schemaId={resource.type}
+      projection="card"
+      fallback={
+        <Slot
+          view={secondary}
+          resourceId={resourceId}
+          resource={resource}
+          schemaId={resource.type}
+          projection="card"
+          fallback={<GenericResourceCardFallback resource={resource} />}
+        />
+      }
     />
   )
 }

package/src/GenericResourceDetail.jsx

@@ -1,66 +1,12 @@
-import React from 'react'
-import { metadata as GetResource } from './get.action.js'
-import { GetWorkspace } from '@ossy/workspaces'
-import { useSdk } from '@ossy/sdk-react'
-import {
-  Slot,
-  resourceSlot,
-  View,
-  Title,
-  Text,
-  DelayedRender,
-  Fields,
-} from '@ossy/design-system'
-import { ResourceGenericView } from './ResourceGenericView.jsx'
-
-function GenericResourceDetailFallback ({ 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)
-
-  if (!resource) {
-    return (
-      <DelayedRender>
-        <Text>Loading…</Text>
-      </DelayedRender>
-    )
-  }
-
-  if (template?.fields?.length) {
-    return (
-      <View stack gap="m" inset="m">
-        <Title>{resource.name}</Title>
-        <Fields data={resource.content || {}} fields={template.fields} />
-      </View>
-    )
-  }
-
-  return <ResourceGenericView resourceId={resourceId} />
-}
-
-/**
- * Generic resource detail host — resolves `resource:{type}/detail` from the slot
- * registry; falls back to template fields or a minimal placeholder.
- */
-export function GenericResourceDetail ({ resourceId }) {
-  const sdk = useSdk()
-  const { data: resource } = sdk.read(GetResource, { id: resourceId }, { enabled: !!resourceId })
-
-  if (!resource) {
-    return (
-      <DelayedRender>
-        <Text>Loading…</Text>
-      </DelayedRender>
-    )
-  }
+import { SchemaPresenter } from './SchemaPresenter.jsx'
 
+/** Read view for a schema-backed resource — ADR 0006 component id chain. */
+export function GenericResourceDetail ({ resourceId, projection }) {
   return (
-    <Slot
-      name={resourceSlot(resource.type, 'detail')}
+    <SchemaPresenter
       resourceId={resourceId}
-      resource={resource}
-      fallback={<GenericResourceDetailFallback resourceId={resourceId} />}
+      flow="View"
+      projection={projection}
     />
   )
 }

package/src/GenericResourceForm.jsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react'
-import { GetWorkspace } from '@ossy/workspaces'
-import { useSdk } from '@ossy/sdk-react'
+import React, { useMemo, useState } from 'react'
+import { useSchema } from './useSchemas.js'
+import { useSchemaEngine } from './useSchemaEngine.js'
+import { validateContent } from '@ossy/schema'
+import { resolveFormComponentChain } from '@ossy/schema/resolve'
 import {
   Slot,
-  resourceSlot,
   View,
-  Title,
   Text,
   InputTitle,
   Button,
@@ -15,10 +15,11 @@ import {
   useInputValue,
   useLocale,
 } from '@ossy/design-system'
+import { SchemaFormDefault } from './SchemaFormDefault.jsx'
 
-function GenericResourceFormFallback ({
-  templateId,
-  mode = 'create',
+/** CMS create-resource form — name + schema fields (resources-specific tertiary fallback). */
+function ResourceCreateFormFallback ({
+  schemaId,
   initialName = '',
   initialContent = {},
   onSubmit,
@@ -26,9 +27,8 @@ function GenericResourceFormFallback ({
   submitLabel,
 }) {
   const { t } = useLocale()
-  const sdk = useSdk()
-  const { data: workspace } = sdk.read(GetWorkspace)
-  const template = workspace?.resourceTemplates?.find(t => t.id === templateId)
+  const template = useSchema(schemaId)
+  const engine = useSchemaEngine()
   const [name, setName] = useInputValue(initialName)
   const [content, setContent] = useState(initialContent)
   const [error, setError] = useState()
@@ -38,8 +38,18 @@ function GenericResourceFormFallback ({
       setError(t('resources.form.nameRequired'))
       return
     }
+    if (template) {
+      const result = validateContent(engine, template, content)
+      if (!result.ok) {
+        setError(result.message)
+        return
+      }
+      setError(undefined)
+      onSubmit?.({ name: name.trim(), content: result.data, type: schemaId })
+      return
+    }
     setError(undefined)
-    onSubmit?.({ name: name.trim(), content, type: templateId })
+    onSubmit?.({ name: name.trim(), content, type: schemaId })
   }
 
   return (
@@ -52,62 +62,186 @@ function GenericResourceFormFallback ({
         onChange={setName}
       />
       <Fields
+        schemaId={schemaId}
         data={content}
-        onChange={(event) => setContent((prev) => applyFieldChange(prev, event))}
+        onChange={(event) => {
+          setError(undefined)
+          setContent((prev) => applyFieldChange(prev, event))
+        }}
         fields={template?.fields || []}
       />
-      {error && <Alert>{error}</Alert>}
+      {error && <Alert variant="danger">{error}</Alert>}
       <View layout="row" gap="s" justifyContent="flex-end">
-        {onCancel && <Button variant="link" onClick={onCancel}>{t('design-system.cancel')}</Button>}
+        {onCancel && <Button variant="link" onClick={onCancel} label="design-system.cancel" />}
         <Button variant="cta" onClick={handleSubmit}>
-          {submitLabel || (mode === 'edit' ? t('design-system.save') : (template?.name ? `${t('design-system.add')} ${template.name}` : t('resources.form.createResource')))}
+          {submitLabel || (template?.name ? `${t('design-system.add')} ${template.name}` : t('resources.form.createResource'))}
         </Button>
       </View>
     </View>
   )
 }
 
+function ResourceFormFallback ({
+  schemaId,
+  mode = 'create',
+  schemaFormOnly = false,
+  form,
+  resource,
+  initialName,
+  initialContent,
+  onSubmit,
+  onCancel,
+  submitLabel,
+  fields,
+}) {
+  if (form && mode === 'edit' && !fields?.length) {
+    return (
+      <View style={{ padding: '16px 0' }}>
+        <View inset="m">
+          <Text text="resources.form.typeRemoved" />
+        </View>
+      </View>
+    )
+  }
+
+  if (mode === 'create' && !schemaFormOnly) {
+    return (
+      <ResourceCreateFormFallback
+        schemaId={schemaId}
+        initialName={initialName ?? resource?.name}
+        initialContent={initialContent ?? resource?.content ?? {}}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        submitLabel={submitLabel}
+      />
+    )
+  }
+
+  return (
+    <View inset="m">
+      <SchemaFormDefault
+        schemaId={schemaId}
+        fields={fields}
+        mode={mode}
+        form={form}
+        resource={resource}
+        initialContent={initialContent ?? resource?.content ?? {}}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        submitLabel={submitLabel}
+      />
+    </View>
+  )
+}
+
 /**
- * Generic resource create/edit host — resolves `resource:{type}/form` from the
- * slot registry; falls back to template-driven Fields.
+ * Resolves `@ossy/…/form/{concept}` → `@ossy/resources/form/default` (edit) → fallback.
+ *
+ * Create mode skips the design-system default and falls through to {@link ResourceCreateFormFallback}
+ * unless `schemaFormOnly` is set (e.g. Storybook schema preview).
  */
-export function GenericResourceForm ({
-  templateId,
+function SchemaFormSlotPresenter ({
+  schemaId,
   mode = 'create',
+  schemaFormOnly = false,
   resourceId,
   resource,
+  form,
   initialName,
   initialContent,
   onSubmit,
   onCancel,
   submitLabel,
 }) {
-  const { t } = useLocale()
-
-  if (!templateId) {
-    return <Text>{t('resources.form.selectType')}</Text>
+  const template = useSchema(schemaId)
+  const chain = useMemo(() => {
+    if (!schemaId) return []
+    const full = resolveFormComponentChain(schemaId)
+    if (mode === 'create' && !schemaFormOnly) return [full[0]]
+    return full
+  }, [schemaId, mode, schemaFormOnly])
+  const [primary, secondary] = chain
+  const slotProps = {
+    schemaId,
+    mode,
+    resourceId,
+    resource,
+    form,
+    fields: template?.fields,
+    initialContent: initialContent ?? resource?.content ?? {},
+    onSubmit,
+    onCancel,
+    submitLabel,
   }
 
+  const tertiaryFallback = (
+    <ResourceFormFallback
+      schemaId={schemaId}
+      mode={mode}
+      schemaFormOnly={schemaFormOnly}
+      form={form}
+      resource={resource}
+      initialName={initialName ?? resource?.name}
+      initialContent={initialContent ?? resource?.content ?? {}}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      submitLabel={submitLabel}
+      fields={template?.fields}
+    />
+  )
+
+  const fallback = secondary
+    ? (
+      <Slot
+        view={secondary}
+        {...slotProps}
+        fallback={tertiaryFallback}
+      />
+    )
+    : tertiaryFallback
+
   return (
     <Slot
-      name={resourceSlot(templateId, 'form')}
-      templateId={templateId}
+      view={primary}
+      {...slotProps}
+      fallback={fallback}
+    />
+  )
+}
+
+/**
+ * Generic resource create/edit host — ADR 0006 form component chain with CMS create fallback.
+ */
+export function GenericResourceForm ({
+  schemaId,
+  mode = 'create',
+  schemaFormOnly = false,
+  resourceId,
+  resource,
+  form,
+  initialName,
+  initialContent,
+  onSubmit,
+  onCancel,
+  submitLabel,
+}) {
+  if (!schemaId) {
+    return <Text text="resources.form.selectType" />
+  }
+
+  return (
+    <SchemaFormSlotPresenter
+      schemaId={schemaId}
       mode={mode}
+      schemaFormOnly={schemaFormOnly}
       resourceId={resourceId}
       resource={resource}
+      form={form}
+      initialName={initialName}
+      initialContent={initialContent}
       onSubmit={onSubmit}
       onCancel={onCancel}
-      fallback={
-        <GenericResourceFormFallback
-          templateId={templateId}
-          mode={mode}
-          initialName={initialName ?? resource?.name}
-          initialContent={initialContent ?? resource?.content ?? {}}
-          onSubmit={onSubmit}
-          onCancel={onCancel}
-          submitLabel={submitLabel}
-        />
-      }
+      submitLabel={submitLabel}
     />
   )
 }