Skip to content

Commit b7caae9

Browse files
NathanWalkerNathanWalker
committed
feat: make demo standalone components with tailwind
1 parent b8feb22 commit b7caae9

20 files changed

+253
-121
lines changed

‎apps/nativescript-demo-ng/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"devDependencies": {
1010
"@nativescript/android": "~8.8.0",
1111
"@nativescript/ios": "~8.8.0",
12+
"@nativescript/tailwind": "^2.1.0",
1213
"@nativescript/unit-test-runner": "^3.0.1"
1314
}
1415
}

‎apps/nativescript-demo-ng/project.json

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -31,39 +31,20 @@
3131
}
3232
}
3333
},
34-
"ios": {
35-
"executor": "@nativescript/nx:build",
36-
"options": {
37-
"platform": "ios"
38-
},
39-
"configurations": {
40-
"build": {
41-
"copyTo": "./dist/build.ipa"
42-
},
43-
"prod": {
44-
"combineWithConfig": "build:prod"
45-
}
46-
}
47-
},
48-
"android": {
49-
"executor": "@nativescript/nx:build",
34+
"debug": {
35+
"executor": "@nativescript/nx:debug",
5036
"options": {
51-
"platform": "android"
37+
"noHmr": true,
38+
"uglify": false,
39+
"release": false,
40+
"forDevice": false,
41+
"prepare": false
5242
},
53-
"configurations": {
54-
"build": {
55-
"copyTo": "./dist/build.apk"
56-
},
57-
"prod": {
58-
"combineWithConfig": "build:prod"
59-
}
60-
}
43+
"dependsOn": ["^build"]
6144
},
6245
"clean": {
63-
"executor": "@nativescript/nx:build",
64-
"options": {
65-
"clean": true
66-
}
46+
"executor": "@nativescript/nx:clean",
47+
"options": {}
6748
},
6849
"lint": {
6950
"executor": "@nx/eslint:lint"
@@ -74,14 +55,7 @@
7455
"options": {
7556
"coverage": false
7657
},
77-
"configurations": {
78-
"android": {
79-
"platform": "android"
80-
},
81-
"ios": {
82-
"platform": "ios"
83-
}
84-
}
58+
"configurations": {}
8559
}
8660
}
8761
}

‎apps/nativescript-demo-ng/src/app.css

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ In many cases you may want to use the NativeScript core theme instead
99
of writing your own CSS rules. For a full list of class names in the theme
1010
refer to http://docs.nativescript.org/ui/theme.
1111
*/
12-
@import '@nativescript/theme/css/core.css';
13-
@import '@nativescript/theme/css/default.css';
12+
/* @import '@nativescript/theme/css/core.css';
13+
@import '@nativescript/theme/css/default.css'; */
14+
@tailwind base;
15+
@tailwind components;
16+
@tailwind utilities;
1417

1518
Button {
1619
border: 0;
@@ -23,11 +26,18 @@ Button {
2326
color: #fff;
2427
}
2528

26-
.h1 {
29+
.h-center {
30+
horizontal-align: center;
31+
}
32+
.h-right {
33+
horizontal-align: right;
34+
}
35+
36+
/* .h1 {
2737
font-weight: bold;
2838
margin: 10 0 0;
2939
}
3040
3141
.c-light-blue {
3242
color: #65ADF1;
33-
}
43+
} */

‎apps/nativescript-demo-ng/src/app/app.module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ import { ModalComponent } from './modal/modal.component';
2424
],
2525
declarations: [
2626
AppComponent,
27-
ItemsComponent,
28-
ItemDetailComponent,
29-
ModalComponent,
27+
// ItemsComponent,
28+
// ItemDetailComponent,
29+
// ModalComponent,
3030
// HomeComponent
3131
],
3232
providers: [],

‎apps/nativescript-demo-ng/src/app/home/home.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
33
<MDTabStrip class="c-tabs">
44
<MDTabStripItem class="tabstripitem">
5-
<Label [text]="tabItems?.start?.title" class="text-center t-12"></Label>
5+
<Label [text]="tabItems?.start?.title" class="text-center text-sm"></Label>
66
</MDTabStripItem>
77
</MDTabStrip>
88

‎apps/nativescript-demo-ng/src/app/home/home.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { Component, NgZone, OnInit } from '@angular/core';
22
import { ActivatedRoute, Router } from '@angular/router';
3-
import { RouterExtensions } from '@nativescript/angular';
3+
import { RouterExtensions, NativeScriptCommonModule } from '@nativescript/angular';
44
import { Page, TabView } from '@nativescript/core';
55

66
@Component({
77
moduleId: module.id,
88
selector: 'demo-home',
99
templateUrl: './home.component.html',
10-
standalone: false,
10+
imports: [NativeScriptCommonModule],
11+
standalone: true,
1112
})
1213
export class HomeComponent implements OnInit {
1314
tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {};

‎apps/nativescript-demo-ng/src/app/item/item-detail.component.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
22
import { ActivatedRoute } from '@angular/router';
33

44
import { Item } from './item';
55
import { ItemService } from './item.service';
6+
import { NativeScriptCommonModule } from '@nativescript/angular';
67

78
@Component({
89
selector: 'ns-details',
910
moduleId: module.id,
1011
templateUrl: './item-detail.component.html',
11-
standalone: false,
12+
imports: [NativeScriptCommonModule],
13+
standalone: true,
14+
schemas: [NO_ERRORS_SCHEMA]
1215
})
1316
export class ItemDetailComponent implements OnInit {
1417
item: Item;

‎apps/nativescript-demo-ng/src/app/item/items.component.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
class names available for styling your app at https://docs.nativescript.org/ui/theme.
2424
-->
2525
<GridLayout rows="auto,,*" class="page">
26-
<StackLayout row="0" padding="10">
27-
<Label [text]="message" class="h1 text-center c-light-blue"></Label>
28-
<Label [text]="'NativeScript loves you.'" class="h2 text-center c-light-blue" marginTop="20" marginBottom="5"></Label>
29-
<Image src="https://angular.io/assets/images/logos/angular/angular.png" horizontalAlignment="center" width="120" verticalAlignment="top"></Image>
30-
<Button (tap)="openModal()" text="Open Modal" class="-btn -primary"></Button>
31-
<Button (tap)="fetchTodos()" text="Make Http Call" class="-btn -primary"></Button>
26+
<StackLayout row="0" class="p-4">
27+
<Label [text]="message" class="text-3xl font-bold text-center text-blue-500"></Label>
28+
<Label [text]="'NativeScript loves you.'" class="text-2xl mt-5 text-center text-blue-500"></Label>
29+
<Image src="https://angular.io/assets/images/logos/angular/angular.png" class="align-top h-center mt-4 w-[120]"></Image>
30+
<Button (tap)="openModal()" text="Open Modal" class="rounded-full bg-blue-500 text-white p-2"></Button>
31+
<Button (tap)="fetchTodos()" text="Make Http Call" class="mt-2 rounded-full bg-blue-500 text-white p-2"></Button>
3232
</StackLayout>
3333
<ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
3434
<ng-template let-item="item">
35-
<StackLayout [nsRouterLink]="['/item2/item', item.id]" padding="10">
35+
<StackLayout [nsRouterLink]="['/item2/item', item.id]" class="p-2">
3636
<Label [text]="item.name" class="list-group-item"></Label>
3737
</StackLayout>
3838
</ng-template>

‎apps/nativescript-demo-ng/src/app/item/items.component.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
import { Component, OnInit, OnDestroy } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
33

44
import { Item } from './item';
55
import { ItemService } from './item.service';
66
import { ModalComponent } from '../modal/modal.component';
7-
import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
7+
import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular';
88

99
@Component({
1010
selector: 'ns-items',
1111
moduleId: module.id,
1212
templateUrl: './items.component.html',
13-
standalone: false,
13+
imports: [NativeScriptCommonModule],
14+
standalone: true,
15+
schemas: [NO_ERRORS_SCHEMA]
1416
})
1517
export class ItemsComponent implements OnInit, OnDestroy {
16-
message = 'Hello Angular 18!';
18+
message = 'Hello Angular 19!';
1719
items: Array<Item>;
1820

1921
constructor(

‎apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<Button text="GO BACK!" (tap)="goBack()"></Button>
99
</FlexboxLayout> -->
1010

11-
<GridLayout class="page" rows="auto,*" padding="10">
11+
<GridLayout class="page" rows="auto,*" class="p-2">
1212
<!-- <Label marginTop="20" fontSize="18" textAlignment="center" [text]="item.name"></Label> -->
1313
<GridLayout row="1" rows="auto,auto" columns="">
14-
<Label marginTop="20" fontSize="45" text="Congrats to the Angular Team!" class="c-light-blue" textWrap="true" textAlignment="center" fontWeight="bold"></Label>
15-
<Label row="1" marginTop="20" fontSize="35" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" class="c-light-blue" textWrap="true" textAlignment="center" textWrap="true"></Label>
14+
<Label text="Congrats to the Angular Team!" textWrap="true" class="text-center mt-5 font-bold text-3xl text-blue-500"></Label>
15+
<Label row="1" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" textWrap="true" class="text-blue-500 text-center mt-5 text-3xl"></Label>
1616
</GridLayout>
1717
</GridLayout>

‎apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Component, OnInit, OnDestroy } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
22
import { ActivatedRoute } from '@angular/router';
3-
import { RouterExtensions } from '@nativescript/angular';
3+
import { NativeScriptCommonModule, RouterExtensions } from '@nativescript/angular';
44

55
import { Item } from '../item/item';
66
import { ItemService } from '../item/item.service';
@@ -9,7 +9,9 @@ import { ItemService } from '../item/item.service';
99
selector: 'ns-details2',
1010
moduleId: module.id,
1111
templateUrl: './item-detail2.component.html',
12-
standalone: false,
12+
imports: [NativeScriptCommonModule],
13+
standalone: true,
14+
schemas: [NO_ERRORS_SCHEMA]
1315
})
1416
export class ItemDetailComponent implements OnInit, OnDestroy {
1517
item: Item;

‎apps/nativescript-demo-ng/src/app/item2/item2.module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Items2RoutingModule } from './item2-routing.module';
55

66
@NgModule({
77
imports: [NativeScriptCommonModule, Items2RoutingModule],
8-
declarations: [ItemDetailComponent],
8+
// declarations: [ItemDetailComponent],
99
exports: [Items2RoutingModule],
1010
schemas: [NO_ERRORS_SCHEMA],
1111
})

‎apps/nativescript-demo-ng/src/app/item3/item3.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
22
import { NativeScriptCommonModule } from '@nativescript/angular';
3-
import { ItemsComponent } from './items.component';
3+
// import { ItemsComponent } from './items.component';
44
import { Items2RoutingModule } from './item3-routing.module';
55

66
@NgModule({
77
imports: [NativeScriptCommonModule, Items2RoutingModule],
8-
declarations: [ItemsComponent],
8+
// declarations: [ItemsComponent],
99
exports: [Items2RoutingModule],
1010
schemas: [NO_ERRORS_SCHEMA],
1111
})

‎apps/nativescript-demo-ng/src/app/item3/items.component.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@
2323
class names available for styling your app at https://docs.nativescript.org/ui/theme.
2424
-->
2525
<GridLayout rows="auto,,*" class="page">
26-
<StackLayout row="0" padding="10">
27-
<Label [text]="message" class="h1 text-center c-light-blue"></Label>
28-
<Image src="~/assets/angular.png" horizontalAlignment="center" width="200" verticalAlignment="top" marginBottom="10"></Image>
26+
<StackLayout row="0" class="p-4">
27+
<Label [text]="message" class="text-3xl font-bold text-center text-blue-500"></Label>
28+
<Image src="~/assets/angular.png" class="w-[200] h-center mb-2 align-top"></Image>
2929
<!-- <Button (tap)="openModal()" text="Taste the Rainbow 🌈" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button> -->
30-
<Button (tap)="openModal()" text="Open Modal" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button>
31-
<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>
30+
<Button (tap)="openModal()" text="Open Modal" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" class="text-white w-full font-bold h-[50]"></Button>
31+
<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>
3232
</StackLayout>
33-
<ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
33+
<ListView row="1" [items]="items" backgroundColor="#efefef">
3434
<ng-template let-item="item">
35-
<StackLayout [nsRouterLink]="['/item2', item.id]" padding="10">
36-
<Label [text]="item.name" class="list-group-item" fontSize="18" textAlignment="center"></Label>
35+
<StackLayout [nsRouterLink]="['/item2', item.id]" class="p-4">
36+
<Label [text]="item.name" class="text-lg text-center"></Label>
3737
</StackLayout>
3838
</ng-template>
3939
</ListView>

‎apps/nativescript-demo-ng/src/app/item3/items.component.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
import { Component, OnInit, OnDestroy } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
33

44
import { Item } from '../item/item';
55
import { ItemService } from '../item/item.service';
66
import { ModalComponent } from '../modal/modal.component';
7-
import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
7+
import { ModalDialogService, NativeDialogService, NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
88

99
@Component({
1010
selector: 'ns-items',
1111
moduleId: module.id,
1212
templateUrl: './items.component.html',
13-
standalone: false,
13+
imports: [NativeScriptCommonModule, NativeScriptRouterModule],
14+
standalone: true,
15+
schemas: [NO_ERRORS_SCHEMA]
1416
})
1517
export class ItemsComponent implements OnInit, OnDestroy {
1618
message = 'Hello Angular 19';

‎apps/nativescript-demo-ng/src/app/modal/modal.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<GridLayout [backgroundColor]="'#d63681'" rows="*,auto,auto" padding="0" width="100%" height="100%">
1+
<GridLayout [backgroundColor]="'#d63681'" rows="*,auto,auto">
22
<!-- <Image [src]="logo" stretch="aspectFit" width="200" marginTop="50" /> -->
3-
<Image src="~/assets/ng-18.png" stretch="aspectFit" width="100%" marginTop="0" (loaded)="loadedImg($event)" />
3+
<Image src="~/assets/ng-18.png" stretch="aspectFit" (loaded)="loadedImg($event)" class="w-full" />
44

55
<!-- @if (this.itemService.currentFlavor + 1 !== this.itemService.flavors.length) {
66
<Button row="1" (tap)="openNewModal()" text="Taste Another" fontSize="20" borderRadius="25"></Button>
77
} -->
8-
<Button row="2" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close" fontSize="20" marginTop="30" borderRadius="25"></Button>
8+
<Button row="2" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close" class="text-lg mt-8 rounded-3xl"></Button>
99
</GridLayout>

‎apps/nativescript-demo-ng/src/app/modal/modal.component.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import { Component, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
2-
import { ModalDialogService, NativeDialogRef, NativeDialogService } from '@nativescript/angular';
1+
import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
2+
import { ModalDialogService, NativeDialogModule, NativeDialogRef, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular';
33
import { ItemService } from '../item/item.service';
44
import { View } from '@nativescript/core';
55

66
@Component({
77
selector: 'ns-modal',
88
templateUrl: `./modal.component.html`,
9-
standalone: false,
9+
imports: [NativeScriptCommonModule, NativeDialogModule],
10+
standalone: true,
11+
schemas: [NO_ERRORS_SCHEMA]
1012
})
1113
export class ModalComponent implements OnInit, OnDestroy {
1214
id = Math.floor(Math.random() * 1000);

‎package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
"postinstall": "husky",
1010
"nx": "nx",
1111
"start": "nx serve",
12-
"build": "nx run zone-js:build && nx run angular:build",
13-
"test.android": "nx run nativescript-demo-ng:test:android",
14-
"test.ios": "nx run nativescript-demo-ng:test:ios",
12+
"build": "nx build zone-js && nx build angular",
13+
"test.android": "nx test nativescript-demo-ng android",
14+
"test.ios": "nx test nativescript-demo-ng ios",
1515
"lint": "nx workspace-lint && nx lint",
1616
"e2e": "nx e2e",
1717
"affected:apps": "nx affected:apps",
@@ -29,9 +29,9 @@
2929
"dep-graph": "nx dep-graph",
3030
"help": "nx help",
3131
"workspace-generator": "nx workspace-generator",
32-
"demo.android": "nx run nativescript-demo-ng:android",
33-
"demo.ios": "nx run nativescript-demo-ng:ios",
34-
"demo.clean": "nx run nativescript-demo-ng:clean",
32+
"demo.android": "nx debug nativescript-demo-ng android -c=prod",
33+
"demo.ios": "nx debug nativescript-demo-ng ios -c=prod",
34+
"demo.clean": "nx clean nativescript-demo-ng clean",
3535
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
3636
},
3737
"dependencies": {
@@ -44,8 +44,7 @@
4444
"@angular/platform-browser-dynamic": "19.0.3",
4545
"@angular/router": "19.0.3",
4646
"@nativescript/core": "~8.8.0",
47-
"@nativescript/theme": "~3.0.2",
48-
"@ngx-translate/core": "~15.0.0",
47+
"@nativescript/tailwind": "^2.1.0",
4948
"nativescript-fonticon": "~8.1.3",
5049
"rxjs": "^7.8.0",
5150
"zone.js": "0.15.0"
@@ -104,6 +103,7 @@
104103
"prettier": "~3.2.0",
105104
"sass": "^1.54.5",
106105
"sinon": "^17.0.0",
106+
"tailwindcss": "~3.4.0",
107107
"ts-jest": "29.1.1",
108108
"ts-node": "10.9.2",
109109
"tslib": "^2.6.0",

0 commit comments

Comments
 (0)