@sqlrooms/room-shell 0.26.0-rc.5 → 0.26.0

package/README.md

@@ -43,57 +43,47 @@ The room-shell package uses Zustand for state management. You can create a custo
 import {
   createRoomShellSlice,
   createRoomStore,
-  RoomState,
-  BaseRoomConfig,
+  RoomShellSliceState,
 } from '@sqlrooms/room-shell';
-import {z} from 'zod';
-
-// Define your custom config schema (optional)
-const MyRoomConfig = BaseRoomConfig.extend({
-  myCustomSetting: z.string().default('default value'),
-});
-type MyRoomConfig = z.infer<typeof MyRoomConfig>;
 
 // Define your custom app state
-type MyRoomState = RoomState<MyRoomConfig> & {
+type MyRoomState = RoomShellSliceState & {
   myFeatureData: any[];
   addItem: (item: any) => void;
   removeItem: (id: string) => void;
 };
 
 // Create a room store with custom state
-export const {roomStore, useRoomStore} = createRoomStore<
-  MyRoomConfig,
-  MyRoomState
->((set, get, store) => ({
-  // Base room slice with initial configuration
-  ...createRoomShellSlice<MyRoomConfig>({
-    config: {
-      title: 'My Room',
-      layout: {
-        /* layout configuration */
+export const {roomStore, useRoomStore} = createRoomStore<MyRoomState>(
+  (set, get, store) => ({
+    // Base room slice with initial configuration
+    ...createRoomShellSlice({
+      config: {
+        title: 'My Room',
+        dataSources: [],
       },
-      dataSources: [],
-      myCustomSetting: 'custom value',
-    },
-    room: {
-      panels: {
-        /* panel definitions */
+      layout: {
+        config: {
+          /* layout configuration */
+        },
+        panels: {
+          /* panel definitions */
+        },
       },
-    },
-  })(set, get, store),
-
-  // Custom state and actions
-  myFeatureData: [],
-  addItem: (item) =>
-    set((state) => ({
-      myFeatureData: [...state.myFeatureData, item],
-    })),
-  removeItem: (id) =>
-    set((state) => ({
-      myFeatureData: state.myFeatureData.filter((item) => item.id !== id),
-    })),
-}));
+    })(set, get, store),
+
+    // Custom state and actions
+    myFeatureData: [],
+    addItem: (item) =>
+      set((state) => ({
+        myFeatureData: [...state.myFeatureData, item],
+      })),
+    removeItem: (id) =>
+      set((state) => ({
+        myFeatureData: state.myFeatureData.filter((item) => item.id !== id),
+      })),
+  }),
+);
 
 // Use the store in a component with selector for better performance
 function MyComponent() {
@@ -122,41 +112,33 @@ import {persist} from 'zustand/middleware';
 import {
   createRoomShellSlice,
   createRoomStore,
-  RoomState,
+  RoomShellSliceState,
   BaseRoomConfig,
+  LayoutConfig,
+  createPersistHelpers,
+  StateCreator,
 } from '@sqlrooms/room-shell';
-import {z} from 'zod';
-
-// Define your custom config schema
-const MyRoomConfig = BaseRoomConfig.extend({
-  myCustomSetting: z.string().default('default value'),
-});
-type MyRoomConfig = z.infer<typeof MyRoomConfig>;
 
 // Define your custom app state
-type MyRoomState = RoomState<MyRoomConfig> & {
+type MyRoomState = RoomShellSliceState & {
   myFeatureData: any[];
   addItem: (item: any) => void;
 };
 
 // Create a store with persistence
-export const {roomStore, useRoomStore} = createRoomStore<
-  MyRoomConfig,
-  MyRoomState
->(
+export const {roomStore, useRoomStore} = createRoomStore<MyRoomState>(
   persist(
     (set, get, store) => ({
       // Base room slice
-      ...createRoomShellSlice<MyRoomConfig>({
+      ...createRoomShellSlice({
         config: {
           title: 'My Room',
-          layout: {
-            /* layout configuration */
-          },
           dataSources: [],
-          myCustomSetting: 'custom value',
         },
-        room: {
+        layout: {
+          config: {
+            /* layout configuration */
+          },
           panels: {
             /* panel definitions */
           },
@@ -172,12 +154,13 @@ export const {roomStore, useRoomStore} = createRoomStore<
     }),
     {
       name: 'my-room-storage',
-      partialize: (state) => ({
-        // Persist only the config part of the state
-        config: state.config,
+      // Use helper to persist configuration
+      ...createPersistHelpers({
+        room: BaseRoomConfig,
+        layout: LayoutConfig,
       }),
     },
-  ),
+  ) as StateCreator<MyRoomState>,
 );
 ```
 
@@ -189,7 +172,7 @@ For larger applications, you can organize your state into feature slices:
 import {
   createRoomShellSlice,
   createRoomStore,
-  RoomState,
+  RoomShellSliceState,
 } from '@sqlrooms/room-shell';
 import {createMyFeatureSlice, MyFeatureState} from './myFeatureSlice';
 import {
@@ -198,32 +181,34 @@ import {
 } from './anotherFeatureSlice';
 
 // Combined app state type
-type RoomState = RoomState<MyRoomConfig> & MyFeatureState & AnotherFeatureState;
+type MyRoomState = RoomShellSliceState & MyFeatureState & AnotherFeatureState;
 
 // Create a store with multiple slices
-export const {roomStore, useRoomStore} = createRoomStore<
-  MyRoomConfig,
-  RoomState
->((set, get, store) => ({
-  // Base room slice
-  ...createRoomShellSlice<MyRoomConfig>({
-    config: {
-      /* initial config */
-    },
-    room: {
-      panels: {
-        /* panel definitions */
+export const {roomStore, useRoomStore} = createRoomStore<MyRoomState>(
+  (set, get, store) => ({
+    // Base room slice
+    ...createRoomShellSlice({
+      config: {
+        /* initial config */
       },
-    },
-  })(set, get, store),
-
-  // Feature slices
-  ...createMyFeatureSlice()(set, get, store),
-  ...createAnotherFeatureSlice({
-    // Feature-specific options
-    customOption: 'value',
-  })(set, get, store),
-}));
+      layout: {
+        config: {
+          /* layout configuration */
+        },
+        panels: {
+          /* panel definitions */
+        },
+      },
+    })(set, get, store),
+
+    // Feature slices
+    ...createMyFeatureSlice()(set, get, store),
+    ...createAnotherFeatureSlice({
+      // Feature-specific options
+      customOption: 'value',
+    })(set, get, store),
+  }),
+);
 ```
 
 ### Managing Data Sources
@@ -295,12 +280,12 @@ The RoomStore is the core of the room-shell package. It provides a comprehensive
 
 ### State Properties
 
-#### `config`
+#### `room.config`
 
 The room configuration, which can be persisted between sessions.
 
 ```tsx
-const config = useRoomStore((state) => state.config);
+const config = useRoomStore((state) => state.room.config);
 console.log(config.title); // Access room title
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/room-shell",
-  "version": "0.26.0-rc.5",
+  "version": "0.26.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -25,14 +25,14 @@
     "typedoc": "typedoc"
   },
   "dependencies": {
-    "@sqlrooms/data-table": "0.26.0-rc.5",
-    "@sqlrooms/duckdb": "0.26.0-rc.5",
-    "@sqlrooms/layout": "0.26.0-rc.5",
-    "@sqlrooms/layout-config": "0.26.0-rc.5",
-    "@sqlrooms/room-config": "0.26.0-rc.5",
-    "@sqlrooms/room-store": "0.26.0-rc.5",
-    "@sqlrooms/ui": "0.26.0-rc.5",
-    "@sqlrooms/utils": "0.26.0-rc.5",
+    "@sqlrooms/data-table": "0.26.0",
+    "@sqlrooms/duckdb": "0.26.0",
+    "@sqlrooms/layout": "0.26.0",
+    "@sqlrooms/layout-config": "0.26.0",
+    "@sqlrooms/room-config": "0.26.0",
+    "@sqlrooms/room-store": "0.26.0",
+    "@sqlrooms/ui": "0.26.0",
+    "@sqlrooms/utils": "0.26.0",
     "apache-arrow": "17.0.0",
     "immer": "^10.1.3",
     "lucide-react": "^0.544.0",
@@ -44,5 +44,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "dc1c3b765718c8748aa11cce3cc83f907d3e5963"
+  "gitHead": "3376e76ddfa3c54097b79a20b88a1c37814dca61"
 }

package/dist/RoomBuilder.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const RoomShell: React.FC;
-//# sourceMappingURL=RoomBuilder.d.ts.map

package/dist/RoomBuilder.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RoomBuilder.d.ts","sourceRoot":"","sources":["../src/RoomBuilder.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAI5D,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EA8D7B,CAAC"}

package/dist/RoomBuilder.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ProgressModal, SpinnerPane } from '@sqlrooms/ui';
-import { MosaicLayout, getVisibleMosaicLayoutPanels } from '@sqlrooms/layout';
-import { Suspense, useCallback, useMemo } from 'react';
-import { useBaseRoomShellStore } from './RoomShellSlice';
-export const RoomShell = () => {
-    const layout = useBaseRoomShellStore((state) => state.layout.config);
-    const setLayout = useBaseRoomShellStore((state) => state.layout.setLayout);
-    const panels = useBaseRoomShellStore((state) => state.layout.panels);
-    const loadingProgress = useBaseRoomShellStore((state) => state.room.getLoadingProgress());
-    const ErrorBoundary = useBaseRoomShellStore((state) => state.room.CustomErrorBoundary);
-    const visibleRoomPanels = useMemo(() => getVisibleMosaicLayoutPanels(layout?.nodes), [layout]);
-    const handleLayoutChange = useCallback((nodes) => {
-        // Keep layout properties, e.g. 'pinned' and 'fixed'
-        setLayout({ ...layout, nodes });
-    }, [setLayout, layout]);
-    const renderedPanels = useMemo(() => {
-        return Array.from(visibleRoomPanels).reduce((acc, id) => {
-            const PanelComp = panels[id]?.component;
-            if (PanelComp) {
-                acc.set(id, _jsx(ErrorBoundary, { children: _jsx(PanelComp, {}) }));
-            }
-            return acc;
-        }, new Map());
-    }, [ErrorBoundary, panels, visibleRoomPanels]);
-    return (_jsx(ErrorBoundary, { children: _jsxs(Suspense, { fallback: _jsx(SpinnerPane, { h: "100%" }), children: [_jsx("div", { className: "flex h-full w-full flex-grow flex-col items-stretch px-0 pb-0", children: layout ? (_jsx(MosaicLayout, { renderTile: (id) => _jsx(_Fragment, { children: renderedPanels.get(id) }), value: layout.nodes, onChange: handleLayoutChange })) : null }), _jsx(ProgressModal, { isOpen: loadingProgress !== undefined, title: "Loading", loadingStage: loadingProgress?.message, indeterminate: true })] }) }));
-};
-//# sourceMappingURL=RoomBuilder.js.map

package/dist/RoomBuilder.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RoomBuilder.js","sourceRoot":"","sources":["../src/RoomBuilder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,cAAc,CAAC;AACxD,OAAO,EAAC,YAAY,EAAE,4BAA4B,EAAC,MAAM,kBAAkB,CAAC;AAC5E,OAAc,EAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAa,GAAG,EAAE;IACtC,MAAM,MAAM,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3E,MAAM,MAAM,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACrE,MAAM,eAAe,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CACtD,KAAK,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAChC,CAAC;IACF,MAAM,aAAa,GAAG,qBAAqB,CACzC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAC1C,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,4BAA4B,CAAC,MAAM,EAAE,KAAK,CAAC,EACjD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAAgC,EAAE,EAAE;QACnC,oDAAoD;QACpD,SAAS,CAAC,EAAC,GAAG,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,SAAS,EAAE,MAAM,CAAC,CACpB,CAAC;IAEF,MAAM,cAAc,GAAiC,OAAO,CAAC,GAAG,EAAE;QAChE,OAAO,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAU,EAAE,EAAE;YAC9D,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC;YACxC,IAAI,SAAS,EAAE,CAAC;gBACd,GAAG,CAAC,GAAG,CACL,EAAE,EACF,KAAC,aAAa,cACZ,KAAC,SAAS,KAAG,GACC,CACjB,CAAC;YACJ,CAAC;YACD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,IAAI,GAAG,EAA2B,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,KAAC,aAAa,cACZ,MAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,IAAC,CAAC,EAAC,MAAM,GAAG,aAC1C,cAAK,SAAS,EAAC,+DAA+D,YAC3E,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,YAAY,IACX,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,4BAAG,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,GAAI,EACjD,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,kBAAkB,GAC5B,CACH,CAAC,CAAC,CAAC,IAAI,GACJ,EAEN,KAAC,aAAa,IACZ,MAAM,EAAE,eAAe,KAAK,SAAS,EACrC,KAAK,EAAC,SAAS,EACf,YAAY,EAAE,eAAe,EAAE,OAAO,EACtC,aAAa,EAAE,IAAI,GAEnB,IACO,GACG,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {ProgressModal, SpinnerPane} from '@sqlrooms/ui';\nimport {MosaicLayout, getVisibleMosaicLayoutPanels} from '@sqlrooms/layout';\nimport React, {Suspense, useCallback, useMemo} from 'react';\nimport type {MosaicNode} from 'react-mosaic-component';\nimport {useBaseRoomShellStore} from './RoomShellSlice';\n\nexport const RoomShell: React.FC = () => {\n  const layout = useBaseRoomShellStore((state) => state.layout.config);\n  const setLayout = useBaseRoomShellStore((state) => state.layout.setLayout);\n  const panels = useBaseRoomShellStore((state) => state.layout.panels);\n  const loadingProgress = useBaseRoomShellStore((state) =>\n    state.room.getLoadingProgress(),\n  );\n  const ErrorBoundary = useBaseRoomShellStore(\n    (state) => state.room.CustomErrorBoundary,\n  );\n\n  const visibleRoomPanels = useMemo(\n    () => getVisibleMosaicLayoutPanels(layout?.nodes),\n    [layout],\n  );\n\n  const handleLayoutChange = useCallback(\n    (nodes: MosaicNode<string> | null) => {\n      // Keep layout properties, e.g. 'pinned' and 'fixed'\n      setLayout({...layout, nodes});\n    },\n    [setLayout, layout],\n  );\n\n  const renderedPanels: Map<string, React.ReactNode> = useMemo(() => {\n    return Array.from(visibleRoomPanels).reduce((acc, id: string) => {\n      const PanelComp = panels[id]?.component;\n      if (PanelComp) {\n        acc.set(\n          id,\n          <ErrorBoundary>\n            <PanelComp />\n          </ErrorBoundary>,\n        );\n      }\n      return acc;\n    }, new Map<string, React.ReactNode>());\n  }, [ErrorBoundary, panels, visibleRoomPanels]);\n\n  return (\n    <ErrorBoundary>\n      <Suspense fallback={<SpinnerPane h=\"100%\" />}>\n        <div className=\"flex h-full w-full flex-grow flex-col items-stretch px-0 pb-0\">\n          {layout ? (\n            <MosaicLayout\n              renderTile={(id) => <>{renderedPanels.get(id)}</>}\n              value={layout.nodes}\n              onChange={handleLayoutChange}\n            />\n          ) : null}\n        </div>\n\n        <ProgressModal\n          isOpen={loadingProgress !== undefined}\n          title=\"Loading\"\n          loadingStage={loadingProgress?.message}\n          indeterminate={true}\n          // progress={loadingProgress?.progress}\n        />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n"]}