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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +75 -91
  2. package/dist/DCSourceConnection.svelte +8 -0
  3. package/dist/DCSourceConnection.svelte.d.ts +1 -0
  4. package/package.json +1 -1
  5. package/src/DCSourceConnection.svelte +8 -0
  6. package/src/index.ts +3 -0
package/README.md CHANGED
@@ -22,129 +22,71 @@ npm install @industream/flowmaker-flowbox-ui-components
22
22
 
23
23
  A dropdown component that fetches and displays source connections from the DataCatalog API, allowing users to select a data source for their FlowBox configuration.
24
24
 
25
- ##### Import
26
-
27
- ```typescript
28
- import { DCSourceConnection, type SourceConnection } from '@industream/flowmaker-flowbox-ui-components';
29
- ```
30
-
31
- ##### Props
32
-
33
- | Prop | Type | Default | Description |
34
- |------|------|---------|-------------|
35
- | `dcapiurl` | `string` | `''` | Base URL of the DataCatalog API |
36
- | `sourcetypefilter` | `string \| string[] \| null` | `null` | Filter connections by source type(s) |
37
- | `onsourceselect` | `(connection: SourceConnection) => void` | `null` | Callback when a connection is selected |
38
- | `onitemsloaded` | `(connections: SourceConnection[]) => void` | `null` | Callback when connections are loaded |
25
+ ### Quick Start
39
26
 
40
- ##### Exported Methods
41
-
42
- | Method | Signature | Description |
43
- |--------|-----------|-------------|
44
- | `select` | `(idOrConnection: string \| SourceConnection) => void` | Programmatically select a connection |
45
- | `getSelection` | `() => SourceConnection \| null` | Get the currently selected connection |
46
- | `getConnections` | `() => SourceConnection[]` | Get all loaded connections |
47
-
48
- ##### Types
49
-
50
- ```typescript
51
- interface SourceConnection {
52
- id: string;
53
- name: string;
54
- sourceType?: { name: string };
55
- [key: string]: any;
56
- }
57
- ```
58
-
59
- ##### Example: FlowBox Config Form
60
-
61
- This example shows how to integrate `DCSourceConnection` into a FlowBox configuration form using `@industream/flowmaker-flowbox-ui`.
27
+ ##### Environment Configuration with `jsonEnv`
62
28
 
63
29
  ```svelte
64
- <script lang="ts">
30
+ <script>
65
31
  import { flowMakerBridge } from '@industream/flowmaker-flowbox-ui';
66
- import { DCSourceConnection, type SourceConnection } from '@industream/flowmaker-flowbox-ui-components';
32
+ import { DCSourceConnection } from '@industream/flowmaker-flowbox-ui-components';
67
33
 
68
34
  const props = $props();
69
- const { context, values, validity, emit } = flowMakerBridge(props);
70
-
71
- // Get DC API URL from context (passed by FlowMaker)
72
- const dcApiUrl = $derived($context?.dcApiUrl || 'http://localhost:8002');
73
-
74
- // Optional: filter by source type
75
- const sourceTypeFilter = $derived($context?.sourceTypeFilter || null);
76
-
77
- // Reference to component for programmatic access
78
- let dcSourceConnection: ReturnType<typeof DCSourceConnection>;
79
-
80
- function handleSourceSelect(connection: SourceConnection) {
81
- // Store selected connection ID in values
82
- $values.sourceConnectionId = connection.id;
35
+ const { values, jsonEnv } = flowMakerBridge(props);
83
36
 
84
- // Optionally store more details
85
- $values.sourceConnectionName = connection.name;
86
- $values.sourceType = connection.sourceType?.name;
87
- }
37
+ // Get DataCatalog config from environment variables (reactive derived store)
38
+ const dcApiUrl = jsonEnv('datacatalog');
88
39
 
89
- function handleItemsLoaded(connections: SourceConnection[]) {
90
- // Restore previous selection if exists
91
- if ($values.sourceConnectionId) {
92
- dcSourceConnection.select($values.sourceConnectionId);
93
- }
94
- }
40
+ // Source type filter (can also come from context/values/environment)
41
+ const sourceTypeFilter = "MQTT";
95
42
  </script>
96
43
 
97
- <div class="config-form">
98
- <h4>Select Source Connection</h4>
44
+ <div class="dc-selector-container">
45
+ <div>Data Catalog Source Connection</div>
99
46
 
100
47
  <DCSourceConnection
101
- dcapiurl={dcApiUrl}
48
+ dcapiurl={$dcApiUrl?.url}
102
49
  sourcetypefilter={sourceTypeFilter}
103
- onsourceselect={handleSourceSelect}
104
- onitemsloaded={handleItemsLoaded}
105
- bind:this={dcSourceConnection}
50
+ initialselection={$values?.sourceConnectionId ?? ''}
51
+ onsourceselect={(conn) => $values.sourceConnectionId = conn.id}
106
52
  />
107
53
 
108
54
  {#if $values.sourceConnectionId}
109
55
  <div class="selection-info">
110
- <p><strong>Selected:</strong> {$values.sourceConnectionName}</p>
111
- <p><strong>Type:</strong> {$values.sourceType}</p>
56
+ <h5>Selected Connection</h5>
57
+ <p><strong>ID:</strong> {$values.sourceConnectionId}</p>
112
58
  </div>
113
59
  {/if}
114
60
  </div>
115
61
 
116
- <style>
117
- .config-form {
118
- display: flex;
119
- flex-direction: column;
120
- gap: 1rem;
121
- }
122
-
123
- .selection-info {
124
- padding: 1rem;
125
- background: var(--cds-layer-01, #393939);
126
- border-radius: 4px;
127
- }
128
- </style>
129
62
  ```
130
63
 
131
- ##### Context Configuration
132
64
 
133
- When registering your FlowBox, pass the DataCatalog API URL via context:
65
+
66
+ 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.
67
+
68
+ ```svelte
69
+ <script>
70
+ const { jsonEnv } = flowMakerBridge(props);
71
+
72
+ // Returns a derived store - use with $ prefix
73
+ const dcConfig = jsonEnv('datacatalog');
74
+
75
+ // Reactively access parsed values
76
+ const apiUrl = $derived($dcConfig?.url ?? null);
77
+ </script>
78
+ ```
79
+
80
+ The environment variable `environment/datacatalog` should contain a JSON string:
134
81
 
135
82
  ```json
136
83
  {
137
- "context": {
138
- "dcApiUrl": "https://datacatalog.example.com/api",
139
- "sourceTypeFilter": ["Mqtt", "DataBridge"]
140
- }
84
+ "url": "https://datacatalog.example.com/api",
141
85
  }
142
86
  ```
143
87
 
144
88
  ##### Filtering by Source Type
145
89
 
146
- Filter to show only specific source types:
147
-
148
90
  ```svelte
149
91
  <!-- Single type -->
150
92
  <DCSourceConnection
@@ -177,3 +119,45 @@ const selected = dcSourceConnection.getSelection();
177
119
  const all = dcSourceConnection.getConnections();
178
120
  ```
179
121
 
122
+ ---
123
+
124
+ ## API Reference
125
+
126
+ ### DCSourceConnection
127
+
128
+ ##### Import
129
+
130
+ ```typescript
131
+ import { DCSourceConnection, type SourceConnection } from '@industream/flowmaker-flowbox-ui-components';
132
+ ```
133
+
134
+ ##### Props
135
+
136
+ | Prop | Type | Default | Description |
137
+ |------|------|---------|-------------|
138
+ | `dcapiurl` | `string` | `''` | Base URL of the DataCatalog API |
139
+ | `sourcetypefilter` | `string \| string[] \| null` | `null` | Filter connections by source type(s) |
140
+ | `initialselection` | `string \| null` | `null` | ID to auto-select when items load |
141
+ | `onsourceselect` | `(connection: SourceConnection) => void` | `null` | Callback when a connection is selected |
142
+ | `onitemsloaded` | `(connections: SourceConnection[]) => void` | `null` | Callback when connections are loaded |
143
+
144
+ The `initialselection` prop automatically restores the selection when items are loaded - no need for `onitemsloaded` handler.
145
+
146
+ ##### Exported Methods
147
+
148
+ | Method | Signature | Description |
149
+ |--------|-----------|-------------|
150
+ | `select` | `(idOrConnection: string \| SourceConnection) => void` | Programmatically select a connection |
151
+ | `getSelection` | `() => SourceConnection \| null` | Get the currently selected connection |
152
+ | `getConnections` | `() => SourceConnection[]` | Get all loaded connections |
153
+
154
+ ##### Types
155
+
156
+ ```typescript
157
+ interface SourceConnection {
158
+ id: string;
159
+ name: string;
160
+ sourceType?: { name: string };
161
+ [key: string]: any;
162
+ }
163
+ ```
package/dist/DCSourceConnection.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  interface Props {
12
12
  dcapiurl?: string;
13
13
  sourcetypefilter?: string | string[] | null;
14
+ initialselection?: string | null;
14
15
  onsourceselect?: (connection: SourceConnection) => void;
15
16
  onitemsloaded?: (connections: SourceConnection[]) => void;
16
17
  }
@@ -18,6 +19,7 @@
18
19
  let {
19
20
  dcapiurl = '',
20
21
  sourcetypefilter = null,
22
+ initialselection = null,
21
23
  onsourceselect = null,
22
24
  onitemsloaded = null
23
25
  }: Props = $props();
@@ -62,6 +64,12 @@
62
64
  const result = await client.sourceConnections.get(filters);
63
65
  sourceConnections = result.items || [];
64
66
  console.log('Loaded source connections:', sourceConnections);
67
+
68
+ // Auto-select initial selection if provided
69
+ if (initialselection) {
70
+ select(initialselection);
71
+ }
72
+
65
73
  onitemsloaded?.(sourceConnections);
66
74
  } catch (e) {
67
75
  console.error('Failed to load source connections:', e);
package/dist/DCSourceConnection.svelte.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface SourceConnection {
9
9
  interface Props {
10
10
  dcapiurl?: string;
11
11
  sourcetypefilter?: string | string[] | null;
12
+ initialselection?: string | null;
12
13
  onsourceselect?: (connection: SourceConnection) => void;
13
14
  onitemsloaded?: (connections: SourceConnection[]) => void;
14
15
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@industream/flowmaker-flowbox-ui-components",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "Reusable Svelte components for FlowMaker FlowBox UI",
5
5
  "type": "module",
6
6
  "svelte": "./dist/index.js",
package/src/DCSourceConnection.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  interface Props {
12
12
  dcapiurl?: string;
13
13
  sourcetypefilter?: string | string[] | null;
14
+ initialselection?: string | null;
14
15
  onsourceselect?: (connection: SourceConnection) => void;
15
16
  onitemsloaded?: (connections: SourceConnection[]) => void;
16
17
  }
@@ -18,6 +19,7 @@
18
19
  let {
19
20
  dcapiurl = '',
20
21
  sourcetypefilter = null,
22
+ initialselection = null,
21
23
  onsourceselect = null,
22
24
  onitemsloaded = null
23
25
  }: Props = $props();
@@ -62,6 +64,12 @@
62
64
  const result = await client.sourceConnections.get(filters);
63
65
  sourceConnections = result.items || [];
64
66
  console.log('Loaded source connections:', sourceConnections);
67
+
68
+ // Auto-select initial selection if provided
69
+ if (initialselection) {
70
+ select(initialselection);
71
+ }
72
+
65
73
  onitemsloaded?.(sourceConnections);
66
74
  } catch (e) {
67
75
  console.error('Failed to load source connections:', e);
package/src/index.ts CHANGED
@@ -1,2 +1,5 @@
1
1
  export { default as DCSourceConnection } from './DCSourceConnection.svelte';
2
2
  export type { SourceConnection } from './DCSourceConnection.svelte';
3
+
4
+
5
+