@darajs/core 1.0.0-a.1

package/dist/components/fallback/dots.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@darajs/styled-components';
+const Wrapper = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+`;
+const FlashingDots = styled.div `
+    position: relative;
+
+    width: 10px;
+    height: 10px;
+
+    color: ${(props) => props.theme.colors.grey4};
+
+    background-color: ${(props) => props.theme.colors.grey4};
+    border-radius: 5px;
+
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        display: inline-block;
+    }
+
+    &::before {
+        left: -15px;
+
+        width: 10px;
+        height: 10px;
+
+        color: ${(props) => props.theme.colors.grey4};
+
+        background-color: ${(props) => props.theme.colors.grey4};
+        border-radius: 5px;
+
+        animation: dot-flashing 1s infinite alternate;
+        animation-delay: 0s;
+    }
+
+    &::after {
+        left: 15px;
+
+        width: 10px;
+        height: 10px;
+
+        color: ${(props) => props.theme.colors.grey4};
+
+        background-color: ${(props) => props.theme.colors.grey4};
+        border-radius: 5px;
+
+        animation: dot-flashing 1s infinite alternate;
+        animation-delay: 1s;
+    }
+
+    @keyframes dot-flashing {
+        0% {
+            background-color: ${(props) => props.theme.colors.grey4};
+        }
+        50%,
+        100% {
+            background-color: ${(props) => props.theme.colors.grey3};
+        }
+    }
+`;
+function Dots(props) {
+    return (_jsx(Wrapper, { className: props.className, style: props.style, children: _jsx(FlashingDots, { "data-testid": "LOADING" }) }));
+}
+export default Dots;
+//# sourceMappingURL=dots.js.map

package/dist/components/fallback/dots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots.js","sourceRoot":"","sources":["../../../js/components/fallback/dots.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;aAMlB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;wBAExB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;iBAoB1C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;4BAExB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;iBAa9C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;4BAExB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;gCAS/B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;gCAInC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;CAGlE,CAAC;AAOF,SAAS,IAAI,CAAC,KAAgB;IAC1B,OAAO,CACH,KAAC,OAAO,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,YACnD,KAAC,YAAY,mBAAa,SAAS,GAAG,GAChC,CACb,CAAC;AACN,CAAC;AAED,eAAe,IAAI,CAAC"}

package/dist/components/fallback/row.d.ts

@@ -0,0 +1,5 @@
+import { StyledComponentProps } from '../../types';
+type RowFallbackProps = StyledComponentProps;
+declare function RowFallback(props: RowFallbackProps): JSX.Element;
+export default RowFallback;
+//# sourceMappingURL=row.d.ts.map

package/dist/components/fallback/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../js/components/fallback/row.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAS/C,KAAK,gBAAgB,GAAG,oBAAoB,CAAC;AAE7C,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAIzD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/fallback/row.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@darajs/styled-components';
+import { injectCss, useComponentStyles } from '../../shared/utils';
+import Dots from './dots';
+const RowDots = styled(Dots) `
+    height: 2.5rem;
+`;
+const StyledDots = injectCss(RowDots);
+function RowFallback(props) {
+    const [style, css] = useComponentStyles(props);
+    return _jsx(StyledDots, { "$rawCss": css, style: style });
+}
+export default RowFallback;
+//# sourceMappingURL=row.js.map

package/dist/components/fallback/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../js/components/fallback/row.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE3B,CAAC;AACF,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAItC,SAAS,WAAW,CAAC,KAAuB;IACxC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE/C,OAAO,KAAC,UAAU,eAAU,GAAG,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AACtD,CAAC;AAED,eAAe,WAAW,CAAC"}

package/dist/components/for/for.d.ts

@@ -0,0 +1,35 @@
+import { AnyVariable, ComponentInstance, StyledComponentProps, TemplatedComponentInstance } from '../../types';
+interface ForProps extends StyledComponentProps {
+    /**
+     * The data to render the component for.
+     */
+    data: AnyVariable<Array<Record<string, any>>>;
+    /**
+     * The direction of the list.
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * The key accessor to use for a unique key for each item in the list.
+     */
+    key_accessor: string;
+    /**
+     * The size accessor to use for the size of each item in the list.
+     */
+    size_accessor: string;
+    /**
+     * The template to render for each item in the list.
+     */
+    template: ComponentInstance & TemplatedComponentInstance;
+    /**
+     * Whether to virtualise the list.
+     */
+    virtualize: boolean;
+}
+/**
+ * The For component is used to render a list of components based on variable data.
+ * It utilises a templated component to render each item in the list, precomputing the paths to the markers in the template
+ * and passing them to the ForChild component for replacement.
+ */
+declare function For(props: ForProps): JSX.Element;
+export default For;
+//# sourceMappingURL=for.d.ts.map

package/dist/components/for/for.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"for.d.ts","sourceRoot":"","sources":["../../../js/components/for/for.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE3G,UAAU,QAAS,SAAQ,oBAAoB;IAC3C;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAC9C;;OAEG;IACH,SAAS,EAAE,YAAY,GAAG,UAAU,CAAC;IACrC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;IACzD;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;CACvB;AAmCD;;;;GAIG;AACH,iBAAS,GAAG,CAAC,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CA+DzC;AAED,eAAe,GAAG,CAAC"}

package/dist/components/for/for.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VariableSizeList } from 'react-window';
+import { DynamicComponent, getMarkerPaths, replaceMarkers, useAnyVariable } from '../../shared';
+/**
+ * The ForChild component is used to render a single component based on variable data.
+ * It utilises a templated component to render the component, replacing markers with the data for that item.
+ */
+function ForChild(props) {
+    const component = useMemo(() => {
+        const withoutMarkers = replaceMarkers(props.template, props.data, props.markerPaths);
+        withoutMarkers.props.style = props.style;
+        return withoutMarkers;
+    }, [props.template, props.data]);
+    return _jsx(DynamicComponent, { component: component });
+}
+/**
+ * The For component is used to render a list of components based on variable data.
+ * It utilises a templated component to render each item in the list, precomputing the paths to the markers in the template
+ * and passing them to the ForChild component for replacement.
+ */
+function For(props) {
+    const data = useAnyVariable(props.data);
+    // Precomputed paths to markers in the template, so we don't have to recompute them on every render for each item
+    const markerPaths = useMemo(() => getMarkerPaths(props.template), [props.template]);
+    const ListChild = useCallback((listProps) => {
+        return (_jsx(ForChild, { data: listProps.data[listProps.index], markerPaths: markerPaths, style: listProps.style, template: props.template }, listProps.data[listProps.index][props.key_accessor]));
+    }, [markerPaths, props.key_accessor]);
+    const getItemSize = useCallback((index) => {
+        return data[index][props.size_accessor];
+    }, [data, props.size_accessor]);
+    const getItemKey = useCallback((index, listData) => {
+        return listData[index][props.key_accessor];
+    }, [props.key_accessor]);
+    // If we're not virtualising, just render the list normally
+    if (!props.virtualize) {
+        return (_jsx(_Fragment, { children: data.map((item, index) => (_jsx(ListChild, { data: data, index: index, style: {} }, item[props.key_accessor]))) }));
+    }
+    return (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(VariableSizeList, { height: height, itemCount: data.length, itemData: data, itemKey: getItemKey, itemSize: getItemSize, layout: props.direction, width: width, children: ListChild })) }));
+}
+export default For;
+//# sourceMappingURL=for.js.map

package/dist/components/for/for.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"for.js","sourceRoot":"","sources":["../../../js/components/for/for.tsx"],"names":[],"mappings":"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"}

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Menu } from './menu/menu';
+export { default as ProgressTracker } from './progress-tracker/progress-tracker';
+export { default as RouterContent } from './router-content/router-content';
+export { default as SideBarFrame } from './side-bar-frame/side-bar-frame';
+export { default as TopBarFrame } from './top-bar-frame/top-bar-frame';
+export { default as DefaultFallback } from './fallback/default';
+export { default as RowFallback } from './fallback/row';
+export { default as For } from './for/for';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,9 @@
+export { default as Menu } from './menu/menu';
+export { default as ProgressTracker } from './progress-tracker/progress-tracker';
+export { default as RouterContent } from './router-content/router-content';
+export { default as SideBarFrame } from './side-bar-frame/side-bar-frame';
+export { default as TopBarFrame } from './top-bar-frame/top-bar-frame';
+export { default as DefaultFallback } from './fallback/default';
+export { default as RowFallback } from './fallback/row';
+export { default as For } from './for/for';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../js/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,14 @@
+import { RouteLink } from '../../types';
+interface MenuProps {
+    /** A list of routes to display in the menu */
+    routes: Array<RouteLink>;
+}
+/**
+ * The menu component is a context aware component that will render a list of menu options into it's surrounding
+ * container based on a list of routes passed in.
+ *
+ * @param props - the component props
+ */
+declare function Menu(props: MenuProps): JSX.Element;
+export default Menu;
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../js/components/menu/menu.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA2CpC,UAAU,SAAS;IACf,8CAA8C;IAC9C,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5B;AAED;;;;;GAKG;AACH,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAgB3C;AAED,eAAe,IAAI,CAAC"}

package/dist/components/menu/menu.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { transparentize } from 'polished';
+import { useContext } from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from '@darajs/styled-components';
+import { DirectionCtx } from '../../shared/context';
+import { getIcon } from '../../shared/utils';
+const MenuItem = styled(NavLink) `
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: ${(props) => (props.direction === 'row' ? 'center' : 'flex-start')};
+
+    width: ${(props) => (props.direction === 'row' ? '10rem' : '100%')};
+    height: 3rem;
+    padding: 0 1rem;
+
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: ${(props) => props.theme.colors.secondary};
+    text-decoration: none;
+
+    border-radius: 1rem;
+
+    :hover {
+        background: ${(props) => transparentize(0.9, props.theme.colors.secondary)};
+    }
+
+    :active {
+        background: ${(props) => transparentize(0.8, props.theme.colors.secondary)};
+    }
+
+    svg {
+        margin-right: 0.6rem;
+        color: ${(props) => props.theme.colors.blue1};
+    }
+
+    &.selected {
+        color: ${(props) => props.theme.colors.blue1};
+        background-color: ${(props) => props.theme.colors.secondary};
+    }
+`;
+/**
+ * The menu component is a context aware component that will render a list of menu options into it's surrounding
+ * container based on a list of routes passed in.
+ *
+ * @param props - the component props
+ */
+function Menu(props) {
+    const directionCtx = useContext(DirectionCtx);
+    return (_jsx(_Fragment, { children: props.routes.map(({ icon, name, route }) => {
+            const Icon = getIcon(icon);
+            return (_jsxs(MenuItem, { activeClassName: "selected", direction: directionCtx.direction, to: route, children: [_jsx(Icon, { style: { marginRight: '0.5rem' } }), name] }, name));
+        }) }));
+}
+export default Menu;
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../js/components/menu/menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAOzC,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAe;;;;;uBAKxB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;;aAE1E,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;aAMzD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;sBAM9B,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;;;;sBAI5D,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;;;;;iBAKjE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;iBAInC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;4BACxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;;CAElE,CAAC;AAOF;;;;;GAKG;AACH,SAAS,IAAI,CAAC,KAAgB;IAC1B,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAE9C,OAAO,CACH,4BACK,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;YACxC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;YAC3B,OAAO,CACH,MAAC,QAAQ,IAAC,eAAe,EAAC,UAAU,EAAC,SAAS,EAAE,YAAY,CAAC,SAAS,EAAa,EAAE,EAAE,KAAK,aACxF,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAI,EACzC,IAAI,KAFoE,IAAI,CAGtE,CACd,CAAC;QACN,CAAC,CAAC,GACH,CACN,CAAC;AACN,CAAC;AAED,eAAe,IAAI,CAAC"}

package/dist/components/progress-tracker/progress-tracker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface ProgressTrackerProps {
+    /**
+     * Fallback element to render when there is no task tracked
+     */
+    fallback?: JSX.Element;
+    /**
+     * Ref holding a list of variables the component is subscribed to
+     */
+    variablesRef?: React.MutableRefObject<Set<string>>;
+}
+/**
+ * ProgressTracker component can be used as a placeholder to replace the standard loading spinner.
+ * If a task is running, data is captured from the task function and a ProgressBar with live updates in shown.
+ */
+declare function ProgressTracker(props: ProgressTrackerProps): JSX.Element;
+export default ProgressTracker;
+//# sourceMappingURL=progress-tracker.d.ts.map

package/dist/components/progress-tracker/progress-tracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-tracker.d.ts","sourceRoot":"","sources":["../../../js/components/progress-tracker/progress-tracker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AA4HvE,UAAU,oBAAoB;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;CACtD;AAUD;;;GAGG;AACH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAsIjE;AAED,eAAe,eAAe,CAAC"}

package/dist/components/progress-tracker/progress-tracker.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import styled from '@darajs/styled-components';
+import { ProgressBar } from '@darajs/ui-components';
+import { useTaskContext } from '../../shared/context/global-task-context';
+import websocketCtx from '../../shared/context/websocket-context';
+const POLLING_INTERVAL = 100;
+const FAKE_PROGRESS_INTERVAL = 100;
+const ESTIMATE_RATIO = 0.85;
+/**
+ * Progress estimator function - roughly `y = 1 - exp(x)`.
+ *
+ * @param time time in milliseconds
+ * @param timeConstant seconds to reach 63%, then 86%, then 95%, then 98%
+ */
+function estimateProgress(time, timeConstant = 10) {
+    // This reaches in 63% in 10s, 86% in 20s
+    return 1 - Math.exp((-1 * time) / (FAKE_PROGRESS_INTERVAL * 10 * timeConstant));
+}
+/**
+ * Build a generator which will return fake progress
+ *
+ * @param progressStart starting point
+ * @param progressEnd ending point
+ * @param estimatedTime estimated time the faking should take; if specified, the fake progress
+ *  will use 'real'/estimated values for 60% of the estimated time before changing to a fake algo
+ */
+function fakeProgressGenerator(progressStart, progressEnd, estimatedTime) {
+    const difference = progressEnd - progressStart;
+    const estimatedProgressUpdates = [];
+    let timeConstant = 10;
+    // If estimated time is set, fake progress will start with estimated updates
+    if (estimatedTime && estimatedTime !== 0) {
+        const estimatedDifference = ESTIMATE_RATIO * difference;
+        const estimatedProgressTime = ESTIMATE_RATIO * estimatedTime;
+        const numberOfUpdates = estimatedProgressTime / FAKE_PROGRESS_INTERVAL;
+        const estimatedProgressChunk = estimatedDifference / numberOfUpdates;
+        let t = 0;
+        let p = progressStart;
+        // Compute list of 'estimated' (estimated) progress updates
+        while (t < estimatedProgressTime) {
+            p += estimatedProgressChunk;
+            t += FAKE_PROGRESS_INTERVAL;
+            estimatedProgressUpdates.push(p);
+        }
+        // Set time constant (time to reach 63% of the target) to the remaining chunk of estimated time
+        timeConstant = (1 - ESTIMATE_RATIO) * (estimatedTime / 1000);
+    }
+    // Build internal generator which returns estimated updates, then fake updates
+    function* getNextUpdate() {
+        let startFrom = progressStart;
+        // First we return estimated updates
+        while (estimatedProgressUpdates.length > 0) {
+            const update = estimatedProgressUpdates.shift();
+            startFrom = update;
+            yield update;
+        }
+        let i = 0;
+        // Then keep returning fake updates based on the estimate function
+        while (true) {
+            // Estimated is in range 0-1
+            const estimated = estimateProgress(FAKE_PROGRESS_INTERVAL * i, timeConstant);
+            // Rescale estimated to range of startFrom->progressEnd
+            yield estimated * (progressEnd - startFrom) + startFrom;
+            i++;
+        }
+    }
+    return getNextUpdate();
+}
+const ProgressWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+`;
+const ProgressHeader = styled.h4 `
+    font-size: 1.2rem;
+`;
+const ProgressMessage = styled.span `
+    font-size: ${(props) => props.theme.font.size};
+`;
+/**
+ * Retrieve a list of running tasks if there are any
+ *
+ * @param tasksContext
+ * @param variablesRef
+ */
+function findRunningTasks(tasksContext, variablesRef) {
+    var _a;
+    // check if there are variables the component is subscribed to, and there are tasks running
+    if (!(((_a = variablesRef === null || variablesRef === void 0 ? void 0 : variablesRef.current) === null || _a === void 0 ? void 0 : _a.size) > 0 && tasksContext.hasRunningTasks())) {
+        return [];
+    }
+    return tasksContext.getVariableTasks(...variablesRef.current.values());
+}
+/**
+ * ProgressTracker component can be used as a placeholder to replace the standard loading spinner.
+ * If a task is running, data is captured from the task function and a ProgressBar with live updates in shown.
+ */
+function ProgressTracker(props) {
+    const taskContext = useTaskContext();
+    const { client: wsClient } = useContext(websocketCtx);
+    const [latestProgressUpdate, setLatestProgressUpdate] = useState(null); // latest progress message
+    const [progress, setProgress] = useState(null);
+    const fakeInterval = useRef(null);
+    const [subscribedTaskIds, setSubscribedTaskIds] = useState([]);
+    const [restartTrigger, setRestartTrigger] = useState(0); // used to trigger a restart of polling for a running task
+    useEffect(() => {
+        let progressSubscription = null;
+        // Start polling and looking for running tasks
+        const timer = setInterval(() => {
+            const taskIds = findRunningTasks(taskContext, props.variablesRef);
+            // Once tasks are found, subscribe to their progress updates and stop polling
+            // This handles a component having multiple tasks running - it's a limitation that only one of them
+            // can be tracked; this is only an issue if a component calls useVariable for multiple inputs
+            if (taskIds.length > 0) {
+                setSubscribedTaskIds(taskIds);
+                progressSubscription = wsClient
+                    .progressUpdates$(...taskIds)
+                    .subscribe((notif) => setLatestProgressUpdate(notif.message));
+                clearInterval(timer);
+            }
+        }, POLLING_INTERVAL);
+        return () => {
+            // Clean up intervals and subscriptions
+            clearInterval(timer);
+            if (fakeInterval.current) {
+                clearInterval(fakeInterval.current);
+            }
+            progressSubscription === null || progressSubscription === void 0 ? void 0 : progressSubscription.unsubscribe();
+        };
+    }, [restartTrigger]);
+    /**
+     * Handle cancellations of subscribed task ids.
+     */
+    useEffect(() => {
+        let subscription = null;
+        if (subscribedTaskIds.length > 0) {
+            subscription = wsClient.taskStatusUpdates$(...subscribedTaskIds).subscribe((newStatus) => {
+                if (newStatus === 'CANCELED') {
+                    // Reset component
+                    if (fakeInterval.current) {
+                        clearInterval(fakeInterval.current);
+                    }
+                    setLatestProgressUpdate(null);
+                    setSubscribedTaskIds([]);
+                    setProgress(null);
+                    // Restart polling
+                    setRestartTrigger((v) => v + 1);
+                }
+            });
+        }
+        return () => {
+            subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe();
+        };
+    }, [subscribedTaskIds]);
+    /**
+     * Handle progress updates.
+     * This is in a chained effect rather than in the subscription handler since it needs
+     * access to the latest state.
+     */
+    useEffect(() => {
+        var _a, _b;
+        if (!latestProgressUpdate)
+            return;
+        // Clear faking process interval if its set
+        if (fakeInterval.current) {
+            clearInterval(fakeInterval.current);
+        }
+        // whether we received a message to start fake mode
+        const shouldStartFakeProgress = latestProgressUpdate.message.startsWith('FAKE_PROGRESS__');
+        if (!shouldStartFakeProgress) {
+            // If not, just update progress
+            setProgress({
+                message: latestProgressUpdate.message,
+                progress: latestProgressUpdate.progress,
+            });
+            return;
+        }
+        // Start fake mode and update message to the sent message
+        const [, estimatedTime, message] = latestProgressUpdate.message.split('__');
+        setProgress({
+            message,
+            progress: (_a = progress === null || progress === void 0 ? void 0 : progress.progress) !== null && _a !== void 0 ? _a : 0,
+        });
+        const progressGenerator = fakeProgressGenerator((_b = progress === null || progress === void 0 ? void 0 : progress.progress) !== null && _b !== void 0 ? _b : 0, latestProgressUpdate.progress, parseFloat(estimatedTime));
+        fakeInterval.current = setInterval(() => {
+            const nextValue = progressGenerator.next().value;
+            setProgress({
+                message,
+                progress: nextValue,
+            });
+        }, FAKE_PROGRESS_INTERVAL);
+    }, [latestProgressUpdate]);
+    // If no task is running, just show a standard loading bar
+    if (subscribedTaskIds.length === 0) {
+        return props.fallback;
+    }
+    return (_jsxs(ProgressWrapper, { children: [_jsx(ProgressHeader, { children: "Task in progress" }), progress && (_jsxs(_Fragment, { children: [_jsx(ProgressMessage, { children: progress.message }), _jsx(ProgressBar, { progress: parseFloat(progress.progress.toFixed(2)) })] }))] }));
+}
+export default ProgressTracker;
+//# sourceMappingURL=progress-tracker.js.map

package/dist/components/progress-tracker/progress-tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-tracker.js","sourceRoot":"","sources":["../../../js/components/progress-tracker/progress-tracker.tsx"],"names":[],"mappings":"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"}

package/dist/components/router-content/router-content.d.ts

@@ -0,0 +1,14 @@
+import { RouteContent } from '../../types';
+interface RouterContentProps {
+    /** The list of routes to render content conditionally from */
+    routes: Array<RouteContent>;
+}
+/**
+ * The RouterContent component takes a list of RouterContent objects from the api and create a react-router based on
+ * them.
+ *
+ * @param props - the component props
+ */
+declare function RouterContent(props: RouterContentProps): JSX.Element;
+export default RouterContent;
+//# sourceMappingURL=router-content.d.ts.map

package/dist/components/router-content/router-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router-content.d.ts","sourceRoot":"","sources":["../../../js/components/router-content/router-content.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAUvC,UAAU,kBAAkB;IACxB,8DAA8D;IAC9D,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC/B;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAY7D;AAED,eAAe,aAAa,CAAC"}

package/dist/components/router-content/router-content.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { DynamicComponent, PrivateRoute } from '../../shared';
+const PageNotFound = () => {
+    return (_jsx("div", { style: { alignItems: 'center', display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx("h2", { children: "404 - page not found" }) }));
+};
+/**
+ * The RouterContent component takes a list of RouterContent objects from the api and create a react-router based on
+ * them.
+ *
+ * @param props - the component props
+ */
+function RouterContent(props) {
+    return (_jsxs(Switch, { children: [props.routes.map(({ content, route, reset_vars_on_load, name }) => (_jsx(PrivateRoute, { name: name, path: route, reset_vars_on_load: reset_vars_on_load, children: _jsx(DynamicComponent, { component: content }) }, route))), _jsx(Route, { exact: true, path: "/", render: () => _jsx(Redirect, { to: props.routes[0].route }) }), _jsx(Route, { component: PageNotFound })] }));
+}
+export default RouterContent;
+//# sourceMappingURL=router-content.js.map

package/dist/components/router-content/router-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router-content.js","sourceRoot":"","sources":["../../../js/components/router-content/router-content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG1D,MAAM,YAAY,GAAG,GAAgB,EAAE;IACnC,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,YAC1F,gDAA6B,GAC3B,CACT,CAAC;AACN,CAAC,CAAC;AAOF;;;;;GAKG;AACH,SAAS,aAAa,CAAC,KAAyB;IAC5C,OAAO,CACH,MAAC,MAAM,eACF,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAChE,KAAC,YAAY,IAAa,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,YACrF,KAAC,gBAAgB,IAAC,SAAS,EAAE,OAAO,GAAI,IADzB,KAAK,CAET,CAClB,CAAC,EACF,KAAC,KAAK,IAAC,KAAK,QAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,QAAQ,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAI,GAAI,EAC/E,KAAC,KAAK,IAAC,SAAS,EAAE,YAAY,GAAI,IAC7B,CACZ,CAAC;AACN,CAAC;AAED,eAAe,aAAa,CAAC"}

package/dist/components/side-bar-frame/side-bar-frame.d.ts

@@ -0,0 +1,21 @@
+import { ComponentInstance } from '../../types';
+interface SideBarFrameProps {
+    content: ComponentInstance;
+    hide_logo?: boolean;
+    logo_path?: string;
+    logo_position: 'top' | 'bottom';
+    logo_width?: string;
+    side_bar: ComponentInstance;
+    side_bar_padding?: string;
+    side_bar_position?: 'left' | 'right';
+    side_bar_width?: string;
+}
+/**
+ * The SideBarFrame component is designed as a root component for an app built using the Dara core framework. It adds
+ * a dark blue side bar to the left of the screen and displays a main content on a light grey background in the center
+ *
+ * It exposes two slots for registering content: side-bar & content
+ */
+declare function SideBarFrame(props: SideBarFrameProps): JSX.Element;
+export default SideBarFrame;
+//# sourceMappingURL=side-bar-frame.d.ts.map

package/dist/components/side-bar-frame/side-bar-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-bar-frame.d.ts","sourceRoot":"","sources":["../../../js/components/side-bar-frame/side-bar-frame.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAsE5C,UAAU,iBAAiB;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAgC3D;AAED,eAAe,YAAY,CAAC"}