@ossy/resources 1.1.0 → 1.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/resources",
   "description": "Resource domain — aggregate and events for the Ossy resource model",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "type": "module",
   "main": "./src/index.js",
@@ -22,5 +22,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "c71b23b5721bfd12dec0dfb4b50d945b65314898"
+  "gitHead": "ada54e62aeb87c197fa18891e995fbf22e23cc94"
 }

package/src/AudioResource.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { useResource } from '@ossy/sdk-react'
+import { Stack, View } from '@ossy/design-system'
+
+export const AudioResource = ({
+  resourceId,
+  onClose: _onClose
+}) => {
+  const { resource } = useResource(resourceId)
+
+  return (
+    <Stack bordered>
+      <Stack.Item fill style={{ padding: '16px 8px', height: '100%' }}>
+
+      <View layout="off-center-s" inset="m" style={{ height: '100%'}}>
+        <View
+          as="audio"
+          controls
+          slot="content"
+          src={resource.content.src}
+        />
+      </View>
+
+      </Stack.Item>
+    </Stack>
+  )
+}

package/src/CreateDirectory.jsx

@@ -0,0 +1,98 @@
+import React, { useState, useRef } from 'react'
+import { useResources } from '@ossy/sdk-react'
+import {
+  Input,
+  Title,
+  Button,
+  View,
+  useInputValue,
+  Text
+} from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+
+export const CreateDirectory = () => {
+  const router = useRouter()
+  const { createDirectory } = useResources()
+  const [directoryName, setDirectoryName] = useInputValue('')
+  const [error, setError] = useState()
+  const formRef = useRef()
+  const directoryLocation = router.searchParams.location || '/'
+
+  const onCreateDirectory = event => {
+    event.preventDefault()
+    setError()
+
+
+    if (!directoryName || directoryName.trim() === '') {
+      return setError('Directory name cannot be empty')
+    }
+
+    if (directoryName?.startsWith?.('@ossy') || directoryName?.startsWith?.('/@ossy')) {
+      setError('Directory name cannot start with @ossy')
+      return
+    }
+
+    formRef.current.reportValidity() && createDirectory({
+      name: directoryName,
+      location: directoryLocation
+    })
+      .then(() => {
+        setDirectoryName()
+        router.navigate(`@storage/home?location=${directoryLocation}`)
+      })
+      .catch(err => {
+        setError(err.message)
+      })
+  }
+
+  return (
+    <View gap="s" style={{ height: '100%' }}>
+
+      <Title variant="primary" style={{ marginBottom: 'var(--space-m)' }}>Create a new directory</Title>
+
+      <Text style={{ marginBottom: 'var(--space-m)' }}>
+        Create a new directory to organize your resources.
+        The new directory will be created in the location: {directoryLocation}
+      </Text>
+
+      <form
+        ref={formRef}
+        onSubmit={onCreateDirectory}
+        style={{ width: '100%', flexGrow: '1', display: 'flex', flexDirection: 'column', gap: 'var(--space-m)', justifyContent: 'space-between' }}
+      >
+
+        <Input
+          id="path"
+          type="text"
+          placeholder="Directory name"
+          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' }} >
+
+          <Button
+            id="cancel"
+            onClick={() => router.navigate('@back')}
+          >Cancel
+          </Button>
+
+          <Button
+            id="createDirectory"
+            variant="cta"
+            onClick={onCreateDirectory}
+          >Create directory
+          </Button>
+
+        </View>
+      </form>
+
+    </View>
+  )
+}
+
+

package/src/CreateDirectory.page.jsx

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

package/src/CreateDocument.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { useResources, useResourceTemplate } from '@ossy/sdk-react'
+import {
+  Alert,
+  InputTitle,
+  Button,
+  useInputValue,
+  Fields,
+  applyFieldChange,
+} from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+
+export const CreateDocument = () => {
+  const router = useRouter()
+  const templateId = router.searchParams.templateId
+  const location = router.searchParams.location
+  const template = useResourceTemplate(templateId)
+  const [documentData, setDocumentData] = useState({})
+  const { createDocument } = useResources()
+  const [documentName, setDocumentName] = useInputValue()
+  const [error, setError] = useState()
+
+  const onCancel = () => {
+    setDocumentData({})
+    const search = new URLSearchParams({ location }).toString()
+    router.navigate(`@storage/home?${search}`)
+  }
+
+  const onFinish = () => {
+    setDocumentData({})
+    const search = new URLSearchParams({ location }).toString()
+    router.navigate(`@storage/home?${search}`)
+  }
+
+  const onCreateDocument = () => {
+    if (documentName === '' || documentName === undefined) {
+      setError('Document name needs to be set')
+      return ''
+    }
+
+    createDocument({
+      type: templateId,
+      location: location,
+      name: documentName,
+      content: documentData
+    })
+      .then(() => onFinish())
+      .catch(error => { setError(error.message) })
+  }
+
+  const updateFieldData = event => {
+    setDocumentData(prev => applyFieldChange(prev, event))
+  }
+
+  return (
+    <>
+      <InputTitle
+        id="document-name"
+        type="text"
+        className="d-block"
+        placeholder="Untitled document"
+        value={documentName}
+        onChange={setDocumentName}
+      />
+      <Fields data={documentData} onChange={updateFieldData} fields={template?.fields || []} />
+      { error && <Alert>{error}</Alert>}
+      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 'var(--space-l)'}}>
+        <Button variant="link" onClick={onCancel}>Cancel</Button>
+        <Button variant="cta" onClick={onCreateDocument}>Create {template?.name}</Button>
+      </div>
+    </>
+  )
+}

package/src/CreateDocument.page.jsx

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

package/src/Definition.js

@@ -0,0 +1,19 @@
+export const Definition = {
+  id: 'resources',
+  title: 'Free 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.
+    Whether you're looking to enhance your creative projects or simply seeking inspiration,
+    explore the gallery below to discover valuable assets that align with your vision.
+    We hope you find them useful, and we're here if you have any questions!
+  `,
+  module: {
+    id: 'resources',
+    enabled: true
+  },
+  statuses: ['beta'],
+  actions: ['resources.create', 'resources.update-content', 'resources.remove'],
+  views: ['home.page', 'resources.list', 'resources.get'],
+  tasks: []
+}

package/src/DocumentEdit.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { useResource, useResourceTemplate } from '@ossy/sdk-react'
+import {
+  Text,
+  View,
+  DelayedRender,
+  Fields,
+} from '@ossy/design-system'
+
+export const DocumentEdit = ({
+  resourceId,
+  form,
+}) => {
+  const { resource } = useResource(resourceId)
+
+  const template = useResourceTemplate(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>
+    )
+  }
+
+  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>
+  )
+
+
+}

package/src/DocumentView.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { pipe, keys, map } from 'ramda'
+import { useResource, useResourceTemplate } from '@ossy/sdk-react'
+import { Text, View } from '@ossy/design-system'
+
+export const DocumentView = ({
+  resourceId
+}) => {
+  const { resource } = useResource(resourceId)
+  const template = useResourceTemplate(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>
+    </View>
+  )
+}

package/src/ImageResource.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { useResource } from '@ossy/sdk-react'
+import {
+  Stack,
+  Image
+} from '@ossy/design-system'
+
+export const ImageResource = ({
+  resourceId
+}) => {
+  const { resource } = useResource(resourceId)
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-m) var(--space-s) var(--space-xl)' }}>
+      <Image
+        src={resource?.content?.sizes?.galleryLarge || resource.content.src}
+        placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource.content.src}
+        style={{ width: 'auto', height: '400px', margin: 'var(--space-m) auto var(--space-l)' }}
+      />
+    </div>
+  )
+}

package/src/PDFResource.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { useResource } from '@ossy/sdk-react'
+import { Stack } from '@ossy/design-system'
+
+export const PDFResource = ({
+  resourceId
+}) => {
+  const { resource  } = useResource(resourceId)
+
+  return (
+    <Stack bordered>
+      <Stack.Item fill>
+        <Stack bordered>
+
+
+
+          <Stack.Item fill style={{ padding: '16px 8px' }}>
+
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+                  <embed
+                    src={resource.content.src}
+                    type={resource.type}
+                    width="100%"
+                    height="800px"
+                  />
+                </div>
+          </Stack.Item>
+
+        </Stack>
+      </Stack.Item>
+    </Stack>
+  )
+}

package/src/ResourceContentPage.jsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import { useResource, AsyncStatus } from '@ossy/sdk-react'
+import { Switch, View, DelayedRender, Button, Icon, PageSection, Title, Text, Tags, ImageCard } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+
+
+export const ResourceContentPage = (props) => {
+  const router = useRouter()
+  const resourceId = router.params.resourceId
+  const { status, resource } = useResource(resourceId)
+
+  return (
+    <View {...props} slot="content" style={{ flexDirection: 'column', wrap: 'no-wrap',  height: '100%' }}>
+      
+      <style>
+      {`
+
+        .resource-content-page__resource-container {
+          height: 100%;
+          margin: 0 auto;
+          display: flex;
+          flex-direction: column;
+          wrap: wrap;
+          gap: var(--space-m);
+        }
+
+        .resource-content-page__text-view {
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-m);
+          padding: var(--space-s);
+          max-width: 500px;
+        }
+
+        @media(min-width: 768px) {
+          .resource-content-page__resource-container {
+            display: grid;
+            grid-template-columns: 1fr 2fr;
+            grid-template-rows: auto; 
+
+          }
+
+          .resource-content-page__text-view {
+            padding: var(--space-m);
+            order: 2;
+          }
+
+        }
+      `}
+      </style>
+
+      <PageSection maxWidth="xl">
+
+        <View style={{ padding: '0 ar(--space-l)'}} >
+
+          <View layout="row" style={{ justifyContent: 'space-between', borderRadius: 'var(--space-l)', padding: 'var(--space-xxs)', background: 'transparent' }}>
+            <Button variant="neutral" onClick={() => router.back()} style={{ padding: 'var(--space-xs)', borderRadius: '50%' }}>
+              <Icon name="Previous" />
+            </Button>
+          </View>
+
+        </View>
+
+      </PageSection>
+
+      <View layout="off-center" style={{ flexGrow: '1' }}>
+        <View slot="content" style={{ padding: 'var(--space-m) var(--space-m) var(--space-xxl)'}}>
+          <Switch on={status}>
+
+            <Switch.Case match={[AsyncStatus.Error]}>
+              Something went wrong
+            </Switch.Case>
+
+            <Switch.Case match={[AsyncStatus.Loading, AsyncStatus.NotInitialized]}>
+              <DelayedRender>
+                Loading...
+              </DelayedRender>
+            </Switch.Case>
+
+            <Switch.Case match={[AsyncStatus.Success]}>
+
+              <PageSection maxWidth="l">
+                <div className="resource-content-page__resource-container">
+
+                  <View gap="l" className="resource-content-page__text-view">
+
+                    <View gap="m">
+                      <Title>{resource?.name}</Title>
+                      <Text>{resource?.content?.description}</Text>
+                    </View>
+
+                    <View layout="row" gap="m">
+                      <Button
+                        variant="cta"
+                        target="_blank"
+                        href={resource?.content?.src}
+                        download={resource?.name}
+                        suffix="software-download"
+                      >Download
+                      </Button>
+                    </View>
+
+                    <View gap="m">
+                      <Text variant="s" style={{ fontWeight: 'bold' }}>Tags</Text>
+                      <Tags tags={resource?.content?.tags}/>
+                    </View>
+
+                  </View>
+
+                    {
+                      !!resource && (
+                        <ImageCard
+                          onClick={() => { }}
+                          src={resource?.content?.sizes?.galleryLarge || resource?.content?.src}
+                          placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+                          style={{ pageBreakInside: 'avoid', order: 1 }}
+                        />
+                      )
+                    }
+
+                </div>
+              </PageSection>
+
+            </Switch.Case>
+
+          </Switch>
+        </View>
+      </View>
+
+  </View>
+  )
+}
+
+// {
+//   !!resource && (
+//     <Button
+//       as="a"
+//       href="https://d1yuixo7x29bj4.cloudfront.net/36zDqF0TKZZ5KkJdyg7NH/MRHX4agbiHC9p3N9_Wzfd.png"
+//       download
+//       variant="cta"
+//     >
+//       Download
+//     </Button>
+//   )
+// }

package/src/ResourceContentPage.stories.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ResourceContentPage } from './ResourceContentPage.jsx'
+
+export default {
+  title: 'Websites/Ossy/ResourceContentPage',
+  component: ResourceContentPage,
+  parameters: {
+   layout: 'fullscreen',
+   workspaceId: '36zDqF0TKZZ5KkJdyg7NH',
+   params: {
+    resourceId: 'yBa6GdMeHg2EQr-u5xDd3'
+ }
+ },
+}
+
+const Story = props => <ResourceContentPage {...props}/>
+
+export const Default = Story.bind({})
+Default.args = { }

package/src/ResourceDescription.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { useResource, useResourceTemplate } from '@ossy/sdk-react'
+import { View, Text } from '@ossy/design-system'
+
+export const ResourceDescription = ({ resourceId }) => {
+    const { resource } = useResource(resourceId)
+    const template = useResourceTemplate(resource.type)
+
+    const description = resource?.content?.description;
+
+    if (!description) {
+        return (
+            <View>
+                <Text variant="small">
+                No description available.
+                </Text>
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ maxWidth: '450px' }}>
+          <Text variant="small">
+            {description}
+          </Text>
+        </View>
+      )
+}