feat: make demo standalone components with tailwind

NativeScript · Dec 7, 2024 · b7caae9 · b7caae9
1 parent b8feb22
commit b7caae9
Show file tree

Hide file tree

Showing 20 changed files with 253 additions and 121 deletions.
diff --git a/apps/nativescript-demo-ng/package.json b/apps/nativescript-demo-ng/package.json
@@ -9,6 +9,7 @@
   "devDependencies": {
     "@nativescript/android": "~8.8.0",
     "@nativescript/ios": "~8.8.0",
+    "@nativescript/tailwind": "^2.1.0",
     "@nativescript/unit-test-runner": "^3.0.1"
   }
 }
diff --git a/apps/nativescript-demo-ng/project.json b/apps/nativescript-demo-ng/project.json
@@ -31,39 +31,20 @@
         }
       }
     },
-    "ios": {
-      "executor": "@nativescript/nx:build",
-      "options": {
-        "platform": "ios"
-      },
-      "configurations": {
-        "build": {
-          "copyTo": "./dist/build.ipa"
-        },
-        "prod": {
-          "combineWithConfig": "build:prod"
-        }
-      }
-    },
-    "android": {
-      "executor": "@nativescript/nx:build",
+    "debug": {
+      "executor": "@nativescript/nx:debug",
       "options": {
-        "platform": "android"
+        "noHmr": true,
+        "uglify": false,
+        "release": false,
+        "forDevice": false,
+        "prepare": false
       },
-      "configurations": {
-        "build": {
-          "copyTo": "./dist/build.apk"
-        },
-        "prod": {
-          "combineWithConfig": "build:prod"
-        }
-      }
+      "dependsOn": ["^build"]
     },
     "clean": {
-      "executor": "@nativescript/nx:build",
-      "options": {
-        "clean": true
-      }
+      "executor": "@nativescript/nx:clean",
+      "options": {}
     },
     "lint": {
       "executor": "@nx/eslint:lint"
@@ -74,14 +55,7 @@
       "options": {
         "coverage": false
       },
-      "configurations": {
-        "android": {
-          "platform": "android"
-        },
-        "ios": {
-          "platform": "ios"
-        }
-      }
+      "configurations": {}
     }
   }
 }
diff --git a/apps/nativescript-demo-ng/src/app.css b/apps/nativescript-demo-ng/src/app.css
@@ -9,8 +9,11 @@ In many cases you may want to use the NativeScript core theme instead
 of writing your own CSS rules. For a full list of class names in the theme
 refer to http://docs.nativescript.org/ui/theme.
 */
-@import '@nativescript/theme/css/core.css';
-@import '@nativescript/theme/css/default.css';
+/* @import '@nativescript/theme/css/core.css';
+@import '@nativescript/theme/css/default.css'; */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 Button {
   border: 0;
@@ -23,11 +26,18 @@ Button {
   color: #fff;
 }
 
-.h1 {
+.h-center {
+  horizontal-align: center;
+}
+.h-right {
+  horizontal-align: right;
+}
+
+/* .h1 {
   font-weight: bold;
   margin: 10 0 0;
 }
 
 .c-light-blue {
   color: #65ADF1;
-}
+} */
diff --git a/apps/nativescript-demo-ng/src/app/app.module.ts b/apps/nativescript-demo-ng/src/app/app.module.ts
@@ -24,9 +24,9 @@ import { ModalComponent } from './modal/modal.component';
   ],
   declarations: [
     AppComponent,
-    ItemsComponent,
-    ItemDetailComponent,
-    ModalComponent,
+    // ItemsComponent,
+    // ItemDetailComponent,
+    // ModalComponent,
     // HomeComponent
   ],
   providers: [],

diff --git a/apps/nativescript-demo-ng/src/app/home/home.component.html b/apps/nativescript-demo-ng/src/app/home/home.component.html
@@ -2,7 +2,7 @@
   <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
     <MDTabStrip class="c-tabs">
       <MDTabStripItem class="tabstripitem">
-        <Label [text]="tabItems?.start?.title" class="text-center t-12"></Label>
+        <Label [text]="tabItems?.start?.title" class="text-center text-sm"></Label>
       </MDTabStripItem>
     </MDTabStrip>
 

diff --git a/apps/nativescript-demo-ng/src/app/home/home.component.ts b/apps/nativescript-demo-ng/src/app/home/home.component.ts
@@ -1,13 +1,14 @@
 import { Component, NgZone, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RouterExtensions } from '@nativescript/angular';
+import { RouterExtensions, NativeScriptCommonModule } from '@nativescript/angular';
 import { Page, TabView } from '@nativescript/core';
 
 @Component({
   moduleId: module.id,
   selector: 'demo-home',
   templateUrl: './home.component.html',
-  standalone: false,
+  imports: [NativeScriptCommonModule],
+  standalone: true,
 })
 export class HomeComponent implements OnInit {
   tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {};

diff --git a/apps/nativescript-demo-ng/src/app/item/item-detail.component.ts b/apps/nativescript-demo-ng/src/app/item/item-detail.component.ts
@@ -1,14 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { Item } from './item';
 import { ItemService } from './item.service';
+import { NativeScriptCommonModule } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-details',
   moduleId: module.id,
   templateUrl: './item-detail.component.html',
-  standalone: false,
+  imports: [NativeScriptCommonModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class ItemDetailComponent implements OnInit {
   item: Item;

diff --git a/apps/nativescript-demo-ng/src/app/item/items.component.html b/apps/nativescript-demo-ng/src/app/item/items.component.html
@@ -23,16 +23,16 @@
 class names available for styling your app at https://docs.nativescript.org/ui/theme.
 -->
 <GridLayout rows="auto,,*" class="page">
-  <StackLayout row="0" padding="10">
-    <Label [text]="message" class="h1 text-center c-light-blue"></Label>
-    <Label [text]="'NativeScript loves you.'" class="h2 text-center c-light-blue" marginTop="20" marginBottom="5"></Label>
-    <Image src="https://angular.io/assets/images/logos/angular/angular.png" horizontalAlignment="center" width="120" verticalAlignment="top"></Image>
-    <Button (tap)="openModal()" text="Open Modal" class="-btn -primary"></Button>
-    <Button (tap)="fetchTodos()" text="Make Http Call" class="-btn -primary"></Button>
+  <StackLayout row="0" class="p-4">
+    <Label [text]="message" class="text-3xl font-bold text-center text-blue-500"></Label>
+    <Label [text]="'NativeScript loves you.'" class="text-2xl mt-5 text-center text-blue-500"></Label>
+    <Image src="https://angular.io/assets/images/logos/angular/angular.png" class="align-top h-center mt-4 w-[120]"></Image>
+    <Button (tap)="openModal()" text="Open Modal" class="rounded-full bg-blue-500 text-white p-2"></Button>
+    <Button (tap)="fetchTodos()" text="Make Http Call" class="mt-2 rounded-full bg-blue-500 text-white p-2"></Button>
   </StackLayout>
   <ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
     <ng-template let-item="item">
-      <StackLayout [nsRouterLink]="['/item2/item', item.id]" padding="10">
+      <StackLayout [nsRouterLink]="['/item2/item', item.id]" class="p-2">
         <Label [text]="item.name" class="list-group-item"></Label>
       </StackLayout>
     </ng-template>

diff --git a/apps/nativescript-demo-ng/src/app/item/items.component.ts b/apps/nativescript-demo-ng/src/app/item/items.component.ts
@@ -1,19 +1,21 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Item } from './item';
 import { ItemService } from './item.service';
 import { ModalComponent } from '../modal/modal.component';
-import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
+import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-items',
   moduleId: module.id,
   templateUrl: './items.component.html',
-  standalone: false,
+  imports: [NativeScriptCommonModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class ItemsComponent implements OnInit, OnDestroy {
-  message = 'Hello Angular 18!';
+  message = 'Hello Angular 19!';
   items: Array<Item>;
 
   constructor(

diff --git a/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html b/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html
@@ -8,10 +8,10 @@
   <Button text="GO BACK!" (tap)="goBack()"></Button>
 </FlexboxLayout> -->
 
-<GridLayout class="page" rows="auto,*" padding="10">
+<GridLayout class="page" rows="auto,*" class="p-2">
   <!-- <Label marginTop="20" fontSize="18" textAlignment="center" [text]="item.name"></Label> -->
   <GridLayout row="1" rows="auto,auto" columns="">
-    <Label marginTop="20" fontSize="45" text="Congrats to the Angular Team!" class="c-light-blue" textWrap="true" textAlignment="center" fontWeight="bold"></Label>
-    <Label row="1" marginTop="20" fontSize="35" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" class="c-light-blue" textWrap="true" textAlignment="center" textWrap="true"></Label>
+    <Label text="Congrats to the Angular Team!" textWrap="true" class="text-center mt-5 font-bold text-3xl text-blue-500"></Label>
+    <Label row="1" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" textWrap="true" class="text-blue-500 text-center mt-5 text-3xl"></Label>
   </GridLayout>
 </GridLayout>
diff --git a/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts b/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { RouterExtensions } from '@nativescript/angular';
+import { NativeScriptCommonModule, RouterExtensions } from '@nativescript/angular';
 
 import { Item } from '../item/item';
 import { ItemService } from '../item/item.service';
@@ -9,7 +9,9 @@ import { ItemService } from '../item/item.service';
   selector: 'ns-details2',
   moduleId: module.id,
   templateUrl: './item-detail2.component.html',
-  standalone: false,
+  imports: [NativeScriptCommonModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class ItemDetailComponent implements OnInit, OnDestroy {
   item: Item;

diff --git a/apps/nativescript-demo-ng/src/app/item2/item2.module.ts b/apps/nativescript-demo-ng/src/app/item2/item2.module.ts
@@ -5,7 +5,7 @@ import { Items2RoutingModule } from './item2-routing.module';
 
 @NgModule({
   imports: [NativeScriptCommonModule, Items2RoutingModule],
-  declarations: [ItemDetailComponent],
+  // declarations: [ItemDetailComponent],
   exports: [Items2RoutingModule],
   schemas: [NO_ERRORS_SCHEMA],
 })

diff --git a/apps/nativescript-demo-ng/src/app/item3/item3.module.ts b/apps/nativescript-demo-ng/src/app/item3/item3.module.ts
@@ -1,11 +1,11 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { NativeScriptCommonModule } from '@nativescript/angular';
-import { ItemsComponent } from './items.component';
+// import { ItemsComponent } from './items.component';
 import { Items2RoutingModule } from './item3-routing.module';
 
 @NgModule({
   imports: [NativeScriptCommonModule, Items2RoutingModule],
-  declarations: [ItemsComponent],
+  // declarations: [ItemsComponent],
   exports: [Items2RoutingModule],
   schemas: [NO_ERRORS_SCHEMA],
 })

diff --git a/apps/nativescript-demo-ng/src/app/item3/items.component.html b/apps/nativescript-demo-ng/src/app/item3/items.component.html
@@ -23,17 +23,17 @@
 class names available for styling your app at https://docs.nativescript.org/ui/theme.
 -->
 <GridLayout rows="auto,,*" class="page">
-  <StackLayout row="0" padding="10">
-    <Label [text]="message" class="h1 text-center c-light-blue"></Label>
-    <Image src="~/assets/angular.png" horizontalAlignment="center" width="200" verticalAlignment="top" marginBottom="10"></Image>
+  <StackLayout row="0" class="p-4">
+    <Label [text]="message" class="text-3xl font-bold text-center text-blue-500"></Label>
+    <Image src="~/assets/angular.png" class="w-[200] h-center mb-2 align-top"></Image>
     <!-- <Button (tap)="openModal()" text="Taste the Rainbow 🌈" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button> -->
-    <Button (tap)="openModal()" text="Open Modal" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button>
-    <Button (tap)="fetchTodos()" text="Make a native Http networking request" [borderRadius]="borderRadius" [fontSize]="fontSize" padding="0" backgroundColor="#00d2ff" color="#fff" marginTop="10" width="100%" fontWeight="bold" height="50"></Button>
+    <Button (tap)="openModal()" text="Open Modal" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" class="text-white w-full font-bold h-[50]"></Button>
+    <Button (tap)="fetchTodos()" text="Make a native Http networking request" [borderRadius]="borderRadius" [fontSize]="fontSize" padding="0" backgroundColor="#00d2ff" class="text-white mt-2 w-full font-bold h-[50]"></Button>
   </StackLayout>
-  <ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
+  <ListView row="1" [items]="items" backgroundColor="#efefef">
     <ng-template let-item="item">
-      <StackLayout [nsRouterLink]="['/item2', item.id]" padding="10">
-        <Label [text]="item.name" class="list-group-item" fontSize="18" textAlignment="center"></Label>
+      <StackLayout [nsRouterLink]="['/item2', item.id]" class="p-4">
+        <Label [text]="item.name" class="text-lg text-center"></Label>
       </StackLayout>
     </ng-template>
   </ListView>

diff --git a/apps/nativescript-demo-ng/src/app/item3/items.component.ts b/apps/nativescript-demo-ng/src/app/item3/items.component.ts
@@ -1,16 +1,18 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Item } from '../item/item';
 import { ItemService } from '../item/item.service';
 import { ModalComponent } from '../modal/modal.component';
-import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
+import { ModalDialogService, NativeDialogService, NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-items',
   moduleId: module.id,
   templateUrl: './items.component.html',
-  standalone: false,
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class ItemsComponent implements OnInit, OnDestroy {
   message = 'Hello Angular 19';

diff --git a/apps/nativescript-demo-ng/src/app/modal/modal.component.html b/apps/nativescript-demo-ng/src/app/modal/modal.component.html
@@ -1,9 +1,9 @@
-<GridLayout [backgroundColor]="'#d63681'" rows="*,auto,auto" padding="0" width="100%" height="100%">
+<GridLayout [backgroundColor]="'#d63681'" rows="*,auto,auto">
   <!-- <Image [src]="logo" stretch="aspectFit" width="200" marginTop="50" /> -->
-  <Image src="~/assets/ng-18.png" stretch="aspectFit" width="100%" marginTop="0" (loaded)="loadedImg($event)" />
+  <Image src="~/assets/ng-18.png" stretch="aspectFit" (loaded)="loadedImg($event)" class="w-full" />
 
   <!-- @if (this.itemService.currentFlavor + 1 !== this.itemService.flavors.length) {
     <Button row="1" (tap)="openNewModal()" text="Taste Another" fontSize="20" borderRadius="25"></Button>
   } -->
-  <Button row="2" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close" fontSize="20" marginTop="30" borderRadius="25"></Button>
+  <Button row="2" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close" class="text-lg mt-8 rounded-3xl"></Button>
 </GridLayout>
diff --git a/apps/nativescript-demo-ng/src/app/modal/modal.component.ts b/apps/nativescript-demo-ng/src/app/modal/modal.component.ts
@@ -1,12 +1,14 @@
-import { Component, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
-import { ModalDialogService, NativeDialogRef, NativeDialogService } from '@nativescript/angular';
+import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
+import { ModalDialogService, NativeDialogModule, NativeDialogRef, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular';
 import { ItemService } from '../item/item.service';
 import { View } from '@nativescript/core';
 
 @Component({
   selector: 'ns-modal',
   templateUrl: `./modal.component.html`,
-  standalone: false,
+  imports: [NativeScriptCommonModule, NativeDialogModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class ModalComponent implements OnInit, OnDestroy {
   id = Math.floor(Math.random() * 1000);

diff --git a/package.json b/package.json
@@ -9,9 +9,9 @@
     "postinstall": "husky",
     "nx": "nx",
     "start": "nx serve",
-    "build": "nx run zone-js:build && nx run angular:build",
-    "test.android": "nx run nativescript-demo-ng:test:android",
-    "test.ios": "nx run nativescript-demo-ng:test:ios",
+    "build": "nx build zone-js && nx build angular",
+    "test.android": "nx test nativescript-demo-ng android",
+    "test.ios": "nx test nativescript-demo-ng ios",
     "lint": "nx workspace-lint && nx lint",
     "e2e": "nx e2e",
     "affected:apps": "nx affected:apps",
@@ -29,9 +29,9 @@
     "dep-graph": "nx dep-graph",
     "help": "nx help",
     "workspace-generator": "nx workspace-generator",
-    "demo.android": "nx run nativescript-demo-ng:android",
-    "demo.ios": "nx run nativescript-demo-ng:ios",
-    "demo.clean": "nx run nativescript-demo-ng:clean",
+    "demo.android": "nx debug nativescript-demo-ng android -c=prod",
+    "demo.ios": "nx debug nativescript-demo-ng ios -c=prod",
+    "demo.clean": "nx clean nativescript-demo-ng clean",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
@@ -44,8 +44,7 @@
     "@angular/platform-browser-dynamic": "19.0.3",
     "@angular/router": "19.0.3",
     "@nativescript/core": "~8.8.0",
-    "@nativescript/theme": "~3.0.2",
-    "@ngx-translate/core": "~15.0.0",
+    "@nativescript/tailwind": "^2.1.0",
     "nativescript-fonticon": "~8.1.3",
     "rxjs": "^7.8.0",
     "zone.js": "0.15.0"
@@ -104,6 +103,7 @@
     "prettier": "~3.2.0",
     "sass": "^1.54.5",
     "sinon": "^17.0.0",
+    "tailwindcss": "~3.4.0",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.2",
     "tslib": "^2.6.0",