@qpqjs/web-admin 0.0.0-stage → 0.2.0

package/lib/commonjs/components/AutocompleteInput.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const AutocompleteInput = ({ label, value, options, onChange }) => {
+    const handleChange = (event, newValue) => {
+        onChange(newValue ? newValue.value : '');
+    };
+    const selectedValue = options.find((option) => option.value === value) || null;
+    return ((0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { getOptionLabel: (option) => option.label, onChange: handleChange, options: options, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputLabelProps: {
+                    shrink: true,
+                }, label: label }))), value: selectedValue }) }));
+};
+exports.AutocompleteInput = AutocompleteInput;
+//# sourceMappingURL=AutocompleteInput.js.map

package/lib/commonjs/components/AutocompleteInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.js","sourceRoot":"","sources":["../../../src/components/AutocompleteInput.tsx"],"names":[],"mappings":";;;;AACA,4CAAqE;AAc9D,MAAM,iBAAiB,GAAqC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAA0B,EAAE,EAAE;IACjI,MAAM,YAAY,GAAG,CAAC,KAA2B,EAAE,QAAmC,EAAE,EAAE;QACxF,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC;IAE/E,OAAO,CACL,uBAAC,sBAAW,IAAC,SAAS,kBACpB,uBAAC,uBAAY,IACX,cAAc,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EACxC,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,uBAAC,oBAAS,oBACJ,MAAM,IACV,eAAe,EAAE;oBACf,MAAM,EAAE,IAAI;iBACb,EACD,KAAK,EAAE,KAAK,IACZ,CACH,EACD,KAAK,EAAE,aAAa,GACpB,GACU,CACf,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,iBAAiB,qBA0B5B","sourcesContent":["import React from 'react';\nimport { Autocomplete, FormControl, TextField } from '@mui/material';\n\nexport interface AutocompleteOption {\n  label: string;\n  value: string;\n}\n\ninterface AutocompleteInputProps {\n  label: string;\n  value?: string;\n  options: AutocompleteOption[];\n  onChange: (value: string) => void;\n}\n\nexport const AutocompleteInput: React.FC<AutocompleteInputProps> = ({ label, value, options, onChange }: AutocompleteInputProps) => {\n  const handleChange = (event: React.SyntheticEvent, newValue: AutocompleteOption | null) => {\n    onChange(newValue ? newValue.value : '');\n  };\n\n  const selectedValue = options.find((option) => option.value === value) || null;\n\n  return (\n    <FormControl fullWidth>\n      <Autocomplete\n        getOptionLabel={(option) => option.label}\n        onChange={handleChange}\n        options={options}\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            InputLabelProps={{\n              shrink: true,\n            }}\n            label={label}\n          />\n        )}\n        value={selectedValue}\n      />\n    </FormControl>\n  );\n};\n"]}

package/lib/commonjs/components/DataGrid.d.ts

@@ -0,0 +1,16 @@
+export type DataGridColumDefinitions<T extends object> = {
+    headerName: string;
+    widthScale?: number;
+    sortable?: boolean;
+    renderCell?: (i: T, params?: any) => React.ReactNode;
+} & ({
+    field: keyof T;
+} | {
+    valueGetter: (i: T, params?: any) => any;
+});
+export interface DataGridProps<T extends object> {
+    items: T[];
+    columns: DataGridColumDefinitions<T>[];
+    onRowClick?: (row: T) => void;
+}
+export declare const DataGrid: <T extends object>({ items, columns, onRowClick }: DataGridProps<T>) => import("react").JSX.Element;

package/lib/commonjs/components/DataGrid.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const x_data_grid_1 = require("@mui/x-data-grid");
+const DataGrid = ({ items, columns, onRowClick }) => {
+    const handleRowClick = ({ row }) => {
+        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+    };
+    const muiColumns = columns.map((col, index) => ({
+        headerName: col.headerName,
+        flex: col.widthScale,
+        sortable: col.sortable !== undefined ? col.sortable : true,
+        field: 'field' in col ? col.field : `_dynamicField${index}`,
+        valueGetter: 'valueGetter' in col ? (params) => col.valueGetter(params.row, params) : undefined,
+        renderCell: (params) => { var _a; return (_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, params.row, params); },
+    }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { height: '100%', width: '100%' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { columns: muiColumns, onRowClick: handleRowClick, rows: items }) }));
+};
+exports.DataGrid = DataGrid;
+//# sourceMappingURL=DataGrid.js.map

package/lib/commonjs/components/DataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.js","sourceRoot":"","sources":["../../../src/components/DataGrid.tsx"],"names":[],"mappings":";;;;AAAA,4CAAoC;AACpC,kDAAoH;AAe7G,MAAM,QAAQ,GAAG,CAAmB,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAoB,EAAE,EAAE;IAC7F,MAAM,cAAc,GAAG,CAAC,EAAE,GAAG,EAAc,EAAE,EAAE;QAC7C,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,GAAG,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAiB,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5D,UAAU,EAAE,GAAG,CAAC,UAAU;QAC1B,IAAI,EAAE,GAAG,CAAC,UAAU;QACpB,QAAQ,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QAC1D,KAAK,EAAE,OAAO,IAAI,GAAG,CAAC,CAAC,CAAE,GAAG,CAAC,KAAgB,CAAC,CAAC,CAAC,gBAAgB,KAAK,EAAE;QACvE,WAAW,EAAE,aAAa,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAA6B,EAAE,EAAE,CAAC,GAAG,CAAC,WAAY,CAAC,MAAM,CAAC,GAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS;QAC5H,UAAU,EAAE,CAAC,MAAoC,EAAE,EAAE,WAAC,OAAA,MAAA,GAAG,CAAC,UAAU,oDAAG,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA,EAAA;KAC3F,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,uBAAC,cAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YACxC,uBAAC,sBAAW,IAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,KAAK,GAAI,GACzE,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,QAAQ,YAmBnB","sourcesContent":["import { Box } from '@mui/material';\nimport { DataGrid as MuiDataGrid, GridColDef, GridRenderCellParams, GridValueGetterParams } from '@mui/x-data-grid';\n\nexport type DataGridColumDefinitions<T extends object> = {\n  headerName: string;\n  widthScale?: number;\n  sortable?: boolean;\n  renderCell?: (i: T, params?: any) => React.ReactNode;\n} & ({ field: keyof T } | { valueGetter: (i: T, params?: any) => any });\n\nexport interface DataGridProps<T extends object> {\n  items: T[];\n  columns: DataGridColumDefinitions<T>[];\n  onRowClick?: (row: T) => void;\n}\n\nexport const DataGrid = <T extends object>({ items, columns, onRowClick }: DataGridProps<T>) => {\n  const handleRowClick = ({ row }: { row: T }) => {\n    onRowClick?.(row);\n  };\n\n  const muiColumns: GridColDef[] = columns.map((col, index) => ({\n    headerName: col.headerName,\n    flex: col.widthScale,\n    sortable: col.sortable !== undefined ? col.sortable : true,\n    field: 'field' in col ? (col.field as string) : `_dynamicField${index}`,\n    valueGetter: 'valueGetter' in col ? (params: GridValueGetterParams) => col.valueGetter!(params.row as T, params) : undefined,\n    renderCell: (params: GridRenderCellParams<T, any>) => col.renderCell?.(params.row, params),\n  }));\n\n  return (\n    <Box sx={{ height: '100%', width: '100%' }}>\n      <MuiDataGrid columns={muiColumns} onRowClick={handleRowClick} rows={items} />\n    </Box>\n  );\n};\n"]}

package/lib/commonjs/components/DataGridPagination/DataGridPagination.d.ts

@@ -0,0 +1 @@
+export declare function DataGridPagination(): import("react").JSX.Element;

package/lib/commonjs/components/DataGridPagination/DataGridPagination.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridPagination = DataGridPagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Pagination_1 = __importDefault(require("@mui/material/Pagination"));
+const x_data_grid_1 = require("@mui/x-data-grid");
+function DataGridPagination() {
+    const apiRef = (0, x_data_grid_1.useGridApiContext)();
+    const page = (0, x_data_grid_1.useGridSelector)(apiRef, x_data_grid_1.gridPageSelector);
+    const pageCount = (0, x_data_grid_1.useGridSelector)(apiRef, x_data_grid_1.gridPageCountSelector);
+    return (0, jsx_runtime_1.jsx)(Pagination_1.default, { color: "primary", count: pageCount, onChange: (event, value) => apiRef.current.setPage(value - 1), page: page + 1 });
+}
+//# sourceMappingURL=DataGridPagination.js.map

package/lib/commonjs/components/DataGridPagination/DataGridPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridPagination.js","sourceRoot":"","sources":["../../../../src/components/DataGridPagination/DataGridPagination.tsx"],"names":[],"mappings":";;;;;AAGA,gDAMC;;AATD,0EAAkD;AAClD,kDAA+G;AAE/G,SAAgB,kBAAkB;IAChC,MAAM,MAAM,GAAG,IAAA,+BAAiB,GAAE,CAAC;IACnC,MAAM,IAAI,GAAG,IAAA,6BAAe,EAAC,MAAM,EAAE,8BAAgB,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,IAAA,6BAAe,EAAC,MAAM,EAAE,mCAAqB,CAAC,CAAC;IAEjE,OAAO,uBAAC,oBAAU,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,GAAI,CAAC;AACzI,CAAC","sourcesContent":["import Pagination from '@mui/material/Pagination';\nimport { gridPageCountSelector, gridPageSelector, useGridApiContext, useGridSelector } from '@mui/x-data-grid';\n\nexport function DataGridPagination() {\n  const apiRef = useGridApiContext();\n  const page = useGridSelector(apiRef, gridPageSelector);\n  const pageCount = useGridSelector(apiRef, gridPageCountSelector);\n\n  return <Pagination color=\"primary\" count={pageCount} onChange={(event, value) => apiRef.current.setPage(value - 1)} page={page + 1} />;\n}\n"]}

package/lib/commonjs/components/DataGridPagination/index.d.ts

@@ -0,0 +1 @@
+export * from './DataGridPagination';

package/lib/commonjs/components/DataGridPagination/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DataGridPagination"), exports);
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/DataGridPagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DataGridPagination/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC","sourcesContent":["export * from './DataGridPagination';\n"]}

package/lib/commonjs/components/DateCell/DateCell.d.ts

@@ -0,0 +1,7 @@
+type DateCellProps = {
+    isoDateTime: string;
+} | {
+    unixTimestampMs: number;
+};
+export declare const DateCell: React.FC<DateCellProps>;
+export {};

package/lib/commonjs/components/DateCell/DateCell.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateCell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const LastSeen_1 = __importDefault(require("../LastSeen/LastSeen"));
+const DateCell = (props) => {
+    let date = 'isoDateTime' in props ? new Date(props.isoDateTime) : new Date(props.unixTimestampMs);
+    const formattedTime = date.toLocaleTimeString('en-AU', {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+    const formattedDate = date.toLocaleDateString('en-AU', {
+        day: '2-digit',
+        month: '2-digit',
+        year: '2-digit',
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, { component: "span", variant: "body2", children: [formattedDate, " ", formattedTime] }), (0, jsx_runtime_1.jsx)(LastSeen_1.default, { isoTime: date.toISOString(), timeStyle: "twitter" })] }));
+};
+exports.DateCell = DateCell;
+//# sourceMappingURL=DateCell.js.map

package/lib/commonjs/components/DateCell/DateCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateCell.js","sourceRoot":"","sources":["../../../../src/components/DateCell/DateCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,0EAAkD;AAElD,oEAA4C;AAUrC,MAAM,QAAQ,GAA4B,CAAC,KAAoB,EAAE,EAAE;IACxE,IAAI,IAAI,GAAG,aAAa,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAElG,MAAM,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;QACrD,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;QACrD,GAAG,EAAE,SAAS;QACd,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IAEH,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,aACtD,wBAAC,oBAAU,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,OAAO,aACzC,aAAa,OAAG,aAAa,IACnB,EACb,uBAAC,kBAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAC,SAAS,GAAG,IACzD,CACP,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,QAAQ,YAqBnB","sourcesContent":["import Typography from '@mui/material/Typography';\n\nimport LastSeen from '../LastSeen/LastSeen';\n\ntype DateCellProps =\n  | {\n      isoDateTime: string;\n    }\n  | {\n      unixTimestampMs: number;\n    };\n\nexport const DateCell: React.FC<DateCellProps> = (props: DateCellProps) => {\n  let date = 'isoDateTime' in props ? new Date(props.isoDateTime) : new Date(props.unixTimestampMs);\n\n  const formattedTime = date.toLocaleTimeString('en-AU', {\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n  const formattedDate = date.toLocaleDateString('en-AU', {\n    day: '2-digit',\n    month: '2-digit',\n    year: '2-digit',\n  });\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column' }}>\n      <Typography component=\"span\" variant=\"body2\">\n        {formattedDate} {formattedTime}\n      </Typography>\n      <LastSeen isoTime={date.toISOString()} timeStyle=\"twitter\" />\n    </div>\n  );\n};\n"]}

package/lib/commonjs/components/DateCell/index.d.ts

@@ -0,0 +1 @@
+export * from './DateCell';

package/lib/commonjs/components/DateCell/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DateCell"), exports);
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/DateCell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DateCell/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B","sourcesContent":["export * from './DateCell';\n"]}

package/lib/commonjs/components/DateRangePicker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DateRangePickerProps {
+    startIsoDateTime: string;
+    endIsoDateTime: string;
+    setStartIsoDateTime: (isoString: string) => void;
+    setEndIsoDateTime: (isoString: string) => void;
+}
+export declare const DateRangePicker: React.FC<DateRangePickerProps>;
+export {};

package/lib/commonjs/components/DateRangePicker.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const material_1 = require("@mui/material");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
+const DateRangePicker = ({ startIsoDateTime, endIsoDateTime, setStartIsoDateTime, setEndIsoDateTime }) => {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const handleStartDateChange = (value) => {
+        if (value) {
+            setStartIsoDateTime(value.toISOString());
+        }
+    };
+    const handleEndDateChange = (value) => {
+        if (value) {
+            setEndIsoDateTime(value.toISOString());
+        }
+    };
+    const handleQuickTimeSelect = (minutes) => {
+        const now = new Date();
+        const startDate = new Date(now.getTime() - minutes * 60000);
+        const endDate = new Date(now.getTime() + 7 * 24 * 60 * 60000);
+        setStartIsoDateTime(startDate.toISOString());
+        setEndIsoDateTime(endDate.toISOString());
+        setAnchorEl(null);
+    };
+    const handleQuickTimeClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleQuickTimeClose = () => {
+        setAnchorEl(null);
+    };
+    return ((0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.Box, { position: "relative", children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "Start DateTime", onChange: handleStartDateChange, value: new Date(startIsoDateTime) }) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "End DateTime", onChange: handleEndDateChange, value: new Date(endIsoDateTime) }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-controls": "quick-time-menu", "aria-haspopup": "true", "aria-label": "quick time select", onClick: handleQuickTimeClick, sx: {
+                                        position: 'absolute',
+                                        right: '-28px',
+                                        top: '50%',
+                                        transform: 'translateY(-50%)',
+                                    }, children: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })] }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Menu, { anchorEl: anchorEl, id: "quick-time-menu", keepMounted: true, onClose: handleQuickTimeClose, open: Boolean(anchorEl), children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
+};
+exports.DateRangePicker = DateRangePicker;
+//# sourceMappingURL=DateRangePicker.js.map

package/lib/commonjs/components/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../src/components/DateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport { Box, FormControl, Grid, IconButton, Menu, MenuItem } from '@mui/material';\nimport { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\n\ninterface DateRangePickerProps {\n  startIsoDateTime: string;\n  endIsoDateTime: string;\n  setStartIsoDateTime: (isoString: string) => void;\n  setEndIsoDateTime: (isoString: string) => void;\n}\n\nexport const DateRangePicker: React.FC<DateRangePickerProps> = ({ startIsoDateTime, endIsoDateTime, setStartIsoDateTime, setEndIsoDateTime }) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleStartDateChange = (value: Date | null) => {\n    if (value) {\n      setStartIsoDateTime(value.toISOString());\n    }\n  };\n\n  const handleEndDateChange = (value: Date | null) => {\n    if (value) {\n      setEndIsoDateTime(value.toISOString());\n    }\n  };\n\n  const handleQuickTimeSelect = (minutes: number) => {\n    const now = new Date();\n    const startDate = new Date(now.getTime() - minutes * 60000);\n    const endDate = new Date(now.getTime() + 7 * 24 * 60 * 60000);\n\n    setStartIsoDateTime(startDate.toISOString());\n    setEndIsoDateTime(endDate.toISOString());\n\n    setAnchorEl(null);\n  };\n\n  const handleQuickTimeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleQuickTimeClose = () => {\n    setAnchorEl(null);\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Grid container spacing={2}>\n        <Grid item xs={6}>\n          <Box position=\"relative\">\n            <FormControl fullWidth>\n              <DateTimePicker label=\"Start DateTime\" onChange={handleStartDateChange} value={new Date(startIsoDateTime)} />\n            </FormControl>\n          </Box>\n        </Grid>\n        <Grid item xs={6}>\n          <Box position=\"relative\">\n            <FormControl fullWidth>\n              <DateTimePicker label=\"End DateTime\" onChange={handleEndDateChange} value={new Date(endIsoDateTime)} />\n            </FormControl>\n            <IconButton\n              aria-controls=\"quick-time-menu\"\n              aria-haspopup=\"true\"\n              aria-label=\"quick time select\"\n              onClick={handleQuickTimeClick}\n              sx={{\n                position: 'absolute',\n                right: '-28px',\n                top: '50%',\n                transform: 'translateY(-50%)',\n              }}\n            >\n              <ExpandMoreIcon />\n            </IconButton>\n          </Box>\n        </Grid>\n      </Grid>\n      <Menu anchorEl={anchorEl} id=\"quick-time-menu\" keepMounted onClose={handleQuickTimeClose} open={Boolean(anchorEl)}>\n        <MenuItem onClick={() => handleQuickTimeSelect(5)}>Last 5 minutes</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(30)}>Last 30 minutes</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(1 * 60)}>Last hour</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(3 * 60)}>Last 3 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(8 * 60)}>Last 8 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(16 * 60)}>Last 16 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(24 * 60)}>Last 24 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(7 * 24 * 60)}>Last 7 days</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(30 * 24 * 60)}>Last month</MenuItem>\n      </Menu>\n    </LocalizationProvider>\n  );\n};\n"]}

package/lib/commonjs/components/GridContainer.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface GridContainerProps {
+    children: ReactNode;
+    spacing?: number;
+    xs?: 'auto' | number;
+}
+export declare const GridContainer: React.FC<GridContainerProps>;
+export {};

package/lib/commonjs/components/GridContainer.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const GridContainer = ({ children, spacing = 2, xs = 'auto' }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: spacing, xs: xs, children: children }));
+};
+exports.GridContainer = GridContainer;
+//# sourceMappingURL=GridContainer.js.map

package/lib/commonjs/components/GridContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.js","sourceRoot":"","sources":["../../../src/components/GridContainer.tsx"],"names":[],"mappings":";;;;AACA,4CAAqC;AAQ9B,MAAM,aAAa,GAAiC,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE,GAAG,MAAM,EAAsB,EAAE,EAAE;IACxH,OAAO,CACL,uBAAC,eAAI,IAAC,SAAS,QAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,YACrC,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,aAAa,iBAMxB","sourcesContent":["import { ReactNode } from 'react';\nimport { Grid } from '@mui/material';\n\ninterface GridContainerProps {\n  children: ReactNode;\n  spacing?: number;\n  xs?: 'auto' | number;\n}\n\nexport const GridContainer: React.FC<GridContainerProps> = ({ children, spacing = 2, xs = 'auto' }: GridContainerProps) => {\n  return (\n    <Grid container spacing={spacing} xs={xs}>\n      {children}\n    </Grid>\n  );\n};\n"]}

package/lib/commonjs/components/GridItem.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface GridItemProps {
+    children: ReactNode;
+    xs?: 'auto' | number;
+}
+export declare const GridItem: React.FC<GridItemProps>;
+export {};

package/lib/commonjs/components/GridItem.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const GridItem = ({ children, xs = 12 }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: xs, children: children }));
+};
+exports.GridItem = GridItem;
+//# sourceMappingURL=GridItem.js.map

package/lib/commonjs/components/GridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.js","sourceRoot":"","sources":["../../../src/components/GridItem.tsx"],"names":[],"mappings":";;;;AACA,4CAAqC;AAO9B,MAAM,QAAQ,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAiB,EAAE,EAAE;IACxF,OAAO,CACL,uBAAC,eAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,YACd,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,QAAQ,YAMnB","sourcesContent":["import { ReactNode } from 'react';\nimport { Grid } from '@mui/material';\n\ninterface GridItemProps {\n  children: ReactNode;\n  xs?: 'auto' | number;\n}\n\nexport const GridItem: React.FC<GridItemProps> = ({ children, xs = 12 }: GridItemProps) => {\n  return (\n    <Grid item xs={xs}>\n      {children}\n    </Grid>\n  );\n};\n"]}

package/lib/commonjs/components/LastSeen/LastSeen.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").MemoExoticComponent<(props: any) => import("react").JSX.Element>;
+export default _default;

package/lib/commonjs/components/LastSeen/LastSeen.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// TODO: Move this to global configs.
+const javascript_time_ago_1 = __importDefault(require("javascript-time-ago"));
+const en_json_1 = __importDefault(require("javascript-time-ago/locale/en.json"));
+const react_time_ago_1 = __importDefault(require("react-time-ago"));
+javascript_time_ago_1.default.addDefaultLocale(en_json_1.default);
+const LastSeen = (props) => {
+    const date = (0, react_1.useMemo)(() => new Date(props.isoTime), [props.isoTime]);
+    return (0, jsx_runtime_1.jsx)(react_time_ago_1.default, { date: date, locale: "en-US" });
+};
+exports.default = (0, react_1.memo)(LastSeen);
+//# sourceMappingURL=LastSeen.js.map

package/lib/commonjs/components/LastSeen/LastSeen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LastSeen.js","sourceRoot":"","sources":["../../../../src/components/LastSeen/LastSeen.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAAsC;AACtC,qCAAqC;AACrC,8EAA0C;AAC1C,iFAAoD;AACpD,oEAA0C;AAC1C,6BAAO,CAAC,gBAAgB,CAAC,iBAAE,CAAC,CAAC;AAE7B,MAAM,QAAQ,GAAG,CAAC,KAAU,EAAE,EAAE;IAC9B,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,OAAO,uBAAC,wBAAY,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,OAAO,GAAG,CAAC;AACrD,CAAC,CAAC;AAEF,kBAAe,IAAA,YAAI,EAAC,QAAQ,CAAC,CAAC","sourcesContent":["import { memo, useMemo } from 'react';\n// TODO: Move this to global configs.\nimport TimeAgo from 'javascript-time-ago';\nimport en from 'javascript-time-ago/locale/en.json';\nimport ReactTimeAgo from 'react-time-ago';\nTimeAgo.addDefaultLocale(en);\n\nconst LastSeen = (props: any) => {\n  const date = useMemo(() => new Date(props.isoTime), [props.isoTime]);\n  return <ReactTimeAgo date={date} locale=\"en-US\" />;\n};\n\nexport default memo(LastSeen);\n"]}

package/lib/commonjs/components/LastSeen/index.d.ts

@@ -0,0 +1 @@
+export * from './LastSeen';

package/lib/commonjs/components/LastSeen/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LastSeen"), exports);
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/LastSeen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/LastSeen/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B","sourcesContent":["export * from './LastSeen';\n"]}

package/lib/commonjs/components/LoadingBox/LoadingBox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface LoadingBoxProps<T> {
+    path: string;
+    renderItem: (item: T) => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+}
+export declare const LoadingBox: <T>({ path, renderItem, renderLoading }: LoadingBoxProps<T>) => React.JSX.Element;
+export {};

package/lib/commonjs/components/LoadingBox/LoadingBox.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const view_1 = require("../../view");
+const view_2 = require("../../view");
+const hooks_1 = require("./hooks");
+const LoadingBoxInternal = ({ path, renderItem, renderLoading }) => {
+    const isLoading = (0, view_1.useIsLoading)();
+    const data = (0, hooks_1.usePlatformDataFromPath)(path);
+    let reactNode = (0, jsx_runtime_1.jsx)("div", { children: "Error: Data could not be loaded" });
+    if (isLoading) {
+        reactNode = renderLoading ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderLoading() })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '200px',
+                width: '100%',
+                p: 2,
+            }, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 100 }) }));
+    }
+    else if (data) {
+        reactNode = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderItem(data) });
+    }
+    return (0, jsx_runtime_1.jsx)(view_2.LoadingProvider, { children: reactNode });
+};
+const LoadingBox = ({ path, renderItem, renderLoading }) => {
+    return ((0, jsx_runtime_1.jsx)(view_2.LoadingProvider, { children: (0, jsx_runtime_1.jsx)(LoadingBoxInternal, { path: path, renderItem: renderItem, renderLoading: renderLoading }) }));
+};
+exports.LoadingBox = LoadingBox;
+//# sourceMappingURL=LoadingBox.js.map

package/lib/commonjs/components/LoadingBox/LoadingBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBox.js","sourceRoot":"","sources":["../../../../src/components/LoadingBox/LoadingBox.tsx"],"names":[],"mappings":";;;;AACA,4CAAsD;AAEtD,qCAA0C;AAC1C,qCAA6C;AAC7C,mCAAkD;AAQlD,MAAM,kBAAkB,GAAG,CAAK,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAsB,EAAE,EAAE;IACzF,MAAM,SAAS,GAAG,IAAA,mBAAY,GAAE,CAAC;IACjC,MAAM,IAAI,GAAa,IAAA,+BAAuB,EAAI,IAAI,CAAC,CAAC;IAExD,IAAI,SAAS,GAAgB,8EAA0C,CAAC;IAExE,IAAI,SAAS,EAAE,CAAC;QACd,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,CAC1B,2DAAG,aAAa,EAAE,GAAI,CACvB,CAAC,CAAC,CAAC,CACF,uBAAC,cAAG,IACF,EAAE,EAAE;gBACF,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;gBACpB,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,MAAM;gBACb,CAAC,EAAE,CAAC;aACL,YAED,uBAAC,2BAAgB,IAAC,IAAI,EAAE,GAAG,GAAI,GAC3B,CACP,CAAC;IACJ,CAAC;SAAM,IAAI,IAAI,EAAE,CAAC;QAChB,SAAS,GAAG,2DAAG,UAAU,CAAC,IAAI,CAAC,GAAI,CAAC;IACtC,CAAC;IAED,OAAO,uBAAC,sBAAe,cAAE,SAAS,GAAmB,CAAC;AACxD,CAAC,CAAC;AAEK,MAAM,UAAU,GAAG,CAAK,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAsB,EAAE,EAAE;IACxF,OAAO,CACL,uBAAC,sBAAe,cACd,uBAAC,kBAAkB,IAAI,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,GAAI,GAC3E,CACnB,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,UAAU,cAMrB","sourcesContent":["import React from 'react';\nimport { Box, CircularProgress } from '@mui/material';\n\nimport { useIsLoading } from '../../view';\nimport { LoadingProvider } from '../../view';\nimport { usePlatformDataFromPath } from './hooks';\n\ninterface LoadingBoxProps<T> {\n  path: string;\n  renderItem: (item: T) => React.ReactNode;\n  renderLoading?: () => React.ReactNode;\n}\n\nconst LoadingBoxInternal = <T,>({ path, renderItem, renderLoading }: LoadingBoxProps<T>) => {\n  const isLoading = useIsLoading();\n  const data: T | null = usePlatformDataFromPath<T>(path);\n\n  let reactNode: JSX.Element = <div>Error: Data could not be loaded</div>;\n\n  if (isLoading) {\n    reactNode = renderLoading ? (\n      <>{renderLoading()}</>\n    ) : (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          height: '200px',\n          width: '100%',\n          p: 2,\n        }}\n      >\n        <CircularProgress size={100} />\n      </Box>\n    );\n  } else if (data) {\n    reactNode = <>{renderItem(data)}</>;\n  }\n\n  return <LoadingProvider>{reactNode}</LoadingProvider>;\n};\n\nexport const LoadingBox = <T,>({ path, renderItem, renderLoading }: LoadingBoxProps<T>) => {\n  return (\n    <LoadingProvider>\n      <LoadingBoxInternal<T> path={path} renderItem={renderItem} renderLoading={renderLoading} />\n    </LoadingProvider>\n  );\n};\n"]}

package/lib/commonjs/components/LoadingBox/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useExternalData';
+export * from './usePlatformDataFromPath';

package/lib/commonjs/components/LoadingBox/hooks/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useExternalData"), exports);
+__exportStar(require("./usePlatformDataFromPath"), exports);
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/LoadingBox/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/LoadingBox/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,4DAA0C","sourcesContent":["export * from './useExternalData';\nexport * from './usePlatformDataFromPath';\n"]}

package/lib/commonjs/components/LoadingBox/hooks/useExternalData.d.ts

@@ -0,0 +1 @@
+export declare const useExternalData: <T>(url?: string) => T | null;

package/lib/commonjs/components/LoadingBox/hooks/useExternalData.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExternalData = void 0;
+const react_1 = require("react");
+const view_1 = require("../../../view");
+const useExternalData = (url) => {
+    const [data, setData] = (0, react_1.useState)(null);
+    const loadData = (0, view_1.useExternalApiGet)(url);
+    const cache = (0, react_1.useRef)({});
+    (0, react_1.useEffect)(() => {
+        if (!url) {
+            setData(null);
+            return;
+        }
+        if (cache.current[url]) {
+            setData(cache.current[url]);
+            return;
+        }
+        let allowDataSet = true;
+        loadData().then((newData) => {
+            if (allowDataSet) {
+                setData(newData);
+            }
+            cache.current[url] = newData;
+        });
+        return () => {
+            allowDataSet = false;
+        };
+    }, [url, loadData]);
+    return cache.current[url || ''];
+};
+exports.useExternalData = useExternalData;
+//# sourceMappingURL=useExternalData.js.map

package/lib/commonjs/components/LoadingBox/hooks/useExternalData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExternalData.js","sourceRoot":"","sources":["../../../../../src/components/LoadingBox/hooks/useExternalData.ts"],"names":[],"mappings":";;;AAAA,iCAAoD;AAEpD,wCAAqE;AAE9D,MAAM,eAAe,GAAG,CAAI,GAAY,EAAY,EAAE;IAC3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAW,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,IAAA,wBAAiB,EAAI,GAAG,CAAC,CAAC;IAC3C,MAAM,KAAK,GAAG,IAAA,cAAM,EAAoB,EAAE,CAAC,CAAC;IAE5C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,OAAO;QACT,CAAC;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;YACvB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IAAI,YAAY,GAAG,IAAI,CAAC;QACxB,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;YAC1B,IAAI,YAAY,EAAE,CAAC;gBACjB,OAAO,CAAC,OAAO,CAAC,CAAC;YACnB,CAAC;YAED,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,YAAY,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpB,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC;AAClC,CAAC,CAAC;AA/BW,QAAA,eAAe,mBA+B1B","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useExternalApiGet, usePlatformApiGet } from '../../../view';\n\nexport const useExternalData = <T>(url?: string): T | null => {\n  const [data, setData] = useState<T | null>(null);\n  const loadData = useExternalApiGet<T>(url);\n  const cache = useRef<Record<string, T>>({});\n\n  useEffect(() => {\n    if (!url) {\n      setData(null);\n      return;\n    }\n\n    if (cache.current[url]) {\n      setData(cache.current[url]);\n      return;\n    }\n\n    let allowDataSet = true;\n    loadData().then((newData) => {\n      if (allowDataSet) {\n        setData(newData);\n      }\n\n      cache.current[url] = newData;\n    });\n\n    return () => {\n      allowDataSet = false;\n    };\n  }, [url, loadData]);\n\n  return cache.current[url || ''];\n};\n"]}

package/lib/commonjs/components/LoadingBox/hooks/usePlatformDataFromPath.d.ts

@@ -0,0 +1 @@
+export declare const usePlatformDataFromPath: <T>(path?: string) => T | null;

package/lib/commonjs/components/LoadingBox/hooks/usePlatformDataFromPath.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlatformDataFromPath = void 0;
+const react_1 = require("react");
+const view_1 = require("../../../view");
+const usePlatformDataFromPath = (path) => {
+    const [data, setData] = (0, react_1.useState)(null);
+    const loadData = (0, view_1.usePlatformApiGet)(path);
+    const cache = (0, react_1.useRef)({});
+    (0, react_1.useEffect)(() => {
+        if (!path) {
+            return;
+        }
+        if (cache.current[path]) {
+            setData(cache.current[path]);
+            return;
+        }
+        let allowDataSet = true;
+        loadData().then((newData) => {
+            if (allowDataSet) {
+                setData(newData);
+            }
+            cache.current[path] = newData;
+        });
+        return () => {
+            allowDataSet = false;
+        };
+    }, [path, loadData]);
+    return data;
+};
+exports.usePlatformDataFromPath = usePlatformDataFromPath;
+//# sourceMappingURL=usePlatformDataFromPath.js.map

package/lib/commonjs/components/LoadingBox/hooks/usePlatformDataFromPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePlatformDataFromPath.js","sourceRoot":"","sources":["../../../../../src/components/LoadingBox/hooks/usePlatformDataFromPath.ts"],"names":[],"mappings":";;;AAAA,iCAAoD;AAEpD,wCAAkD;AAE3C,MAAM,uBAAuB,GAAG,CAAI,IAAa,EAAY,EAAE;IACpE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAW,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,IAAA,wBAAiB,EAAI,IAAI,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,IAAA,cAAM,EAAoB,EAAE,CAAC,CAAC;IAE5C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,IAAI,YAAY,GAAG,IAAI,CAAC;QACxB,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;YAC1B,IAAI,YAAY,EAAE,CAAC;gBACjB,OAAO,CAAC,OAAO,CAAC,CAAC;YACnB,CAAC;YAED,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC;QAChC,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,YAAY,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AA9BW,QAAA,uBAAuB,2BA8BlC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { usePlatformApiGet } from '../../../view';\n\nexport const usePlatformDataFromPath = <T>(path?: string): T | null => {\n  const [data, setData] = useState<T | null>(null);\n  const loadData = usePlatformApiGet<T>(path);\n  const cache = useRef<Record<string, T>>({});\n\n  useEffect(() => {\n    if (!path) {\n      return;\n    }\n\n    if (cache.current[path]) {\n      setData(cache.current[path]);\n      return;\n    }\n\n    let allowDataSet = true;\n    loadData().then((newData) => {\n      if (allowDataSet) {\n        setData(newData);\n      }\n\n      cache.current[path] = newData;\n    });\n\n    return () => {\n      allowDataSet = false;\n    };\n  }, [path, loadData]);\n\n  return data;\n};\n"]}

package/lib/commonjs/components/LoadingBox/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingBox';

package/lib/commonjs/components/LoadingBox/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LoadingBox"), exports);
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/LoadingBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/LoadingBox/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B","sourcesContent":["export * from './LoadingBox';\n"]}

package/lib/commonjs/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+interface LoadingSpinnerProps {
+    isLoading: boolean;
+    size?: number;
+    children?: ReactNode;
+}
+export declare const LoadingSpinner: React.FC<LoadingSpinnerProps>;
+export {};

package/lib/commonjs/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingSpinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const LoadingSpinner = ({ isLoading, size = 200, children }) => {
+    const sx = (0, react_1.useMemo)(() => ({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: `${size}px`,
+        width: '100%',
+        p: 2,
+    }), [size]);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: sx, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: size / 2 }) }));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.LoadingSpinner = LoadingSpinner;
+//# sourceMappingURL=LoadingSpinner.js.map