@adaas/are-html 0.0.2

package/examples/jumpstart/src/components/List.component.ts

@@ -0,0 +1,138 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are } from "@adaas/are";
+import { AreContext } from "@adaas/are";
+import { AreEvent } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class ListComponent extends Are {
+
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+
+
+        node.setContent(`
+         <div class="menu-section">Main</div>
+        <ul class="menu">
+            <li @click="$handleClick('Dashboard')" :class="active==='Dashboard' ? 'menu-item-active' : ''" class="menu-item "><span class="menu-icon">⊞</span> <span class="menu-text">{{item1}}</span></li>
+            <li $if="active=='Dashboard'" @click="$handleClick('Users')" :class="active==='Users' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">⊡</span> <span class="menu-text">{{item2}}</span> <span class="menu-badge">{{usersBadge}}</span></li>
+            <li @click="$handleClick('Products')" :class="active==='Products' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">⊠</span> <span class="menu-text">{{item3}}</span></li>
+            <li @click="$handleClick('Orders')" :class="active==='Orders' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">⊟</span> <span class="menu-text">{{item4}}</span></li>
+        </ul>
+        <div class="menu-section">System</div>    
+            <button @click="$add">Add +</button>
+            <ul class="menu">
+                <li 
+                $for="item in items" @click="$handleClick(item.name)"
+                $if="active=='Dashboard'" 
+                :class="active===item.name ? 'menu-item-active' : ''" 
+                class="menu-item">
+                <span class="menu-icon">⊙</span> 
+                <span class="menu-text">{{item.name}}</span> 
+                <span $if="item.badge > 0" class="menu-badge">{{item.badge}}</span>
+                <button @click="$remove(item)">+</button>
+                </li>
+            </ul>
+        `);
+    }
+
+    @Are.Data
+    async data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            active: 'Dashboard',
+            item1: 'Dashboard',
+            item2: 'Users',
+            item3: 'Products',
+            item4: 'Orders',
+            item5: 'Messages',
+            item6: 'Settings',
+            usersBadge: '24',
+            msgBadge: '3',
+            items: [
+                { name: 'Messages', badge: 3 },
+                { name: 'Settings', badge: 0 },
+            ]
+        });
+    }
+    @Are.EventHandler
+    add(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        const currentItems = store.get('items') || [];
+
+        currentItems.push({
+            name: `Item ${currentItems.length + 1}`,
+            badge: 0
+        });
+
+        store.set('items', currentItems);
+    }
+
+
+    @Are.EventHandler
+    remove(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        const itemToRemove = event.get('args')?.[0];
+
+        console.log('Removing item:', itemToRemove, 'from store:', store);
+
+        if (!itemToRemove) {
+            logger.warning('No item specified for removal');
+            return;
+        }
+
+        const currentItems = store.get('items') || [];
+        const updatedItems = currentItems.filter((item: any) => item.name !== itemToRemove.name);
+
+        store.set('items', updatedItems);
+    }
+
+    @Are.EventHandler
+    async handleClick(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        try {
+            console.log('Menu item clicked!', event.get('args'), store);
+
+            const item = event.get('args')?.[0] || 'Dashboard';
+
+
+            store.set('active', item);
+
+            // for (const root of context.roots) {
+            //     root.update();
+            // }
+
+            // node.parent!.update();
+            context.endPerformance('Click');
+            logger.info(`Menu item clicked: ${item}`, ...context.performance);
+
+            // store.owner.parent?.emit(new AreEvent('menuItemClicked').set('section', item));
+
+        } catch (error) {
+            logger.error(error);
+        }
+
+
+        // store.set('active', store.get('active') === 'menu-item-active' ? '' : 'menu-item-active');
+    }
+}

package/examples/jumpstart/src/components/PromptTextArea.component.ts

@@ -0,0 +1,359 @@
+import { A_Caller, A_Feature, A_Inject, A_Scope } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreEvent, AreNode, AreScene, AreStore } from "@adaas/are";
+
+
+export class PromptTextArea extends Are {
+
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(A_Logger) logger: A_Logger
+    ) {
+        logger.info('blue', `PromptTextArea template called... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+        node.setTemplate(`
+            <div class="prompt-textarea-container">
+                <div class="textarea-wrapper">
+                    <textarea 
+                        $no-update 
+                        @input="onChange" 
+                        :value="textValue" 
+                        :placeholder="placeholder"
+                        :rows="rows"
+                        :maxlength="maxLength"
+                        class="prompt-textarea"
+                    ></textarea>
+                    <div class="character-count">
+                        <span class="count">{{textValue.length}}</span>
+                        <span class="max-count">/ {{maxLength}}</span>
+                    </div>
+                </div>
+                
+                <div class="textarea-actions">
+                    <button 
+                        @click="onClear" 
+                        class="clear-btn"
+                        :disabled="textValue.length === 0"
+                    >
+                        Clear
+                    </button>
+                    <button 
+                        @click="onSubmit" 
+                        class="submit-btn"
+                        :disabled="textValue.trim().length === 0"
+                    >
+                        Submit
+                    </button>
+                </div>
+                
+                <div class="preview-section" v-if="showPreview && textValue.trim().length > 0">
+                    <h4 class="preview-title">Preview:</h4>
+                    <div class="preview-content">{{textValue}}</div>
+                </div>
+            </div>
+        `);
+    }
+
+    @Are.Styles
+    async styles(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(A_Logger) logger: A_Logger
+    ) {
+        logger.info('blue', `PromptTextArea styles applied... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+        node.setStyles(`
+            .prompt-textarea-container {
+                width: 100%;
+                max-width: 600px;
+                margin: 0 auto;
+                padding: 20px;
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                border-radius: 16px;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            }
+
+            .textarea-wrapper {
+                position: relative;
+                margin-bottom: 16px;
+            }
+
+            .prompt-textarea {
+                width: 100%;
+                min-height: 120px;
+                padding: 16px;
+                border: 2px solid rgba(255, 255, 255, 0.2);
+                border-radius: 12px;
+                background: rgba(255, 255, 255, 0.95);
+                color: #333;
+                font-size: 16px;
+                line-height: 1.5;
+                resize: vertical;
+                outline: none;
+                transition: all 0.3s ease;
+                box-sizing: border-box;
+            }
+
+            .prompt-textarea:focus {
+                border-color: #4f46e5;
+                box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+                background: rgba(255, 255, 255, 1);
+            }
+
+            .prompt-textarea::placeholder {
+                color: #888;
+                font-style: italic;
+            }
+
+            .character-count {
+                position: absolute;
+                bottom: 8px;
+                right: 12px;
+                font-size: 12px;
+                color: #666;
+                background: rgba(255, 255, 255, 0.9);
+                padding: 2px 6px;
+                border-radius: 4px;
+                pointer-events: none;
+            }
+
+            .count {
+                font-weight: 600;
+                color: #4f46e5;
+            }
+
+            .max-count {
+                color: #888;
+            }
+
+            .textarea-actions {
+                display: flex;
+                gap: 12px;
+                justify-content: flex-end;
+                margin-bottom: 16px;
+            }
+
+            .clear-btn,
+            .submit-btn {
+                padding: 12px 24px;
+                border: none;
+                border-radius: 8px;
+                font-size: 14px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                position: relative;
+                overflow: hidden;
+            }
+
+            .clear-btn {
+                background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+                color: white;
+                box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+            }
+
+            .clear-btn:hover:not(:disabled) {
+                transform: translateY(-2px);
+                box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
+            }
+
+            .clear-btn:active:not(:disabled) {
+                transform: translateY(0);
+            }
+
+            .submit-btn {
+                background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
+                color: white;
+                box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3);
+            }
+
+            .submit-btn:hover:not(:disabled) {
+                transform: translateY(-2px);
+                box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
+            }
+
+            .submit-btn:active:not(:disabled) {
+                transform: translateY(0);
+            }
+
+            .clear-btn:disabled,
+            .submit-btn:disabled {
+                background: #d1d5db;
+                color: #9ca3af;
+                cursor: not-allowed;
+                box-shadow: none;
+                transform: none;
+            }
+
+            .preview-section {
+                background: rgba(255, 255, 255, 0.95);
+                border-radius: 12px;
+                padding: 16px;
+                border: 2px solid rgba(255, 255, 255, 0.2);
+            }
+
+            .preview-title {
+                margin: 0 0 12px 0;
+                color: #4f46e5;
+                font-size: 14px;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+
+            .preview-content {
+                color: #333;
+                line-height: 1.6;
+                white-space: pre-wrap;
+                word-wrap: break-word;
+                background: #f8fafc;
+                padding: 12px;
+                border-radius: 8px;
+                border-left: 4px solid #4f46e5;
+                max-height: 200px;
+                overflow-y: auto;
+            }
+
+            /* Responsive Design */
+            @media (max-width: 768px) {
+                .prompt-textarea-container {
+                    padding: 16px;
+                    margin: 0 16px;
+                    max-width: none;
+                }
+
+                .textarea-actions {
+                    flex-direction: column;
+                }
+
+                .clear-btn,
+                .submit-btn {
+                    width: 100%;
+                }
+            }
+
+            /* Animation for submit button */
+            .submit-btn::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -100%;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+                transition: left 0.5s;
+            }
+
+            .submit-btn:hover::before {
+                left: 100%;
+            }
+        `);
+    }
+
+    @Are.Data
+    async data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            placeholder: 'Enter your message here...',
+            textValue: '',
+            rows: 5,
+            maxLength: 500,
+            showPreview: true,
+            lastSubmittedValue: ''
+        });
+    }
+
+    @Are.EventHandler
+    async A_UI_NODE_onBeforeLoad(
+        @A_Inject(AreNode) node: AreNode,
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ): Promise<void> {
+        logger.log('green', `PromptTextArea is initializing... : <${node.aseid.entity}> : `, node.aseid.toString());
+    }
+
+    @Are.EventHandler
+    async onChange(
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(AreEvent) event: AreEvent<InputEvent>,
+        @A_Inject(AreScene) scene: AreScene,
+    ) {
+        if (event.data.target === null
+            ||
+            store.get('textValue') === (event.data.target as HTMLTextAreaElement).value
+        ) return;
+
+        const newValue = (event.data.target as HTMLTextAreaElement).value;
+        const maxLength = store.get('maxLength');
+
+        // Enforce character limit
+        if (newValue.length > maxLength) {
+            (event.data.target as HTMLTextAreaElement).value = newValue.substring(0, maxLength);
+            return;
+        }
+
+        logger.log('green', `PromptTextArea onChange event triggered... : <${node.aseid.entity}> : `, node.aseid.toString(), newValue);
+
+        store.set('textValue', newValue);
+        await node.update();
+    }
+
+    @Are.EventHandler
+    async onSubmit(
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(AreEvent) event: AreEvent<MouseEvent>,
+        @A_Inject(AreScene) scene: AreScene,
+    ) {
+        const textValue = store.get('textValue');
+        
+        if (textValue.trim().length === 0) {
+            logger.warning('yellow', 'Cannot submit empty text');
+            return;
+        }
+
+        logger.log('green', `PromptTextArea onSubmit event triggered... : <${node.aseid.entity}> : `, node.aseid.toString(), textValue);
+
+        // Store the submitted value for potential future reference
+        store.set('lastSubmittedValue', textValue);
+
+        // Here you could emit a custom event or call a service
+        // For now, we'll just log the submission
+        console.log('Text submitted:', textValue);
+
+        // Optionally clear after submit
+        // store.set('textValue', '');
+        // await node.update();
+    }
+
+    @Are.EventHandler
+    async onClear(
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(AreEvent) event: AreEvent<MouseEvent>,
+        @A_Inject(AreScene) scene: AreScene,
+    ) {
+        logger.log('green', `PromptTextArea onClear event triggered... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+        store.set('textValue', '');
+        await node.update();
+
+        // Focus back to textarea after clearing
+        setTimeout(() => {
+            const textarea = (event.data.target as HTMLElement)?.closest('.prompt-textarea-container')?.querySelector('.prompt-textarea') as HTMLTextAreaElement;
+            if (textarea) {
+                textarea.focus();
+            }
+        }, 100);
+    }
+}

package/examples/jumpstart/src/components/SignInComponent.component.ts

@@ -0,0 +1,127 @@
+import { A_Caller, A_Concept, A_Context, A_Feature, A_Inject, A_Scope } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreNode, AreStore } from "@adaas/are";
+
+export function validateEmail(email: string): boolean {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+export function showAlert(message: string): void {
+    alert(message);
+}
+
+export class SignInComponent extends Are {
+
+
+    @Are.Data
+    async data(
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+
+        store.set({
+            btnName: 'Sign In'
+        });
+    }
+
+    @Are.Styles
+    async styles(
+        @A_Inject(A_Caller) node: AreNode,
+    ): Promise<void> {
+        node.setStyles(` 
+        .card {
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 20px;
+            max-width: 300px;
+            margin: 0 auto;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            position:absolute;
+            top:50%;
+            left:50%;
+            transform: translate(-50%, -50%);
+        }
+            `   );
+    }
+
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ): Promise<void> {
+        logger.info('blue', `SignInComponent template called... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+        node.setTemplate(`
+              <div class="card">
+                <h2>Sign In</h2>
+                <input type="email" id="email" placeholder="Email" />
+                <input type="password" id="password" placeholder="Password" />
+                <a-btn  :name="btnName" :style="{ color: 'red' }"></a-btn>
+              </div>
+            `);
+    }
+
+
+    // @A_Feature.Extend({
+    //     scope: [SignInComponent]
+    // })
+    // async A_UI_NODE_onBeforeLoad(
+    //     @A_Inject(AreNode) node: AreNode,
+    //     @A_Inject(A_Scope) scope: A_Scope,
+    //     @A_Inject(A_UI_NodeStore) store: A_UI_NodeStore,
+    //     @A_Inject(A_Logger) logger: A_Logger,
+    // ): Promise<void> {
+
+    //     logger.log('green', `SignInComponent is initializing... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+
+    //     store.data.set('btnName', 'Custom Sign In Button');
+    // }
+
+
+    // private addListeners(): void {
+    //     const btn = document.getElementById("signInBtn") as HTMLButtonElement;
+    //     btn.addEventListener("click", () => this.signIn());
+    // }
+
+    // private async signIn(): Promise<void> {
+    //     const email = (document.getElementById("email") as HTMLInputElement).value;
+    //     const password = (document.getElementById("password") as HTMLInputElement).value;
+
+    //     const signInCommand = new SignInCommand({
+    //         username: email,
+    //         password
+    //     });
+
+
+    //     A_Context.scope(this).register(signInCommand);
+
+    //     await signInCommand.execute();
+
+    //     console.log("SignIn Command Result:", signInCommand.toJSON());
+    // }
+
+
+    // @A_Feature.Extend({
+    //     name: A_CommandFeatures.onComplete,
+    //     scope: {
+    //         include: [SignInCommand]
+    //     }
+    // })
+    // async handleSuccessSignIn(
+    //     @A_Inject(A_Memory) memory: A_Memory<{ token: SerializedToken }>,
+    //     @A_Inject(A_Caller) command: SignInCommand,
+    // ) {
+
+    //     console.log("Sign-in completed with result:", command.result);
+
+    //     alert(command.result)
+
+    //     const resultToken = await memory.get('token')
+
+    //     const token = new Token(resultToken);
+
+    //     memory.set('token', token as any);
+    // }
+}