windmill-components 1.46.3 → 1.55.0

package/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte

@@ -0,0 +1,81 @@
+<script>import { createEventDispatcher, onMount } from 'svelte';
+import SearchItems from '../../../../SearchItems.svelte';
+import NoItemFound from '../../../../home/NoItemFound.svelte';
+import RowIcon from '../../../../common/table/RowIcon.svelte';
+import { FlowService, Script, ScriptService } from '../../../../../gen';
+import { workspaceStore } from '../../../../../stores';
+import { emptyString } from '../../../../../utils';
+import { Skeleton } from '../../../../common';
+export let filter = '';
+let flows = undefined;
+let loading = false;
+let filteredItems = [];
+$: prefilteredItems = flows ?? [];
+const dispatch = createEventDispatcher();
+async function loadFlow() {
+    const loadedFlows = await FlowService.listFlows({
+        workspace: $workspaceStore,
+        perPage: 300
+    });
+    flows = loadedFlows;
+    loading = false;
+}
+onMount(() => {
+    loading = true;
+    loadFlow();
+});
+</script>
+
+<SearchItems
+	{filter}
+	items={prefilteredItems}
+	bind:filteredItems
+	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
+/>
+<div class="w-full flex mt-1 items-center gap-2">
+	<slot />
+	<input
+		type="text"
+		placeholder="Search workspace scripts"
+		bind:value={filter}
+		class="text-2xl grow mb-4"
+	/>
+</div>
+
+{#if flows}
+	{#if filteredItems.length == 0}
+		<NoItemFound />
+	{:else}
+		<ul class="divide-y divide-gray-200 border rounded-md">
+			{#each filteredItems as item (item)}
+				<li class="flex flex-row w-full">
+					<button
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						on:click={() => dispatch('pick', item.path)}
+					>
+						<div class="flex items-center gap-4">
+							<RowIcon kind="flow" />
+
+							<div class="w-full text-left font-normal ">
+								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+									{#if item.marked}
+										{@html item.marked ?? ''}
+									{:else}
+										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
+									{/if}
+								</div>
+								<div class="text-gray-600 text-xs ">
+									{item.path}
+								</div>
+							</div>
+						</div>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{:else}
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[[4], 0.5]} />
+	{/each}
+{/if}

package/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type WorkspaceFlowListProps = typeof __propDef.props;
+export type WorkspaceFlowListEvents = typeof __propDef.events;
+export type WorkspaceFlowListSlots = typeof __propDef.slots;
+export default class WorkspaceFlowList extends SvelteComponentTyped<WorkspaceFlowListProps, WorkspaceFlowListEvents, WorkspaceFlowListSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte

@@ -0,0 +1,81 @@
+<script>import { createEventDispatcher, onMount } from 'svelte';
+import SearchItems from '../../../../SearchItems.svelte';
+import NoItemFound from '../../../../home/NoItemFound.svelte';
+import RowIcon from '../../../../common/table/RowIcon.svelte';
+import { Script, ScriptService } from '../../../../../gen';
+import { workspaceStore } from '../../../../../stores';
+import { emptyString } from '../../../../../utils';
+import { Skeleton } from '../../../../common';
+export let filter = '';
+let scripts = undefined;
+let loading = false;
+let filteredItems = [];
+$: prefilteredItems = scripts ?? [];
+const dispatch = createEventDispatcher();
+async function loadScripts() {
+    const loadedScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore,
+        perPage: 300
+    });
+    scripts = loadedScripts;
+    loading = false;
+}
+onMount(() => {
+    loading = true;
+    loadScripts();
+});
+</script>
+
+<SearchItems
+	{filter}
+	items={prefilteredItems}
+	bind:filteredItems
+	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
+/>
+<div class="w-full flex mt-1 items-center gap-2">
+	<slot />
+	<input
+		type="text"
+		placeholder="Search workspace scripts"
+		bind:value={filter}
+		class="text-2xl grow mb-4"
+	/>
+</div>
+
+{#if scripts}
+	{#if filteredItems.length == 0}
+		<NoItemFound />
+	{:else}
+		<ul class="divide-y divide-gray-200 border rounded-md">
+			{#each filteredItems as item (item)}
+				<li class="flex flex-row w-full">
+					<button
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						on:click={() => dispatch('pick', item.path)}
+					>
+						<div class="flex items-center gap-4">
+							<RowIcon kind="script" />
+
+							<div class="w-full text-left font-normal ">
+								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+									{#if item.marked}
+										{@html item.marked ?? ''}
+									{:else}
+										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
+									{/if}
+								</div>
+								<div class="text-gray-600 text-xs ">
+									{item.path}
+								</div>
+							</div>
+						</div>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{:else}
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[[4], 0.5]} />
+	{/each}
+{/if}

package/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type WorkspaceScriptListProps = typeof __propDef.props;
+export type WorkspaceScriptListEvents = typeof __propDef.events;
+export type WorkspaceScriptListSlots = typeof __propDef.slots;
+export default class WorkspaceScriptList extends SvelteComponentTyped<WorkspaceScriptListProps, WorkspaceScriptListEvents, WorkspaceScriptListSlots> {
+}
+export {};

package/components/apps/gridUtils.d.ts

@@ -0,0 +1,11 @@
+import type { GridItem } from './types';
+type ColumnConfiguration = [number, number][];
+declare const Breakpoints: {
+    sm: number;
+    lg: number;
+};
+declare const columnConfiguration: ColumnConfiguration;
+declare const gridColumns: number[];
+declare function disableDrag(component: GridItem): GridItem;
+declare function enableDrag(component: GridItem): GridItem;
+export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints };

package/components/apps/gridUtils.js

@@ -0,0 +1,24 @@
+const Breakpoints = {
+    sm: 640,
+    lg: 1024
+};
+const columnConfiguration = [
+    [Breakpoints.lg, 12],
+    [Breakpoints.sm, 3]
+];
+const gridColumns = columnConfiguration.map((value) => value[1]);
+function disableDrag(component) {
+    gridColumns.forEach((column) => {
+        component[column].customDragger = true;
+        component[column].customResizer = true;
+    });
+    return component;
+}
+function enableDrag(component) {
+    gridColumns.forEach((column) => {
+        component[column].customDragger = false;
+        component[column].customResizer = false;
+    });
+    return component;
+}
+export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints };

package/components/apps/inputType.d.ts

@@ -0,0 +1,62 @@
+import type { staticValues } from './editor/componentsPanel/componentStaticValues';
+export type InputType = 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'date' | 'time' | 'datetime' | 'object' | 'array';
+export type InputConnection = {
+    componentId: string;
+    path: string;
+};
+export type ConnectedInput = {
+    type: 'connected';
+    connection: InputConnection | undefined;
+};
+export type UserInput<U> = {
+    type: 'user';
+    value: U | undefined;
+};
+export type StaticInput<U> = {
+    value: U | undefined;
+    type: 'static';
+    visible?: boolean | undefined;
+};
+type RunnableByPath = {
+    path: string;
+    runType: 'script' | 'flow' | 'hubscript';
+    type: 'runnableByPath';
+};
+type RunnableByName = {
+    inlineScriptName: string;
+    type: 'runnableByName';
+};
+export type Runnable = RunnableByPath | RunnableByName | undefined;
+export type ResultInput = {
+    runnable: Runnable;
+    fields: Record<string, StaticAppInput | ConnectedAppInput>;
+    type: 'runnable';
+};
+type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | ResultInput) & InputConfiguration<T, U, V>;
+type InputConfiguration<T extends InputType, U, V extends InputType> = {
+    fieldType: T;
+    defaultValue: U;
+    subFieldType?: V;
+};
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'object', Record<string | number, any>> | (AppInputSpec<'select', string> & {
+    /**
+     * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
+     */
+    optionValuesKey: keyof typeof staticValues;
+}) | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
+    optionValuesKey: keyof typeof staticValues;
+});
+export type StaticAppInput = Extract<AppInput, {
+    type: 'static';
+}>;
+export type ConnectedAppInput = Extract<AppInput, {
+    type: 'connected';
+}>;
+export type UserAppInput = Extract<AppInput, {
+    type: 'user';
+}>;
+export type ResultAppInput = Extract<AppInput, {
+    type: 'runnable';
+}>;
+export type AppInputs = Record<string, AppInput>;
+export {};

package/components/apps/inputType.js

@@ -0,0 +1 @@
+export {};

package/components/apps/rx.d.ts

@@ -0,0 +1,27 @@
+import type { AppInput } from './inputType';
+export interface Subscriber<T> {
+    next(v: T): any;
+}
+export interface Observable<T> {
+    subscribe(x: Subscriber<T>): any;
+}
+export interface Output<T> extends Observable<T> {
+    set(x: T, force?: boolean): void;
+}
+export interface Input<T> extends Subscriber<T> {
+    peak(): T | any | undefined;
+}
+export type World = {
+    outputsById: Record<string, Record<string, Output<any>>>;
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
+};
+export declare function buildWorld(components: Record<string, string[]>): {
+    outputsById: Record<string, Record<string, Output<any>>>;
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
+};
+export declare function buildObservableWorld(): {
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
+    newOutput: <T_1>(id: string, name: string) => Output<T_1>;
+};
+export declare function cachedInput<T>(nextParan: (x: T) => void): Input<T>;
+export declare function settableOutput<T>(): Output<T>;

package/components/apps/rx.js

@@ -0,0 +1,99 @@
+export function buildWorld(components) {
+    const newWorld = buildObservableWorld();
+    const outputsById = {};
+    for (const [k, outputs] of Object.entries(components)) {
+        outputsById[k] = {};
+        for (const o of outputs) {
+            outputsById[k][o] = newWorld.newOutput(k, o);
+        }
+    }
+    return { outputsById, connect: newWorld.connect };
+}
+export function buildObservableWorld() {
+    const observables = {};
+    function connect(inputSpec, next) {
+        if (inputSpec.type === 'static') {
+            return {
+                peak: () => inputSpec.value,
+                next: () => { }
+            };
+        }
+        else if (inputSpec.type === 'connected') {
+            const input = cachedInput(next);
+            const connection = inputSpec.connection;
+            if (!connection) {
+                return {
+                    peak: () => undefined,
+                    next: () => { }
+                };
+            }
+            const { componentId, path } = connection;
+            const [p] = path ? path.split('.') : [undefined];
+            let obs = observables[`${componentId}.${p}`];
+            if (!obs) {
+                console.warn('Observable at ' + componentId + '.' + p + ' not found');
+                return {
+                    peak: () => undefined,
+                    next: () => { }
+                };
+            }
+            obs.subscribe(input);
+            return input;
+        }
+        else if (inputSpec.type === 'user') {
+            return {
+                peak: () => inputSpec.value,
+                next: () => { }
+            };
+        }
+        else {
+            throw Error('Unknown input type ' + inputSpec);
+        }
+    }
+    function newOutput(id, name) {
+        const output = settableOutput();
+        observables[`${id}.${name}`] = output;
+        return output;
+    }
+    return {
+        connect,
+        newOutput
+    };
+}
+export function cachedInput(nextParan) {
+    let value = undefined;
+    function peak() {
+        return value;
+    }
+    function next(x) {
+        value = x;
+        nextParan(x);
+    }
+    return {
+        peak,
+        next
+    };
+}
+export function settableOutput() {
+    let value = undefined;
+    const subscribers = [];
+    function subscribe(x) {
+        if (!subscribers.includes(x)) {
+            subscribers.push(x);
+            // Send the current value to the new subscriber if it already exists
+            if (value !== undefined) {
+                x.next(value);
+            }
+        }
+    }
+    function set(x, force = false) {
+        if (value != x || force) {
+            value = x;
+            subscribers.forEach((x) => x.next(value));
+        }
+    }
+    return {
+        subscribe,
+        set
+    };
+}

package/components/apps/types.d.ts

@@ -0,0 +1,86 @@
+import type { Schema } from '../../common';
+import type { Preview } from '../../gen';
+import type { FilledItem } from 'svelte-grid';
+import type { Writable } from 'svelte/store';
+import type { AppInput, ConnectedAppInput, ConnectedInput, StaticAppInput, UserAppInput } from './inputType';
+import type { World } from './rx';
+type BaseComponent<T extends string> = {
+    type: T;
+};
+export type TextComponent = BaseComponent<'textcomponent'>;
+export type TextInputComponent = BaseComponent<'textinputcomponent'>;
+export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
+export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
+    recomputeIds: string[] | undefined;
+};
+export type FormComponent = BaseComponent<'formcomponent'> & {
+    recomputeIds: string[] | undefined;
+};
+export type RunFormComponent = BaseComponent<'runformcomponent'>;
+export type BarChartComponent = BaseComponent<'barchartcomponent'>;
+export type PieChartComponent = BaseComponent<'piechartcomponent'>;
+export type TableComponent = BaseComponent<'tablecomponent'> & {
+    actionButtons: (BaseAppComponent & ButtonComponent)[];
+};
+export type DisplayComponent = BaseComponent<'displaycomponent'>;
+export type ImageComponent = BaseComponent<'imagecomponent'>;
+export type InputComponent = BaseComponent<'inputcomponent'>;
+export type SelectComponent = BaseComponent<'selectcomponent'>;
+export type CheckboxComponent = BaseComponent<'checkboxcomponent'>;
+export type RadioComponent = BaseComponent<'radiocomponent'>;
+export type HorizontalAlignment = 'left' | 'center' | 'right';
+export type VerticalAlignment = 'top' | 'center' | 'bottom';
+export type Aligned = {
+    horizontalAlignment: HorizontalAlignment;
+    verticalAlignment: VerticalAlignment;
+};
+export interface BaseAppComponent extends Partial<Aligned> {
+    id: ComponentID;
+    componentInput: AppInput | undefined;
+    configuration: Record<string, StaticAppInput | ConnectedAppInput | UserAppInput>;
+    card: boolean | undefined;
+}
+export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | NumberInputComponent | BarChartComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
+export type ComponentSet = {
+    title: string;
+    components: AppComponent[];
+};
+type SectionID = string;
+export type AppSection = {
+    components: AppComponent[];
+    id: SectionID;
+};
+export type GridItem = FilledItem<{
+    data: AppComponent;
+    id: string;
+}>;
+export type InlineScript = {
+    content: string;
+    language: Preview.language;
+    path: string;
+    schema: Schema;
+};
+export type App = {
+    grid: GridItem[];
+    inlineScripts: Record<string, InlineScript>;
+    title: string;
+};
+export type ConnectingInput = {
+    opened: boolean;
+    input?: ConnectedInput;
+    sourceName?: string;
+};
+export type AppEditorContext = {
+    worldStore: Writable<World | undefined>;
+    staticOutputs: Writable<Record<string, string[]>>;
+    app: Writable<App>;
+    selectedComponent: Writable<string | undefined>;
+    mode: Writable<EditorMode>;
+    connectingInput: Writable<ConnectingInput>;
+    breakpoint: Writable<EditorBreakpoint>;
+    runnableComponents: Writable<Record<string, () => void>>;
+};
+export type EditorMode = 'dnd' | 'preview';
+export type EditorBreakpoint = 'sm' | 'lg';
+type ComponentID = string;
+export {};

package/components/apps/types.js

@@ -0,0 +1 @@
+export {};

package/components/apps/utils.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="node" />
+import type { Schema } from '../../common';
+import type { InputType } from 'zlib';
+import type { AppInputs } from './inputType';
+import type { AppComponent } from './types';
+export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
+export declare function schemaToInputsSpec(schema: Schema): AppInputs;
+export declare const displayData: Record<AppComponent['type'], {
+    name: string;
+    icon: any;
+}>;
+export declare function accessPropertyByPath<T>(object: T, path: string): T | undefined;
+export declare function fieldTypeToTsType(inputType: InputType): string;

package/components/apps/utils.js

@@ -0,0 +1,132 @@
+import { FlowService, ScriptService } from '../../gen';
+import { BarChart4, Binary, BoxSelect, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, TextCursorInput, Type, FolderInput } from 'lucide-svelte';
+export async function loadSchema(workspace, path, runType) {
+    if (runType === 'script') {
+        const script = await ScriptService.getScriptByPath({
+            workspace,
+            path
+        });
+        return script.schema;
+    }
+    else if (runType === 'flow') {
+        const flow = await FlowService.getFlowByPath({
+            workspace,
+            path
+        });
+        return flow.schema;
+    }
+    else {
+        const script = await ScriptService.getHubScriptByPath({
+            path
+        });
+        debugger;
+        return script.schema;
+    }
+}
+export function schemaToInputsSpec(schema) {
+    return Object.keys(schema.properties).reduce((accu, key) => {
+        const property = schema.properties[key];
+        accu[key] = {
+            type: 'static',
+            defaultValue: property.default,
+            value: undefined,
+            visible: true,
+            fieldType: property.type
+        };
+        return accu;
+    }, {});
+}
+export const displayData = {
+    displaycomponent: {
+        name: 'Result',
+        icon: Monitor
+    },
+    textcomponent: {
+        name: 'Text',
+        icon: Type
+    },
+    buttoncomponent: {
+        name: 'Button',
+        icon: Inspect
+    },
+    formcomponent: {
+        name: 'Form',
+        icon: FolderInput
+    },
+    piechartcomponent: {
+        name: 'Pie chart',
+        icon: PieChart
+    },
+    barchartcomponent: {
+        name: 'Bar chart',
+        icon: BarChart4
+    },
+    tablecomponent: {
+        name: 'Table',
+        icon: Table2
+    },
+    checkboxcomponent: {
+        name: 'Checkbox',
+        icon: BoxSelect
+    },
+    textinputcomponent: {
+        name: 'Text input',
+        icon: TextCursorInput
+    },
+    imagecomponent: {
+        name: 'Image',
+        icon: Image
+    },
+    inputcomponent: {
+        name: 'Input',
+        icon: FormInput
+    },
+    radiocomponent: {
+        name: 'Radio button',
+        icon: CircleDot
+    },
+    runformcomponent: {
+        name: 'Run form',
+        icon: Play
+    },
+    selectcomponent: {
+        name: 'Select',
+        icon: List
+    },
+    numberinputcomponent: {
+        name: 'Number input',
+        icon: Binary
+    }
+};
+export function accessPropertyByPath(object, path) {
+    // convert indexes to properties
+    path = path.replace(/\[(\w+)\]/g, '.$1');
+    // strip a leading dot
+    path = path.replace(/^\./, '');
+    let a = path.split('.');
+    for (let i = 0, depth = a.length; i < depth; ++i) {
+        let key = a[i];
+        if (object[key]) {
+            object = object[key];
+        }
+        else {
+            // Value not found
+            return;
+        }
+    }
+    return object;
+}
+export function fieldTypeToTsType(inputType) {
+    switch (inputType) {
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'boolean';
+        case 'object':
+            return 'object';
+        case 'array':
+            return 'array';
+        default:
+            return 'string';
+    }
+}

package/components/common/actionRow/ActionRow.svelte.d.ts

@@ -14,9 +14,9 @@ declare const __propDef: {
         right: {};
     };
 };
-export declare type ActionRowProps = typeof __propDef.props;
-export declare type ActionRowEvents = typeof __propDef.events;
-export declare type ActionRowSlots = typeof __propDef.slots;
+export type ActionRowProps = typeof __propDef.props;
+export type ActionRowEvents = typeof __propDef.events;
+export type ActionRowSlots = typeof __propDef.slots;
 export default class ActionRow extends SvelteComponentTyped<ActionRowProps, ActionRowEvents, ActionRowSlots> {
 }
 export {};