@darajs/core 1.0.0-a.1

package/dist/shared/utils/is-js-component.js

@@ -0,0 +1,11 @@
+import { ComponentType } from '../../types';
+/**
+ * Check a component is a JS component and apply a type guard for the returned type
+ *
+ * @param component - the component to check
+ */
+function isJsComponent(component) {
+    return component.type === ComponentType.JS;
+}
+export default isJsComponent;
+//# sourceMappingURL=is-js-component.js.map

package/dist/shared/utils/is-js-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-js-component.js","sourceRoot":"","sources":["../../../js/shared/utils/is-js-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,aAAa,EAAe,MAAM,SAAS,CAAC;AAEhE;;;;GAIG;AACH,SAAS,aAAa,CAAC,SAAoB;IACvC,OAAO,SAAS,CAAC,IAAI,KAAK,aAAa,CAAC,EAAE,CAAC;AAC/C,CAAC;AAED,eAAe,aAAa,CAAC"}

package/dist/shared/utils/normalization.d.ts

@@ -0,0 +1,19 @@
+import { AnyVariable, NormalizedPayload, ResolvedDerivedVariable } from '../../types';
+type Mapping = Record<string, any>;
+type JsonArray = Array<JsonLike | string | number>;
+type JsonLike = Mapping | JsonArray;
+export declare function getIdentifier(variable: AnyVariable<any>): string;
+export declare function denormalize(obj: Mapping, lookup: Mapping): Mapping;
+export declare function denormalize(obj: JsonArray, lookup: Mapping): JsonArray;
+type DerivedVariableRequest = Array<ResolvedDerivedVariable | any>;
+type PyComponentRequest = Record<string, ResolvedDerivedVariable | any>;
+/**
+ * Normalize py_component request data into a NormalizedPayload.
+ * Puts all variable values into a lookup object to prevent data duplication.
+ *
+ * @param values resolved values
+ * @param kwargsDefinition raw kwarg definition object
+ */
+export declare function normalizeRequest(values: PyComponentRequest | DerivedVariableRequest, kwargsDefinition: Record<string, AnyVariable<any>> | Array<AnyVariable<any>>): NormalizedPayload<Record<string | number, any>>;
+export {};
+//# sourceMappingURL=normalization.d.ts.map

package/dist/shared/utils/normalization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalization.d.ts","sourceRoot":"","sources":["../../../js/shared/utils/normalization.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,WAAW,EAGX,iBAAiB,EAEjB,uBAAuB,EAK1B,MAAM,SAAS,CAAC;AAKjB,KAAK,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACnC,KAAK,SAAS,GAAG,KAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AACnD,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAUpC,wBAAgB,aAAa,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,MAAM,CAYhE;AAiBD,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO,CAAC;AACpE,wBAAgB,WAAW,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;AAwExE,KAAK,sBAAsB,GAAG,KAAK,CAAC,uBAAuB,GAAG,GAAG,CAAC,CAAC;AAEnE,KAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,uBAAuB,GAAG,GAAG,CAAC,CAAC;AAExE;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC5B,MAAM,EAAE,kBAAkB,GAAG,sBAAsB,EACnD,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAC7E,iBAAiB,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,CAkCjD"}

package/dist/shared/utils/normalization.js

@@ -0,0 +1,118 @@
+import { isDerivedDataVariable, isDerivedVariable, isResolvedDerivedDataVariable, isResolvedDerivedVariable, } from '../../types';
+import { hashObject } from './hashing';
+function isPlaceholder(value) {
+    return typeof value === 'object' && '__ref' in value;
+}
+export function getIdentifier(variable) {
+    let id = `${variable.__typename}:${variable.uid}`;
+    if ('nested' in variable && variable.nested.length > 0) {
+        id += `:${variable.nested.join(',')}`;
+    }
+    if ('filters' in variable) {
+        id += `:${hashObject(variable.filters)}`;
+    }
+    return id;
+}
+/**
+ * Get an iterable of entries of array or object
+ *
+ * @param obj json-like array or object
+ */
+function getEntries(obj) {
+    if (Array.isArray(obj)) {
+        return obj.entries();
+    }
+    return Object.entries(obj);
+}
+/**
+ * Denormalize data by replacing Placeholders with objects from lookup
+ *
+ * @param obj JSON-like structure containing placeholders
+ * @param lookup map of identifier -> referrable
+ */
+export function denormalize(obj, lookup) {
+    if (isPlaceholder(obj)) {
+        const referrable = lookup[obj.__ref];
+        return denormalize(referrable, lookup);
+    }
+    const output = Array.isArray(obj) ? [] : {};
+    for (const [key, val] of getEntries(obj)) {
+        if (val !== null && typeof val === 'object') {
+            output[key] = denormalize(val, lookup);
+        }
+        else {
+            output[key] = val;
+        }
+    }
+    return output;
+}
+/**
+ * Normalize a ResolvedDerivedVariable object
+ *
+ * @param resolved resolved derived variable object
+ * @param def variable definition
+ */
+function normalizeResolvedDerivedVariable(resolved, def) {
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    const normalizedValues = [];
+    let lookup = {};
+    for (const [key, val] of resolved.values.entries()) {
+        // Recursively call normalize on resolve derived variables
+        if (isResolvedDerivedVariable(val) || isResolvedDerivedDataVariable(val)) {
+            const { data: nestedNormalized, lookup: nestedLookup } = normalizeResolvedDerivedVariable(val, def.variables[key]);
+            normalizedValues.push(nestedNormalized);
+            lookup = Object.assign(Object.assign({}, lookup), nestedLookup);
+        }
+        else {
+            // Put values into lookup
+            const varDef = def.variables[key];
+            const identifier = getIdentifier(varDef);
+            lookup[identifier] = val;
+            normalizedValues.push({ __ref: identifier });
+        }
+    }
+    return {
+        data: Object.assign(Object.assign({}, resolved), { values: normalizedValues }),
+        lookup,
+    };
+}
+/**
+ * Normalize py_component request data into a NormalizedPayload.
+ * Puts all variable values into a lookup object to prevent data duplication.
+ *
+ * @param values resolved values
+ * @param kwargsDefinition raw kwarg definition object
+ */
+export function normalizeRequest(values, kwargsDefinition) {
+    const data = Array.isArray(values) ? [] : {};
+    let lookup = {};
+    // Iterate through both kwargs def and values
+    // Where a plain Variable is found, put value to lookup
+    for (const [key, val] of getEntries(values)) {
+        const kwargDef = kwargsDefinition[key];
+        // If no def is found, i.e. a static kwarg in PyComponent
+        if (!kwargDef) {
+            data[key] = val;
+        }
+        else if (isDerivedVariable(kwargDef) || isDerivedDataVariable(kwargDef)) {
+            // Handle resolved derived variable
+            const { data: nestedData, lookup: nestedLookup } = normalizeResolvedDerivedVariable(val, kwargDef);
+            data[key] = nestedData;
+            lookup = Object.assign(Object.assign({}, lookup), nestedLookup);
+        }
+        else if (kwargDef.constructor === Object) {
+            const identifier = getIdentifier(kwargDef);
+            lookup[identifier] = val === undefined ? null : val;
+            data[key] = { __ref: identifier };
+        }
+        else {
+            // If constructor is not an Object then it is the case of normalizing a static value
+            data[key] = val;
+        }
+    }
+    return {
+        data,
+        lookup,
+    };
+}
+//# sourceMappingURL=normalization.js.map

package/dist/shared/utils/normalization.js.map

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

package/dist/shared/utils/resolve-theme.d.ts

@@ -0,0 +1,9 @@
+import { DefaultTheme } from '@darajs/styled-components';
+/**
+ * Resolve the theme passed from the backend. If the default values of 'default' or 'dark' are passed then return the
+ * default themes from styled-components, otherwise pass back the custom theme scheme.
+ *
+ * @param configTheme - the config theme structure of the app
+ */
+export default function resolveTheme(configTheme: 'light' | 'dark' | DefaultTheme, baseTheme?: 'light' | 'dark'): DefaultTheme;
+//# sourceMappingURL=resolve-theme.d.ts.map

package/dist/shared/utils/resolve-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme.d.ts","sourceRoot":"","sources":["../../../js/shared/utils/resolve-theme.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAoB,MAAM,2BAA2B,CAAC;AAM3E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAChC,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,EAC5C,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAC7B,YAAY,CAkCd"}

package/dist/shared/utils/resolve-theme.js

@@ -0,0 +1,28 @@
+import isNull from 'lodash/isNull';
+import omitBy from 'lodash/omitBy';
+import { darkTheme, theme } from '@darajs/styled-components';
+function isTheme(configTheme) {
+    return typeof configTheme !== 'string';
+}
+/**
+ * Resolve the theme passed from the backend. If the default values of 'default' or 'dark' are passed then return the
+ * default themes from styled-components, otherwise pass back the custom theme scheme.
+ *
+ * @param configTheme - the config theme structure of the app
+ */
+export default function resolveTheme(configTheme, baseTheme) {
+    if (!configTheme || configTheme === 'light') {
+        return theme;
+    }
+    if (configTheme === 'dark') {
+        return darkTheme;
+    }
+    if (isTheme(configTheme)) {
+        const original = baseTheme === 'dark' ? darkTheme : theme;
+        return Object.assign(Object.assign(Object.assign({}, original), omitBy(configTheme, isNull)), { colors: Object.assign(Object.assign({}, original.colors), omitBy(configTheme.colors, isNull)), font: Object.assign(Object.assign({}, original.font), omitBy(configTheme.font, isNull)), shadow: Object.assign(Object.assign({}, original.shadow), omitBy(configTheme.shadow, isNull)) });
+    }
+    // eslint-disable-next-line no-console
+    console.warn('No valid theme was found. Defaulting to light theme.');
+    return theme;
+}
+//# sourceMappingURL=resolve-theme.js.map

package/dist/shared/utils/resolve-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme.js","sourceRoot":"","sources":["../../../js/shared/utils/resolve-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,MAAM,MAAM,eAAe,CAAC;AAEnC,OAAO,EAAgB,SAAS,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAE3E,SAAS,OAAO,CAAC,WAAkC;IAC/C,OAAO,OAAO,WAAW,KAAK,QAAQ,CAAC;AAC3C,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAChC,WAA4C,EAC5C,SAA4B;IAE5B,IAAI,CAAC,WAAW,IAAI,WAAW,KAAK,OAAO,EAAE;QACzC,OAAO,KAAK,CAAC;KAChB;IAED,IAAI,WAAW,KAAK,MAAM,EAAE;QACxB,OAAO,SAAS,CAAC;KACpB;IAED,IAAI,OAAO,CAAC,WAAW,CAAC,EAAE;QACtB,MAAM,QAAQ,GAAiB,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;QAExE,qDAGO,QAAQ,GACR,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,KAC9B,MAAM,kCACC,QAAQ,CAAC,MAAM,GACf,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAEzC,IAAI,kCACG,QAAQ,CAAC,IAAI,GACb,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,GAEvC,MAAM,kCACC,QAAQ,CAAC,MAAM,GACf,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,KAE3C;KACL;IACD,sCAAsC;IACtC,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;IACrE,OAAO,KAAK,CAAC;AACjB,CAAC"}

package/dist/shared/utils/templating.d.ts

@@ -0,0 +1,24 @@
+import { ComponentInstance, TemplatedComponentInstance } from '../../types';
+/**
+ * Recursively searches through the component instance looking for TemplateMarker instances.
+ *
+ * @param component component to search through
+ */
+export declare function hasTemplateMarkers(component: ComponentInstance): boolean;
+/**
+ * Recursively searches through the templated component instance looking for TemplateMarker instances.
+ * Returns a map of the path to the marker to the field name of the marker.
+ *
+ * @param template template to search through
+ */
+export declare function getMarkerPaths(template: ComponentInstance & TemplatedComponentInstance): Record<string, string>;
+/**
+ * Replaces markers in a template with data.
+ * Utilises lodash.set to set the value of the marker.
+ *
+ * @param template template to replace markers in
+ * @param data data to replace markers with
+ * @param paths paths to markers in the template
+ */
+export declare function replaceMarkers(template: ComponentInstance & TemplatedComponentInstance, data: Record<string, any>, paths: Record<string, string>): ComponentInstance & TemplatedComponentInstance;
+//# sourceMappingURL=templating.d.ts.map

package/dist/shared/utils/templating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"templating.d.ts","sourceRoot":"","sources":["../../../js/shared/utils/templating.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAkB,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAWxF;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,iBAAiB,GAAG,OAAO,CAexE;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,GAAG,0BAA0B,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgB/G;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC1B,QAAQ,EAAE,iBAAiB,GAAG,0BAA0B,EACxD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC9B,iBAAiB,GAAG,0BAA0B,CAShD"}

package/dist/shared/utils/templating.js

@@ -0,0 +1,67 @@
+import copy from 'lodash/cloneDeep';
+import set from 'lodash/set';
+/**
+ * Checks if a value is a TemplateMarker.
+ *
+ * @param value value to check
+ */
+function isTemplateMarker(value) {
+    return value && typeof value === 'object' && value.__typename === 'TemplateMarker';
+}
+/**
+ * Recursively searches through the component instance looking for TemplateMarker instances.
+ *
+ * @param component component to search through
+ */
+export function hasTemplateMarkers(component) {
+    if (!component || typeof component !== 'object') {
+        return false;
+    }
+    for (const value of Object.values(component)) {
+        if (isTemplateMarker(value)) {
+            return true;
+        }
+        if (value && typeof value === 'object') {
+            return hasTemplateMarkers(value);
+        }
+    }
+    return false;
+}
+/**
+ * Recursively searches through the templated component instance looking for TemplateMarker instances.
+ * Returns a map of the path to the marker to the field name of the marker.
+ *
+ * @param template template to search through
+ */
+export function getMarkerPaths(template) {
+    const paths = {};
+    function recurse(component, path) {
+        for (const [key, value] of Object.entries(component)) {
+            if (isTemplateMarker(value)) {
+                paths[path + key] = value.field_name;
+            }
+            else if (value instanceof Object) {
+                recurse(value, `${path + key}.`);
+            }
+        }
+    }
+    recurse(template, '');
+    return paths;
+}
+/**
+ * Replaces markers in a template with data.
+ * Utilises lodash.set to set the value of the marker.
+ *
+ * @param template template to replace markers in
+ * @param data data to replace markers with
+ * @param paths paths to markers in the template
+ */
+export function replaceMarkers(template, data, paths) {
+    const templateCopy = copy(template);
+    for (const [path, fieldName] of Object.entries(paths)) {
+        const value = data[fieldName];
+        set(templateCopy, path, value);
+    }
+    return templateCopy;
+}
+//# sourceMappingURL=templating.js.map

package/dist/shared/utils/templating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templating.js","sourceRoot":"","sources":["../../../js/shared/utils/templating.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,GAAG,MAAM,YAAY,CAAC;AAI7B;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,KAAU;IAChC,OAAO,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,UAAU,KAAK,gBAAgB,CAAC;AACvF,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,SAA4B;IAC3D,IAAI,CAAC,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;QAC7C,OAAO,KAAK,CAAC;KAChB;IAED,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;QAC1C,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAI,CAAC;SACf;QACD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YACpC,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAC;SACpC;KACJ;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,QAAwD;IACnF,MAAM,KAAK,GAA2B,EAAE,CAAC;IAEzC,SAAS,OAAO,CAAC,SAA4B,EAAE,IAAY;QACvD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YAClD,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;gBACzB,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC;aACxC;iBAAM,IAAI,KAAK,YAAY,MAAM,EAAE;gBAChC,OAAO,CAAC,KAAK,EAAE,GAAG,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;aACpC;SACJ;IACL,CAAC;IAED,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAEtB,OAAO,KAAK,CAAC;AACjB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAC1B,QAAwD,EACxD,IAAyB,EACzB,KAA6B;IAE7B,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEpC,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACnD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9B,GAAG,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KAClC;IAED,OAAO,YAAY,CAAC;AACxB,CAAC"}

package/dist/shared/utils/use-action-registry.d.ts

@@ -0,0 +1,11 @@
+import { ActionDef, ActionInstance } from '../../types/core';
+interface ActionRegistryInterface {
+    get: (instance: ActionInstance) => ActionDef;
+}
+/**
+ * The action registry pulls the full list of actions from the backend and then returns a function that allows a
+ * specific action to be requested using it's instance.
+ */
+declare function useActionRegistry(): ActionRegistryInterface;
+export default useActionRegistry;
+//# sourceMappingURL=use-action-registry.d.ts.map

package/dist/shared/utils/use-action-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-action-registry.d.ts","sourceRoot":"","sources":["../../../js/shared/utils/use-action-registry.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,UAAU,uBAAuB;IAC7B,GAAG,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,SAAS,CAAC;CAChD;AAED;;;GAGG;AACH,iBAAS,iBAAiB,IAAI,uBAAuB,CAcpD;AAED,eAAe,iBAAiB,CAAC"}

package/dist/shared/utils/use-action-registry.js

@@ -0,0 +1,18 @@
+import { useCallback, useContext } from 'react';
+import RegistriesCtx from '../../shared/context/registries-context';
+/**
+ * The action registry pulls the full list of actions from the backend and then returns a function that allows a
+ * specific action to be requested using it's instance.
+ */
+function useActionRegistry() {
+    const { actionRegistry: actions } = useContext(RegistriesCtx);
+    const get = useCallback((instance) => {
+        if (actions && actions[instance.name]) {
+            return actions[instance.name];
+        }
+        throw new Error(`Attempted to load an action (${instance.name}) that is not in the registry`);
+    }, [actions]);
+    return { get };
+}
+export default useActionRegistry;
+//# sourceMappingURL=use-action-registry.js.map

package/dist/shared/utils/use-action-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-action-registry.js","sourceRoot":"","sources":["../../../js/shared/utils/use-action-registry.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,aAAa,MAAM,qCAAqC,CAAC;AAOhE;;;GAGG;AACH,SAAS,iBAAiB;IACtB,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE9D,MAAM,GAAG,GAAG,WAAW,CACnB,CAAC,QAAwB,EAAa,EAAE;QACpC,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YACnC,OAAO,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACjC;QACD,MAAM,IAAI,KAAK,CAAC,gCAAgC,QAAQ,CAAC,IAAI,+BAA+B,CAAC,CAAC;IAClG,CAAC,EACD,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,CAAC;AACnB,CAAC;AAED,eAAe,iBAAiB,CAAC"}

package/dist/shared/utils/use-action.d.ts

@@ -0,0 +1,9 @@
+import { Action } from '../../types';
+/**
+ * Consume an action def from the framework and return a callback function that can be used to trigger it
+ * and a loading state boolean indicating whether an action is currently in progress
+ *
+ * @param actionDefinition the action def passed in
+ */
+export default function useAction(action: Action): [(value: any) => Promise<void>, boolean];
+//# sourceMappingURL=use-action.d.ts.map

package/dist/shared/utils/use-action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-action.d.ts","sourceRoot":"","sources":["../../../js/shared/utils/use-action.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAyC,MAAM,SAAS,CAAC;AAsCxE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CA6C1F"}

package/dist/shared/utils/use-action.js

@@ -0,0 +1,84 @@
+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 { useCallback, useContext, useState } from 'react';
+import { useAsyncResource } from 'use-async-resource';
+import { useActionContext } from '../../actions/utils';
+import { ImportersCtx } from '../../shared/context';
+import useActionRegistry from './use-action-registry';
+// Disabling rules of hook since the followiing function are willingly breaking the rules, making the assumption that the components call
+// the exported functions with values which don't change the hook order etc
+/* eslint-disable react-hooks/rules-of-hooks */
+/**
+ * Helper method which converts an action into a list of hooks.
+ *
+ * @param action action(s) to import
+ * @param getAction method to convert an action instance into its definition
+ * @param importers importers available in the app
+ */
+function getActionHooks(action, getAction, importers) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const hooks = [];
+        const actions = Array.isArray(action) ? action : [action];
+        for (const act of actions) {
+            const actDef = getAction(act);
+            // Doing this sequentially to preserve order and not break rules of hooks
+            // eslint-disable-next-line no-await-in-loop
+            const moduleContent = yield importers[actDef.py_module]();
+            const Hook = moduleContent[actDef.name];
+            hooks.push(Hook);
+        }
+        return hooks;
+    });
+}
+/**
+ * Consume an action def from the framework and return a callback function that can be used to trigger it
+ * and a loading state boolean indicating whether an action is currently in progress
+ *
+ * @param actionDefinition the action def passed in
+ */
+export default function useAction(action) {
+    // Sanity check - it's technically possible to pass an ActionInstance or empty array and pydantic accepts them and converts to an ActionInstance
+    if ((action === null || action === void 0 ? void 0 : action.name) === 'ActionInstance') {
+        throw new Error('Expected a registered sub-class of "ActionInstance", base class detected');
+    }
+    // No action passed - noop
+    if (!action || (Array.isArray(action) && action.length === 0)) {
+        return [() => Promise.resolve(), false];
+    }
+    const [loading, setLoading] = useState(false);
+    const importers = useContext(ImportersCtx);
+    const actionContext = useActionContext();
+    const { get: getAction } = useActionRegistry();
+    const [actionHooksReader] = useAsyncResource(getActionHooks, action, getAction, importers);
+    // Call all action hooks and collect the callbacks
+    const actionHooks = actionHooksReader();
+    const actionCallbacks = [];
+    const actions = Array.isArray(action) ? action : [action];
+    for (const [index, actionHook] of actionHooks.entries()) {
+        actionCallbacks.push(actionHook(actions[index], actionContext));
+    }
+    const actionCallback = useCallback((value) => __awaiter(this, void 0, void 0, function* () {
+        // Track loading state for all actions
+        setLoading(true);
+        try {
+            for (const actionCb of actionCallbacks) {
+                // Sequentially execute actions to ensure deterministic order of execution
+                // eslint-disable-next-line no-await-in-loop
+                yield actionCb(value);
+            }
+        }
+        finally {
+            // make sure to clean up loading state regardless of errors
+            setLoading(false);
+        }
+    }), [action, ...actionCallbacks]);
+    return [actionCallback, loading];
+}
+//# sourceMappingURL=use-action.js.map

package/dist/shared/utils/use-action.js.map

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

package/dist/shared/utils/use-component-registry.d.ts

@@ -0,0 +1,11 @@
+import { Component, ComponentInstance } from '../../types/core';
+interface ComponentRegistryInterface {
+    get: (instance: ComponentInstance) => Promise<Component>;
+}
+/**
+ * The component registry pulls the full list of components from the backend and then returns a function that allows a
+ * specific component to be requested using it's instance.
+ */
+declare function useComponentRegistry(maxRetries?: number): ComponentRegistryInterface;
+export default useComponentRegistry;
+//# sourceMappingURL=use-component-registry.d.ts.map

package/dist/shared/utils/use-component-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-component-registry.d.ts","sourceRoot":"","sources":["../../../js/shared/utils/use-component-registry.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE5D,UAAU,0BAA0B;IAChC,GAAG,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;CAC5D;AAED;;;GAGG;AACH,iBAAS,oBAAoB,CAAC,UAAU,SAAI,GAAG,0BAA0B,CAmCxE;AAED,eAAe,oBAAoB,CAAC"}

package/dist/shared/utils/use-component-registry.js

@@ -0,0 +1,46 @@
+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());
+    });
+};
+/* eslint-disable no-await-in-loop */
+import { useCallback, useContext } from 'react';
+import { RegistriesCtx } from '../../shared/context';
+/**
+ * The component registry pulls the full list of components from the backend and then returns a function that allows a
+ * specific component to be requested using it's instance.
+ */
+function useComponentRegistry(maxRetries = 5) {
+    const { componentRegistry: components, refetchComponents } = useContext(RegistriesCtx);
+    const get = useCallback((instance) => __awaiter(this, void 0, void 0, function* () {
+        let component = null;
+        let registry = Object.assign({}, components);
+        let i = 0;
+        while (i < maxRetries) {
+            if (registry && registry[instance.name]) {
+                component = registry[instance.name];
+                break;
+            }
+            else {
+                // If component has not been found, it could be a nested py_component, so we refetch the registry
+                // to see if the component might have been added to the registry in the meantime
+                // But first wait for 0,5s before retrying, to give time for backend to update the registry
+                yield new Promise((resolve) => setTimeout(resolve, 500));
+                const { data } = yield refetchComponents();
+                registry = data;
+            }
+            i++;
+        }
+        if (!component) {
+            throw new Error(`Attempted to load a component (${instance.name}) that is not in the registry`);
+        }
+        return component;
+    }), [components]);
+    return { get };
+}
+export default useComponentRegistry;
+//# sourceMappingURL=use-component-registry.js.map

package/dist/shared/utils/use-component-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-component-registry.js","sourceRoot":"","sources":["../../../js/shared/utils/use-component-registry.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,qCAAqC;AACrC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOjD;;;GAGG;AACH,SAAS,oBAAoB,CAAC,UAAU,GAAG,CAAC;IACxC,MAAM,EAAE,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEvF,MAAM,GAAG,GAAG,WAAW,CACnB,CAAO,QAA2B,EAAsB,EAAE;QACtD,IAAI,SAAS,GAAc,IAAI,CAAC;QAChC,IAAI,QAAQ,qBAAQ,UAAU,CAAE,CAAC;QAEjC,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,OAAO,CAAC,GAAG,UAAU,EAAE;YACnB,IAAI,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBACrC,SAAS,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACpC,MAAM;aACT;iBAAM;gBACH,iGAAiG;gBACjG,gFAAgF;gBAChF,2FAA2F;gBAC3F,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;gBACzD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,iBAAiB,EAAE,CAAC;gBAC3C,QAAQ,GAAG,IAAI,CAAC;aACnB;YAED,CAAC,EAAE,CAAC;SACP;QAED,IAAI,CAAC,SAAS,EAAE;YACZ,MAAM,IAAI,KAAK,CAAC,kCAAkC,QAAQ,CAAC,IAAI,+BAA+B,CAAC,CAAC;SACnG;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAA,EACD,CAAC,UAAU,CAAC,CACf,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,CAAC;AACnB,CAAC;AAED,eAAe,oBAAoB,CAAC"}

package/dist/shared/utils/use-component-styles.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { StyledComponentProps } from '../../types';
+/**
+ * Type containing CSSProperties which extends to those that are missing React's defined list
+ */
+interface CustomCSSProperties extends React.CSSProperties {
+    gap?: string;
+}
+/**
+ * Parse a raw_css property into styles and css
+ *
+ * @param rawCss raw css property to parse
+ */
+export declare function parseRawCss(rawCss: string | CustomCSSProperties): [rawStyles: CustomCSSProperties, rawCss: string];
+/**
+ * Styling utility hook which takes in base styling props and raw_css
+ * Outputs `style` and `css` properties to inject into the top-level component
+ *
+ * @param props props to get styles from
+ * @param useDisplayContext whether or not to use the display context, for some components such as Modal, these do not care for the context of their parent
+ */
+export default function useComponentStyles(props: StyledComponentProps, useDisplayContext?: boolean): [CustomCSSProperties, string];
+export {};
+//# sourceMappingURL=use-component-styles.d.ts.map

package/dist/shared/utils/use-component-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-component-styles.d.ts","sourceRoot":"","sources":["../../../js/shared/utils/use-component-styles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAQ/C;;GAEG;AACH,UAAU,mBAAoB,SAAQ,KAAK,CAAC,aAAa;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAsCD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,mBAAmB,GAAG,CAAC,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,CAAC,CAOlH;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACtC,KAAK,EAAE,oBAAoB,EAC3B,iBAAiB,UAAO,GACzB,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAoC/B"}

package/dist/shared/utils/use-component-styles.js

@@ -0,0 +1,68 @@
+import { useContext, useMemo } from 'react';
+import { useDeepCompare } from '@darajs/ui-utils';
+import { default as DisplayCtx } from '../../shared/context/display-context';
+/**
+ * Sets the flex property of a component based on props passed to it
+ *
+ * @param props the props passed to the component
+ * @param displayCtx the display context of the component, contains the parent layout context
+ * @param useDisplayContext whether or not to consider width/height in conjunction with displayCtx for some components such as Modal, these do not care for the context of their parent
+ */
+function flexStyles(props, displayCtx, useDisplayContext) {
+    let flexBasis = props.basis;
+    let flexShrink = props.shrink;
+    let flexGrow = props.grow;
+    if (useDisplayContext) {
+        // In a horizontal Stack setting the width should also set the flex-basis
+        if (props.width && displayCtx.direction === 'horizontal') {
+            flexBasis !== null && flexBasis !== void 0 ? flexBasis : (flexBasis = props.width);
+            flexShrink !== null && flexShrink !== void 0 ? flexShrink : (flexShrink = '0');
+            flexGrow !== null && flexGrow !== void 0 ? flexGrow : (flexGrow = '0');
+        }
+        // In a vertical Stack setting the height should also set the flex-basis
+        if (props.height && displayCtx.direction === 'vertical') {
+            flexBasis !== null && flexBasis !== void 0 ? flexBasis : (flexBasis = props.height);
+            flexShrink !== null && flexShrink !== void 0 ? flexShrink : (flexShrink = '0');
+            flexGrow !== null && flexGrow !== void 0 ? flexGrow : (flexGrow = '0');
+        }
+    }
+    // If hug is set, then the flex-basis should be set to content
+    // Otherwise we check if the parent is a component that has hug set to true, and its children should inherit
+    if (props.hug || (props.hug !== false && displayCtx.hug)) {
+        flexBasis !== null && flexBasis !== void 0 ? flexBasis : (flexBasis = 'content');
+        flexShrink !== null && flexShrink !== void 0 ? flexShrink : (flexShrink = '1');
+        flexGrow !== null && flexGrow !== void 0 ? flexGrow : (flexGrow = '0');
+    }
+    return { flexBasis, flexGrow, flexShrink };
+}
+/**
+ * Parse a raw_css property into styles and css
+ *
+ * @param rawCss raw css property to parse
+ */
+export function parseRawCss(rawCss) {
+    const isRawObject = typeof rawCss === 'object' && rawCss !== null && rawCss !== undefined;
+    const componentCss = !isRawObject && typeof rawCss === 'string' ? rawCss : '';
+    const styles = isRawObject ? rawCss : {};
+    return [styles, componentCss];
+}
+/**
+ * Styling utility hook which takes in base styling props and raw_css
+ * Outputs `style` and `css` properties to inject into the top-level component
+ *
+ * @param props props to get styles from
+ * @param useDisplayContext whether or not to use the display context, for some components such as Modal, these do not care for the context of their parent
+ */
+export default function useComponentStyles(props, useDisplayContext = true) {
+    const [rawStyles, rawCss] = parseRawCss(props.raw_css);
+    const displayCtx = useContext(DisplayCtx);
+    const flexProps = flexStyles(props, displayCtx, useDisplayContext);
+    const styles = useMemo(() => {
+        var _a;
+        const stylesObj = Object.assign(Object.assign(Object.assign({ backgroundColor: props.background, border: props.border, borderRadius: props.border_radius, color: props.color, fontFamily: props.font, fontSize: props.font_size, fontStyle: props.italic ? 'italic' : 'normal', fontWeight: props.bold ? 'bold' : 'normal', gap: props.gap, height: props.height, margin: props.margin, maxHeight: props.max_height, maxWidth: props.max_width, minHeight: props.min_height, minWidth: props.min_width, overflow: props.overflow, padding: props.padding, position: props.position, textDecoration: props.underline ? 'underline' : 'none', width: props.width }, flexProps), rawStyles), ((_a = props.style) !== null && _a !== void 0 ? _a : {}));
+        // Filter out null/undefined values so they don't end up accidentally overriding other style properties
+        return Object.fromEntries(Object.entries(stylesObj).filter(([, v]) => v !== null && v !== undefined));
+    }, [useDeepCompare(props)]);
+    return [styles, rawCss];
+}
+//# sourceMappingURL=use-component-styles.js.map