@industream/flowmaker-flowbox-ui-components 0.0.1

package/README.md

@@ -0,0 +1,179 @@
+# @industream/flowmaker-flowbox-ui-components
+
+Reusable Svelte 5 components for FlowMaker FlowBox configuration UIs.
+
+## Installation
+
+```bash
+npm install @industream/flowmaker-flowbox-ui-components
+```
+
+**Peer dependencies:**
+- `svelte@^5.0.0`
+- `@industream/datacatalog-client@^1.0.0-preview.1`
+
+---
+
+## Components
+
+### DataCatalog Integration
+
+#### DCSourceConnection
+
+A dropdown component that fetches and displays source connections from the DataCatalog API, allowing users to select a data source for their FlowBox configuration.
+
+##### Import
+
+```typescript
+import { DCSourceConnection, type SourceConnection } from '@industream/flowmaker-flowbox-ui-components';
+```
+
+##### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dcapiurl` | `string` | `''` | Base URL of the DataCatalog API |
+| `sourcetypefilter` | `string \| string[] \| null` | `null` | Filter connections by source type(s) |
+| `onsourceselect` | `(connection: SourceConnection) => void` | `null` | Callback when a connection is selected |
+| `onitemsloaded` | `(connections: SourceConnection[]) => void` | `null` | Callback when connections are loaded |
+
+##### Exported Methods
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| `select` | `(idOrConnection: string \| SourceConnection) => void` | Programmatically select a connection |
+| `getSelection` | `() => SourceConnection \| null` | Get the currently selected connection |
+| `getConnections` | `() => SourceConnection[]` | Get all loaded connections |
+
+##### Types
+
+```typescript
+interface SourceConnection {
+    id: string;
+    name: string;
+    sourceType?: { name: string };
+    [key: string]: any;
+}
+```
+
+##### Example: FlowBox Config Form
+
+This example shows how to integrate `DCSourceConnection` into a FlowBox configuration form using `@industream/flowmaker-flowbox-ui`.
+
+```svelte
+<script lang="ts">
+    import { flowMakerBridge } from '@industream/flowmaker-flowbox-ui';
+    import { DCSourceConnection, type SourceConnection } from '@industream/flowmaker-flowbox-ui-components';
+
+    const props = $props();
+    const { context, values, validity, emit } = flowMakerBridge(props);
+
+    // Get DC API URL from context (passed by FlowMaker)
+    const dcApiUrl = $derived($context?.dcApiUrl || 'http://localhost:8002');
+
+    // Optional: filter by source type
+    const sourceTypeFilter = $derived($context?.sourceTypeFilter || null);
+
+    // Reference to component for programmatic access
+    let dcSourceConnection: ReturnType<typeof DCSourceConnection>;
+
+    function handleSourceSelect(connection: SourceConnection) {
+        // Store selected connection ID in values
+        $values.sourceConnectionId = connection.id;
+
+        // Optionally store more details
+        $values.sourceConnectionName = connection.name;
+        $values.sourceType = connection.sourceType?.name;
+    }
+
+    function handleItemsLoaded(connections: SourceConnection[]) {
+        // Restore previous selection if exists
+        if ($values.sourceConnectionId) {
+            dcSourceConnection.select($values.sourceConnectionId);
+        }
+    }
+</script>
+
+<div class="config-form">
+    <h4>Select Source Connection</h4>
+
+    <DCSourceConnection
+        dcapiurl={dcApiUrl}
+        sourcetypefilter={sourceTypeFilter}
+        onsourceselect={handleSourceSelect}
+        onitemsloaded={handleItemsLoaded}
+        bind:this={dcSourceConnection}
+    />
+
+    {#if $values.sourceConnectionId}
+        <div class="selection-info">
+            <p><strong>Selected:</strong> {$values.sourceConnectionName}</p>
+            <p><strong>Type:</strong> {$values.sourceType}</p>
+        </div>
+    {/if}
+</div>
+
+<style>
+    .config-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .selection-info {
+        padding: 1rem;
+        background: var(--cds-layer-01, #393939);
+        border-radius: 4px;
+    }
+</style>
+```
+
+##### Context Configuration
+
+When registering your FlowBox, pass the DataCatalog API URL via context:
+
+```json
+{
+    "context": {
+        "dcApiUrl": "https://datacatalog.example.com/api",
+        "sourceTypeFilter": ["Mqtt", "DataBridge"]
+    }
+}
+```
+
+##### Filtering by Source Type
+
+Filter to show only specific source types:
+
+```svelte
+<!-- Single type -->
+<DCSourceConnection
+    dcapiurl={dcApiUrl}
+    sourcetypefilter="DataBridge"
+    onsourceselect={handleSelect}
+/>
+
+<!-- Multiple types -->
+<DCSourceConnection
+    dcapiurl={dcApiUrl}
+    sourcetypefilter={["Relational", "DataBridge", "Mqtt"]}
+    onsourceselect={handleSelect}
+/>
+```
+
+##### Programmatic Selection
+
+```typescript
+// Select by ID
+dcSourceConnection.select('xxxx-guid-1234-4567');
+
+// Select by connection object
+dcSourceConnection.select(connectionObject);
+
+// Get current selection
+const selected = dcSourceConnection.getSelection();
+
+// Get all loaded connections
+const all = dcSourceConnection.getConnections();
+```
+

package/dist/DCSourceConnection.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import { DataCatalogClient } from '@industream/datacatalog-client';
+
+    export interface SourceConnection {
+        id: string;
+        name: string;
+        sourceType?: { name: string };
+        [key: string]: any;
+    }
+
+    interface Props {
+        dcapiurl?: string;
+        sourcetypefilter?: string | string[] | null;
+        onsourceselect?: (connection: SourceConnection) => void;
+        onitemsloaded?: (connections: SourceConnection[]) => void;
+    }
+
+    let {
+        dcapiurl = '',
+        sourcetypefilter = null,
+        onsourceselect = null,
+        onitemsloaded = null
+    }: Props = $props();
+
+    let sourceConnections = $state<SourceConnection[]>([]);
+    let selectedValue = $state('');
+    let loading = $state(true);
+    let error = $state<string | null>(null);
+    let dropdownRef = $state<HTMLElement | null>(null);
+
+    // Load source connections when component mounts or dcapiurl changes
+    $effect(() => {
+        if (dcapiurl && sourcetypefilter !== null) {
+            loadSourceConnections();
+        }
+    });
+
+    // Add event listener for Carbon's custom event
+    $effect(() => {
+        if (dropdownRef) {
+            dropdownRef.addEventListener('cds-dropdown-selected', handleSelect);
+            return () => {
+                dropdownRef.removeEventListener('cds-dropdown-selected', handleSelect);
+            };
+        }
+    });
+
+    async function loadSourceConnections() {
+        loading = true;
+        error = null;
+
+        try {
+            const client = new DataCatalogClient({ baseUrl: dcapiurl });
+            const filters = {};
+
+            if (sourcetypefilter && sourcetypefilter.length > 0) {
+                filters.sourceTypes = Array.isArray(sourcetypefilter)
+                    ? sourcetypefilter
+                    : [sourcetypefilter];
+            }
+
+            const result = await client.sourceConnections.get(filters);
+            sourceConnections = result.items || [];
+            console.log('Loaded source connections:', sourceConnections);
+            onitemsloaded?.(sourceConnections);
+        } catch (e) {
+            console.error('Failed to load source connections:', e);
+            error = e.message || 'Failed to load source connections';
+            sourceConnections = [];
+        } finally {
+            loading = false;
+        }
+    }
+
+    function handleSelect(e: CustomEvent) {
+        const selectedId = e.detail?.item?.value || e.target?.value;
+        console.log('Dropdown selected event:', e, 'selectedId:', selectedId);
+        selectedValue = selectedId;
+
+        if (selectedId && onsourceselect) {
+            const selected = sourceConnections.find(sc => sc.id === selectedId);
+            console.log('Found selected:', selected);
+            if (selected) {
+                onsourceselect(selected);
+            }
+        }
+    }
+
+    // Exposed method to programmatically select a source connection
+    export function select(idOrConnection: string | SourceConnection) {
+        const id = typeof idOrConnection === 'string' ? idOrConnection : idOrConnection?.id;
+        if (!id) return;
+
+        const connection = sourceConnections.find(sc => sc.id === id);
+        if (connection) {
+            selectedValue = id;
+            if (dropdownRef) {
+                dropdownRef.value = id;
+            }
+            if (onsourceselect) {
+                onsourceselect(connection);
+            }
+        }
+    }
+
+    // Exposed method to get current selection
+    export function getSelection(): SourceConnection | null {
+        return sourceConnections.find(sc => sc.id === selectedValue) || null;
+    }
+
+    // Exposed method to get all loaded connections
+    export function getConnections(): SourceConnection[] {
+        return sourceConnections;
+    }
+</script>
+
+{#if loading}
+    <cds-dropdown label="Source Connection" disabled>
+        <cds-dropdown-item value="">Loading...</cds-dropdown-item>
+    </cds-dropdown>
+{:else if error}
+    <cds-dropdown label="Source Connection" invalid invalid-text={error}>
+        <cds-dropdown-item value="">Error loading connections</cds-dropdown-item>
+    </cds-dropdown>
+{:else}
+    <cds-dropdown
+        bind:this={dropdownRef}
+        label="Select a source connection"
+        value={selectedValue}
+    >
+        {#each sourceConnections as conn}
+            <cds-dropdown-item value={conn.id}>
+                {conn.name} [{conn.sourceType?.name || 'Unknown'}]
+            </cds-dropdown-item>
+        {/each}
+    </cds-dropdown>
+{/if}
+
+<style>
+    /* Component styles */
+</style>

package/dist/DCSourceConnection.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface SourceConnection {
+    id: string;
+    name: string;
+    sourceType?: {
+        name: string;
+    };
+    [key: string]: any;
+}
+interface Props {
+    dcapiurl?: string;
+    sourcetypefilter?: string | string[] | null;
+    onsourceselect?: (connection: SourceConnection) => void;
+    onitemsloaded?: (connections: SourceConnection[]) => void;
+}
+declare const DCSourceConnection: import("svelte").Component<Props, {
+    select: (idOrConnection: string | SourceConnection) => void;
+    getSelection: () => SourceConnection | null;
+    getConnections: () => SourceConnection[];
+}, "">;
+type DCSourceConnection = ReturnType<typeof DCSourceConnection>;
+export default DCSourceConnection;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DCSourceConnection } from './DCSourceConnection.svelte';
+export type { SourceConnection } from './DCSourceConnection.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as DCSourceConnection } from './DCSourceConnection.svelte';

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@industream/flowmaker-flowbox-ui-components",
+  "version": "0.0.1",
+  "description": "Reusable Svelte components for FlowMaker FlowBox UI",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./DCSourceConnection.svelte": {
+      "types": "./dist/DCSourceConnection.svelte.d.ts",
+      "svelte": "./dist/DCSourceConnection.svelte",
+      "import": "./dist/DCSourceConnection.svelte"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "svelte-package --input src"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@industream/datacatalog-client": "^1.0.0-preview.1"
+  },
+  "devDependencies": {
+    "svelte": "^5.0.0",
+    "vite": "^6.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/DCSourceConnection.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import { DataCatalogClient } from '@industream/datacatalog-client';
+
+    export interface SourceConnection {
+        id: string;
+        name: string;
+        sourceType?: { name: string };
+        [key: string]: any;
+    }
+
+    interface Props {
+        dcapiurl?: string;
+        sourcetypefilter?: string | string[] | null;
+        onsourceselect?: (connection: SourceConnection) => void;
+        onitemsloaded?: (connections: SourceConnection[]) => void;
+    }
+
+    let {
+        dcapiurl = '',
+        sourcetypefilter = null,
+        onsourceselect = null,
+        onitemsloaded = null
+    }: Props = $props();
+
+    let sourceConnections = $state<SourceConnection[]>([]);
+    let selectedValue = $state('');
+    let loading = $state(true);
+    let error = $state<string | null>(null);
+    let dropdownRef = $state<HTMLElement | null>(null);
+
+    // Load source connections when component mounts or dcapiurl changes
+    $effect(() => {
+        if (dcapiurl && sourcetypefilter !== null) {
+            loadSourceConnections();
+        }
+    });
+
+    // Add event listener for Carbon's custom event
+    $effect(() => {
+        if (dropdownRef) {
+            dropdownRef.addEventListener('cds-dropdown-selected', handleSelect);
+            return () => {
+                dropdownRef.removeEventListener('cds-dropdown-selected', handleSelect);
+            };
+        }
+    });
+
+    async function loadSourceConnections() {
+        loading = true;
+        error = null;
+
+        try {
+            const client = new DataCatalogClient({ baseUrl: dcapiurl });
+            const filters = {};
+
+            if (sourcetypefilter && sourcetypefilter.length > 0) {
+                filters.sourceTypes = Array.isArray(sourcetypefilter)
+                    ? sourcetypefilter
+                    : [sourcetypefilter];
+            }
+
+            const result = await client.sourceConnections.get(filters);
+            sourceConnections = result.items || [];
+            console.log('Loaded source connections:', sourceConnections);
+            onitemsloaded?.(sourceConnections);
+        } catch (e) {
+            console.error('Failed to load source connections:', e);
+            error = e.message || 'Failed to load source connections';
+            sourceConnections = [];
+        } finally {
+            loading = false;
+        }
+    }
+
+    function handleSelect(e: CustomEvent) {
+        const selectedId = e.detail?.item?.value || e.target?.value;
+        console.log('Dropdown selected event:', e, 'selectedId:', selectedId);
+        selectedValue = selectedId;
+
+        if (selectedId && onsourceselect) {
+            const selected = sourceConnections.find(sc => sc.id === selectedId);
+            console.log('Found selected:', selected);
+            if (selected) {
+                onsourceselect(selected);
+            }
+        }
+    }
+
+    // Exposed method to programmatically select a source connection
+    export function select(idOrConnection: string | SourceConnection) {
+        const id = typeof idOrConnection === 'string' ? idOrConnection : idOrConnection?.id;
+        if (!id) return;
+
+        const connection = sourceConnections.find(sc => sc.id === id);
+        if (connection) {
+            selectedValue = id;
+            if (dropdownRef) {
+                dropdownRef.value = id;
+            }
+            if (onsourceselect) {
+                onsourceselect(connection);
+            }
+        }
+    }
+
+    // Exposed method to get current selection
+    export function getSelection(): SourceConnection | null {
+        return sourceConnections.find(sc => sc.id === selectedValue) || null;
+    }
+
+    // Exposed method to get all loaded connections
+    export function getConnections(): SourceConnection[] {
+        return sourceConnections;
+    }
+</script>
+
+{#if loading}
+    <cds-dropdown label="Source Connection" disabled>
+        <cds-dropdown-item value="">Loading...</cds-dropdown-item>
+    </cds-dropdown>
+{:else if error}
+    <cds-dropdown label="Source Connection" invalid invalid-text={error}>
+        <cds-dropdown-item value="">Error loading connections</cds-dropdown-item>
+    </cds-dropdown>
+{:else}
+    <cds-dropdown
+        bind:this={dropdownRef}
+        label="Select a source connection"
+        value={selectedValue}
+    >
+        {#each sourceConnections as conn}
+            <cds-dropdown-item value={conn.id}>
+                {conn.name} [{conn.sourceType?.name || 'Unknown'}]
+            </cds-dropdown-item>
+        {/each}
+    </cds-dropdown>
+{/if}
+
+<style>
+    /* Component styles */
+</style>

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as DCSourceConnection } from './DCSourceConnection.svelte';
+export type { SourceConnection } from './DCSourceConnection.svelte';