feat: upgrade and rework scroll area (#529)

* feat: upgrade and rework scroll area * feat: add migration * feat: add migration * feat: add migration
spartan-ng · Dec 18, 2024 · 1278091 · 1278091
1 parent 9831dfb
commit 1278091
Show file tree

Hide file tree

Showing 23 changed files with 418 additions and 135 deletions.
diff --git a/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.preview.ts b/apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.preview.ts
@@ -1,22 +1,23 @@
 import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { HlmScrollAreaDirective } from '@spartan-ng/ui-scrollarea-helm';
 import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 
 @Component({
 	selector: 'spartan-scroll-area-preview',
 	standalone: true,
-	imports: [NgFor, HlmSeparatorDirective, HlmScrollAreaComponent],
+	imports: [NgFor, HlmSeparatorDirective, HlmScrollAreaDirective, NgScrollbarModule],
 	template: `
-		<hlm-scroll-area class="border-border h-72 w-48 rounded-md border">
+		<ng-scrollbar hlm class="border-border h-72 w-48 rounded-md border">
 			<div class="p-4">
 				<h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
 				<div class="text-sm" *ngFor="let tag of tags">
 					{{ tag }}
 					<div hlmSeparator class="my-2"></div>
 				</div>
 			</div>
-		</hlm-scroll-area>
+		</ng-scrollbar>
 	`,
 })
 export class ScrollAreaPreviewComponent {
@@ -26,37 +27,38 @@ export class ScrollAreaPreviewComponent {
 export const defaultCode = `
 import { Component } from '@angular/core';
 import { NgFor } from '@angular/common';
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm';
 
 @Component({
   selector: 'spartan-scroll-area-preview',
   standalone: true,
-  imports: [NgFor, HlmSeparatorDirective, HlmScrollAreaComponent],
-  template: \` <hlm-scroll-area class="w-48 border h-72 rounded-md border-border">
-    <div class="p-4">
-      <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
-      <div class="text-sm" *ngFor="let tag of tags">
-        {{ tag }}
-        <div hlmSeparator class="my-2"></div>
-      </div>
-    </div>
-  </hlm-scroll-area>\`,
+  imports: [NgFor, HlmSeparatorDirective, HlmSeparatorDirective, NgScrollbarModule],
+  template: \`<ng-scrollbar hlm class="border-border h-72 w-48 rounded-md border">
+			<div class="p-4">
+				<h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
+				<div class="text-sm" *ngFor="let tag of tags">
+					{{ tag }}
+					<div hlmSeparator class="my-2"></div>
+				</div>
+			</div>
+		</ng-scrollbar>\`,
 })
 export class ScrollAreaPreviewComponent {
   tags = Array.from({ length: 50 }).map((_, i, a) => \`v1.2.0-beta.\${a.length - i}\`);
 }
 `;
 
 export const defaultImports = `
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { HlmScrollAreaDirective } from '@spartan-ng/ui-scrollarea-helm';
 `;
 export const defaultSkeleton = `
-<hlm-scroll-area class="border w-72 rounded-md border-border">
+<ng-scrollbar hlm class="border w-72 rounded-md border-border">
   <div class='p-6 whitespace-nowrap'>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto,<br>
     asperiores beatae consequuntur dolor ducimus et exercitationem facilis fugiat magni<br>
     nisi officiis quibusdam rem repellat reprehenderit totam veritatis voluptatibus! Nobis.
   </div>
-</hlm-scroll-area>
+</ng-scrollbar>
 `;
diff --git a/apps/app/src/app/pages/(examples)/examples/music/(music).page.ts b/apps/app/src/app/pages/(examples)/examples/music/(music).page.ts
@@ -18,14 +18,15 @@ import {
 	HlmMenuSeparatorComponent,
 	HlmSubMenuComponent,
 } from '@spartan-ng/ui-menu-helm';
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { HlmScrollAreaDirective } from '@spartan-ng/ui-scrollarea-helm';
 import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm';
 import {
 	HlmTabsComponent,
 	HlmTabsContentDirective,
 	HlmTabsListComponent,
 	HlmTabsTriggerDirective,
 } from '@spartan-ng/ui-tabs-helm';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 import { SideMusicMenuComponent } from './components/side-menu/side-menu.component';
 import { FallbackImageDirective } from './directives/fallback-img.directive';
 
@@ -44,7 +45,7 @@ export const routeMeta: RouteMeta = {
 	},
 	imports: [
 		TopMusicMenuComponent,
-		HlmScrollAreaComponent,
+		HlmScrollAreaDirective,
 		SideMusicMenuComponent,
 
 		HlmTabsComponent,
@@ -56,7 +57,7 @@ export const routeMeta: RouteMeta = {
 		HlmIconComponent,
 
 		HlmSeparatorDirective,
-		HlmScrollAreaComponent,
+		NgScrollbarModule,
 
 		BrnMenuTriggerDirective,
 		BrnContextMenuTriggerDirective,

diff --git a/apps/app/src/app/pages/(examples)/examples/music/components/side-menu/side-menu.component.ts b/apps/app/src/app/pages/(examples)/examples/music/components/side-menu/side-menu.component.ts
@@ -12,7 +12,8 @@ import {
 	lucideUser,
 } from '@ng-icons/lucide';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { HlmScrollAreaDirective } from '@spartan-ng/ui-scrollarea-helm';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 import { SideMenuButtonComponent } from './side-menu-button.component';
 
 interface ListItem {
@@ -28,7 +29,7 @@ interface ListItem {
 	host: {
 		class: 'block',
 	},
-	imports: [SideMenuButtonComponent, HlmIconComponent, HlmScrollAreaComponent, NgClass],
+	imports: [SideMenuButtonComponent, HlmIconComponent, HlmScrollAreaDirective, NgScrollbarModule, NgClass],
 	providers: [
 		provideIcons({
 			lucideCirclePlay,
@@ -71,14 +72,14 @@ interface ListItem {
 				<div class="py-2">
 					<h2 class="mb-2 px-7 text-lg font-semibold tracking-tight">Playlists</h2>
 					<div class="space-y-1">
-						<hlm-scroll-area class="h-[300px]" visibility="hover">
+						<ng-scrollbar hlm class="h-[300px]" visibility="hover">
 							@for (item of playlists; track item) {
 								<music-side-button class="px-4">
 									<hlm-icon size="sm" [name]="item.icon" class="mr-2 h-4 w-4" />
 									{{ item.text }}
 								</music-side-button>
 							}
-						</hlm-scroll-area>
+						</ng-scrollbar>
 					</div>
 				</div>
 			</div>

diff --git a/apps/app/src/app/shared/code/code.component.ts b/apps/app/src/app/shared/code/code.component.ts
@@ -9,7 +9,6 @@ import { provideIcons } from '@ng-icons/core';
 import { lucideCheck, lucideClipboard } from '@ng-icons/lucide';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
 import 'prismjs';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-css';
@@ -23,7 +22,7 @@ declare const Prism: typeof import('prismjs');
 @Component({
 	selector: 'spartan-code',
 	standalone: true,
-	imports: [HlmScrollAreaComponent, HlmButtonDirective, HlmIconComponent, NgIf],
+	imports: [HlmButtonDirective, HlmIconComponent, NgIf],
 	providers: [provideIcons({ lucideClipboard, lucideCheck })],
 	host: {
 		class: 'spartan-scroll relative block font-mono rounded-md text-sm text-white bg-zinc-950 dark:bg-zinc-900',

diff --git a/apps/app/src/app/shared/header/header-mobile-nav.component.ts b/apps/app/src/app/shared/header/header-mobile-nav.component.ts
@@ -5,8 +5,9 @@ import { lucideMenu, lucideX } from '@ng-icons/lucide';
 import { BrnSheetContentDirective, BrnSheetTriggerDirective } from '@spartan-ng/brain/sheet';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { HlmScrollAreaDirective } from '@spartan-ng/ui-scrollarea-helm';
 import { HlmSheetImports } from '@spartan-ng/ui-sheet-helm';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 import { SideNavContentComponent } from '../layout/side-nav/side-nav-content.component';
 import { SideNavLinkDirective } from '../layout/side-nav/side-nav-link.directive';
 import { SpartanLogoComponent } from '../spartan-logo.component';
@@ -23,7 +24,8 @@ import { NavLinkDirective } from '../spartan-nav-link.directive';
 		HlmButtonDirective,
 		HlmIconComponent,
 		SideNavContentComponent,
-		HlmScrollAreaComponent,
+		HlmScrollAreaDirective,
+		NgScrollbarModule,
 		RouterLink,
 		NavLinkDirective,
 		SideNavLinkDirective,
@@ -47,7 +49,7 @@ import { NavLinkDirective } from '../spartan-nav-link.directive';
 					</a>
 					<span>spartan/ui</span>
 				</div>
-				<hlm-scroll-area class="h-[calc(100vh-8rem)]">
+				<ng-scrollbar hlm class="h-[calc(100vh-8rem)]">
 					<div class="flex flex-col space-y-1 p-2 pb-4">
 						<a (click)="ctx.close()" class="text-foreground px-2 py-1 hover:underline" routerLink="/documentation">
 							Documentation
@@ -61,7 +63,7 @@ import { NavLinkDirective } from '../spartan-nav-link.directive';
 						</a>
 					</div>
 					<spartan-side-nav-content (linkClicked)="ctx.close()" />
-				</hlm-scroll-area>
+				</ng-scrollbar>
 			</hlm-sheet-content>
 		</hlm-sheet>
 	`,

diff --git a/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts b/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts
@@ -12,7 +12,8 @@ import {
 	isDevMode,
 	signal,
 } from '@angular/core';
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { HlmScrollAreaDirective } from '@spartan-ng/ui-scrollarea-helm';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 import { PageNavLinkComponent } from './page-nav-link.component';
 import { pageNavTmpl } from './page-nav-outlet.component';
 
@@ -25,13 +26,13 @@ type SamePageAnchorLink = {
 @Component({
 	selector: 'spartan-page-nav',
 	standalone: true,
-	imports: [HlmScrollAreaComponent, NgClass, PageNavLinkComponent],
+	imports: [HlmScrollAreaDirective, NgScrollbarModule, NgClass, PageNavLinkComponent],
 	host: {
 		class: 'hidden xl:block text-sm',
 	},
 	template: `
 		<ng-template #pageNav>
-			<hlm-scroll-area class="h-[calc(100vh-3.5rem)]">
+			<ng-scrollbar hlm class="h-[calc(100vh-3.5rem)]">
 				<div class="space-y-2 px-1">
 					<h3 class="font-medium">On this page</h3>
 					<ul class="m-0 flex list-none flex-col">
@@ -44,7 +45,7 @@ type SamePageAnchorLink = {
 						}
 					</ul>
 				</div>
-			</hlm-scroll-area>
+			</ng-scrollbar>
 		</ng-template>
 	`,
 })

diff --git a/apps/app/src/app/shared/layout/side-nav/side-nav.component.ts b/apps/app/src/app/shared/layout/side-nav/side-nav.component.ts
@@ -1,18 +1,19 @@
 import { Component } from '@angular/core';
-import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { HlmScrollAreaDirective } from '@spartan-ng/ui-scrollarea-helm';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 import { SideNavContentComponent } from './side-nav-content.component';
 
 @Component({
 	selector: 'spartan-side-nav',
 	standalone: true,
-	imports: [HlmScrollAreaComponent, SideNavContentComponent],
+	imports: [HlmScrollAreaDirective, NgScrollbarModule, SideNavContentComponent],
 	host: {
 		class: 'fixed text-sm top-12 px-2 pt-6 pb-12 flex z-30 -ml-2 hidden w-full shrink-0 md:sticky md:block',
 	},
 	template: `
-		<hlm-scroll-area visibility="hover" class="h-[calc(100vh-3.5rem)]">
+		<ng-scrollbar hlm visibility="hover" class="h-[calc(100vh-3.5rem)]">
 			<spartan-side-nav-content />
-		</hlm-scroll-area>
+		</ng-scrollbar>
 	`,
 })
 export class SideNavComponent {}
diff --git a/libs/cli/generators.json b/libs/cli/generators.json
@@ -14,6 +14,11 @@
 			"factory": "./src/generators/migrate-brain-imports/generator",
 			"schema": "./src/generators/migrate-brain-imports/schema.json",
 			"description": "Migrate Brain imports to use secondary entrypoints."
+		},
+		"migrate-scroll-area": {
+			"factory": "./src/generators/migrate-scroll-area/generator",
+			"schema": "./src/generators/migrate-scroll-area/schema.json",
+			"description": "Migrate hlm-scroll-area to ngx-scrollbar"
 		}
 	},
 	"schematics": {
@@ -31,6 +36,11 @@
 			"factory": "./src/generators/migrate-brain-imports/compat",
 			"schema": "./src/generators/migrate-brain-imports/schema.json",
 			"description": "Migrate Brain imports to use secondary entrypoints."
+		},
+		"migrate-scroll-area": {
+			"factory": "./src/generators/migrate-scroll-area/compat",
+			"schema": "./src/generators/migrate-scroll-area/schema.json",
+			"description": "Migrate hlm-scroll-area to ngx-scrollbar"
 		}
 	}
 }
diff --git a/libs/cli/package.json b/libs/cli/package.json
@@ -6,10 +6,12 @@
 		"@nx/angular": ">=20.0.0",
 		"@nx/devkit": ">=20.0.0",
 		"@nx/js": ">=20.0.0",
+		"@schematics/angular": ">=18.0.0",
 		"enquirer": "2.3.6",
 		"jsonc-eslint-parser": "^2.1.0",
 		"nx": ">=20.0.0",
-		"semver": "7.5.4"
+		"semver": "7.5.4",
+		"typescript": ">=5.0.0"
 	},
 	"peerDependencies": {
 		"tslib": "^2.3.0"

diff --git a/libs/cli/src/generators/migrate-scroll-area/compat.ts b/libs/cli/src/generators/migrate-scroll-area/compat.ts
@@ -0,0 +1,4 @@
+import { convertNxGenerator } from '@nx/devkit';
+import { migrateScrollAreaGenerator } from './generator';
+
+export default convertNxGenerator(migrateScrollAreaGenerator);