@vuu-ui/vuu-shell 2.1.18 → 2.1.19-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 (191) hide show
  1. package/package.json +16 -18
  2. package/types/feature/FeatureErrorBoundary.d.ts +1 -1
  3. package/types/workspace-management/WorkspaceProvider.d.ts +5 -5
  4. package/cjs/ShellContextProvider.js +0 -25
  5. package/cjs/ShellContextProvider.js.map +0 -1
  6. package/cjs/app-header/AppHeader.css.js +0 -6
  7. package/cjs/app-header/AppHeader.css.js.map +0 -1
  8. package/cjs/app-header/AppHeader.js +0 -118
  9. package/cjs/app-header/AppHeader.js.map +0 -1
  10. package/cjs/application-provider/ApplicationContext.js +0 -17
  11. package/cjs/application-provider/ApplicationContext.js.map +0 -1
  12. package/cjs/application-provider/ApplicationProvider.js +0 -102
  13. package/cjs/application-provider/ApplicationProvider.js.map +0 -1
  14. package/cjs/feature/Feature.js +0 -54
  15. package/cjs/feature/Feature.js.map +0 -1
  16. package/cjs/feature/FeatureErrorBoundary.js +0 -30
  17. package/cjs/feature/FeatureErrorBoundary.js.map +0 -1
  18. package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js +0 -60
  19. package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js.map +0 -1
  20. package/cjs/feature-list/FeatureList.css.js +0 -6
  21. package/cjs/feature-list/FeatureList.css.js.map +0 -1
  22. package/cjs/feature-list/FeatureList.js +0 -109
  23. package/cjs/feature-list/FeatureList.js.map +0 -1
  24. package/cjs/index.js +0 -71
  25. package/cjs/index.js.map +0 -1
  26. package/cjs/left-nav/LeftNav.css.js +0 -6
  27. package/cjs/left-nav/LeftNav.css.js.map +0 -1
  28. package/cjs/left-nav/LeftNav.js +0 -202
  29. package/cjs/left-nav/LeftNav.js.map +0 -1
  30. package/cjs/login/LoginPanel.css.js +0 -6
  31. package/cjs/login/LoginPanel.css.js.map +0 -1
  32. package/cjs/login/LoginPanel.js +0 -110
  33. package/cjs/login/LoginPanel.js.map +0 -1
  34. package/cjs/login/VuuLogo.js +0 -134
  35. package/cjs/login/VuuLogo.js.map +0 -1
  36. package/cjs/persistence-manager/LocalPersistenceManager.js +0 -193
  37. package/cjs/persistence-manager/LocalPersistenceManager.js.map +0 -1
  38. package/cjs/persistence-manager/PersistenceProvider.js +0 -21
  39. package/cjs/persistence-manager/PersistenceProvider.js.map +0 -1
  40. package/cjs/persistence-manager/RemotePersistenceManager.js +0 -165
  41. package/cjs/persistence-manager/RemotePersistenceManager.js.map +0 -1
  42. package/cjs/persistence-manager/StaticPersistenceManager.js +0 -73
  43. package/cjs/persistence-manager/StaticPersistenceManager.js.map +0 -1
  44. package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js +0 -6
  45. package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js.map +0 -1
  46. package/cjs/shell-layout-templates/context-panel/ContextPanel.js +0 -100
  47. package/cjs/shell-layout-templates/context-panel/ContextPanel.js.map +0 -1
  48. package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +0 -51
  49. package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map +0 -1
  50. package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +0 -83
  51. package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map +0 -1
  52. package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +0 -46
  53. package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map +0 -1
  54. package/cjs/shell-layout-templates/side-panel/SidePanel.css.js +0 -6
  55. package/cjs/shell-layout-templates/side-panel/SidePanel.css.js.map +0 -1
  56. package/cjs/shell-layout-templates/side-panel/SidePanel.js +0 -36
  57. package/cjs/shell-layout-templates/side-panel/SidePanel.js.map +0 -1
  58. package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +0 -48
  59. package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map +0 -1
  60. package/cjs/shell-layout-templates/useShellLayout.js +0 -23
  61. package/cjs/shell-layout-templates/useShellLayout.js.map +0 -1
  62. package/cjs/shell.css.js +0 -6
  63. package/cjs/shell.css.js.map +0 -1
  64. package/cjs/shell.js +0 -137
  65. package/cjs/shell.js.map +0 -1
  66. package/cjs/theme-switch/ThemeSwitch.css.js +0 -6
  67. package/cjs/theme-switch/ThemeSwitch.css.js.map +0 -1
  68. package/cjs/theme-switch/ThemeSwitch.js +0 -56
  69. package/cjs/theme-switch/ThemeSwitch.js.map +0 -1
  70. package/cjs/user-settings/SettingsForm.css.js +0 -6
  71. package/cjs/user-settings/SettingsForm.css.js.map +0 -1
  72. package/cjs/user-settings/SettingsForm.js +0 -168
  73. package/cjs/user-settings/SettingsForm.js.map +0 -1
  74. package/cjs/user-settings/UserSettingsPanel.css.js +0 -6
  75. package/cjs/user-settings/UserSettingsPanel.css.js.map +0 -1
  76. package/cjs/user-settings/UserSettingsPanel.js +0 -42
  77. package/cjs/user-settings/UserSettingsPanel.js.map +0 -1
  78. package/cjs/workspace-management/LayoutList.css.js +0 -6
  79. package/cjs/workspace-management/LayoutList.css.js.map +0 -1
  80. package/cjs/workspace-management/LayoutList.js +0 -116
  81. package/cjs/workspace-management/LayoutList.js.map +0 -1
  82. package/cjs/workspace-management/LayoutTile.css.js +0 -6
  83. package/cjs/workspace-management/LayoutTile.css.js.map +0 -1
  84. package/cjs/workspace-management/LayoutTile.js +0 -41
  85. package/cjs/workspace-management/LayoutTile.js.map +0 -1
  86. package/cjs/workspace-management/SaveLayoutPanel.css.js +0 -6
  87. package/cjs/workspace-management/SaveLayoutPanel.css.js.map +0 -1
  88. package/cjs/workspace-management/SaveLayoutPanel.js +0 -128
  89. package/cjs/workspace-management/SaveLayoutPanel.js.map +0 -1
  90. package/cjs/workspace-management/WorkspaceProvider.js +0 -265
  91. package/cjs/workspace-management/WorkspaceProvider.js.map +0 -1
  92. package/cjs/workspace-management/defaultWorkspaceJSON.js +0 -101
  93. package/cjs/workspace-management/defaultWorkspaceJSON.js.map +0 -1
  94. package/cjs/workspace-management/screenshot-utils.js +0 -25
  95. package/cjs/workspace-management/screenshot-utils.js.map +0 -1
  96. package/cjs/workspace-management/useWorkspaceContextMenuItems.js +0 -72
  97. package/cjs/workspace-management/useWorkspaceContextMenuItems.js.map +0 -1
  98. package/esm/ShellContextProvider.js +0 -23
  99. package/esm/ShellContextProvider.js.map +0 -1
  100. package/esm/app-header/AppHeader.css.js +0 -4
  101. package/esm/app-header/AppHeader.css.js.map +0 -1
  102. package/esm/app-header/AppHeader.js +0 -116
  103. package/esm/app-header/AppHeader.js.map +0 -1
  104. package/esm/application-provider/ApplicationContext.js +0 -15
  105. package/esm/application-provider/ApplicationContext.js.map +0 -1
  106. package/esm/application-provider/ApplicationProvider.js +0 -96
  107. package/esm/application-provider/ApplicationProvider.js.map +0 -1
  108. package/esm/feature/Feature.js +0 -52
  109. package/esm/feature/Feature.js.map +0 -1
  110. package/esm/feature/FeatureErrorBoundary.js +0 -28
  111. package/esm/feature/FeatureErrorBoundary.js.map +0 -1
  112. package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js +0 -56
  113. package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js.map +0 -1
  114. package/esm/feature-list/FeatureList.css.js +0 -4
  115. package/esm/feature-list/FeatureList.css.js.map +0 -1
  116. package/esm/feature-list/FeatureList.js +0 -107
  117. package/esm/feature-list/FeatureList.js.map +0 -1
  118. package/esm/index.js +0 -25
  119. package/esm/index.js.map +0 -1
  120. package/esm/left-nav/LeftNav.css.js +0 -4
  121. package/esm/left-nav/LeftNav.css.js.map +0 -1
  122. package/esm/left-nav/LeftNav.js +0 -200
  123. package/esm/left-nav/LeftNav.js.map +0 -1
  124. package/esm/login/LoginPanel.css.js +0 -4
  125. package/esm/login/LoginPanel.css.js.map +0 -1
  126. package/esm/login/LoginPanel.js +0 -108
  127. package/esm/login/LoginPanel.js.map +0 -1
  128. package/esm/login/VuuLogo.js +0 -132
  129. package/esm/login/VuuLogo.js.map +0 -1
  130. package/esm/persistence-manager/LocalPersistenceManager.js +0 -191
  131. package/esm/persistence-manager/LocalPersistenceManager.js.map +0 -1
  132. package/esm/persistence-manager/PersistenceProvider.js +0 -17
  133. package/esm/persistence-manager/PersistenceProvider.js.map +0 -1
  134. package/esm/persistence-manager/RemotePersistenceManager.js +0 -163
  135. package/esm/persistence-manager/RemotePersistenceManager.js.map +0 -1
  136. package/esm/persistence-manager/StaticPersistenceManager.js +0 -71
  137. package/esm/persistence-manager/StaticPersistenceManager.js.map +0 -1
  138. package/esm/shell-layout-templates/context-panel/ContextPanel.css.js +0 -4
  139. package/esm/shell-layout-templates/context-panel/ContextPanel.css.js.map +0 -1
  140. package/esm/shell-layout-templates/context-panel/ContextPanel.js +0 -98
  141. package/esm/shell-layout-templates/context-panel/ContextPanel.js.map +0 -1
  142. package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +0 -49
  143. package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map +0 -1
  144. package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +0 -81
  145. package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map +0 -1
  146. package/esm/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +0 -44
  147. package/esm/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map +0 -1
  148. package/esm/shell-layout-templates/side-panel/SidePanel.css.js +0 -4
  149. package/esm/shell-layout-templates/side-panel/SidePanel.css.js.map +0 -1
  150. package/esm/shell-layout-templates/side-panel/SidePanel.js +0 -34
  151. package/esm/shell-layout-templates/side-panel/SidePanel.js.map +0 -1
  152. package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +0 -46
  153. package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map +0 -1
  154. package/esm/shell-layout-templates/useShellLayout.js +0 -21
  155. package/esm/shell-layout-templates/useShellLayout.js.map +0 -1
  156. package/esm/shell.css.js +0 -4
  157. package/esm/shell.css.js.map +0 -1
  158. package/esm/shell.js +0 -135
  159. package/esm/shell.js.map +0 -1
  160. package/esm/theme-switch/ThemeSwitch.css.js +0 -4
  161. package/esm/theme-switch/ThemeSwitch.css.js.map +0 -1
  162. package/esm/theme-switch/ThemeSwitch.js +0 -54
  163. package/esm/theme-switch/ThemeSwitch.js.map +0 -1
  164. package/esm/user-settings/SettingsForm.css.js +0 -4
  165. package/esm/user-settings/SettingsForm.css.js.map +0 -1
  166. package/esm/user-settings/SettingsForm.js +0 -162
  167. package/esm/user-settings/SettingsForm.js.map +0 -1
  168. package/esm/user-settings/UserSettingsPanel.css.js +0 -4
  169. package/esm/user-settings/UserSettingsPanel.css.js.map +0 -1
  170. package/esm/user-settings/UserSettingsPanel.js +0 -40
  171. package/esm/user-settings/UserSettingsPanel.js.map +0 -1
  172. package/esm/workspace-management/LayoutList.css.js +0 -4
  173. package/esm/workspace-management/LayoutList.css.js.map +0 -1
  174. package/esm/workspace-management/LayoutList.js +0 -114
  175. package/esm/workspace-management/LayoutList.js.map +0 -1
  176. package/esm/workspace-management/LayoutTile.css.js +0 -4
  177. package/esm/workspace-management/LayoutTile.css.js.map +0 -1
  178. package/esm/workspace-management/LayoutTile.js +0 -39
  179. package/esm/workspace-management/LayoutTile.js.map +0 -1
  180. package/esm/workspace-management/SaveLayoutPanel.css.js +0 -4
  181. package/esm/workspace-management/SaveLayoutPanel.css.js.map +0 -1
  182. package/esm/workspace-management/SaveLayoutPanel.js +0 -126
  183. package/esm/workspace-management/SaveLayoutPanel.js.map +0 -1
  184. package/esm/workspace-management/WorkspaceProvider.js +0 -262
  185. package/esm/workspace-management/WorkspaceProvider.js.map +0 -1
  186. package/esm/workspace-management/defaultWorkspaceJSON.js +0 -95
  187. package/esm/workspace-management/defaultWorkspaceJSON.js.map +0 -1
  188. package/esm/workspace-management/screenshot-utils.js +0 -23
  189. package/esm/workspace-management/screenshot-utils.js.map +0 -1
  190. package/esm/workspace-management/useWorkspaceContextMenuItems.js +0 -70
  191. package/esm/workspace-management/useWorkspaceContextMenuItems.js.map +0 -1
package/esm/shell.js DELETED
@@ -1,135 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { useComponentCssInjection } from '@salt-ds/styles';
3
- import { useWindow } from '@salt-ds/window';
4
- import { ContextMenuProvider } from '@vuu-ui/vuu-context-menu';
5
- import { StackLayout, LayoutProvider } from '@vuu-ui/vuu-layout';
6
- import { NotificationsProvider } from '@vuu-ui/vuu-notifications';
7
- import { ModalProvider } from '@vuu-ui/vuu-ui-controls';
8
- import { registerComponent, logger } from '@vuu-ui/vuu-utils';
9
- import { useMemo, useCallback } from 'react';
10
- import { AppHeader } from './app-header/AppHeader.js';
11
- import { ApplicationProvider } from './application-provider/ApplicationProvider.js';
12
- import { usePersistenceManager, PersistenceProvider } from './persistence-manager/PersistenceProvider.js';
13
- import { LocalPersistenceManager } from './persistence-manager/LocalPersistenceManager.js';
14
- import './persistence-manager/StaticPersistenceManager.js';
15
- import 'clsx';
16
- import { useShellLayout } from './shell-layout-templates/useShellLayout.js';
17
- import { UserSettingsPanel } from './user-settings/UserSettingsPanel.js';
18
- import '@salt-ds/core';
19
- import 'html-to-image';
20
- import { WorkspaceProvider, useWorkspace } from './workspace-management/WorkspaceProvider.js';
21
- import './feature-and-layout-provider/FeatureAndLayoutProvider.js';
22
- import { loadingJSON } from './workspace-management/defaultWorkspaceJSON.js';
23
- import { useWorkspaceContextMenuItems } from './workspace-management/useWorkspaceContextMenuItems.js';
24
- import { useLostConnection } from '@vuu-ui/vuu-data-react';
25
- import shellCss from './shell.css.js';
26
-
27
- registerComponent("ApplicationSettings", UserSettingsPanel, "view");
28
- if (process.env.NODE_ENV === "production") {
29
- if (typeof StackLayout !== "function") {
30
- console.warn(
31
- "StackLayout module not loaded, will be unable to deserialize from layout JSON"
32
- );
33
- }
34
- }
35
- const { error } = logger("Shell");
36
- const defaultAppHeader = /* @__PURE__ */ jsx(AppHeader, {});
37
- const getAppHeader = (shellLayoutProps) => shellLayoutProps?.appHeader ?? defaultAppHeader;
38
- const defaultHTMLAttributes = {
39
- className: "vuuShell"
40
- };
41
- const getHTMLAttributes = (props) => {
42
- if (props?.htmlAttributes) {
43
- return {
44
- ...defaultHTMLAttributes,
45
- ...props.htmlAttributes
46
- };
47
- } else {
48
- return defaultHTMLAttributes;
49
- }
50
- };
51
- const VuuApplication = ({
52
- shellLayoutProps: ShellLayoutProps2,
53
- children
54
- }) => {
55
- const targetWindow = useWindow();
56
- useComponentCssInjection({
57
- testId: "vuu-shell",
58
- css: shellCss,
59
- window: targetWindow
60
- });
61
- const { workspaceJSON, saveApplicationLayout } = useWorkspace();
62
- const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();
63
- const handleLayoutChange = useCallback(
64
- (layout) => {
65
- try {
66
- saveApplicationLayout(layout);
67
- } catch {
68
- error?.("Failed to save layout");
69
- }
70
- },
71
- [saveApplicationLayout]
72
- );
73
- const isLayoutLoading = workspaceJSON === loadingJSON;
74
- const initialLayout = useShellLayout({
75
- ...ShellLayoutProps2,
76
- appHeader: getAppHeader(ShellLayoutProps2),
77
- htmlAttributes: getHTMLAttributes(ShellLayoutProps2)
78
- });
79
- useLostConnection();
80
- return isLayoutLoading ? null : /* @__PURE__ */ jsxs(
81
- ContextMenuProvider,
82
- {
83
- menuActionHandler: handleMenuAction,
84
- menuBuilder: buildMenuOptions,
85
- children: [
86
- /* @__PURE__ */ jsx(
87
- LayoutProvider,
88
- {
89
- workspaceJSON,
90
- onLayoutChange: handleLayoutChange,
91
- children: initialLayout
92
- }
93
- ),
94
- children
95
- ]
96
- }
97
- );
98
- };
99
- const Shell = ({
100
- logout,
101
- user,
102
- userSettingsSchema,
103
- workspaceProps,
104
- ...props
105
- }) => {
106
- const persistenceManager = usePersistenceManager();
107
- const localPersistenceManager = useMemo(() => {
108
- if (persistenceManager) {
109
- return void 0;
110
- }
111
- console.log(
112
- `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`
113
- );
114
- return new LocalPersistenceManager(`vuu/${user.username}`);
115
- }, [persistenceManager, user.username]);
116
- const shellProviders = /* @__PURE__ */ jsx(
117
- ApplicationProvider,
118
- {
119
- density: "high",
120
- logout,
121
- theme: "vuu-theme",
122
- user,
123
- userSettingsSchema,
124
- children: /* @__PURE__ */ jsx(WorkspaceProvider, { ...workspaceProps, children: /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(NotificationsProvider, { children: /* @__PURE__ */ jsx(VuuApplication, { ...props, user }) }) }) })
125
- }
126
- );
127
- if (persistenceManager) {
128
- return shellProviders;
129
- } else {
130
- return /* @__PURE__ */ jsx(PersistenceProvider, { persistenceManager: localPersistenceManager, children: shellProviders });
131
- }
132
- };
133
-
134
- export { Shell };
135
- //# sourceMappingURL=shell.js.map
package/esm/shell.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"shell.js","sources":["../../../packages/vuu-shell/src/shell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { LayoutProvider, StackLayout } from \"@vuu-ui/vuu-layout\";\nimport { NotificationsProvider } from \"@vuu-ui/vuu-notifications\";\nimport { ModalProvider } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport {\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useMemo,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n IPersistenceManager,\n LocalPersistenceManager,\n PersistenceProvider,\n usePersistenceManager,\n} from \"./persistence-manager\";\nimport { ShellLayoutProps, useShellLayout } from \"./shell-layout-templates\";\nimport { SettingsSchema, UserSettingsPanel } from \"./user-settings\";\nimport {\n WorkspaceProps,\n WorkspaceProvider,\n useWorkspace,\n useWorkspaceContextMenuItems,\n} from \"./workspace-management\";\nimport { loadingJSON } from \"./workspace-management/defaultWorkspaceJSON\";\nimport { useLostConnection } from \"@vuu-ui/vuu-data-react\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n // StackLayout is loaded just to force component registration, we know it will be\n // required when default layout is instantiated. This is only required in prod\n // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n if (typeof StackLayout !== \"function\") {\n console.warn(\n \"StackLayout module not loaded, will be unable to deserialize from layout JSON\",\n );\n }\n}\n\nconst { error } = logger(\"Shell\");\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n shellLayoutProps?: ShellLayoutProps;\n userSettingsSchema?: SettingsSchema;\n workspaceProps?: WorkspaceProps;\n children?: ReactNode;\n logout?: () => void;\n saveUrl?: string;\n serverUrl?: string;\n user: VuuUser;\n}\n\nconst defaultAppHeader = <AppHeader />;\n\nconst getAppHeader = (shellLayoutProps?: ShellLayoutProps) =>\n shellLayoutProps?.appHeader ?? defaultAppHeader;\n\nconst defaultHTMLAttributes: HTMLAttributes<HTMLDivElement> = {\n className: \"vuuShell\",\n};\n\nconst getHTMLAttributes = (props?: ShellLayoutProps) => {\n if (props?.htmlAttributes) {\n return {\n ...defaultHTMLAttributes,\n ...props.htmlAttributes,\n };\n } else {\n return defaultHTMLAttributes;\n }\n};\n\nconst VuuApplication = ({\n shellLayoutProps: ShellLayoutProps,\n children,\n}: Omit<\n ShellProps,\n \"ContentLayoutProps\" | \"loginUrl\" | \"userSettingsSchema\" | \"workspaceProps\"\n>) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-shell\",\n css: shellCss,\n window: targetWindow,\n });\n\n const { workspaceJSON, saveApplicationLayout } = useWorkspace();\n\n const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();\n\n const handleLayoutChange = useCallback<LayoutChangeHandler>(\n (layout) => {\n try {\n saveApplicationLayout(layout);\n } catch {\n error?.(\"Failed to save layout\");\n }\n },\n [saveApplicationLayout],\n );\n\n const isLayoutLoading = workspaceJSON === loadingJSON;\n\n const initialLayout = useShellLayout({\n ...ShellLayoutProps,\n appHeader: getAppHeader(ShellLayoutProps),\n htmlAttributes: getHTMLAttributes(ShellLayoutProps),\n });\n\n useLostConnection();\n\n return isLayoutLoading ? null : (\n <ContextMenuProvider\n menuActionHandler={handleMenuAction}\n menuBuilder={buildMenuOptions}\n >\n <LayoutProvider\n workspaceJSON={workspaceJSON}\n onLayoutChange={handleLayoutChange}\n >\n {initialLayout}\n </LayoutProvider>\n {children}\n </ContextMenuProvider>\n );\n};\n\nexport const Shell = ({\n logout,\n user,\n userSettingsSchema,\n workspaceProps,\n ...props\n}: ShellProps) => {\n // If user has provided an implementation of IPersistenceManager\n // by wrapping higher level PersistenceProvider, use it, otw\n // default to LocalPersistenceManager\n const persistenceManager = usePersistenceManager();\n const localPersistenceManager = useMemo<\n IPersistenceManager | undefined\n >(() => {\n if (persistenceManager) {\n return undefined;\n }\n console.log(\n `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`,\n );\n return new LocalPersistenceManager(`vuu/${user.username}`);\n }, [persistenceManager, user.username]);\n\n // ApplicationProvider must go outside Dialog and Notification providers\n // ApplicationProvider injects the SaltProvider and this must be the root\n // SaltProvider.\n\n const shellProviders = (\n <ApplicationProvider\n density=\"high\"\n logout={logout}\n theme=\"vuu-theme\"\n user={user}\n userSettingsSchema={userSettingsSchema}\n >\n <WorkspaceProvider {...workspaceProps}>\n <ModalProvider>\n <NotificationsProvider>\n <VuuApplication {...props} user={user} />\n </NotificationsProvider>\n </ModalProvider>\n </WorkspaceProvider>\n </ApplicationProvider>\n );\n\n if (persistenceManager) {\n return shellProviders;\n } else {\n return (\n <PersistenceProvider persistenceManager={localPersistenceManager}>\n {shellProviders}\n </PersistenceProvider>\n );\n }\n};\n"],"names":["ShellLayoutProps"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var themeSwitchCss = "\n.vuuThemeSwitch {\n --saltButton-minWidth: 22px;\n --svg-light: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z\"/></svg>');\n --svg-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z\"/></svg>');\n padding: 2px;\n}\n\n.salt-density-high .vuuThemeSwitch {\n --saltButton-minWidth: 16px;\n --saltButton-width: 18px;\n --vuuThemeSwitch-iconSize: 16px;\n}\n\n.vuuThemeSwitch [data-icon] {\n --vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px);\n}\n\n.vuuThemeSwitch [data-icon='light'] {\n --vuu-icon-svg: var(--svg-light);\n}\n.vuuThemeSwitch [data-icon='dark'] {\n --vuu-icon-svg: var(--svg-dark);\n}\n\n.vuuThemeSwitch .saltToggleButton {\n height: 20px;\n width: 20px;\n}\n\n";
2
-
3
- export { themeSwitchCss as default };
4
- //# sourceMappingURL=ThemeSwitch.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemeSwitch.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,54 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import cx from 'clsx';
3
- import { useControlled, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
4
- import { useComponentCssInjection } from '@salt-ds/styles';
5
- import { useWindow } from '@salt-ds/window';
6
- import { useCallback } from 'react';
7
- import themeSwitchCss from './ThemeSwitch.css.js';
8
-
9
- const classBase = "vuuThemeSwitch";
10
- const ThemeSwitch = ({
11
- className: classNameProp,
12
- defaultMode: defaultModeProp,
13
- mode: modeProp,
14
- onChange,
15
- ...htmlAttributes
16
- }) => {
17
- const targetWindow = useWindow();
18
- useComponentCssInjection({
19
- testId: "vuu-theme-switch",
20
- css: themeSwitchCss,
21
- window: targetWindow
22
- });
23
- const [mode, setMode] = useControlled({
24
- controlled: modeProp,
25
- default: defaultModeProp ?? "light",
26
- name: "ThemeSwitch",
27
- state: "mode"
28
- });
29
- const handleChangeSecondary = useCallback(
30
- (evt) => {
31
- const { value } = evt.target;
32
- setMode(value);
33
- onChange(value);
34
- },
35
- [onChange, setMode]
36
- );
37
- const className = cx(classBase, classNameProp);
38
- return /* @__PURE__ */ jsxs(
39
- ToggleButtonGroup,
40
- {
41
- className,
42
- ...htmlAttributes,
43
- onChange: handleChangeSecondary,
44
- value: mode,
45
- children: [
46
- /* @__PURE__ */ jsx(ToggleButton, { "aria-label": "alert", "data-icon": "light", value: "light" }),
47
- /* @__PURE__ */ jsx(ToggleButton, { "aria-label": "home", "data-icon": "dark", value: "dark" })
48
- ]
49
- }
50
- );
51
- };
52
-
53
- export { ThemeSwitch };
54
- //# sourceMappingURL=ThemeSwitch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemeSwitch.js","sources":["../../../../packages/vuu-shell/src/theme-switch/ThemeSwitch.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ToggleButton, ToggleButtonGroup, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, SyntheticEvent, useCallback } from \"react\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\n\nimport themeSwitchCss from \"./ThemeSwitch.css\";\n\nconst classBase = \"vuuThemeSwitch\";\nexport interface ThemeSwitchProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n defaultMode?: ThemeMode;\n mode?: ThemeMode;\n onChange: (mode: ThemeMode) => void;\n}\n\nexport const ThemeSwitch = ({\n className: classNameProp,\n defaultMode: defaultModeProp,\n mode: modeProp,\n onChange,\n ...htmlAttributes\n}: ThemeSwitchProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-theme-switch\",\n css: themeSwitchCss,\n window: targetWindow,\n });\n\n const [mode, setMode] = useControlled<ThemeMode>({\n controlled: modeProp,\n default: defaultModeProp ?? \"light\",\n name: \"ThemeSwitch\",\n state: \"mode\",\n });\n\n const handleChangeSecondary = useCallback(\n (evt: SyntheticEvent<HTMLButtonElement>) => {\n const { value } = evt.target as HTMLButtonElement;\n setMode(value as ThemeMode);\n onChange(value as ThemeMode);\n },\n [onChange, setMode],\n );\n const className = cx(classBase, classNameProp);\n return (\n <ToggleButtonGroup\n className={className}\n {...htmlAttributes}\n onChange={handleChangeSecondary}\n value={mode}\n >\n <ToggleButton aria-label=\"alert\" data-icon=\"light\" value=\"light\" />\n <ToggleButton aria-label=\"home\" data-icon=\"dark\" value=\"dark\" />\n </ToggleButtonGroup>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,SAAY,GAAA,gBAAA;AAQX,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,WAAa,EAAA,eAAA;AAAA,EACb,IAAM,EAAA,QAAA;AAAA,EACN,QAAA;AAAA,EACA,GAAG;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAyB,CAAA;AAAA,IAC/C,UAAY,EAAA,QAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,OAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,OAAA,CAAQ,KAAkB,CAAA;AAC1B,MAAA,QAAA,CAAS,KAAkB,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,GACpB;AACA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA;AAC7C,EACE,uBAAA,IAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACJ,QAAU,EAAA,qBAAA;AAAA,MACV,KAAO,EAAA,IAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,gBAAa,YAAW,EAAA,OAAA,EAAQ,WAAU,EAAA,OAAA,EAAQ,OAAM,OAAQ,EAAA,CAAA;AAAA,4BAChE,YAAa,EAAA,EAAA,YAAA,EAAW,QAAO,WAAU,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA;AAAA;AAAA;AAAA,GAChE;AAEJ;;;;"}
@@ -1,4 +0,0 @@
1
- var settingsFormCss = ".vuuSettingsForm {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-200);\n}\n";
2
-
3
- export { settingsFormCss as default };
4
- //# sourceMappingURL=SettingsForm.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SettingsForm.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,162 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { VuuInput } from '@vuu-ui/vuu-ui-controls';
3
- import { getFieldName } from '@vuu-ui/vuu-utils';
4
- import { Switch, ToggleButtonGroup, ToggleButton, Dropdown, Option, FormField, FormFieldLabel } from '@salt-ds/core';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import { useWindow } from '@salt-ds/window';
7
- import cx from 'clsx';
8
- import { useState, useCallback } from 'react';
9
- import settingsFormCss from './SettingsForm.css.js';
10
-
11
- const isOption = (value) => typeof value === "object" && "label" in value && "label" in value;
12
- const isBooleanProperty = (property) => property.type === "boolean";
13
- const isStringOrNumber = (value) => typeof value === "string" || typeof value === "number";
14
- const getValueAndLabel = (value) => isOption(value) ? [value.value, value.label] : [value, value];
15
- const defaultPropertyValue = {
16
- boolean: false,
17
- number: 0,
18
- string: ""
19
- };
20
- const classBase = "vuuSettingsForm";
21
- function FormControl({
22
- property,
23
- changeHandler,
24
- selectHandler,
25
- inputHandler,
26
- currentValue = property.defaultValue ?? defaultPropertyValue[property.type]
27
- }) {
28
- const [value, setValue] = useState(currentValue);
29
- if (isBooleanProperty(property)) {
30
- const checked = typeof currentValue === "boolean" ? currentValue : property.defaultValue ?? false;
31
- return /* @__PURE__ */ jsx(Switch, { checked, onChange: changeHandler });
32
- }
33
- if (Array.isArray(property.values)) {
34
- if (property.values.length <= 2) {
35
- return /* @__PURE__ */ jsx(
36
- ToggleButtonGroup,
37
- {
38
- value: currentValue,
39
- onChange: changeHandler,
40
- children: property.values.map((valueOrOption) => {
41
- const [value2, label] = getValueAndLabel(valueOrOption);
42
- return /* @__PURE__ */ jsx(ToggleButton, { value: value2, children: label }, value2);
43
- })
44
- }
45
- );
46
- } else if (property.values.length > 2) {
47
- return /* @__PURE__ */ jsx(
48
- Dropdown,
49
- {
50
- value: currentValue,
51
- onSelectionChange: selectHandler,
52
- children: property.values.map((valueOrOption) => {
53
- const [value2, label] = getValueAndLabel(valueOrOption);
54
- return /* @__PURE__ */ jsx(
55
- Option,
56
- {
57
- value: label,
58
- "data-field": property.name
59
- },
60
- value2
61
- );
62
- })
63
- }
64
- );
65
- }
66
- } else {
67
- const valid = isValidInput(currentValue, property.type);
68
- const errorMessage = getTooltipContent(property.type, valid);
69
- return /* @__PURE__ */ jsx(
70
- VuuInput,
71
- {
72
- errorMessage,
73
- onCommit: inputHandler,
74
- onChange: (e) => setValue(e.target.value),
75
- value
76
- },
77
- property.name
78
- );
79
- }
80
- return null;
81
- }
82
- const isValidInput = (value, type) => {
83
- if (value === "") {
84
- return void 0;
85
- }
86
- if (type === "string") {
87
- return "success";
88
- } else if (type === "number") {
89
- if (Number.isNaN(Number(value))) {
90
- return "error";
91
- }
92
- return "success";
93
- }
94
- };
95
- function getTooltipContent(type, valid) {
96
- if (valid === "error") {
97
- if (type === "number") {
98
- return /* @__PURE__ */ jsx("p", { children: "Field is expecting a number" });
99
- } else if (type === "string") {
100
- return /* @__PURE__ */ jsx("p", { children: "Field is expecting a string" });
101
- } else {
102
- return /* @__PURE__ */ jsx("p", { children: "Please contact Admin for more information on expected type" });
103
- }
104
- } else {
105
- return void 0;
106
- }
107
- }
108
- const SettingsForm = ({
109
- className,
110
- settingsSchema,
111
- settings,
112
- onSettingChanged,
113
- ...htmlAttributes
114
- }) => {
115
- const targetWindow = useWindow();
116
- useComponentCssInjection({
117
- testId: "vuu-settings-form",
118
- css: settingsFormCss,
119
- window: targetWindow
120
- });
121
- const changeHandler = useCallback(
122
- (event) => {
123
- const fieldName = getFieldName(event.target);
124
- const { checked, value } = event.target;
125
- onSettingChanged(fieldName, checked ?? value);
126
- },
127
- [onSettingChanged]
128
- );
129
- const selectHandler = useCallback(
130
- (event, [selected]) => {
131
- const fieldName = getFieldName(event.target);
132
- onSettingChanged(fieldName, selected);
133
- },
134
- [onSettingChanged]
135
- );
136
- const inputHandler = useCallback(
137
- (event) => {
138
- const fieldName = getFieldName(event.target);
139
- const { value } = event.target;
140
- if (!Number.isNaN(Number(value)) && value != "") {
141
- const numValue = Number(value);
142
- onSettingChanged(fieldName, numValue);
143
- } else {
144
- onSettingChanged(fieldName, value);
145
- }
146
- },
147
- [onSettingChanged]
148
- );
149
- return /* @__PURE__ */ jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: settingsSchema.properties.map((property) => /* @__PURE__ */ jsxs(FormField, { "data-field": property.name, children: [
150
- /* @__PURE__ */ jsx(FormFieldLabel, { children: property.label }),
151
- FormControl({
152
- property,
153
- changeHandler,
154
- selectHandler,
155
- inputHandler,
156
- currentValue: settings[property.name]
157
- })
158
- ] }, property.name)) });
159
- };
160
-
161
- export { FormControl, SettingsForm, isBooleanProperty, isOption, isStringOrNumber };
162
- //# sourceMappingURL=SettingsForm.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SettingsForm.js","sources":["../../../../packages/vuu-shell/src/user-settings/SettingsForm.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { getFieldName, Settings } from \"@vuu-ui/vuu-utils\";\nimport {\n Dropdown,\n DropdownProps,\n FormField,\n FormFieldLabel,\n Option,\n Switch,\n ToggleButton,\n ToggleButtonGroup,\n ToggleButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n FormEventHandler,\n HTMLAttributes,\n SyntheticEvent,\n useCallback,\n useState,\n} from \"react\";\n\nimport settingsFormCss from \"./SettingsForm.css\";\n\nexport interface SettingsSchema {\n properties: SettingsProperty[];\n}\n\nexport type Option<T> = { label: string; value: T };\n\nexport const isOption = (\n value: Option<number | string> | number | string,\n): value is Option<number | string> =>\n typeof value === \"object\" && \"label\" in value && \"label\" in value;\n\nexport interface BaseProperty {\n name: string;\n label: string;\n}\n\nexport interface StringProperty extends BaseProperty {\n values?: string[] | Option<string>[];\n defaultValue?: string;\n type: \"string\";\n}\nexport interface NumericProperty extends BaseProperty {\n values?: number[] | Option<number>[];\n defaultValue?: number;\n type: \"number\";\n}\nexport interface BooleanProperty extends BaseProperty {\n defaultValue?: boolean;\n type: \"boolean\";\n}\n\nexport type SettingsProperty =\n | StringProperty\n | NumericProperty\n | BooleanProperty;\n\nexport const isBooleanProperty = (\n property: SettingsProperty,\n): property is BooleanProperty => property.type === \"boolean\";\n\nexport const isStringOrNumber = (value: unknown): value is string | number =>\n typeof value === \"string\" || typeof value === \"number\";\n\nconst getValueAndLabel = (value: string | number | Option<string | number>) =>\n isOption(value) ? [value.value, value.label] : [value, value];\n\nconst defaultPropertyValue: Record<\n SettingsProperty[\"type\"],\n VuuRowDataItemType\n> = {\n boolean: false,\n number: 0,\n string: \"\",\n};\n\nconst classBase = \"vuuSettingsForm\";\n\n// Determine the form control type to be displayed\nexport function FormControl({\n property,\n changeHandler,\n selectHandler,\n inputHandler,\n currentValue = property.defaultValue ?? defaultPropertyValue[property.type],\n}: {\n property: SettingsProperty;\n changeHandler: FormEventHandler;\n selectHandler: DropdownProps[\"onSelectionChange\"];\n inputHandler: FormEventHandler;\n currentValue: VuuRowDataItemType;\n}) {\n const [value, setValue] = useState(currentValue);\n if (isBooleanProperty(property)) {\n const checked =\n typeof currentValue === \"boolean\"\n ? currentValue\n : (property.defaultValue ?? false);\n\n return <Switch checked={checked} onChange={changeHandler}></Switch>;\n }\n // Toggle Box for 1 or 2 values\n if (Array.isArray(property.values)) {\n if (property.values.length <= 2) {\n return (\n <ToggleButtonGroup\n value={currentValue as ToggleButtonGroupProps[\"value\"]}\n onChange={changeHandler}\n >\n {property.values.map((valueOrOption) => {\n const [value, label] = getValueAndLabel(valueOrOption);\n return (\n <ToggleButton key={value} value={value}>\n {label}\n </ToggleButton>\n );\n })}\n </ToggleButtonGroup>\n );\n } else if (property.values.length > 2) {\n return (\n <Dropdown\n value={currentValue as DropdownProps[\"value\"]}\n onSelectionChange={selectHandler}\n >\n {property.values.map((valueOrOption) => {\n const [value, label] = getValueAndLabel(valueOrOption);\n return (\n <Option\n value={label}\n key={value}\n data-field={property.name}\n ></Option>\n );\n })}\n </Dropdown>\n );\n }\n } else {\n const valid = isValidInput(currentValue, property.type);\n const errorMessage = getTooltipContent(property.type, valid);\n return (\n <VuuInput\n errorMessage={errorMessage}\n key={property.name}\n onCommit={inputHandler}\n onChange={(e) => setValue((e.target as HTMLInputElement).value)}\n value={value as string}\n />\n );\n }\n return null;\n}\n\n//Validation logic for input boxes\nconst isValidInput = (value: unknown, type: unknown) => {\n if (value === \"\") {\n return undefined;\n }\n if (type === \"string\") {\n return \"success\";\n } else if (type === \"number\") {\n if (Number.isNaN(Number(value))) {\n return \"error\";\n }\n return \"success\";\n }\n};\n\n//Function to Generate Tooltip Content\nfunction getTooltipContent(type: string, valid: string | undefined) {\n if (valid === \"error\") {\n if (type === \"number\") {\n return <p>Field is expecting a number</p>;\n } else if (type === \"string\") {\n return <p>Field is expecting a string</p>;\n } else {\n return <p>Please contact Admin for more information on expected type</p>;\n }\n } else {\n return undefined;\n }\n}\n\nexport interface SettingsFormProps extends HTMLAttributes<HTMLDivElement> {\n settingsSchema: SettingsSchema;\n settings: Settings;\n onSettingChanged: (\n propertyName: string,\n value: string | number | boolean,\n ) => void;\n}\n\n// Generates application settings form component\nexport const SettingsForm = ({\n className,\n settingsSchema,\n settings,\n onSettingChanged,\n ...htmlAttributes\n}: SettingsFormProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-settings-form\",\n css: settingsFormCss,\n window: targetWindow,\n });\n\n // Change Handler for toggle and switch buttons\n const changeHandler = useCallback<FormEventHandler>(\n (event) => {\n const fieldName = getFieldName(event.target);\n const { checked, value } = event.target as HTMLInputElement;\n onSettingChanged(fieldName, checked ?? value);\n },\n [onSettingChanged],\n );\n\n // Change handler for selection form controls\n const selectHandler = useCallback(\n (event: SyntheticEvent, [selected]: string[]) => {\n const fieldName = getFieldName(event.target);\n onSettingChanged(fieldName, selected);\n },\n [onSettingChanged],\n );\n\n // Change Handler for input boxes\n const inputHandler = useCallback<FormEventHandler>(\n (event) => {\n const fieldName = getFieldName(event.target);\n const { value } = event.target as HTMLInputElement;\n if (!Number.isNaN(Number(value)) && value != \"\") {\n const numValue = Number(value);\n onSettingChanged(fieldName, numValue);\n } else {\n onSettingChanged(fieldName, value);\n }\n },\n [onSettingChanged],\n );\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n {settingsSchema.properties.map((property) => (\n <FormField data-field={property.name} key={property.name}>\n <FormFieldLabel>{property.label}</FormFieldLabel>\n {FormControl({\n property,\n changeHandler,\n selectHandler,\n inputHandler,\n currentValue: settings[property.name],\n })}\n </FormField>\n ))}\n </div>\n );\n};\n"],"names":["value"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var userSettingsPanelCss = ".vuuUserSettingsPanel {\n height: 100%;\n overflow: auto;\n}\n";
2
-
3
- export { userSettingsPanelCss as default };
4
- //# sourceMappingURL=UserSettingsPanel.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UserSettingsPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,40 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { useComponentCssInjection } from '@salt-ds/styles';
3
- import { useWindow } from '@salt-ds/window';
4
- import { useApplicationSettings } from '../application-provider/ApplicationProvider.js';
5
- import { SettingsForm } from './SettingsForm.js';
6
- import cx from 'clsx';
7
- import userSettingsPanelCss from './UserSettingsPanel.css.js';
8
-
9
- const classBase = "vuuUserSettingsPanel";
10
- const UserSettingsPanel = ({
11
- ...htmlAttributes
12
- }) => {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "vuu-user-settings-panel",
16
- css: userSettingsPanelCss,
17
- window: targetWindow
18
- });
19
- const {
20
- onUserSettingChanged,
21
- userSettings = {},
22
- userSettingsSchema
23
- } = useApplicationSettings();
24
- if (userSettingsSchema) {
25
- return /* @__PURE__ */ jsx("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: /* @__PURE__ */ jsx(
26
- SettingsForm,
27
- {
28
- settings: userSettings,
29
- settingsSchema: userSettingsSchema,
30
- onSettingChanged: onUserSettingChanged
31
- }
32
- ) });
33
- } else {
34
- console.log("no settingsSchema provided to UserSettingsPanel");
35
- return null;
36
- }
37
- };
38
-
39
- export { UserSettingsPanel };
40
- //# sourceMappingURL=UserSettingsPanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UserSettingsPanel.js","sources":["../../../../packages/vuu-shell/src/user-settings/UserSettingsPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { useApplicationSettings } from \"../application-provider\";\nimport { SettingsForm } from \"./SettingsForm\";\nimport cx from \"clsx\";\n\nimport userSettingsPanelCss from \"./UserSettingsPanel.css\";\n\nexport type UserSettingsPanelProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuUserSettingsPanel\";\n\nexport const UserSettingsPanel = ({\n ...htmlAttributes\n}: UserSettingsPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-user-settings-panel\",\n css: userSettingsPanelCss,\n window: targetWindow,\n });\n\n const {\n onUserSettingChanged,\n userSettings = {},\n userSettingsSchema,\n } = useApplicationSettings();\n\n // Without a schema, we can't render a form\n // We could render a list of input boxes but lets require a schema for now.\n if (userSettingsSchema) {\n return (\n <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n <SettingsForm\n settings={userSettings}\n settingsSchema={userSettingsSchema}\n onSettingChanged={onUserSettingChanged}\n />\n </div>\n );\n } else {\n console.log(\"no settingsSchema provided to UserSettingsPanel\");\n return null;\n }\n};\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,sBAAA;AAEX,MAAM,oBAAoB,CAAC;AAAA,EAChC,GAAG;AACL,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB;AAAA,MACE,sBAAuB,EAAA;AAI3B,EAAA,IAAI,kBAAoB,EAAA;AACtB,IACE,uBAAA,GAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,eAAe,CAC/D,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,YAAA;AAAA,QACV,cAAgB,EAAA,kBAAA;AAAA,QAChB,gBAAkB,EAAA;AAAA;AAAA,KAEtB,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,IAAI,iDAAiD,CAAA;AAC7D,IAAO,OAAA,IAAA;AAAA;AAEX;;;;"}
@@ -1,4 +0,0 @@
1
- var layoutListCss = ".vuuLayoutList {\n --vuuMeasuredContainer-flex: 1 1 1px;\n --vuuList-borderStyle: none;\n --vuuListItem-separator-color: transparent;\n\n background: var(\n --vuuLayoutList-background,\n var(--salt-container-primary-background)\n );\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: 0 var(--vuuLayoutList-padding, 0);\n\n .vuuListItem {\n border-bottom: none;\n justify-content: space-between;\n }\n}\n\n.vuuLayoutList-header {\n align-items: center;\n display: flex;\n flex: 0 0 48px;\n font-weight: 700;\n line-height: 2;\n}\n\n.vuuLayoutList-content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-size: 12px;\n font-weight: 700;\n overflow: auto;\n}\n\n.vuuLayoutList-group {\n --vuuMeasuredContainer-flex: 0 0 auto;\n\n display: flex;\n flex-direction: column;\n\n .vuuLayoutList-groupHeader {\n flex: 0 0 32px;\n padding: 8px 0;\n }\n\n .vuuPalette {\n flex: 1 1 auto;\n height: auto;\n }\n}\n\n.vuuLayoutList-group:first-child {\n margin-top: 12px;\n}\n\n.vuuLayoutList-group + .vuuLayoutList-group {\n margin-top: 24px;\n}\n\n/* .vuuLayoutList-groupName {\n display: flex;\n padding-top: 24px;\n width: var(--vuuLayoutList-width);\n font-feature-settings: \"ss02\" on, \"ss01\" on, \"salt\" on, \"liga\" off;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 200%;\n letter-spacing: 0.48px;\n text-transform: uppercase;\n} */\n\n.vuuLayoutList-screenshot {\n width: 60px;\n height: 45.6px;\n border: 1px solid #d6d7da;\n}\n\n.vuuLayoutList-layoutDetails {\n color: var(--light-text-secondary, #606477);\n font-size: 10px;\n font-weight: 600;\n line-height: 150%;\n}\n";
2
-
3
- export { layoutListCss as default };
4
- //# sourceMappingURL=LayoutList.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LayoutList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,114 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useCallback, createElement, useMemo } from 'react';
3
- import { IconButton } from '@vuu-ui/vuu-ui-controls';
4
- import { ListBox, Option } from '@salt-ds/core';
5
- import { VuuShellLocation } from '@vuu-ui/vuu-utils';
6
- import { useComponentCssInjection } from '@salt-ds/styles';
7
- import { useWindow } from '@salt-ds/window';
8
- import cx from 'clsx';
9
- import { LayoutTile } from './LayoutTile.js';
10
- import { useWorkspace } from './WorkspaceProvider.js';
11
- import { useLayouts } from '../feature-and-layout-provider/FeatureAndLayoutProvider.js';
12
- import { useLayoutProviderDispatch, layoutFromJson } from '@vuu-ui/vuu-layout';
13
- import layoutListCss from './LayoutList.css.js';
14
-
15
- const classBase = "vuuLayoutList";
16
- const NO_SELECTION = [];
17
- const LayoutList = ({
18
- className,
19
- title,
20
- ...htmlAttributes
21
- }) => {
22
- const targetWindow = useWindow();
23
- useComponentCssInjection({
24
- testId: "vuu-layout-list",
25
- css: layoutListCss,
26
- window: targetWindow
27
- });
28
- const { layoutMetadata, loadLayoutById } = useWorkspace();
29
- const { systemLayouts } = useLayouts();
30
- const handleLoadLayout = useCallback(
31
- (layoutId) => {
32
- if (layoutId) {
33
- loadLayoutById(layoutId);
34
- }
35
- },
36
- [loadLayoutById]
37
- );
38
- const dispatch = useLayoutProviderDispatch();
39
- const handleLoadSysLayout = (layoutId, layoutJSON) => {
40
- if (layoutJSON) {
41
- dispatch({
42
- type: "add",
43
- path: `#${VuuShellLocation.Workspace}`,
44
- component: layoutFromJson(layoutJSON, "0")
45
- });
46
- } else {
47
- throw Error("layoutJSON is required for system layouts");
48
- }
49
- };
50
- const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
51
- if (acc[cur.group]) {
52
- return {
53
- ...acc,
54
- [cur.group]: [...acc[cur.group], cur]
55
- };
56
- }
57
- return {
58
- ...acc,
59
- [cur.group]: [cur]
60
- };
61
- }, {});
62
- let sysContent = [];
63
- if (systemLayouts) {
64
- sysContent = [
65
- /* @__PURE__ */ jsxs("div", { className: `${classBase}-group`, children: [
66
- /* @__PURE__ */ jsx("div", { className: `${classBase}-groupHeader`, children: "System Layout" }),
67
- /* @__PURE__ */ jsx(ListBox, { selected: NO_SELECTION, children: systemLayouts.map((layout) => /* @__PURE__ */ jsx(Option, { value: layout, children: /* @__PURE__ */ createElement(
68
- LayoutTile,
69
- {
70
- ...htmlAttributes,
71
- key: layout.id,
72
- metadata: layout,
73
- onLoadLayout: handleLoadSysLayout
74
- }
75
- ) }, layout.id)) })
76
- ] }, 0)
77
- ];
78
- }
79
- const content = useMemo(() => {
80
- return Object.entries(layoutsByGroup).map(
81
- ([heading, layoutMetadata2], index) => /* @__PURE__ */ jsxs("div", { className: `${classBase}-group`, children: [
82
- /* @__PURE__ */ jsx("div", { className: `${classBase}-groupHeader`, children: heading }),
83
- /* @__PURE__ */ jsx(ListBox, { selected: NO_SELECTION, children: layoutMetadata2.map((layout) => /* @__PURE__ */ jsxs(Option, { value: layout, children: [
84
- /* @__PURE__ */ createElement(
85
- LayoutTile,
86
- {
87
- ...htmlAttributes,
88
- key: layout.id,
89
- metadata: layout,
90
- onLoadLayout: handleLoadLayout
91
- }
92
- ),
93
- /* @__PURE__ */ jsx(
94
- IconButton,
95
- {
96
- className: `${classBase}-menu`,
97
- "data-embedded": true,
98
- icon: "more-vert",
99
- appearance: "transparent",
100
- sentiment: "neutral"
101
- }
102
- )
103
- ] }, layout.id)) })
104
- ] }, index)
105
- );
106
- }, [handleLoadLayout, htmlAttributes, layoutsByGroup]);
107
- return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: [
108
- /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: title }),
109
- /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children: [sysContent, ...content] })
110
- ] });
111
- };
112
-
113
- export { LayoutList };
114
- //# sourceMappingURL=LayoutList.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LayoutList.js","sources":["../../../../packages/vuu-shell/src/workspace-management/LayoutList.tsx"],"sourcesContent":["import { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { ListBox, Option } from \"@salt-ds/core\";\nimport {\n LayoutJSON,\n LayoutMetadata,\n VuuShellLocation,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactElement, useCallback, useMemo } from \"react\";\nimport { LayoutTile } from \"./LayoutTile\";\nimport { useWorkspace } from \"./WorkspaceProvider\";\nimport { useLayouts } from \"../feature-and-layout-provider\";\nimport { layoutFromJson, useLayoutProviderDispatch } from \"@vuu-ui/vuu-layout\";\n\nimport layoutListCss from \"./LayoutList.css\";\n\ntype LayoutGroups = {\n [groupName: string]: LayoutMetadata[];\n};\n\nconst classBase = \"vuuLayoutList\";\n\nconst NO_SELECTION: never[] = [];\n\nexport const LayoutList = ({\n className,\n title,\n ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement>) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-layout-list\",\n css: layoutListCss,\n window: targetWindow,\n });\n\n const { layoutMetadata, loadLayoutById } = useWorkspace();\n const { systemLayouts } = useLayouts();\n\n const handleLoadLayout = useCallback(\n (layoutId?: string) => {\n if (layoutId) {\n loadLayoutById(layoutId);\n }\n },\n [loadLayoutById],\n );\n\n const dispatch = useLayoutProviderDispatch();\n const handleLoadSysLayout = (layoutId?: string, layoutJSON?: LayoutJSON) => {\n if (layoutJSON) {\n dispatch({\n type: \"add\",\n path: `#${VuuShellLocation.Workspace}`,\n component: layoutFromJson(layoutJSON, \"0\"),\n });\n } else {\n throw Error(\"layoutJSON is required for system layouts\");\n }\n };\n\n const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {\n if (acc[cur.group]) {\n return {\n ...acc,\n [cur.group]: [...acc[cur.group], cur],\n };\n }\n return {\n ...acc,\n [cur.group]: [cur],\n };\n }, {});\n\n let sysContent: ReactElement[] = [];\n if (systemLayouts) {\n sysContent = [\n <div className={`${classBase}-group`} key={0}>\n <div className={`${classBase}-groupHeader`}>System Layout</div>\n <ListBox selected={NO_SELECTION}>\n {systemLayouts.map((layout) => (\n <Option value={layout} key={layout.id}>\n <LayoutTile\n {...htmlAttributes}\n key={layout.id}\n metadata={layout}\n onLoadLayout={handleLoadSysLayout}\n />\n </Option>\n ))}\n </ListBox>\n </div>,\n ];\n }\n\n const content = useMemo<ReactElement[]>(() => {\n return Object.entries(layoutsByGroup).map(\n ([heading, layoutMetadata], index) => (\n <div className={`${classBase}-group`} key={index}>\n <div className={`${classBase}-groupHeader`}>{heading}</div>\n <ListBox selected={NO_SELECTION}>\n {layoutMetadata.map((layout) => (\n <Option value={layout} key={layout.id}>\n <LayoutTile\n {...htmlAttributes}\n key={layout.id}\n metadata={layout}\n onLoadLayout={handleLoadLayout}\n />\n <IconButton\n className={`${classBase}-menu`}\n data-embedded\n icon=\"more-vert\"\n appearance=\"transparent\"\n sentiment=\"neutral\"\n />\n </Option>\n ))}\n </ListBox>\n </div>\n ),\n );\n }, [handleLoadLayout, htmlAttributes, layoutsByGroup]);\n\n return (\n <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n <div className={`${classBase}-header`}>{title}</div>\n <div className={`${classBase}-content`}>{[sysContent, ...content]}</div>\n </div>\n );\n};\n"],"names":["layoutMetadata"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var layoutTileCss = ".vuuLayoutTile-layoutTile {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 0px;\n flex: 1 1 auto;\n cursor: pointer;\n}\n\n.vuuLayoutTile-layoutName {\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.vuuLayoutTile-screenshot {\n width: 60px;\n height: 45.6px;\n border: 1px solid #d6d7da;\n}\n\n.vuuLayoutTile-layoutDetails {\n color: var(--salt-content-secondary-foreground);\n font-size: 10px;\n font-weight: 600;\n line-height: 150%;\n}\n";
2
-
3
- export { layoutTileCss as default };
4
- //# sourceMappingURL=LayoutTile.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LayoutTile.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}