feat(demo-pwa): add ionic

packages/demo-pwa/package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@alwatr/fsm": "^2.0.0",
     "@alwatr/logger": "^1.1.5",
-    "@alwatr/signal": "^2.0.0"
+    "@alwatr/signal": "^2.0.0",
+    "@ionic/core": "^7.4.1"
   }
 }

packages/demo-pwa/src/main.css

@@ -1,2 +1,3 @@
 @import '@alwatr/style/main.css';
 @import '@alwatr/style/palettes/h260.css';
+@import '@ionic/core/css/core.css';

packages/demo-pwa/src/main.ts

@@ -1,6 +1,7 @@
 import {render} from '@alwatr/fract';
 
 import './main.css';
+import './share/ionic-component.js'
 import {appLogger} from './share/logger.js';
 import {alwatrPwa, alwatrPwaContainer} from './ui/alwatr-pwa.js';
 

packages/demo-pwa/src/share/ionic-component.ts

@@ -0,0 +1,25 @@
+/* eslint-disable new-cap */
+import {initialize} from '@ionic/core/components';
+import {defineCustomElement as IonButton} from '@ionic/core/components/ion-button.js';
+import {defineCustomElement as IonCardContent} from '@ionic/core/components/ion-card-content.js';
+import {defineCustomElement as IonCardHeader} from '@ionic/core/components/ion-card-header.js';
+import {defineCustomElement as IonCardSubtitle} from '@ionic/core/components/ion-card-subtitle.js';
+import {defineCustomElement as IonCardTitle} from '@ionic/core/components/ion-card-title.js';
+import {defineCustomElement as IonCard} from '@ionic/core/components/ion-card.js';
+import {defineCustomElement as IonProgressBar} from '@ionic/core/components/ion-progress-bar.js';
+import {defineCustomElement as IonSearchbar} from '@ionic/core/components/ion-searchbar.js';
+import {defineCustomElement as IonSegmentButton} from '@ionic/core/components/ion-segment-button.js';
+import {defineCustomElement as IonSegment} from '@ionic/core/components/ion-segment.js';
+
+initialize();
+
+IonButton();
+IonCardContent();
+IonCardHeader();
+IonCardSubtitle();
+IonCardTitle();
+IonCard();
+IonProgressBar();
+IonSearchbar();
+IonSegment();
+IonSegmentButton();

packages/demo-pwa/src/ui/page-test.ts

@@ -1,13 +1,69 @@
-import {AlwatrDynamicDirective, directive, html, type PartInfo} from '@alwatr/fract';
+import {AlwatrDynamicDirective, directive, html, type Part, type PartInfo} from '@alwatr/fract';
 
 export class AlwatrPageTestDirective extends AlwatrDynamicDirective {
   constructor(partInfo: PartInfo) {
     super(partInfo, '<alwatr-page-test>');
   }
 
+  protected progress() {
+    this._logger.logMethod?.('progress');
+    let progress = 0;
+    const progressBar = document.querySelector('ion-progress-bar');
+
+    if (!progressBar) return;
+    setInterval(() => {
+      progressBar.value = progress += 0.01;
+      if (progress > 1) {
+        setTimeout(() => {
+          progressBar.value = progress = 0;
+        }, 1000);
+      }
+    }, 50);
+  }
+
+  override update(_part: Part, props: unknown[]): unknown {
+    this.progress();
+    return super.update(_part, props);
+  }
+
   render(name: string): unknown {
     this._logger.logMethodArgs?.('render', name);
-    return html`<h1>Page ${name}</h1>`;
+    return html`
+      <div class="flex w-full flex-col gap-10">
+        <ion-segment value="default">
+          <ion-segment-button value="default">
+            <ion-label>Default</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="segment">
+            <ion-label>Segment</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="tab">
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="file">
+            <ion-label>File</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-searchbar></ion-searchbar>
+
+        <ion-card>
+          <ion-progress-bar></ion-progress-bar>
+
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+
+          <ion-button fill="clear">Action 1</ion-button>
+          <ion-button fill="clear">Action 2</ion-button>
+        </ion-card>
+      </div>
+    `;
   }
 }
 

yarn.lock

@@ -1493,6 +1493,15 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
+"@ionic/core@^7.4.1":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@ionic/core/-/core-7.4.1.tgz#35ba5fdc0edd19ef5cd9c65a795caf7807f2a904"
+  integrity sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==
+  dependencies:
+    "@stencil/core" "^4.3.0"
+    ionicons "7.1.0"
+    tslib "^2.1.0"
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -2165,6 +2174,16 @@
     "@sigstore/protobuf-specs" "^0.2.1"
     tuf-js "^2.1.0"
 
+"@stencil/core@^2.18.0":
+  version "2.22.3"
+  resolved "https://registry.yarnpkg.com/@stencil/core/-/core-2.22.3.tgz#83987e20bba855c450f6d6780e3a20192603f13f"
+  integrity sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==
+
+"@stencil/core@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@stencil/core/-/core-4.3.0.tgz#ab7c4eedce1bd8947bfefdf6a0c19372f88c7fb6"
+  integrity sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -5134,6 +5153,13 @@ internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+ionicons@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/ionicons/-/ionicons-7.1.0.tgz#25daa91345acedcb0f4fb7da670f5aff2e1f266a"
+  integrity sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==
+  dependencies:
+    "@stencil/core" "^2.18.0"
+
 ip@^1.1.5:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.8.tgz#ae05948f6b075435ed3307acce04629da8cdbf48"