@vuu-ui/vuu-shell 0.8.57 → 0.8.58
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.
- package/cjs/feature/Feature.js +1 -2
- package/cjs/feature/Feature.js.map +1 -1
- package/cjs/index.js +0 -2
- package/cjs/index.js.map +1 -1
- package/cjs/shell.js +1 -1
- package/cjs/shell.js.map +1 -1
- package/esm/feature/Feature.js +1 -2
- package/esm/feature/Feature.js.map +1 -1
- package/esm/index.js +0 -1
- package/esm/index.js.map +1 -1
- package/esm/shell.js +2 -2
- package/esm/shell.js.map +1 -1
- package/package.json +11 -11
- package/types/index.d.ts +2 -1
package/cjs/feature/Feature.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuLayout = require('@vuu-ui/vuu-layout');
|
|
5
4
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var FeatureErrorBoundary = require('./FeatureErrorBoundary.js');
|
|
@@ -50,7 +49,7 @@ function RawFeature({
|
|
|
50
49
|
}
|
|
51
50
|
const Feature = React.memo(RawFeature);
|
|
52
51
|
Feature.displayName = "Feature";
|
|
53
|
-
|
|
52
|
+
vuuUtils.registerComponent("Feature", Feature, "view");
|
|
54
53
|
|
|
55
54
|
exports.Feature = Feature;
|
|
56
55
|
//# sourceMappingURL=Feature.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import { ViewProps } from \"@vuu-ui/vuu-layout\";\nimport { importCSS, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport React, { Suspense, useEffect } from \"react\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\nimport { Loader } from \"./Loader\";\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\nexport interface FeatureProps<P extends object | undefined = any> {\n /**\n props that will be passed to the lazily loaded component.\n */\n ComponentProps?: P;\n ViewProps?: Partial<Pick<ViewProps, \"closeable\" | \"header\">>;\n css?: string;\n height?: number;\n title?: string;\n /** \n The url of javascript bundle to lazily load. Bundle must provide a default export\n and that export must be a React component.\n */\n url: string;\n width?: number;\n}\n\nfunction RawFeature<Params extends object | undefined>({\n url,\n css,\n ComponentProps: params,\n ...props\n}: FeatureProps<Params>) {\n // useEffect(() => {\n // console.log(\"%cFeature mount\", \"color: green;\");\n // return () => {\n // console.log(\"%cFeature unmount\", \"color:red;\");\n // };\n // }, []);\n\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 return (\n <FeatureErrorBoundary url={url}>\n <Suspense fallback={<Loader />}>\n <LazyFeature {...props} {...params} />\n </Suspense>\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":["useEffect","importCSS","FeatureErrorBoundary","jsx","Suspense","Loader","registerComponent"],"mappings":";;;;;;;;AASA,MAAM,aAAA,uBAAoB,GAA2C,EAAA,CAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAAA,eAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,aAAA,CAAc,OAAO,GAAG,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,GAAG,CAAA;AAAA,GACN,CAAA;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,GAAA;AAAA,OAAI,CAAA;AAAA,KACjD,CAAA;AAAA,GACF;AAEA,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,GAAA,CAAI,GAAG,CAAA,CAAA;AAEzC,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,KAAA,CAAM,CAAsC,mCAAA,EAAA,GAAG,CAAE,CAAA,CAAA,CAAA;AAAA,GAClD,MAAA;AACL,IAAO,OAAA,WAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAmBA,SAAS,UAA8C,CAAA;AAAA,EACrD,GAAA;AAAA,EACA,GAAA;AAAA,EACA,cAAgB,EAAA,MAAA;AAAA,EAChB,GAAG,KAAA;AACL,CAAyB,EAAA;AAQvB,EAAA,IAAI,GAAK,EAAA;AAYP,IAAAC,kBAAA,CAAU,GAAG,CAAA,CAAE,IAAK,CAAA,CAAC,UAAe,KAAA;AAClC,MAAA,QAAA,CAAS,kBAAqB,GAAA;AAAA,QAC5B,GAAG,QAAS,CAAA,kBAAA;AAAA,QACZ,UAAA;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,WAAA,GAAc,iBAAiB,GAAG,CAAA,CAAA;AACxC,EAAA,sCACGC,yCAAqB,EAAA,EAAA,GAAA,EACpB,QAAC,kBAAAC,cAAA,CAAAC,cAAA,EAAA,EAAS,0BAAWD,cAAA,CAAAE,aAAA,EAAA,EAAO,CAC1B,EAAA,QAAA,kBAAAF,cAAA,CAAC,eAAa,GAAG,KAAA,EAAQ,GAAG,MAAA,EAAQ,GACtC,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA;AAOa,MAAA,OAAA,GAAU,KAAM,CAAA,IAAA,CAAK,UAAU,EAAA;AAC5C,OAAA,CAAQ,WAAc,GAAA,SAAA,CAAA;AACtBG,0BAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}
|
package/cjs/index.js
CHANGED
|
@@ -13,7 +13,6 @@ var loginUtils = require('./login/login-utils.js');
|
|
|
13
13
|
var SessionEditingForm = require('./session-editing-form/SessionEditingForm.js');
|
|
14
14
|
var shell = require('./shell.js');
|
|
15
15
|
var ContextPanel = require('./shell-layouts/context-panel/ContextPanel.js');
|
|
16
|
-
var useShellLayout = require('./shell-layouts/useShellLayout.js');
|
|
17
16
|
var SidePanel = require('./shell-layouts/side-panel/SidePanel.js');
|
|
18
17
|
var shellTypes = require('./shellTypes.js');
|
|
19
18
|
var ShellContextProvider = require('./ShellContextProvider.js');
|
|
@@ -40,7 +39,6 @@ exports.redirectToLogin = loginUtils.redirectToLogin;
|
|
|
40
39
|
exports.SessionEditingForm = SessionEditingForm.SessionEditingForm;
|
|
41
40
|
exports.Shell = shell.Shell;
|
|
42
41
|
exports.ContextPanel = ContextPanel.ContextPanel;
|
|
43
|
-
exports.useShellLayout = useShellLayout.useShellLayout;
|
|
44
42
|
exports.SidePanel = SidePanel.SidePanel;
|
|
45
43
|
exports.isTableSchema = shellTypes.isTableSchema;
|
|
46
44
|
exports.isWildcardSchema = shellTypes.isWildcardSchema;
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/cjs/shell.js
CHANGED
|
@@ -23,7 +23,7 @@ require('./persistence-management/RemotePersistenceManager.js');
|
|
|
23
23
|
var useShellLayout = require('./shell-layouts/useShellLayout.js');
|
|
24
24
|
var shell = require('./shell.css.js');
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
vuuUtils.registerComponent("ApplicationSettings", ApplicationSettingsPanel.ApplicationSettingsPanel, "view");
|
|
27
27
|
if (typeof vuuLayout.StackLayout !== "function") {
|
|
28
28
|
console.warn(
|
|
29
29
|
"StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
|
package/cjs/shell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n DraggableLayout,\n LayoutProvider,\n LayoutProviderProps,\n StackLayout,\n
|
|
1
|
+
{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n DraggableLayout,\n LayoutProvider,\n LayoutProviderProps,\n StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport { ContextMenuProvider, useDialog } from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n HTMLAttributes,\n ReactNode,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport { ApplicationSettingsPanel } from \"./application-settings\";\nimport {\n useLayoutContextMenuItems,\n useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\nimport { SaveLocation } from \"./shellTypes\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", ApplicationSettingsPanel, \"view\");\n\nif (typeof StackLayout !== \"function\") {\n console.warn(\n \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n );\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n LayoutProps?: Pick<\n LayoutProviderProps,\n \"createNewChild\" | \"pathToDropTarget\"\n >;\n LeftSidePanelProps?: SidePanelProps;\n children?: ReactNode;\n leftSidePanelLayout?: \"full-height\" | \"inlay\";\n loginUrl?: string;\n // paletteConfig: any;\n saveLocation?: SaveLocation;\n saveUrl?: string;\n serverUrl?: string;\n user: VuuUser;\n}\n\nexport const Shell = ({\n LayoutProps,\n LeftSidePanelProps = defaultLeftSidePanel,\n children,\n className: classNameProp,\n leftSidePanelLayout,\n loginUrl,\n saveLocation: _,\n saveUrl,\n serverUrl,\n user,\n ...htmlAttributes\n}: ShellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-shell\",\n css: shellCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const { dialog, setDialogState } = useDialog();\n const { applicationJson, saveApplicationLayout } = useLayoutManager();\n const { buildMenuOptions, handleMenuAction } =\n useLayoutContextMenuItems(setDialogState);\n const [connectionStatus, setConnectionStatus] = useState<\n \"connected\" | \"rejected\"\n >(\"connected\");\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 useMemo(async () => {\n if (serverUrl && user.token) {\n const connectionStatus = await connectToServer({\n authToken: user.token,\n url: serverUrl,\n username: user.username,\n });\n setConnectionStatus(connectionStatus);\n }\n }, [serverUrl, user.token, user.username]);\n\n const className = cx(\"vuuShell\");\n\n const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n const shellLayout = useShellLayout({\n LeftSidePanelProps,\n leftSidePanelLayout,\n appHeader: <AppHeader loginUrl={loginUrl} />,\n });\n\n if (connectionStatus === \"rejected\") {\n console.log(\"game over, no connection to server\");\n }\n\n return isLayoutLoading ? null : (\n <ApplicationProvider user={user}>\n <ContextMenuProvider\n menuActionHandler={handleMenuAction}\n menuBuilder={buildMenuOptions}\n >\n <LayoutProvider\n {...LayoutProps}\n layout={applicationJson.layout}\n onLayoutChange={handleLayoutChange}\n >\n <DraggableLayout\n className={className}\n ref={rootRef}\n {...htmlAttributes}\n >\n {shellLayout}\n </DraggableLayout>\n </LayoutProvider>\n {children || dialog}\n </ContextMenuProvider>\n </ApplicationProvider>\n );\n};\n"],"names":["registerComponent","ApplicationSettingsPanel","StackLayout","logger","useWindow","useComponentCssInjection","shellCss","useRef","useDialog","useLayoutManager","useLayoutContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","loadingApplicationJson","useShellLayout","jsx","AppHeader","ApplicationProvider","jsxs","ContextMenuProvider","LayoutProvider","DraggableLayout"],"mappings":"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"}
|
package/esm/feature/Feature.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { registerComponent } from '@vuu-ui/vuu-
|
|
3
|
-
import { importCSS } from '@vuu-ui/vuu-utils';
|
|
2
|
+
import { registerComponent, importCSS } from '@vuu-ui/vuu-utils';
|
|
4
3
|
import React, { Suspense, useEffect } from 'react';
|
|
5
4
|
import { FeatureErrorBoundary } from './FeatureErrorBoundary.js';
|
|
6
5
|
import { Loader } from './Loader.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import { ViewProps } from \"@vuu-ui/vuu-layout\";\nimport { importCSS, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport React, { Suspense, useEffect } from \"react\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\nimport { Loader } from \"./Loader\";\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\nexport interface FeatureProps<P extends object | undefined = any> {\n /**\n props that will be passed to the lazily loaded component.\n */\n ComponentProps?: P;\n ViewProps?: Partial<Pick<ViewProps, \"closeable\" | \"header\">>;\n css?: string;\n height?: number;\n title?: string;\n /** \n The url of javascript bundle to lazily load. Bundle must provide a default export\n and that export must be a React component.\n */\n url: string;\n width?: number;\n}\n\nfunction RawFeature<Params extends object | undefined>({\n url,\n css,\n ComponentProps: params,\n ...props\n}: FeatureProps<Params>) {\n // useEffect(() => {\n // console.log(\"%cFeature mount\", \"color: green;\");\n // return () => {\n // console.log(\"%cFeature unmount\", \"color:red;\");\n // };\n // }, []);\n\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 return (\n <FeatureErrorBoundary url={url}>\n <Suspense fallback={<Loader />}>\n <LazyFeature {...props} {...params} />\n </Suspense>\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":";;;;;;AASA,MAAM,aAAA,uBAAoB,GAA2C,EAAA,CAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,aAAA,CAAc,OAAO,GAAG,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,GAAG,CAAA;AAAA,GACN,CAAA;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,GAAA;AAAA,OAAI,CAAA;AAAA,KACjD,CAAA;AAAA,GACF;AAEA,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,GAAA,CAAI,GAAG,CAAA,CAAA;AAEzC,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,KAAA,CAAM,CAAsC,mCAAA,EAAA,GAAG,CAAE,CAAA,CAAA,CAAA;AAAA,GAClD,MAAA;AACL,IAAO,OAAA,WAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAmBA,SAAS,UAA8C,CAAA;AAAA,EACrD,GAAA;AAAA,EACA,GAAA;AAAA,EACA,cAAgB,EAAA,MAAA;AAAA,EAChB,GAAG,KAAA;AACL,CAAyB,EAAA;AAQvB,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,UAAA;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,WAAA,GAAc,iBAAiB,GAAG,CAAA,CAAA;AACxC,EAAA,2BACG,oBAAqB,EAAA,EAAA,GAAA,EACpB,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,0BAAW,GAAA,CAAA,MAAA,EAAA,EAAO,CAC1B,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAa,GAAG,KAAA,EAAQ,GAAG,MAAA,EAAQ,GACtC,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA;AAOa,MAAA,OAAA,GAAU,KAAM,CAAA,IAAA,CAAK,UAAU,EAAA;AAC5C,OAAA,CAAQ,WAAc,GAAA,SAAA,CAAA;AACtB,iBAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -11,7 +11,6 @@ export { getAuthDetailsFromCookies, getAuthModeFromCookies, logout, redirectToLo
|
|
|
11
11
|
export { SessionEditingForm } from './session-editing-form/SessionEditingForm.js';
|
|
12
12
|
export { Shell } from './shell.js';
|
|
13
13
|
export { ContextPanel } from './shell-layouts/context-panel/ContextPanel.js';
|
|
14
|
-
export { useShellLayout } from './shell-layouts/useShellLayout.js';
|
|
15
14
|
export { SidePanel } from './shell-layouts/side-panel/SidePanel.js';
|
|
16
15
|
export { isTableSchema, isWildcardSchema } from './shellTypes.js';
|
|
17
16
|
export { ShellContextProvider, useShellContext } from './ShellContextProvider.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
package/esm/shell.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { connectToServer } from '@vuu-ui/vuu-data-remote';
|
|
3
|
-
import {
|
|
3
|
+
import { StackLayout, LayoutProvider, DraggableLayout } from '@vuu-ui/vuu-layout';
|
|
4
4
|
import { useDialog, ContextMenuProvider } from '@vuu-ui/vuu-popups';
|
|
5
|
-
import { logger } from '@vuu-ui/vuu-utils';
|
|
5
|
+
import { registerComponent, logger } from '@vuu-ui/vuu-utils';
|
|
6
6
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
7
|
import { useWindow } from '@salt-ds/window';
|
|
8
8
|
import cx from 'clsx';
|
package/esm/shell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n DraggableLayout,\n LayoutProvider,\n LayoutProviderProps,\n StackLayout,\n
|
|
1
|
+
{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n DraggableLayout,\n LayoutProvider,\n LayoutProviderProps,\n StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport { ContextMenuProvider, useDialog } from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n HTMLAttributes,\n ReactNode,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport { ApplicationSettingsPanel } from \"./application-settings\";\nimport {\n useLayoutContextMenuItems,\n useLayoutManager,\n} from \"./layout-management\";\nimport { loadingApplicationJson } from \"./persistence-management\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\nimport { SaveLocation } from \"./shellTypes\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", ApplicationSettingsPanel, \"view\");\n\nif (typeof StackLayout !== \"function\") {\n console.warn(\n \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n );\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n LayoutProps?: Pick<\n LayoutProviderProps,\n \"createNewChild\" | \"pathToDropTarget\"\n >;\n LeftSidePanelProps?: SidePanelProps;\n children?: ReactNode;\n leftSidePanelLayout?: \"full-height\" | \"inlay\";\n loginUrl?: string;\n // paletteConfig: any;\n saveLocation?: SaveLocation;\n saveUrl?: string;\n serverUrl?: string;\n user: VuuUser;\n}\n\nexport const Shell = ({\n LayoutProps,\n LeftSidePanelProps = defaultLeftSidePanel,\n children,\n className: classNameProp,\n leftSidePanelLayout,\n loginUrl,\n saveLocation: _,\n saveUrl,\n serverUrl,\n user,\n ...htmlAttributes\n}: ShellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-shell\",\n css: shellCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const { dialog, setDialogState } = useDialog();\n const { applicationJson, saveApplicationLayout } = useLayoutManager();\n const { buildMenuOptions, handleMenuAction } =\n useLayoutContextMenuItems(setDialogState);\n const [connectionStatus, setConnectionStatus] = useState<\n \"connected\" | \"rejected\"\n >(\"connected\");\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 useMemo(async () => {\n if (serverUrl && user.token) {\n const connectionStatus = await connectToServer({\n authToken: user.token,\n url: serverUrl,\n username: user.username,\n });\n setConnectionStatus(connectionStatus);\n }\n }, [serverUrl, user.token, user.username]);\n\n const className = cx(\"vuuShell\");\n\n const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n const shellLayout = useShellLayout({\n LeftSidePanelProps,\n leftSidePanelLayout,\n appHeader: <AppHeader loginUrl={loginUrl} />,\n });\n\n if (connectionStatus === \"rejected\") {\n console.log(\"game over, no connection to server\");\n }\n\n return isLayoutLoading ? null : (\n <ApplicationProvider user={user}>\n <ContextMenuProvider\n menuActionHandler={handleMenuAction}\n menuBuilder={buildMenuOptions}\n >\n <LayoutProvider\n {...LayoutProps}\n layout={applicationJson.layout}\n onLayoutChange={handleLayoutChange}\n >\n <DraggableLayout\n className={className}\n ref={rootRef}\n {...htmlAttributes}\n >\n {shellLayout}\n </DraggableLayout>\n </LayoutProvider>\n {children || dialog}\n </ContextMenuProvider>\n </ApplicationProvider>\n );\n};\n"],"names":["connectionStatus"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.58",
|
|
3
3
|
"description": "VUU UI Shell",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "0.8.
|
|
9
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.8.58",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "0.8.58",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "0.8.58"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@salt-ds/core": "1.22.0",
|
|
13
13
|
"@salt-ds/styles": "0.2.1",
|
|
14
14
|
"@salt-ds/window": "0.1.1",
|
|
15
|
-
"@vuu-ui/vuu-data-remote": "0.8.
|
|
16
|
-
"@vuu-ui/vuu-icons": "0.8.
|
|
17
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
18
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
19
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
20
|
-
"@vuu-ui/vuu-ui-controls": "0.8.
|
|
21
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
15
|
+
"@vuu-ui/vuu-data-remote": "0.8.58",
|
|
16
|
+
"@vuu-ui/vuu-icons": "0.8.58",
|
|
17
|
+
"@vuu-ui/vuu-layout": "0.8.58",
|
|
18
|
+
"@vuu-ui/vuu-popups": "0.8.58",
|
|
19
|
+
"@vuu-ui/vuu-table": "0.8.58",
|
|
20
|
+
"@vuu-ui/vuu-ui-controls": "0.8.58",
|
|
21
|
+
"@vuu-ui/vuu-utils": "0.8.58",
|
|
22
22
|
"html-to-image": "^1.11.11"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
package/types/index.d.ts
CHANGED
|
@@ -6,7 +6,8 @@ export * from "./left-nav";
|
|
|
6
6
|
export * from "./login";
|
|
7
7
|
export * from "./session-editing-form";
|
|
8
8
|
export * from "./shell";
|
|
9
|
-
export * from "./shell-layouts";
|
|
9
|
+
export * from "./shell-layouts/context-panel";
|
|
10
|
+
export * from "./shell-layouts/side-panel";
|
|
10
11
|
export * from "./shellTypes";
|
|
11
12
|
export * from "./ShellContextProvider";
|
|
12
13
|
export * from "./feature-list";
|