Refactor icon handling with image-icon component and store

Introduced a new <image-icon> component and a shared image store to centralize SVG icon sources for add, delete, and edit actions. Updated django-hstore-widget to use the new component and store, simplifying icon rendering and improving maintainability. Added @stencil/store as a dev dependency and updated tsconfig paths for the new store.

Author: baseplate-admin

package-lock.json

@@ -22,6 +22,7 @@
     "devDependencies": {
         "@stencil/core": "^4.36.2",
         "@stencil/sass": "^3.2.2",
+        "@stencil/store": "^2.2.0",
         "@types/jest": "^29.5.14",
         "@types/node": "^24.2.1",
         "jest": "^29.7.0",

package.json

@@ -30,6 +30,9 @@ export namespace Components {
          */
         "rows": number;
     }
+    interface ImageIcon {
+        "type": 'delete' | 'add' | 'edit';
+    }
 }
 declare global {
     interface HTMLDjangoHstoreWidgetElement extends Components.DjangoHstoreWidget, HTMLStencilElement {
@@ -38,8 +41,15 @@ declare global {
         prototype: HTMLDjangoHstoreWidgetElement;
         new (): HTMLDjangoHstoreWidgetElement;
     };
+    interface HTMLImageIconElement extends Components.ImageIcon, HTMLStencilElement {
+    }
+    var HTMLImageIconElement: {
+        prototype: HTMLImageIconElement;
+        new (): HTMLImageIconElement;
+    };
     interface HTMLElementTagNameMap {
         "django-hstore-widget": HTMLDjangoHstoreWidgetElement;
+        "image-icon": HTMLImageIconElement;
     }
 }
 declare namespace LocalJSX {
@@ -67,15 +77,20 @@ declare namespace LocalJSX {
          */
         "rows"?: number;
     }
+    interface ImageIcon {
+        "type": 'delete' | 'add' | 'edit';
+    }
     interface IntrinsicElements {
         "django-hstore-widget": DjangoHstoreWidget;
+        "image-icon": ImageIcon;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "django-hstore-widget": LocalJSX.DjangoHstoreWidget & JSXBase.HTMLAttributes<HTMLDjangoHstoreWidgetElement>;
+            "image-icon": LocalJSX.ImageIcon & JSXBase.HTMLAttributes<HTMLImageIconElement>;
         }
     }
 }

src/frontend/components.d.ts

@@ -1,5 +1,6 @@
 import { Component, Host, h, Prop, State, Fragment, Watch } from '@stencil/core';
 import { cn } from '$lib/classnames';
+import imageState from '$store/image';
 
 const django_mapping = Object.freeze({
     input: 'vTextField',
@@ -49,6 +50,18 @@ export class DjangoHstoreWidget {
     }
 
     // Callbacks
+    async componentWillLoad() {
+        if (this.delete_svg_src) {
+            imageState.delete_svg_src = this.delete_svg_src;
+        }
+        if (this.add_svg_src) {
+            imageState.add_svg_src = this.add_svg_src;
+        }
+        if (this.edit_svg_src) {
+            imageState.edit_svg_src = this.edit_svg_src;
+        }
+    }
+
     async componentDidLoad() {
         globalThis.requestAnimationFrame(async () => {
             await this.#parseJson(this.json);
@@ -181,21 +194,13 @@ export class DjangoHstoreWidget {
                         id="delete-button"
                         onClick={this.#handleDelete.bind(this, item.index)}
                     >
-                        {this.#ImageIconComponent({ type: 'delete' })}
+                        <image-icon type="delete"></image-icon>
                     </div>
                 </div>
             </div>
         );
     }
 
-    #ImageIconComponent({ type }: { type: 'delete' | 'add' | 'edit' }) {
-        const mapping = { delete: { src: this.delete_svg_src, alt: '❌' }, add: { src: this.add_svg_src, alt: '➕' }, edit: { src: this.edit_svg_src, alt: '✏️' } };
-
-        const icon = mapping[type];
-        if (!icon) throw new Error(`Icon type "${type}" is not defined in the mapping.`);
-        return <img src={icon.src} alt={icon.alt} />;
-    }
-
     render() {
         if (!this.mounted) {
             return (
@@ -241,7 +246,7 @@ export class DjangoHstoreWidget {
                             aria-label="Add Row"
                             onClick={this.#handleRowAdd.bind(this)}
                         >
-                            {this.#ImageIconComponent({ type: 'add' })}
+                            <image-icon type="add"></image-icon>
                             Add row
                         </button>
 
@@ -253,7 +258,7 @@ export class DjangoHstoreWidget {
                                     aria-label="Close TextArea"
                                     onClick={this.#handleToggleClick.bind(this)}
                                 >
-                                    {this.#ImageIconComponent({ type: 'delete' })}
+                                    <image-icon type="delete"></image-icon>
                                     Close TextArea
                                 </button>
                             ) : this.output_render_type === 'rows' ? (
@@ -263,7 +268,7 @@ export class DjangoHstoreWidget {
                                     aria-label="Open TextArea"
                                     onClick={this.#handleToggleClick.bind(this)}
                                 >
-                                    {this.#ImageIconComponent({ type: 'edit' })}
+                                    <image-icon type="edit"></image-icon>
                                     Open TextArea
                                 </button>
                             ) : (

src/frontend/components/django-hstore-widget/django-hstore-widget.tsx

@@ -0,0 +1,24 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import imageState from '$store/image';
+@Component({
+    tag: 'image-icon',
+    shadow: true,
+})
+export class ImageIcon {
+    @Prop() type!: 'delete' | 'add' | 'edit';
+
+    render() {
+        const mapping = {
+            delete: { src: imageState.delete_svg_src, alt: '❌' },
+            add: { src: imageState.add_svg_src, alt: '➕' },
+            edit: { src: imageState.edit_svg_src, alt: '✏️' },
+        };
+        const icon = mapping[this.type];
+        if (!icon?.src) console.error(`Icon type "${this.type}" src is missing`);
+        return (
+            <Host>
+                <img src={icon.src} alt={icon.alt} />
+            </Host>
+        );
+    }
+}

src/frontend/components/image-icon/image-icon.tsx

@@ -0,0 +1,8 @@
+import { createStore } from '@stencil/store';
+
+const { state } = createStore({
+    delete_svg_src: '',
+    add_svg_src: '',
+    edit_svg_src: '',
+});
+export default state;

src/frontend/stores/image.ts

@@ -16,7 +16,8 @@
         "jsx": "react",
         "jsxFactory": "h",
         "paths": {
-            "$lib/*": ["lib/*"]
+            "$lib/*": ["lib/*"],
+            "$store/*": ["stores/*"]
         }
     },
     "include": ["src/frontend"],