@ossy/app 1.30.1 → 1.31.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ossy/app",
-  "version": "1.30.1",
+  "version": "1.31.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
+    "./shell": "./src/shell/index.js",
     "./runtime/page-runtime": "./runtime/page-runtime.js",
     "./runtime/api-runtime": "./runtime/api-runtime.js",
     "./runtime/task-runtime": "./runtime/task-runtime.js"
@@ -37,15 +38,14 @@
     "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@ossy/connected-components": "^1.30.1",
-    "@ossy/design-system": "^1.30.1",
+    "@ossy/design-system": "^1.31.0",
     "@ossy/pages": "^1.23.0",
-    "@ossy/platform": "^1.29.1",
-    "@ossy/router": "^1.30.1",
-    "@ossy/router-react": "^1.30.1",
-    "@ossy/sdk": "^1.30.1",
-    "@ossy/sdk-react": "^1.30.1",
-    "@ossy/themes": "^1.30.1",
+    "@ossy/platform": "^1.30.0",
+    "@ossy/router": "^1.31.0",
+    "@ossy/router-react": "^1.31.0",
+    "@ossy/sdk": "^1.31.0",
+    "@ossy/sdk-react": "^1.31.0",
+    "@ossy/themes": "^1.31.0",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -79,5 +79,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "70107405331f17c62943e54a9a5e18925635e6fc"
+  "gitHead": "ccbb5575213d2703e3cad5608b85c3478fc421bc"
 }

package/runtime/page-runtime.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react'
-import { App } from '@ossy/connected-components'
+import { App } from '../src/shell/App.jsx'
 
 /**
  * Dynamically imports each component bundle listed in `entries` and returns a

package/src/shell/App.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { SDK } from '@ossy/sdk'
+import { WorkspaceProvider } from '@ossy/sdk-react'
+import { Theme, ComponentSlotsProvider } from '@ossy/design-system'
+import { ThemeEditor } from './ThemeEditor.jsx'
+import { defaultAppSettings } from './AppSettings.jsx'
+import { Router } from '@ossy/router-react'
+import { AppContext } from './AppContext.js'
+
+export const App = ({ children, ..._appSettings }) => {
+  const appSettings = { ...defaultAppSettings(), ..._appSettings }
+
+  // `components` holds resolved ComponentType values — not JSON-serializable,
+  // so we keep them out of AppContext and provide them via ComponentSlotsProvider.
+  const { components, ...contextSettings } = appSettings
+
+  const sdk = SDK.of({
+    apiUrl: appSettings.apiUrl,
+    workspaceId: appSettings.workspaceId
+  })
+
+  return (
+    <AppContext.Provider value={contextSettings}>
+      <ComponentSlotsProvider slots={components || {}}>
+        <Theme theme={appSettings.theme} themes={appSettings.themes}>
+          <WorkspaceProvider sdk={sdk}>
+            <Router {...appSettings} pages={appSettings.pages || []}>
+              {children}
+            </Router>
+            {appSettings.devMode && <ThemeEditor />}
+          </WorkspaceProvider>
+        </Theme>
+      </ComponentSlotsProvider>
+    </AppContext.Provider>
+  )
+}

package/src/shell/AppContext.js

@@ -0,0 +1,5 @@
+import React, { createContext } from 'react'
+import { defaultAppSettings } from './AppSettings.jsx'
+export const AppContext = createContext(defaultAppSettings())
+export const useApp = () => React.useContext(AppContext)
+export const useAppSettings = () => React.useContext(AppContext)

package/src/shell/AppSettings.jsx

@@ -0,0 +1,29 @@
+
+export function defaultAppSettings() {
+    return {
+      workspaceId: undefined,
+      defaultLanguage: undefined,
+      supportedLanguages: [],
+      theme: undefined,
+      themes: undefined,
+      routes: [],
+      pages: [],
+      initialEntries: [],
+      initialIndex: 0,
+      router: 'browser',
+      gaId: undefined,
+      apiUrl: undefined,
+      devMode: false,
+      /** Site / app label (e.g. chrome); not wired to `<title>` — pages own document title. */
+      documentTitle: undefined,
+      title: undefined,
+      metaDescription: undefined,
+      themeColor: undefined,
+      /** `<html lang>`; falls back to `defaultLanguage` then `en`. */
+      htmlLang: undefined,
+      /** Favicon URL; default `/favicon.ico`. Use `null` or `false` to omit. */
+      faviconHref: undefined,
+      /** When true, main app sidebar is collapsed to icons (from server cookie / app-settings). */
+      sidebarPrimaryCollapsed: false,
+    }
+  }

package/src/shell/ThemeEditor.jsx

@@ -0,0 +1,146 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import { useResource } from '@ossy/sdk-react'
+import { Overlay, Button, useTheme, View, Text } from '@ossy/design-system'
+import { useApp } from './AppContext.js'
+
+const overlayStyles = {
+  background: 'transparent',
+  display: 'content',
+  pointerEvents: 'none'
+}
+
+const blobStyles = {
+  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
+  borderRadius: '999px',
+  position: 'absolute',
+  right: 'var(--space-m)',
+  bottom: 'var(--space-m)',
+  cursor: 'pointer',
+  transition: 'transform .5s',
+  pointerEvents: 'auto',
+  padding: 'var(--space-m)'
+}
+
+const editorContainerStyles = {
+  position: 'absolute',
+  right: '0',
+  top: '0',
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'stretch',
+  padding: '8px 32px'
+}
+
+const editorStyles = {
+  width: '100%',
+  maxWidth: '350px',
+  height: '100%',
+  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
+  padding: '16px 16px 76px 16px',
+  overflowX: 'none',
+  overflowY: 'auto',
+  pointerEvents: 'auto'
+}
+
+const ThemeSwitcher = () => {
+  const { activeTheme, setTheme, themes } = useTheme()
+  return (
+    <View gap="s">
+      <Text>Theme</Text>
+      <View layout="row-wrap" gap="s">
+        {
+          themes.map(themeName => <Button variant={themeName === activeTheme ? 'tag-active' : 'tag'} onClick={() => setTheme(themeName)}>{themeName}</Button>)
+        }
+      </View>
+    </View>
+  )
+}
+
+export const ThemeEditor = () => {
+  const app = useApp()
+  const { updateResourceContent } = useResource('PCX53TaGviq4_8KvK-VOp')
+  const [isEditorOpen, setIsEditorOpen] = useState(false)
+  const [viewCount, setViewCount] = useState(0)
+  // const [theme, temporarilyUpdateTheme] = useTheme()
+  const theme = {}
+  const temporarilyUpdateTheme = () => {}
+  
+  const toggleStyles = useMemo(() => !isEditorOpen
+    ? blobStyles
+    : { ...blobStyles, transform: 'rotate(-45deg)' }, [isEditorOpen])
+
+  const onToggle = useCallback(() => {
+    setIsEditorOpen(!isEditorOpen)
+  }, [isEditorOpen, setIsEditorOpen])
+
+  const onThemeChange = (event) => {
+
+    const name = event.target.dataset.name
+    const updatedValue = event.target.value
+
+    if (!name) return
+    if (!updatedValue) return
+
+    temporarilyUpdateTheme(theme => ({
+      ...theme,
+      [name]: updatedValue
+    }))
+
+  }
+
+  const onSaveTheme = event => {
+    event.preventDefault()
+    updateResourceContent(theme)
+  }
+
+  useEffect(() => {
+    if (!isEditorOpen) return
+    const views = document.querySelectorAll('[data-view]')
+    // views.forEach(view => view.style.border = '1px solid red')
+    setViewCount(views.length)
+  }, [isEditorOpen])
+
+  return (
+    <Overlay isVisible={true} style={overlayStyles}>
+
+      {
+        isEditorOpen && (
+          <div style={editorContainerStyles}>
+            <View surface="primary" roundness="m" gap="m" style={editorStyles}>
+              <View as="form" gap="s" onSubmit={onSaveTheme} onChange={onThemeChange}>
+                {Object.entries(theme).map(([name, value]) => (
+                  <div style={{ marginBottom: '16px' }}>
+                    <label style={{ display: 'block', fontFamily: 'sans-serif', marginBottom: '4px', fontWeight: 'bold' }}>{name}</label>
+                    <input value={value} data-name={name} style={{ width: '100%', padding: '4px' }}/>
+                  </div>
+                ))}
+                <Button type="submit" variant="cta">
+                  Save
+                </Button>
+              </View>
+              <ThemeSwitcher/>
+              <Text>Views: {viewCount}</Text>
+            </View>
+            <View>
+
+              <View>
+                Pages: {app?.pages?.length || 0}
+              </View>
+
+              <View>
+                {(app?.pages || []).map(page => (
+                  <Button>{page.id}</Button>
+                ))}
+              </View>
+            </View>
+          </div>
+        )
+      }
+
+      <Button variant="cta" prefix="math-plus" style={toggleStyles} onClick={onToggle} />
+
+    </Overlay>
+  )
+}

package/src/shell/index.js

@@ -0,0 +1,4 @@
+export * from './App.jsx'
+export * from './AppSettings.jsx'
+export { useApp, useAppSettings, AppContext } from './AppContext.js'
+export * from './ThemeEditor.jsx'