@hectasquare/medusa-plugin-category-tree 1.0.5 → 1.0.6
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/.medusa/server/src/admin/components/category-tree/category-tree-canvas.js +3 -1
- package/.medusa/server/src/admin/components/category-tree/edit-category-drawer.js +4 -1
- package/LICENSE +190 -0
- package/README.md +102 -120
- package/package.json +12 -3
- package/src/admin/components/category-tree/category-tree-canvas.tsx +8 -2
- package/src/admin/components/category-tree/edit-category-drawer.tsx +32 -12
|
@@ -263,7 +263,9 @@ const CanvasInner = () => {
|
|
|
263
263
|
setCategories([...originalCategories]);
|
|
264
264
|
ui_1.toast.info("Changes reset to previous saved state");
|
|
265
265
|
};
|
|
266
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full h-[calc(100vh-56px)] overflow-hidden bg-[#fafafa] dark:bg-[#09090b]", children: [(0, jsx_runtime_1.jsx)("div", { className:
|
|
266
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full h-[calc(100vh-56px)] overflow-hidden bg-[#fafafa] dark:bg-[#09090b]", children: [(0, jsx_runtime_1.jsx)("div", { className: `absolute top-4 left-1/2 -translate-x-1/2 z-10 transition-all duration-200 pointer-events-none ${editDrawerOpen || createDrawerOpen
|
|
267
|
+
? "opacity-0 -translate-y-6 scale-95 pointer-events-none"
|
|
268
|
+
: "opacity-100"}`, children: (0, jsx_runtime_1.jsx)(canvas_dock_1.CanvasDock, { salesChannels: salesChannels, selectedStorefront: selectedStorefront, onSelectStorefront: setSelectedStorefront, direction: direction, onToggleDirection: () => setDirection((d) => (d === "TB" ? "LR" : "TB")), searchQuery: searchQuery, onSearchChange: setSearchQuery, onExpandAll: handleExpandAll, onCollapseAll: handleCollapseAll, onFocusRoot: handleFocusRoot, selectedCount: selectedNodeIds.length, onExpandSelected: handleExpandSelected, onCollapseSelected: handleCollapseSelected, isBoxSelect: isBoxSelect, onToggleBoxSelect: () => setIsBoxSelect((prev) => !prev), onZoomIn: () => zoomIn({ duration: 300 }), onZoomOut: () => zoomOut({ duration: 300 }), onFitView: () => fitView({ padding: 0.25, duration: 400 }), onOpenCreateRoot: () => {
|
|
267
269
|
setCreateParentCategory(null);
|
|
268
270
|
setCreateDrawerOpen(true);
|
|
269
271
|
}, dirtyCount: dirtyMoves.length, isSaving: isSaving, onSave: handleSave, onReset: handleReset }) }), (0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onEdgesDelete: onEdgesDelete, onSelectionChange: (0, react_1.useCallback)(({ nodes }) => {
|
|
@@ -39,6 +39,7 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
|
|
|
39
39
|
const [youtubeUrls, setYoutubeUrls] = (0, react_1.useState)([]);
|
|
40
40
|
const [newYoutubeInput, setNewYoutubeInput] = (0, react_1.useState)("");
|
|
41
41
|
const [currentMetadata, setCurrentMetadata] = (0, react_1.useState)({});
|
|
42
|
+
const [isFullScreen, setIsFullScreen] = (0, react_1.useState)(false);
|
|
42
43
|
const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
|
|
43
44
|
const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
|
|
44
45
|
(0, react_1.useEffect)(() => {
|
|
@@ -160,7 +161,9 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
|
|
|
160
161
|
setIsDeleting(false);
|
|
161
162
|
}
|
|
162
163
|
};
|
|
163
|
-
return ((0, jsx_runtime_1.jsx)(ui_1.Drawer, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(ui_1.Drawer.Content, { className:
|
|
164
|
+
return ((0, jsx_runtime_1.jsx)(ui_1.Drawer, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(ui_1.Drawer.Content, { className: `transition-all duration-300 w-full z-50 ${isFullScreen
|
|
165
|
+
? "!max-w-full !w-screen !h-screen !inset-0 !rounded-none"
|
|
166
|
+
: "max-w-5xl xl:max-w-6xl w-[92vw]"}`, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(ui_1.Drawer.Header, { className: "border-b border-ui-border-base pb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between w-full", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Drawer.Title, { className: "text-base font-semibold text-ui-fg-base", children: category.name }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Description, { className: "text-xs text-ui-fg-muted mt-0.5", children: ["Tier ", category.tier, " \u2022 ID: ", category.id] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setIsFullScreen((prev) => !prev), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors", title: isFullScreen ? "Exit Fullscreen" : "Expand to Full Page Modal", children: [(0, jsx_runtime_1.jsx)(icons_1.ArrowsPointingOut, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: isFullScreen ? "Exit Fullscreen" : "Full Page" })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => window.open(`/app/categories/${category.id}`, "_blank"), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors", title: "Open full category details page in a new tab", children: [(0, jsx_runtime_1.jsx)("span", { children: "Open Full Page" }), (0, jsx_runtime_1.jsx)(icons_1.ArrowUpRightMicro, { className: "w-3.5 h-3.5" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 mt-3 border-b border-ui-border-base/50 -mb-3 pb-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("general"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "general"
|
|
164
167
|
? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
|
|
165
168
|
: "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "General & Ranking" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("products"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "products"
|
|
166
169
|
? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
|
package/LICENSE
ADDED
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
36
|
+
Object form, made available under the License, as indicated by a
|
|
37
|
+
copyright notice that is included in or attached to the work
|
|
38
|
+
(an example is provided in the Appendix below).
|
|
39
|
+
|
|
40
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
41
|
+
form, that is based on (or derived from) the Work and for which the
|
|
42
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
43
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
44
|
+
of this License, Derivative Works shall not include works that remain
|
|
45
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
46
|
+
the Work and Derivative Works thereof.
|
|
47
|
+
|
|
48
|
+
"Contribution" shall mean any work of authorship, including
|
|
49
|
+
the original version of the Work and any modifications or additions
|
|
50
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
51
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
52
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
53
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
54
|
+
means any form of electronic, verbal, or written communication sent
|
|
55
|
+
to the Licensor or its representatives, including but not limited to
|
|
56
|
+
communication on electronic mailing lists, source code control systems,
|
|
57
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
58
|
+
Licensor for the purpose of discussing and improving the Work, but
|
|
59
|
+
excluding communication that is conspicuously marked or otherwise
|
|
60
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
61
|
+
|
|
62
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
63
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
64
|
+
subsequently incorporated within the Work.
|
|
65
|
+
|
|
66
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
67
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
68
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
69
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
70
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
71
|
+
Work and such Derivative Works in Source or Object form.
|
|
72
|
+
|
|
73
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
74
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
75
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
76
|
+
(except as stated in this section) patent license to make, have made,
|
|
77
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
78
|
+
where such license applies only to those patent claims licensable
|
|
79
|
+
by such Contributor that are necessarily infringed by their
|
|
80
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
81
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
82
|
+
institute patent litigation against any entity (including a
|
|
83
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
84
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
85
|
+
or contributory patent infringement, then any patent licenses
|
|
86
|
+
granted to You under this License for that Work shall terminate
|
|
87
|
+
as of the date such litigation is filed.
|
|
88
|
+
|
|
89
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
90
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
91
|
+
modifications, and in Source or Object form, provided that You
|
|
92
|
+
meet the following conditions:
|
|
93
|
+
|
|
94
|
+
(a) You must give any other recipients of the Work or
|
|
95
|
+
Derivative Works a copy of this License; and
|
|
96
|
+
|
|
97
|
+
(b) You must cause any modified files to carry prominent notices
|
|
98
|
+
stating that You changed the files; and
|
|
99
|
+
|
|
100
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
101
|
+
that You distribute, all copyright, patent, trademark, and
|
|
102
|
+
attribution notices from the Source form of the Work,
|
|
103
|
+
excluding those notices that do not pertain to any part of
|
|
104
|
+
the Derivative Works; and
|
|
105
|
+
|
|
106
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
107
|
+
distribution, then any Derivative Works that You distribute must
|
|
108
|
+
include a readable copy of the attribution notices contained
|
|
109
|
+
within such NOTICE file, excluding those notices that do not
|
|
110
|
+
pertain to any part of the Derivative Works, in at least one
|
|
111
|
+
of the following places: within a NOTICE text file distributed
|
|
112
|
+
as part of the Derivative Works; within the Source form or
|
|
113
|
+
documentation, if provided along with the Derivative Works; or,
|
|
114
|
+
within a display generated by the Derivative Works, if and
|
|
115
|
+
wherever such third-party notices normally appear. The contents
|
|
116
|
+
of the NOTICE file are for informational purposes only and
|
|
117
|
+
do not modify the License. You may add Your own attribution
|
|
118
|
+
notices within Derivative Works that You distribute, alongside
|
|
119
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
120
|
+
that such additional attribution notices cannot be construed
|
|
121
|
+
as modifying the License.
|
|
122
|
+
|
|
123
|
+
You may add Your own copyright statement to Your modifications and
|
|
124
|
+
may provide additional or different license terms and conditions
|
|
125
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
126
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
127
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
128
|
+
the conditions stated in this License.
|
|
129
|
+
|
|
130
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
131
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
132
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
133
|
+
this License, without any additional terms or conditions.
|
|
134
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
135
|
+
the terms of any separate license agreement you may have executed
|
|
136
|
+
with Licensor regarding such Contributions.
|
|
137
|
+
|
|
138
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
139
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
140
|
+
except as required for reasonable and customary use in describing the
|
|
141
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
142
|
+
|
|
143
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
144
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
145
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
146
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
147
|
+
implied, including, without limitation, any warranties or conditions
|
|
148
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
149
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
150
|
+
appropriateness of using or redistributing the Work and assume any
|
|
151
|
+
risks associated with Your exercise of permissions under this License.
|
|
152
|
+
|
|
153
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
154
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
155
|
+
unless required by applicable law (such as deliberate and grossly
|
|
156
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
157
|
+
liable to You for damages, including any direct, indirect, special,
|
|
158
|
+
incidental, or consequential damages of any character arising as a
|
|
159
|
+
result of this License or out of the use or inability to use the
|
|
160
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
161
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
162
|
+
other commercial damages or losses), even if such Contributor
|
|
163
|
+
has been advised of the possibility of such damages.
|
|
164
|
+
|
|
165
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
166
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
167
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
168
|
+
or other liability obligations and/or rights consistent with this
|
|
169
|
+
License. However, in accepting such obligations, You may act only
|
|
170
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
171
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
172
|
+
defend, and hold each Contributor harmless for any liability
|
|
173
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
174
|
+
of your accepting any such warranty or additional liability.
|
|
175
|
+
|
|
176
|
+
END OF TERMS AND CONDITIONS
|
|
177
|
+
|
|
178
|
+
Copyright 2026 HectaSquare Team
|
|
179
|
+
|
|
180
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
181
|
+
you may not use this file except in compliance with the License.
|
|
182
|
+
You may obtain a copy of the License at
|
|
183
|
+
|
|
184
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
185
|
+
|
|
186
|
+
Unless required by applicable law or agreed to in writing, software
|
|
187
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
188
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
189
|
+
See the License for the specific language governing permissions and
|
|
190
|
+
limitations under the License.
|
package/README.md
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
# @hectasquare/medusa-plugin-category-tree
|
|
2
2
|
|
|
3
|
-
An enterprise-grade, **AAA interactive Category Tree &
|
|
3
|
+
An enterprise-grade, **AAA interactive Category Tree, Mind Map & Category Detail Hub** plugin for **Medusa v2 Admin**.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@hectasquare/medusa-plugin-category-tree)
|
|
6
|
-
[](https://github.com/HectaSquareUK/medusa-plugin-category-tree)
|
|
7
|
+
[](https://opensource.org/licenses/Apache-2.0)
|
|
7
8
|
[](https://medusajs.com)
|
|
8
9
|
[](https://www.typescriptlang.org/)
|
|
9
10
|
|
|
10
|
-
Inspired by modern visual tools like **Figma, Miro, Linear, and NotebookLM**, this plugin transforms Medusa's standard nested category list into a fluid, 60fps pan/zoom node
|
|
11
|
+
Inspired by modern visual and canvas tools like **Figma, Miro, Linear, and NotebookLM**, this plugin transforms Medusa's standard nested category list into a fluid, 60fps pan/zoom node canvas with branch-specific harmonic color coding, left-edge tier level indicators, sibling superscript rankings, and an all-in-one **Category Detail Hub** with product ranking and commercial top seller management.
|
|
11
12
|
|
|
12
13
|
---
|
|
13
14
|
|
|
@@ -15,13 +16,16 @@ Inspired by modern visual tools like **Figma, Miro, Linear, and NotebookLM**, th
|
|
|
15
16
|
|
|
16
17
|
In high-volume e-commerce stores with hundreds or thousands of categories across multiple sales channels and brands:
|
|
17
18
|
- Standard nested tables and indent lists quickly become unwieldy, difficult to scan, and prone to navigation fatigue.
|
|
18
|
-
- Re-parenting or reordering categories through repeated modal dropdowns is slow, error-prone, and provides no immediate visual feedback
|
|
19
|
-
- Managing
|
|
19
|
+
- Re-parenting or reordering categories through repeated modal dropdowns is slow, error-prone, and provides no immediate visual feedback.
|
|
20
|
+
- Managing products, rankings, and commercial visibility required constantly hopping back and forth between administrative screens.
|
|
20
21
|
|
|
21
22
|
**With this plugin:**
|
|
22
23
|
- **Zero backend contamination:** Lives entirely inside an external npm plugin (`@hectasquare/medusa-plugin-category-tree`). Your backend core remains pristine.
|
|
23
|
-
- **Bird’s-eye hierarchy visualization:** Instant visual comprehension of your entire category taxonomy with orthogonal connections (`smoothstep`).
|
|
24
|
+
- **Bird’s-eye hierarchy visualization:** Instant visual comprehension of your entire category taxonomy with orthogonal connections (`smoothstep`) and branch-specific harmonic colors.
|
|
25
|
+
- **Hierarchical Centered Layout:** Clean Buchheim/Walker-style tree geometry centering parents directly over children without cross-canvas wire tangle.
|
|
24
26
|
- **Interactive drag-and-drop reparenting:** Connect and restructure categories directly on the canvas with real-time topological cycle protection.
|
|
27
|
+
- **Category Detail Hub:** Complete 4-tab slide-over hub replacing the need to visit legacy pages—edit metadata, manage products, rank items, and configure storefronts in one place.
|
|
28
|
+
- **Product Ranking & Top Commercial Sellers:** Reorder sibling products directly with interactive controls and star items with `⭐ Top Seller` status reflected in storefronts.
|
|
25
29
|
- **Multi-storefront filtering:** Seamlessly filter the entire tree by Sales Channel (`All Storefronts`, `Monfil`, `Superpunch`, etc.).
|
|
26
30
|
- **Atomic batch updates:** Stage moves visually on canvas and commit them in a single transactional request with automatic rollback.
|
|
27
31
|
|
|
@@ -29,42 +33,64 @@ In high-volume e-commerce stores with hundreds or thousands of categories across
|
|
|
29
33
|
|
|
30
34
|
## 🚀 Key Features
|
|
31
35
|
|
|
36
|
+
### 🗂️ All-in-One Category Detail Hub
|
|
37
|
+
Clicking the edit pencil icon on any node opens a wide slide-over hub featuring 4 dedicated workspaces:
|
|
38
|
+
1. **General & Ranking:**
|
|
39
|
+
- Title, Handle, Description, and Active / Internal toggles.
|
|
40
|
+
- Sibling category rank ordering (`↑ Earlier`, `↓ Later`, `Top (#0)`).
|
|
41
|
+
- Direct `↗ Open Full Page` link opening `/app/categories/:id` in a separate tab when desired.
|
|
42
|
+
2. **Products Management:**
|
|
43
|
+
- Full product listing with thumbnail, title, collection, variant count, and status badges.
|
|
44
|
+
- **Sibling Product Ranking:** Dynamic rank numbering (`#1`, `#2`, `#3`...) with interactive `▲` Move Up and `▼` Move Down buttons.
|
|
45
|
+
- **⭐ Top Commercial Seller:** One-click toggle marking priority commercial showcase products.
|
|
46
|
+
- **Remove Products:** Individual removal or multi-select bulk remove.
|
|
47
|
+
- **Full-Screen FocusModal:** Direct parity with Medusa's legacy Add Products modal with full-width table, search (`Q Search`), pagination, and batch assignment.
|
|
48
|
+
3. **Storefronts & Media:**
|
|
49
|
+
- Multi-sales channel visibility checkboxes (`Monfil Store`, `Superpunch`, etc.).
|
|
50
|
+
- Category thumbnail and image URL editor with live preview.
|
|
51
|
+
4. **YouTube Videos:**
|
|
52
|
+
- Multi-video demonstration manager with real-time thumbnail preview cards and quick remove actions.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
### 🎨 Branch-Specific Harmonic Color Coding
|
|
57
|
+
- Every major branch receives a distinct harmonic color (Emerald, Indigo, Amber, Rose, Cyan, Violet, Pink, Lime, Sky, Orange) assigned deterministically from its top-level root ancestor.
|
|
58
|
+
- Vertical left-edge tier indicator bars and connecting orthogonal edge lines inherit the branch color, making complex multi-level trees effortless to scan visually.
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
32
62
|
### 🌳 Dual-Mode Visual Layout Engine
|
|
33
|
-
- **Vertical Tree (Top-to-Bottom):**
|
|
34
|
-
- **Horizontal Mind Map (Left-to-Right):** Lateral branching layout (Linear/Miro style)
|
|
35
|
-
-
|
|
63
|
+
- **Vertical Tree (Top-to-Bottom):** Clustered hierarchical layout centering parents cleanly over children.
|
|
64
|
+
- **Horizontal Mind Map (Left-to-Right):** Lateral branching layout (Linear/Miro style) ideal for wide root catalogs.
|
|
65
|
+
- Recalculates dynamically with sub-millisecond responsiveness.
|
|
66
|
+
|
|
67
|
+
---
|
|
36
68
|
|
|
37
|
-
###
|
|
38
|
-
|
|
39
|
-
-
|
|
40
|
-
- **Tier 2 (Sub):** `||` Dual vertical bars with high-contrast 2px spacing.
|
|
41
|
-
- **Tier 3 (Sub-Sub):** `|||` Triple vertical bars.
|
|
42
|
-
- **Tier N:** Dynamically generated proportional bars.
|
|
69
|
+
### ⛶ Box / Marquee Multi-Selection
|
|
70
|
+
- Click and drag anywhere on the canvas to marquee-select multiple nodes at once (`⛶ Box Select`).
|
|
71
|
+
- Move entire subtrees or selected clusters in unison.
|
|
43
72
|
|
|
44
|
-
|
|
45
|
-
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
### 🏷️ Left-Edge Tier Level Indicators & Superscript Ranks
|
|
76
|
+
- **Tier 1 (Root):** Single vertical bar in branch accent.
|
|
77
|
+
- **Tier 2 (Sub):** Dual vertical bars with high-contrast spacing.
|
|
78
|
+
- **Tier 3 (Sub-Sub):** Triple vertical bars.
|
|
79
|
+
- **Sibling Superscripts:** Numbers (`¹`, `²`, `³`, `⁴`, `ⁿ`) representing the category's display rank among siblings.
|
|
80
|
+
|
|
81
|
+
---
|
|
46
82
|
|
|
47
83
|
### 📂 NotebookLM-Style Subtree Collapse
|
|
48
|
-
- Expand
|
|
49
|
-
- Collapsed
|
|
50
|
-
-
|
|
84
|
+
- Expand or collapse individual subtrees with a single click.
|
|
85
|
+
- Collapsed nodes show an indicator badge (e.g., `[ ▸ 4 sub ]`).
|
|
86
|
+
- Quick actions in the floating dock to expand or collapse all nodes or selective subtrees.
|
|
51
87
|
|
|
52
|
-
|
|
53
|
-
- In multi-brand setups, categories can be tagged with specific sales channels via `category.metadata.sales_channels`.
|
|
54
|
-
- Filter canvas nodes dynamically between **"All Storefronts"** and dedicated brand channels with instant visual focus and dimmed state handling.
|
|
88
|
+
---
|
|
55
89
|
|
|
56
90
|
### 🛡️ Topological Cycle Protection
|
|
57
91
|
- Real-time client-side and server-side cycle detection.
|
|
58
92
|
- Completely prevents accidental self-parenting (`A -> A`) or cyclic loops (`A -> B -> C -> A`).
|
|
59
93
|
|
|
60
|
-
### 💾 Atomic Batch Reordering & Workflows SDK
|
|
61
|
-
- Move categories freely on canvas; changes are buffered in local state and flagged with a floating **"Save Hierarchy"** pill.
|
|
62
|
-
- Submits an atomic batch update via a dedicated Medusa Workflows SDK step (`reorderCategoriesWorkflow`) with rollback safety.
|
|
63
|
-
|
|
64
|
-
### 🎛️ Integrated Slide-Over Drawers
|
|
65
|
-
- **Create Subcategory Drawer:** Add children to any node directly from the canvas hover toolbar with automatic parent pre-selection.
|
|
66
|
-
- **Edit Category Drawer:** Modify title, handle, description, thumbnail/image URL, active state, and storefront assignments without navigating away.
|
|
67
|
-
|
|
68
94
|
---
|
|
69
95
|
|
|
70
96
|
## 📦 Installation
|
|
@@ -96,106 +122,62 @@ module.exports = defineConfig({
|
|
|
96
122
|
})
|
|
97
123
|
```
|
|
98
124
|
|
|
99
|
-
|
|
100
|
-
1. **Admin UI Page & Sidebar Item:** Registered under
|
|
101
|
-
2. **
|
|
102
|
-
|
|
103
|
-
---
|
|
104
|
-
|
|
105
|
-
## 🖥️ How It Works in Admin
|
|
106
|
-
|
|
107
|
-
1. Open your Medusa Admin dashboard.
|
|
108
|
-
2. Click **Category Tree** in the main sidebar.
|
|
109
|
-
3. Use the floating **Canvas Dock** to:
|
|
110
|
-
- Switch between **Vertical Tree (TB)** and **Mind Map (LR)** modes.
|
|
111
|
-
- Filter by **Storefront / Sales Channel**.
|
|
112
|
-
- Search categories by name or handle with auto-pan and zoom.
|
|
113
|
-
- Expand or collapse subtrees to declutter large catalogs.
|
|
114
|
-
4. Drag connecting edges between category handles to re-parent nodes.
|
|
115
|
-
5. Click **"Save Hierarchy"** in the top dock to commit changes atomically.
|
|
125
|
+
When you start your Medusa backend (`npx medusa develop` or `pnpm dev`), the plugin automatically injects:
|
|
126
|
+
1. **Admin UI Page & Sidebar Item:** Registered under `/app/category-tree` with a folder tree icon.
|
|
127
|
+
2. **Backend API Endpoints:** Under `/admin/category-tree` supporting atomic reorders, rank shifts, and category creations.
|
|
116
128
|
|
|
117
129
|
---
|
|
118
130
|
|
|
119
|
-
##
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
{ "id": "sc_01...", "name": "Monfil" },
|
|
143
|
-
{ "id": "sc_02...", "name": "Superpunch" }
|
|
144
|
-
],
|
|
145
|
-
"count": 1
|
|
146
|
-
}
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
### `POST /admin/category-tree/reorder`
|
|
150
|
-
Atomically applies batch move and reparenting operations.
|
|
151
|
-
|
|
152
|
-
**Request Body:**
|
|
153
|
-
```json
|
|
154
|
-
{
|
|
155
|
-
"moves": [
|
|
156
|
-
{
|
|
157
|
-
"id": "pcat_01...",
|
|
158
|
-
"parent_category_id": "pcat_root_02...",
|
|
159
|
-
"rank": 1
|
|
160
|
-
}
|
|
161
|
-
]
|
|
131
|
+
## 🛒 Storefront Integration (Product Ranking & Top Sellers)
|
|
132
|
+
|
|
133
|
+
The plugin persists category-scoped ranking and top seller configuration into `category.metadata`:
|
|
134
|
+
- `category.metadata.ordered_product_ids: string[]`
|
|
135
|
+
- `category.metadata.product_ranks: Record<string, number>`
|
|
136
|
+
- `category.metadata.top_sellers: string[]`
|
|
137
|
+
|
|
138
|
+
### Storefront 2 Priority Showcase Example
|
|
139
|
+
In your storefront API or data layer (e.g. Next.js App Router):
|
|
140
|
+
|
|
141
|
+
```typescript
|
|
142
|
+
// Inspect category metadata for top commercial sellers
|
|
143
|
+
const topSellerIds = category.metadata?.top_sellers || []
|
|
144
|
+
|
|
145
|
+
if (topSellerIds.length > 0) {
|
|
146
|
+
// Fetch top seller products and place them first in designated order
|
|
147
|
+
const { products: topProducts } = await getProductsList({
|
|
148
|
+
queryParams: { id: topSellerIds },
|
|
149
|
+
})
|
|
150
|
+
topProducts.sort((a, b) => topSellerIds.indexOf(a.id) - topSellerIds.indexOf(b.id))
|
|
151
|
+
|
|
152
|
+
// Fill remaining slots from the general category pool without duplicates
|
|
153
|
+
return [...topProducts, ...otherCategoryProducts]
|
|
162
154
|
}
|
|
163
155
|
```
|
|
164
156
|
|
|
165
|
-
### `POST /admin/category-tree/create`
|
|
166
|
-
Creates a new product category directly with storefront assignment metadata and optional image URL.
|
|
167
|
-
|
|
168
157
|
---
|
|
169
158
|
|
|
170
|
-
## 🏗️ Architecture &
|
|
159
|
+
## 🏗️ Architecture & Project Structure
|
|
171
160
|
|
|
172
|
-
```
|
|
161
|
+
```text
|
|
173
162
|
medusa-plugin-category-tree/
|
|
174
|
-
├── admin/ # Root Admin module entry points (CommonJS & ESM)
|
|
175
|
-
│ ├── index.js
|
|
176
|
-
│ └── index.mjs
|
|
177
163
|
├── src/
|
|
178
|
-
│ ├── index.ts # Plugin root exports (Workflows)
|
|
179
164
|
│ ├── admin/
|
|
180
|
-
│ │ ├── index.tsx
|
|
181
|
-
│ │ ├── routes/category-tree/
|
|
182
|
-
│ │
|
|
183
|
-
│ │
|
|
184
|
-
│ │
|
|
185
|
-
│ │
|
|
186
|
-
│ │
|
|
187
|
-
│ │
|
|
188
|
-
│ │
|
|
189
|
-
│ │
|
|
190
|
-
│ │
|
|
191
|
-
│ │
|
|
192
|
-
│ │
|
|
193
|
-
│ │
|
|
194
|
-
│ ├── api/
|
|
195
|
-
│
|
|
196
|
-
│ │ └── admin/category-tree/ # API route handlers
|
|
197
|
-
│ └── workflows/
|
|
198
|
-
│ └── reorder-categories.ts # Medusa Workflows SDK atomic reorder step
|
|
165
|
+
│ │ ├── index.tsx # Medusa Admin SDK registration
|
|
166
|
+
│ │ ├── routes/category-tree/ # Route /app/category-tree
|
|
167
|
+
│ │ └── components/category-tree/
|
|
168
|
+
│ │ ├── category-tree-canvas.tsx # Interactive canvas & marquee selection
|
|
169
|
+
│ │ ├── category-node.tsx # Node card with tier bars & ranks
|
|
170
|
+
│ │ ├── custom-edge.tsx # Orthogonal edge matching branch color
|
|
171
|
+
│ │ ├── canvas-dock.tsx # Floating glassmorphic dock
|
|
172
|
+
│ │ ├── tier-bars.tsx # Branch-colored tier bars
|
|
173
|
+
│ │ ├── edit-category-drawer.tsx # 4-tab Category Detail Hub
|
|
174
|
+
│ │ ├── category-products-manager.tsx # Products table, ranking & FocusModal
|
|
175
|
+
│ │ ├── create-category-drawer.tsx # Slide-over subcategory creator
|
|
176
|
+
│ │ └── lib/
|
|
177
|
+
│ │ ├── layout-engine.ts # Buchheim/Walker centered tree engine
|
|
178
|
+
│ │ └── tree-state.ts # Palette, tiers, ranks, & cycle checks
|
|
179
|
+
│ ├── api/admin/category-tree/ # Server route handlers
|
|
180
|
+
│ └── workflows/ # Atomic reorder workflows
|
|
199
181
|
├── package.json
|
|
200
182
|
├── tsconfig.json
|
|
201
183
|
└── README.md
|
|
@@ -226,4 +208,4 @@ Contributions, issues, and feature requests are welcome! Feel free to open an is
|
|
|
226
208
|
|
|
227
209
|
## 📄 License
|
|
228
210
|
|
|
229
|
-
|
|
211
|
+
Apache License 2.0 © [HectaSquare Team](https://github.com/HectaSquareUK)
|
package/package.json
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hectasquare/medusa-plugin-category-tree",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "AAA Interactive Category Tree & Mind Map for Medusa v2 Admin with drag-and-drop reparenting, tier indicators, superscript ranks, multi-storefront filtering, and NotebookLM-style subtree collapse.",
|
|
5
5
|
"author": "HectaSquare Team",
|
|
6
|
-
"license": "
|
|
6
|
+
"license": "Apache-2.0",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/HectaSquareUK/medusa-plugin-category-tree.git"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/HectaSquareUK/medusa-plugin-category-tree/issues"
|
|
13
|
+
},
|
|
14
|
+
"homepage": "https://github.com/HectaSquareUK/medusa-plugin-category-tree#readme",
|
|
7
15
|
"keywords": [
|
|
8
16
|
"medusa",
|
|
9
17
|
"medusa-v2",
|
|
@@ -43,7 +51,8 @@
|
|
|
43
51
|
".medusa/server",
|
|
44
52
|
"src",
|
|
45
53
|
"admin",
|
|
46
|
-
"README.md"
|
|
54
|
+
"README.md",
|
|
55
|
+
"LICENSE"
|
|
47
56
|
],
|
|
48
57
|
"scripts": {
|
|
49
58
|
"build": "tsc"
|
|
@@ -343,8 +343,14 @@ const CanvasInner: React.FC = () => {
|
|
|
343
343
|
}
|
|
344
344
|
|
|
345
345
|
return (
|
|
346
|
-
|
|
347
|
-
<div
|
|
346
|
+
<div className="relative w-full h-[calc(100vh-56px)] overflow-hidden bg-[#fafafa] dark:bg-[#09090b]">
|
|
347
|
+
<div
|
|
348
|
+
className={`absolute top-4 left-1/2 -translate-x-1/2 z-10 transition-all duration-200 pointer-events-none ${
|
|
349
|
+
editDrawerOpen || createDrawerOpen
|
|
350
|
+
? "opacity-0 -translate-y-6 scale-95 pointer-events-none"
|
|
351
|
+
: "opacity-100"
|
|
352
|
+
}`}
|
|
353
|
+
>
|
|
348
354
|
<CanvasDock
|
|
349
355
|
salesChannels={salesChannels}
|
|
350
356
|
selectedStorefront={selectedStorefront}
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
Textarea,
|
|
10
10
|
toast,
|
|
11
11
|
} from "@medusajs/ui"
|
|
12
|
-
import { Trash, Plus, ArrowUpRightMicro } from "@medusajs/icons"
|
|
12
|
+
import { Trash, Plus, ArrowUpRightMicro, ArrowsPointingOut } from "@medusajs/icons"
|
|
13
13
|
import { CategoryTreeNode, SalesChannelInfo } from "./types"
|
|
14
14
|
import { CategoryProductsManager } from "./category-products-manager"
|
|
15
15
|
import { sdk } from "../../lib/sdk"
|
|
@@ -62,6 +62,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
|
|
|
62
62
|
const [newYoutubeInput, setNewYoutubeInput] = useState("")
|
|
63
63
|
|
|
64
64
|
const [currentMetadata, setCurrentMetadata] = useState<Record<string, any>>({})
|
|
65
|
+
const [isFullScreen, setIsFullScreen] = useState(false)
|
|
65
66
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
66
67
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
67
68
|
|
|
@@ -194,7 +195,13 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
|
|
|
194
195
|
|
|
195
196
|
return (
|
|
196
197
|
<Drawer open={open} onOpenChange={onOpenChange}>
|
|
197
|
-
<Drawer.Content
|
|
198
|
+
<Drawer.Content
|
|
199
|
+
className={`transition-all duration-300 w-full z-50 ${
|
|
200
|
+
isFullScreen
|
|
201
|
+
? "!max-w-full !w-screen !h-screen !inset-0 !rounded-none"
|
|
202
|
+
: "max-w-5xl xl:max-w-6xl w-[92vw]"
|
|
203
|
+
}`}
|
|
204
|
+
>
|
|
198
205
|
<form onSubmit={handleSubmit} className="flex flex-col h-full">
|
|
199
206
|
<Drawer.Header className="border-b border-ui-border-base pb-3">
|
|
200
207
|
<div className="flex items-center justify-between w-full">
|
|
@@ -207,16 +214,29 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
|
|
|
207
214
|
</Drawer.Description>
|
|
208
215
|
</div>
|
|
209
216
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
217
|
+
<div className="flex items-center gap-2">
|
|
218
|
+
{/* Full Screen / Wide Mode Toggle */}
|
|
219
|
+
<button
|
|
220
|
+
type="button"
|
|
221
|
+
onClick={() => setIsFullScreen((prev) => !prev)}
|
|
222
|
+
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors"
|
|
223
|
+
title={isFullScreen ? "Exit Fullscreen" : "Expand to Full Page Modal"}
|
|
224
|
+
>
|
|
225
|
+
<ArrowsPointingOut className="w-3.5 h-3.5" />
|
|
226
|
+
<span>{isFullScreen ? "Exit Fullscreen" : "Full Page"}</span>
|
|
227
|
+
</button>
|
|
228
|
+
|
|
229
|
+
{/* Direct Open Legacy Page Link */}
|
|
230
|
+
<button
|
|
231
|
+
type="button"
|
|
232
|
+
onClick={() => window.open(`/app/categories/${category.id}`, "_blank")}
|
|
233
|
+
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors"
|
|
234
|
+
title="Open full category details page in a new tab"
|
|
235
|
+
>
|
|
236
|
+
<span>Open Full Page</span>
|
|
237
|
+
<ArrowUpRightMicro className="w-3.5 h-3.5" />
|
|
238
|
+
</button>
|
|
239
|
+
</div>
|
|
220
240
|
</div>
|
|
221
241
|
|
|
222
242
|
{/* Tab Navigation Bar */}
|