andoncloud-widget-preview 1.5.0 → 1.5.1

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { SidePanelProps } from "andoncloud-sdk";
-import * as react from "react";
 import { BaseWidgetData, BaseWidgetSettings, FilterValues, WidgetProps } from "andoncloud-dashboard-toolkit";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { InitOptions } from "i18next";
 
 //#region src/types.d.ts
@@ -28,7 +28,7 @@ declare const WidgetPreview: <WD extends BaseWidgetData = BaseWidgetData, WS ext
   baseUrl,
   locales,
   ...contentProps
-}: WidgetPreviewProps<WD, WS>) => react.JSX.Element;
+}: WidgetPreviewProps<WD, WS>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { WidgetPreview, type WidgetPreviewProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,5 +1,5 @@
 import { App, Container, refreshUserData, registerTranslations, setLocale, sidePanelDefaultProps, useLoginStatus } from "andoncloud-sdk";
-import React$1, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Box, Typography } from "@mui/material";
 import { DashboardFilters, WidgetCard, useGqlClients } from "andoncloud-dashboard-toolkit";
 import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
 import ReactGridLayout, { useContainerWidth } from "react-grid-layout";
 import getUuid from "uuid-by-string";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { alpha } from "@mui/material/styles";
 //#endregion
 //#region src/locales/index.ts
@@ -32,44 +33,47 @@ const Dashboard = ({ apiUrl, lang, filters, widgetName, widgetDisplayName, getWi
 	const { width, containerRef, mounted } = useContainerWidth();
 	const [settingsModalOpened, setSettingsModalOpened] = useState(false);
 	const widgetId = getUuid(widgetName);
-	return /* @__PURE__ */ React$1.createElement(Box, { ref: containerRef }, mounted && /* @__PURE__ */ React$1.createElement(ReactGridLayout, {
-		className: "layout",
-		width,
-		layout: [{
-			i: widgetId,
-			x: 0,
-			y: 0,
-			w: widgetWidth || 3,
-			h: widgetHeight || 4
-		}],
-		dragConfig: { handle: ".draggable-handle" }
-	}, status === "connected" && /* @__PURE__ */ React$1.createElement(WidgetCard, {
-		key: widgetId,
-		id: widgetId,
-		Widget,
-		title: widgetDisplayName(lang),
-		getTitle: getWidgetTitle,
-		customTitle: widgetCustomTitle,
-		thumbnail: widgetThumbnail,
-		url: apiUrl,
-		lang,
-		filters,
-		requiredFeatures: widgetRequiredFeatures,
-		extraPermissions: widgetExtraPermissions,
-		openSettingsModal: settingsModalOpened,
-		onSettingsModalOpened: () => setSettingsModalOpened(true),
-		onSettingsModalClosed: () => setSettingsModalOpened(false),
-		sidePanelOpened: sidePanelOpened || false,
-		updateSidePanelProps,
-		editMode,
-		version: widgetVersion
-	})));
+	return /* @__PURE__ */ jsx(Box, {
+		ref: containerRef,
+		children: mounted && /* @__PURE__ */ jsx(ReactGridLayout, {
+			className: "layout",
+			width,
+			layout: [{
+				i: widgetId,
+				x: 0,
+				y: 0,
+				w: widgetWidth || 3,
+				h: widgetHeight || 4
+			}],
+			dragConfig: { handle: ".draggable-handle" },
+			children: status === "connected" && /* @__PURE__ */ jsx(WidgetCard, {
+				id: widgetId,
+				Widget,
+				title: widgetDisplayName(lang),
+				getTitle: getWidgetTitle,
+				customTitle: widgetCustomTitle,
+				thumbnail: widgetThumbnail,
+				url: apiUrl,
+				lang,
+				filters,
+				requiredFeatures: widgetRequiredFeatures,
+				extraPermissions: widgetExtraPermissions,
+				openSettingsModal: settingsModalOpened,
+				onSettingsModalOpened: () => setSettingsModalOpened(true),
+				onSettingsModalClosed: () => setSettingsModalOpened(false),
+				sidePanelOpened: sidePanelOpened || false,
+				updateSidePanelProps,
+				editMode,
+				version: widgetVersion
+			}, widgetId)
+		})
+	});
 };
 //#endregion
 //#region src/components/Routing.tsx
 const routes = (isLoggedIn, { apiUrl, lang, filters, getWidgetTitle, widgetCustomTitle, widgetName, widgetDisplayName, widgetWidth, widgetHeight, widgetThumbnail, widgetRequiredFeatures, widgetExtraPermissions, widgetVersion, Widget, sidePanelOpened, updateSidePanelProps, editMode }) => [{
 	path: "/",
-	element: isLoggedIn ? /* @__PURE__ */ React$1.createElement(Dashboard, {
+	element: isLoggedIn ? /* @__PURE__ */ jsx(Dashboard, {
 		apiUrl,
 		lang,
 		filters,
@@ -87,7 +91,7 @@ const routes = (isLoggedIn, { apiUrl, lang, filters, getWidgetTitle, widgetCusto
 		sidePanelOpened,
 		updateSidePanelProps,
 		editMode
-	}) : /* @__PURE__ */ React$1.createElement(Navigate, { to: "/login" })
+	}) : /* @__PURE__ */ jsx(Navigate, { to: "/login" })
 }];
 const Routing = (dashboardProps) => {
 	const { status } = useLoginStatus();
@@ -156,66 +160,69 @@ const WidgetPreviewContent = ({ apiUrl, widgetName, widgetDisplayName, getWidget
 		label: t("widgetPreview.changeLanguage"),
 		action: () => setLocale(lang === "pl" ? "en" : "pl")
 	}];
-	const headerProps = {
-		position: "fixed",
-		leadingText: widgetDisplayName(lang),
-		content: /* @__PURE__ */ React.createElement(Box, { sx: styles.filtersContainer }, /* @__PURE__ */ React.createElement(DashboardFilters, {
-			initialValues: filters,
-			onChange: setFilters,
-			shifts,
-			onFeatureRequest: handleFeatureRequest
-		}), /* @__PURE__ */ React.createElement(Typography, {
-			variant: "caption",
-			sx: styles.filterDisclaimer
-		}, t("widgetPreview.filterDisclaimer"))),
-		navProps: { items: navItems },
-		menuProps: {
-			items: menuItems,
-			buttonColor: "white"
-		}
-	};
-	return /* @__PURE__ */ React.createElement(Container, {
-		headerProps,
+	return /* @__PURE__ */ jsx(Container, {
+		headerProps: {
+			position: "fixed",
+			leadingText: widgetDisplayName(lang),
+			content: /* @__PURE__ */ jsxs(Box, {
+				sx: styles.filtersContainer,
+				children: [/* @__PURE__ */ jsx(DashboardFilters, {
+					initialValues: filters,
+					onChange: setFilters,
+					shifts,
+					onFeatureRequest: handleFeatureRequest
+				}), /* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					sx: styles.filterDisclaimer,
+					children: t("widgetPreview.filterDisclaimer")
+				})]
+			}),
+			navProps: { items: navItems },
+			menuProps: {
+				items: menuItems,
+				buttonColor: "white"
+			}
+		},
 		sidebarMenuProps: {
 			enabled: true,
 			items: []
 		},
 		sidePanelProps,
-		styles: { overflowY: "auto" }
-	}, /* @__PURE__ */ React.createElement(Routing, {
-		apiUrl,
-		lang,
-		filters,
-		getWidgetTitle,
-		widgetCustomTitle,
-		widgetName,
-		widgetDisplayName,
-		widgetWidth,
-		widgetHeight,
-		widgetThumbnail,
-		widgetRequiredFeatures,
-		widgetExtraPermissions,
-		widgetVersion,
-		Widget,
-		sidePanelOpened: sidePanelProps.open || false,
-		updateSidePanelProps,
-		editMode
-	}));
+		styles: { overflowY: "auto" },
+		children: /* @__PURE__ */ jsx(Routing, {
+			apiUrl,
+			lang,
+			filters,
+			getWidgetTitle,
+			widgetCustomTitle,
+			widgetName,
+			widgetDisplayName,
+			widgetWidth,
+			widgetHeight,
+			widgetThumbnail,
+			widgetRequiredFeatures,
+			widgetExtraPermissions,
+			widgetVersion,
+			Widget,
+			sidePanelOpened: sidePanelProps.open || false,
+			updateSidePanelProps,
+			editMode
+		})
+	});
 };
 //#endregion
 //#region src/components/WidgetPreview/index.tsx
 const WidgetPreview = ({ baseUrl, locales, ...contentProps }) => {
-	const authProps = {
-		redirectPath: "/",
-		clientId: "sample-app-client-id",
-		grantType: "password"
-	};
-	const i18nProps = { locales };
-	return /* @__PURE__ */ React.createElement(App, {
+	return /* @__PURE__ */ jsx(App, {
 		baseUrl,
-		authProps,
-		i18nProps
-	}, /* @__PURE__ */ React.createElement(WidgetPreviewContent, contentProps));
+		authProps: {
+			redirectPath: "/",
+			clientId: "sample-app-client-id",
+			grantType: "password"
+		},
+		i18nProps: { locales },
+		children: /* @__PURE__ */ jsx(WidgetPreviewContent, { ...contentProps })
+	});
 };
 //#endregion
 //#region src/index.tsx

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["en","pl","AndonCloudApp","locales"],"sources":["../src/locales/en/translation.json","../src/locales/pl/translation.json","../src/locales/index.ts","../src/components/Dashboard/index.tsx","../src/components/Routing.tsx","../src/components/WidgetPreview/styles.ts","../src/components/WidgetPreview/WidgetPreviewContent.tsx","../src/components/WidgetPreview/index.tsx","../src/index.tsx"],"sourcesContent":["","","import en from './en/translation.json';\nimport pl from './pl/translation.json';\n\nconst resources = {\n  en: {\n    translation: en,\n  },\n  pl: {\n    translation: pl,\n  },\n};\n\nexport default resources;\n","import 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\n\nimport React, { useState } from 'react';\nimport ReactGridLayout, { useContainerWidth } from 'react-grid-layout';\n\nimport { Box } from '@mui/material';\nimport { WidgetCard } from 'andoncloud-dashboard-toolkit';\nimport { useLoginStatus } from 'andoncloud-sdk';\nimport getUuid from 'uuid-by-string';\n\nimport { DashboardProps } from '@/types';\n\nconst Dashboard: React.FC<DashboardProps> = ({\n  apiUrl,\n  lang,\n  filters,\n  widgetName,\n  widgetDisplayName,\n  getWidgetTitle,\n  widgetCustomTitle,\n  widgetWidth,\n  widgetHeight,\n  widgetThumbnail,\n  widgetRequiredFeatures,\n  widgetExtraPermissions,\n  widgetVersion,\n  Widget,\n  sidePanelOpened,\n  updateSidePanelProps,\n  editMode,\n}) => {\n  const { status } = useLoginStatus();\n  const { width, containerRef, mounted } = useContainerWidth();\n  const [settingsModalOpened, setSettingsModalOpened] = useState<boolean>(false);\n  const widgetId = getUuid(widgetName);\n\n  return (\n    <Box ref={containerRef}>\n      {mounted && (\n        <ReactGridLayout\n          className=\"layout\"\n          width={width}\n          layout={[{ i: widgetId, x: 0, y: 0, w: widgetWidth || 3, h: widgetHeight || 4 }]}\n          dragConfig={{ handle: '.draggable-handle' }}\n        >\n          {status === 'connected' && (\n            <WidgetCard\n              key={widgetId}\n              id={widgetId}\n              Widget={Widget}\n              title={widgetDisplayName(lang)}\n              getTitle={getWidgetTitle}\n              customTitle={widgetCustomTitle}\n              thumbnail={widgetThumbnail}\n              url={apiUrl}\n              lang={lang}\n              filters={filters}\n              requiredFeatures={widgetRequiredFeatures}\n              extraPermissions={widgetExtraPermissions}\n              openSettingsModal={settingsModalOpened}\n              onSettingsModalOpened={() => setSettingsModalOpened(true)}\n              onSettingsModalClosed={() => setSettingsModalOpened(false)}\n              sidePanelOpened={sidePanelOpened || false}\n              updateSidePanelProps={updateSidePanelProps}\n              editMode={editMode}\n              version={widgetVersion}\n            />\n          )}\n        </ReactGridLayout>\n      )}\n    </Box>\n  );\n};\n\nexport default Dashboard;\n","import React from 'react';\nimport { Navigate, useRoutes } from 'react-router-dom';\n\nimport { useLoginStatus } from 'andoncloud-sdk';\n\nimport { DashboardProps } from '@/types';\n\nimport Dashboard from './Dashboard';\n\nconst routes = (\n  isLoggedIn: boolean,\n  {\n    apiUrl,\n    lang,\n    filters,\n    getWidgetTitle,\n    widgetCustomTitle,\n    widgetName,\n    widgetDisplayName,\n    widgetWidth,\n    widgetHeight,\n    widgetThumbnail,\n    widgetRequiredFeatures,\n    widgetExtraPermissions,\n    widgetVersion,\n    Widget,\n    sidePanelOpened,\n    updateSidePanelProps,\n    editMode,\n  }: DashboardProps,\n) => [\n  {\n    path: '/',\n    element: isLoggedIn ? (\n      <Dashboard\n        apiUrl={apiUrl}\n        lang={lang}\n        filters={filters}\n        getWidgetTitle={getWidgetTitle}\n        widgetCustomTitle={widgetCustomTitle}\n        widgetName={widgetName}\n        widgetDisplayName={widgetDisplayName}\n        widgetWidth={widgetWidth}\n        widgetHeight={widgetHeight}\n        widgetThumbnail={widgetThumbnail}\n        widgetRequiredFeatures={widgetRequiredFeatures}\n        widgetExtraPermissions={widgetExtraPermissions}\n        widgetVersion={widgetVersion}\n        Widget={Widget}\n        sidePanelOpened={sidePanelOpened}\n        updateSidePanelProps={updateSidePanelProps}\n        editMode={editMode}\n      />\n    ) : (\n      <Navigate to=\"/login\" />\n    ),\n  },\n];\n\nconst Routing: React.FC<DashboardProps> = (dashboardProps) => {\n  const { status } = useLoginStatus();\n\n  return useRoutes(routes(status === 'connected', dashboardProps));\n};\n\nexport default Routing;\n","import { Theme } from '@mui/material';\nimport { alpha } from '@mui/material/styles';\n\nexport const styles = {\n  filtersContainer: {\n    display: 'flex',\n    alignItems: 'flex-end',\n  },\n  filterDisclaimer: (theme: Theme) => ({\n    flexShrink: 0,\n    maxWidth: theme.spacing(22),\n    marginLeft: theme.spacing(2),\n    padding: theme.spacing(0.5, 1, 0.5, 2.5),\n    textIndent: theme.spacing(-1.5),\n    fontSize: '0.75rem',\n    lineHeight: 1.3,\n    color: theme.palette.warning.main,\n    borderRadius: theme.spacing(0.75),\n    backgroundColor: alpha(theme.palette.common.black, 0.2),\n  }),\n};\n","import { useEffect, useState } from 'react';\n\nimport { Box, Typography } from '@mui/material';\nimport { BaseWidgetData, BaseWidgetSettings, DashboardFilters, FilterValues, Shift, useGqlClients } from 'andoncloud-dashboard-toolkit';\nimport {\n  Container,\n  HeaderProps,\n  refreshUserData,\n  setLocale,\n  sidePanelDefaultProps,\n  SidePanelProps,\n} from 'andoncloud-sdk';\nimport { useTranslation } from 'react-i18next';\n\nimport { WidgetPreviewProps } from '@/types';\n\nimport Routing from '../Routing';\n\nimport { styles } from './styles';\n\nconst WidgetPreviewContent = <WD extends BaseWidgetData = BaseWidgetData, WS extends BaseWidgetSettings = BaseWidgetSettings>({\n  apiUrl,\n  widgetName,\n  widgetDisplayName,\n  getWidgetTitle,\n  widgetCustomTitle,\n  widgetWidth,\n  widgetHeight,\n  widgetThumbnail,\n  widgetRequiredFeatures,\n  widgetExtraPermissions,\n  widgetVersion,\n  Widget,\n}: Omit<WidgetPreviewProps<WD, WS>, 'baseUrl' | 'locales'>) => {\n  // -- Translation --\n  const { t, i18n } = useTranslation();\n\n  // -- Local state --\n  const [filters, setFilters] = useState<FilterValues | undefined>();\n  const [shifts, setShifts] = useState<Shift[]>([]);\n  const [editMode, setEditMode] = useState(true);\n  const [sidePanelProps, setSidePanelProps] = useState<SidePanelProps>(sidePanelDefaultProps);\n\n  // -- Data layer --\n  const lang = (i18n.language || 'en') as 'en' | 'pl';\n  const { graphqlSdk } = useGqlClients({ url: apiUrl, wsUrl: '', lang });\n\n  useEffect(() => {\n    if (!graphqlSdk) return;\n    graphqlSdk\n      .shifts()\n      .then((data) => setShifts(data.shifts))\n      .catch(() => {});\n  }, [graphqlSdk]);\n\n  // handlers\n  const handleFeatureRequest = async (): Promise<boolean> => {\n    await refreshUserData();\n    return true;\n  };\n\n  const updateSidePanelProps = ({ onClose: onCloseCallback, ...updatedProps }: Partial<SidePanelProps>) => {\n    setSidePanelProps((current) => ({\n      ...(updatedProps.open ? sidePanelDefaultProps : current),\n      ...updatedProps,\n      onClose: () => {\n        setSidePanelProps((current) => ({ ...current, open: false }));\n        onCloseCallback?.();\n      },\n    }));\n  };\n\n  const navItems = [\n    {\n      label: editMode\n        ? t('widgetPreview.saveChanges')\n        : t('widgetPreview.editMode'),\n      action: () => setEditMode((current) => !current),\n    },\n  ];\n\n  const menuItems = [\n    {\n      label: t('widgetPreview.changeLanguage'),\n      action: () => setLocale(lang === 'pl' ? 'en' : 'pl'),\n    },\n  ];\n\n  const headerProps: HeaderProps = {\n    position: 'fixed',\n    leadingText: widgetDisplayName(lang),\n    content: (\n      <Box sx={styles.filtersContainer}>\n        <DashboardFilters\n          initialValues={filters}\n          onChange={setFilters}\n          shifts={shifts}\n          onFeatureRequest={handleFeatureRequest}\n        />\n        <Typography variant=\"caption\" sx={styles.filterDisclaimer}>\n          {t('widgetPreview.filterDisclaimer')}\n        </Typography>\n      </Box>\n    ),\n    navProps: {\n      items: navItems,\n    },\n    menuProps: {\n      items: menuItems,\n      buttonColor: 'white',\n    },\n  };\n\n  return (\n    <Container\n      headerProps={headerProps}\n      sidebarMenuProps={{\n        enabled: true,\n        items: [],\n      }}\n      sidePanelProps={sidePanelProps}\n      styles={{\n        overflowY: 'auto',\n      }}\n    >\n      <Routing\n        apiUrl={apiUrl}\n        lang={lang}\n        filters={filters}\n        getWidgetTitle={getWidgetTitle}\n        widgetCustomTitle={widgetCustomTitle}\n        widgetName={widgetName}\n        widgetDisplayName={widgetDisplayName}\n        widgetWidth={widgetWidth}\n        widgetHeight={widgetHeight}\n        widgetThumbnail={widgetThumbnail}\n        widgetRequiredFeatures={widgetRequiredFeatures}\n        widgetExtraPermissions={widgetExtraPermissions}\n        widgetVersion={widgetVersion}\n        Widget={Widget}\n        sidePanelOpened={sidePanelProps.open || false}\n        updateSidePanelProps={updateSidePanelProps}\n        editMode={editMode}\n      />\n    </Container>\n  );\n};\n\nexport { WidgetPreviewContent };\n","import { BaseWidgetData, BaseWidgetSettings } from 'andoncloud-dashboard-toolkit';\nimport {\n  App as AndonCloudApp,\n  AuthProps,\n  I18nProps,\n} from 'andoncloud-sdk';\n\nimport { WidgetPreviewProps } from '@/types';\n\nimport { WidgetPreviewContent } from './WidgetPreviewContent';\n\nconst WidgetPreview = <WD extends BaseWidgetData = BaseWidgetData, WS extends BaseWidgetSettings = BaseWidgetSettings>({\n  baseUrl,\n  locales,\n  ...contentProps\n}: WidgetPreviewProps<WD, WS>) => {\n  const authProps: AuthProps = {\n    redirectPath: '/',\n    clientId: 'sample-app-client-id',\n    grantType: 'password',\n  };\n\n  const i18nProps: I18nProps = {\n    locales,\n  };\n\n  return (\n    <AndonCloudApp baseUrl={baseUrl} authProps={authProps} i18nProps={i18nProps}>\n      <WidgetPreviewContent {...contentProps} />\n    </AndonCloudApp>\n  );\n};\n\nexport default WidgetPreview;\n","import { registerTranslations } from 'andoncloud-sdk';\n\nimport locales from './locales';\n\nregisterTranslations(locales);\n\nexport { default as WidgetPreview } from './components/WidgetPreview';\n\nexport type { WidgetPreviewProps } from './types';\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["en","pl","AndonCloudApp","locales"],"sources":["../src/locales/en/translation.json","../src/locales/pl/translation.json","../src/locales/index.ts","../src/components/Dashboard/index.tsx","../src/components/Routing.tsx","../src/components/WidgetPreview/styles.ts","../src/components/WidgetPreview/WidgetPreviewContent.tsx","../src/components/WidgetPreview/index.tsx","../src/index.tsx"],"sourcesContent":["","","import en from './en/translation.json';\nimport pl from './pl/translation.json';\n\nconst resources = {\n  en: {\n    translation: en,\n  },\n  pl: {\n    translation: pl,\n  },\n};\n\nexport default resources;\n","import 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\n\nimport React, { useState } from 'react';\nimport ReactGridLayout, { useContainerWidth } from 'react-grid-layout';\n\nimport { Box } from '@mui/material';\nimport { WidgetCard } from 'andoncloud-dashboard-toolkit';\nimport { useLoginStatus } from 'andoncloud-sdk';\nimport getUuid from 'uuid-by-string';\n\nimport { DashboardProps } from '@/types';\n\nconst Dashboard: React.FC<DashboardProps> = ({\n  apiUrl,\n  lang,\n  filters,\n  widgetName,\n  widgetDisplayName,\n  getWidgetTitle,\n  widgetCustomTitle,\n  widgetWidth,\n  widgetHeight,\n  widgetThumbnail,\n  widgetRequiredFeatures,\n  widgetExtraPermissions,\n  widgetVersion,\n  Widget,\n  sidePanelOpened,\n  updateSidePanelProps,\n  editMode,\n}) => {\n  const { status } = useLoginStatus();\n  const { width, containerRef, mounted } = useContainerWidth();\n  const [settingsModalOpened, setSettingsModalOpened] = useState<boolean>(false);\n  const widgetId = getUuid(widgetName);\n\n  return (\n    <Box ref={containerRef}>\n      {mounted && (\n        <ReactGridLayout\n          className=\"layout\"\n          width={width}\n          layout={[{ i: widgetId, x: 0, y: 0, w: widgetWidth || 3, h: widgetHeight || 4 }]}\n          dragConfig={{ handle: '.draggable-handle' }}\n        >\n          {status === 'connected' && (\n            <WidgetCard\n              key={widgetId}\n              id={widgetId}\n              Widget={Widget}\n              title={widgetDisplayName(lang)}\n              getTitle={getWidgetTitle}\n              customTitle={widgetCustomTitle}\n              thumbnail={widgetThumbnail}\n              url={apiUrl}\n              lang={lang}\n              filters={filters}\n              requiredFeatures={widgetRequiredFeatures}\n              extraPermissions={widgetExtraPermissions}\n              openSettingsModal={settingsModalOpened}\n              onSettingsModalOpened={() => setSettingsModalOpened(true)}\n              onSettingsModalClosed={() => setSettingsModalOpened(false)}\n              sidePanelOpened={sidePanelOpened || false}\n              updateSidePanelProps={updateSidePanelProps}\n              editMode={editMode}\n              version={widgetVersion}\n            />\n          )}\n        </ReactGridLayout>\n      )}\n    </Box>\n  );\n};\n\nexport default Dashboard;\n","import React from 'react';\nimport { Navigate, useRoutes } from 'react-router-dom';\n\nimport { useLoginStatus } from 'andoncloud-sdk';\n\nimport { DashboardProps } from '@/types';\n\nimport Dashboard from './Dashboard';\n\nconst routes = (\n  isLoggedIn: boolean,\n  {\n    apiUrl,\n    lang,\n    filters,\n    getWidgetTitle,\n    widgetCustomTitle,\n    widgetName,\n    widgetDisplayName,\n    widgetWidth,\n    widgetHeight,\n    widgetThumbnail,\n    widgetRequiredFeatures,\n    widgetExtraPermissions,\n    widgetVersion,\n    Widget,\n    sidePanelOpened,\n    updateSidePanelProps,\n    editMode,\n  }: DashboardProps,\n) => [\n  {\n    path: '/',\n    element: isLoggedIn ? (\n      <Dashboard\n        apiUrl={apiUrl}\n        lang={lang}\n        filters={filters}\n        getWidgetTitle={getWidgetTitle}\n        widgetCustomTitle={widgetCustomTitle}\n        widgetName={widgetName}\n        widgetDisplayName={widgetDisplayName}\n        widgetWidth={widgetWidth}\n        widgetHeight={widgetHeight}\n        widgetThumbnail={widgetThumbnail}\n        widgetRequiredFeatures={widgetRequiredFeatures}\n        widgetExtraPermissions={widgetExtraPermissions}\n        widgetVersion={widgetVersion}\n        Widget={Widget}\n        sidePanelOpened={sidePanelOpened}\n        updateSidePanelProps={updateSidePanelProps}\n        editMode={editMode}\n      />\n    ) : (\n      <Navigate to=\"/login\" />\n    ),\n  },\n];\n\nconst Routing: React.FC<DashboardProps> = (dashboardProps) => {\n  const { status } = useLoginStatus();\n\n  return useRoutes(routes(status === 'connected', dashboardProps));\n};\n\nexport default Routing;\n","import { Theme } from '@mui/material';\nimport { alpha } from '@mui/material/styles';\n\nexport const styles = {\n  filtersContainer: {\n    display: 'flex',\n    alignItems: 'flex-end',\n  },\n  filterDisclaimer: (theme: Theme) => ({\n    flexShrink: 0,\n    maxWidth: theme.spacing(22),\n    marginLeft: theme.spacing(2),\n    padding: theme.spacing(0.5, 1, 0.5, 2.5),\n    textIndent: theme.spacing(-1.5),\n    fontSize: '0.75rem',\n    lineHeight: 1.3,\n    color: theme.palette.warning.main,\n    borderRadius: theme.spacing(0.75),\n    backgroundColor: alpha(theme.palette.common.black, 0.2),\n  }),\n};\n","import { useEffect, useState } from 'react';\n\nimport { Box, Typography } from '@mui/material';\nimport { BaseWidgetData, BaseWidgetSettings, DashboardFilters, FilterValues, Shift, useGqlClients } from 'andoncloud-dashboard-toolkit';\nimport {\n  Container,\n  HeaderProps,\n  refreshUserData,\n  setLocale,\n  sidePanelDefaultProps,\n  SidePanelProps,\n} from 'andoncloud-sdk';\nimport { useTranslation } from 'react-i18next';\n\nimport { WidgetPreviewProps } from '@/types';\n\nimport Routing from '../Routing';\n\nimport { styles } from './styles';\n\nconst WidgetPreviewContent = <WD extends BaseWidgetData = BaseWidgetData, WS extends BaseWidgetSettings = BaseWidgetSettings>({\n  apiUrl,\n  widgetName,\n  widgetDisplayName,\n  getWidgetTitle,\n  widgetCustomTitle,\n  widgetWidth,\n  widgetHeight,\n  widgetThumbnail,\n  widgetRequiredFeatures,\n  widgetExtraPermissions,\n  widgetVersion,\n  Widget,\n}: Omit<WidgetPreviewProps<WD, WS>, 'baseUrl' | 'locales'>) => {\n  // -- Translation --\n  const { t, i18n } = useTranslation();\n\n  // -- Local state --\n  const [filters, setFilters] = useState<FilterValues | undefined>();\n  const [shifts, setShifts] = useState<Shift[]>([]);\n  const [editMode, setEditMode] = useState(true);\n  const [sidePanelProps, setSidePanelProps] = useState<SidePanelProps>(sidePanelDefaultProps);\n\n  // -- Data layer --\n  const lang = (i18n.language || 'en') as 'en' | 'pl';\n  const { graphqlSdk } = useGqlClients({ url: apiUrl, wsUrl: '', lang });\n\n  useEffect(() => {\n    if (!graphqlSdk) return;\n    graphqlSdk\n      .shifts()\n      .then((data) => setShifts(data.shifts))\n      .catch(() => {});\n  }, [graphqlSdk]);\n\n  // handlers\n  const handleFeatureRequest = async (): Promise<boolean> => {\n    await refreshUserData();\n    return true;\n  };\n\n  const updateSidePanelProps = ({ onClose: onCloseCallback, ...updatedProps }: Partial<SidePanelProps>) => {\n    setSidePanelProps((current) => ({\n      ...(updatedProps.open ? sidePanelDefaultProps : current),\n      ...updatedProps,\n      onClose: () => {\n        setSidePanelProps((current) => ({ ...current, open: false }));\n        onCloseCallback?.();\n      },\n    }));\n  };\n\n  const navItems = [\n    {\n      label: editMode\n        ? t('widgetPreview.saveChanges')\n        : t('widgetPreview.editMode'),\n      action: () => setEditMode((current) => !current),\n    },\n  ];\n\n  const menuItems = [\n    {\n      label: t('widgetPreview.changeLanguage'),\n      action: () => setLocale(lang === 'pl' ? 'en' : 'pl'),\n    },\n  ];\n\n  const headerProps: HeaderProps = {\n    position: 'fixed',\n    leadingText: widgetDisplayName(lang),\n    content: (\n      <Box sx={styles.filtersContainer}>\n        <DashboardFilters\n          initialValues={filters}\n          onChange={setFilters}\n          shifts={shifts}\n          onFeatureRequest={handleFeatureRequest}\n        />\n        <Typography variant=\"caption\" sx={styles.filterDisclaimer}>\n          {t('widgetPreview.filterDisclaimer')}\n        </Typography>\n      </Box>\n    ),\n    navProps: {\n      items: navItems,\n    },\n    menuProps: {\n      items: menuItems,\n      buttonColor: 'white',\n    },\n  };\n\n  return (\n    <Container\n      headerProps={headerProps}\n      sidebarMenuProps={{\n        enabled: true,\n        items: [],\n      }}\n      sidePanelProps={sidePanelProps}\n      styles={{\n        overflowY: 'auto',\n      }}\n    >\n      <Routing\n        apiUrl={apiUrl}\n        lang={lang}\n        filters={filters}\n        getWidgetTitle={getWidgetTitle}\n        widgetCustomTitle={widgetCustomTitle}\n        widgetName={widgetName}\n        widgetDisplayName={widgetDisplayName}\n        widgetWidth={widgetWidth}\n        widgetHeight={widgetHeight}\n        widgetThumbnail={widgetThumbnail}\n        widgetRequiredFeatures={widgetRequiredFeatures}\n        widgetExtraPermissions={widgetExtraPermissions}\n        widgetVersion={widgetVersion}\n        Widget={Widget}\n        sidePanelOpened={sidePanelProps.open || false}\n        updateSidePanelProps={updateSidePanelProps}\n        editMode={editMode}\n      />\n    </Container>\n  );\n};\n\nexport { WidgetPreviewContent };\n","import { BaseWidgetData, BaseWidgetSettings } from 'andoncloud-dashboard-toolkit';\nimport {\n  App as AndonCloudApp,\n  AuthProps,\n  I18nProps,\n} from 'andoncloud-sdk';\n\nimport { WidgetPreviewProps } from '@/types';\n\nimport { WidgetPreviewContent } from './WidgetPreviewContent';\n\nconst WidgetPreview = <WD extends BaseWidgetData = BaseWidgetData, WS extends BaseWidgetSettings = BaseWidgetSettings>({\n  baseUrl,\n  locales,\n  ...contentProps\n}: WidgetPreviewProps<WD, WS>) => {\n  const authProps: AuthProps = {\n    redirectPath: '/',\n    clientId: 'sample-app-client-id',\n    grantType: 'password',\n  };\n\n  const i18nProps: I18nProps = {\n    locales,\n  };\n\n  return (\n    <AndonCloudApp baseUrl={baseUrl} authProps={authProps} i18nProps={i18nProps}>\n      <WidgetPreviewContent {...contentProps} />\n    </AndonCloudApp>\n  );\n};\n\nexport default WidgetPreview;\n","import { registerTranslations } from 'andoncloud-sdk';\n\nimport locales from './locales';\n\nregisterTranslations(locales);\n\nexport { default as WidgetPreview } from './components/WidgetPreview';\n\nexport type { WidgetPreviewProps } from './types';\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "andoncloud-widget-preview",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "AndonCloud widget preview",
   "license": "MIT",
   "type": "module",