@darajs/components 1.0.0-a.1

package/dist/common/carousel/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../js/common/carousel/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,MAAM,EACN,iBAAiB,EAEjB,oBAAoB,EACpB,QAAQ,EAKX,MAAM,cAAc,CAAC;AACtB,OAAO,EAA0B,YAAY,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE/F,UAAU,YAAa,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IAC5D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,UAAU,aAAc,SAAQ,oBAAoB;IAChD,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;IACtD,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC5B;AAID;;;;;GAKG;AACH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA8CnD;AAED,eAAe,QAAQ,CAAC"}

package/dist/common/carousel/carousel.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { DynamicComponent, injectCss, useAction, useComponentStyles, useVariable, } from '@darajs/core';
+import { Carousel as UICarousel } from '@darajs/ui-components';
+const StyledCarousel = injectCss(UICarousel);
+/**
+ * The carousel component accepts a list of Items and displays them in a standard carousel format, beginning with the
+ * first item in the list.
+ *
+ * @param props the component props
+ */
+function Carousel(props) {
+    const [items] = useVariable(props.items);
+    const [value, setValue] = useVariable(props.value);
+    const [onCarouselAction] = useAction(props.onchange);
+    function handleChange(val) {
+        setValue(val);
+        onCarouselAction(val);
+    }
+    const remappedItems = useMemo(() => items.map((item) => {
+        const { component } = item, rest = __rest(item, ["component"]);
+        if (component) {
+            return Object.assign(Object.assign({}, rest), { component: _jsx(DynamicComponent, { component: component }), imageAlt: item.image_alt, imageHeight: item.image_height, imageWidth: item.image_width });
+        }
+        return Object.assign(Object.assign({}, rest), { imageAlt: item.image_alt, imageHeight: item.image_height, imageWidth: item.image_width });
+    }), [items]);
+    const [style, css] = useComponentStyles(props);
+    return (_jsx(StyledCarousel, { "$rawCss": css, className: props.className, items: remappedItems, onChange: handleChange, style: style, value: value }));
+}
+export default Carousel;
+//# sourceMappingURL=carousel.js.map

package/dist/common/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../js/common/carousel/carousel.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAGH,gBAAgB,EAGhB,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,WAAW,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAkC,MAAM,uBAAuB,CAAC;AAmB/F,MAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;AAE7C;;;;;GAKG;AACH,SAAS,QAAQ,CAAC,KAAoB;IAClC,MAAM,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAErD,SAAS,YAAY,CAAC,GAAW;QAC7B,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM,aAAa,GAAG,OAAO,CACzB,GAAG,EAAE,CACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,EAAE,SAAS,KAAc,IAAI,EAAb,IAAI,UAAK,IAAI,EAA7B,aAAsB,CAAO,CAAC;QAEpC,IAAI,SAAS,EAAE;YACX,uCACO,IAAI,KACP,SAAS,EAAE,KAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,GAAI,EACrD,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,UAAU,EAAE,IAAI,CAAC,WAAW,IAC9B;SACL;QAED,uCACO,IAAI,KACP,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,UAAU,EAAE,IAAI,CAAC,WAAW,IAC9B;IACN,CAAC,CAAC,EACN,CAAC,KAAK,CAAC,CACV,CAAC;IAEF,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,OAAO,CACH,KAAC,cAAc,eACF,GAAG,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/dist/common/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,24 @@
+import { Variable } from '@darajs/core';
+import { Item } from '@darajs/ui-components';
+import { FormComponentProps } from '../types';
+interface CheckboxGroupProps extends FormComponentProps {
+    /** Pass through the className property */
+    className: string;
+    /** The list of items to choose from */
+    items: Array<Item> | Variable<Item[]>;
+    /** Whether to show checkboxes in list style */
+    list_styling: boolean;
+    /** The number of items that can be selected at one time */
+    select_max: number;
+    /** The minimum number of items that should be selected at one time */
+    select_min: number;
+}
+/**
+ * The CheckboxGroup component allows users to choose from a list of checkboxes. Checkboxes can also have a maximum number of
+ * items which may be selected at one given time.
+ *
+ * @param props the component props
+ */
+declare function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
+export default CheckboxGroup;
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/common/checkbox-group/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../js/common/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAyD,MAAM,cAAc,CAAC;AAC/F,OAAO,EAAE,IAAI,EAA+B,MAAM,uBAAuB,CAAC;AAG1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAI9C,UAAU,kBAAmB,SAAQ,kBAAkB;IACnD,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IACtC,+CAA+C;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,UAAU,EAAE,MAAM,CAAC;CACtB;AAID;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAqC7D;AAED,eAAe,aAAa,CAAC"}

package/dist/common/checkbox-group/checkbox-group.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { injectCss, useAction, useComponentStyles, useVariable } from '@darajs/core';
+import { CheckboxGroup as UiCheckbox } from '@darajs/ui-components';
+import { useFormContext } from '../context';
+const StyledCheckbox = injectCss(UiCheckbox);
+// Disabling rules-of-hook as the assumption is that props changing the type of the select won't change
+/* eslint-disable react-hooks/rules-of-hooks */
+/**
+ * The CheckboxGroup component allows users to choose from a list of checkboxes. Checkboxes can also have a maximum number of
+ * items which may be selected at one given time.
+ *
+ * @param props the component props
+ */
+function CheckboxGroup(props) {
+    const formCtx = useFormContext(props);
+    const [items] = useVariable(props.items);
+    const [value, setValue] = useVariable(formCtx.resolveInitialValue([]));
+    const [style, css] = useComponentStyles(props);
+    const [onChangeAction] = useAction(props.onchange);
+    const onChange = useCallback((values) => {
+        let newValues;
+        if (Array.isArray(values)) {
+            newValues = values.map((item) => item.value);
+        }
+        else {
+            newValues = values.value;
+        }
+        setValue(newValues);
+        onChangeAction(newValues);
+        formCtx.updateForm(newValues);
+    }, [setValue]);
+    return (_jsx(StyledCheckbox, { "$rawCss": css, className: props.className, isListStyle: props.list_styling, items: items, onChange: onChange, selectMax: props.select_max, selectMin: props.select_min, style: style, values: items.filter((item) => value.includes(item.value)) }));
+}
+export default CheckboxGroup;
+//# sourceMappingURL=checkbox-group.js.map

package/dist/common/checkbox-group/checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../js/common/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAY,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,EAAQ,aAAa,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE1E,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG5C,MAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;AAe7C,uGAAuG;AACvG,+CAA+C;AAC/C;;;;;GAKG;AACH,SAAS,aAAa,CAAC,KAAyB;IAC5C,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,CAAC;IACvE,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,WAAW,CACxB,CAAC,MAA0B,EAAE,EAAE;QAC3B,IAAI,SAAS,CAAC;QAEd,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvB,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChD;aAAM;YACH,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;SAC5B;QAED,QAAQ,CAAC,SAAS,CAAC,CAAC;QACpB,cAAc,CAAC,SAAS,CAAC,CAAC;QAC1B,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,OAAO,CACH,KAAC,cAAc,eACF,GAAG,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,WAAW,EAAE,KAAK,CAAC,YAAY,EAC/B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,KAAK,CAAC,UAAU,EAC3B,SAAS,EAAE,KAAK,CAAC,UAAU,EAC3B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAClE,CACL,CAAC;AACN,CAAC;AAED,eAAe,aAAa,CAAC"}

package/dist/common/code/code.d.ts

@@ -0,0 +1,15 @@
+import { Language } from 'prism-react-renderer';
+import { StyledComponentProps, Variable } from '@darajs/core';
+declare enum CodeComponentThemes {
+    DARK = "dark",
+    LIGHT = "light"
+}
+interface CodeProps extends StyledComponentProps {
+    className: string;
+    code: string | Variable<string>;
+    language: Language;
+    theme?: CodeComponentThemes;
+}
+declare function Code(props: CodeProps): JSX.Element;
+export default Code;
+//# sourceMappingURL=code.d.ts.map

package/dist/common/code/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../js/common/code/code.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,QAAQ,EAA4B,MAAM,sBAAsB,CAAC;AAIrF,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAA8C,MAAM,cAAc,CAAC;AAG1G,aAAK,mBAAmB;IACpB,IAAI,SAAS;IACb,KAAK,UAAU;CAClB;AAED,UAAU,SAAU,SAAQ,oBAAoB;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChC,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAiBD,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAyC3C;AAED,eAAe,IAAI,CAAC"}

package/dist/common/code/code.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
+import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
+import { injectCss, useComponentStyles, useVariable } from '@darajs/core';
+import styled, { darkTheme, theme, useTheme } from '@darajs/styled-components';
+var CodeComponentThemes;
+(function (CodeComponentThemes) {
+    CodeComponentThemes["DARK"] = "dark";
+    CodeComponentThemes["LIGHT"] = "light";
+})(CodeComponentThemes || (CodeComponentThemes = {}));
+const StyledPre = styled.pre `
+    min-width: fit-content;
+    margin: 0;
+    padding: 1rem;
+
+    background-color: ${(props) => (props.isLightTheme ? theme.colors.blue1 : darkTheme.colors.blue1)} !important;
+    border-radius: 0.25rem;
+`;
+const StyledCode = injectCss(StyledPre);
+function Code(props) {
+    const themeCtx = useTheme();
+    const [rootStyle, css] = useComponentStyles(props);
+    const [code] = useVariable(props.code);
+    function getTheme() {
+        if (props.theme) {
+            if (props.theme === CodeComponentThemes.LIGHT) {
+                return duotoneLight;
+            }
+            return duotoneDark;
+        }
+        if (themeCtx.themeType === 'dark') {
+            return duotoneDark;
+        }
+        return duotoneLight;
+    }
+    return (_jsx(Highlight, Object.assign({}, defaultProps, { code: code, language: props.language, theme: getTheme(), children: ({ className, style, tokens, getLineProps, getTokenProps }) => (_jsx(StyledCode, { "$rawCss": css, className: className, isLightTheme: props.theme !== 'dark', style: Object.assign(Object.assign({}, rootStyle), style), children: tokens.map((line, i) => (_createElement("div", Object.assign({}, getLineProps({ key: i, line }), { key: i }), line.map((token, key) => (_createElement("span", Object.assign({}, getTokenProps({ key, token }), { key: key }))))))) })) })));
+}
+export default Code;
+//# sourceMappingURL=code.js.map

package/dist/common/code/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sourceRoot":"","sources":["../../../js/common/code/code.tsx"],"names":[],"mappings":";;AAAA,OAAO,SAAS,EAAE,EAAwB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,WAAW,MAAM,yCAAyC,CAAC;AAClE,OAAO,YAAY,MAAM,0CAA0C,CAAC;AAEpE,OAAO,EAAkC,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC1G,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE/E,IAAK,mBAGJ;AAHD,WAAK,mBAAmB;IACpB,oCAAa,CAAA;IACb,sCAAe,CAAA;AACnB,CAAC,EAHI,mBAAmB,KAAnB,mBAAmB,QAGvB;AAaD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgB;;;;;wBAKpB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC;;CAEpG,CAAC;AAEF,MAAM,UAAU,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAExC,SAAS,IAAI,CAAC,KAAgB;IAC1B,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAC5B,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEvC,SAAS,QAAQ;QACb,IAAI,KAAK,CAAC,KAAK,EAAE;YACb,IAAI,KAAK,CAAC,KAAK,KAAK,mBAAmB,CAAC,KAAK,EAAE;gBAC3C,OAAO,YAAY,CAAC;aACvB;YACD,OAAO,WAAW,CAAC;SACtB;QACD,IAAI,QAAQ,CAAC,SAAS,KAAK,MAAM,EAAE;YAC/B,OAAO,WAAW,CAAC;SACtB;QACD,OAAO,YAAY,CAAC;IACxB,CAAC;IAED,OAAO,CACH,KAAC,SAAS,oBAAK,YAAY,IAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAC/E,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,eACE,GAAG,EACZ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,KAAK,CAAC,KAAK,KAAK,MAAM,EACpC,KAAK,kCACE,SAAS,GACT,KAAK,aAGX,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACrB,wCAAS,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,IAAE,GAAG,EAAE,CAAC,KAC1C,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACtB,yCAAU,aAAa,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,IAAE,GAAG,EAAE,GAAG,IAAI,CACxD,CAAC,CACA,CACT,CAAC,GACO,CAChB,IACO,CACf,CAAC;AACN,CAAC;AAED,eAAe,IAAI,CAAC"}

package/dist/common/component-select-list/component-select-list.d.ts

@@ -0,0 +1,23 @@
+import { Action, StyledComponentProps, Variable } from '@darajs/core';
+import { ComponentItem } from '../types';
+interface ComponentSelectListProps extends StyledComponentProps {
+    /** The items to display, each should have a title, subtitle and component */
+    items: Array<ComponentItem>;
+    /** An optional prop to specify the number of items per row, 3 by default */
+    items_per_row?: number;
+    /** An optional flag for allowing selecting multiple cards, false by default */
+    multi_select?: boolean;
+    /** An optional Action for listening to changes in the selected items */
+    on_select?: Action;
+    /** The optional selected items, can be an array of titles if multiSelect is true otherwise a title */
+    selected_items?: Variable<Array<string> | string>;
+}
+/**
+ * The ComponentSelectList component creates a list of card of selectable cards containing either images or plots.
+ * The plot should be passed as a component instance.
+ *
+ * @param {ComponentSelectListProps} props - the component props
+ */
+declare function ComponentSelectList(props: ComponentSelectListProps): JSX.Element;
+export default ComponentSelectList;
+//# sourceMappingURL=component-select-list.d.ts.map

package/dist/common/component-select-list/component-select-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-select-list.d.ts","sourceRoot":"","sources":["../../../js/common/component-select-list/component-select-list.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,MAAM,EAEN,oBAAoB,EACpB,QAAQ,EAKX,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,UAAU,wBAAyB,SAAQ,oBAAoB;IAC3D,6EAA6E;IAC7E,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sGAAsG;IACtG,cAAc,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC;CACrD;AAID;;;;;GAKG;AACH,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA8BzE;AAED,eAAe,mBAAmB,CAAC"}

package/dist/common/component-select-list/component-select-list.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import castArray from 'lodash/castArray';
+import { useCallback } from 'react';
+import { DynamicComponent, injectCss, useAction, useComponentStyles, useVariable, } from '@darajs/core';
+import { ComponentSelectList as UIComponentSelectList } from '@darajs/ui-components';
+const StyledComponentSelectList = injectCss(UIComponentSelectList);
+/**
+ * The ComponentSelectList component creates a list of card of selectable cards containing either images or plots.
+ * The plot should be passed as a component instance.
+ *
+ * @param {ComponentSelectListProps} props - the component props
+ */
+function ComponentSelectList(props) {
+    const [style, css] = useComponentStyles(props);
+    const [selectedItems, setSelectedItems] = useVariable(props.selected_items);
+    const [onSelect] = useAction(props.on_select);
+    const updateSelectedItems = useCallback((items) => {
+        const newSelectedItems = props.multi_select ? items : items[0] || null;
+        setSelectedItems === null || setSelectedItems === void 0 ? void 0 : setSelectedItems(newSelectedItems);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelectedItems);
+    }, [onSelect, props.multi_select, setSelectedItems]);
+    // Replacing the plots with Dynamic Component with the plot as its component
+    const remappedItems = props.items.map((item) => {
+        return Object.assign(Object.assign({}, item), { component: _jsx(DynamicComponent, { component: item.component }) });
+    });
+    return (_jsx(StyledComponentSelectList, { "$rawCss": css, items: remappedItems, itemsPerRow: props.items_per_row, multiSelect: props.multi_select, onSelect: updateSelectedItems, selectedItems: selectedItems && castArray(selectedItems), style: style }));
+}
+export default ComponentSelectList;
+//# sourceMappingURL=component-select-list.js.map

package/dist/common/component-select-list/component-select-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-select-list.js","sourceRoot":"","sources":["../../../js/common/component-select-list/component-select-list.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAEH,gBAAgB,EAGhB,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,WAAW,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,mBAAmB,IAAI,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAiBrF,MAAM,yBAAyB,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,SAAS,mBAAmB,CAAC,KAA+B;IACxD,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5E,MAAM,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAE9C,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,KAAoB,EAAQ,EAAE;QAC3B,MAAM,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;QACvE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,gBAAgB,CAAC,CAAC;QACrC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,gBAAgB,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,gBAAgB,CAAC,CACnD,CAAC;IAEF,4EAA4E;IAC5E,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC3C,uCAAY,IAAI,KAAE,SAAS,EAAE,KAAC,gBAAgB,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,IAAG;IACnF,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,KAAC,yBAAyB,eACb,GAAG,EACZ,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,KAAK,CAAC,aAAa,EAChC,WAAW,EAAE,KAAK,CAAC,YAAY,EAC/B,QAAQ,EAAE,mBAAmB,EAC7B,aAAa,EAAE,aAAa,IAAI,SAAS,CAAC,aAAa,CAAC,EACxD,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC;AAED,eAAe,mBAAmB,CAAC"}

package/dist/common/constants.d.ts

@@ -0,0 +1,19 @@
+export declare enum ComponentType {
+    ANCHOR = "anchor",
+    BUTTON = "button",
+    CAROUSEL = "carousel",
+    CODE = "code",
+    COMPONENT_SELECT_LIST = "component_select_list",
+    FORM_PAGE = "form_page",
+    HEADING = "heading",
+    HTML_RAW = "html_raw",
+    ICON = "icon",
+    PARAGRAPH = "paragraph",
+    PROGRESS_BAR = "progress_bar",
+    SPACER = "spacer",
+    STACK = "stack",
+    TABLE = "table",
+    TEXT = "text",
+    TOOLTIP = "tooltip"
+}
+//# sourceMappingURL=constants.d.ts.map

package/dist/common/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../js/common/constants.tsx"],"names":[],"mappings":"AACA,oBAAY,aAAa;IACrB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,qBAAqB,0BAA0B;IAC/C,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,OAAO,YAAY;CACtB"}

package/dist/common/constants.js

@@ -0,0 +1,21 @@
+// eslint-disable-next-line import/prefer-default-export
+export var ComponentType;
+(function (ComponentType) {
+    ComponentType["ANCHOR"] = "anchor";
+    ComponentType["BUTTON"] = "button";
+    ComponentType["CAROUSEL"] = "carousel";
+    ComponentType["CODE"] = "code";
+    ComponentType["COMPONENT_SELECT_LIST"] = "component_select_list";
+    ComponentType["FORM_PAGE"] = "form_page";
+    ComponentType["HEADING"] = "heading";
+    ComponentType["HTML_RAW"] = "html_raw";
+    ComponentType["ICON"] = "icon";
+    ComponentType["PARAGRAPH"] = "paragraph";
+    ComponentType["PROGRESS_BAR"] = "progress_bar";
+    ComponentType["SPACER"] = "spacer";
+    ComponentType["STACK"] = "stack";
+    ComponentType["TABLE"] = "table";
+    ComponentType["TEXT"] = "text";
+    ComponentType["TOOLTIP"] = "tooltip";
+})(ComponentType || (ComponentType = {}));
+//# sourceMappingURL=constants.js.map

package/dist/common/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../js/common/constants.tsx"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,MAAM,CAAN,IAAY,aAiBX;AAjBD,WAAY,aAAa;IACrB,kCAAiB,CAAA;IACjB,kCAAiB,CAAA;IACjB,sCAAqB,CAAA;IACrB,8BAAa,CAAA;IACb,gEAA+C,CAAA;IAC/C,wCAAuB,CAAA;IACvB,oCAAmB,CAAA;IACnB,sCAAqB,CAAA;IACrB,8BAAa,CAAA;IACb,wCAAuB,CAAA;IACvB,8CAA6B,CAAA;IAC7B,kCAAiB,CAAA;IACjB,gCAAe,CAAA;IACf,gCAAe,CAAA;IACf,8BAAa,CAAA;IACb,oCAAmB,CAAA;AACvB,CAAC,EAjBW,aAAa,KAAb,aAAa,QAiBxB"}

package/dist/common/context/form-context.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Variable } from '@darajs/core';
+import { FormComponentProps } from '../types';
+export interface FormContextValue {
+    /** current form values in the format id: component value */
+    formValues: Record<string, any>;
+    /** defines the initial value a form component should take */
+    resolveInitialValue: (defaultValue?: any, variable?: Variable<any>, id?: any) => any;
+    /** defines how the form context should be updated */
+    updateForm: (value: any, id?: string) => void;
+}
+declare const formCtx: import("react").Context<FormContextValue>;
+export default formCtx;
+export interface UseFormContextAPI {
+    /** defines the initial value a form component should take */
+    resolveInitialValue: (defaultValue?: any) => any;
+    /** defines how the form context should be updated */
+    updateForm: (value: any) => void;
+}
+export declare function useFormContext(props: FormComponentProps): UseFormContextAPI;
+//# sourceMappingURL=form-context.d.ts.map

package/dist/common/context/form-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-context.d.ts","sourceRoot":"","sources":["../../../js/common/context/form-context.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC7B,4DAA4D;IAC5D,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,6DAA6D;IAC7D,mBAAmB,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IACrF,qDAAqD;IACrD,UAAU,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,OAAO,2CAAwC,CAAC;AAEtD,eAAe,OAAO,CAAC;AAEvB,MAAM,WAAW,iBAAiB;IAC9B,6DAA6D;IAC7D,mBAAmB,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IACjD,qDAAqD;IACrD,UAAU,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACpC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,kBAAkB,GAAG,iBAAiB,CA4B3E"}

package/dist/common/context/form-context.js

@@ -0,0 +1,28 @@
+import { createContext, useContext, useRef } from 'react';
+const formCtx = createContext(null);
+export default formCtx;
+export function useFormContext(props) {
+    const formContext = useContext(formCtx);
+    const idRef = useRef(null);
+    const isMounted = useRef(false);
+    // if component is not in a form, then it doesn't need to update it
+    if (formContext === null) {
+        return {
+            resolveInitialValue: (defaultValue) => { var _a; return (_a = props.value) !== null && _a !== void 0 ? _a : defaultValue; },
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            updateForm: () => { },
+        };
+    }
+    // if components in a form we check they have valid unique ids
+    if (isMounted.current === false) {
+        isMounted.current = true;
+        if (!props.id) {
+            throw new Error('Attempted to add a form interactive component without an id');
+        }
+        idRef.current = props.id;
+    }
+    const updateForm = (value) => formContext.updateForm(value, idRef.current);
+    const resolveInitialValue = (defaultValue) => formContext.resolveInitialValue(defaultValue, props.value, idRef.current);
+    return { resolveInitialValue, updateForm };
+}
+//# sourceMappingURL=form-context.js.map

package/dist/common/context/form-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-context.js","sourceRoot":"","sources":["../../../js/common/context/form-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAe1D,MAAM,OAAO,GAAG,aAAa,CAAmB,IAAI,CAAC,CAAC;AAEtD,eAAe,OAAO,CAAC;AASvB,MAAM,UAAU,cAAc,CAAC,KAAyB;IACpD,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,MAAM,CAAS,IAAI,CAAC,CAAC;IACnC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,mEAAmE;IACnE,IAAI,WAAW,KAAK,IAAI,EAAE;QACtB,OAAO;YACH,mBAAmB,EAAE,CAAC,YAAkB,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,KAAK,mCAAI,YAAY,CAAA,EAAA;YACxE,gEAAgE;YAChE,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;SACvB,CAAC;KACL;IAED,8DAA8D;IAC9D,IAAI,SAAS,CAAC,OAAO,KAAK,KAAK,EAAE;QAC7B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC,CAAC;SAClF;QACD,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;KAC5B;IAED,MAAM,UAAU,GAAG,CAAC,KAAU,EAAQ,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACtF,MAAM,mBAAmB,GAAG,CAAC,YAAkB,EAAO,EAAE,CACpD,WAAW,CAAC,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAE9E,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,CAAC;AAC/C,CAAC"}

package/dist/common/context/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FormCtx, useFormContext } from './form-context';
+//# sourceMappingURL=index.d.ts.map

package/dist/common/context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../js/common/context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/common/context/index.js

@@ -0,0 +1,2 @@
+export { default as FormCtx, useFormContext } from './form-context';
+//# sourceMappingURL=index.js.map

package/dist/common/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../js/common/context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/common/datepicker/datepicker.d.ts

@@ -0,0 +1,31 @@
+import { Variable } from '@darajs/core';
+import { FormComponentProps } from '../types';
+/**
+ * Parse a server datetime string to a Date object
+ */
+export declare function parseDateString(date: string | Date): Date;
+interface DatepickerProps extends FormComponentProps {
+    /** Date format displayed - default: dd/MM/yyyy */
+    date_format?: string;
+    /** If the time is selectable - default: off */
+    enable_time: boolean;
+    /** Maximum date available - default: no max */
+    max_date?: string;
+    /** Minimum date available - default: no min */
+    min_date?: string;
+    /** If range is true, create two datepickers side by side */
+    range: boolean;
+    /** Whether datepicker closes when a date is selected - default: closes */
+    select_close: boolean;
+    /** Date variable to read and update */
+    value?: Variable<string | [string, string]>;
+}
+/**
+ * A component for rendering a calendar from which a date is selectable. If range is true, creates two datepickers
+ * that allow a date range to be specified. The date variable that will be updated when selecting a date.
+ *
+ * @param props - the component props
+ */
+declare function Datepicker(props: DatepickerProps): JSX.Element;
+export default Datepicker;
+//# sourceMappingURL=datepicker.d.ts.map

package/dist/common/datepicker/datepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../js/common/datepicker/datepicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAyD,MAAM,cAAc,CAAC;AAK/F,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAS9C;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAczD;AAED,UAAU,eAAgB,SAAQ,kBAAkB;IAChD,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,KAAK,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,YAAY,EAAE,OAAO,CAAC;IACtB,uCAAuC;IAEvC,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CAC/C;AACD;;;;;GAKG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAkDvD;AAED,eAAe,UAAU,CAAC"}

package/dist/common/datepicker/datepicker.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatISO, parseISO } from 'date-fns';
+import { useEffect, useMemo, useRef } from 'react';
+import { injectCss, useAction, useComponentStyles, useVariable } from '@darajs/core';
+import styled from '@darajs/styled-components';
+import { DatePicker as UIDatePicker } from '@darajs/ui-components';
+import { useFormContext } from '../context';
+const DatepickerDiv = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`;
+const StyledDatepickerDiv = injectCss(DatepickerDiv);
+/**
+ * Parse a server datetime string to a Date object
+ */
+export function parseDateString(date) {
+    if (!date) {
+        return;
+    }
+    if (date instanceof Date) {
+        return date;
+    }
+    const parsed = parseISO(date);
+    if (Number.isNaN(parsed.getTime())) {
+        return;
+    }
+    return parsed;
+}
+/**
+ * A component for rendering a calendar from which a date is selectable. If range is true, creates two datepickers
+ * that allow a date range to be specified. The date variable that will be updated when selecting a date.
+ *
+ * @param props - the component props
+ */
+function Datepicker(props) {
+    const formCtx = useFormContext(props);
+    const [style, css] = useComponentStyles(props);
+    const [value, setValue] = useVariable(formCtx.resolveInitialValue());
+    const [onChangeAction] = useAction(props.onchange);
+    const isFirstRender = useRef(true);
+    const onChange = (date) => {
+        if (!isFirstRender.current && ((!Array.isArray(date) && date) || (Array.isArray(date) && date[0] && date[1]))) {
+            let newDate;
+            if (Array.isArray(date)) {
+                newDate = [formatISO(date[0]), formatISO(date[1])];
+            }
+            else {
+                newDate = formatISO(date);
+            }
+            setValue(newDate);
+            onChangeAction(newDate);
+            formCtx.updateForm(newDate);
+        }
+    };
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+        }
+    }, []);
+    const formattedValue = useMemo(() => {
+        if (props.range && value) {
+            return [parseDateString(value === null || value === void 0 ? void 0 : value[0]), parseDateString(value === null || value === void 0 ? void 0 : value[1])];
+        }
+        return parseDateString(value);
+    }, [value, props.range]);
+    return (_jsx(StyledDatepickerDiv, { "$rawCss": css, style: style, children: _jsx(UIDatePicker, { dateFormat: props.date_format, maxDate: parseDateString(props.max_date), minDate: parseDateString(props.min_date), onChange: onChange, popperStrategy: "fixed", selectsRange: props.range, shouldCloseOnSelect: props.select_close, showTimeInput: props.enable_time, value: formattedValue }) }));
+}
+export default Datepicker;
+//# sourceMappingURL=datepicker.js.map

package/dist/common/datepicker/datepicker.js.map

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

package/dist/common/dropzone/dropzone.d.ts

@@ -0,0 +1,19 @@
+import { Action, DataVariable, StyledComponentProps } from '@darajs/core';
+interface DropzoneProps extends StyledComponentProps {
+    /** Optional comma-separated list of accepted MIME-types */
+    accept?: string;
+    /** the action to trigger when a file is successfully uploaded */
+    on_drop?: Action;
+    /** optional resolver to use for the data */
+    resolver_id?: string;
+    /** variable to store data in */
+    target?: DataVariable;
+}
+/**
+ * A wrapper around the UploadDropzone component that enables files to upload to the data extension. When a file is
+ * successfully uploaded it will update the name variable and trigger the onUpload action.
+ * @param {DropzoneProps} props - the component props
+ */
+declare function UploadDropzone(props: DropzoneProps): JSX.Element;
+export default UploadDropzone;
+//# sourceMappingURL=dropzone.d.ts.map

package/dist/common/dropzone/dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.d.ts","sourceRoot":"","sources":["../../../js/common/dropzone/dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,MAAM,EAEN,YAAY,EAEZ,oBAAoB,EAMvB,MAAM,cAAc,CAAC;AAmDtB,UAAU,aAAc,SAAQ,oBAAoB;IAChD,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,MAAM,CAAC,EAAE,YAAY,CAAC;CACzB;AAKD;;;;GAIG;AACH,iBAAS,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA+DzD;AAED,eAAe,cAAc,CAAC"}

package/dist/common/dropzone/dropzone.js

@@ -0,0 +1,101 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Center, DefaultFallback, injectCss, request, useAction, useComponentStyles, useSessionToken, } from '@darajs/core';
+import styled, { useTheme } from '@darajs/styled-components';
+import { Button, UploadDropzone as UIUploadDropzone } from '@darajs/ui-components';
+import { Check } from '@darajs/ui-icons';
+import { HTTP_METHOD, validateResponse } from '@darajs/ui-utils';
+const status = {
+    FAILED: 'FAILED',
+    INITIALIZED: 'INITIALIZED',
+    LOADING: 'LOADING',
+    SUCCESS: 'SUCCESS',
+};
+const StyledCheck = styled(Check) `
+    color: ${(props) => props.theme.colors.success};
+`;
+const Heading = styled.h2 `
+    margin-bottom: 1rem;
+    color: ${(props) => props.theme.colors.text};
+`;
+function uploadFileToExtension(file, sessionToken, variableId, resolver_id) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const formData = new FormData();
+        formData.append('data', file);
+        if (resolver_id) {
+            formData.append('resolver_id', resolver_id);
+        }
+        const url = new URL('/api/core/data/upload', window.location.origin);
+        if (variableId) {
+            url.searchParams.set('data_uid', variableId);
+        }
+        const res = yield request(url, {
+            body: formData,
+            headers: { Authorization: `Bearer ${sessionToken}` },
+            method: HTTP_METHOD.POST,
+        });
+        yield validateResponse(res, `Failed to upload file: ${file.name}`);
+        const result = yield res.json();
+        return { newStatus: result.status };
+    });
+}
+const StyledDropzone = injectCss(UIUploadDropzone);
+const StyledCenter = injectCss(Center);
+/**
+ * A wrapper around the UploadDropzone component that enables files to upload to the data extension. When a file is
+ * successfully uploaded it will update the name variable and trigger the onUpload action.
+ * @param {DropzoneProps} props - the component props
+ */
+function UploadDropzone(props) {
+    const theme = useTheme();
+    const [style, css] = useComponentStyles(props);
+    const [currentStatus, setCurrentStatus] = useState(status.INITIALIZED);
+    const [errorMessage, setErrorMessage] = useState();
+    const [onFileDrop] = useAction(props.on_drop);
+    const sessionToken = useSessionToken();
+    const onDrop = (acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (acceptedFiles.length === 1) {
+            setCurrentStatus(status.LOADING);
+            try {
+                const { newStatus } = yield uploadFileToExtension(acceptedFiles[0], sessionToken, (_a = props.target) === null || _a === void 0 ? void 0 : _a.uid, props.resolver_id);
+                setCurrentStatus(newStatus);
+            }
+            catch (err) {
+                setErrorMessage(err.message);
+                setCurrentStatus(status.FAILED);
+                throw err;
+            }
+            onFileDrop(acceptedFiles[0]);
+        }
+        else {
+            setErrorMessage('Upload failed. Please individually drop CSV files');
+            setCurrentStatus(status.FAILED);
+        }
+    });
+    const onReset = () => {
+        setCurrentStatus(status.INITIALIZED);
+        setErrorMessage(undefined);
+    };
+    if (currentStatus === status.SUCCESS) {
+        return (_jsxs(StyledCenter, { "$rawCss": css, style: style, children: [_jsx(StyledCheck, { size: "10x" }), _jsx(Heading, { children: "Upload Successful" }), _jsx(Button, { onClick: onReset, styling: "secondary", children: "Upload Again" })] }));
+    }
+    if (currentStatus === status.FAILED) {
+        return (_jsxs(StyledCenter, { "$rawCss": css, style: style, children: [_jsx("span", { style: { color: theme.colors.error, textAlign: 'center' }, children: errorMessage }), _jsx(Heading, { children: "Upload Failed" }), _jsx(Button, { onClick: onReset, styling: "ghost", children: "Upload Again" })] }));
+    }
+    if (currentStatus === status.LOADING) {
+        return _jsx(DefaultFallback, {});
+    }
+    return _jsx(StyledDropzone, { "$rawCss": css, accept: props.accept, onDrop: onDrop, style: style });
+}
+export default UploadDropzone;
+//# sourceMappingURL=dropzone.js.map