@adaas/are-html 0.0.2

package/examples/dashboard/src/components/DashboardApp.component.ts

@@ -0,0 +1,31 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardApp extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <div class="dashboard">
+                <dashboard-header></dashboard-header>
+                <dashboard-sidebar></dashboard-sidebar>
+                <dashboard-main></dashboard-main>
+            </div>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+
+        store.set({
+            appName: 'ARE Dashboard',
+        });
+    }
+}

package/examples/dashboard/src/components/DashboardHeader.component.ts

@@ -0,0 +1,40 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardHeader extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <header class="header">
+                <dashboard-logo></dashboard-logo>
+                <dashboard-nav></dashboard-nav>
+                <div class="header-actions">
+                    <div class="header-search">
+                        <span class="header-search-icon">⌕</span>
+                        <span class="header-search-text">{{searchPlaceholder}}</span>
+                    </div>
+                    <div class="header-notification">
+                        🔔
+                        <span class="header-notification-badge"></span>
+                    </div>
+                </div>
+            </header>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            title: 'Dashboard',
+            searchPlaceholder: 'Search…',
+        });
+    }
+}

package/examples/dashboard/src/components/DashboardLogo.component.ts

@@ -0,0 +1,29 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardLogo extends Are {
+
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <div class="logo">
+                <div class="logo-icon">A</div>
+                <span class="logo-text">{{brandName}}</span>
+            </div>
+        `);
+    }
+
+    @Are.Data
+    async data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            brandName: 'ARE Platform',
+        });
+    }
+}

package/examples/dashboard/src/components/DashboardMain.component.ts

@@ -0,0 +1,57 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are } from "@adaas/are";
+import { AreEvent } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreScene } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardMain extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <main class="main">
+                <div class="main-header">
+                    <div>
+                        <h1 class="main-title">{{pageTitle}}</h1>
+                        <div class="main-subtitle">{{pageSubtitle}}</div>
+                    </div>
+                    <div class="main-actions">
+                        <button class="btn btn-outline"><span class="btn-icon">⬇</span> {{exportLabel}}</button>
+                        <button class="btn btn-primary" @click="(e)=>!!pageTitle? $testHandler(e,'item'):null"><span class="btn-icon">+</span>  {{addLabel}}</button>
+                    </div>
+                </div>
+                <dashboard-stats></dashboard-stats>
+                <dashboard-table></dashboard-table>
+            </main>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            pageTitle: 'Overview',
+            pageSubtitle: 'Welcome back, John. Here\'s what\'s happening today.',
+            exportLabel: 'Export',
+            addLabel: 'New Record',
+        });
+    }
+
+    @Are.EventHandler
+    async testHandler(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreScene) scene: AreScene,
+    ) {
+
+        console.log('Button clicked! This is a test event handler.', event);
+    }
+}

package/examples/dashboard/src/components/DashboardMenu.component.ts

@@ -0,0 +1,94 @@
+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 DashboardMenu extends Are {
+
+    @Are.Template
+     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 @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>
+            <ul class="menu">
+                <li 
+                $for="item in items" @click="$handleClick(item.name)" 
+                :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" class="menu-badge">{{item.badge}}</span>
+                {{item.badge}}
+                </li>
+            </ul>
+        `);
+    }
+
+    @Are.Data
+     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
+    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/dashboard/src/components/DashboardNav.component.ts

@@ -0,0 +1,28 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardNav extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <nav class="nav">
+                <dashboard-nav-item></dashboard-nav-item>
+            </nav>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            section: 'navigation',
+        });
+    }
+}

package/examples/dashboard/src/components/DashboardNavItem.component.ts

@@ -0,0 +1,32 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardNavItem extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <span class="nav-item nav-item-active">{{label1}}</span>
+            <span class="nav-item">{{label2}}</span>
+            <span class="nav-item">{{label3}}</span>
+            <span class="nav-item">{{label4}}</span>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            label1: 'Overview',
+            label2: 'Analytics',
+            label3: 'Reports',
+            label4: 'Settings',
+        });
+    }
+}

package/examples/dashboard/src/components/DashboardSidebar.component.ts

@@ -0,0 +1,43 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreEvent } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardSidebar extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <aside class="sidebar">
+            {{section}}
+                <dashboard-user-card></dashboard-user-card>
+                <dashboard-menu></dashboard-menu>
+            </aside>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            section: 'sidebar',
+        });
+    }
+
+    @Are.EventHandler
+    async menuItemClicked(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        console.log('Sidebar clicked!', event.get('section'));
+
+        store.set('section', event.get('section') );
+
+    }
+}

package/examples/dashboard/src/components/DashboardStatCard.component.ts

@@ -0,0 +1,71 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardStatCard extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <div class="stat-card">
+                <div class="stat-card-header">
+                    <div class="stat-label">{{label1}}</div>
+                    <div class="stat-icon stat-icon-purple">👤</div>
+                </div>
+                <div class="stat-value">{{value1}}</div>
+                <div class="stat-change"><span class="stat-change-icon">↑</span> {{change1}}</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-card-header">
+                    <div class="stat-label">{{label2}}</div>
+                    <div class="stat-icon stat-icon-green">💰</div>
+                </div>
+                <div class="stat-value">{{value2}}</div>
+                <div class="stat-change"><span class="stat-change-icon">↑</span> {{change2}}</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-card-header">
+                    <div class="stat-label">{{label3}}</div>
+                    <div class="stat-icon stat-icon-red">📊</div>
+                </div>
+                <div class="stat-value">{{value3}}</div>
+                <div class="stat-change stat-change-down"><span class="stat-change-icon">↓</span> {{change3}}</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-card-header">
+                    <div class="stat-label">{{label4}}</div>
+                    <div class="stat-icon stat-icon-blue">🎯</div>
+                </div>
+                <div class="stat-value">{{value4}}</div>
+                <div class="stat-change"><span class="stat-change-icon">↑</span> {{change4}}</div>
+            </div>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            label1: 'Total Users',
+            value1: '24,521',
+            change1: '+12.5% from last month',
+
+            label2: 'Revenue',
+            value2: '$48,390',
+            change2: '+8.2% from last month',
+
+            label3: 'Active Sessions',
+            value3: '1,429',
+            change3: '-3.1% from last hour',
+
+            label4: 'Conversion Rate',
+            value4: '3.24%',
+            change4: '+0.8% from last week',
+        });
+    }
+}

package/examples/dashboard/src/components/DashboardStats.component.ts

@@ -0,0 +1,28 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardStats extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <div class="stats">
+                <dashboard-stat-card></dashboard-stat-card>
+            </div>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            section: 'stats',
+        });
+    }
+}

package/examples/dashboard/src/components/DashboardTable.component.ts

@@ -0,0 +1,138 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardTable extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <div class="table-container">
+                <div class="table-header">
+                    <div>
+                        <div class="table-title">{{tableTitle}}</div>
+                        <div class="table-subtitle">{{tableSubtitle}}</div>
+                    </div>
+                    <div class="table-filter">
+                        <button class="table-filter-btn table-filter-btn-active">{{filterAll}}</button>
+                        <button class="table-filter-btn">{{filterActive}}</button>
+                        <button class="table-filter-btn">{{filterPending}}</button>
+                    </div>
+                </div>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>{{col1}}</th>
+                            <th>{{col2}}</th>
+                            <th>{{col3}}</th>
+                            <th>{{col4}}</th>
+                            <th>{{col5}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="table-cell-primary">{{r1c1}}</td>
+                            <td>{{r1c2}}</td>
+                            <td>{{r1c3}}</td>
+                            <td><span class="status-badge status-active"><span class="status-dot"></span> {{r1c4}}</span></td>
+                            <td class="table-cell-secondary">{{r1c5}}</td>
+                        </tr>
+                        <tr>
+                            <td class="table-cell-primary">{{r2c1}}</td>
+                            <td>{{r2c2}}</td>
+                            <td>{{r2c3}}</td>
+                            <td><span class="status-badge status-pending"><span class="status-dot"></span> {{r2c4}}</span></td>
+                            <td class="table-cell-secondary">{{r2c5}}</td>
+                        </tr>
+                        <tr>
+                            <td class="table-cell-primary">{{r3c1}}</td>
+                            <td>{{r3c2}}</td>
+                            <td>{{r3c3}}</td>
+                            <td><span class="status-badge status-active"><span class="status-dot"></span> {{r3c4}}</span></td>
+                            <td class="table-cell-secondary">{{r3c5}}</td>
+                        </tr>
+                        <tr>
+                            <td class="table-cell-primary">{{r4c1}}</td>
+                            <td>{{r4c2}}</td>
+                            <td>{{r4c3}}</td>
+                            <td><span class="status-badge status-inactive"><span class="status-dot"></span> {{r4c4}}</span></td>
+                            <td class="table-cell-secondary">{{r4c5}}</td>
+                        </tr>
+                        <tr>
+                            <td class="table-cell-primary">{{r5c1}}</td>
+                            <td>{{r5c2}}</td>
+                            <td>{{r5c3}}</td>
+                            <td><span class="status-badge status-active"><span class="status-dot"></span> {{r5c4}}</span></td>
+                            <td class="table-cell-secondary">{{r5c5}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <div class="table-footer">
+                    <span>{{footerText}}</span>
+                    <div class="table-pagination">
+                        <button class="table-page-btn table-page-btn-active">1</button>
+                        <button class="table-page-btn">2</button>
+                        <button class="table-page-btn">3</button>
+                        <button class="table-page-btn">→</button>
+                    </div>
+                </div>
+            </div>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            tableTitle: 'Recent Transactions',
+            tableSubtitle: 'Last 30 days activity',
+
+            filterAll: 'All',
+            filterActive: 'Active',
+            filterPending: 'Pending',
+
+            col1: 'Transaction',
+            col2: 'Customer',
+            col3: 'Amount',
+            col4: 'Status',
+            col5: 'Date',
+
+            r1c1: 'INV-001',
+            r1c2: 'Alice Johnson',
+            r1c3: '$1,250.00',
+            r1c4: 'Active',
+            r1c5: 'Mar 28, 2026',
+
+            r2c1: 'INV-002',
+            r2c2: 'Bob Williams',
+            r2c3: '$890.00',
+            r2c4: 'Pending',
+            r2c5: 'Mar 27, 2026',
+
+            r3c1: 'INV-003',
+            r3c2: 'Carol Davis',
+            r3c3: '$2,100.00',
+            r3c4: 'Active',
+            r3c5: 'Mar 26, 2026',
+
+            r4c1: 'INV-004',
+            r4c2: 'Dan Martinez',
+            r4c3: '$450.00',
+            r4c4: 'Inactive',
+            r4c5: 'Mar 25, 2026',
+
+            r5c1: 'INV-005',
+            r5c2: 'Eve Thompson',
+            r5c3: '$3,400.00',
+            r5c4: 'Active',
+            r5c5: 'Mar 24, 2026',
+
+            footerText: 'Showing 1-5 of 24 results',
+        });
+    }
+}

package/examples/dashboard/src/components/DashboardUserCard.component.ts

@@ -0,0 +1,39 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+
+
+export class DashboardUserCard extends Are {
+
+    @Are.Template
+     template(
+        @A_Inject(A_Caller) node: AreNode,
+    ) {
+        node.setContent(`
+            <div class="user-card">
+                <div class="user-avatar">{{initials}}</div>
+                <div class="user-info">
+                    <div class="user-name">{{fullName}}</div>
+                    <div class="user-role">{{role}}</div>
+                </div>
+                <div class="user-status">
+                    <span class="user-status-dot"></span>
+                    {{status}}
+                </div>
+            </div>
+        `);
+    }
+
+    @Are.Data
+     data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            initials: 'JD',
+            fullName: 'John Doe',
+            role: 'Administrator',
+            status: 'Online',
+        });
+    }
+}