create-outsystems-astro 0.4.2 → 0.5.0

package/template/src/framework/angular/Counter.component.ts

@@ -11,17 +11,29 @@ import { Operation, setCounterCount } from "../../lib/setCounterCount";
   standalone: true,
   template: `
     <div class="counter-title" slot="header">Counter</div>
-
-    <div class="counter-controls">
-      <button (click)="subtract()">-</button>
-      <pre>{{ count() }}</pre>
-      <button (click)="add()">+</button>
-    </div>
-
-    <div class="counter-message">
-      <button (click)="showParentMessage()">Send value</button>
+    <div class="card-grid">
+      <div class="card">
+        Internal counter controls. It keeps state within the component.
+        <div class="card-content">
+          <div class="counter-controls">
+            <button (click)="subtract()">-</button>
+            <pre>{{ count() }}</pre>
+            <button (click)="add()">+</button>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        The button sends the current count value to a function in the parent
+        component.
+        <div class="card-content">
+          <div>
+            <button class="card-btn" (click)="showParentMessage()">
+              Send value
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
-
     <div class="counter-logos">
       <img [src]="outSystemsLogo" alt="OutSystems logo" />
       <img [src]="astroLogo" alt="Astro logo" />
@@ -48,11 +60,11 @@ export default class CounterComponent implements OnInit {
   showParentMessage() {
     const fnName = this.messageFunctionName();
 
-    // Safety check to ensure the function exists on window/document
+    // Safety check to ensure the function exists on window.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (typeof (document as any)[fnName] === "function") {
+    if (typeof (window as any)[fnName] === "function") {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (document as any)[fnName](this.count());
+      (window as any)[fnName](this.count());
     }
   }
 

package/template/src/framework/react/Counter.tsx

@@ -1,3 +1,4 @@
+import { useStore } from "@nanostores/react";
 import { useState } from "react";
 
 import AstroLogo from "../../images/astro.png?url";
@@ -20,19 +21,50 @@ export default function Counter({
   const subtract = () =>
     setCount((i) => setCounterCount(i, Operation.Subtract));
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const showParentMessage = () => (document as any)[showMessage](count);
+  const showParentMessage = () => (window as any)[showMessage](count);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const nanoStoreValue = useStore((window as any).Stores["reactStore"]);
 
   return (
     <>
       {header}
-      <div className="counter-controls">
-        <button onClick={subtract}>-</button>
-        <pre>{count}</pre>
-        <button onClick={add}>+</button>
-      </div>
-      <div>{children}</div>
-      <div className="counter-message">
-        <button onClick={showParentMessage}>Send value</button>
+      <div className="card-grid">
+        <div className="card">
+          Internal counter controls. It keeps state within the component.
+          <div className="card-content">
+            <div className="counter-controls">
+              <button onClick={subtract}>-</button>
+              <pre>{count}</pre>
+              <button onClick={add}>+</button>
+            </div>
+          </div>
+        </div>
+        <div className="card">
+          The button sends the current count value to a function in the parent
+          component.
+          <div className="card-content">
+            <div>
+              <button className="card-btn" onClick={showParentMessage}>
+                Send value
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="card">
+          Slot content coming in to the component
+          <div className="card-content">
+            <div>{children}</div>
+          </div>
+        </div>
+        <div className="card">
+          Nano Store content
+          <div className="card-content">
+            <div>
+              <strong>Nano Store value:</strong>
+              <div id="nanostore">{nanoStoreValue}</div>
+            </div>
+          </div>
+        </div>
       </div>
       <div className="counter-logos">
         <img alt="OutSystems logo" src={OutSystemsLogo} />

package/template/src/framework/vue/Counter.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useStore } from "@nanostores/vue";
 
-import OutSystemsLogo from "../../images/outsystems.png?url";
 import AstroLogo from "../../images/astro.png?url";
+import OutSystemsLogo from "../../images/outsystems.png?url";
 import { Operation, setCounterCount } from "../../lib/setCounterCount";
 
 const props = defineProps<{
@@ -21,29 +22,63 @@ const subtract = () => {
 };
 
 const showParentMessage = () => {
-  (document as Document)[props.showMessage]?.(count.value);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any)[props.showMessage](count.value);
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const nanoStoreValue = useStore((window as any).Stores["vueStore"]);
 </script>
 
 <template>
-  <div>
-    <slot name="header" />
+  <slot name="header" />
 
-    <div class="counter-controls">
-      <button @click="subtract">-</button>
-      <pre>{{ count }}</pre>
-      <button @click="add">+</button>
+  <div class="card-grid">
+    <div class="card">
+      Internal counter controls. It keeps state within the component.
+      <div class="card-content">
+        <div class="counter-controls">
+          <button @click="subtract">-</button>
+          <pre>{{ count }}</pre>
+          <button @click="add">+</button>
+        </div>
+      </div>
     </div>
 
-    <slot />
+    <div class="card">
+      The button sends the current count value to a function in the parent
+      component.
+      <div class="card-content">
+        <div>
+          <button class="card-btn" @click="showParentMessage">
+            Send value
+          </button>
+        </div>
+      </div>
+    </div>
 
-    <div class="counter-message">
-      <button @click="showParentMessage">Send value</button>
+    <div class="card">
+      Slot content coming in to the component
+      <div class="card-content">
+        <div>
+          <slot />
+        </div>
+      </div>
     </div>
 
-    <div class="counter-logos">
-      <img :src="OutSystemsLogo" alt="OutSystems logo" />
-      <img :src="AstroLogo" alt="Astro logo" />
+    <div class="card">
+      Nano Store content
+      <div class="card-content">
+        <div>
+          <strong>Nano Store value:</strong>
+          <div id="nanostore">{{ nanoStoreValue }}</div>
+        </div>
+      </div>
     </div>
   </div>
+
+  <div class="counter-logos">
+    <img alt="OutSystems logo" :src="OutSystemsLogo" />
+    <img alt="Astro logo" :src="AstroLogo" />
+  </div>
 </template>

package/template/src/pages/angular/angular-counter.astro

@@ -1,15 +1,31 @@
 ---
-import CounterComponent from '../../framework/angular/Counter.component';
+import CounterComponent from "../../framework/angular/Counter.component";
 import styles from "../../styles/index.css?url";
 const initialCount = 5;
 const showMessage = "showMessage";
 ---
+
 <link href={styles} rel="stylesheet" />
 <script is:inline>
-    document.showMessage = (count) => {
+    window.showMessage = (count) => {
         document.getElementById("counter").textContent = count;
     };
 </script>
-<CounterComponent client:visible initialCount={initialCount} showMessage={showMessage}>
-</CounterComponent>
-<div style="text-align: center; margin-top: 20px;">Counter value: <span id="counter"></span></div>
+<div class="counter-title">HTML Content</div>
+<div class="card-grid">
+    <div class="card">
+        Value sent back from component.
+        <div class="card-content">
+            <div style="text-align: center; margin-top: 30px;">
+                Counter value sent back: <br /><span id="counter"></span>
+            </div>
+        </div>
+    </div>
+</div>
+<hr />
+<CounterComponent
+    client:visible
+    initialCount={initialCount}
+    showMessage={showMessage}
+/>
+

package/template/src/pages/react/react-counter.astro

@@ -1,21 +1,58 @@
 ---
-import CounterComponent from '../../framework/react/Counter';
+import CounterComponent from "../../framework/react/Counter";
 import styles from "../../styles/index.css?url";
 const initialCount = 5;
 const showMessage = "showMessage";
 ---
+
 <link href={styles} rel="stylesheet" />
-<script is:inline>
-    document.showMessage = (count) => {
+<script>
+    import { atom } from "nanostores";
+    window["showMessage"] = (count) => {
         document.getElementById("counter").textContent = count;
     };
+    window.Stores = [];
+    window.Stores["reactStore"] = atom("Test Value");
+    document.addEventListener("DOMContentLoaded", function () {
+        const input = document.getElementById("store");
+        input.value = window.Stores["reactStore"].get();
+    });
 </script>
-<CounterComponent client:only="react" initialCount={initialCount} showMessage={showMessage}>
-    <div class="counter-title" slot="header">
-        Counter
+<div class="counter-title">HTML Content</div>
+<div class="card-grid">
+    <div class="card">
+        Value sent back from component.
+        <div class="card-content">
+            <div style="text-align: center; margin-top: 30px;">
+                Counter value sent back: <br /><span id="counter"></span>
+            </div>
+        </div>
     </div>
+    <div class="card">
+        Update Nano Store value
+        <div class="card-content">
+            <div style="text-align: center; margin-top: 30px;">
+                <input
+                    id="store"
+                    placeholder="Type something..."
+                    type="text"
+                /><button
+                    class="card-btn"
+                    onclick="window.Stores['reactStore'].set(document.getElementById('store').value)"
+                    >Update Store</button
+                >
+            </div>
+        </div>
+    </div>
+</div>
+<hr />
+<CounterComponent
+    client:only="react"
+    initialCount={initialCount}
+    showMessage={showMessage}
+>
+    <div class="counter-title" slot="header">Counter Component</div>
     <div style="text-align: center;">
-        <p>Slot content!</p>
+        <p><strong>This is content passed into the component.</strong></p>
     </div>
 </CounterComponent>
-<div style="text-align: center; margin-top: 20px;">Counter value: <span id="counter"></span></div>

package/template/src/pages/vue/vue-counter.astro

@@ -4,18 +4,59 @@ import styles from "../../styles/index.css?url";
 const initialCount = 5;
 const showMessage = "showMessage";
 ---
+
+<link href={styles} rel="stylesheet" />
+<script>
+    import { atom } from "nanostores";
+    window["showMessage"] = (count) => {
+        document.getElementById("counter").textContent = count;
+    };
+    window.Stores = [];
+    window.Stores["vueStore"] = atom("Test Value");
+    document.addEventListener("DOMContentLoaded", function () {
+        const input = document.getElementById("store");
+        input.value = window.Stores["vueStore"].get();
+    });
+</script>
+<div class="counter-title">HTML Content</div>
+<div class="card-grid">
+    <div class="card">
+        Value sent back from component.
+        <div class="card-content">
+            <div style="text-align: center; margin-top: 30px;">
+                Counter value sent back: <br /><span id="counter"></span>
+            </div>
+        </div>
+    </div>
+    <div class="card">
+        Update Nano Store value
+        <div class="card-content">
+            <div style="text-align: center; margin-top: 30px;">
+                <input
+                    id="store"
+                    placeholder="Type something..."
+                    type="text"
+                /><button
+                    class="card-btn"
+                    onclick="window.Stores['vueStore'].set(document.getElementById('store').value)"
+                    >Update Store</button
+                >
+            </div>
+        </div>
+    </div>
+</div>
+<hr />
 <link href={styles} rel="stylesheet" />
 <script is:inline>
-    document.showMessage = (count) => {
+    window.showMessage = (count) => {
         document.getElementById("counter").textContent = count;
     };
 </script>
 <CounterComponent client:only="vue" initialCount={initialCount} showMessage={showMessage}>
     <div class="counter-title" slot="header">
-        Counter
+        Counter Component
     </div>
     <div style="text-align: center;">
-        <p>Slot content!</p>
+        <p>This is content passed into the component.</p>
     </div>
 </CounterComponent>
-<div style="text-align: center; margin-top: 20px;">Counter value: <span id="counter"></span></div>

package/template/src/styles/index.css

@@ -11,10 +11,12 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
   margin-top: 0.5em;
   place-items: center;
+  border: 1;
 }
 
 .counter-message,
 .logos {
+  font-size: 1.2em;
   text-align: center;
 }
 
@@ -28,3 +30,66 @@
 .counter-logos img {
   width: 150px;
 }
+
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Add shadows to create the "card" effect */
+  transition: 0.3s; /* Smooth transition for hover effects */
+  border-radius: 5px; /* Rounded corners */
+  overflow: hidden; /* Ensures content stays within the rounded corners */
+  background-color: #fff;
+  padding: 10px;
+}
+
+/* On mouse-over, add a deeper shadow */
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.card-image {
+  width: 100%; /* Image takes full width of the card */
+  height: 200px; /* Fixed height for consistency */
+  object-fit: cover; /* Ensures image covers the area without distortion */
+}
+
+.card-content {
+  padding: 16px; /* Add some padding inside the card container */
+}
+
+.card-title {
+  margin-top: 0;
+  font-size: 1.25rem;
+}
+
+.card-description {
+  color: #555;
+}
+
+.card-link {
+  display: inline-block;
+  margin-top: 10px;
+  color: dodgerblue;
+  text-decoration: none;
+}
+
+.card-grid {
+  display: grid;
+  /* Automatically fill columns with a minimum width of 250px and maximum of 1fr */
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 24px; /* Space between cards */
+  padding: 24px;
+}
+
+.card-btn {
+  margin-top: 20px;
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  align-self: flex-start; /* Button size */
+}
+
+.card-btn:hover {
+  background-color: #0056b3;
+}

package/template/test/e2e/react/react-counter.spec.ts

@@ -6,11 +6,13 @@ test.beforeEach(async ({ page }) => {
 
 test.describe("Has values", () => {
   test("Should have header", async ({ page }) => {
-    await expect(page.getByText("Counter")).toBeVisible();
+    await expect(page.getByText("Counter Component")).toBeVisible();
   });
 
   test("Should have slot content", async ({ page }) => {
-    await expect(page.getByText("Slot content")).toBeVisible();
+    await expect(
+      page.getByText("This is content passed into the component"),
+    ).toBeVisible();
   });
 });
 
@@ -30,3 +32,11 @@ test.describe("Change counter", () => {
     await expect(page.locator("span#counter")).toContainText("5");
   });
 });
+
+test.describe("Update Nano Store", () => {
+  test("Should update Nano Store", async ({ page }) => {
+    await page.locator("#store").fill("Updated Value");
+    await page.getByRole("button", { name: "Update Store" }).click();
+    await expect(page.locator("#nanostore")).toHaveText("Updated Value");
+  });
+});

package/template/test/e2e/vue/vue-counter.spec.ts

@@ -6,11 +6,13 @@ test.beforeEach(async ({ page }) => {
 
 test.describe("Has values", () => {
   test("Should have header", async ({ page }) => {
-    await expect(page.getByText("Counter")).toBeVisible();
+    await expect(page.getByText("Counter Component")).toBeVisible();
   });
 
   test("Should have slot content", async ({ page }) => {
-    await expect(page.getByText("Slot content")).toBeVisible();
+    await expect(
+      page.getByText("This is content passed into the component"),
+    ).toBeVisible();
   });
 });
 
@@ -30,3 +32,11 @@ test.describe("Change counter", () => {
     await expect(page.locator("span#counter")).toContainText("5");
   });
 });
+
+test.describe("Update Nano Store", () => {
+  test("Should update Nano Store", async ({ page }) => {
+    await page.locator("#store").fill("Updated Value");
+    await page.getByRole("button", { name: "Update Store" }).click();
+    await expect(page.locator("#nanostore")).toHaveText("Updated Value");
+  });
+});

package/template/test/integration/angular/Counter.component.spec.ts

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/angular";
-import { vi } from "vitest";
+import { it, vi } from "vitest";
 import CounterComponent from "../../../src/framework/angular/Counter.component";
 
 describe("CounterComponent (Testing Library)", () => {

package/template/test/integration/react/Counter.test.tsx

@@ -1,4 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { it, vi } from "vitest";
+
 import Counter from "../../../src/framework/react/Counter";
 
 describe("Counter", () => {
@@ -9,14 +11,30 @@ describe("Counter", () => {
     showMessage: "mockFunction",
   };
 
+  let capturedListener: ((val: string) => void) | undefined;
+  let storeValue = "Mocked Nano Value";
+
   beforeEach(() => {
-    // Mock the document function
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (document as any).mockFunction = vi.fn();
+    (window as any).mockFunction = vi.fn();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).Stores = {
+      reactStore: {
+        get: vi.fn(() => storeValue),
+        listen: vi.fn((callback) => {
+          capturedListener = callback;
+          callback(storeValue);
+          return () => {};
+        }),
+      },
+    };
   });
 
   afterEach(() => {
     vi.clearAllMocks();
+    capturedListener = undefined;
+    storeValue = "Mocked Nano Value";
   });
 
   it("renders the initial count", () => {
@@ -36,23 +54,30 @@ describe("Counter", () => {
 
   it("increments count when add button is clicked", () => {
     render(<Counter {...defaultProps} />);
-    const addButton = screen.getByRole("button", { name: "+" });
-    fireEvent.click(addButton);
+    fireEvent.click(screen.getByRole("button", { name: "+" }));
     expect(screen.getByText("6")).toBeInTheDocument();
   });
 
   it("decrements count when subtract button is clicked", () => {
     render(<Counter {...defaultProps} />);
-    const subtractButton = screen.getByRole("button", { name: "-" });
-    fireEvent.click(subtractButton);
+    fireEvent.click(screen.getByRole("button", { name: "-" }));
     expect(screen.getByText("4")).toBeInTheDocument();
   });
 
   it("calls the show message function", () => {
     render(<Counter {...defaultProps} />);
-    const sendButton = screen.getByRole("button", { name: "Send value" });
-    fireEvent.click(sendButton);
+    fireEvent.click(screen.getByRole("button", { name: "Send value" }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((document as any).mockFunction).toHaveBeenCalledWith(5);
+    expect((window as any).mockFunction).toHaveBeenCalledWith(5);
+  });
+
+  it("updates the component when the nanostore value changes", async () => {
+    render(<Counter {...defaultProps} />);
+    expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
+    await act(async () => {
+      storeValue = "Updated Nano Value";
+      capturedListener?.("Updated Nano Value");
+    });
+    expect(await screen.findByText(/Updated Nano Value/i)).toBeInTheDocument();
   });
 });

package/template/test/integration/vue/Counter.test.ts

@@ -1,4 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/vue";
+import { fireEvent, render, screen, waitFor } from "@testing-library/vue";
+import { it, vi } from "vitest";
+
 import Counter from "../../../src/framework/vue/Counter.vue";
 
 describe("Counter", () => {
@@ -7,15 +9,34 @@ describe("Counter", () => {
     showMessage: "mockFunction",
   };
 
+  let capturedListener: ((val: string) => void) | undefined;
+  let storeValue = "Mocked Nano Value";
+
   beforeEach(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (document as any).mockFunction = vi.fn();
+    (window as any).mockFunction = vi.fn();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).Stores = {
+      vueStore: {
+        get: vi.fn(() => storeValue),
+        subscribe: vi.fn((callback) => {
+          capturedListener = callback;
+          callback(storeValue);
+          return () => {};
+        }),
+      },
+    };
   });
 
   afterEach(() => {
     vi.clearAllMocks();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    delete (document as any).mockFunction;
+    delete (window as any).mockFunction;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any).Stores;
+    capturedListener = undefined;
+    storeValue = "Mocked Nano Value";
   });
 
   it("renders the initial count", () => {
@@ -88,6 +109,23 @@ describe("Counter", () => {
 
     await fireEvent.click(screen.getByRole("button", { name: "Send value" }));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((document as any).mockFunction).toHaveBeenCalledWith(5);
+    expect((window as any).mockFunction).toHaveBeenCalledWith(5);
+  });
+
+  it("updates the component when the nanostore value changes", async () => {
+    render(Counter, {
+      props: defaultProps,
+      slots: {
+        default: "<div><p>Test Children</p></div>",
+        header: "<div>Test Header</div>",
+      },
+    });
+
+    expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
+    await waitFor(async () => {
+      storeValue = "Updated Nano Value";
+      capturedListener?.("Updated Nano Value");
+    });
+    expect(await screen.findByText(/Updated Nano Value/i)).toBeInTheDocument();
   });
 });