@vuu-ui/vuu-shell 4.0.0-alpha.9 → 4.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (143) hide show
  1. package/package.json +19 -20
  2. package/src/app-header/AppHeader.css.js +1 -1
  3. package/src/app-header/AppHeader.js +26 -36
  4. package/src/application-provider/ApplicationContext.js +5 -2
  5. package/src/application-provider/ApplicationProvider.js +59 -8
  6. package/src/feature/Feature.js +34 -3
  7. package/src/feature/FeatureErrorBoundary.js +33 -0
  8. package/src/feature/index.js +0 -1
  9. package/src/feature-list/FeatureList.css.js +5 -27
  10. package/src/feature-list/FeatureList.js +96 -117
  11. package/src/index.js +3 -3
  12. package/src/left-nav/LeftNav.css.js +4 -2
  13. package/src/left-nav/LeftNav.js +100 -139
  14. package/src/persistence-manager/PersistenceProvider.js +3 -10
  15. package/src/persistence-manager/index.js +0 -3
  16. package/src/shell-layout-templates/context-panel/ContextPanel.css.js +8 -8
  17. package/src/shell-layout-templates/context-panel/ContextPanel.js +35 -17
  18. package/src/shell-layout-templates/context-panel/index.js +0 -1
  19. package/src/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +40 -54
  20. package/src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +64 -54
  21. package/src/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +28 -49
  22. package/src/shell-layout-templates/side-panel/SidePanel.css.js +1 -3
  23. package/src/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +35 -43
  24. package/src/shell.css.js +3 -86
  25. package/src/shell.js +70 -148
  26. package/src/user-settings/SettingsForm.css.js +10 -0
  27. package/src/user-settings/SettingsForm.js +141 -0
  28. package/src/user-settings/UserSettingsPanel.css.js +9 -0
  29. package/src/user-settings/UserSettingsPanel.js +29 -0
  30. package/src/user-settings/index.js +2 -0
  31. package/src/workspace-management/LayoutList.js +99 -59
  32. package/src/workspace-management/SaveLayoutPanel.js +3 -3
  33. package/src/workspace-management/WorkspaceProvider.js +178 -699
  34. package/src/workspace-management/index.js +0 -8
  35. package/src/workspace-management/useWorkspaceContextMenuItems.js +6 -12
  36. package/types/app-header/AppHeader.d.ts +2 -2
  37. package/types/application-provider/ApplicationContext.d.ts +6 -1
  38. package/types/application-provider/ApplicationProvider.d.ts +14 -5
  39. package/types/feature/Feature.d.ts +10 -2
  40. package/types/feature/FeatureErrorBoundary.d.ts +1 -1
  41. package/types/feature/Loader.d.ts +1 -1
  42. package/types/feature/index.d.ts +1 -2
  43. package/types/feature-list/FeatureList.d.ts +4 -4
  44. package/types/index.d.ts +3 -3
  45. package/types/left-nav/LeftNav.d.ts +1 -2
  46. package/types/login/LoginPanel.d.ts +1 -1
  47. package/types/login/VuuLogo.d.ts +1 -1
  48. package/types/persistence-manager/PersistenceProvider.d.ts +3 -7
  49. package/types/persistence-manager/index.d.ts +0 -3
  50. package/types/shell-layout-templates/context-panel/ContextPanel.d.ts +11 -9
  51. package/types/shell-layout-templates/context-panel/index.d.ts +0 -1
  52. package/types/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.d.ts +1 -1
  53. package/types/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.d.ts +1 -1
  54. package/types/shell-layout-templates/left-main-tabs/useLeftMainTabs.d.ts +1 -1
  55. package/types/shell-layout-templates/side-panel/SidePanel.d.ts +1 -1
  56. package/types/shell-layout-templates/simple-content-pane/useSimpleContentPane.d.ts +1 -1
  57. package/types/shell-layout-templates/useShellLayout.d.ts +2 -4
  58. package/types/shell.d.ts +15 -19
  59. package/types/theme-switch/ThemeSwitch.d.ts +1 -1
  60. package/types/workspace-management/LayoutList.d.ts +2 -2
  61. package/types/workspace-management/LayoutTile.d.ts +1 -1
  62. package/types/workspace-management/SaveLayoutPanel.d.ts +2 -2
  63. package/types/workspace-management/WorkspaceProvider.d.ts +50 -61
  64. package/types/workspace-management/defaultWorkspaceJSON.d.ts +6 -7
  65. package/types/workspace-management/index.d.ts +0 -8
  66. package/types/workspace-management/useWorkspaceContextMenuItems.d.ts +1 -1
  67. package/src/module-registry/getRegisteredModules.js +0 -12
  68. package/src/persistence-manager/LocalWorkspacePersistenceService.js +0 -129
  69. package/src/persistence-manager/RemoteWorkspacePersistenceService.js +0 -112
  70. package/src/persistence-manager/WorkspacePersistenceService.js +0 -9
  71. package/src/shell-layout-templates/context-panel/ApplicationSettingsContextPanel.js +0 -24
  72. package/src/workspace-management/WorkspaceController.js +0 -73
  73. package/src/workspace-management/WorkspaceHost.js +0 -194
  74. package/src/workspace-management/WorkspacePersistentState.js +0 -67
  75. package/src/workspace-management/WorkspaceRepository.js +0 -127
  76. package/src/workspace-management/WorkspaceStartPanel.css.js +0 -44
  77. package/src/workspace-management/WorkspaceStartPanel.js +0 -34
  78. package/src/workspace-management/shell-workspace-components.js +0 -59
  79. package/src/workspace-management/workspace-component-registry.js +0 -30
  80. package/src/workspace-management/workspace-schemas.js +0 -257
  81. package/types/module-registry/getRegisteredModules.d.ts +0 -5
  82. package/types/persistence-manager/LocalWorkspacePersistenceService.d.ts +0 -18
  83. package/types/persistence-manager/RemoteWorkspacePersistenceService.d.ts +0 -25
  84. package/types/persistence-manager/WorkspacePersistenceService.d.ts +0 -27
  85. package/types/shell-layout-templates/context-panel/ApplicationSettingsContextPanel.d.ts +0 -1
  86. package/types/src/ShellContextProvider.d.ts +0 -7
  87. package/types/src/app-header/AppHeader.d.ts +0 -6
  88. package/types/src/app-header/index.d.ts +0 -1
  89. package/types/src/application-provider/ApplicationContext.d.ts +0 -11
  90. package/types/src/application-provider/ApplicationProvider.d.ts +0 -17
  91. package/types/src/application-provider/index.d.ts +0 -1
  92. package/types/src/feature/Feature.d.ts +0 -10
  93. package/types/src/feature/FeatureErrorBoundary.d.ts +0 -13
  94. package/types/src/feature/Loader.d.ts +0 -1
  95. package/types/src/feature/index.d.ts +0 -1
  96. package/types/src/feature-and-layout-provider/FeatureAndLayoutProvider.d.ts +0 -19
  97. package/types/src/feature-and-layout-provider/index.d.ts +0 -1
  98. package/types/src/feature-list/FeatureList.d.ts +0 -7
  99. package/types/src/feature-list/index.d.ts +0 -1
  100. package/types/src/get-layout-history.d.ts +0 -8
  101. package/types/src/index.d.ts +0 -14
  102. package/types/src/left-nav/LeftNav.d.ts +0 -14
  103. package/types/src/left-nav/index.d.ts +0 -1
  104. package/types/src/login/LoginPanel.d.ts +0 -6
  105. package/types/src/login/VuuLogo.d.ts +0 -1
  106. package/types/src/persistence-manager/LocalPersistenceManager.d.ts +0 -20
  107. package/types/src/persistence-manager/PersistenceManager.d.ts +0 -71
  108. package/types/src/persistence-manager/PersistenceProvider.d.ts +0 -11
  109. package/types/src/persistence-manager/RemotePersistenceManager.d.ts +0 -25
  110. package/types/src/persistence-manager/StaticPersistenceManager.d.ts +0 -25
  111. package/types/src/persistence-manager/index.d.ts +0 -5
  112. package/types/src/shell-layout-templates/context-panel/ContextPanel.d.ts +0 -13
  113. package/types/src/shell-layout-templates/context-panel/index.d.ts +0 -1
  114. package/types/src/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.d.ts +0 -2
  115. package/types/src/shell-layout-templates/index.d.ts +0 -3
  116. package/types/src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.d.ts +0 -2
  117. package/types/src/shell-layout-templates/left-main-tabs/useLeftMainTabs.d.ts +0 -2
  118. package/types/src/shell-layout-templates/side-panel/SidePanel.d.ts +0 -8
  119. package/types/src/shell-layout-templates/side-panel/index.d.ts +0 -1
  120. package/types/src/shell-layout-templates/simple-content-pane/useSimpleContentPane.d.ts +0 -2
  121. package/types/src/shell-layout-templates/useShellLayout.d.ts +0 -51
  122. package/types/src/shell.d.ts +0 -17
  123. package/types/src/theme-switch/ThemeSwitch.d.ts +0 -8
  124. package/types/src/theme-switch/index.d.ts +0 -1
  125. package/types/src/user-settings/SettingsForm.d.ts +0 -46
  126. package/types/src/user-settings/UserSettingsPanel.d.ts +0 -3
  127. package/types/src/user-settings/index.d.ts +0 -2
  128. package/types/src/workspace-management/LayoutList.d.ts +0 -2
  129. package/types/src/workspace-management/LayoutTile.d.ts +0 -7
  130. package/types/src/workspace-management/SaveLayoutPanel.d.ts +0 -9
  131. package/types/src/workspace-management/WorkspaceProvider.d.ts +0 -52
  132. package/types/src/workspace-management/defaultWorkspaceJSON.d.ts +0 -10
  133. package/types/src/workspace-management/index.d.ts +0 -5
  134. package/types/src/workspace-management/screenshot-utils.d.ts +0 -6
  135. package/types/src/workspace-management/useWorkspaceContextMenuItems.d.ts +0 -5
  136. package/types/workspace-management/WorkspaceController.d.ts +0 -32
  137. package/types/workspace-management/WorkspaceHost.d.ts +0 -1
  138. package/types/workspace-management/WorkspacePersistentState.d.ts +0 -19
  139. package/types/workspace-management/WorkspaceRepository.d.ts +0 -13
  140. package/types/workspace-management/WorkspaceStartPanel.d.ts +0 -1
  141. package/types/workspace-management/shell-workspace-components.d.ts +0 -2
  142. package/types/workspace-management/workspace-component-registry.d.ts +0 -12
  143. package/types/workspace-management/workspace-schemas.d.ts +0 -69
package/package.json CHANGED
@@ -1,35 +1,32 @@
1
1
  {
2
- "version": "4.0.0-alpha.9",
2
+ "version": "4.0.0-beta.1",
3
3
  "description": "VUU UI Shell",
4
4
  "main": "./src/index.js",
5
5
  "author": "heswell",
6
6
  "license": "Apache-2.0",
7
- "type": "module",
8
7
  "scripts": {
8
+ "build:dev": "node ../../scripts/run-build.mjs",
9
9
  "build": "node ../../scripts/run-build-rslib.ts",
10
10
  "type-defs": "node ../../scripts/build-type-defs.mjs"
11
11
  },
12
12
  "devDependencies": {
13
- "@vuu-ui/vuu-data-types": "4.0.0-alpha.9",
14
- "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.9",
15
- "@vuu-ui/vuu-table-types": "4.0.0-alpha.9"
13
+ "@vuu-ui/vuu-data-types": "4.0.0-beta.1",
14
+ "@vuu-ui/vuu-protocol-types": "4.0.0-beta.1",
15
+ "@vuu-ui/vuu-table-types": "4.0.0-beta.1"
16
16
  },
17
17
  "dependencies": {
18
- "@vuu-ui/grid-layout": "4.0.0-alpha.9",
19
- "@salt-ds/core": "1.67.0",
20
- "@salt-ds/styles": "0.2.1",
21
- "@salt-ds/window": "0.1.1",
22
- "@vuu-ui/vuu-context-menu": "4.0.0-alpha.9",
23
- "@vuu-ui/vuu-data-react": "4.0.0-alpha.9",
24
- "@vuu-ui/vuu-data-remote": "4.0.0-alpha.9",
25
- "@vuu-ui/vuu-icons": "4.0.0-alpha.9",
26
- "@vuu-ui/vuu-layout": "4.0.0-alpha.9",
27
- "@vuu-ui/vuu-notifications": "4.0.0-alpha.9",
28
- "@vuu-ui/vuu-table": "4.0.0-alpha.9",
29
- "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.9",
30
- "@vuu-ui/vuu-utils": "4.0.0-alpha.9",
31
- "@module-federation/enhanced": "2.8.0",
32
- "@vuu-ui/core": "4.0.0-alpha.9",
18
+ "@salt-ds/core": "1.72.0",
19
+ "@salt-ds/styles": "0.4.1",
20
+ "@salt-ds/window": "0.1.2",
21
+ "@vuu-ui/vuu-context-menu": "4.0.0-beta.1",
22
+ "@vuu-ui/vuu-data-react": "4.0.0-beta.1",
23
+ "@vuu-ui/vuu-data-remote": "4.0.0-beta.1",
24
+ "@vuu-ui/vuu-icons": "4.0.0-beta.1",
25
+ "@vuu-ui/vuu-layout": "4.0.0-beta.1",
26
+ "@vuu-ui/vuu-notifications": "4.0.0-beta.1",
27
+ "@vuu-ui/vuu-table": "4.0.0-beta.1",
28
+ "@vuu-ui/vuu-ui-controls": "4.0.0-beta.1",
29
+ "@vuu-ui/vuu-utils": "4.0.0-beta.1",
33
30
  "html-to-image": "^1.11.11"
34
31
  },
35
32
  "peerDependencies": {
@@ -46,10 +43,12 @@
46
43
  "exports": {
47
44
  ".": {
48
45
  "import": "./src/index.js",
46
+ "default": "./src/index.js",
49
47
  "types": "./types/index.d.ts"
50
48
  }
51
49
  },
52
50
  "module": "./src/index.js",
53
51
  "name": "@vuu-ui/vuu-shell",
52
+ "type": "module",
54
53
  "types": "types/index.d.ts"
55
54
  }
@@ -6,7 +6,7 @@ const css = `
6
6
  --vuuToolbarItem-height: 26px;
7
7
  --vuuOverflowContainer-gap: 8px;
8
8
  --vuuOverflowContainer-height: var(--vuuAppHeader-height, 42px);
9
- --vuu-icon-color: var(--vuu-color-gray-45);
9
+ --vuu-icon-color: var(--salt-color-gray-500);
10
10
  --vuu-icon-size: 16px;
11
11
  --vuuToolbar-borderWidth: 1px;
12
12
  --vuuToolbar-borderStyle: solid;
@@ -2,12 +2,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Button } from "@salt-ds/core";
3
3
  import { useComponentCssInjection } from "@salt-ds/styles";
4
4
  import { useWindow } from "@salt-ds/window";
5
- import { useLogout } from "@vuu-ui/core";
6
- import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
7
- import { Toolbar, useContextPanel, useHideContextPanel } from "@vuu-ui/vuu-ui-controls";
5
+ import { useLayoutOperation } from "@vuu-ui/vuu-layout";
6
+ import { Toolbar } from "@vuu-ui/vuu-ui-controls";
8
7
  import clsx from "clsx";
9
- import { useCallback } from "react";
10
- import { useWorkspace } from "../workspace-management/index.js";
8
+ import { useCallback, useRef } from "react";
9
+ import { usePersistenceManager } from "../persistence-manager/index.js";
10
+ import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
11
+ import { useLogout } from "../application-provider/index.js";
11
12
  import AppHeader from "./AppHeader.css";
12
13
  const classBase = "vuuAppHeader";
13
14
  const AppHeader_AppHeader = ({ className: classNameProp, themeMode: _, ...htmlAttributes })=>{
@@ -17,45 +18,33 @@ const AppHeader_AppHeader = ({ className: classNameProp, themeMode: _, ...htmlAt
17
18
  css: AppHeader,
18
19
  window: targetWindow
19
20
  });
21
+ const persistenceManager = usePersistenceManager();
22
+ const settingsButtonRef = useRef(null);
20
23
  const className = clsx(classBase, classNameProp);
21
24
  const logout = useLogout();
22
- const { resetApplication, setApplicationSetting } = useWorkspace();
25
+ const { showComponentInContextPanel } = useLayoutOperation();
23
26
  const { showNotification } = useNotifications();
24
- const showContextPanel = useContextPanel();
25
- const hideContextPanel = useHideContextPanel();
26
- const handleReset = useCallback(async ()=>{
27
- try {
28
- await resetApplication();
29
- hideContextPanel?.();
30
- showNotification({
31
- animationType: "slide-out",
32
- renderPostRefresh: true,
33
- type: NotificationType.Toast,
34
- header: "Success",
35
- content: "Settings and workspaces cleared",
36
- status: "success"
37
- });
38
- } catch (cause) {
39
- showNotification({
40
- type: NotificationType.Toast,
41
- header: "Reset failed",
42
- content: cause instanceof Error ? cause.message : "Unable to reset",
43
- status: "error"
44
- });
45
- }
27
+ const handleReset = useCallback(()=>{
28
+ persistenceManager?.clearUserSettings();
29
+ showNotification({
30
+ animationType: "slide-out",
31
+ renderPostRefresh: true,
32
+ type: NotificationType.Toast,
33
+ header: "Success",
34
+ content: "Settings cleared",
35
+ status: "success"
36
+ });
37
+ location.reload();
46
38
  }, [
47
- hideContextPanel,
48
- resetApplication,
39
+ persistenceManager,
49
40
  showNotification
50
41
  ]);
51
42
  const handleShowSettings = useCallback(()=>{
52
- setApplicationSetting("applicationSettings.panelOpen", true).catch(()=>void 0);
53
- showContextPanel(/*#__PURE__*/ jsx("div", {
54
- children: "Application settings"
55
- }), "Settings");
43
+ showComponentInContextPanel({
44
+ type: "ApplicationSettings"
45
+ }, "Settings", ()=>settingsButtonRef.current?.focus());
56
46
  }, [
57
- setApplicationSetting,
58
- showContextPanel
47
+ showComponentInContextPanel
59
48
  ]);
60
49
  return /*#__PURE__*/ jsxs(Toolbar, {
61
50
  alignItems: "end",
@@ -86,6 +75,7 @@ const AppHeader_AppHeader = ({ className: classNameProp, themeMode: _, ...htmlAt
86
75
  appearance: "transparent",
87
76
  className: `${classBase}-menuItem`,
88
77
  onClick: handleShowSettings,
78
+ ref: settingsButtonRef,
89
79
  sentiment: "neutral",
90
80
  children: [
91
81
  "Settings ",
@@ -1,6 +1,9 @@
1
1
  import { createContext } from "react";
2
- console.log("%ccreate application context", "color:red;font-weight:bold;");
2
+ const Guest = {
3
+ username: "unknown"
4
+ };
3
5
  const ApplicationContext = /*#__PURE__*/ createContext({
4
- onUserSettingChanged: (propertyName)=>console.warn(`Cannot change setting '${propertyName}'.\nDid you forget to declare an ApplicationProvider ?`)
6
+ onUserSettingChanged: (propertyName)=>console.warn(`Cannot change setting '${propertyName}'.\nDid you forget to declare an ApplicationProvider ?`),
7
+ user: Guest
5
8
  });
6
9
  export { ApplicationContext };
@@ -1,26 +1,77 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { SaltProviderNext, useDensity, useTheme } from "@salt-ds/core";
3
- import { useContext } from "react";
3
+ import { useCallback, useContext, useMemo, useState } from "react";
4
4
  import { ApplicationContext } from "./ApplicationContext.js";
5
+ import { usePersistenceManager } from "../persistence-manager/index.js";
5
6
  const accentPurple = "purple";
6
- const getThemeMode = (mode = "light")=>mode;
7
- const ApplicationProvider = ({ children, density: densityProp, logout, mode, theme })=>{
7
+ const getThemeMode = (mode = "light", userSettings)=>{
8
+ const themeMode = userSettings?.themeMode;
9
+ if ("light" === themeMode || "dark" === themeMode) return themeMode;
10
+ return mode;
11
+ };
12
+ const ApplicationProvider = ({ children, density: densityProp, logout, mode, theme, userSettingsSchema: userSettingsSchema, user })=>{
8
13
  const { mode: inheritedMode, theme: inheritedTheme } = useTheme();
9
14
  const density = useDensity(densityProp);
15
+ const persistenceManager = usePersistenceManager();
10
16
  const context = useContext(ApplicationContext);
11
- return /*#__PURE__*/ jsx(ApplicationContext.Provider, {
17
+ const [userSettings, setSettings] = useState();
18
+ useMemo(async ()=>{
19
+ if (persistenceManager) {
20
+ const userSettings = await persistenceManager.getUserSettings();
21
+ setSettings(userSettings);
22
+ } else setSettings({});
23
+ }, [
24
+ persistenceManager
25
+ ]);
26
+ const onUserSettingChanged = useCallback((propertyName, value)=>{
27
+ setSettings((currentSettings)=>{
28
+ const newSettings = {
29
+ ...currentSettings,
30
+ [propertyName]: value
31
+ };
32
+ persistenceManager?.saveUserSettings(newSettings);
33
+ return newSettings;
34
+ });
35
+ }, [
36
+ persistenceManager
37
+ ]);
38
+ return userSettings ? /*#__PURE__*/ jsx(ApplicationContext.Provider, {
12
39
  value: {
13
40
  ...context,
14
- logout
41
+ logout,
42
+ onUserSettingChanged,
43
+ userSettings,
44
+ userSettingsSchema,
45
+ user: user ?? context.user
15
46
  },
16
47
  children: /*#__PURE__*/ jsx(SaltProviderNext, {
17
48
  accent: accentPurple,
18
49
  corner: "rounded",
19
50
  theme: theme ?? inheritedTheme ?? "vuu-theme",
20
51
  density: density,
21
- mode: getThemeMode(mode ?? inheritedMode),
52
+ mode: getThemeMode(mode ?? inheritedMode, userSettings),
22
53
  children: children
23
54
  })
24
- });
55
+ }) : null;
56
+ };
57
+ const useApplicationUser = ()=>{
58
+ const { user } = useContext(ApplicationContext);
59
+ return user;
60
+ };
61
+ const useApplicationSettings = ()=>{
62
+ const { onUserSettingChanged, userSettings, userSettingsSchema } = useContext(ApplicationContext);
63
+ return {
64
+ onUserSettingChanged,
65
+ userSettings,
66
+ userSettingsSchema
67
+ };
68
+ };
69
+ const useUserSetting = ()=>{
70
+ const { userSettings } = useContext(ApplicationContext);
71
+ return userSettings;
72
+ };
73
+ const useLogout = ()=>{
74
+ const { logout } = useContext(ApplicationContext);
75
+ return logout;
25
76
  };
26
- export { ApplicationProvider };
77
+ export { ApplicationProvider, useApplicationSettings, useApplicationUser, useLogout, useUserSetting };
@@ -1,6 +1,37 @@
1
- import { RemoteModule } from "@vuu-ui/core/portal";
2
- import { registerComponent } from "@vuu-ui/vuu-utils";
3
- const Feature = RemoteModule;
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { importCSS, importFeature, registerComponent } from "@vuu-ui/vuu-utils";
3
+ import react, { useEffect } from "react";
4
+ import { FeatureErrorBoundary } from "./FeatureErrorBoundary.js";
5
+ const componentsMap = new Map();
6
+ const useCachedFeature = (url)=>{
7
+ useEffect(()=>()=>{
8
+ componentsMap.delete(url);
9
+ }, [
10
+ url
11
+ ]);
12
+ if (!componentsMap.has(url)) componentsMap.set(url, /*#__PURE__*/ react.lazy(()=>importFeature(url)));
13
+ const lazyFeature = componentsMap.get(url);
14
+ if (lazyFeature) return lazyFeature;
15
+ throw Error(`Unable to load Lazy Feature at url ${url}`);
16
+ };
17
+ function RawFeature({ url, css, ComponentProps: params, ...props }) {
18
+ if (css) // import(/* @vite-ignore */ css, { assert: { type: "css" } }).then(
19
+ importCSS(css).then((styleSheet)=>{
20
+ document.adoptedStyleSheets = [
21
+ ...document.adoptedStyleSheets,
22
+ styleSheet
23
+ ];
24
+ });
25
+ const LazyFeature = useCachedFeature(url);
26
+ return /*#__PURE__*/ jsx(FeatureErrorBoundary, {
27
+ url: url,
28
+ children: /*#__PURE__*/ jsx(LazyFeature, {
29
+ ...props,
30
+ ...params
31
+ })
32
+ });
33
+ }
34
+ const Feature = /*#__PURE__*/ react.memo(RawFeature);
4
35
  Feature.displayName = "Feature";
5
36
  registerComponent("Feature", Feature, "view");
6
37
  export { Feature };
@@ -0,0 +1,33 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import react from "react";
3
+ class FeatureErrorBoundary extends react.Component {
4
+ constructor(props){
5
+ super(props);
6
+ this.state = {
7
+ errorMessage: null
8
+ };
9
+ }
10
+ static getDerivedStateFromError(error) {
11
+ return {
12
+ errorMessage: error.message
13
+ };
14
+ }
15
+ componentDidCatch(error, errorInfo) {
16
+ console.log(`error creating component at ${this.props.url}`);
17
+ console.log(error, errorInfo);
18
+ }
19
+ render() {
20
+ if (this.state.errorMessage) return /*#__PURE__*/ jsxs(Fragment, {
21
+ children: [
22
+ /*#__PURE__*/ jsx("h1", {
23
+ children: "An error occured while creating component."
24
+ }),
25
+ /*#__PURE__*/ jsx("p", {
26
+ children: this.state.errorMessage
27
+ })
28
+ ]
29
+ });
30
+ return this.props.children;
31
+ }
32
+ }
33
+ export { FeatureErrorBoundary };
@@ -1,2 +1 @@
1
1
  export * from "./Feature.js";
2
- export { RemoteModule } from "@vuu-ui/core/portal";
@@ -29,30 +29,6 @@ const css = `
29
29
  margin-top: 24px;
30
30
  }
31
31
 
32
- .vuuFeatureList-items {
33
- flex-direction: column;
34
- flex: none;
35
- display: flex;
36
- }
37
-
38
- .vuuFeatureList-item {
39
- --vuu-icon-color: var(--salt-content-secondary-foreground);
40
- cursor: grab;
41
- align-items: center;
42
- gap: var(--salt-spacing-100);
43
- flex: 0 0 24px;
44
- min-height: 24px;
45
- padding: 5px 4px 5px 12px;
46
- font-size: 11px;
47
- font-weight: 400;
48
- line-height: 14px;
49
- display: flex;
50
- }
51
-
52
- .vuuFeatureList-item:hover {
53
- background: var(--salt-selectable-background-hover);
54
- }
55
-
56
32
  .vuuFeatureList-group {
57
33
  --vuuMeasuredContainer-flex: 0 0 auto;
58
34
  flex-direction: column;
@@ -62,6 +38,11 @@ const css = `
62
38
  flex: 0 0 32px;
63
39
  padding: 8px 0;
64
40
  }
41
+
42
+ & .vuuPalette {
43
+ flex: auto;
44
+ height: auto;
45
+ }
65
46
  }
66
47
 
67
48
  .vuuFeatureList-group:first-child {
@@ -73,10 +54,7 @@ const css = `
73
54
  }
74
55
 
75
56
  .vuuFeatureList-itemName {
76
- text-overflow: ellipsis;
77
- white-space: nowrap;
78
57
  font-weight: 700;
79
- overflow: hidden;
80
58
  }
81
59
 
82
60
 
@@ -1,98 +1,14 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { DragDropProviderNext, GridLayoutProvider, toJsonValue, useDraggable, useOptionalDragContext } from "@vuu-ui/grid-layout";
2
+ import { Palette, PaletteItem } from "@vuu-ui/vuu-layout";
3
+ import { Icon } from "@vuu-ui/vuu-ui-controls";
4
+ import { featureFromJson, isStaticFeatures } from "@vuu-ui/vuu-utils";
3
5
  import { useComponentCssInjection } from "@salt-ds/styles";
4
6
  import { useWindow } from "@salt-ds/window";
5
- import { Icon } from "@vuu-ui/vuu-ui-controls";
6
- import { isStaticFeatures, queryClosest } from "@vuu-ui/vuu-utils";
7
7
  import clsx from "clsx";
8
- import { useCallback, useId, useMemo } from "react";
8
+ import { useMemo } from "react";
9
+ import { Feature } from "../feature/Feature.js";
9
10
  import FeatureList from "./FeatureList.css";
10
11
  const classBase = "vuuFeatureList";
11
- const NOOP = ()=>void 0;
12
- const FeatureListDragRuntime = ({ children })=>{
13
- const dragContext = useOptionalDragContext();
14
- const runtimeId = useId();
15
- if (dragContext) return children;
16
- return /*#__PURE__*/ jsx(GridLayoutProvider, {
17
- children: /*#__PURE__*/ jsx(DragDropProviderNext, {
18
- dragSources: {},
19
- onCancelTabDrag: NOOP,
20
- onDetachTab: NOOP,
21
- onDrop: NOOP,
22
- children: /*#__PURE__*/ jsx("div", {
23
- className: "vuuGridLayout",
24
- id: `vuu-feature-list-${runtimeId}`,
25
- style: {
26
- display: "contents"
27
- },
28
- children: children
29
- })
30
- })
31
- });
32
- };
33
- const templateForDynamicFeature = (feature)=>{
34
- const settings = toJsonValue(feature);
35
- if (!settings.ok) throw new Error(`Feature "${feature.title ?? feature.mfComponent}" has non-persistable settings at ${settings.error.path}`);
36
- return {
37
- component: {
38
- settings: settings.value,
39
- type: "vuu-dynamic-feature",
40
- version: 1
41
- },
42
- label: feature.title ?? feature.mfComponent
43
- };
44
- };
45
- const templateForStaticFeature = ({ label, type })=>({
46
- component: {
47
- settings: {
48
- type
49
- },
50
- type: "vuu-static-feature",
51
- version: 1
52
- },
53
- label
54
- });
55
- const FeatureTemplate = ({ template })=>{
56
- const getDragSource = useCallback((event)=>{
57
- const element = event.currentTarget;
58
- return {
59
- ...template,
60
- element,
61
- layoutId: queryClosest(element, ".vuuGridLayout")?.id ?? "vuu-feature-list",
62
- type: "template"
63
- };
64
- }, [
65
- template
66
- ]);
67
- const draggable = useDraggable({
68
- getDragSource
69
- });
70
- return /*#__PURE__*/ jsxs("div", {
71
- ...draggable,
72
- className: `${classBase}-item`,
73
- "data-template-component-type": template.component.type,
74
- "data-template-version": template.component.version,
75
- draggable: true,
76
- role: "listitem",
77
- children: [
78
- /*#__PURE__*/ jsx(Icon, {
79
- name: "draggable",
80
- size: 18
81
- }),
82
- /*#__PURE__*/ jsx("span", {
83
- className: `${classBase}-itemName`,
84
- children: template.label
85
- })
86
- ]
87
- });
88
- };
89
- const TemplateList = ({ templates })=>/*#__PURE__*/ jsx("div", {
90
- className: `${classBase}-items`,
91
- role: "list",
92
- children: templates.map((template, index)=>/*#__PURE__*/ jsx(FeatureTemplate, {
93
- template: template
94
- }, `${template.component.type}-${template.label}-${index}`))
95
- });
96
12
  const FeatureList_FeatureList = ({ features, title = "VUU TABLES", ...htmlAttributes })=>{
97
13
  const targetWindow = useWindow();
98
14
  useComponentCssInjection({
@@ -101,49 +17,112 @@ const FeatureList_FeatureList = ({ features, title = "VUU TABLES", ...htmlAttrib
101
17
  window: targetWindow
102
18
  });
103
19
  const content = useMemo(()=>{
104
- if (isStaticFeatures(features)) return [
105
- /*#__PURE__*/ jsx(TemplateList, {
106
- templates: features.map(templateForStaticFeature)
107
- }, "static")
108
- ];
20
+ if (isStaticFeatures(features)) return features.map(({ label, type }, idx)=>/*#__PURE__*/ jsxs(PaletteItem, {
21
+ ViewProps: {
22
+ closeable: true,
23
+ header: true,
24
+ resize: "defer",
25
+ resizeable: true
26
+ },
27
+ component: featureFromJson({
28
+ type
29
+ }),
30
+ value: label,
31
+ children: [
32
+ /*#__PURE__*/ jsx(Icon, {
33
+ name: "draggable",
34
+ size: 18
35
+ }),
36
+ /*#__PURE__*/ jsx("span", {
37
+ className: `${classBase}-itemName`,
38
+ children: label
39
+ })
40
+ ]
41
+ }, idx));
109
42
  if (Array.isArray(features)) return [
110
43
  /*#__PURE__*/ jsx("div", {
111
44
  className: `${classBase}-standalone`,
112
- children: /*#__PURE__*/ jsx(TemplateList, {
113
- templates: features.map(templateForDynamicFeature)
114
- })
115
- }, "dynamic")
45
+ children: /*#__PURE__*/ jsx(Palette, {
46
+ orientation: "vertical",
47
+ children: features.map(({ ViewProps, ...featureProps }, i)=>/*#__PURE__*/ jsxs(PaletteItem, {
48
+ ViewProps: {
49
+ closeable: true,
50
+ header: true,
51
+ resize: "defer",
52
+ resizeable: true,
53
+ title: featureProps.title,
54
+ ...ViewProps
55
+ },
56
+ component: /*#__PURE__*/ jsx(Feature, {
57
+ ...featureProps
58
+ }),
59
+ value: featureProps.title,
60
+ children: [
61
+ /*#__PURE__*/ jsx(Icon, {
62
+ name: "draggable",
63
+ size: 18
64
+ }),
65
+ /*#__PURE__*/ jsx("span", {
66
+ className: `${classBase}-itemName`,
67
+ children: featureProps.title
68
+ })
69
+ ]
70
+ }, i))
71
+ }, "0")
72
+ }, 0)
116
73
  ];
117
- return Object.entries(features).map(([heading, featureList])=>/*#__PURE__*/ jsxs("div", {
74
+ return Object.entries(features).map(([heading, featureList], index)=>/*#__PURE__*/ jsxs("div", {
118
75
  className: `${classBase}-group`,
119
76
  children: [
120
77
  /*#__PURE__*/ jsx("div", {
121
78
  className: `${classBase}-groupHeader`,
122
79
  children: heading
123
80
  }),
124
- /*#__PURE__*/ jsx(TemplateList, {
125
- templates: featureList.map(templateForDynamicFeature)
81
+ /*#__PURE__*/ jsx(Palette, {
82
+ orientation: "vertical",
83
+ children: featureList.map(({ ViewProps, ...featureProps }, i)=>/*#__PURE__*/ jsxs(PaletteItem, {
84
+ ViewProps: {
85
+ closeable: true,
86
+ header: true,
87
+ resize: "defer",
88
+ resizeable: true,
89
+ title: featureProps.title,
90
+ ...ViewProps
91
+ },
92
+ component: /*#__PURE__*/ jsx(Feature, {
93
+ ...featureProps
94
+ }),
95
+ value: featureProps.title,
96
+ children: [
97
+ /*#__PURE__*/ jsx(Icon, {
98
+ name: "draggable",
99
+ size: 18
100
+ }),
101
+ /*#__PURE__*/ jsx("span", {
102
+ className: `${classBase}-itemName`,
103
+ children: featureProps.title
104
+ })
105
+ ]
106
+ }, i))
126
107
  })
127
108
  ]
128
- }, heading));
109
+ }, index));
129
110
  }, [
130
111
  features
131
112
  ]);
132
- return /*#__PURE__*/ jsx(FeatureListDragRuntime, {
133
- children: /*#__PURE__*/ jsxs("div", {
134
- ...htmlAttributes,
135
- className: clsx(classBase, "vuuScrollable"),
136
- children: [
137
- /*#__PURE__*/ jsx("div", {
138
- className: `${classBase}-header`,
139
- children: title
140
- }),
141
- /*#__PURE__*/ jsx("div", {
142
- className: `${classBase}-content`,
143
- children: content
144
- })
145
- ]
146
- })
113
+ return /*#__PURE__*/ jsxs("div", {
114
+ ...htmlAttributes,
115
+ className: clsx(classBase, "vuuScrollable"),
116
+ children: [
117
+ /*#__PURE__*/ jsx("div", {
118
+ className: `${classBase}-header`,
119
+ children: title
120
+ }),
121
+ /*#__PURE__*/ jsx("div", {
122
+ className: `${classBase}-content`,
123
+ children: content
124
+ })
125
+ ]
147
126
  });
148
127
  };
149
128
  export { FeatureList_FeatureList as FeatureList };
package/src/index.js CHANGED
@@ -1,14 +1,14 @@
1
- export * from "./app-header/index.js";
2
1
  export * from "./application-provider/index.js";
2
+ export * from "./app-header/index.js";
3
3
  export * from "./feature/index.js";
4
4
  export * from "./feature-and-layout-provider/index.js";
5
- export * from "./feature-list/index.js";
6
5
  export * from "./left-nav/index.js";
7
6
  export * from "./persistence-manager/index.js";
8
7
  export * from "./shell.js";
9
8
  export * from "./shell-layout-templates/index.js";
10
9
  export * from "./ShellContextProvider.js";
10
+ export * from "./feature-list/index.js";
11
11
  export * from "./theme-switch/index.js";
12
+ export * from "./user-settings/index.js";
12
13
  export * from "./workspace-management/index.js";
13
14
  export { LoginPanel } from "./login/LoginPanel.js";
14
- export { getRegisteredModules } from "./module-registry/getRegisteredModules.js";