@vuu-ui/vuu-shell 2.1.19-beta.1 → 2.1.19-beta.3

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/cjs/ShellContextProvider.js +25 -0
  2. package/cjs/ShellContextProvider.js.map +1 -0
  3. package/cjs/app-header/AppHeader.css.js +6 -0
  4. package/cjs/app-header/AppHeader.css.js.map +1 -0
  5. package/cjs/app-header/AppHeader.js +118 -0
  6. package/cjs/app-header/AppHeader.js.map +1 -0
  7. package/cjs/application-provider/ApplicationContext.js +17 -0
  8. package/cjs/application-provider/ApplicationContext.js.map +1 -0
  9. package/cjs/application-provider/ApplicationProvider.js +102 -0
  10. package/cjs/application-provider/ApplicationProvider.js.map +1 -0
  11. package/cjs/feature/Feature.js +54 -0
  12. package/cjs/feature/Feature.js.map +1 -0
  13. package/cjs/feature/FeatureErrorBoundary.js +30 -0
  14. package/cjs/feature/FeatureErrorBoundary.js.map +1 -0
  15. package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js +60 -0
  16. package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js.map +1 -0
  17. package/cjs/feature-list/FeatureList.css.js +6 -0
  18. package/cjs/feature-list/FeatureList.css.js.map +1 -0
  19. package/cjs/feature-list/FeatureList.js +109 -0
  20. package/cjs/feature-list/FeatureList.js.map +1 -0
  21. package/cjs/index.js +71 -0
  22. package/cjs/index.js.map +1 -0
  23. package/cjs/left-nav/LeftNav.css.js +6 -0
  24. package/cjs/left-nav/LeftNav.css.js.map +1 -0
  25. package/cjs/left-nav/LeftNav.js +202 -0
  26. package/cjs/left-nav/LeftNav.js.map +1 -0
  27. package/cjs/login/LoginPanel.css.js +6 -0
  28. package/cjs/login/LoginPanel.css.js.map +1 -0
  29. package/cjs/login/LoginPanel.js +110 -0
  30. package/cjs/login/LoginPanel.js.map +1 -0
  31. package/cjs/login/VuuLogo.js +134 -0
  32. package/cjs/login/VuuLogo.js.map +1 -0
  33. package/cjs/persistence-manager/LocalPersistenceManager.js +193 -0
  34. package/cjs/persistence-manager/LocalPersistenceManager.js.map +1 -0
  35. package/cjs/persistence-manager/PersistenceProvider.js +21 -0
  36. package/cjs/persistence-manager/PersistenceProvider.js.map +1 -0
  37. package/cjs/persistence-manager/RemotePersistenceManager.js +165 -0
  38. package/cjs/persistence-manager/RemotePersistenceManager.js.map +1 -0
  39. package/cjs/persistence-manager/StaticPersistenceManager.js +73 -0
  40. package/cjs/persistence-manager/StaticPersistenceManager.js.map +1 -0
  41. package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js +6 -0
  42. package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js.map +1 -0
  43. package/cjs/shell-layout-templates/context-panel/ContextPanel.js +100 -0
  44. package/cjs/shell-layout-templates/context-panel/ContextPanel.js.map +1 -0
  45. package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +51 -0
  46. package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map +1 -0
  47. package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +83 -0
  48. package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map +1 -0
  49. package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +46 -0
  50. package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map +1 -0
  51. package/cjs/shell-layout-templates/side-panel/SidePanel.css.js +6 -0
  52. package/cjs/shell-layout-templates/side-panel/SidePanel.css.js.map +1 -0
  53. package/cjs/shell-layout-templates/side-panel/SidePanel.js +36 -0
  54. package/cjs/shell-layout-templates/side-panel/SidePanel.js.map +1 -0
  55. package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +48 -0
  56. package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map +1 -0
  57. package/cjs/shell-layout-templates/useShellLayout.js +23 -0
  58. package/cjs/shell-layout-templates/useShellLayout.js.map +1 -0
  59. package/cjs/shell.css.js +6 -0
  60. package/cjs/shell.css.js.map +1 -0
  61. package/cjs/shell.js +137 -0
  62. package/cjs/shell.js.map +1 -0
  63. package/cjs/theme-switch/ThemeSwitch.css.js +6 -0
  64. package/cjs/theme-switch/ThemeSwitch.css.js.map +1 -0
  65. package/cjs/theme-switch/ThemeSwitch.js +56 -0
  66. package/cjs/theme-switch/ThemeSwitch.js.map +1 -0
  67. package/cjs/user-settings/SettingsForm.css.js +6 -0
  68. package/cjs/user-settings/SettingsForm.css.js.map +1 -0
  69. package/cjs/user-settings/SettingsForm.js +168 -0
  70. package/cjs/user-settings/SettingsForm.js.map +1 -0
  71. package/cjs/user-settings/UserSettingsPanel.css.js +6 -0
  72. package/cjs/user-settings/UserSettingsPanel.css.js.map +1 -0
  73. package/cjs/user-settings/UserSettingsPanel.js +42 -0
  74. package/cjs/user-settings/UserSettingsPanel.js.map +1 -0
  75. package/cjs/workspace-management/LayoutList.css.js +6 -0
  76. package/cjs/workspace-management/LayoutList.css.js.map +1 -0
  77. package/cjs/workspace-management/LayoutList.js +116 -0
  78. package/cjs/workspace-management/LayoutList.js.map +1 -0
  79. package/cjs/workspace-management/LayoutTile.css.js +6 -0
  80. package/cjs/workspace-management/LayoutTile.css.js.map +1 -0
  81. package/cjs/workspace-management/LayoutTile.js +41 -0
  82. package/cjs/workspace-management/LayoutTile.js.map +1 -0
  83. package/cjs/workspace-management/SaveLayoutPanel.css.js +6 -0
  84. package/cjs/workspace-management/SaveLayoutPanel.css.js.map +1 -0
  85. package/cjs/workspace-management/SaveLayoutPanel.js +128 -0
  86. package/cjs/workspace-management/SaveLayoutPanel.js.map +1 -0
  87. package/cjs/workspace-management/WorkspaceProvider.js +265 -0
  88. package/cjs/workspace-management/WorkspaceProvider.js.map +1 -0
  89. package/cjs/workspace-management/defaultWorkspaceJSON.js +101 -0
  90. package/cjs/workspace-management/defaultWorkspaceJSON.js.map +1 -0
  91. package/cjs/workspace-management/screenshot-utils.js +25 -0
  92. package/cjs/workspace-management/screenshot-utils.js.map +1 -0
  93. package/cjs/workspace-management/useWorkspaceContextMenuItems.js +72 -0
  94. package/cjs/workspace-management/useWorkspaceContextMenuItems.js.map +1 -0
  95. package/esm/ShellContextProvider.js +23 -0
  96. package/esm/ShellContextProvider.js.map +1 -0
  97. package/esm/app-header/AppHeader.css.js +4 -0
  98. package/esm/app-header/AppHeader.css.js.map +1 -0
  99. package/esm/app-header/AppHeader.js +116 -0
  100. package/esm/app-header/AppHeader.js.map +1 -0
  101. package/esm/application-provider/ApplicationContext.js +15 -0
  102. package/esm/application-provider/ApplicationContext.js.map +1 -0
  103. package/esm/application-provider/ApplicationProvider.js +96 -0
  104. package/esm/application-provider/ApplicationProvider.js.map +1 -0
  105. package/esm/feature/Feature.js +52 -0
  106. package/esm/feature/Feature.js.map +1 -0
  107. package/esm/feature/FeatureErrorBoundary.js +28 -0
  108. package/esm/feature/FeatureErrorBoundary.js.map +1 -0
  109. package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js +56 -0
  110. package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js.map +1 -0
  111. package/esm/feature-list/FeatureList.css.js +4 -0
  112. package/esm/feature-list/FeatureList.css.js.map +1 -0
  113. package/esm/feature-list/FeatureList.js +107 -0
  114. package/esm/feature-list/FeatureList.js.map +1 -0
  115. package/esm/index.js +25 -0
  116. package/esm/index.js.map +1 -0
  117. package/esm/left-nav/LeftNav.css.js +4 -0
  118. package/esm/left-nav/LeftNav.css.js.map +1 -0
  119. package/esm/left-nav/LeftNav.js +200 -0
  120. package/esm/left-nav/LeftNav.js.map +1 -0
  121. package/esm/login/LoginPanel.css.js +4 -0
  122. package/esm/login/LoginPanel.css.js.map +1 -0
  123. package/esm/login/LoginPanel.js +108 -0
  124. package/esm/login/LoginPanel.js.map +1 -0
  125. package/esm/login/VuuLogo.js +132 -0
  126. package/esm/login/VuuLogo.js.map +1 -0
  127. package/esm/persistence-manager/LocalPersistenceManager.js +191 -0
  128. package/esm/persistence-manager/LocalPersistenceManager.js.map +1 -0
  129. package/esm/persistence-manager/PersistenceProvider.js +17 -0
  130. package/esm/persistence-manager/PersistenceProvider.js.map +1 -0
  131. package/esm/persistence-manager/RemotePersistenceManager.js +163 -0
  132. package/esm/persistence-manager/RemotePersistenceManager.js.map +1 -0
  133. package/esm/persistence-manager/StaticPersistenceManager.js +71 -0
  134. package/esm/persistence-manager/StaticPersistenceManager.js.map +1 -0
  135. package/esm/shell-layout-templates/context-panel/ContextPanel.css.js +4 -0
  136. package/esm/shell-layout-templates/context-panel/ContextPanel.css.js.map +1 -0
  137. package/esm/shell-layout-templates/context-panel/ContextPanel.js +98 -0
  138. package/esm/shell-layout-templates/context-panel/ContextPanel.js.map +1 -0
  139. package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +49 -0
  140. package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map +1 -0
  141. package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +81 -0
  142. package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map +1 -0
  143. package/esm/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +44 -0
  144. package/esm/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map +1 -0
  145. package/esm/shell-layout-templates/side-panel/SidePanel.css.js +4 -0
  146. package/esm/shell-layout-templates/side-panel/SidePanel.css.js.map +1 -0
  147. package/esm/shell-layout-templates/side-panel/SidePanel.js +34 -0
  148. package/esm/shell-layout-templates/side-panel/SidePanel.js.map +1 -0
  149. package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +46 -0
  150. package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map +1 -0
  151. package/esm/shell-layout-templates/useShellLayout.js +21 -0
  152. package/esm/shell-layout-templates/useShellLayout.js.map +1 -0
  153. package/esm/shell.css.js +4 -0
  154. package/esm/shell.css.js.map +1 -0
  155. package/esm/shell.js +135 -0
  156. package/esm/shell.js.map +1 -0
  157. package/esm/theme-switch/ThemeSwitch.css.js +4 -0
  158. package/esm/theme-switch/ThemeSwitch.css.js.map +1 -0
  159. package/esm/theme-switch/ThemeSwitch.js +54 -0
  160. package/esm/theme-switch/ThemeSwitch.js.map +1 -0
  161. package/esm/user-settings/SettingsForm.css.js +4 -0
  162. package/esm/user-settings/SettingsForm.css.js.map +1 -0
  163. package/esm/user-settings/SettingsForm.js +162 -0
  164. package/esm/user-settings/SettingsForm.js.map +1 -0
  165. package/esm/user-settings/UserSettingsPanel.css.js +4 -0
  166. package/esm/user-settings/UserSettingsPanel.css.js.map +1 -0
  167. package/esm/user-settings/UserSettingsPanel.js +40 -0
  168. package/esm/user-settings/UserSettingsPanel.js.map +1 -0
  169. package/esm/workspace-management/LayoutList.css.js +4 -0
  170. package/esm/workspace-management/LayoutList.css.js.map +1 -0
  171. package/esm/workspace-management/LayoutList.js +114 -0
  172. package/esm/workspace-management/LayoutList.js.map +1 -0
  173. package/esm/workspace-management/LayoutTile.css.js +4 -0
  174. package/esm/workspace-management/LayoutTile.css.js.map +1 -0
  175. package/esm/workspace-management/LayoutTile.js +39 -0
  176. package/esm/workspace-management/LayoutTile.js.map +1 -0
  177. package/esm/workspace-management/SaveLayoutPanel.css.js +4 -0
  178. package/esm/workspace-management/SaveLayoutPanel.css.js.map +1 -0
  179. package/esm/workspace-management/SaveLayoutPanel.js +126 -0
  180. package/esm/workspace-management/SaveLayoutPanel.js.map +1 -0
  181. package/esm/workspace-management/WorkspaceProvider.js +262 -0
  182. package/esm/workspace-management/WorkspaceProvider.js.map +1 -0
  183. package/esm/workspace-management/defaultWorkspaceJSON.js +95 -0
  184. package/esm/workspace-management/defaultWorkspaceJSON.js.map +1 -0
  185. package/esm/workspace-management/screenshot-utils.js +23 -0
  186. package/esm/workspace-management/screenshot-utils.js.map +1 -0
  187. package/esm/workspace-management/useWorkspaceContextMenuItems.js +70 -0
  188. package/esm/workspace-management/useWorkspaceContextMenuItems.js.map +1 -0
  189. package/package.json +18 -16
  190. package/types/feature/FeatureErrorBoundary.d.ts +1 -1
  191. package/types/workspace-management/WorkspaceProvider.d.ts +5 -5
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useWorkspaceContextMenuItems.js","sources":["../../../../packages/vuu-shell/src/workspace-management/useWorkspaceContextMenuItems.tsx"],"sourcesContent":["import {\n ContextMenuItemDescriptor,\n MenuActionHandler,\n MenuBuilder,\n} from \"@vuu-ui/vuu-context-menu\";\nimport { TabContextMenuOptions, useModal } from \"@vuu-ui/vuu-ui-controls\";\nimport { type LayoutMetadataDto } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { SaveLayoutPanel } from \"./SaveLayoutPanel\";\nimport { useWorkspace } from \"./WorkspaceProvider\";\n\nexport const useWorkspaceContextMenuItems = () => {\n const { saveLayout } = useWorkspace();\n\n const { showDialog, closeDialog } = useModal();\n\n const handleCloseDialog = useCallback(() => {\n closeDialog();\n }, [closeDialog]);\n\n const handleSave = useCallback(\n (layoutMetadata: LayoutMetadataDto) => {\n saveLayout(layoutMetadata);\n closeDialog();\n },\n [saveLayout, closeDialog],\n );\n\n const [buildMenuOptions, handleMenuAction] = useMemo<\n [MenuBuilder, MenuActionHandler]\n >(() => {\n return [\n (location, options) => {\n const locations = location.split(\" \");\n const menuDescriptors: ContextMenuItemDescriptor[] = [];\n if (locations.includes(\"workspace-tab\")) {\n menuDescriptors.push(\n {\n label: \"Save Layout\",\n id: \"save-layout\",\n options,\n },\n {\n label: \"Layout Settings\",\n id: \"layout-settings\",\n options,\n },\n );\n }\n return menuDescriptors;\n },\n (menuItemId, options) => {\n if (menuItemId === \"save-layout\") {\n showDialog(\n <SaveLayoutPanel\n onCancel={handleCloseDialog}\n onSave={handleSave}\n componentId={\n (options as TabContextMenuOptions)?.controlledComponentId\n }\n defaultTitle={\n (options as TabContextMenuOptions)?.controlledComponentTitle\n }\n />,\n \"Save Layout\",\n [],\n true,\n );\n return true;\n }\n return false;\n },\n ];\n }, [handleCloseDialog, handleSave, showDialog]);\n\n return {\n buildMenuOptions,\n handleMenuAction,\n };\n};\n"],"names":["useWorkspace","useModal","useCallback","useMemo","jsx","SaveLayoutPanel"],"mappings":";;;;;;;;AAWO,MAAM,+BAA+B,MAAM;AAChD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,8BAAa,EAAA;AAEpC,EAAA,MAAM,EAAE,UAAA,EAAY,WAAY,EAAA,GAAIC,sBAAS,EAAA;AAE7C,EAAM,MAAA,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAY,WAAA,EAAA;AAAA,GACd,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,cAAsC,KAAA;AACrC,MAAA,UAAA,CAAW,cAAc,CAAA;AACzB,MAAY,WAAA,EAAA;AAAA,KACd;AAAA,IACA,CAAC,YAAY,WAAW;AAAA,GAC1B;AAEA,EAAA,MAAM,CAAC,gBAAA,EAAkB,gBAAgB,CAAA,GAAIC,cAE3C,MAAM;AACN,IAAO,OAAA;AAAA,MACL,CAAC,UAAU,OAAY,KAAA;AACrB,QAAM,MAAA,SAAA,GAAY,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA;AACpC,QAAA,MAAM,kBAA+C,EAAC;AACtD,QAAI,IAAA,SAAA,CAAU,QAAS,CAAA,eAAe,CAAG,EAAA;AACvC,UAAgB,eAAA,CAAA,IAAA;AAAA,YACd;AAAA,cACE,KAAO,EAAA,aAAA;AAAA,cACP,EAAI,EAAA,aAAA;AAAA,cACJ;AAAA,aACF;AAAA,YACA;AAAA,cACE,KAAO,EAAA,iBAAA;AAAA,cACP,EAAI,EAAA,iBAAA;AAAA,cACJ;AAAA;AACF,WACF;AAAA;AAEF,QAAO,OAAA,eAAA;AAAA,OACT;AAAA,MACA,CAAC,YAAY,OAAY,KAAA;AACvB,QAAA,IAAI,eAAe,aAAe,EAAA;AAChC,UAAA,UAAA;AAAA,4BACEC,cAAA;AAAA,cAACC,+BAAA;AAAA,cAAA;AAAA,gBACC,QAAU,EAAA,iBAAA;AAAA,gBACV,MAAQ,EAAA,UAAA;AAAA,gBACR,aACG,OAAmC,EAAA,qBAAA;AAAA,gBAEtC,cACG,OAAmC,EAAA;AAAA;AAAA,aAExC;AAAA,YACA,aAAA;AAAA,YACA,EAAC;AAAA,YACD;AAAA,WACF;AACA,UAAO,OAAA,IAAA;AAAA;AAET,QAAO,OAAA,KAAA;AAAA;AACT,KACF;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,UAAA,EAAY,UAAU,CAAC,CAAA;AAE9C,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
@@ -0,0 +1,23 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { ShellContext } from '@vuu-ui/vuu-utils';
3
+
4
+ const Provider = ({
5
+ children,
6
+ context,
7
+ inheritedContext
8
+ }) => {
9
+ const mergedContext = {
10
+ ...inheritedContext,
11
+ ...context
12
+ };
13
+ return /* @__PURE__ */ jsx(ShellContext.Provider, { value: mergedContext, children });
14
+ };
15
+ const ShellContextProvider = ({
16
+ children,
17
+ value
18
+ }) => {
19
+ return /* @__PURE__ */ jsx(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsx(Provider, { context: value, inheritedContext: context, children }) });
20
+ };
21
+
22
+ export { ShellContextProvider };
23
+ //# sourceMappingURL=ShellContextProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ShellContextProvider.js","sources":["../../../packages/vuu-shell/src/ShellContextProvider.tsx"],"sourcesContent":["import { ShellContext, ShellContextProps } from \"@vuu-ui/vuu-utils\";\nimport { ReactElement, ReactNode } from \"react\";\n\nexport interface ShellProviderProps {\n children: ReactNode;\n value?: ShellContextProps;\n}\n\nconst Provider = ({\n children,\n context,\n inheritedContext,\n}: {\n children: ReactNode;\n context?: ShellContextProps;\n inheritedContext?: ShellContextProps;\n}) => {\n // TODO functions provided at multiple levels must be merged\n const mergedContext = {\n ...inheritedContext,\n ...context,\n };\n return (\n <ShellContext.Provider value={mergedContext}>\n {children}\n </ShellContext.Provider>\n );\n};\n\nexport const ShellContextProvider = ({\n children,\n value,\n}: ShellProviderProps): ReactElement => {\n return (\n <ShellContext.Consumer>\n {(context) => (\n <Provider context={value} inheritedContext={context}>\n {children}\n </Provider>\n )}\n </ShellContext.Consumer>\n );\n};\n"],"names":[],"mappings":";;;AAQA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAIM,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,gBAAA;AAAA,IACH,GAAG;AAAA,GACL;AACA,EAAA,2BACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,eAC3B,QACH,EAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACG,GAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EACE,QAAC,EAAA,CAAA,OAAA,qBACC,GAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,KAAA,EAAO,gBAAkB,EAAA,OAAA,EACzC,UACH,CAEJ,EAAA,CAAA;AAEJ;;;;"}
@@ -0,0 +1,4 @@
1
+ var appHeaderCss = ".vuuAppHeader {\n --saltButton-borderRadius: 6px;\n --saltButton-text-color: var(--vuu-color-gray-50);\n --saltButton-padding: 12px;\n --vuuToolbarItem-height: 26px;\n --vuuOverflowContainer-gap: 8px;\n --vuuOverflowContainer-height: var(--vuuAppHeader-height, 42px);\n --vuu-icon-color: var(--vuu-color-gray-45);\n --vuu-icon-size: 16px;\n --vuuToolbar-borderWidth: 1px;\n --vuuToolbar-borderStyle: solid;\n --vuuToolbar-borderColor: var(--salt-separable-primary-borderColor);\n\n align-items: center;\n display: flex;\n justify-content: flex-end;\n}\n\n";
2
+
3
+ export { appHeaderCss as default };
4
+ //# sourceMappingURL=AppHeader.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,116 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { Button } from '@salt-ds/core';
3
+ import { useComponentCssInjection } from '@salt-ds/styles';
4
+ import { useWindow } from '@salt-ds/window';
5
+ import { useLayoutOperation } from '@vuu-ui/vuu-layout';
6
+ import { Toolbar } from '@vuu-ui/vuu-ui-controls';
7
+ import cx from 'clsx';
8
+ import { useRef, useCallback } from 'react';
9
+ import { usePersistenceManager } from '../persistence-manager/PersistenceProvider.js';
10
+ import '../persistence-manager/LocalPersistenceManager.js';
11
+ import '../persistence-manager/StaticPersistenceManager.js';
12
+ import { useNotifications, NotificationType } from '@vuu-ui/vuu-notifications';
13
+ import { useLogout } from '../application-provider/ApplicationProvider.js';
14
+ import appHeaderCss from './AppHeader.css.js';
15
+
16
+ const classBase = "vuuAppHeader";
17
+ const AppHeader = ({
18
+ className: classNameProp,
19
+ themeMode: _,
20
+ ...htmlAttributes
21
+ }) => {
22
+ const targetWindow = useWindow();
23
+ useComponentCssInjection({
24
+ testId: "vuu-app-header",
25
+ css: appHeaderCss,
26
+ window: targetWindow
27
+ });
28
+ const persistenceManager = usePersistenceManager();
29
+ const settingsButtonRef = useRef(null);
30
+ const className = cx(classBase, classNameProp);
31
+ const logout = useLogout();
32
+ const { showComponentInContextPanel } = useLayoutOperation();
33
+ const { showNotification } = useNotifications();
34
+ const handleReset = useCallback(() => {
35
+ persistenceManager?.clearUserSettings();
36
+ showNotification({
37
+ animationType: "slide-out",
38
+ renderPostRefresh: true,
39
+ type: NotificationType.Toast,
40
+ header: "Success",
41
+ content: "Settings cleared",
42
+ status: "success"
43
+ });
44
+ location.reload();
45
+ }, [persistenceManager, showNotification]);
46
+ const handleShowSettings = useCallback(() => {
47
+ showComponentInContextPanel(
48
+ {
49
+ type: "ApplicationSettings"
50
+ },
51
+ "Settings",
52
+ () => settingsButtonRef.current?.focus()
53
+ );
54
+ }, [showComponentInContextPanel]);
55
+ return /* @__PURE__ */ jsxs(
56
+ Toolbar,
57
+ {
58
+ alignItems: "end",
59
+ className,
60
+ role: "banner",
61
+ showSeparators: true,
62
+ ...htmlAttributes,
63
+ children: [
64
+ /* @__PURE__ */ jsx(
65
+ Button,
66
+ {
67
+ className: `${classBase}-menuItem`,
68
+ appearance: "transparent",
69
+ sentiment: "neutral",
70
+ children: "Help"
71
+ }
72
+ ),
73
+ /* @__PURE__ */ jsxs(
74
+ Button,
75
+ {
76
+ appearance: "transparent",
77
+ className: `${classBase}-menuItem`,
78
+ onClick: handleReset,
79
+ sentiment: "neutral",
80
+ children: [
81
+ "Reset ",
82
+ /* @__PURE__ */ jsx("span", { "data-icon": "history" })
83
+ ]
84
+ }
85
+ ),
86
+ /* @__PURE__ */ jsxs(
87
+ Button,
88
+ {
89
+ appearance: "transparent",
90
+ className: `${classBase}-menuItem`,
91
+ onClick: handleShowSettings,
92
+ ref: settingsButtonRef,
93
+ sentiment: "neutral",
94
+ children: [
95
+ "Settings ",
96
+ /* @__PURE__ */ jsx("span", { "data-icon": "settings" })
97
+ ]
98
+ }
99
+ ),
100
+ /* @__PURE__ */ jsx(
101
+ Button,
102
+ {
103
+ appearance: "transparent",
104
+ className: `${classBase}-menuItem`,
105
+ onClick: logout,
106
+ sentiment: "neutral",
107
+ children: "Log out"
108
+ }
109
+ )
110
+ ]
111
+ }
112
+ );
113
+ };
114
+
115
+ export { AppHeader };
116
+ //# sourceMappingURL=AppHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppHeader.js","sources":["../../../../packages/vuu-shell/src/app-header/AppHeader.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { usePersistenceManager } from \"../persistence-manager\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { useLogout } from \"../application-provider\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n className: classNameProp,\n themeMode: _,\n ...htmlAttributes\n}: AppHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-app-header\",\n css: appHeaderCss,\n window: targetWindow,\n });\n\n const persistenceManager = usePersistenceManager();\n const settingsButtonRef = useRef<HTMLButtonElement>(null);\n\n const className = cx(classBase, classNameProp);\n const logout = useLogout();\n\n const { showComponentInContextPanel } = useLayoutOperation();\n const { showNotification } = useNotifications();\n\n const handleReset = useCallback(() => {\n persistenceManager?.clearUserSettings();\n showNotification({\n animationType: \"slide-out\",\n renderPostRefresh: true,\n type: NotificationType.Toast,\n header: \"Success\",\n content: \"Settings cleared\",\n status: \"success\",\n });\n location.reload();\n }, [persistenceManager, showNotification]);\n\n const handleShowSettings = useCallback(() => {\n showComponentInContextPanel(\n {\n type: \"ApplicationSettings\",\n },\n \"Settings\",\n () => settingsButtonRef.current?.focus(),\n );\n }, [showComponentInContextPanel]);\n\n return (\n <Toolbar\n alignItems=\"end\"\n className={className}\n role=\"banner\"\n showSeparators\n {...htmlAttributes}\n >\n <Button\n className={`${classBase}-menuItem`}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n >\n Help\n </Button>\n <Button\n appearance=\"transparent\"\n className={`${classBase}-menuItem`}\n onClick={handleReset}\n sentiment=\"neutral\"\n >\n Reset <span data-icon=\"history\" />\n </Button>\n <Button\n appearance=\"transparent\"\n className={`${classBase}-menuItem`}\n onClick={handleShowSettings}\n ref={settingsButtonRef}\n sentiment=\"neutral\"\n >\n Settings <span data-icon=\"settings\" />\n </Button>\n <Button\n appearance=\"transparent\"\n className={`${classBase}-menuItem`}\n onClick={logout}\n sentiment=\"neutral\"\n >\n Log out\n </Button>\n </Toolbar>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ import { createContext } from 'react';
2
+
3
+ const Guest = {
4
+ username: "unknown"
5
+ };
6
+ const ApplicationContext = createContext({
7
+ onUserSettingChanged: (propertyName) => console.warn(
8
+ `Cannot change setting '${propertyName}'.
9
+ Did you forget to declare an ApplicationProvider ?`
10
+ ),
11
+ user: Guest
12
+ });
13
+
14
+ export { ApplicationContext };
15
+ //# sourceMappingURL=ApplicationContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ApplicationContext.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationContext.tsx"],"sourcesContent":["import type { Settings, VuuUser } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { createContext } from \"react\";\nimport { SettingsSchema } from \"../user-settings\";\n\nconst Guest: VuuUser = {\n username: \"unknown\",\n};\n\nexport interface ApplicationContextProps {\n onUserSettingChanged: (\n propertyName: string,\n value: VuuRowDataItemType,\n ) => void;\n logout?: () => void;\n userSettings?: Settings;\n userSettingsSchema?: SettingsSchema;\n user: VuuUser;\n}\n\nexport const ApplicationContext = createContext<ApplicationContextProps>({\n onUserSettingChanged: (propertyName: string) =>\n console.warn(\n `Cannot change setting '${propertyName}'.\\nDid you forget to declare an ApplicationProvider ?`,\n ),\n user: Guest,\n});\n"],"names":[],"mappings":";;AAKA,MAAM,KAAiB,GAAA;AAAA,EACrB,QAAU,EAAA;AACZ,CAAA;AAaO,MAAM,qBAAqB,aAAuC,CAAA;AAAA,EACvE,oBAAA,EAAsB,CAAC,YAAA,KACrB,OAAQ,CAAA,IAAA;AAAA,IACN,0BAA0B,YAAY,CAAA;AAAA,kDAAA;AAAA,GACxC;AAAA,EACF,IAAM,EAAA;AACR,CAAC;;;;"}
@@ -0,0 +1,96 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useTheme, useDensity, SaltProviderNext } from '@salt-ds/core';
3
+ import { useContext, useState, useMemo, useCallback } from 'react';
4
+ import { ApplicationContext } from './ApplicationContext.js';
5
+ import { usePersistenceManager } from '../persistence-manager/PersistenceProvider.js';
6
+ import '../persistence-manager/LocalPersistenceManager.js';
7
+ import '../persistence-manager/StaticPersistenceManager.js';
8
+
9
+ const accentPurple = "purple";
10
+ const getThemeMode = (mode = "light", userSettings) => {
11
+ const themeMode = userSettings?.themeMode;
12
+ if (themeMode === "light" || themeMode === "dark") {
13
+ return themeMode;
14
+ }
15
+ return mode;
16
+ };
17
+ const ApplicationProvider = ({
18
+ children,
19
+ density: densityProp,
20
+ logout,
21
+ mode,
22
+ theme,
23
+ userSettingsSchema,
24
+ user
25
+ }) => {
26
+ const { mode: inheritedMode, theme: inheritedTheme } = useTheme();
27
+ const density = useDensity(densityProp);
28
+ const persistenceManager = usePersistenceManager();
29
+ const context = useContext(ApplicationContext);
30
+ const [userSettings, setSettings] = useState();
31
+ useMemo(async () => {
32
+ if (persistenceManager) {
33
+ const userSettings2 = await persistenceManager.getUserSettings();
34
+ setSettings(userSettings2);
35
+ } else {
36
+ setSettings({});
37
+ }
38
+ }, [persistenceManager]);
39
+ const onUserSettingChanged = useCallback(
40
+ (propertyName, value) => {
41
+ setSettings((currentSettings) => {
42
+ const newSettings = { ...currentSettings, [propertyName]: value };
43
+ persistenceManager?.saveUserSettings(newSettings);
44
+ return newSettings;
45
+ });
46
+ },
47
+ [persistenceManager]
48
+ );
49
+ return userSettings ? /* @__PURE__ */ jsx(
50
+ ApplicationContext.Provider,
51
+ {
52
+ value: {
53
+ ...context,
54
+ logout,
55
+ onUserSettingChanged,
56
+ userSettings,
57
+ userSettingsSchema,
58
+ user: user ?? context.user
59
+ },
60
+ children: /* @__PURE__ */ jsx(
61
+ SaltProviderNext,
62
+ {
63
+ accent: accentPurple,
64
+ corner: "rounded",
65
+ theme: theme ?? inheritedTheme ?? "vuu-theme",
66
+ density,
67
+ mode: getThemeMode(mode ?? inheritedMode, userSettings),
68
+ children
69
+ }
70
+ )
71
+ }
72
+ ) : null;
73
+ };
74
+ const useApplicationUser = () => {
75
+ const { user } = useContext(ApplicationContext);
76
+ return user;
77
+ };
78
+ const useApplicationSettings = () => {
79
+ const { onUserSettingChanged, userSettings, userSettingsSchema } = useContext(ApplicationContext);
80
+ return {
81
+ onUserSettingChanged,
82
+ userSettings,
83
+ userSettingsSchema
84
+ };
85
+ };
86
+ const useUserSetting = () => {
87
+ const { userSettings } = useContext(ApplicationContext);
88
+ return userSettings;
89
+ };
90
+ const useLogout = () => {
91
+ const { logout } = useContext(ApplicationContext);
92
+ return logout;
93
+ };
94
+
95
+ export { ApplicationProvider, useApplicationSettings, useApplicationUser, useLogout, useUserSetting };
96
+ //# sourceMappingURL=ApplicationProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ApplicationProvider.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n Accent,\n Density,\n Mode,\n SaltProviderNext,\n ThemeContextProps,\n useDensity,\n useTheme,\n} from \"@salt-ds/core\";\nimport {\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\nimport {\n ApplicationContext,\n ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-manager\";\n\nexport interface ApplicationProviderProps\n extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n children: ReactNode;\n density?: Density;\n}\n\nconst accentPurple = \"purple\" as Accent;\n\nconst getThemeMode = (\n mode: Mode = \"light\",\n userSettings?: Record<string, string | number | boolean>,\n) => {\n const themeMode = userSettings?.themeMode;\n if (themeMode === \"light\" || themeMode === \"dark\") {\n return themeMode;\n }\n return mode;\n};\n\nexport const ApplicationProvider = ({\n children,\n density: densityProp,\n logout,\n mode,\n theme,\n userSettingsSchema: userSettingsSchema,\n user,\n}: ApplicationProviderProps): ReactElement | null => {\n const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n const density = useDensity(densityProp);\n const persistenceManager = usePersistenceManager();\n const context = useContext(ApplicationContext);\n const [userSettings, setSettings] =\n useState<Record<string, string | number | boolean>>();\n\n useMemo(async () => {\n if (persistenceManager) {\n const userSettings = await persistenceManager.getUserSettings();\n setSettings(userSettings);\n } else {\n setSettings({});\n }\n }, [persistenceManager]);\n\n const onUserSettingChanged = useCallback(\n (propertyName: string, value: VuuRowDataItemType) => {\n setSettings((currentSettings) => {\n const newSettings = { ...currentSettings, [propertyName]: value };\n persistenceManager?.saveUserSettings(newSettings);\n return newSettings;\n });\n },\n [persistenceManager],\n );\n\n return userSettings ? (\n <ApplicationContext.Provider\n value={{\n ...context,\n logout,\n onUserSettingChanged,\n userSettings,\n userSettingsSchema,\n user: user ?? context.user,\n }}\n >\n <SaltProviderNext\n accent={accentPurple}\n corner=\"rounded\"\n theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n density={density}\n mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n >\n {children}\n </SaltProviderNext>\n </ApplicationContext.Provider>\n ) : null;\n};\n\nexport const useApplicationUser = () => {\n const { user } = useContext(ApplicationContext);\n return user;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n const { onUserSettingChanged, userSettings, userSettingsSchema } =\n useContext(ApplicationContext);\n return {\n onUserSettingChanged,\n userSettings,\n userSettingsSchema,\n };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n const { userSettings } = useContext(ApplicationContext);\n return userSettings;\n};\n\nexport const useLogout = () => {\n const { logout } = useContext(ApplicationContext);\n return logout;\n};\n"],"names":["userSettings"],"mappings":"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"}
@@ -0,0 +1,52 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { registerComponent, importCSS } from '@vuu-ui/vuu-utils';
3
+ import React, { useEffect } from 'react';
4
+ import { FeatureErrorBoundary } from './FeatureErrorBoundary.js';
5
+
6
+ const componentsMap = /* @__PURE__ */ new Map();
7
+ const useCachedFeature = (url) => {
8
+ useEffect(
9
+ () => () => {
10
+ componentsMap.delete(url);
11
+ },
12
+ [url]
13
+ );
14
+ if (!componentsMap.has(url)) {
15
+ componentsMap.set(
16
+ url,
17
+ React.lazy(() => import(
18
+ /* @vite-ignore */
19
+ url
20
+ ))
21
+ );
22
+ }
23
+ const lazyFeature = componentsMap.get(url);
24
+ if (!lazyFeature) {
25
+ throw Error(`Unable to load Lazy Feature at url ${url}`);
26
+ } else {
27
+ return lazyFeature;
28
+ }
29
+ };
30
+ function RawFeature({
31
+ url,
32
+ css,
33
+ ComponentProps: params,
34
+ ...props
35
+ }) {
36
+ if (css) {
37
+ importCSS(css).then((styleSheet) => {
38
+ document.adoptedStyleSheets = [
39
+ ...document.adoptedStyleSheets,
40
+ styleSheet
41
+ ];
42
+ });
43
+ }
44
+ const LazyFeature = useCachedFeature(url);
45
+ return /* @__PURE__ */ jsx(FeatureErrorBoundary, { url, children: /* @__PURE__ */ jsx(LazyFeature, { ...props, ...params }) });
46
+ }
47
+ const Feature = React.memo(RawFeature);
48
+ Feature.displayName = "Feature";
49
+ registerComponent("Feature", Feature, "view");
50
+
51
+ export { Feature };
52
+ //# sourceMappingURL=Feature.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Feature.js","sources":["../../../../packages/vuu-shell/src/feature/Feature.tsx"],"sourcesContent":["import {\n DynamicFeatureProps,\n importCSS,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport React, { useEffect } from \"react\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\n\n/**\n * Ensure we never lazy load the same component more than once\n */\nconst componentsMap = new Map<string, ReturnType<typeof React.lazy>>();\nconst useCachedFeature = (url: string) => {\n useEffect(\n () => () => {\n componentsMap.delete(url);\n },\n [url],\n );\n\n if (!componentsMap.has(url)) {\n componentsMap.set(\n url,\n React.lazy(() => import(/* @vite-ignore */ url)),\n );\n }\n\n const lazyFeature = componentsMap.get(url);\n\n if (!lazyFeature) {\n throw Error(`Unable to load Lazy Feature at url ${url}`);\n } else {\n return lazyFeature;\n }\n};\n\nfunction RawFeature<Params extends object | undefined>({\n url,\n css,\n ComponentProps: params,\n ...props\n}: DynamicFeatureProps<Params>) {\n if (css) {\n // import(/* @vite-ignore */ css, { assert: { type: \"css\" } }).then(\n // (cssModule) => {\n // console.log(\"%cInject Styles\", \"color: blue;font-weight: bold\");\n // document.adoptedStyleSheets = [\n // ...document.adoptedStyleSheets,\n // cssModule.default,\n // ];\n // }\n // );\n // Polyfill until cypress build supports import assertions\n // Note: already fully supported in esbuild and vite\n importCSS(css).then((styleSheet) => {\n document.adoptedStyleSheets = [\n ...document.adoptedStyleSheets,\n styleSheet,\n ];\n });\n }\n\n const LazyFeature = useCachedFeature(url);\n // Suspense has been removed here - caused components to render twice\n return (\n <FeatureErrorBoundary url={url}>\n <LazyFeature {...props} {...params} />\n </FeatureErrorBoundary>\n );\n}\n\n/**\n Feature is a wrapper around React Lazy Loading. It will load a component\n from the given url. That url must resolve to a javascript bundle with a\n single default export. That export must be a React component.\n */\nexport const Feature = React.memo(RawFeature);\nFeature.displayName = \"Feature\";\nregisterComponent(\"Feature\", Feature, \"view\");\n"],"names":[],"mappings":";;;;;AAWA,MAAM,aAAA,uBAAoB,GAA2C,EAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,aAAA,CAAc,OAAO,GAAG,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,GAAG;AAAA,GACN;AAEA,EAAA,IAAI,CAAC,aAAA,CAAc,GAAI,CAAA,GAAG,CAAG,EAAA;AAC3B,IAAc,aAAA,CAAA,GAAA;AAAA,MACZ,GAAA;AAAA,MACA,KAAA,CAAM,KAAK,MAAM;AAAA;AAAA,QAA0B;AAAA,OAAI;AAAA,KACjD;AAAA;AAGF,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,GAAA,CAAI,GAAG,CAAA;AAEzC,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,KAAA,CAAM,CAAsC,mCAAA,EAAA,GAAG,CAAE,CAAA,CAAA;AAAA,GAClD,MAAA;AACL,IAAO,OAAA,WAAA;AAAA;AAEX,CAAA;AAEA,SAAS,UAA8C,CAAA;AAAA,EACrD,GAAA;AAAA,EACA,GAAA;AAAA,EACA,cAAgB,EAAA,MAAA;AAAA,EAChB,GAAG;AACL,CAAgC,EAAA;AAC9B,EAAA,IAAI,GAAK,EAAA;AAYP,IAAA,SAAA,CAAU,GAAG,CAAA,CAAE,IAAK,CAAA,CAAC,UAAe,KAAA;AAClC,MAAA,QAAA,CAAS,kBAAqB,GAAA;AAAA,QAC5B,GAAG,QAAS,CAAA,kBAAA;AAAA,QACZ;AAAA,OACF;AAAA,KACD,CAAA;AAAA;AAGH,EAAM,MAAA,WAAA,GAAc,iBAAiB,GAAG,CAAA;AAExC,EACE,uBAAA,GAAA,CAAC,wBAAqB,GACpB,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAa,GAAG,KAAA,EAAQ,GAAG,MAAA,EAAQ,CACtC,EAAA,CAAA;AAEJ;AAOa,MAAA,OAAA,GAAU,KAAM,CAAA,IAAA,CAAK,UAAU;AAC5C,OAAA,CAAQ,WAAc,GAAA,SAAA;AACtB,iBAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}
@@ -0,0 +1,28 @@
1
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
+ import React from 'react';
3
+
4
+ class FeatureErrorBoundary extends React.Component {
5
+ constructor(props) {
6
+ super(props);
7
+ this.state = { errorMessage: null };
8
+ }
9
+ static getDerivedStateFromError(error) {
10
+ return { errorMessage: error.message };
11
+ }
12
+ componentDidCatch(error, errorInfo) {
13
+ console.log(`error creating component at ${this.props.url}`);
14
+ console.log(error, errorInfo);
15
+ }
16
+ render() {
17
+ if (this.state.errorMessage) {
18
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
19
+ /* @__PURE__ */ jsx("h1", { children: "An error occured while creating component." }),
20
+ /* @__PURE__ */ jsx("p", { children: this.state.errorMessage })
21
+ ] });
22
+ }
23
+ return this.props.children;
24
+ }
25
+ }
26
+
27
+ export { FeatureErrorBoundary };
28
+ //# sourceMappingURL=FeatureErrorBoundary.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FeatureErrorBoundary.js","sources":["../../../../packages/vuu-shell/src/feature/FeatureErrorBoundary.tsx"],"sourcesContent":["import { DynamicFeatureProps } from \"@vuu-ui/vuu-utils\";\nimport React, { ErrorInfo, ReactNode } from \"react\";\n\nexport interface FeatureErrorBoundaryProps extends DynamicFeatureProps {\n children: ReactNode;\n}\n\nexport class FeatureErrorBoundary extends React.Component<\n FeatureErrorBoundaryProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n any\n> {\n constructor(props: FeatureErrorBoundaryProps) {\n super(props);\n this.state = { errorMessage: null };\n }\n\n static getDerivedStateFromError(error: Error) {\n // Update state so the next render will show the fallback UI.\n return { errorMessage: error.message };\n }\n\n componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n // You can also log the error to an error reporting service\n console.log(`error creating component at ${this.props.url}`);\n console.log(error, errorInfo);\n }\n\n render() {\n if (this.state.errorMessage) {\n return (\n <>\n <h1>An error occured while creating component.</h1>\n <p>{this.state.errorMessage}</p>\n </>\n );\n }\n\n return this.props.children;\n }\n}\n"],"names":[],"mappings":";;;AAOa,MAAA,oBAAA,SAA6B,MAAM,SAI9C,CAAA;AAAA,EACA,YAAY,KAAkC,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,YAAA,EAAc,IAAK,EAAA;AAAA;AACpC,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAE5C,IAAO,OAAA,EAAE,YAAc,EAAA,KAAA,CAAM,OAAQ,EAAA;AAAA;AACvC,EAEA,iBAAA,CAAkB,OAAc,SAAsB,EAAA;AAEpD,IAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,4BAAA,EAA+B,IAAK,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,CAAA;AAC3D,IAAQ,OAAA,CAAA,GAAA,CAAI,OAAO,SAAS,CAAA;AAAA;AAC9B,EAEA,MAAS,GAAA;AACP,IAAI,IAAA,IAAA,CAAK,MAAM,YAAc,EAAA;AAC3B,MAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAG,QAA0C,EAAA,4CAAA,EAAA,CAAA;AAAA,wBAC7C,GAAA,CAAA,GAAA,EAAA,EAAG,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,YAAa,EAAA;AAAA,OAC9B,EAAA,CAAA;AAAA;AAIJ,IAAA,OAAO,KAAK,KAAM,CAAA,QAAA;AAAA;AAEtB;;;;"}
@@ -0,0 +1,56 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { getCustomAndTableFeatures } from '@vuu-ui/vuu-utils';
3
+ import { createContext, useMemo, useContext } from 'react';
4
+ import { useVuuTables } from '@vuu-ui/vuu-data-react';
5
+
6
+ const NO_FEATURES = [];
7
+ const NO_STATICFEATURES = [];
8
+ const NO_SYSTEMLAYOUTS = [];
9
+ const NO_FEATURES_VUU = {
10
+ dynamicFeatures: NO_FEATURES,
11
+ tableFeatures: NO_FEATURES
12
+ };
13
+ const FeatureContext = createContext({
14
+ dynamicFeatures: NO_FEATURES,
15
+ tableFeatures: NO_FEATURES,
16
+ staticFeatures: NO_STATICFEATURES
17
+ });
18
+ const LayoutContext = createContext({
19
+ systemLayouts: NO_SYSTEMLAYOUTS
20
+ });
21
+ const FeatureAndLayoutProvider = ({
22
+ children,
23
+ dynamicFeatures: dynamicFeaturesProp = [],
24
+ staticFeatures,
25
+ systemLayouts
26
+ }) => {
27
+ const tableSchemas = useVuuTables();
28
+ const { dynamicFeatures, tableFeatures } = useMemo(
29
+ () => tableSchemas ? getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas) : NO_FEATURES_VUU,
30
+ [dynamicFeaturesProp, tableSchemas]
31
+ );
32
+ return /* @__PURE__ */ jsx(
33
+ FeatureContext.Provider,
34
+ {
35
+ value: {
36
+ dynamicFeatures,
37
+ tableFeatures,
38
+ staticFeatures
39
+ },
40
+ children: /* @__PURE__ */ jsx(
41
+ LayoutContext.Provider,
42
+ {
43
+ value: {
44
+ systemLayouts
45
+ },
46
+ children
47
+ }
48
+ )
49
+ }
50
+ );
51
+ };
52
+ const useFeatures = () => useContext(FeatureContext);
53
+ const useLayouts = () => useContext(LayoutContext);
54
+
55
+ export { FeatureAndLayoutProvider, useFeatures, useLayouts };
56
+ //# sourceMappingURL=FeatureAndLayoutProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FeatureAndLayoutProvider.js","sources":["../../../../packages/vuu-shell/src/feature-and-layout-provider/FeatureAndLayoutProvider.tsx"],"sourcesContent":["import {\n DynamicFeatureDescriptor,\n DynamicFeatureProps,\n FilterTableFeatureProps,\n StaticFeatureDescriptor,\n SystemLayoutMetadata,\n getCustomAndTableFeatures,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n ReactElement,\n ReactNode,\n createContext,\n useContext,\n useMemo,\n} from \"react\";\nimport { useVuuTables } from \"@vuu-ui/vuu-data-react\";\n\nexport interface FeatureContextProps {\n dynamicFeatures?: DynamicFeatureProps[];\n tableFeatures?: DynamicFeatureProps<FilterTableFeatureProps>[];\n staticFeatures?: StaticFeatureDescriptor[];\n}\n\nexport interface LayoutContextProps {\n systemLayouts?: SystemLayoutMetadata[];\n}\n\nconst NO_FEATURES: DynamicFeatureDescriptor[] = [];\nconst NO_STATICFEATURES: StaticFeatureDescriptor[] = [];\nconst NO_SYSTEMLAYOUTS: SystemLayoutMetadata[] = [];\n\nconst NO_FEATURES_VUU = {\n dynamicFeatures: NO_FEATURES,\n tableFeatures: NO_FEATURES,\n};\n\nconst FeatureContext = createContext<FeatureContextProps>({\n dynamicFeatures: NO_FEATURES,\n tableFeatures: NO_FEATURES,\n staticFeatures: NO_STATICFEATURES,\n});\n\nconst LayoutContext = createContext<LayoutContextProps>({\n systemLayouts: NO_SYSTEMLAYOUTS,\n});\n\nexport interface FeatureAndLayoutProviderProps\n extends Partial<FeatureContextProps> {\n children: ReactNode;\n dynamicFeatures?: DynamicFeatureDescriptor[];\n staticFeatures?: StaticFeatureDescriptor[];\n systemLayouts?: SystemLayoutMetadata[];\n}\n\nexport const FeatureAndLayoutProvider = ({\n children,\n dynamicFeatures: dynamicFeaturesProp = [],\n staticFeatures,\n systemLayouts,\n}: FeatureAndLayoutProviderProps): ReactElement => {\n const tableSchemas = useVuuTables();\n\n const { dynamicFeatures, tableFeatures } = useMemo<{\n dynamicFeatures: DynamicFeatureProps[];\n tableFeatures: DynamicFeatureProps<FilterTableFeatureProps>[];\n }>(\n () =>\n tableSchemas\n ? getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas)\n : NO_FEATURES_VUU,\n [dynamicFeaturesProp, tableSchemas],\n );\n\n return (\n <FeatureContext.Provider\n value={{\n dynamicFeatures,\n tableFeatures,\n staticFeatures,\n }}\n >\n <LayoutContext.Provider\n value={{\n systemLayouts,\n }}\n >\n {children}\n </LayoutContext.Provider>\n </FeatureContext.Provider>\n );\n};\n\nexport const useFeatures = () => useContext(FeatureContext);\nexport const useLayouts = () => useContext(LayoutContext);\n"],"names":[],"mappings":";;;;;AA2BA,MAAM,cAA0C,EAAC;AACjD,MAAM,oBAA+C,EAAC;AACtD,MAAM,mBAA2C,EAAC;AAElD,MAAM,eAAkB,GAAA;AAAA,EACtB,eAAiB,EAAA,WAAA;AAAA,EACjB,aAAe,EAAA;AACjB,CAAA;AAEA,MAAM,iBAAiB,aAAmC,CAAA;AAAA,EACxD,eAAiB,EAAA,WAAA;AAAA,EACjB,aAAe,EAAA,WAAA;AAAA,EACf,cAAgB,EAAA;AAClB,CAAC,CAAA;AAED,MAAM,gBAAgB,aAAkC,CAAA;AAAA,EACtD,aAAe,EAAA;AACjB,CAAC,CAAA;AAUM,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,eAAA,EAAiB,sBAAsB,EAAC;AAAA,EACxC,cAAA;AAAA,EACA;AACF,CAAmD,KAAA;AACjD,EAAA,MAAM,eAAe,YAAa,EAAA;AAElC,EAAM,MAAA,EAAE,eAAiB,EAAA,aAAA,EAAkB,GAAA,OAAA;AAAA,IAIzC,MACE,YAAA,GACI,yBAA0B,CAAA,mBAAA,EAAqB,YAAY,CAC3D,GAAA,eAAA;AAAA,IACN,CAAC,qBAAqB,YAAY;AAAA,GACpC;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,cAAe,CAAA,QAAA;AAAA,IAAf;AAAA,MACC,KAAO,EAAA;AAAA,QACL,eAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,aAAc,CAAA,QAAA;AAAA,QAAd;AAAA,UACC,KAAO,EAAA;AAAA,YACL;AAAA,WACF;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEa,MAAA,WAAA,GAAc,MAAM,UAAA,CAAW,cAAc;AAC7C,MAAA,UAAA,GAAa,MAAM,UAAA,CAAW,aAAa;;;;"}
@@ -0,0 +1,4 @@
1
+ var featureListCss = ".vuuFeatureList {\n --vuuListItem-padding: var(--salt-spacing-200);\n background: var(\n --vuuFeatureList-background,\n var(--salt-container-primary-background)\n );\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n align-items: center;\n display: flex;\n flex: 0 0 48px;\n font-weight: 700;\n line-height: 2;\n}\n\n.vuuFeatureList-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.vuuFeatureList-standalone {\n margin-top: 24px;\n}\n\n.vuuFeatureList-group {\n --vuuMeasuredContainer-flex: 0 0 auto;\n\n display: flex;\n flex-direction: column;\n\n .vuuFeatureList-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.vuuFeatureList-group:first-child {\n margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n font-weight: 700;\n}\n";
2
+
3
+ export { featureListCss as default };
4
+ //# sourceMappingURL=FeatureList.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FeatureList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,107 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { PaletteItem, Palette } from '@vuu-ui/vuu-layout';
3
+ import { Icon } from '@vuu-ui/vuu-ui-controls';
4
+ import { isStaticFeatures, featureFromJson } from '@vuu-ui/vuu-utils';
5
+ import { useComponentCssInjection } from '@salt-ds/styles';
6
+ import { useWindow } from '@salt-ds/window';
7
+ import cx from 'clsx';
8
+ import { useMemo } from 'react';
9
+ import { Feature } from '../feature/Feature.js';
10
+ import featureListCss from './FeatureList.css.js';
11
+
12
+ const classBase = "vuuFeatureList";
13
+ const FeatureList = ({
14
+ features,
15
+ title = "VUU TABLES",
16
+ ...htmlAttributes
17
+ }) => {
18
+ const targetWindow = useWindow();
19
+ useComponentCssInjection({
20
+ testId: "vuu-feature-list",
21
+ css: featureListCss,
22
+ window: targetWindow
23
+ });
24
+ const content = useMemo(() => {
25
+ if (isStaticFeatures(features)) {
26
+ return features.map(({ label, type }, idx) => {
27
+ return /* @__PURE__ */ jsxs(
28
+ PaletteItem,
29
+ {
30
+ ViewProps: {
31
+ closeable: true,
32
+ header: true,
33
+ resize: "defer",
34
+ resizeable: true
35
+ },
36
+ component: featureFromJson({ type }),
37
+ value: label,
38
+ children: [
39
+ /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 18 }),
40
+ /* @__PURE__ */ jsx("span", { className: `${classBase}-itemName`, children: label })
41
+ ]
42
+ },
43
+ idx
44
+ );
45
+ });
46
+ }
47
+ if (Array.isArray(features)) {
48
+ return [
49
+ /* @__PURE__ */ jsx("div", { className: `${classBase}-standalone`, children: /* @__PURE__ */ jsx(Palette, { orientation: "vertical", children: features.map(({ ViewProps, ...featureProps }, i) => /* @__PURE__ */ jsxs(
50
+ PaletteItem,
51
+ {
52
+ ViewProps: {
53
+ closeable: true,
54
+ header: true,
55
+ resize: "defer",
56
+ resizeable: true,
57
+ title: featureProps.title,
58
+ ...ViewProps
59
+ },
60
+ component: /* @__PURE__ */ jsx(Feature, { ...featureProps }),
61
+ value: featureProps.title,
62
+ children: [
63
+ /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 18 }),
64
+ /* @__PURE__ */ jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
65
+ ]
66
+ },
67
+ i
68
+ )) }, "0") }, 0)
69
+ ];
70
+ } else {
71
+ return Object.entries(features).map(([heading, featureList], index) => /* @__PURE__ */ jsxs("div", { className: `${classBase}-group`, children: [
72
+ /* @__PURE__ */ jsx("div", { className: `${classBase}-groupHeader`, children: heading }),
73
+ /* @__PURE__ */ jsx(Palette, { orientation: "vertical", children: featureList.map(
74
+ ({ ViewProps, ...featureProps }, i) => {
75
+ return /* @__PURE__ */ jsxs(
76
+ PaletteItem,
77
+ {
78
+ ViewProps: {
79
+ closeable: true,
80
+ header: true,
81
+ resize: "defer",
82
+ resizeable: true,
83
+ title: featureProps.title,
84
+ ...ViewProps
85
+ },
86
+ component: /* @__PURE__ */ jsx(Feature, { ...featureProps }),
87
+ value: featureProps.title,
88
+ children: [
89
+ /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 18 }),
90
+ /* @__PURE__ */ jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
91
+ ]
92
+ },
93
+ i
94
+ );
95
+ }
96
+ ) })
97
+ ] }, index));
98
+ }
99
+ }, [features]);
100
+ return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: [
101
+ /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: title }),
102
+ /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children: content })
103
+ ] });
104
+ };
105
+
106
+ export { FeatureList };
107
+ //# sourceMappingURL=FeatureList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FeatureList.js","sources":["../../../../packages/vuu-shell/src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n DynamicFeatureProps,\n StaticFeatureDescriptor,\n featureFromJson,\n isStaticFeatures,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, Key, ReactElement, useMemo } from \"react\";\nimport { Feature } from \"../feature/Feature\";\n\nimport featureListCss from \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport type GroupedFeatureProps<P extends object | undefined = object> = Record<\n string,\n DynamicFeatureProps<P>[]\n>;\n\nexport interface FeatureListProps extends HTMLAttributes<HTMLDivElement> {\n features:\n | DynamicFeatureProps[]\n | GroupedFeatureProps\n | StaticFeatureDescriptor[];\n}\n\nexport const FeatureList = ({\n features,\n title = \"VUU TABLES\",\n ...htmlAttributes\n}: FeatureListProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-feature-list\",\n css: featureListCss,\n window: targetWindow,\n });\n\n const content = useMemo<ReactElement[]>(() => {\n if (isStaticFeatures(features)) {\n return features.map(({ label, type }, idx) => {\n return (\n <PaletteItem\n ViewProps={{\n closeable: true,\n header: true,\n resize: \"defer\",\n resizeable: true,\n }}\n component={featureFromJson({ type })}\n key={idx}\n value={label}\n >\n <Icon name=\"draggable\" size={18} />\n <span className={`${classBase}-itemName`}>{label}</span>\n </PaletteItem>\n );\n });\n }\n if (Array.isArray(features)) {\n return [\n <div className={`${classBase}-standalone`} key={0}>\n <Palette key=\"0\" orientation=\"vertical\">\n {features.map(({ ViewProps, ...featureProps }, i) => (\n <PaletteItem\n ViewProps={{\n closeable: true,\n header: true,\n resize: \"defer\",\n resizeable: true,\n title: featureProps.title,\n ...ViewProps,\n }}\n component={<Feature {...featureProps} />}\n key={i}\n value={featureProps.title}\n >\n <Icon name=\"draggable\" size={18} />\n <span className={`${classBase}-itemName`}>\n {featureProps.title}\n </span>\n </PaletteItem>\n ))}\n </Palette>\n </div>,\n ];\n } else {\n return Object.entries(features).map(([heading, featureList], index) => (\n <div className={`${classBase}-group`} key={index}>\n <div className={`${classBase}-groupHeader`}>{heading}</div>\n <Palette orientation=\"vertical\">\n {featureList.map(\n (\n { ViewProps, ...featureProps }: DynamicFeatureProps<object>,\n i: Key,\n ) => {\n return (\n <PaletteItem\n ViewProps={{\n closeable: true,\n header: true,\n resize: \"defer\",\n resizeable: true,\n title: featureProps.title,\n ...ViewProps,\n }}\n component={<Feature {...featureProps} />}\n key={i}\n value={featureProps.title}\n >\n <Icon name=\"draggable\" size={18} />\n <span className={`${classBase}-itemName`}>\n {featureProps.title}\n </span>\n </PaletteItem>\n );\n },\n )}\n </Palette>\n </div>\n ));\n }\n }, [features]);\n\n return (\n <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n <div className={`${classBase}-header`}>{title}</div>\n <div className={`${classBase}-content`}>{content}</div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAgBA,MAAM,SAAY,GAAA,gBAAA;AAcX,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,KAAQ,GAAA,YAAA;AAAA,EACR,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,EAAM,MAAA,OAAA,GAAU,QAAwB,MAAM;AAC5C,IAAI,IAAA,gBAAA,CAAiB,QAAQ,CAAG,EAAA;AAC9B,MAAA,OAAO,SAAS,GAAI,CAAA,CAAC,EAAE,KAAO,EAAA,IAAA,IAAQ,GAAQ,KAAA;AAC5C,QACE,uBAAA,IAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA;AAAA,cACT,SAAW,EAAA,IAAA;AAAA,cACX,MAAQ,EAAA,IAAA;AAAA,cACR,MAAQ,EAAA,OAAA;AAAA,cACR,UAAY,EAAA;AAAA,aACd;AAAA,YACA,SAAW,EAAA,eAAA,CAAgB,EAAE,IAAA,EAAM,CAAA;AAAA,YAEnC,KAAO,EAAA,KAAA;AAAA,YAEP,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,WAAY,EAAA,IAAA,EAAM,EAAI,EAAA,CAAA;AAAA,kCAChC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,aAAc,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA,WAAA;AAAA,UAJ5C;AAAA,SAKP;AAAA,OAEH,CAAA;AAAA;AAEH,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA;AAC3B,MAAO,OAAA;AAAA,4BACJ,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA,EAC1B,8BAAC,OAAgB,EAAA,EAAA,WAAA,EAAY,UAC1B,EAAA,QAAA,EAAA,QAAA,CAAS,IAAI,CAAC,EAAE,WAAW,GAAG,YAAA,IAAgB,CAC7C,qBAAA,IAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA;AAAA,cACT,SAAW,EAAA,IAAA;AAAA,cACX,MAAQ,EAAA,IAAA;AAAA,cACR,MAAQ,EAAA,OAAA;AAAA,cACR,UAAY,EAAA,IAAA;AAAA,cACZ,OAAO,YAAa,CAAA,KAAA;AAAA,cACpB,GAAG;AAAA,aACL;AAAA,YACA,SAAW,kBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AAAA,YAEtC,OAAO,YAAa,CAAA,KAAA;AAAA,YAEpB,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,WAAY,EAAA,IAAA,EAAM,EAAI,EAAA,CAAA;AAAA,kCAChC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAC1B,uBAAa,KAChB,EAAA;AAAA;AAAA,WAAA;AAAA,UANK;AAAA,SAQR,CAAA,EAAA,EApBU,GAqBb,CAAA,EAAA,EAtB8C,CAuBhD;AAAA,OACF;AAAA,KACK,MAAA;AACL,MAAA,OAAO,OAAO,OAAQ,CAAA,QAAQ,CAAE,CAAA,GAAA,CAAI,CAAC,CAAC,OAAA,EAAS,WAAW,CAAA,EAAG,0BAC1D,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,gBAAiB,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,wBACpD,GAAA,CAAA,OAAA,EAAA,EAAQ,WAAY,EAAA,UAAA,EAClB,QAAY,EAAA,WAAA,CAAA,GAAA;AAAA,UACX,CACE,EAAE,SAAA,EAAW,GAAG,YAAA,IAChB,CACG,KAAA;AACH,YACE,uBAAA,IAAA;AAAA,cAAC,WAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA;AAAA,kBACT,SAAW,EAAA,IAAA;AAAA,kBACX,MAAQ,EAAA,IAAA;AAAA,kBACR,MAAQ,EAAA,OAAA;AAAA,kBACR,UAAY,EAAA,IAAA;AAAA,kBACZ,OAAO,YAAa,CAAA,KAAA;AAAA,kBACpB,GAAG;AAAA,iBACL;AAAA,gBACA,SAAW,kBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AAAA,gBAEtC,OAAO,YAAa,CAAA,KAAA;AAAA,gBAEpB,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,WAAY,EAAA,IAAA,EAAM,EAAI,EAAA,CAAA;AAAA,sCAChC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAC1B,uBAAa,KAChB,EAAA;AAAA;AAAA,eAAA;AAAA,cANK;AAAA,aAOP;AAAA;AAEJ,SAEJ,EAAA;AAAA,OAAA,EAAA,EA9ByC,KA+B3C,CACD,CAAA;AAAA;AACH,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,eAAe,CAC/D,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAY,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,wBAC7C,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA;AAAA,GACnD,EAAA,CAAA;AAEJ;;;;"}
package/esm/index.js ADDED
@@ -0,0 +1,25 @@
1
+ export { ApplicationProvider, useApplicationSettings, useApplicationUser, useLogout, useUserSetting } from './application-provider/ApplicationProvider.js';
2
+ export { AppHeader } from './app-header/AppHeader.js';
3
+ export { Feature } from './feature/Feature.js';
4
+ export { FeatureAndLayoutProvider, useFeatures, useLayouts } from './feature-and-layout-provider/FeatureAndLayoutProvider.js';
5
+ export { LeftNav } from './left-nav/LeftNav.js';
6
+ export { LoginPanel } from './login/LoginPanel.js';
7
+ export { PersistenceContext, PersistenceProvider, usePersistenceManager } from './persistence-manager/PersistenceProvider.js';
8
+ export { LocalPersistenceManager } from './persistence-manager/LocalPersistenceManager.js';
9
+ export { RemotePersistenceManager } from './persistence-manager/RemotePersistenceManager.js';
10
+ export { StaticPersistenceManager } from './persistence-manager/StaticPersistenceManager.js';
11
+ export { Shell } from './shell.js';
12
+ export { ContextPanel } from './shell-layout-templates/context-panel/ContextPanel.js';
13
+ export { useShellLayout } from './shell-layout-templates/useShellLayout.js';
14
+ export { SidePanel } from './shell-layout-templates/side-panel/SidePanel.js';
15
+ export { ShellContextProvider } from './ShellContextProvider.js';
16
+ export { FeatureList } from './feature-list/FeatureList.js';
17
+ export { ThemeSwitch } from './theme-switch/ThemeSwitch.js';
18
+ export { UserSettingsPanel } from './user-settings/UserSettingsPanel.js';
19
+ export { FormControl, SettingsForm, isBooleanProperty, isOption, isStringOrNumber } from './user-settings/SettingsForm.js';
20
+ export { SaveLayoutPanel } from './workspace-management/SaveLayoutPanel.js';
21
+ export { LayoutList } from './workspace-management/LayoutList.js';
22
+ export { WorkspaceProvider, useWorkspace } from './workspace-management/WorkspaceProvider.js';
23
+ export { defaultWorkspaceJSON, getStackWorkspaceJSON, getWorkspaceWithLayoutJSON, loadingJSON, warningLayout } from './workspace-management/defaultWorkspaceJSON.js';
24
+ export { useWorkspaceContextMenuItems } from './workspace-management/useWorkspaceContextMenuItems.js';
25
+ //# sourceMappingURL=index.js.map