@teamflojo/floimg-studio-ui 0.2.2 → 0.2.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.
- package/README.md +117 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# @teamflojo/floimg-studio-ui
|
|
2
|
+
|
|
3
|
+
React components for building visual workflow editors with FloImg.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @teamflojo/floimg-studio-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Peer Dependencies
|
|
12
|
+
|
|
13
|
+
This package requires the following peer dependencies:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install react react-dom @tanstack/react-query reactflow zustand
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Quick Start
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { App } from "@teamflojo/floimg-studio-ui";
|
|
23
|
+
import "@teamflojo/floimg-studio-ui/styles.css";
|
|
24
|
+
|
|
25
|
+
function MyStudio() {
|
|
26
|
+
return <App />;
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Individual Components
|
|
31
|
+
|
|
32
|
+
For custom compositions, import individual components:
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import {
|
|
36
|
+
WorkflowEditor,
|
|
37
|
+
NodePalette,
|
|
38
|
+
NodeInspector,
|
|
39
|
+
Toolbar,
|
|
40
|
+
Gallery,
|
|
41
|
+
} from "@teamflojo/floimg-studio-ui";
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Available Components
|
|
45
|
+
|
|
46
|
+
| Component | Description |
|
|
47
|
+
| ----------------- | ------------------------------------ |
|
|
48
|
+
| `App` | Complete FloImg Studio application |
|
|
49
|
+
| `WorkflowEditor` | Main canvas with React Flow |
|
|
50
|
+
| `NodePalette` | Draggable node palette |
|
|
51
|
+
| `NodeInspector` | Parameter editing panel |
|
|
52
|
+
| `Toolbar` | Top toolbar with actions |
|
|
53
|
+
| `Gallery` | Generated images gallery |
|
|
54
|
+
| `TemplateGallery` | Workflow template browser |
|
|
55
|
+
| `WorkflowLibrary` | Saved workflows panel |
|
|
56
|
+
| `AISettings` | AI provider configuration |
|
|
57
|
+
| `AIChat` | Natural language workflow generation |
|
|
58
|
+
| `UploadGallery` | Uploaded images browser |
|
|
59
|
+
|
|
60
|
+
### Toolbar Props
|
|
61
|
+
|
|
62
|
+
The `Toolbar` component accepts props for customization:
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { Toolbar, type ToolbarProps } from "@teamflojo/floimg-studio-ui";
|
|
66
|
+
|
|
67
|
+
<Toolbar
|
|
68
|
+
brandingSlot={<MyLogo />}
|
|
69
|
+
beforeActionsSlot={<CustomButton />}
|
|
70
|
+
afterActionsSlot={<UserMenu />}
|
|
71
|
+
hideAttribution={true}
|
|
72
|
+
hideWorkflowLibrary={true}
|
|
73
|
+
/>;
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## State Management
|
|
77
|
+
|
|
78
|
+
Access workflow state with Zustand:
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { useWorkflowStore } from "@teamflojo/floimg-studio-ui";
|
|
82
|
+
|
|
83
|
+
function MyComponent() {
|
|
84
|
+
const { nodes, edges, addNode } = useWorkflowStore();
|
|
85
|
+
// ...
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Templates
|
|
90
|
+
|
|
91
|
+
Access built-in workflow templates:
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
import {
|
|
95
|
+
templates,
|
|
96
|
+
getCategories,
|
|
97
|
+
getTemplatesByCategory,
|
|
98
|
+
searchTemplates,
|
|
99
|
+
} from "@teamflojo/floimg-studio-ui";
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Self-Hosting
|
|
103
|
+
|
|
104
|
+
For a complete self-hosted solution, use the Docker image instead:
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
docker run -d -p 5100:5100 ghcr.io/teamflojo/floimg-studio
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Related Packages
|
|
111
|
+
|
|
112
|
+
- [@teamflojo/floimg](https://www.npmjs.com/package/@teamflojo/floimg) — Core engine
|
|
113
|
+
- [@teamflojo/floimg-studio-shared](https://www.npmjs.com/package/@teamflojo/floimg-studio-shared) — Shared types
|
|
114
|
+
|
|
115
|
+
## License
|
|
116
|
+
|
|
117
|
+
MIT
|