@ossy/connected-components 0.9.1 → 0.10.1

package/README.md

@@ -0,0 +1,66 @@
+# @ossy/connected-components
+
+CMS-connected React components for the Ossy Ecosystem. The `App` component provides routing, theming, workspace context, and SDK integration in a single wrapper.
+
+## Installation
+
+```bash
+npm install @ossy/connected-components @ossy/design-system @ossy/themes @ossy/router-react @ossy/sdk @ossy/sdk-react
+```
+
+## When to use
+
+- **@ossy/cli** — Fastest path: run `npx @ossy/cli dev` with `src/*.page.jsx` and `src/config.js`
+- **@ossy/connected-components** — Custom setups (Next.js, Vite, Remix): use the `App` component with your own bundler and server
+
+## Quick start
+
+```jsx
+import { App } from '@ossy/connected-components'
+import { CloudLight } from '@ossy/themes'
+
+export default () => (
+  <App
+    workspaceId="your-workspace-id"
+    theme={CloudLight}
+    pages={[
+      { id: 'home', path: '/', element: <HomePage /> },
+      { id: 'about', path: '/about', element: <AboutPage /> },
+    ]}
+  />
+)
+```
+
+## Configuration
+
+| Prop | Description |
+|------|-------------|
+| `workspaceId` | Your workspace identifier |
+| `theme` | Theme object (e.g. `CloudLight`, `CloudDark`) |
+| `themes` | Multiple themes for switching via `useTheme` |
+| `pages` | Array of `{ id, path, element }` page configs |
+| `apiUrl` | Optional API base URL |
+| `devMode` | Enables theme editor when `true` |
+
+## Documentation
+
+See **App — Getting Started** in Storybook for detailed setup with `@ossy/cli` and custom bundlers:
+
+```bash
+npm start
+```
+
+## Peer dependencies
+
+- `react` >=19.0.0
+- `@ossy/design-system` >=0.5.0
+- `@ossy/pages` >=0.5.0
+- `@ossy/router` >=0.5.0
+- `@ossy/router-react` >=0.5.0
+- `@ossy/sdk` >=0.5.0
+- `@ossy/sdk-react` >=0.5.0
+- `@ossy/themes` >=0.5.0
+
+## License
+
+MIT

package/build/index.js

@@ -3,7 +3,17 @@ import { SDK } from '@ossy/sdk';
 import { useResource, WorkspaceProvider, AsyncStatus, useQuery, useResources } from '@ossy/sdk-react';
 import { Overlay, View, Button, Text, useTheme, Theme, useDocumentTitle, Switch } from '@ossy/design-system';
 import { Router } from '@ossy/router-react';
-import { Resume as Resume$1 } from '@ossy/design-system-extras';
+import { Resume as Resume$1 } from '@ossy/pages';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 
 function defaultAppSettings() {
   return {
@@ -13,6 +23,7 @@ function defaultAppSettings() {
     theme: undefined,
     themes: undefined,
     routes: [],
+    pages: [],
     initialEntries: [],
     initialIndex: 0,
     router: 'browser',
@@ -154,11 +165,25 @@ const ThemeEditor = () => {
   }));
 };
 
+function routesToPages(routes) {
+  if (!routes?.length) return [];
+  return routes.map((route, i) => {
+    const path = typeof route.path === 'string' ? route.path : route.path?.en ?? '/';
+    const id = route.id ?? (path === '/' ? 'home' : path.replace(/^\//, '').replace(/\/$/, '').replace(/\//g, '-') || `page-${i}`);
+    return {
+      id,
+      path: route.path,
+      element: route.element,
+      render: route.render ?? (() => route.element)
+    };
+  });
+}
 const App = _appSettings => {
   const appSettings = {
     ...defaultAppSettings(),
     ..._appSettings
   };
+  const pages = appSettings.pages?.length ? appSettings.pages : routesToPages(appSettings.routes);
   const sdk = SDK.of({
     apiUrl: appSettings.apiUrl,
     workspaceId: appSettings.workspaceId
@@ -170,19 +195,11 @@ const App = _appSettings => {
     themes: appSettings.themes
   }, /*#__PURE__*/React$1.createElement(WorkspaceProvider, {
     sdk: sdk
-  }, /*#__PURE__*/React$1.createElement(Router, appSettings), appSettings.devMode && /*#__PURE__*/React$1.createElement(ThemeEditor, null))));
+  }, /*#__PURE__*/React$1.createElement(Router, _extends({}, appSettings, {
+    pages: pages
+  })), appSettings.devMode && /*#__PURE__*/React$1.createElement(ThemeEditor, null))));
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
 const Layout = ({
   layoutId,
   ...props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/connected-components",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ossy-se/packages.git"
@@ -12,9 +12,7 @@
   "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "test": "",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "test": ""
   },
   "browserslist": {
     "production": [
@@ -42,7 +40,7 @@
   },
   "peerDependencies": {
     "@ossy/design-system": ">=0.5.0 <1.0.0",
-    "@ossy/design-system-extras": ">=0.5.0 <1.0.0",
+    "@ossy/pages": ">=0.5.0 <1.0.0",
     "@ossy/router": ">=0.5.0 <1.0.0",
     "@ossy/router-react": ">=0.5.0 <1.0.0",
     "@ossy/sdk": ">=0.5.0 <1.0.0",
@@ -58,5 +56,5 @@
     "/build",
     "README.md"
   ],
-  "gitHead": "009330a43cf08e0cab806434b5f654401924af95"
+  "gitHead": "fa8cbcb5f24811e6844c929d7fa7cd1d2544efa7"
 }