@ossy/resources 1.1.0 → 1.2.0

package/src/ResourceDetails.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { useResource, useResourceTemplate } from '@ossy/sdk-react'
+import { Text, View } from '@ossy/design-system'
+import { formatBytes } from './utils/format-bytes.js'
+
+export const ResourceDetails = ({ resourceId }) => {
+    const { resource, access: saveResourceAccess } = useResource(resourceId)
+    const template = useResourceTemplate(resource.type)
+    const [accessBusy, setAccessBusy] = useState(false)
+    const [accessError, setAccessError] = useState(null)
+
+    const details = {
+        Id: resource?.id,
+        Template: template?.name,
+        Type: resource?.type,
+        Size: resource?.content?.ContentLength && formatBytes(resource?.content?.ContentLength),
+        'Last updated': resource?.lastUpdated && new Date(resource?.lastUpdated).toLocaleString(),
+        Created: resource?.created && new Date(resource?.created).toLocaleString(),
+    }
+
+    const showAccessToggle = resource?.id && resource?.type !== 'directory'
+
+    const onAccessChange = (event) => {
+        const next = event.target.checked ? 'public' : 'restricted'
+        setAccessError(null)
+        setAccessBusy(true)
+        saveResourceAccess({ access: next })
+            .catch(() => setAccessError('Could not update access'))
+            .finally(() => setAccessBusy(false))
+    }
+
+    return (
+        <View gap="s" style={{ maxWidth: '320px' }}>
+            {
+            Object.entries(details)
+                .filter(([, value]) => ![undefined, null].includes(value))
+                .map(([key, value]) => (
+                    <View layout='row'gap="m" key={key}>
+                        <Text variant="small" style={{ fontWeight: 'bold' }}>{key}:</Text>
+                        <span style={{ flexGrow: 1 }}></span>
+                        <Text variant="small">{value}</Text>
+                    </View>
+                ))
+            }
+            {showAccessToggle && (
+                <View gap="xs" style={{ paddingTop: 'var(--space-s)' }}>
+                    <View layout="row" gap="m" alignItems="center">
+                        <Text variant="small" style={{ fontWeight: 'bold', flexShrink: 0 }}>
+                            Public media link
+                        </Text>
+                        <span style={{ flexGrow: 1 }} />
+                        <input
+                            type="checkbox"
+                            checked={(resource?.access || 'restricted') === 'public'}
+                            disabled={accessBusy}
+                            onChange={onAccessChange}
+                            aria-label="Allow anyone with the link to view media"
+                        />
+                    </View>
+                    <Text variant="small" style={{ opacity: 0.85, lineHeight: 1.35 }}>
+                        When on, image and file URLs use the CDN and work without signing in.
+                        When off, only workspace members get time-limited download links.
+                    </Text>
+                    {accessError && (
+                        <Text variant="small" style={{ color: 'var(--palette-danger, #c00)' }}>
+                            {accessError}
+                        </Text>
+                    )}
+                </View>
+            )}
+        </View>
+    )
+}

package/src/ResourceDialogMove.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { useResources } from '@ossy/sdk-react'
+import { Button, View, Title, Input, Text, useInputValue } from '@ossy/design-system'
+
+export const ResourceDialogMove = ({
+    resourceId,
+  onClose = () => {},
+}) => {
+  const { moveResource } = useResources()
+  const [location, setLocation] = useInputValue('')
+
+  const onMove = () => {
+    moveResource(resourceId, location)
+        .then(() => {
+            onClose()
+        })
+        .catch(error => {
+            console.error('Failed to move resource:', error)
+            // Handle error (e.g., show a notification)
+        })
+  }
+
+  return (
+    <View
+        layout="off-center-s" style={{ height: '100%' }}
+    >
+
+        <View slot="content">
+            <View surface="primary" roundness="s">
+                                <View surface="primary" inset="l" roundness="s" gap="m">
+
+
+      <View>
+        <Title variant="tertiary">Move Resource</Title>
+      </View>
+
+        <View>
+            <Text style={{ fontWeight: 'bold' }}>
+                New location:
+            </Text>
+            <Input
+                value={location}
+                onChange={setLocation}
+                placeholder="/path/to/target/resource"
+            />
+        </View>
+
+      <View>
+
+        <Button onClick={onClose} style={{ marginTop: 'var(--space-m)' }}>
+            Close
+        </Button>
+
+        <Button variant="cta" onClick={onMove}>
+          Move
+        </Button>
+      </View>
+
+      </View>
+      </View>
+      </View>
+    </View>
+  )
+}

package/src/ResourceFactory.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { useResource, AsyncStatus, useWorkspace } from '@ossy/sdk-react'
+import { Guide, Text, DelayedRender } from '@ossy/design-system'
+import { DocumentView } from './DocumentView.jsx'
+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'
+
+export const ResourceFactory = ({
+  resourceId,
+  mode,
+  onClose: _onClose,
+  form
+}) => {
+  const { workspace } = useWorkspace()
+  const { resource, status } = useResource(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 <DocumentView resourceId={resourceId} onClose={_onClose} mode={mode} />
+    if (mode === 'Edit') return <DocumentEdit resourceId={resourceId} onClose={_onClose} mode={mode} 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} />
+
+}

package/src/ResourceGenericView.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useResource } from '@ossy/sdk-react'
+import {
+  Stack,
+  View,
+  Icon2,
+} from '@ossy/design-system'
+
+export const ResourceGenericView = ({
+  resourceId
+}) => {
+  const { resource } = useResource(resourceId)
+
+  return (
+    <Stack bordered>
+      <Stack.Item fill>
+        <Stack bordered>
+
+          <Stack.Item fill style={{ padding: '16px 8px' }}>
+
+            <View alignItems="center" justifyContent="center" style={{ height: '100%', maxHeight: '400px' }}>
+              <View roundness="m" style={{ border: '1px solid var(--separator)', padding: 'var(--space-xl) var(--space-xl)'}}>
+                <Icon2 size="xl" name="file" />
+              </View>
+            </View>
+          </Stack.Item>
+
+        </Stack>
+      </Stack.Item>
+    </Stack>
+  )
+}

package/src/ResourceList.jsx

@@ -0,0 +1,199 @@
+'use client'
+import React, { useRef, useEffect } from 'react'
+import {  useWorkspace } from '@ossy/sdk-react'
+import {
+  Dropdown,
+  DropZone,
+  Icon2,
+  Image,
+  View,
+  Text,
+  Button,
+  ContextMenu,
+} from '@ossy/design-system'
+import { formatBytes } from './utils/format-bytes.js'
+
+export const ResourceList = ({
+    resources = [],
+    onClick = () => {},
+    inlineFolder = null,
+}) => {
+
+    return (
+      <>
+        {inlineFolder && <InlineFolderRow {...inlineFolder} />}
+        {resources.map(resource => (
+            <ResourceListItem
+                {...resource}
+                key={resource.id}
+                onClick={() => {
+                    onClick(resource)
+                    resource?.onClick?.(resource)
+                }}
+            />
+        ))}
+      </>
+    )
+}
+
+function InlineFolderRow({ name, onChange, onSave, onCancel }) {
+  const inputRef = useRef(null)
+  const handledRef = useRef(false)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [])
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handledRef.current = true
+      onSave(event.target.value)
+    } else if (event.key === 'Escape') {
+      handledRef.current = true
+      onCancel()
+    }
+  }
+
+  const handleBlur = (event) => {
+    if (handledRef.current) return
+    onSave(event.target.value)
+  }
+
+  return (
+    <View
+      layout="row"
+      gap="m"
+      style={{
+        height: '56px',
+        flexShrink: 0,
+        borderBottom: '1px solid var(--separator-primary)',
+      }}
+    >
+      <View gap="m" layout="row" alignItems="center" style={{ flexGrow: 1, padding: '12px 0 12px 20px' }}>
+        <Icon2 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>
+  )
+}
+
+function ResourceListItem({
+    onClick,
+    href,
+    onDrop,
+    dragData,
+    ...resource
+  }) {
+  
+    let Container = ({ children }) => <>{children}</>
+  
+    if (onDrop) {
+      Container = DropZone
+    } else if (dragData) {
+      Container = DropZone.Dragable
+    }
+
+    return (
+      <Container onDrop={onDrop} dragData={dragData}>
+        <View
+          layout="row"
+          selectable
+          gap="m"
+          style={{
+            height: '56px',
+            flexShrink: 0,
+            borderBottom: '1px solid var(--separator-primary)',
+          }}
+        >
+          <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>
+    </Container>
+    )
+  
+  }
+  
+  function Size(resource) {
+  
+    if (resource.content?.ContentLength) {
+      return (
+        <Text variant="small">
+          {formatBytes(resource.content.ContentLength)}
+        </Text>
+      )
+    }
+  
+    return <></>
+  }
+  
+  function ResourceIcon({ ...resource }) {
+    const { workspace } = useWorkspace()
+  
+    const resourceTemplates = (workspace.resourceTemplates || [])
+      .reduce((acc, curr) => ({ ...acc, [curr.id]: curr }), {})
+  
+    if (resource?.type === 'directory') {
+      return (
+        <Icon2 size="s" name="folder" style={{ fill: 'hsl(0, 0%, 60%)'}} />
+      )
+    }
+  
+    else if (resource.type.startsWith('image')) {
+      return (
+        <Image
+          src={resource?.content?.sizes?.thumbnailSmall || resource?.content?.src}
+          placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+          style={{ width: '24px', height: '24px', borderRadius: '25%' }}
+        />
+      )
+    }
+  
+    return (
+      <Icon2 size="s" name={resourceTemplates[resource.type]?.icon || 'file'} style={{ fill: 'hsl(0, 0%, 80%)'}} />
+    )
+  }
+  
+  function RowActions({actions}) {
+  
+    if (!actions) return <></>
+  
+    return (
+      <Dropdown trigger={<Button prefix="more-vertical-alt" variant="command" /> } >
+        <View inset="xs" surface="primary" roundness="s">
+          <ContextMenu roundness="s" surface="primary">
+            {actions}
+          </ContextMenu>
+        </View>
+      </Dropdown>
+    )
+  
+  }

package/src/ResourcePage.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { ResourceContentPage } from './ResourceContentPage.jsx'
+
+export const ResourcePage = () => {
+  return <ResourceContentPage />
+}