@aaqu/fromcubes-portal-react 0.1.0-alpha.10 → 0.1.0-alpha.12

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 (3) hide show
  1. package/README.md +6 -2
  2. package/examples/sensor-portal-flow.json +27 -1
  3. package/package.json +9 -1
package/README.md CHANGED
@@ -1,7 +1,11 @@
1
1
  # @aaqu/fromcubes-portal-react
2
2
 
3
+ > **⚠️ Alpha Module** — This project is in early development. Expect many breaking changes. Please test on a clean Node-RED instance.
4
+
3
5
  React portal node for Node-RED. Server-side JSX transpilation via esbuild. Tailwind CSS 4. Zero runtime compilation in browser.
4
6
 
7
+ [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/L4L01UOFRG)
8
+
5
9
  ## How it works
6
10
 
7
11
  ```
@@ -64,10 +68,10 @@ Dependencies install automatically. No build step needed.
64
68
  | Head HTML | Extra `<head>` tags (CDN, fonts, CSS) |
65
69
  | Code Editor | Monaco with JSX — must define `<App />` |
66
70
 
67
- ### fc-component-library (config node)
71
+ ### fc-portal-component (config node)
68
72
 
69
73
  Shared component store. Each component has name, code, input/output field definitions.
70
- Components are auto-injected into every portal-react page at transpile time.
74
+ Referenced components (with transitive dependencies) are selectively injected at transpile time.
71
75
 
72
76
  ## Editor features
73
77
 
package/examples/sensor-portal-flow.json CHANGED
@@ -42,6 +42,32 @@
42
42
  "y": 280,
43
43
  "wires": []
44
44
  },
45
+ {
46
+ "id": "fc-button-comp",
47
+ "type": "fc-portal-component",
48
+ "z": "fc-demo-flow",
49
+ "name": "Button",
50
+ "compName": "Button",
51
+ "compCode": "function Button({ onClick, children, variant = 'primary', className = '' }) {\n const base = 'px-4 py-2 rounded-lg font-medium transition-colors';\n const variants = {\n primary: 'bg-blue-600 text-white hover:bg-blue-500',\n secondary: 'bg-zinc-700 text-zinc-200 hover:bg-zinc-600',\n danger: 'bg-red-600 text-white hover:bg-red-500'\n };\n return (\n <button\n className={`${base} ${variants[variant] || variants.primary} ${className}`}\n onClick={onClick}\n >{children}</button>\n );\n}",
52
+ "compInputs": "onClick,children,variant,className",
53
+ "compOutputs": "",
54
+ "x": 160,
55
+ "y": 340,
56
+ "wires": []
57
+ },
58
+ {
59
+ "id": "fc-valuebadge-comp",
60
+ "type": "fc-portal-component",
61
+ "z": "fc-demo-flow",
62
+ "name": "ValueBadge",
63
+ "compName": "ValueBadge",
64
+ "compCode": "function ValueBadge({ label, value, className = '' }) {\n if (value == null) return null;\n return (\n <span className={`text-zinc-600 text-xs ${className}`}>\n {label && <>{label}: </>}{value}\n </span>\n );\n}",
65
+ "compInputs": "label,value,className",
66
+ "compOutputs": "",
67
+ "x": 160,
68
+ "y": 400,
69
+ "wires": []
70
+ },
45
71
  {
46
72
  "id": "fc-portal",
47
73
  "type": "portal-react",
@@ -52,7 +78,7 @@
52
78
  "customHead": "",
53
79
  "inputSchema": "[{\"name\":\"temp\",\"type\":\"number\"},{\"name\":\"humidity\",\"type\":\"number\"},{\"name\":\"pressure\",\"type\":\"number\"},{\"name\":\"ts\",\"type\":\"number\"}]",
54
80
  "outputSchema": "[{\"name\":\"action\",\"type\":\"string\"}]",
55
- "componentCode": "function App() {\n const { data, send } = useNodeRed();\n const s = data || { temp: 0, humidity: 0, pressure: 0 };\n\n return (\n <div className=\"min-h-screen bg-zinc-950 flex flex-col items-center justify-center p-8\">\n <h1 className=\"text-2xl font-light text-cyan-400 mb-10\">Sensor Portal</h1>\n <div className=\"flex gap-10 flex-wrap justify-center\">\n <Gauge value={s.temp} min={-10} max={50} label=\"Temperature\" unit=\"°C\" />\n <Gauge value={s.humidity} min={0} max={100} label=\"Humidity\" unit=\"%\" />\n <Gauge value={s.pressure} min={950} max={1050} label=\"Pressure\" unit=\"hPa\" />\n </div>\n <div className=\"mt-10 flex gap-3 items-center\">\n <button\n className=\"px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-500 transition-colors\"\n onClick={() => send({ action: 'refresh' })}\n >Refresh</button>\n {s.ts && <span className=\"text-zinc-600 text-xs\">Last: {new Date(s.ts).toLocaleTimeString()}</span>}\n </div>\n </div>\n );\n}",
81
+ "componentCode": "function App() {\n const { data, send } = useNodeRed();\n const s = data || { temp: 0, humidity: 0, pressure: 0 };\n\n return (\n <div className=\"min-h-screen bg-zinc-950 flex flex-col items-center justify-center p-8\">\n <h1 className=\"text-2xl font-light text-cyan-400 mb-10\">Sensor Portal</h1>\n <div className=\"flex gap-10 flex-wrap justify-center\">\n <Gauge value={s.temp} min={-10} max={50} label=\"Temperature\" unit=\"°C\" />\n <Gauge value={s.humidity} min={0} max={100} label=\"Humidity\" unit=\"%\" />\n <Gauge value={s.pressure} min={950} max={1050} label=\"Pressure\" unit=\"hPa\" />\n </div>\n <div className=\"mt-10 flex gap-3 items-center\">\n <Button onClick={() => send({ action: 'refresh' })}>Refresh</Button>\n <ValueBadge label=\"Last\" value={s.ts ? new Date(s.ts).toLocaleTimeString() : null} />\n </div>\n </div>\n );\n}",
56
82
  "x": 560,
57
83
  "y": 160,
58
84
  "wires": [["fc-debug"]]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aaqu/fromcubes-portal-react",
3
- "version": "0.1.0-alpha.10",
3
+ "version": "0.1.0-alpha.12",
4
4
  "description": "Fromcubes Portal - React for Node-RED with Tailwind CSS and auto complete",
5
5
  "keywords": [
6
6
  "node-red",
@@ -39,6 +39,14 @@
39
39
  "scripts": {
40
40
  "start": "node-red"
41
41
  },
42
+ "repository": {
43
+ "type": "git",
44
+ "url": "git+https://github.com/Aaqu/fromcubes-portal-react.git"
45
+ },
46
+ "bugs": {
47
+ "url": "https://github.com/Aaqu/fromcubes-portal-react/issues"
48
+ },
49
+ "homepage": "https://github.com/Aaqu/fromcubes-portal-react#readme",
42
50
  "license": "Apache-2.0",
43
51
  "author": "aaqu",
44
52
  "publishConfig": {