@ossy/workspaces 1.1.0

package/README.md

@@ -0,0 +1,46 @@
+# @ossy/workspaces
+
+Workspaces **feature package** for the Ossy platform — provides workspace creation, selection, user management, and invitation pages that are auto-discovered by `@ossy/app` when the package is installed.
+
+## What's included
+
+### Pages
+
+| File | Page id | Default paths |
+|---|---|---|
+| `Invitations.page.jsx` | `workspace/invitations` | `/invitations` (en), `/inbjudningar` (sv) |
+| `Invite.page.jsx` | `workspace/invitations/add` | `/invitations/add` (en), `/inbjudningar/lagg-till` (sv) |
+| `Users.page.jsx` | `workspace/users` | `/users` (en), `/anvandare` (sv) |
+| `WorkspaceSettings.page.jsx` | `workspace/settings` | `/settings` (en), `/installningar` (sv) |
+
+### Components
+
+| Export | Description |
+|---|---|
+| `CreateWorkspacePage` | Form to create a new workspace |
+| `SelectWorkspacePage` | List and switch between workspaces |
+| `GeneralSettings` | Workspace details and services settings |
+| `Invitations` | List pending workspace invitations |
+| `Invite` | Invite a user to the workspace by email |
+| `Users` | List and manage workspace members |
+| `AuthenticationGuard` | Wraps children, shows error for unauthenticated users |
+| `patchUserWorkspaceId` | Utility to update the active workspace cookie |
+| `Definition` | Feature metadata (id, actions, views) |
+
+## Usage
+
+```bash
+npm install @ossy/workspaces
+npm run build
+```
+
+`@ossy/app` discovers the pages automatically by reading the `"ossy": { "src": "./src" }` field in this package's `package.json`.
+
+## Peer dependencies
+
+| Package | Version |
+|---|---|
+| `@ossy/design-system` | `>=1.0.0` |
+| `@ossy/router-react` | `>=1.0.0` |
+| `@ossy/sdk-react` | `>=1.0.0` |
+| `react` | `>=19.0.0 <20.0.0` |

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ossy/workspaces",
+  "description": "Workspaces feature package — create, select, and manage workspaces, users, and invitations",
+  "version": "1.1.0",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
+  "license": "MIT",
+  "ossy": {
+    "src": "./src"
+  },
+  "peerDependencies": {
+    "@ossy/design-system": ">=1.0.0",
+    "@ossy/router-react": ">=1.0.0",
+    "@ossy/sdk-react": ">=1.0.0",
+    "react": ">=19.0.0 <20.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "/src",
+    "README.md"
+  ],
+  "gitHead": "eabc1ddca6f83721efa11f044422ab8628929c88"
+}

package/src/AuthenticationGuard.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { AuthenticationStatus, useAuthentication } from '@ossy/sdk-react'
+import { Switch, View, Guide, Icon } from '@ossy/design-system'
+
+export const AuthenticationGuard = ({ children }) => {
+  const { status } = useAuthentication()
+
+  return (
+    <Switch on={status}>
+
+      <Switch.Case match={[AuthenticationStatus.NotAuthenticated]}>
+        <View layout="off-center" style={{ height: '100%' }}>
+          <Guide
+            style={{ width: '100vw', maxWidth: '300px' }}
+            slot="content"
+            title="Not Authenticated"
+            text="You need to login to view this page"
+          />
+        </View>
+      </Switch.Case>
+
+      <Switch.Case match={[AuthenticationStatus.AuthenticationError]}>
+        <View layout="off-center" style={{ height: '100%' }}>
+          <Guide
+            style={{ width: '100vw', maxWidth: '300px' }}
+            slot="content"
+            title="Error"
+            text="An error occurred while trying to authenticate, try again in a few minutes"
+          />
+        </View>
+      </Switch.Case>
+
+      <Switch.Case match={[AuthenticationStatus.Verifying, AuthenticationStatus.NoInitialized]}>
+        <View layout="off-center" style={{ height: '100%' }}>
+          <Icon
+            name="Cached"
+            style={{ width: '64px', height: '64px' }}
+            className="rotate fill-50"
+            slot="content"
+          />
+        </View>
+      </Switch.Case>
+
+      <Switch.Case match={[AuthenticationStatus.Authenticated]}>
+        {children}
+      </Switch.Case>
+
+    </Switch>
+  )
+}

package/src/CreateWorkspacePage.jsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { useWorkspaces } from '@ossy/sdk-react'
+import {
+  Button,
+  useInputValue,
+  Title,
+  Input,
+  View
+} from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { AuthenticationGuard } from './AuthenticationGuard.jsx'
+import { patchUserWorkspaceId } from './patchUserWorkspaceId.js'
+
+export const CreateWorkspacePage = () => {
+  const router = useRouter()
+  const [error, setError] = useState()
+  const [workspaceName, setWorkspaceName] = useInputValue()
+  const { createWorkspace } = useWorkspaces()
+
+  const onCreateWorkspace = workspaceName => {
+    createWorkspace(workspaceName)
+      .then((workspace) =>
+        patchUserWorkspaceId(workspace.id).then((res) => {
+          if (!res.ok) throw new Error('Could not select the new workspace')
+          window.location.assign(
+            router.getHref({ id: '@storage/home', params: { workspaceId: workspace.id } })
+          )
+        })
+      )
+      .catch(err => { setError(err.message) })
+  }
+
+  return (
+    <AuthenticationGuard>
+      <View gap="m">
+
+        <title>Create workspace</title>
+        <Title variant="primary" className="stack-m">Create a new workspace</Title>
+
+        <Input
+          id="workspaceName"
+          className={error ? 'stack-s' : 'stack-m'}
+          type="text"
+          placeholder="Workspace name"
+          required
+          onChange={setWorkspaceName}
+          style={{ width: '100%' }}
+        />
+
+        <div className={error ? 'stack-m' : ''}>{error}</div>
+
+        <View gap="m" layout="row" justifyContent="flex-end">
+
+          <Button
+            variant="link"
+            id="cancel"
+            href={() => router.back()}>Cancel
+          </Button>
+
+          <Button
+            id="createWorkspace"
+            variant="cta"
+            onClick={() => onCreateWorkspace(workspaceName)}>Create
+          </Button>
+
+        </View>
+      </View>
+    </AuthenticationGuard>
+  )
+}

package/src/Definition.js

@@ -0,0 +1,23 @@
+export const Definition = {
+  id: 'workspaces',
+  title: 'Workspaces',
+  description: 'Workspace lifecycle, members, invitations, and services.',
+  module: {
+    id: 'workspaces',
+    enabled: true
+  },
+  statuses: ['beta'],
+  actions: [
+    'workspaces.create',
+    'workspaces.invite-user',
+    'workspaces.enable-service',
+    'workspaces.disable-service'
+  ],
+  views: [
+    'workspaces.get-all',
+    'workspaces.get',
+    'workspaces.get-current',
+    'workspaces.get-users'
+  ],
+  tasks: []
+}

package/src/GeneralSettings.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react'
+import { useWorkspace, useUser, AsyncStatus } from '@ossy/sdk-react'
+import { Switch, Title, Button, View, Text } from '@ossy/design-system'
+
+const formatDate = (timestamp) => {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  return date.toLocaleDateString()
+}
+
+const FlowStage = {
+  View: 'View',
+  Edit: 'Edit'
+}
+
+const availableServices = [
+  '@ossy/jobs/visual-content-descriptors',
+  '@ossy/jobs/resize-common-web',
+  '@ossy/resumes',
+  '@ossy/consultancy',
+  '@ossy/apps',
+  '@ossy/domains',
+]
+
+export const GeneralSettings = () => {
+  const { workspace } = useWorkspace()
+  const { status: userStatus, user } = useUser()
+  const [flowStage, setFlowStage] = useState(FlowStage.View)
+
+  const services = workspace?.services || {}
+
+  const isWorkspaceCreator =
+    userStatus === AsyncStatus.Success &&
+    Boolean(workspace?.createdBy) &&
+    Boolean(user?.id) &&
+    workspace.createdBy === user.id
+
+  return (
+    <View gap="l" inset="m">
+      <View layout="row" gap="s" justifyContent="space-between">
+        <Title>Workspace details</Title>
+
+        <View>
+          <Switch on={flowStage}>
+            <Switch.Case match={[FlowStage.View]}>
+              <Button prefix={{ size: 's', name: 'pen' }} variant="cta" disabled>
+                Edit
+              </Button>
+            </Switch.Case>
+          </Switch>
+        </View>
+      </View>
+
+      <View gap="s" style={{ height: '100%' }}>
+        <View layout="row" gap="s">
+          <Text style={{ fontWeight: 'bold' }}>Id:</Text>
+          <Text>{workspace.id}</Text>
+        </View>
+        <View layout="row" gap="s">
+          <Text style={{ fontWeight: 'bold' }}>Name:</Text>
+          <Text>{workspace.name}</Text>
+        </View>
+        <View layout="row" gap="s">
+          <Text style={{ fontWeight: 'bold' }}>Created:</Text>
+          <Text>{formatDate(workspace?.created)}</Text>
+        </View>
+      </View>
+
+      {isWorkspaceCreator && (
+        <View gap="s">
+          <Title variant="secondary">Workspace services</Title>
+          <Text variant="small" style={{ maxWidth: '42rem' }}>
+            Turn features on or off for this workspace.
+          </Text>
+          {availableServices.map((x) => (
+            <View key={x}>
+              <Text>
+                {x} : {services[x] !== false ? 'On' : 'Off'}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
+
+    </View>
+  )
+}

package/src/Invitations.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { useWorkspace } from '@ossy/sdk-react'
+import { Title, Text, Button, View, Icon2 } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+
+export const Invitations = () => {
+  const router = useRouter()
+  const { workspace } = useWorkspace()
+  const invitations = workspace?.invitations || []
+
+  return (
+    <View gap="m">
+
+      <View inset="s" gap="s">
+
+        <View layout="row" justifyContent="space-between" alignItems="center">
+          <Title>Invitations</Title>
+          <Button variant="cta" href={router.getHref('@workspace/invitations/add')} prefix="user-add">
+            Invite user
+          </Button>
+        </View>
+
+        <Text style={{ maxWidth: '400px' }}>
+          Invite users to your workspace to collaborate.
+        </Text>
+
+      </View>
+
+      <View gap="xs">
+        {invitations.map(invite => (
+          <View layout="row" roundness="s" alignItems="center" inset="m" gap="m" selectable key={invite.email}>
+            <Icon2 name="mail" />
+            <View>
+              <Text variant="small" as="span">{invite.email}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
+
+      {invitations.length === 0 && <Text>No invitations</Text>}
+
+    </View>
+  )
+}

package/src/Invitations.page.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+import { Invitations } from './Invitations.jsx'
+
+export const metadata = {
+  id: 'workspace/invitations',
+  path: {
+    sv: '/inbjudningar',
+    en: '/invitations',
+  },
+}
+
+export const InvitationsPage = () => {
+  return (
+    <View layout="off-center-m" style={{ height: '100%' }}>
+      <View slot="content" surface="primary" roundness="m" inset="m">
+        <Invitations />
+      </View>
+    </View>
+  )
+}
+
+export default InvitationsPage

package/src/Invite.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useRef } from 'react'
+import { useWorkspace } from '@ossy/sdk-react'
+import { useRouter } from '@ossy/router-react'
+import {
+  useInputValue,
+  Button,
+  Title,
+  Input,
+  Switch,
+  Guide,
+  Text,
+  View
+} from '@ossy/design-system'
+
+const FlowStage = {
+  EnterEmail: 'EnterEmail',
+  Success: 'Success',
+  Error: 'Error'
+}
+
+export const Invite = () => {
+  const router = useRouter()
+  const { inviteUser } = useWorkspace()
+  const [flowStage, setFlowStage] = useState(FlowStage.EnterEmail)
+  const [email, setEmail] = useInputValue('')
+  const formRef = useRef()
+
+  const sendInvite = event => {
+    event.preventDefault()
+    formRef.current.reportValidity() && inviteUser(email)
+      .then(() => setFlowStage(FlowStage.Success))
+      .catch(() => setFlowStage(FlowStage.Error))
+  }
+
+  return (
+    <Switch on={flowStage}>
+
+      <title>Invite user</title>
+
+      <Switch.Case match={[FlowStage.EnterEmail]}>
+        <View gap="m">
+          <Title variant="primary">Invite user</Title>
+          <Text>
+            Invite a user to manage and contribute content to this workspace
+          </Text>
+          <form
+            ref={formRef}
+            onSubmit={sendInvite}
+            style={{ width: '100%', display: 'flex', flexDirection: 'column' }}
+          >
+            <View gap="m">
+
+              <Input
+                id="registerField"
+                className="stack-m"
+                type="email"
+                placeholder="Email address"
+                required
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+              />
+
+              <View gap="m" layout="row" justifyContent="flex-end">
+
+                <Button
+                  variant="link"
+                  id="cancelButton"
+                  href={() => router.back()}>Cancel
+                </Button>
+
+                <Button
+                  variant="cta"
+                  id="registerButton"
+                  type="submit"
+                  onClick={sendInvite}>Send invite
+                </Button>
+              </View>
+            </View>
+          </form>
+        </View>
+      </Switch.Case>
+
+      <Switch.Case match={[FlowStage.Success]}>
+        <Guide
+          title="Success"
+          titleVariant="primary"
+        >
+          <Text>
+            We sent them an invitation over email.
+            When they have accepted they will show up in the list of users.
+            <br/>
+            ✌️
+          </Text>
+        </Guide>
+      </Switch.Case>
+
+      <Switch.Case match={[FlowStage.Error]}>
+        <Text>
+          Something went wrong, try again in a couple of minutes
+        </Text>
+      </Switch.Case>
+
+    </Switch>
+  )
+}

package/src/Invite.page.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+import { Invite } from './Invite.jsx'
+
+export const metadata = {
+  id: 'workspace/invitations/add',
+  path: {
+    sv: '/inbjudningar/lagg-till',
+    en: '/invitations/add',
+  },
+}
+
+export const InvitePage = () => {
+  return (
+    <View layout="off-center-m" style={{ height: '100%' }}>
+      <View slot="content" surface="primary" roundness="m" inset="m">
+        <Invite />
+      </View>
+    </View>
+  )
+}
+
+export default InvitePage

package/src/SelectWorkspacePage.jsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import { useWorkspaces, AsyncStatus } from '@ossy/sdk-react'
+import { Title, Text, Switch, Button, View, Guide, Icon2, Stack } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { AuthenticationGuard } from './AuthenticationGuard.jsx'
+import { patchUserWorkspaceId } from './patchUserWorkspaceId.js'
+
+const PageFlow = {
+  Error: AsyncStatus.Error,
+  Loading: AsyncStatus.Loading,
+  Success: AsyncStatus.Success,
+  NoWorkspacesCreated: 'NoWorkspacesCreated'
+}
+
+export const SelectWorkspacePage = () => {
+  const router = useRouter()
+  const { status: asyncStatus, workspaces } = useWorkspaces()
+
+  const pageFlow = (asyncStatus === AsyncStatus.Success && workspaces.length === 0)
+    ? PageFlow.NoWorkspacesCreated
+    : asyncStatus
+
+  const setWorkspace = workspaceId => {
+    patchUserWorkspaceId(workspaceId).then((res) => {
+      if (!res.ok) return
+      window.location.assign(router.getHref('@home/home'))
+    })
+  }
+
+  return (
+    <AuthenticationGuard>
+
+      <title>Select workspace</title>
+
+      <Switch on={pageFlow}>
+        <Switch.Case match={[PageFlow.Success]}>
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 'var(--space-m)',
+          }}>
+            <Title variant="primary">
+              My workspaces
+            </Title>
+            <Button
+              prefix="math-plus"
+              variant="cta"
+              href={router.getHref('@profile/workspaces/create')}
+              className="mobile:d-none">
+              New workspace
+            </Button>
+          </div>
+        </Switch.Case>
+      </Switch>
+
+      <Switch on={pageFlow}>
+
+        <Switch.Case match={[PageFlow.Error]}>
+          <View layout="off-center" style={{ height: '100%' }}>
+            <Guide
+              slot="content"
+              style={{ width: '100vw', maxWidth: '500px' }}
+              title="We could not load your workspaces"
+              text={`
+                  Something went wrong when loading your workspaces.
+                  Maybe your session have expired, or we messed up somehow.
+                  Try starting over from our home page.
+              `}
+              actions={[{
+                variant: 'cta',
+                href: '/',
+                label: 'Go to our home page'
+              }]}
+            />
+          </View>
+        </Switch.Case>
+
+        <Switch.Case match={[PageFlow.Loading]}>
+          <Icon2
+            slot="content"
+            name="spinner"
+            style={{ width: '64px', height: '64px' }}
+            className="rotate"
+          />
+          <Text>Loading...</Text>
+        </Switch.Case>
+
+        <Switch.Case match={[PageFlow.Success]}>
+          <View gap="m">
+
+            <Text style={{ maxWidth: '400px' }}>
+              Workspaces are separate environments where you can manage resources, templates, services and billing.
+            </Text>
+
+            <Stack gap="xs" style={{ overflowY: 'auto' }}>
+              {workspaces.map(workspace => (
+                <Stack.Item
+                  key={workspace.id}
+                  layout="row"
+                  style={{ alignItems: 'center' }}
+                  gap="m"
+                  inset="m"
+                  roundness="s"
+                  selectable
+                  onClick={() => setWorkspace(workspace.id)}
+                >
+                  <View>
+                    <Text style={{ fontWeight: 'bold' }}>{workspace.name}</Text>
+                    <Text variant="small" as="span">{workspace.id}</Text>
+                  </View>
+                  <div style={{ flexGrow: '1' }} />
+                  <Button prefix="more-vertical-alt" variant="command" style={{ cursor: 'not-allowed' }} />
+                </Stack.Item>
+              ))}
+            </Stack>
+          </View>
+        </Switch.Case>
+
+        <Switch.Case match={[PageFlow.NoWorkspacesCreated]}>
+          <View layout="vertical-top" style={{ flexGrow: '1' }}>
+            <Guide
+              slot="content"
+              style={{ padding: 'var(--space-xl) var(--space-m)', width: '100vw', maxWidth: '500px' }}
+              title="🎉 Let's get the party started 🎉"
+              text={`
+                To get started we need to create a workspace.
+                A workspace is an encapsulation of resources, resource templates,
+                billing information, and what users have access to these things.
+              `}
+              actions={[{
+                variant: 'cta',
+                label: 'Create a workspace',
+                href: router.getHref('@profile/workspaces/create')
+              }]}
+            />
+          </View>
+        </Switch.Case>
+
+      </Switch>
+    </AuthenticationGuard>
+  )
+}

package/src/Users.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { useUsers, AsyncStatus } from '@ossy/sdk-react'
+import { Text, View, Icon2, Title, Button } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+
+export const Users = () => {
+  const router = useRouter()
+  const { users = [], status } = useUsers()
+
+  if (status === AsyncStatus.Loading) return <>Loading</>
+
+  return (
+    <View gap="m">
+
+      <View inset="s" gap="s">
+
+        <View layout="row" justifyContent="space-between" alignItems="center">
+          <Title>Users</Title>
+          <Button variant="cta" href={router.getHref('@workspace/invitations/add')} prefix="user-add">
+            Invite user
+          </Button>
+        </View>
+
+        <Text style={{ maxWidth: '400px' }}>
+          Manage users in your workspace.
+        </Text>
+
+      </View>
+
+      <View gap="xs">
+        {users.map(user => (
+          <View layout="row" roundness="s" alignItems="center" inset="m" gap="m" selectable key={user.id}>
+            <Icon2 name={user.type === 'Bot' ? 'bot' : 'user'} />
+            <View>
+              <View layout="row" gap="s">
+                <Text as="span" style={{ fontWeight: 'bold' }}>{user.firstName}</Text>
+                <Text as="span" style={{ fontWeight: 'bold' }}>{user.lastName}</Text>
+              </View>
+              <Text variant="small" as="span">{user.email}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
+
+    </View>
+  )
+}

package/src/Users.page.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+import { Users } from './Users.jsx'
+
+export const metadata = {
+  id: 'workspace/users',
+  path: {
+    sv: '/anvandare',
+    en: '/users',
+  },
+}
+
+export const UsersPage = () => {
+  return (
+    <View gap="m" surface="primary" style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}>
+      <Users />
+    </View>
+  )
+}
+
+export default UsersPage

package/src/WorkspaceSettings.page.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+import { GeneralSettings } from './GeneralSettings.jsx'
+
+export const metadata = {
+  id: 'workspace/settings',
+  path: {
+    sv: '/installningar',
+    en: '/settings',
+  },
+}
+
+export const WorkspaceSettingsPage = () => {
+  return (
+    <View layout="off-center-m" style={{ height: '100%' }}>
+      <View slot="content" surface="primary" roundness="m" inset="m">
+        <GeneralSettings />
+      </View>
+    </View>
+  )
+}
+
+export default WorkspaceSettingsPage

package/src/index.js

@@ -0,0 +1,9 @@
+export { CreateWorkspacePage } from './CreateWorkspacePage.jsx'
+export { SelectWorkspacePage } from './SelectWorkspacePage.jsx'
+export { GeneralSettings } from './GeneralSettings.jsx'
+export { Invitations } from './Invitations.jsx'
+export { Invite } from './Invite.jsx'
+export { Users } from './Users.jsx'
+export { AuthenticationGuard } from './AuthenticationGuard.jsx'
+export { patchUserWorkspaceId } from './patchUserWorkspaceId.js'
+export { Definition } from './Definition.js'

package/src/patchUserWorkspaceId.js

@@ -0,0 +1,14 @@
+function patchUserAppSettings(partial) {
+  return fetch('/@ossy/users/me/app-settings', {
+    method: 'PATCH',
+    body: JSON.stringify(partial),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'same-origin',
+  })
+}
+
+export function patchUserWorkspaceId(workspaceId) {
+  return patchUserAppSettings({ workspaceId })
+}