#1417 user settings persistence

vuu-ui/packages/vuu-layout/package.json

@@ -19,7 +19,6 @@
     "@salt-ds/core": "1.27.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@finos/vuu-data-types": "0.0.26",
     "@finos/vuu-filters": "0.0.26",
     "@finos/vuu-popups": "0.0.26",
     "@finos/vuu-table": "0.0.26",

vuu-ui/packages/vuu-layout/src/drag-drop/BoxModel.ts

@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
-import { boxContainsPoint, isContainer } from "@finos/vuu-utils";
-import { LayoutModel } from "../layout-reducer";
+import { boxContainsPoint, isContainer, LayoutModel } from "@finos/vuu-utils";
 import { getProps, typeOf } from "../utils";
 import { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
 

vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts

@@ -1,6 +1,5 @@
-import { rect } from "@finos/vuu-utils";
+import { LayoutModel, rect } from "@finos/vuu-utils";
 import { ReactElement } from "react";
-import { LayoutModel } from "../layout-reducer";
 import { findTarget, followPath, getProps } from "../utils";
 import { BoxModel, Measurements } from "./BoxModel";
 import { DragDropRect } from "./dragDropTypes";

vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts

@@ -1,5 +1,4 @@
-import { rect, rectTuple } from "@finos/vuu-utils";
-import { LayoutModel } from "../layout-reducer";
+import { LayoutModel, rect, rectTuple } from "@finos/vuu-utils";
 import { getProps, typeOf } from "../utils";
 import {
   BoxModel,

vuu-ui/packages/vuu-layout/src/layout-provider/LayoutProvider.tsx

@@ -1,3 +1,4 @@
+import type { LayoutJSON } from "@finos/vuu-utils";
 import {
   MutableRefObject,
   ReactElement,
@@ -16,7 +17,6 @@ import {
   processLayoutElement,
   type LayoutChangeHandler,
   type LayoutChangeReason,
-  type LayoutJSON,
   type LayoutReducerAction,
 } from "../layout-reducer";
 import type { SaveAction } from "../layout-view";

vuu-ui/packages/vuu-layout/src/layout-reducer/insert-layout-element.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { rectTuple, uuid } from "@finos/vuu-utils";
+import { LayoutModel, rectTuple, uuid } from "@finos/vuu-utils";
 import React, { ReactElement } from "react";
 import { DropPos } from "../drag-drop";
 import { DropTarget } from "../drag-drop/DropTarget";
@@ -12,11 +12,10 @@ import {
   getIntrinsicSize,
   wrapIntrinsicSizeComponentWithFlexbox,
 } from "./flexUtils";
-import { LayoutModel } from "./layoutTypes";
 import {
+  LayoutProps,
   getDefaultTabLabel,
   getManagedDimension,
-  LayoutProps,
 } from "./layoutUtils";
 
 type insertionPosition = "before" | "after";

vuu-ui/packages/vuu-layout/src/layout-reducer/layoutTypes.ts

@@ -1,59 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { NamedFilter } from "@finos/vuu-filter-types";
-import { CSSProperties, ReactElement } from "react";
+import { LayoutJSON } from "@finos/vuu-utils";
+import { ReactElement } from "react";
 import { DragDropRect, DragInstructions } from "../drag-drop";
 import { DropTarget } from "../drag-drop/DropTarget";
 
-export interface WithProps {
-  props?: { [key: string]: any };
-}
-
-export interface WithType {
-  props?: any;
-  title?: string;
-  type: string;
-}
-
-export interface LayoutRoot extends WithProps {
-  active?: number;
-  children?: ReactElement[];
-  type: string;
-}
-
-export type ValueOf<T> = T[keyof T];
-export interface ApplicationSettings {
-  leftNav?: {
-    activeTabIndex: number;
-    expanded: boolean;
-  };
-  /**
-   * filters are keyed by MODULE:tablename
-   */
-  filters?: { [key: string]: NamedFilter[] };
-}
-export type ApplicationSetting = ValueOf<ApplicationSettings>;
-
-export interface ApplicationJSON {
-  layout: LayoutJSON;
-  settings?: ApplicationSettings;
-}
-
-export interface LayoutJSON extends WithType {
-  active?: number;
-  children?: LayoutJSON[];
-  id?: string;
-  props?: { [key: string]: any };
-  state?: any;
-  type: string;
-  style?: CSSProperties;
-}
-
-export interface WithActive {
-  active?: number;
-}
-
-export type LayoutModel = LayoutRoot | ReactElement | WithType;
-
 export type layoutType = "Flexbox" | "View" | "DraggableLayout" | "Stack";
 
 // TODO duplicated in layout-action

vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts

@@ -1,19 +1,21 @@
 import {
+  LayoutJSON,
+  LayoutModel,
   dimension,
   getLayoutComponent,
   isContainer,
   isLayoutComponent,
   uuid,
 } from "@finos/vuu-utils";
-import React, { cloneElement, CSSProperties, ReactElement } from "react";
+import React, { CSSProperties, ReactElement, cloneElement } from "react";
 import { TabLabelFactory } from "../stack";
 import {
   getPersistentState,
   hasPersistentState,
   setPersistentState,
 } from "../use-persistent-state";
 import { expandFlex, followPathToParent, getProps, typeOf } from "../utils";
-import { LayoutJSON, LayoutModel, layoutType } from "./layoutTypes";
+import { layoutType } from "./layoutTypes";
 
 interface ComponentWithId {
   id: string;

vuu-ui/packages/vuu-layout/src/layout-reducer/wrap-layout-element.ts

@@ -1,5 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { getLayoutComponent, rectTuple, uuid } from "@finos/vuu-utils";
+import {
+  getLayoutComponent,
+  LayoutModel,
+  rectTuple,
+  uuid,
+} from "@finos/vuu-utils";
 import React, { ReactElement } from "react";
 import { DropPos } from "../drag-drop/dragDropTypes";
 import { DropTarget } from "../drag-drop/DropTarget";
@@ -12,7 +17,6 @@ import {
   getIntrinsicSize,
   wrapIntrinsicSizeComponentWithFlexbox,
 } from "./flexUtils";
-import { LayoutModel } from "./layoutTypes";
 import { applyLayoutProps, LayoutProps } from "./layoutUtils";
 
 export interface LayoutSpec {

vuu-ui/packages/vuu-layout/src/layout-view/useViewBroadcastChannel.ts

@@ -1,4 +1,4 @@
-import { VuuBroadcastChannel } from "packages/vuu-utils/src";
+import { VuuBroadcastChannel } from "@finos/vuu-utils";
 import { RefObject, useCallback, useEffect, useRef } from "react";
 
 export interface ViewBroadcastMessage {

vuu-ui/packages/vuu-layout/src/utils/pathUtils.ts

@@ -1,6 +1,10 @@
-import { isContainer } from "@finos/vuu-utils";
+import {
+  isContainer,
+  LayoutJSON,
+  LayoutModel,
+  WithActive,
+} from "@finos/vuu-utils";
 import React, { isValidElement, ReactElement } from "react";
-import { LayoutJSON, LayoutModel, WithActive } from "../layout-reducer";
 import { getProp, getProps } from "./propUtils";
 import { typeOf } from "./typeOf";
 

vuu-ui/packages/vuu-layout/src/utils/propUtils.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { LayoutModel } from "../layout-reducer";
+import { LayoutModel } from "@finos/vuu-utils";
 
 const NO_PROPS = {};
 export const getProp = (

vuu-ui/packages/vuu-layout/src/utils/typeOf.ts

@@ -1,17 +1,17 @@
-import { ReactElement } from 'react';
-import { LayoutJSON, LayoutModel, WithType } from '../layout-reducer';
+import { LayoutJSON, LayoutModel, WithType } from "@finos/vuu-utils";
+import { ReactElement } from "react";
 
 export function typeOf(element?: LayoutModel | WithType): string | undefined {
   if (element) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const type = element.type as any;
-    if (typeof type === 'function' || typeof type === 'object') {
+    if (typeof type === "function" || typeof type === "object") {
       const elementName = type.displayName || type.name || type.type?.name;
-      if (typeof elementName === 'string') {
+      if (typeof elementName === "string") {
         return elementName;
       }
     }
-    if (typeof element.type === 'string') {
+    if (typeof element.type === "string") {
       return element.type;
     }
     if (element.constructor) {
@@ -22,7 +22,8 @@ export function typeOf(element?: LayoutModel | WithType): string | undefined {
   }
 }
 
-export const isTypeOf = (element: ReactElement, type: string) => typeOf(element) === type;
+export const isTypeOf = (element: ReactElement, type: string) =>
+  typeOf(element) === type;
 
 export const isLayoutJSON = (layout: LayoutJSON): layout is LayoutJSON =>
   layout !== undefined && "type" in layout;

vuu-ui/packages/vuu-layout/test/typeOf.test.ts

@@ -1,5 +1,6 @@
+import { LayoutJSON } from "@finos/vuu-utils";
 import { describe, expect, it } from "vitest";
-import { LayoutJSON, isLayoutJSON } from "../src";
+import { isLayoutJSON } from "../src";
 
 const validLayout: LayoutJSON = {
   type: "Stack",

vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx

@@ -1,72 +1,27 @@
-import type { VuuUser } from "@finos/vuu-utils";
+import type { Settings, VuuUser } from "@finos/vuu-utils";
+import { VuuRowDataItemType } from "@finos/vuu-protocol-types";
 import { createContext } from "react";
-import { SettingsSchema } from "../application-settings/SettingsForm";
-import { VuuRowDataItemType } from "packages/vuu-protocol-types";
-
-// export interface CoreSettings {
-//   themeMode: ThemeMode;
-// }
+import { SettingsSchema } from "../user-settings";
 
 const Guest: VuuUser = {
   username: "unknown",
   token: "",
 };
 
 export interface ApplicationContextProps {
-  onApplicationSettingChanged: (
+  onUserSettingChanged: (
     propertyName: string,
     value: VuuRowDataItemType
   ) => void;
-  applicationSettings?: Record<string, string | number | boolean>;
-  applicationSettingsSchema?: SettingsSchema;
+  userSettings?: Settings;
+  userSettingsSchema?: SettingsSchema;
   user: VuuUser;
 }
 
 export const ApplicationContext = createContext<ApplicationContextProps>({
-  onApplicationSettingChanged: (propertyName: string) =>
-    console.log(
+  onUserSettingChanged: (propertyName: string) =>
+    console.warn(
       `Cannot change setting '${propertyName}'.\nDid you forget to declare an ApplicationProvider ?`
     ),
-  applicationSettings: {
-    themeMode: "light",
-    dateFormatPattern: "dd MMMM yyyy",
-    region: "apac",
-    greyscale: false,
-  },
-  applicationSettingsSchema: {
-    properties: [
-      {
-        name: "themeMode",
-        label: "Mode",
-        values: ["light", "dark"],
-        defaultValue: "light",
-        type: "string",
-      },
-      {
-        name: "dateFormatPattern",
-        label: "Date Formatting",
-        values: ["dd/mm/yyyy", "mm/dd/yyyy", "dd MMMM yyyy"],
-        defaultValue: "dd/mm/yyyy",
-        type: "string",
-      },
-      {
-        name: "region",
-        label: "Region",
-        values: [
-          { value: "us", label: "US" },
-          { value: "apac", label: "Asia Pacific" },
-          { value: "emea", label: "Europe, Middle East & Africa" },
-        ],
-        defaultValue: "apac",
-        type: "string",
-      },
-      {
-        name: "greyscale",
-        label: "Greyscale",
-        defaultValue: false,
-        type: "boolean",
-      },
-    ],
-  },
   user: Guest,
 });