@industream/flowmaker-flowbox-ui-components 0.0.2 → 0.0.4

package/README.md

@@ -22,129 +22,85 @@ npm install @industream/flowmaker-flowbox-ui-components
 
 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 |
+### Quick Start
 
-##### Types
+```svelte
+    <script>
+        let conn = $state('');
+    </script>
+    
+    Selection: {{ conn }}
 
-```typescript
-interface SourceConnection {
-    id: string;
-    name: string;
-    sourceType?: { name: string };
-    [key: string]: any;
-}
+    <DCSourceConnection
+        dcapiurl="http://localhost:8002"
+        sourcetypefilter="DataBridge"
+        onsourceselect={(newValue) => conn = newvalue}  
+    />
 ```
 
-##### Example: FlowBox Config Form
-
-This example shows how to integrate `DCSourceConnection` into a FlowBox configuration form using `@industream/flowmaker-flowbox-ui`.
+##### Environment Configuration with `jsonEnv`
 
 ```svelte
-<script lang="ts">
+<script>
     import { flowMakerBridge } from '@industream/flowmaker-flowbox-ui';
-    import { DCSourceConnection, type SourceConnection } from '@industream/flowmaker-flowbox-ui-components';
+    import { DCSourceConnection } 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);
+    const { values, jsonEnv } = flowMakerBridge(props);
 
-    // Reference to component for programmatic access
-    let dcSourceConnection: ReturnType<typeof DCSourceConnection>;
+    // Get DataCatalog config from environment variables (reactive derived store)
+    const dcApiUrl = jsonEnv('datacatalog');
 
-    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);
-        }
-    }
+    // Source type filter (can also come from context/values/environment)
+    const sourceTypeFilter = "MQTT";
 </script>
 
-<div class="config-form">
-    <h4>Select Source Connection</h4>
+<div class="dc-selector-container">
+    <div>Data Catalog Source Connection</div>
 
     <DCSourceConnection
-        dcapiurl={dcApiUrl}
+        dcapiurl={$dcApiUrl?.url}
         sourcetypefilter={sourceTypeFilter}
-        onsourceselect={handleSourceSelect}
-        onitemsloaded={handleItemsLoaded}
-        bind:this={dcSourceConnection}
+        initialselection={$values?.sourceConnectionId ?? ''}
+        onsourceselect={(conn) => $values.sourceConnectionId = conn.id}
     />
 
     {#if $values.sourceConnectionId}
         <div class="selection-info">
-            <p><strong>Selected:</strong> {$values.sourceConnectionName}</p>
-            <p><strong>Type:</strong> {$values.sourceType}</p>
+            <h5>Selected Connection</h5>
+            <p><strong>ID:</strong> {$values.sourceConnectionId}</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:
+
+
+The `jsonEnv(key)` helper from `flowMakerBridge` parses JSON environment variables from `context.environmentVars["environment/{key}"]`. It returns a reactive derived store that updates when context changes.
+
+```svelte
+<script>
+    const { jsonEnv } = flowMakerBridge(props);
+
+    // Returns a derived store - use with $ prefix
+    const dcConfig = jsonEnv('datacatalog');
+
+    // Reactively access parsed values
+    const apiUrl = $derived($dcConfig?.url ?? null);
+</script>
+```
+
+The environment variable `environment/datacatalog` should contain a JSON string:
 
 ```json
 {
-    "context": {
-        "dcApiUrl": "https://datacatalog.example.com/api",
-        "sourceTypeFilter": ["Mqtt", "DataBridge"]
-    }
+    "url": "https://datacatalog.example.com/api",
 }
 ```
 
 ##### Filtering by Source Type
 
-Filter to show only specific source types:
-
 ```svelte
 <!-- Single type -->
 <DCSourceConnection
@@ -177,3 +133,45 @@ const selected = dcSourceConnection.getSelection();
 const all = dcSourceConnection.getConnections();
 ```
 
+---
+
+## API Reference
+
+### DCSourceConnection
+
+##### 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) |
+| `initialselection` | `string \| null` | `null` | ID to auto-select when items load |
+| `onsourceselect` | `(connection: SourceConnection) => void` | `null` | Callback when a connection is selected |
+| `onitemsloaded` | `(connections: SourceConnection[]) => void` | `null` | Callback when connections are loaded |
+
+The `initialselection` prop automatically restores the selection when items are loaded - no need for `onitemsloaded` handler.
+
+##### 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;
+}
+```

package/dist/DCSourceConnection.svelte

@@ -11,6 +11,7 @@
     interface Props {
         dcapiurl?: string;
         sourcetypefilter?: string | string[] | null;
+        initialselection?: string | null;
         onsourceselect?: (connection: SourceConnection) => void;
         onitemsloaded?: (connections: SourceConnection[]) => void;
     }
@@ -18,6 +19,7 @@
     let {
         dcapiurl = '',
         sourcetypefilter = null,
+        initialselection = null,
         onsourceselect = null,
         onitemsloaded = null
     }: Props = $props();
@@ -62,6 +64,12 @@
             const result = await client.sourceConnections.get(filters);
             sourceConnections = result.items || [];
             console.log('Loaded source connections:', sourceConnections);
+
+            // Auto-select initial selection if provided
+            if (initialselection) {
+                select(initialselection);
+            }
+
             onitemsloaded?.(sourceConnections);
         } catch (e) {
             console.error('Failed to load source connections:', e);

package/dist/DCSourceConnection.svelte.d.ts

@@ -9,6 +9,7 @@ export interface SourceConnection {
 interface Props {
     dcapiurl?: string;
     sourcetypefilter?: string | string[] | null;
+    initialselection?: string | null;
     onsourceselect?: (connection: SourceConnection) => void;
     onitemsloaded?: (connections: SourceConnection[]) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industream/flowmaker-flowbox-ui-components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Reusable Svelte components for FlowMaker FlowBox UI",
   "type": "module",
   "svelte": "./dist/index.js",

package/src/DCSourceConnection.svelte

@@ -11,6 +11,7 @@
     interface Props {
         dcapiurl?: string;
         sourcetypefilter?: string | string[] | null;
+        initialselection?: string | null;
         onsourceselect?: (connection: SourceConnection) => void;
         onitemsloaded?: (connections: SourceConnection[]) => void;
     }
@@ -18,6 +19,7 @@
     let {
         dcapiurl = '',
         sourcetypefilter = null,
+        initialselection = null,
         onsourceselect = null,
         onitemsloaded = null
     }: Props = $props();
@@ -62,6 +64,12 @@
             const result = await client.sourceConnections.get(filters);
             sourceConnections = result.items || [];
             console.log('Loaded source connections:', sourceConnections);
+
+            // Auto-select initial selection if provided
+            if (initialselection) {
+                select(initialselection);
+            }
+
             onitemsloaded?.(sourceConnections);
         } catch (e) {
             console.error('Failed to load source connections:', e);

package/src/index.ts

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