@tduniec/plugin-template-designer 0.3.7 → 0.4.1

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 (77) hide show
  1. package/CHANGELOG.md +42 -39
  2. package/README.md +8 -130
  3. package/dist/alpha.esm.js +1 -1
  4. package/dist/alpha.esm.js.map +1 -1
  5. package/dist/components/TemplateDesigner/TemplateDesigner.esm.js +14 -12
  6. package/dist/components/TemplateDesigner/TemplateDesigner.esm.js.map +1 -1
  7. package/dist/index.d.ts +10 -4
  8. package/dist/index.esm.js +3 -1
  9. package/dist/index.esm.js.map +1 -1
  10. package/dist/package.json.esm.js +53 -92
  11. package/dist/package.json.esm.js.map +1 -1
  12. package/dist/plugin.esm.js +1 -2
  13. package/dist/plugin.esm.js.map +1 -1
  14. package/package.json +46 -77
  15. package/LICENSE +0 -201
  16. package/dist/api/mockScaffolderActions.esm.js +0 -85
  17. package/dist/api/mockScaffolderActions.esm.js.map +0 -1
  18. package/dist/api/scaffolderActions.esm.js +0 -57
  19. package/dist/api/scaffolderActions.esm.js.map +0 -1
  20. package/dist/components/DesignerFlow/DesignerFlow.esm.js +0 -431
  21. package/dist/components/DesignerFlow/DesignerFlow.esm.js.map +0 -1
  22. package/dist/components/DesignerFlow/flowConfig.esm.js +0 -21
  23. package/dist/components/DesignerFlow/flowConfig.esm.js.map +0 -1
  24. package/dist/components/DesignerFlow/handlers.esm.js +0 -322
  25. package/dist/components/DesignerFlow/handlers.esm.js.map +0 -1
  26. package/dist/components/DesignerFlow/model.esm.js +0 -185
  27. package/dist/components/DesignerFlow/model.esm.js.map +0 -1
  28. package/dist/components/DesignerFlow/nodeLayout.esm.js +0 -138
  29. package/dist/components/DesignerFlow/nodeLayout.esm.js.map +0 -1
  30. package/dist/components/DesignerFlow/parameterTransforms.esm.js +0 -184
  31. package/dist/components/DesignerFlow/parameterTransforms.esm.js.map +0 -1
  32. package/dist/components/Nodes/ActionNode.esm.js +0 -602
  33. package/dist/components/Nodes/ActionNode.esm.js.map +0 -1
  34. package/dist/components/Nodes/OutputNode.esm.js +0 -370
  35. package/dist/components/Nodes/OutputNode.esm.js.map +0 -1
  36. package/dist/components/Nodes/ParameterInputNode.esm.js +0 -310
  37. package/dist/components/Nodes/ParameterInputNode.esm.js.map +0 -1
  38. package/dist/components/Nodes/ParameterTitlesNode.esm.js +0 -251
  39. package/dist/components/Nodes/ParameterTitlesNode.esm.js.map +0 -1
  40. package/dist/components/Nodes/ParametersNode.esm.js +0 -144
  41. package/dist/components/Nodes/ParametersNode.esm.js.map +0 -1
  42. package/dist/components/Nodes/action/schema.esm.js +0 -144
  43. package/dist/components/Nodes/action/schema.esm.js.map +0 -1
  44. package/dist/components/Nodes/action/useActionInputs.esm.js +0 -84
  45. package/dist/components/Nodes/action/useActionInputs.esm.js.map +0 -1
  46. package/dist/components/Nodes/common/AutoWidthPopper.esm.js +0 -22
  47. package/dist/components/Nodes/common/AutoWidthPopper.esm.js.map +0 -1
  48. package/dist/components/Nodes/common/nodeInteraction.esm.js +0 -9
  49. package/dist/components/Nodes/common/nodeInteraction.esm.js.map +0 -1
  50. package/dist/components/Nodes/output/useOutputController.esm.js +0 -191
  51. package/dist/components/Nodes/output/useOutputController.esm.js.map +0 -1
  52. package/dist/components/Nodes/parameters/useParameterSections.esm.js +0 -162
  53. package/dist/components/Nodes/parameters/useParameterSections.esm.js.map +0 -1
  54. package/dist/components/Nodes/types.esm.js +0 -8
  55. package/dist/components/Nodes/types.esm.js.map +0 -1
  56. package/dist/components/TemplateDesigner/components/FieldEditorDialog.esm.js +0 -55
  57. package/dist/components/TemplateDesigner/components/FieldEditorDialog.esm.js.map +0 -1
  58. package/dist/components/TemplateDesigner/components/TemplateLanding.esm.js +0 -157
  59. package/dist/components/TemplateDesigner/components/TemplateLanding.esm.js.map +0 -1
  60. package/dist/components/TemplateDesigner/components/TemplateWorkspace.esm.js +0 -302
  61. package/dist/components/TemplateDesigner/components/TemplateWorkspace.esm.js.map +0 -1
  62. package/dist/components/TemplateDesigner/components/codemirrorTheme.esm.js +0 -30
  63. package/dist/components/TemplateDesigner/components/codemirrorTheme.esm.js.map +0 -1
  64. package/dist/components/TemplateDesigner/useFieldEditor.esm.js +0 -95
  65. package/dist/components/TemplateDesigner/useFieldEditor.esm.js.map +0 -1
  66. package/dist/components/TemplateDesigner/useTemplateState.esm.js +0 -627
  67. package/dist/components/TemplateDesigner/useTemplateState.esm.js.map +0 -1
  68. package/dist/components/TemplateDesigner/utils.esm.js +0 -46
  69. package/dist/components/TemplateDesigner/utils.esm.js.map +0 -1
  70. package/dist/components/TemplateDesignerIcon.esm.js +0 -33
  71. package/dist/components/TemplateDesignerIcon.esm.js.map +0 -1
  72. package/dist/utils/createSequentialEdges.esm.js +0 -15
  73. package/dist/utils/createSequentialEdges.esm.js.map +0 -1
  74. package/dist/utils/sampleTemplate.esm.js +0 -40
  75. package/dist/utils/sampleTemplate.esm.js.map +0 -1
  76. package/dist/utils/yamlJsonConversion.esm.js +0 -47
  77. package/dist/utils/yamlJsonConversion.esm.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,131 +1,134 @@
1
- ## [0.3.7](https://github.com/tduniec/template-designer-plugin/compare/v0.3.6...v0.3.7) (2025-12-04)
1
+ ## [0.4.1](https://github.com/tduniec/template-designer-plugin/compare/template-designer-v0.4.0...template-designer-v0.4.1) (2025-12-21)
2
2
 
3
3
 
4
4
  ### Bug Fixes
5
5
 
6
- * bump the version for readme update ([93b676b](https://github.com/tduniec/template-designer-plugin/commit/93b676bfdb0a23a88bddb2b732852a5cecbc28a9))
6
+ * **template-designer-foundation:** output notation change && node outputs render bringed back ([76bb9e8](https://github.com/tduniec/template-designer-plugin/commit/76bb9e8aedcfa5a152b9f66c5d29428c98bc84b5))
7
+ * **template-designer-foundation:** parameterNodes alignement ([074dceb](https://github.com/tduniec/template-designer-plugin/commit/074dceb1be0fe9479540349564a8379b980df107))
7
8
 
8
- ## [0.3.6](https://github.com/tduniec/template-designer-plugin/compare/v0.3.5...v0.3.6) (2025-12-01)
9
+ # [0.4.0](https://github.com/tduniec/template-designer-plugin/compare/template-designer-v0.3.7...template-designer-v0.4.0) (2025-12-20)
9
10
 
10
11
 
11
12
  ### Bug Fixes
12
13
 
13
- * making the templateDesigner icon outlined ([#53](https://github.com/tduniec/template-designer-plugin/issues/53)) ([6488a74](https://github.com/tduniec/template-designer-plugin/commit/6488a74ca1e4874febce8f178c41773a78a6a1f9))
14
+ * **template-designer-foundation:** initial release ([1ddc9d7](https://github.com/tduniec/template-designer-plugin/commit/1ddc9d72f343ab944e706919788e244b8efcdb39))
14
15
 
15
- ## [0.3.5](https://github.com/tduniec/template-designer-plugin/compare/v0.3.4...v0.3.5) (2025-12-01)
16
16
 
17
+ ### Features
18
+
19
+ * bulk refactor to commons ([#55](https://github.com/tduniec/template-designer-plugin/issues/55)) optimized rendering - redesigned rendering logic ([99aa586](https://github.com/tduniec/template-designer-plugin/commit/99aa5862ffb3bac254f1bb0e69b0e94a5ed96c16))
20
+
21
+ ## [0.3.7](https://github.com/tduniec/template-designer-plugin/compare/v0.3.6...v0.3.7) (2025-12-04)
17
22
 
18
23
  ### Bug Fixes
19
24
 
20
- * adjust npm release ([#52](https://github.com/tduniec/template-designer-plugin/issues/52)) ([924ae88](https://github.com/tduniec/template-designer-plugin/commit/924ae881c47488b636b37053c8141d4bee4c10b8))
25
+ - bump the version for readme update ([93b676b](https://github.com/tduniec/template-designer-plugin/commit/93b676bfdb0a23a88bddb2b732852a5cecbc28a9))
21
26
 
22
- ## [0.3.4](https://github.com/tduniec/template-designer-plugin/compare/v0.3.3...v0.3.4) (2025-12-01)
27
+ ## [0.3.6](https://github.com/tduniec/template-designer-plugin/compare/v0.3.5...v0.3.6) (2025-12-01)
28
+
29
+ ### Bug Fixes
30
+
31
+ - making the templateDesigner icon outlined ([#53](https://github.com/tduniec/template-designer-plugin/issues/53)) ([6488a74](https://github.com/tduniec/template-designer-plugin/commit/6488a74ca1e4874febce8f178c41773a78a6a1f9))
23
32
 
33
+ ## [0.3.5](https://github.com/tduniec/template-designer-plugin/compare/v0.3.4...v0.3.5) (2025-12-01)
24
34
 
25
35
  ### Bug Fixes
26
36
 
27
- * backstage pattern resolution during publishing ([#51](https://github.com/tduniec/template-designer-plugin/issues/51)) ([57328b7](https://github.com/tduniec/template-designer-plugin/commit/57328b7b7b5ea3328bf4fb03c1c7f6cb879204ae))
37
+ - adjust npm release ([#52](https://github.com/tduniec/template-designer-plugin/issues/52)) ([924ae88](https://github.com/tduniec/template-designer-plugin/commit/924ae881c47488b636b37053c8141d4bee4c10b8))
28
38
 
29
- ## [0.3.3](https://github.com/tduniec/template-designer-plugin/compare/v0.3.2...v0.3.3) (2025-11-28)
39
+ ## [0.3.4](https://github.com/tduniec/template-designer-plugin/compare/v0.3.3...v0.3.4) (2025-12-01)
30
40
 
41
+ ### Bug Fixes
42
+
43
+ - backstage pattern resolution during publishing ([#51](https://github.com/tduniec/template-designer-plugin/issues/51)) ([57328b7](https://github.com/tduniec/template-designer-plugin/commit/57328b7b7b5ea3328bf4fb03c1c7f6cb879204ae))
44
+
45
+ ## [0.3.3](https://github.com/tduniec/template-designer-plugin/compare/v0.3.2...v0.3.3) (2025-11-28)
31
46
 
32
47
  ### Bug Fixes
33
48
 
34
- * export icon ([#50](https://github.com/tduniec/template-designer-plugin/issues/50)) ([73afac4](https://github.com/tduniec/template-designer-plugin/commit/73afac487f2112a17d19f877eaea845f68370df1))
49
+ - export icon ([#50](https://github.com/tduniec/template-designer-plugin/issues/50)) ([73afac4](https://github.com/tduniec/template-designer-plugin/commit/73afac487f2112a17d19f877eaea845f68370df1))
35
50
 
36
51
  ## [0.3.2](https://github.com/tduniec/template-designer-plugin/compare/v0.3.1...v0.3.2) (2025-11-28)
37
52
 
38
-
39
53
  ### Bug Fixes
40
54
 
41
- * visual improvements and logo ([6da7314](https://github.com/tduniec/template-designer-plugin/commit/6da73148c1b066272d760c4b49587cc7f02dad07))
55
+ - visual improvements and logo ([6da7314](https://github.com/tduniec/template-designer-plugin/commit/6da73148c1b066272d760c4b49587cc7f02dad07))
42
56
 
43
57
  ## [0.3.1](https://github.com/tduniec/template-designer-plugin/compare/v0.3.0...v0.3.1) (2025-11-28)
44
58
 
45
-
46
59
  ### Bug Fixes
47
60
 
48
- * Performance imporvements ([#48](https://github.com/tduniec/template-designer-plugin/issues/48)) ([510dec7](https://github.com/tduniec/template-designer-plugin/commit/510dec7c9c1eaebf688c170800b3c93f3d9f5411))
61
+ - Performance imporvements ([#48](https://github.com/tduniec/template-designer-plugin/issues/48)) ([510dec7](https://github.com/tduniec/template-designer-plugin/commit/510dec7c9c1eaebf688c170800b3c93f3d9f5411))
49
62
 
50
63
  # [0.3.0](https://github.com/tduniec/template-designer-plugin/compare/v0.2.3...v0.3.0) (2025-11-28)
51
64
 
52
-
53
65
  ### Features
54
66
 
55
- * add support to select existing template ([#40](https://github.com/tduniec/template-designer-plugin/issues/40)) ([6100138](https://github.com/tduniec/template-designer-plugin/commit/610013862d7264d2631018c0188341e8302e86f0))
56
- * add support for nfs ([#36](https://github.com/tduniec/template-designer-plugin/issues/36)) ([8fa3464](https://github.com/tduniec/template-designer-plugin/commit/8fa34648c0e0b85b7bb553b562eb8cb63404258a)), closes [#38](https://github.com/tduniec/template-designer-plugin/issues/38)
57
-
67
+ - add support to select existing template ([#40](https://github.com/tduniec/template-designer-plugin/issues/40)) ([6100138](https://github.com/tduniec/template-designer-plugin/commit/610013862d7264d2631018c0188341e8302e86f0))
68
+ - add support for nfs ([#36](https://github.com/tduniec/template-designer-plugin/issues/36)) ([8fa3464](https://github.com/tduniec/template-designer-plugin/commit/8fa34648c0e0b85b7bb553b562eb8cb63404258a)), closes [#38](https://github.com/tduniec/template-designer-plugin/issues/38)
58
69
 
59
70
  ## [0.2.5](https://github.com/tduniec/template-designer-plugin/compare/v0.2.3...v0.2.5) (2025-11-28)
60
71
 
61
72
  ### Bug Fixes
62
73
 
63
- * add support for nfs ([#36](https://github.com/tduniec/template-designer-plugin/issues/36)) ([8fa3464](https://github.com/tduniec/template-designer-plugin/commit/8fa34648c0e0b85b7bb553b562eb8cb63404258a)), closes [#38](https://github.com/tduniec/template-designer-plugin/issues/38)
74
+ - add support for nfs ([#36](https://github.com/tduniec/template-designer-plugin/issues/36)) ([8fa3464](https://github.com/tduniec/template-designer-plugin/commit/8fa34648c0e0b85b7bb553b562eb8cb63404258a)), closes [#38](https://github.com/tduniec/template-designer-plugin/issues/38)
64
75
 
65
76
  ## [0.2.4](https://github.com/tduniec/template-designer-plugin/compare/v0.2.3...v0.2.4) (2025-11-28)
66
77
 
67
78
  ### Bug Fixes
68
79
 
69
- * add support for nfs ([#36](https://github.com/tduniec/template-designer-plugin/issues/36)) ([8fa3464](https://github.com/tduniec/template-designer-plugin/commit/8fa34648c0e0b85b7bb553b562eb8cb63404258a)), closes [#38](https://github.com/tduniec/template-designer-plugin/issues/38)
80
+ - add support for nfs ([#36](https://github.com/tduniec/template-designer-plugin/issues/36)) ([8fa3464](https://github.com/tduniec/template-designer-plugin/commit/8fa34648c0e0b85b7bb553b562eb8cb63404258a)), closes [#38](https://github.com/tduniec/template-designer-plugin/issues/38)
70
81
 
71
82
  ## [0.2.3](https://github.com/tduniec/template-designer-plugin/compare/v0.2.2...v0.2.3) (2025-11-20)
72
83
 
73
-
74
84
  ### Bug Fixes
75
85
 
76
- * actionNode automcomplete options ([f94e905](https://github.com/tduniec/template-designer-plugin/commit/f94e9053e9e9041034b7b02bd4f348eca0ca8d4f))
77
- * adding delete actioNode option ([b23f3d3](https://github.com/tduniec/template-designer-plugin/commit/b23f3d34158c7ff6f1fd5e43a1384530dbf97e78))
78
- * adding required fields validation on the actionNode ([b0eb801](https://github.com/tduniec/template-designer-plugin/commit/b0eb8010cb62285822c70fbed44dcd31545f71c5))
79
- * improved yaml renders in codemirror ([7ea98a4](https://github.com/tduniec/template-designer-plugin/commit/7ea98a4ffada1156e81aab8134abf08d8ac78f65))
86
+ - actionNode automcomplete options ([f94e905](https://github.com/tduniec/template-designer-plugin/commit/f94e9053e9e9041034b7b02bd4f348eca0ca8d4f))
87
+ - adding delete actioNode option ([b23f3d3](https://github.com/tduniec/template-designer-plugin/commit/b23f3d34158c7ff6f1fd5e43a1384530dbf97e78))
88
+ - adding required fields validation on the actionNode ([b0eb801](https://github.com/tduniec/template-designer-plugin/commit/b0eb8010cb62285822c70fbed44dcd31545f71c5))
89
+ - improved yaml renders in codemirror ([7ea98a4](https://github.com/tduniec/template-designer-plugin/commit/7ea98a4ffada1156e81aab8134abf08d8ac78f65))
80
90
 
81
91
  ## [0.2.2](https://github.com/tduniec/template-designer-plugin/compare/v0.2.1...v0.2.2) (2025-11-20)
82
92
 
83
-
84
93
  ### Bug Fixes
85
94
 
86
- * codemirror-lang missing dependency ([4b1375e](https://github.com/tduniec/template-designer-plugin/commit/4b1375eee9527a73ddbfaae83106894259e3f7b4))
95
+ - codemirror-lang missing dependency ([4b1375e](https://github.com/tduniec/template-designer-plugin/commit/4b1375eee9527a73ddbfaae83106894259e3f7b4))
87
96
 
88
97
  ## [0.2.1](https://github.com/tduniec/template-designer-plugin/compare/v0.2.0...v0.2.1) (2025-11-19)
89
98
 
90
-
91
99
  ### Bug Fixes
92
100
 
93
- * peerDependencies for react and codemirror ([bcb20f0](https://github.com/tduniec/template-designer-plugin/commit/bcb20f002eca7ebf8f9fb15a419c220c851035ff))
101
+ - peerDependencies for react and codemirror ([bcb20f0](https://github.com/tduniec/template-designer-plugin/commit/bcb20f002eca7ebf8f9fb15a419c220c851035ff))
94
102
 
95
103
  # [0.2.0](https://github.com/tduniec/template-designer-plugin/compare/v0.1.7...v0.2.0) (2025-11-19)
96
104
 
97
-
98
105
  ### Features
99
106
 
100
- * initial public release ([72f9a9c](https://github.com/tduniec/template-designer-plugin/commit/72f9a9c9b976721560fb025362ae6d2bd2ad8f1c))
107
+ - initial public release ([72f9a9c](https://github.com/tduniec/template-designer-plugin/commit/72f9a9c9b976721560fb025362ae6d2bd2ad8f1c))
101
108
 
102
109
  ## [0.1.7](https://github.com/tduniec/template-designer-plugin/compare/v0.1.6...v0.1.7) (2025-11-17)
103
110
 
104
-
105
111
  ### Bug Fixes
106
112
 
107
- * node layout fixes ([e011101](https://github.com/tduniec/template-designer-plugin/commit/e01110143a254e1c0ad9a270fb348298f0774920))
113
+ - node layout fixes ([e011101](https://github.com/tduniec/template-designer-plugin/commit/e01110143a254e1c0ad9a270fb348298f0774920))
108
114
 
109
115
  ## [0.1.6](https://github.com/tduniec/template-designer-plugin/compare/v0.1.5...v0.1.6) (2025-11-13)
110
116
 
111
-
112
117
  ### Bug Fixes
113
118
 
114
- * major refactor of core components for readability and maintainability ([024d15e](https://github.com/tduniec/template-designer-plugin/commit/024d15e5d09820689504b6a3415457df32781cc7))
119
+ - major refactor of core components for readability and maintainability ([024d15e](https://github.com/tduniec/template-designer-plugin/commit/024d15e5d09820689504b6a3415457df32781cc7))
115
120
 
116
121
  ## [0.1.5](https://github.com/tduniec/template-designer-plugin/compare/v0.1.4...v0.1.5) (2025-11-08)
117
122
 
118
-
119
123
  ### Bug Fixes
120
124
 
121
- * adding text field editor ([#15](https://github.com/tduniec/template-designer-plugin/issues/15)) ([1e8d2c1](https://github.com/tduniec/template-designer-plugin/commit/1e8d2c1b7be8129c500bb849d21a2bd0064c251d))
125
+ - adding text field editor ([#15](https://github.com/tduniec/template-designer-plugin/issues/15)) ([1e8d2c1](https://github.com/tduniec/template-designer-plugin/commit/1e8d2c1b7be8129c500bb849d21a2bd0064c251d))
122
126
 
123
127
  ## [0.1.4](https://github.com/tduniec/template-designer-plugin/compare/v0.1.3...v0.1.4) (2025-11-08)
124
128
 
125
-
126
129
  ### Bug Fixes
127
130
 
128
- * initializing parameters as subflows ([#14](https://github.com/tduniec/template-designer-plugin/issues/14)) ([59db1bb](https://github.com/tduniec/template-designer-plugin/commit/59db1bb7cc3e313c9a53f9c03f9905eb37aa8247))
131
+ - initializing parameters as subflows ([#14](https://github.com/tduniec/template-designer-plugin/issues/14)) ([59db1bb](https://github.com/tduniec/template-designer-plugin/commit/59db1bb7cc3e313c9a53f9c03f9905eb37aa8247))
129
132
 
130
133
  ## [0.1.3](https://github.com/tduniec/template-designer-plugin/compare/v0.1.2...v0.1.3) (2025-11-05)
131
134
 
package/README.md CHANGED
@@ -1,135 +1,13 @@
1
- # Backstage Template Designer Plugin
1
+ # template-designer
2
2
 
3
- **From YAML to Canvas simplifying Backstage scaffolding**
3
+ Welcome to the template-designer plugin!
4
4
 
5
- Empowering the **Democratization of Templates** in Backstage 🚀
6
- Visually **design, connect, and manage** your Backstage scaffolder templates through an **intuitive drag-and-drop interface** — all inside your Backstage instance.
7
- No YAML complexity. No coding required. Just creativity. **We are breaking the glass!** templating in Backstage made easy! 🚀
5
+ _This plugin was created through the Backstage CLI_
8
6
 
9
- ## 🖼️ Preview
7
+ ## Getting started
10
8
 
11
- Checkout the video!
9
+ Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/template-designer](http://localhost:3000/template-designer).
12
10
 
13
- [▶ Watch the PREVIEW on YouTube](https://youtu.be/Pwzlzvig4-c)
14
-
15
- ## 🚀 Template Designer PRO (Early Access)
16
-
17
- A PRO version of this plugin is in development with an advanced editor, built-in actions documentation, validation rules and more.
18
-
19
- [<img src="./docs/templateDesignerProBadge.png" alt="Template Designer PRO Early Access" />](https://forms.gle/F3HrtyVm4tiuC8Zo7)
20
-
21
- Get early access to:
22
- - preview builds
23
- - direct influence on the roadmap
24
-
25
- 👉 **Join Early Access:** **[here](https://forms.gle/F3HrtyVm4tiuC8Zo7)**
26
- (quick & free)
27
-
28
- You'll be notified as soon as the first preview is ready.
29
-
30
- ---
31
-
32
- ## 🌟 Why “Democratization of Templates”?
33
-
34
- Backstage templates shouldn’t be just for developers.
35
- The Template Designer makes **template creation accessible to everyone** — from DevOps engineers to product teams — enabling true **collaboration and transparency** in how your software templates are built and evolve.
36
-
37
- ---
38
-
39
- ## 🚀 Features
40
-
41
- - ⚡ **Drag & Drop Editing** — visually compose your Backstage scaffolder workflows.
42
- - 🧩 **Three Node Types**
43
- - **Action Node** – represents a single scaffolder action.
44
- - **Template Node** – groups multiple actions into a reusable unit.
45
- - **Output Node** – defines exported values or pipeline results.
46
- - 💾 **Work with Files** — open existing template definitions or save your flow as a JSON file directly from the UI.
47
- - 🔄 **Live Flow Connections** — connect nodes with arrows to define execution order.
48
- - 💡 **Frontend-Only Plugin** — zero backend setup required.
49
-
50
- ---
51
-
52
- ## ⚙️ Installation
53
-
54
- From your Backstage root directory
55
-
56
- ```bash
57
- yarn --cwd packages/app add @tduniec/plugin-template-designer
58
- ```
59
-
60
- In packages/app/src/App.tsx:
61
-
62
- ```tsx
63
- import { TemplateDesignerPage } from "@tduniec/plugin-template-designer";
64
-
65
- const routes = (
66
- <FlatRoutes>
67
- {/* other routes */}
68
- <Route path="/template-designer" element={<TemplateDesignerPage />} />
69
- </FlatRoutes>
70
- );
71
- ```
72
-
73
- In `packages/app/src/components/Root/Root.tsx`:
74
-
75
- ```tsx
76
- import { SidebarItem } from "@backstage/core-components";
77
- import { TemplateDesignerIcon } from "@tduniec/plugin-template-designer";
78
-
79
- <SidebarItem
80
- icon={TemplateDesignerIcon}
81
- to="template-designer"
82
- text="Template Designer"
83
- />;
84
- ```
85
-
86
- ## ⚙️ Usage
87
-
88
- Visit your local Backstage instance:
89
-
90
- http://localhost:3000/template-designer
91
-
92
- Create and connect nodes, adjust properties, and export your flow as a JSON file.
93
- You can also open an existing template file, modify it visually, and save your changes.
94
-
95
- ## 💾 File Management
96
-
97
- Template Designer allows you to easily work with your Backstage scaffolder definitions:
98
- Open a template file (.json) – load an existing flow directly into the canvas.
99
- Edit visually – move nodes, adjust connections, rename actions.
100
- Save – export your template back to a .json file ready for scaffolder integration.
101
-
102
- _Template Designer can read your registered actions!_
103
-
104
- ## 🧠 Tech Stack
105
-
106
- - React + TypeScript
107
- - React Flow
108
- - Backstage Core Components
109
-
110
- ## 🛠️ Development
111
-
112
- To run locally during development:
113
-
114
- ```bash
115
- yarn start
116
- ```
117
-
118
- This runs a local Backstage app with hot reload support for your plugin.
119
-
120
- ## ❤️ Contributing
121
-
122
- Template Designer is still fresh out of the oven, so rough edges and open questions are expected—and that’s part of the fun.
123
- If you spot a bug, have an idea, or simply want to riff on better tooling for templates, please open an issue or PR.
124
-
125
- Help us push forward the Democratization of Templates in Backstage!
126
- Ideas, feedback, and PRs are all welcome.
127
-
128
- ## 📄 License
129
-
130
- Apache-2.0 © 2025 — Created by [tduniec](https://github.com/tduniec)
131
-
132
- ## 🌐 Roadmap
133
-
134
- TODO -> please help me gather your **[feedback](https://forms.gle/wqBtpNA3SrDoofgM8)** first!
135
- Take 2 minutes to fill up the **[survey](https://forms.gle/wqBtpNA3SrDoofgM8)**!
11
+ You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
12
+ This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
13
+ It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
package/dist/alpha.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { NavItemBlueprint, PageBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
3
3
  import { rootRouteRef } from './routes.esm.js';
4
- import { TemplateDesignerIcon } from './components/TemplateDesignerIcon.esm.js';
4
+ import { TemplateDesignerIcon } from '@tduniec/plugin-template-designer-foundation';
5
5
 
6
6
  const templateDesignerNavItem = NavItemBlueprint.make({
7
7
  params: {
@@ -1 +1 @@
1
- {"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["import {\n createFrontendPlugin,\n NavItemBlueprint,\n PageBlueprint,\n} from \"@backstage/frontend-plugin-api\";\nimport { rootRouteRef } from \"./routes\";\nimport { TemplateDesignerIcon } from \"./components/TemplateDesignerIcon\";\n\nconst templateDesignerNavItem = NavItemBlueprint.make({\n params: {\n title: \"Template designer\",\n routeRef: rootRouteRef,\n icon: TemplateDesignerIcon,\n },\n});\n\nconst templateDesignerPage = PageBlueprint.make({\n params: {\n path: \"/template-designer\",\n routeRef: rootRouteRef,\n loader: () =>\n import(\"./components/TemplateDesigner\").then((m) => (\n <m.TemplateDesigner />\n )),\n },\n});\n\n/**\n * Backstage frontend plugin.\n *\n * @alpha\n */\nexport default createFrontendPlugin({\n pluginId: \"template-designer\",\n info: { packageJson: () => import(\"../package.json\") },\n routes: {\n root: rootRouteRef,\n },\n extensions: [templateDesignerPage, templateDesignerNavItem],\n});\n"],"names":[],"mappings":";;;;;AAQA,MAAM,uBAAA,GAA0B,iBAAiB,IAAA,CAAK;AAAA,EACpD,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,mBAAA;AAAA,IACP,QAAA,EAAU,YAAA;AAAA,IACV,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAED,MAAM,oBAAA,GAAuB,cAAc,IAAA,CAAK;AAAA,EAC9C,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,oBAAA;AAAA,IACN,QAAA,EAAU,YAAA;AAAA,IACV,MAAA,EAAQ,MACN,OAAO,4CAA+B,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,qBAC5C,GAAA,CAAC,CAAA,CAAE,gBAAA,EAAF,EAAmB,CACrB;AAAA;AAEP,CAAC,CAAA;AAOD,YAAe,oBAAA,CAAqB;AAAA,EAClC,QAAA,EAAU,mBAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,uBAAiB,CAAA,EAAE;AAAA,EACrD,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,UAAA,EAAY,CAAC,oBAAA,EAAsB,uBAAuB;AAC5D,CAAC,CAAA;;;;"}
1
+ {"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["import {\n createFrontendPlugin,\n NavItemBlueprint,\n PageBlueprint,\n} from \"@backstage/frontend-plugin-api\";\nimport { rootRouteRef } from \"./routes\";\nimport { TemplateDesignerIcon } from \"@tduniec/plugin-template-designer-foundation\";\n\nconst templateDesignerNavItem = NavItemBlueprint.make({\n params: {\n title: \"Template designer\",\n routeRef: rootRouteRef,\n icon: TemplateDesignerIcon,\n },\n});\n\nconst templateDesignerPage = PageBlueprint.make({\n params: {\n path: \"/template-designer\",\n routeRef: rootRouteRef,\n loader: () =>\n import(\"./components/TemplateDesigner\").then((m) => (\n <m.TemplateDesigner />\n )),\n },\n});\n\n/**\n * Backstage frontend plugin.\n *\n * @alpha\n */\nexport default createFrontendPlugin({\n pluginId: \"template-designer\",\n info: { packageJson: () => import(\"../package.json\") },\n routes: {\n root: rootRouteRef,\n },\n extensions: [templateDesignerPage, templateDesignerNavItem],\n});\n"],"names":[],"mappings":";;;;;AAQA,MAAM,uBAAA,GAA0B,iBAAiB,IAAA,CAAK;AAAA,EACpD,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,mBAAA;AAAA,IACP,QAAA,EAAU,YAAA;AAAA,IACV,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAED,MAAM,oBAAA,GAAuB,cAAc,IAAA,CAAK;AAAA,EAC9C,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,oBAAA;AAAA,IACN,QAAA,EAAU,YAAA;AAAA,IACV,MAAA,EAAQ,MACN,OAAO,4CAA+B,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,qBAC5C,GAAA,CAAC,CAAA,CAAE,gBAAA,EAAF,EAAmB,CACrB;AAAA;AAEP,CAAC,CAAA;AAOD,YAAe,oBAAA,CAAqB;AAAA,EAClC,QAAA,EAAU,mBAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,uBAAiB,CAAA,EAAE;AAAA,EACrD,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,UAAA,EAAY,CAAC,oBAAA,EAAsB,uBAAuB;AAC5D,CAAC,CAAA;;;;"}
@@ -1,13 +1,11 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { useState, useCallback, useMemo } from 'react';
3
3
  import { Page, Content, ContentHeader, SupportButton } from '@backstage/core-components';
4
- import { FieldEditorDialog } from './components/FieldEditorDialog.esm.js';
5
- import { TemplateLanding } from './components/TemplateLanding.esm.js';
6
- import { TemplateWorkspace } from './components/TemplateWorkspace.esm.js';
7
- import { useFieldEditor } from './useFieldEditor.esm.js';
8
- import { useTemplateState } from './useTemplateState.esm.js';
4
+ import { useTemplateState, useFieldEditor, TemplateWorkspace, ParametersNode, TemplateLanding, FieldEditorDialog } from '@tduniec/plugin-template-designer-foundation';
9
5
 
10
- const TemplateDesigner = () => {
6
+ const TemplateDesigner = ({
7
+ FieldEditorComponent
8
+ }) => {
11
9
  const [showYaml, setShowYaml] = useState(true);
12
10
  const {
13
11
  templateObject,
@@ -73,7 +71,10 @@ const TemplateDesigner = () => {
73
71
  saveButtonLabel,
74
72
  isReloading,
75
73
  isSaving,
76
- isSyncing
74
+ isSyncing,
75
+ headerActionsSlot: null,
76
+ flowTopSlot: null,
77
+ parametersNodeComponent: ParametersNode
77
78
  }
78
79
  ) : /* @__PURE__ */ jsx(
79
80
  TemplateLanding,
@@ -113,8 +114,9 @@ const TemplateDesigner = () => {
113
114
  selectCatalogTemplate
114
115
  ]
115
116
  );
116
- return /* @__PURE__ */ jsxs("div", { ref: interactionRootRef, style: { height: "100%" }, children: [
117
- /* @__PURE__ */ jsx(Page, { themeId: "tool", children: /* @__PURE__ */ jsxs(Content, { children: [
117
+ const ResolvedFieldEditor = FieldEditorComponent ?? FieldEditorDialog;
118
+ return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
119
+ /* @__PURE__ */ jsxs(Content, { children: [
118
120
  /* @__PURE__ */ jsx(ContentHeader, { title: "Template Designer", children: /* @__PURE__ */ jsx(SupportButton, { children: "Template Designer turns blank Backstage YAML into a storyboard-like canvas, guiding anyone through drag-and-drop scaffolder authoring before ever touching code. Rally non-experts, broadcast best practices, and accelerate template launches directly inside Backstage." }) }),
119
121
  /* @__PURE__ */ jsx(
120
122
  "input",
@@ -126,10 +128,10 @@ const TemplateDesigner = () => {
126
128
  onChange: handleTemplateFileSelected
127
129
  }
128
130
  ),
129
- workspace
130
- ] }) }),
131
+ /* @__PURE__ */ jsx("div", { ref: interactionRootRef, children: workspace })
132
+ ] }),
131
133
  /* @__PURE__ */ jsx(
132
- FieldEditorDialog,
134
+ ResolvedFieldEditor,
133
135
  {
134
136
  open: Boolean(editorState),
135
137
  label: editorState?.label,
@@ -1 +1 @@
1
- {"version":3,"file":"TemplateDesigner.esm.js","sources":["../../../src/components/TemplateDesigner/TemplateDesigner.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport {\n Content,\n ContentHeader,\n Page,\n SupportButton,\n} from \"@backstage/core-components\";\nimport { FieldEditorDialog } from \"./components/FieldEditorDialog\";\nimport { TemplateLanding } from \"./components/TemplateLanding\";\nimport { TemplateWorkspace } from \"./components/TemplateWorkspace\";\nimport { useFieldEditor } from \"./useFieldEditor\";\nimport { useTemplateState } from \"./useTemplateState\";\n\nexport const TemplateDesigner = () => {\n const [showYaml, setShowYaml] = useState(true);\n const {\n templateObject,\n templateYaml,\n yamlError,\n loadError,\n templateSteps,\n templateParameters,\n templateOutput,\n templateSource,\n isReloading,\n isSaving,\n isSyncing,\n fileInputRef,\n handleStartSampleTemplate,\n handleTemplateFileSelected,\n handleOpenTemplatePicker,\n handleYamlChange,\n handleStepsChange,\n handleParametersChange,\n handleOutputChange,\n handleReloadFromFile,\n handleSaveTemplate,\n availableTemplates,\n selectCatalogTemplate,\n } = useTemplateState();\n const { editorState, interactionRootRef, closeEditor, applyEditorValue } =\n useFieldEditor();\n\n const handleToggleYaml = useCallback(() => {\n setShowYaml((prev) => !prev);\n }, []);\n\n const activeTemplateLabel = templateSource?.label;\n\n let reloadButtonLabel = \"Reset sample\";\n if (templateSource?.type === \"file\") {\n reloadButtonLabel = isReloading ? \"Reloading...\" : \"Reload file\";\n } else if (templateSource?.type === \"catalog\") {\n reloadButtonLabel = \"Reload template\";\n }\n\n let saveButtonLabel =\n templateSource?.type === \"file\" ? \"Save\" : \"Save as file\";\n if (isSaving) {\n saveButtonLabel = \"Saving...\";\n }\n\n const workspace = useMemo(\n () =>\n templateObject ? (\n <TemplateWorkspace\n templateSteps={templateSteps}\n templateParameters={templateParameters}\n templateOutput={templateOutput}\n templateYaml={templateYaml}\n yamlError={yamlError}\n loadError={loadError}\n showYaml={showYaml}\n onToggleYaml={handleToggleYaml}\n onYamlChange={handleYamlChange}\n onStepsChange={handleStepsChange}\n onParametersChange={handleParametersChange}\n onOutputChange={handleOutputChange}\n onReload={handleReloadFromFile}\n onSave={handleSaveTemplate}\n onOpenTemplatePicker={handleOpenTemplatePicker}\n activeTemplateLabel={activeTemplateLabel}\n reloadButtonLabel={reloadButtonLabel}\n saveButtonLabel={saveButtonLabel}\n isReloading={isReloading}\n isSaving={isSaving}\n isSyncing={isSyncing}\n />\n ) : (\n <TemplateLanding\n loadError={loadError}\n onStartSampleTemplate={handleStartSampleTemplate}\n onOpenTemplatePicker={handleOpenTemplatePicker}\n availableTemplates={availableTemplates}\n selectCatalogTemplate={selectCatalogTemplate}\n />\n ),\n [\n templateObject,\n templateSteps,\n templateParameters,\n templateOutput,\n templateYaml,\n yamlError,\n loadError,\n showYaml,\n handleToggleYaml,\n handleYamlChange,\n handleStepsChange,\n handleParametersChange,\n handleOutputChange,\n handleReloadFromFile,\n handleSaveTemplate,\n handleOpenTemplatePicker,\n activeTemplateLabel,\n reloadButtonLabel,\n saveButtonLabel,\n isReloading,\n isSaving,\n isSyncing,\n handleStartSampleTemplate,\n availableTemplates,\n selectCatalogTemplate,\n ]\n );\n\n return (\n <div ref={interactionRootRef} style={{ height: \"100%\" }}>\n <Page themeId=\"tool\">\n <Content>\n <ContentHeader title=\"Template Designer\">\n <SupportButton>\n Template Designer turns blank Backstage YAML into a\n storyboard-like canvas, guiding anyone through drag-and-drop\n scaffolder authoring before ever touching code. Rally non-experts,\n broadcast best practices, and accelerate template launches\n directly inside Backstage.\n </SupportButton>\n </ContentHeader>\n\n <input\n ref={fileInputRef}\n type=\"file\"\n accept=\".yaml,.yml,.json\"\n style={{ display: \"none\" }}\n onChange={handleTemplateFileSelected}\n />\n\n {workspace}\n </Content>\n </Page>\n <FieldEditorDialog\n open={Boolean(editorState)}\n label={editorState?.label}\n value={editorState?.initialValue ?? \"\"}\n onClose={closeEditor}\n onApply={applyEditorValue}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,IAAI,CAAA;AAC7C,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,yBAAA;AAAA,IACA,0BAAA;AAAA,IACA,wBAAA;AAAA,IACA,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,sBAAA;AAAA,IACA,kBAAA;AAAA,IACA,oBAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA;AAAA,MACE,gBAAA,EAAiB;AACrB,EAAA,MAAM,EAAE,WAAA,EAAa,kBAAA,EAAoB,WAAA,EAAa,gBAAA,KACpD,cAAA,EAAe;AAEjB,EAAA,MAAM,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,WAAA,CAAY,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAAA,EAC7B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,sBAAsB,cAAA,EAAgB,KAAA;AAE5C,EAAA,IAAI,iBAAA,GAAoB,cAAA;AACxB,EAAA,IAAI,cAAA,EAAgB,SAAS,MAAA,EAAQ;AACnC,IAAA,iBAAA,GAAoB,cAAc,cAAA,GAAiB,aAAA;AAAA,EACrD,CAAA,MAAA,IAAW,cAAA,EAAgB,IAAA,KAAS,SAAA,EAAW;AAC7C,IAAA,iBAAA,GAAoB,iBAAA;AAAA,EACtB;AAEA,EAAA,IAAI,eAAA,GACF,cAAA,EAAgB,IAAA,KAAS,MAAA,GAAS,MAAA,GAAS,cAAA;AAC7C,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,eAAA,GAAkB,WAAA;AAAA,EACpB;AAEA,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,cAAA,mBACE,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,kBAAA;AAAA,QACA,cAAA;AAAA,QACA,YAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,QAAA;AAAA,QACA,YAAA,EAAc,gBAAA;AAAA,QACd,YAAA,EAAc,gBAAA;AAAA,QACd,aAAA,EAAe,iBAAA;AAAA,QACf,kBAAA,EAAoB,sBAAA;AAAA,QACpB,cAAA,EAAgB,kBAAA;AAAA,QAChB,QAAA,EAAU,oBAAA;AAAA,QACV,MAAA,EAAQ,kBAAA;AAAA,QACR,oBAAA,EAAsB,wBAAA;AAAA,QACtB,mBAAA;AAAA,QACA,iBAAA;AAAA,QACA,eAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA;AAAA,KACF,mBAEA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,qBAAA,EAAuB,yBAAA;AAAA,QACvB,oBAAA,EAAsB,wBAAA;AAAA,QACtB,kBAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IAEJ;AAAA,MACE,cAAA;AAAA,MACA,aAAA;AAAA,MACA,kBAAA;AAAA,MACA,cAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,sBAAA;AAAA,MACA,kBAAA;AAAA,MACA,oBAAA;AAAA,MACA,kBAAA;AAAA,MACA,wBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,eAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,yBAAA;AAAA,MACA,kBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,SAAI,GAAA,EAAK,kBAAA,EAAoB,OAAO,EAAE,MAAA,EAAQ,QAAO,EACpD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,MAAA,EACZ,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,iBAAc,KAAA,EAAM,mBAAA,EACnB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,uRAMf,CAAA,EACF,CAAA;AAAA,sBAEA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,YAAA;AAAA,UACL,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,kBAAA;AAAA,UACP,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO;AAAA,UACzB,QAAA,EAAU;AAAA;AAAA,OACZ;AAAA,MAEC;AAAA,KAAA,EACH,CAAA,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,QAAQ,WAAW,CAAA;AAAA,QACzB,OAAO,WAAA,EAAa,KAAA;AAAA,QACpB,KAAA,EAAO,aAAa,YAAA,IAAgB,EAAA;AAAA,QACpC,OAAA,EAAS,WAAA;AAAA,QACT,OAAA,EAAS;AAAA;AAAA;AACX,GAAA,EACF,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"TemplateDesigner.esm.js","sources":["../../../src/components/TemplateDesigner/TemplateDesigner.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport {\n Content,\n ContentHeader,\n Page,\n SupportButton,\n} from \"@backstage/core-components\";\nimport type { ComponentType } from \"react\";\nimport {\n FieldEditorDialog,\n FieldEditorDialogProps,\n TemplateLanding,\n TemplateWorkspace,\n type DesignerFlowProps,\n ParametersNode,\n useFieldEditor,\n} from \"@tduniec/plugin-template-designer-foundation\";\nimport { useTemplateState } from \"@tduniec/plugin-template-designer-foundation\";\n\nexport type TemplateDesignerProps = {\n FieldEditorComponent?: ComponentType<FieldEditorDialogProps>;\n};\n\nexport const TemplateDesigner = ({\n FieldEditorComponent,\n}: TemplateDesignerProps) => {\n const [showYaml, setShowYaml] = useState(true);\n const {\n templateObject,\n templateYaml,\n yamlError,\n loadError,\n templateSteps,\n templateParameters,\n templateOutput,\n templateSource,\n isReloading,\n isSaving,\n isSyncing,\n fileInputRef,\n handleStartSampleTemplate,\n handleTemplateFileSelected,\n handleOpenTemplatePicker,\n handleYamlChange,\n handleStepsChange,\n handleParametersChange,\n handleOutputChange,\n handleReloadFromFile,\n handleSaveTemplate,\n availableTemplates,\n selectCatalogTemplate,\n } = useTemplateState();\n const { editorState, interactionRootRef, closeEditor, applyEditorValue } =\n useFieldEditor();\n\n const handleToggleYaml = useCallback(() => {\n setShowYaml((prev) => !prev);\n }, []);\n\n const activeTemplateLabel = templateSource?.label;\n\n let reloadButtonLabel = \"Reset sample\";\n if (templateSource?.type === \"file\") {\n reloadButtonLabel = isReloading ? \"Reloading...\" : \"Reload file\";\n } else if (templateSource?.type === \"catalog\") {\n reloadButtonLabel = \"Reload template\";\n }\n\n let saveButtonLabel =\n templateSource?.type === \"file\" ? \"Save\" : \"Save as file\";\n if (isSaving) {\n saveButtonLabel = \"Saving...\";\n }\n\n const workspace = useMemo(\n () =>\n templateObject ? (\n <TemplateWorkspace\n templateSteps={templateSteps}\n templateParameters={templateParameters}\n templateOutput={templateOutput}\n templateYaml={templateYaml}\n yamlError={yamlError}\n loadError={loadError}\n showYaml={showYaml}\n onToggleYaml={handleToggleYaml}\n onYamlChange={handleYamlChange}\n onStepsChange={handleStepsChange}\n onParametersChange={handleParametersChange}\n onOutputChange={handleOutputChange}\n onReload={handleReloadFromFile}\n onSave={handleSaveTemplate}\n onOpenTemplatePicker={handleOpenTemplatePicker}\n activeTemplateLabel={activeTemplateLabel}\n reloadButtonLabel={reloadButtonLabel}\n saveButtonLabel={saveButtonLabel}\n isReloading={isReloading}\n isSaving={isSaving}\n isSyncing={isSyncing}\n headerActionsSlot={null}\n flowTopSlot={null}\n parametersNodeComponent={\n ParametersNode as DesignerFlowProps[\"parametersNodeComponent\"]\n }\n />\n ) : (\n <TemplateLanding\n loadError={loadError}\n onStartSampleTemplate={handleStartSampleTemplate}\n onOpenTemplatePicker={handleOpenTemplatePicker}\n availableTemplates={availableTemplates}\n selectCatalogTemplate={selectCatalogTemplate}\n />\n ),\n [\n templateObject,\n templateSteps,\n templateParameters,\n templateOutput,\n templateYaml,\n yamlError,\n loadError,\n showYaml,\n handleToggleYaml,\n handleYamlChange,\n handleStepsChange,\n handleParametersChange,\n handleOutputChange,\n handleReloadFromFile,\n handleSaveTemplate,\n handleOpenTemplatePicker,\n activeTemplateLabel,\n reloadButtonLabel,\n saveButtonLabel,\n isReloading,\n isSaving,\n isSyncing,\n handleStartSampleTemplate,\n availableTemplates,\n selectCatalogTemplate,\n ]\n );\n\n const ResolvedFieldEditor = FieldEditorComponent ?? FieldEditorDialog;\n\n return (\n <Page themeId=\"tool\">\n <Content>\n <ContentHeader title=\"Template Designer\">\n <SupportButton>\n Template Designer turns blank Backstage YAML into a storyboard-like\n canvas, guiding anyone through drag-and-drop scaffolder authoring\n before ever touching code. Rally non-experts, broadcast best\n practices, and accelerate template launches directly inside\n Backstage.\n </SupportButton>\n </ContentHeader>\n\n <input\n ref={fileInputRef}\n type=\"file\"\n accept=\".yaml,.yml,.json\"\n style={{ display: \"none\" }}\n onChange={handleTemplateFileSelected}\n />\n\n <div ref={interactionRootRef}>{workspace}</div>\n </Content>\n <ResolvedFieldEditor\n open={Boolean(editorState)}\n label={editorState?.label}\n value={editorState?.initialValue ?? \"\"}\n onClose={closeEditor}\n onApply={applyEditorValue}\n />\n </Page>\n );\n};\n"],"names":[],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -1,12 +1,18 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { ComponentType } from 'react';
3
+ import { FieldEditorDialogProps } from '@tduniec/plugin-template-designer-foundation';
4
+ export * from '@tduniec/plugin-template-designer-foundation';
5
+ export { DesignerFlow, DesignerFlowProps, ParametersNode, TemplateDesignerIcon, TemplateLanding, TemplateWorkspace, useFieldEditor } from '@tduniec/plugin-template-designer-foundation';
2
6
  import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
3
- import { SvgIconProps } from '@material-ui/core/SvgIcon';
4
7
 
5
- declare const TemplateDesignerIcon: (props: SvgIconProps) => react_jsx_runtime.JSX.Element;
8
+ type TemplateDesignerProps = {
9
+ FieldEditorComponent?: ComponentType<FieldEditorDialogProps>;
10
+ };
11
+ declare const TemplateDesigner: ({ FieldEditorComponent, }: TemplateDesignerProps) => react_jsx_runtime.JSX.Element;
6
12
 
7
13
  declare const templateDesignerPlugin: _backstage_core_plugin_api.BackstagePlugin<{
8
14
  root: _backstage_core_plugin_api.RouteRef<undefined>;
9
15
  }, {}, {}>;
10
- declare const TemplateDesignerPage: () => react_jsx_runtime.JSX.Element;
16
+ declare const TemplateDesignerPage: ({ FieldEditorComponent, }: TemplateDesignerProps) => react_jsx_runtime.JSX.Element;
11
17
 
12
- export { TemplateDesignerIcon, TemplateDesignerPage, templateDesignerPlugin };
18
+ export { TemplateDesigner, TemplateDesignerPage, templateDesignerPlugin };
package/dist/index.esm.js CHANGED
@@ -1,3 +1,5 @@
1
1
  export { TemplateDesignerPage, templateDesignerPlugin } from './plugin.esm.js';
2
- export { TemplateDesignerIcon } from './components/TemplateDesignerIcon.esm.js';
2
+ export * from '@tduniec/plugin-template-designer-foundation';
3
+ export { DesignerFlow, ParametersNode, TemplateDesignerIcon, TemplateLanding, TemplateWorkspace, useFieldEditor } from '@tduniec/plugin-template-designer-foundation';
4
+ export { TemplateDesigner } from './components/TemplateDesigner/TemplateDesigner.esm.js';
3
5
  //# sourceMappingURL=index.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}