@ossy/resources 1.1.0 → 1.2.0

package/src/ResourcePanel.jsx

@@ -0,0 +1,272 @@
+import React, { useState, useEffect } from 'react'
+import { useWorkspace, useResource, useResourceTemplate  } from '@ossy/sdk-react'
+import {
+  Title,
+  Overlay,
+  Switch,
+  Stack,
+  Guide,
+  View,
+  Text,
+  Button,
+  InputTitle,
+  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'
+
+const ViewMode = {
+  Closed: 'Closed',
+  View: 'View',
+  Edit: 'Edit'
+}
+
+const Overlays = {
+  None: 'None',
+  Removedirectory : 'RemoveDirectory'
+}
+
+const DefaultViewModes = {
+  'panel-resource-content': ViewMode.View,
+  'panel-header': ViewMode.View,
+  'panel-resource-details': ViewMode.Closed,
+  'panel-resource-description': ViewMode.Closed,
+  'panel-resource-tags': ViewMode.Closed,
+}
+
+export const ResourcePanel = ({
+  resourceId,
+  onClose: _onClose,
+  extraPanels = [],
+}) => {
+  const router = useRouter()
+  const { workspace } = useWorkspace()
+  const [overlay, setOverlay] = useState(Overlays.None)
+  const [error] = useState()
+  const [resourceName, setResourceName] = useInputValue('')
+  const [panelViewModes, setPanelViewModes] = useState(DefaultViewModes)
+
+  const {
+    resource,
+    removeResource,
+    updateResourceContent,
+    renameResource
+  } = useResource(resourceId)
+
+  const form = useForm({ defaultData: resource.content })
+
+  const onCloseResource = () => {
+    if (!_onClose) return
+    setPanelViewModes(DefaultViewModes)
+    setResourceName('')
+    _onClose()
+  }
+
+  const onRenameResource = () => {
+    if (resourceName === resource.name) return
+    renameResource(resourceName)
+      .then(() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.View })))
+  }
+
+  const onUpdateResource = () => {
+    updateResourceContent(form.data)
+      .then(() => setPanelViewModes(x => ({ ...x, 'panel-resource-content': ViewMode.View })))
+      .catch(() => alert('Something went wrong!'))
+  }
+
+  const onRemoveResource = () => {
+    removeResource()
+      .then(onCloseResource)
+  }
+
+  const onPanelToggle = (panelId) => {
+    setPanelViewModes(prev => {
+      const currentMode = prev[panelId] || ViewMode.Closed
+      const newMode = currentMode === ViewMode.Closed ? ViewMode.View : ViewMode.Closed
+      return { ...prev, [panelId]: newMode }
+    })
+  }
+
+  useEffect(() => {
+    setResourceName(resource.name)
+  }, [resource])
+
+  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: 'check', variant: 'command', onClick: onUpdateResource }
+        ]
+        : [{ prefix: 'pen', variant: 'command', onClick: () => setPanelViewModes(x => ({ ...x, 'panel-resource-content': ViewMode.Edit })) }],
+      fill: true,
+      content: ResourceFactory
+    },
+    {
+      id: 'panel-resource-details',
+      label: 'Details',
+      content: ResourceDetails
+    },
+    {
+      id: 'panel-resource-description',
+      label: 'Description',
+      suffix: [{ prefix: 'copy', variant: 'command' }],
+      content: ResourceDescription
+    },
+    {
+      id: 'panel-resource-tags',
+      label: 'Tags',
+      suffix: [{ prefix: 'copy', variant: 'command' }],
+      content: ResourceTags
+    },
+    ...extraPanels,
+  ]
+
+  if (!resourceId) {
+    return <></>
+  }
+
+  return (
+    <Stack surface="primary" bordered style={{ height: '100%', width: '50%' }}>
+
+      <style href="@design-system/scroll" precedence='low'>{`
+        [data-scroll-hide] {
+          -ms-overflow-style: none; /* For Internet Explorer and Edge */
+          scrollbar-width: none; /* For Firefox */
+        }
+
+        .hide-scrollbar::-webkit-scrollbar {
+          display: none; /* For Chrome, Safari, and Opera */
+        }
+      `}</style>
+
+      {
+        !!error && (
+          <Stack.Item>
+            {error}
+          </Stack.Item>
+        )
+      }
+
+      <Stack.Item>
+
+        <Stack horizontal style={{ height: '48px', alignItems: 'center', gap: '4px' }}>
+
+          <Switch on={panelViewModes['panel-header']}>
+
+            <Switch.Case match={[ViewMode.View]}>
+
+                <Stack.Item fill surface="primary" style={{ padding: '4px 8px' }}>
+                  <Title as="h3" variant="tertiary">{resourceName}</Title>
+               </Stack.Item>
+
+              <Button prefix="trash-empty"  variant="command-danger" onClick={onRemoveResource}/>
+              <Button prefix="pen" variant="command" onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.Edit }))} />
+              { !!_onClose && (<Button prefix="close" variant="command" onClick={onCloseResource} /> ) }
+
+            </Switch.Case>
+
+            <Switch.Case match={[ViewMode.Edit]}>
+
+                <Stack.Item fill surface="primary" style={{ padding: '4px 8px' }}>
+                  <InputTitle
+                    id="document-name"
+                    type="text"
+                    style={{ display: 'block', width: '100%', padding: '16px 8px' }}
+                    value={resourceName}
+                    onChange={setResourceName}
+                    onBlur={onRenameResource} 
+                  />
+               </Stack.Item>
+
+               <Button prefix="close" variant="command" onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.View }))} />
+               <Button prefix="check" variant="command" onClick={onRenameResource}/>
+
+            </Switch.Case>
+
+          </Switch>
+
+        </Stack>
+
+      </Stack.Item>
+
+      <Stack.Item fill={true} data-scroll-hide style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
+
+        {panels.map(({ content: Content, ...panel }) => {
+          const isExpanded = [ViewMode.View, ViewMode.Edit].includes(panelViewModes[panel.id])
+
+          return (
+            <View surface="primary" roundness="xs" key={panel.id} style={{ flexShrink: 0, flexGrow: panel.fill && isExpanded ? 1 : undefined }}>
+  
+              <View
+                layout="row"
+                inset="s"
+                gap="s"
+                alignItems="center"
+                style={{  height: '40px', borderBottom: isExpanded ? undefined : '1px solid var(--separator)' }}
+              >
+  
+                <Button
+                  variant="command"
+                  prefix={isExpanded ? 'chevron-down' : 'chevron-right'}
+                  onClick={() => onPanelToggle(panel.id)}
+                />
+  
+                { panel.prefix && <Button {...panel.prefix} /> }
+                <Text variant="small" style={{ fontWeight: 'bold', flexGrow: 1 }}>{panel.label}</Text>
+                { panel.suffix && panel.suffix.map(x => <Button {...x} />) }
+  
+              </View>
+  
+              {isExpanded && Content && (
+                <View style={{
+                  flexGrow: 1,
+                  overflowY: 'auto',
+                  borderBottom: '1px solid var(--separator)',
+                  padding: 'var(--space-s) var(--space-m) var(--space-m) calc(var(--space-l) + var(--space-m))' }
+                }>
+                  <Content resourceId={resourceId} mode={panelViewModes[panel.id]} form={form} />
+                </View>
+              )}
+  
+            </View>
+          )
+        })}
+
+      </Stack.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(resourceId)
+                          setOverlay(Overlays.None)
+                        }}
+                      ]}
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </Overlay>
+        )
+      }
+
+    </Stack>
+  )
+}

package/src/ResourceTags.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useResource, useResourceTemplate } from '@ossy/sdk-react'
+import { View, Tags, Text } from '@ossy/design-system'
+
+export const ResourceTags = ({ resourceId }) => {
+    const { resource } = useResource(resourceId)
+    const template = useResourceTemplate(resource.type)
+
+    let resourceContentTags = resource?.content?.Tags || []
+
+    if (typeof resourceContentTags === 'string') {
+        resourceContentTags = resourceContentTags.split(',').map(tag => tag.trim())
+    }
+
+    let resourceContenttags = resource?.content?.tags || []
+
+    if (typeof resourceContenttags === 'string') {
+        resourceContenttags = resourceContenttags.split(',').map(tag => tag.trim())
+    }
+
+
+    const resourceTags = resource?.tags || []
+    const allTags = [...resourceContentTags, ...resourceContenttags, ...resourceTags].sort()
+
+    if (allTags.length === 0) {
+        return (
+            <View>
+              <Text variant="small">
+                No tags available.
+              </Text>
+            </View>
+          )
+    }
+
+    return (
+        <View style={{ maxWidth: '450px' }}>
+            <Tags size="s" gap="s" tags={allTags} />
+        </View>
+    )
+}

package/src/ResourcesPage.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { SDK } from '@ossy/sdk'
+import { useResources, AsyncStatus, WorkspaceProvider } from '@ossy/sdk-react'
+import { Title, Text, Switch, View, ImageCard, Tags } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { Definition } from './Definition.js'
+
+const sdk = SDK.of({
+  /** Ossy.se workspaceID - used to fetch free resources */
+  workspaceId: "36zDqF0TKZZ5KkJdyg7NH"
+})
+
+const freeResourcesGridStyles = {
+  height: '100%',
+  columns: '6 200px',
+  columnGap: '16px'
+}
+
+export const ResourcesPage= () => {
+  const router = useRouter()
+  const { status, resources } = useResources('/publications/images/')
+  const tags = resources.flatMap(resource => resource?.content?.tags || [])
+  const tagsCount = tags.reduce((acc, t) => ({ ...acc, [t]: (acc?.[t] ?? 0) + 1 }), {})
+
+  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>{Definition.title}</Title>
+              <Text style={{ maxWidth: '900px'}}>{Definition.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>
+          </View>
+
+
+        </main>
+
+      </Switch.Case>
+    </Switch>
+  )
+}

package/src/Upload.jsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from 'react'
+import { Button, View, Text, Upload as _Upload, Icon2 } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+
+const FlowStage = {
+  Error: 'Error',
+  Preview: 'Preview',
+  Uploading: 'Uploading',
+  Done: 'Done'
+}
+
+export const Upload = ({
+ onUpload = () => Promise.reject(),
+ onCancel: _onCancel = () => {},
+ onDone,
+}) => {
+  const router = useRouter()
+  const location = router.searchParams.location
+  const finishUpload = onDone ?? _onCancel
+  const [files, setFilesMetadata] = useState([])
+  const flowStage = getFlowStage(files)
+
+  const uploadFiles = () => {
+    setFilesMetadata(files => files.map(x => ({ ...x, status: 'uploading' })))
+  
+    const uploadRequests = files.map((file) => 
+      onUpload(file.file)
+        .then(() => ({...file, status: 'uploaded' }))
+        .catch(() => ({...file, status: 'error' }))
+    )
+
+    return Promise.all(uploadRequests)
+      .then(setFilesMetadata)
+  }
+
+  const remove = (file) => {
+    setFilesMetadata(files => files.filter(x => x.file !== file))
+  }
+
+  const onUserInput = (e) => {
+    setFilesMetadata(Array.from(e.target.files).map(file => ({ file, status: 'preview' })))
+  }
+
+  const onCancel = () => {
+    setFilesMetadata([])
+    _onCancel()
+  }
+
+  return (
+    <View gap="s" style={{ height: '100%' }}>
+      {
+        files.length > 0 && (
+          <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} />
+                <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" />
+                  <Button variant="command-danger" prefix="close" size="s" onClick={() => remove(file)} />
+                </View>
+            </View>
+            ))
+          }
+          </View>
+        )
+      }
+
+      {files.length === 0 && (
+        <_Upload
+          type="file"
+          multiple
+          onChange={onUserInput}
+          style={{ flexGrow: '1', borderRadius: 'var(--space-s)' }}
+        />
+      )}
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-m)' }}>
+        <Button
+          id="cancel"
+          onClick={onCancel}
+        >Cancel
+        </Button>
+
+        {
+          flowStage === FlowStage.Preview && (
+            <Button
+              id="upload"
+              variant="cta"
+              onClick={uploadFiles}
+            >Upload
+            </Button>
+          )
+        }
+        
+        {
+          flowStage === FlowStage.Uploading && (
+            <Button
+              id="upload"
+              variant="cta"
+              disabled
+            >Upploading...
+            </Button>
+          )
+        }
+
+        {
+          flowStage === FlowStage.Error && (
+            <Button
+              id="upload"
+              variant="cta"
+              onClick={uploadFiles}
+            >Retry failed uploads
+            </Button>
+          )
+        }
+
+        {
+          flowStage === FlowStage.Done && (
+            <Button
+              id="upload"
+              variant="cta"
+              onClick={finishUpload}
+            >Done
+            </Button>
+          )
+        }
+      </div>
+    </View>
+  )
+}
+
+
+
+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 <Icon2 name="spinner" size="s" animation="rotate" />
+  if (status === 'uploaded') return <Icon2 name="check" size="s" />
+  if (status === 'error') return <Icon2 name="close" size="s" />
+}
+
+function getFlowStage(files = []) {
+
+  if (files.length === 0) return FlowStage.Preview
+
+  const didSomeUploadsFail = files.some(({ status }) => status === 'error')
+  if (didSomeUploadsFail) return FlowStage.Error
+
+  const areSomeUploadsInProgress = files.some(({ status }) => status === 'uploading')
+  if (areSomeUploadsInProgress) return FlowStage.Uploading
+
+  const areAllFilesUploadedSuccessfully = files.every(({ status }) => status === 'uploaded')
+  if (areAllFilesUploadedSuccessfully) return FlowStage.Done
+
+  return FlowStage.Preview
+}

package/src/Upload.page.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { UploadResources } from './UploadResources.jsx'
+import { View } from '@ossy/design-system'
+
+export const metadata = {
+  id: 'upload-media',
+  path: {
+    sv: '/resources/ladda-upp',
+    en: '/resources/upload',
+  },
+}
+
+
+export const UploadPage = () => {
+  return (
+    <View layout="off-center-s" style={{ height: '100%' }}>
+      <View slot="content" surface="primary" roundness="m" inset="m">
+        <UploadResources/>
+      </View>
+    </View>
+  )
+}
+
+export default UploadPage

package/src/UploadResources.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useResources } from '@ossy/sdk-react'
+import { Title, View, Text, Upload as _Upload } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { Upload } from './Upload.jsx'
+
+export const UploadResources = () => {
+  const router = useRouter()
+  const location = router.searchParams.location
+  const { uploadFile } = useResources()
+
+  return (
+    <View gap="s" style={{ height: '100%' }}>
+
+      <View gap="s">
+        <Title variant="tertiary" style={{ marginBottom: '0' }}>
+          Upload
+        </Title>
+        <View layout="row" gap="s">
+          <Text variant="small" >Location: {location}</Text>
+        </View>
+      </View>
+
+      <Upload
+        onUpload={(file) => uploadFile(location, file)}
+        onCancel={() => router.navigate(`@storage/home?location=${location}`)}
+        onDone={() => router.navigate(`@storage/home?location=${location}`)}
+      />
+    </View>
+  )
+}

package/src/VideoResource.jsx

@@ -0,0 +1,24 @@
+import React  from 'react'
+import { useResource } from '@ossy/sdk-react'
+import { Stack } from '@ossy/design-system'
+
+export const VideoResource = ({
+  resourceId
+}) => {
+  const { resource } = useResource(resourceId)
+
+  return (
+    <Stack bordered>
+          <Stack.Item fill style={{ padding: '16px 8px' }}>
+
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <video
+                controls
+                src={resource.content.src}
+                style={{ width: 'auto', height: '400px', margin: 'var(--space-l) auto' }}
+              />
+            </div>
+      </Stack.Item>
+    </Stack>
+  )
+}

package/src/index.js

@@ -1,2 +1,27 @@
 export * from './resource.aggregate.js'
 export * from './resources.events.js'
+
+export * from './AudioResource.jsx'
+export * from './CreateDirectory.jsx'
+export * from './CreateDocument.jsx'
+export * from './Definition.js'
+export * from './DocumentEdit.jsx'
+export * from './DocumentView.jsx'
+export * from './ImageResource.jsx'
+export * from './PDFResource.jsx'
+export * from './ResourceContentPage.jsx'
+export * from './ResourceDescription.jsx'
+export * from './ResourceDetails.jsx'
+export * from './ResourceDialogMove.jsx'
+export * from './ResourceFactory.jsx'
+export * from './ResourceGenericView.jsx'
+export * from './ResourceList.jsx'
+export * from './ResourcePage.jsx'
+export * from './ResourcePanel.jsx'
+export * from './ResourceTags.jsx'
+export * from './ResourcesPage.jsx'
+export * from './Upload.jsx'
+export * from './UploadResources.jsx'
+export * from './VideoResource.jsx'
+export * from './useActivePath.jsx'
+export * from './useForm.js'

package/src/useActivePath.jsx

@@ -0,0 +1,23 @@
+import {
+  unless,
+  startsWith,
+  o,
+  endsWith
+} from 'ramda'
+import { useRouter } from '@ossy/router-react'
+import React, { useEffect } from 'react'
+
+const prependSlash = unless(startsWith('/'), path => `/${path}`)
+const appendSlash = unless(endsWith('/'), path => `${path}/`)
+const addSlashes = o(prependSlash, appendSlash)
+
+export const useActivePath = () => {
+    const router = useRouter()
+    const activePath = addSlashes(router.searchParams.location || '/')
+
+  // useEffect(() => {
+  //   console.log('useActivePath', activePath)
+  // }, [activePath])
+
+    return activePath
+  }