npm - @adaas/are-html - Versions diffs - 0.0.11 → 0.0.13 - Mend

@adaas/are-html 0.0.11 → 0.0.13

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 (113) hide show

package/examples/component-styles/public/index.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARE – Component Styles</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f4f6f9;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  <are-root id="app" default="app-page"></are-root>
+  <script type="module" src="/{{BUNDLE_ID}}.js"></script>
+</body>
+</html>

package/examples/component-styles/src/components/AppPage.component.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode, AreStore } from "@adaas/are";
+import { AreHTMLNode } from "@adaas/are-html/node";
+/**
+ * AppPage — the shell component mounted at <are-root id="app">.
+ * Owns the page layout styles and composes TheCard, TheButton, TheAlert.
+ */
+export class AppPage extends Are {
+    @Are.Styles
+    styles(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+    ): void {
+        node.setStyles(`
+            .app-page {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 24px;
+                padding: 48px 24px;
+                min-height: 100vh;
+            }
+            .app-page__heading {
+                font-size: 1.9rem;
+                font-weight: 700;
+                color: #1a1a2e;
+                text-align: center;
+            }
+            .app-page__sub {
+                font-size: 1rem;
+                color: #6b7280;
+                text-align: center;
+                max-width: 500px;
+            }
+            .app-page__row {
+                display: flex;
+                gap: 12px;
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+        `);
+    }
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+    ): void {
+        node.setContent(`
+            <div class="app-page">
+                <h1 class="app-page__heading">@Are.Styles Pipeline</h1>
+                <p class="app-page__sub">
+                    Each component below owns its CSS — injected as a scoped
+                    &lt;style&gt; block in &lt;head&gt; when the component mounts.
+                </p>
+                <the-card></the-card>
+                <the-alert :type="'success'" :message="'Styles injected from TheAlert component ✓'"></the-alert>
+                <the-alert :type="'warning'" :message="'A second TheAlert with a different type variant'"></the-alert>
+                <div class="app-page__row">
+                    <the-button :label="'Primary'"   :variant="'primary'"></the-button>
+                    <the-button :label="'Secondary'" :variant="'secondary'"></the-button>
+                    <the-button :label="'Danger'"    :variant="'danger'"></the-button>
+                </div>
+            </div>
+        `);
+    }
+}

package/examples/component-styles/src/components/TheAlert.component.ts ADDED Viewed

@@ -0,0 +1,81 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode, AreStore } from "@adaas/are";
+import { AreHTMLNode } from "@adaas/are-html/node";
+/**
+ * TheAlert — a styled status banner.
+ * Shows how @Are.Styles can produce conditional-looking CSS
+ * by injecting all variant rules and switching via class.
+ */
+export class TheAlert extends Are {
+    props: Record<string, any> = {
+        type: {
+            type: 'string',
+            default: 'info',   // 'info' | 'success' | 'warning' | 'error'
+        },
+        message: {
+            type: 'string',
+            default: '',
+        },
+    };
+    @Are.Styles
+    styles(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+    ): void {
+        node.setStyles(`
+            .are-alert {
+                display: flex;
+                align-items: flex-start;
+                gap: 12px;
+                padding: 14px 18px;
+                border-radius: 8px;
+                font-size: 0.9rem;
+                line-height: 1.5;
+                border-left: 4px solid transparent;
+            }
+            .are-alert__icon  { font-size: 1.1rem; flex-shrink: 0; }
+            .are-alert__text  { flex: 1; }
+            .are-alert--info    { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
+            .are-alert--success { background: #f0fdf4; border-color: #22c55e; color: #166534; }
+            .are-alert--warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
+            .are-alert--error   { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
+        `);
+    }
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ): void {
+        node.setContent(`
+            <div class="are-alert are-alert--{{type}}">
+                <span class="are-alert__icon">{{icon}}</span>
+                <span class="are-alert__text">{{message}}</span>
+            </div>
+        `);
+    }
+    @Are.Data
+    data(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ): void {
+        const type = store.get('type') ?? 'info';
+        const icons: Record<string, string> = {
+            info:    'ℹ️',
+            success: '✅',
+            warning: '⚠️',
+            error:   '❌',
+        };
+        store.set({
+            type,
+            icon:    icons[type] ?? icons.info,
+            message: store.get('message') ?? 'This is an alert message.',
+        });
+    }
+}

package/examples/component-styles/src/components/TheButton.component.ts ADDED Viewed

@@ -0,0 +1,71 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode, AreStore } from "@adaas/are";
+import { AreHTMLNode } from "@adaas/are-html/node";
+/**
+ * TheButton — a styled button component.
+ * Uses @Are.Styles to scope its own CSS so it never leaks into other components.
+ */
+export class TheButton extends Are {
+    props: Record<string, any> = {
+        label: {
+            type: 'string',
+            default: 'Click me',
+        },
+        variant: {
+            type: 'string',
+            default: 'primary',  // 'primary' | 'secondary' | 'danger'
+        },
+    };
+    @Are.Styles
+    styles(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+    ): void {
+        node.setStyles(`
+            .are-btn {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: 10px 22px;
+                font-size: 0.9rem;
+                font-weight: 600;
+                border: none;
+                border-radius: 8px;
+                cursor: pointer;
+                transition: opacity .15s, transform .1s;
+                letter-spacing: 0.02em;
+            }
+            .are-btn:hover  { opacity: .88; }
+            .are-btn:active { transform: scale(.97); }
+            .are-btn--primary   { background: #4f46e5; color: #fff; }
+            .are-btn--secondary { background: #e5e7eb; color: #374151; }
+            .are-btn--danger    { background: #ef4444; color: #fff; }
+        `);
+    }
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ): void {
+        node.setContent(`
+            <button class="are-btn are-btn--{{variant}}">{{label}}</button>
+        `);
+    }
+    @Are.Data
+    data(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ): void {
+        store.set({
+            label:   store.get('label')   ?? 'Click Me',
+            variant: store.get('variant') ?? 'primary',
+        });
+    }
+}

package/examples/component-styles/src/components/TheCard.component.ts ADDED Viewed

@@ -0,0 +1,64 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode, AreStore } from "@adaas/are";
+import { AreHTMLNode } from "@adaas/are-html/node";
+/**
+ * TheCard — a styled card container.
+ * Demonstrates @Are.Styles injecting a <style> block into <head>.
+ */
+export class TheCard extends Are {
+    @Are.Styles
+    styles(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+    ): void {
+        node.setStyles(`
+            .are-card {
+                background: #ffffff;
+                border-radius: 12px;
+                box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
+                padding: 24px 28px;
+                max-width: 480px;
+                width: 100%;
+            }
+            .are-card__title {
+                font-size: 1.25rem;
+                font-weight: 600;
+                color: #1a1a2e;
+                margin-bottom: 8px;
+            }
+            .are-card__body {
+                font-size: 0.95rem;
+                color: #5a5a7a;
+                line-height: 1.6;
+            }
+        `);
+    }
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ): void {
+        node.setContent(`
+            <div class="are-card">
+                <div class="are-card__title">{{title}}</div>
+                <div class="are-card__body">{{body}}</div>
+            </div>
+        `);
+    }
+    @Are.Data
+    data(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ): void {
+        store.set({
+            title: 'Component Styles Demo',
+            body:  'Each component below injects its own <style> block into the document <head> through the @Are.Styles pipeline.',
+        });
+    }
+}

package/examples/component-styles/src/concept.ts ADDED Viewed

@@ -0,0 +1,70 @@
+import { A_Concept, A_Context } from "@adaas/a-concept";
+import { A_Config, ConfigReader } from "@adaas/a-utils/a-config";
+import { A_Logger, A_LOGGER_ENV_KEYS } from "@adaas/a-utils/a-logger";
+import { A_SignalBus, A_SignalState } from "@adaas/a-utils/a-signal";
+import { A_Polyfill } from "@adaas/a-utils/a-polyfill";
+import { AreContainer, AreInit, AreRoute } from "@adaas/are";
+import { AreRoot, AreHTMLEngine, AreHTMLEngineContext, AreDirectiveIf, AreDirectiveFor } from "src";
+// ── Components ─────────────────────────────────────────────────────────────
+import { AppPage }   from "./components/AppPage.component";
+import { TheCard }   from "./components/TheCard.component";
+import { TheButton } from "./components/TheButton.component";
+import { TheAlert }  from "./components/TheAlert.component";
+(async () => {
+    try {
+        const container = new AreContainer({
+            name: 'ARE Component Styles',
+            components: [
+                // ── UI Components ─────────────────────────────────────────
+                AppPage,
+                TheCard,
+                TheButton,
+                TheAlert,
+                // ── Directives ────────────────────────────────────────────
+                AreDirectiveIf,
+                AreDirectiveFor,
+                // ── Engine ────────────────────────────────────────────────
+                A_SignalBus,
+                AreRoot,
+                ConfigReader,
+                AreHTMLEngine,
+                A_Logger,
+            ],
+            entities: [
+                AreInit,
+                AreRoute,
+            ],
+            fragments: [
+                new AreHTMLEngineContext({ container: document }),
+                new A_SignalState([AreRoute]),
+                new A_Config({
+                    defaults: {
+                        [A_LOGGER_ENV_KEYS.LOG_LEVEL]: 'debug',
+                    },
+                }),
+            ],
+        });
+        const concept = new A_Concept({
+            name: 'adaas-are-example-component-styles',
+            fragments: [
+                new A_Config({
+                    variables: ['CONFIG_VERBOSE', 'DEV_MODE'] as const,
+                    defaults: { CONFIG_VERBOSE: true, DEV_MODE: true },
+                }),
+            ],
+            components: [A_Logger, ConfigReader, A_Polyfill],
+            containers: [container],
+        });
+        await concept.load();
+        await concept.start();
+    } catch (error) {
+        const logger = A_Context.root.resolve<A_Logger>(A_Logger)!;
+        logger.error(error);
+    }
+})();

package/examples/dashboard/dist/index.html CHANGED Viewed

@@ -16,7 +16,7 @@
     <dashboard-app></dashboard-app>
   </are-root>
-  <script type="module" src="./mpmt0gys-1r9rcu.js"></script>
+  <script type="module" src="./mppzjw80-9gwa4h.js"></script>
 </body>
 </html>