feat: wip tooltip

apps/app/src/app/pages/(components)/components/(toggle)/toggle.page.ts

@@ -115,7 +115,7 @@ export const routeMeta: RouteMeta = {
 			</spartan-tabs>
 
 			<spartan-page-bottom-nav>
-				<spartan-page-bottom-nav-placeholder />
+				<spartan-page-bottom-nav-link href="tooltip" label="Tooltip" />
 				<spartan-page-bottom-nav-link direction="previous" href="textarea" label="Textarea" />
 			</spartan-page-bottom-nav>
 		</section>

apps/app/src/app/pages/(components)/components/(tooltip)/tooltip.page.ts

@@ -0,0 +1,83 @@
+import { RouteMeta } from '@analogjs/router';
+import { Component } from '@angular/core';
+import { CodePreviewDirective } from '../../../../shared/code/code-preview.directive';
+import { CodeComponent } from '../../../../shared/code/code.component';
+import { MainSectionDirective } from '../../../../shared/layout/main-section.directive';
+import { PageBottomNavPlaceholderComponent } from '../../../../shared/layout/page-bottom-nav-placeholder.component';
+import { PageBottomNavLinkComponent } from '../../../../shared/layout/page-bottom-nav/page-bottom-nav-link.component';
+import { PageBottomNavComponent } from '../../../../shared/layout/page-bottom-nav/page-bottom-nav.component';
+import { PageNavLinkComponent } from '../../../../shared/layout/page-nav/page-nav-link.component';
+import { PageNavComponent } from '../../../../shared/layout/page-nav/page-nav.component';
+import { SectionIntroComponent } from '../../../../shared/layout/section-intro.component';
+import { SectionSubHeadingComponent } from '../../../../shared/layout/section-sub-heading.component';
+import { TabsComponent } from '../../../../shared/layout/tabs.component';
+import { metaWith } from '../../../../shared/meta/meta.util';
+import { defaultCode, defaultImports, defaultSkeleton, TooltipPreviewComponent } from './tooltip.preview';
+
+export const routeMeta: RouteMeta = {
+	data: { breadcrumb: 'Tooltip' },
+	meta: metaWith(
+		'spartan/ui - Tooltip',
+		'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+	),
+	title: 'spartan/ui - Tooltip',
+};
+@Component({
+	selector: 'spartan-tooltip',
+	standalone: true,
+	imports: [
+		MainSectionDirective,
+		CodeComponent,
+		SectionIntroComponent,
+		SectionSubHeadingComponent,
+		TabsComponent,
+		CodePreviewDirective,
+		PageNavLinkComponent,
+		PageNavComponent,
+		PageBottomNavComponent,
+		PageBottomNavLinkComponent,
+		TooltipPreviewComponent,
+		PageBottomNavPlaceholderComponent,
+	],
+	template: `
+		<section spartanMainSection>
+			<spartan-section-intro
+				name="Tooltip"
+				lead="A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
+			/>
+
+			<spartan-tabs firstTab="Preview" secondTab="Code">
+				<div spartanCodePreview firstTab>
+					<spartan-tooltip-preview />
+				</div>
+				<spartan-code secondTab [code]="defaultCode" />
+			</spartan-tabs>
+
+			<spartan-section-sub-heading id="installation">Installation</spartan-section-sub-heading>
+			<spartan-tabs class="mt-4" firstTab="Nx Plugin" secondTab="Angular CLI">
+				<spartan-code firstTab language="sh" code="npx nx g @spartan-ng/cli:ui tooltip" />
+				<spartan-code secondTab language="sh" code="ng g @spartan-ng/cli:ui tooltip" />
+			</spartan-tabs>
+
+			<spartan-section-sub-heading id="usage">Usage</spartan-section-sub-heading>
+			<div class="space-y-4">
+				<spartan-code [code]="defaultImports" />
+				<spartan-code [code]="defaultSkeleton" />
+			</div>
+
+			<spartan-page-bottom-nav>
+				<spartan-page-bottom-nav-placeholder />
+				<spartan-page-bottom-nav-link direction="previous" href="toggle" label="Toggle" />
+			</spartan-page-bottom-nav>
+		</section>
+		<spartan-page-nav>
+			<spartan-page-nav-link fragment="installation" label="Installation" />
+			<spartan-page-nav-link fragment="usage" label="Usage" />
+		</spartan-page-nav>
+	`,
+})
+export default class TogglePageComponent {
+	protected readonly defaultCode = defaultCode;
+	protected readonly defaultSkeleton = defaultSkeleton;
+	protected readonly defaultImports = defaultImports;
+}

apps/app/src/app/pages/(components)/components/(tooltip)/tooltip.preview.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { radixPlus } from '@ng-icons/radix-icons';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmTooltipDirective } from '@spartan-ng/ui-tooltip-helm';
+
+@Component({
+	selector: 'spartan-tooltip-preview',
+	standalone: true,
+	imports: [HlmButtonDirective, HlmTooltipDirective, HlmIconComponent],
+	providers: [provideIcons({ radixPlus })],
+	template: `
+		<div class="p-40">
+			<button [hlmTooltip]="tpl" aria-describedby="Hello world" hlmBtn variant="outline">Hover</button>
+		</div>
+
+		<ng-template #tpl>
+			<span class="flex items-center">
+				Add to library
+				<hlm-icon class="ml-2" size="sm" name="radixPlus" />
+			</span>
+		</ng-template>
+	`,
+})
+export class TooltipPreviewComponent {}
+
+export const defaultCode = `
+import { Component } from '@angular/core';
+import { radixPlus } from '@ng-icons/radix-icons';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmTooltipDirective } from '@spartan-ng/ui-tooltip-helm';
+
+@Component({
+  selector: 'spartan-tooltip-preview',
+  standalone: true,
+  imports: [HlmButtonDirective, HlmTooltipDirective, HlmIconComponent],
+  providers: [provideIcons({ radixPlus })],
+  template: \`
+    <div class="p-40">
+      <button [hlmTooltip]="tpl" aria-describedby="Hello world" hlmBtn variant="outline">Hover</button>
+    </div>
+
+    <ng-template #tpl>
+      <span class="flex items-center">
+        Add to library
+        <hlm-icon class="ml-2" size="sm" name="radixPlus" />
+      </span>
+    </ng-template>
+  \`,
+})
+export class TooltipPreviewComponent {}
+`;
+
+export const defaultImports = `
+import { HlmTooltipDirective } from '@spartan-ng/ui-tooltip-helm';
+`;
+export const defaultSkeleton = `
+<button [hlmTooltip]="tpl" aria-describedby="Hello world">Hover</button>
+<ng-template #tpl>Add to library</ng-template>
+`;

apps/app/src/app/shared/layout/side-nav/side-nav-content.component.ts

@@ -112,10 +112,7 @@ import { SideNavLinksComponent } from './side-nav-links.directive';
 					<spartan-side-nav-cs />
 				</a>
 				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/toggle">Toggle</a>
-				<a disabled spartanSideNavLink="/components/tooltip">
-					Tooltip
-					<spartan-side-nav-cs />
-				</a>
+				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/tooltip">Tooltip</a>
 			</spartan-side-nav-links>
 		</div>
 	`,

libs/ui/tooltip/brain/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+	"extends": ["../../../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"rules": {
+				"@angular-eslint/no-host-metadata-property": 0,
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "brn",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "brn",
+						"style": "kebab-case"
+					}
+				]
+			},
+			"extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"]
+		},
+		{
+			"files": ["*.html"],
+			"extends": ["plugin:@nx/angular-template"],
+			"rules": {}
+		}
+	]
+}

libs/ui/tooltip/brain/README.md

@@ -0,0 +1,7 @@
+# ui-tooltip-brain
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-tooltip-brain` to execute the unit tests.

libs/ui/tooltip/brain/jest.config.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+export default {
+	displayName: 'ui-tooltip-brain',
+	preset: '../../../../jest.preset.js',
+	setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+	transform: {
+		'^.+\\.(ts|mjs|js|html)$': [
+			'jest-preset-angular',
+			{
+				tsconfig: '<rootDir>/tsconfig.spec.json',
+				stringifyContentPathRegex: '\\.(html|svg)$',
+			},
+		],
+	},
+	transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+	snapshotSerializers: [
+		'jest-preset-angular/build/serializers/no-ng-attributes',
+		'jest-preset-angular/build/serializers/ng-snapshot',
+		'jest-preset-angular/build/serializers/html-comment',
+	],
+};

libs/ui/tooltip/brain/ng-package.json

@@ -0,0 +1,7 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"dest": "../../../../dist/libs/ui/tooltip/brain",
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
+}

libs/ui/tooltip/brain/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@spartan-ng/ui-tooltip-brain",
+	"version": "0.0.1-alpha.309",
+	"peerDependencies": {
+		"@angular/core": "17.0.2",
+		"@angular/cdk": "17.0.0",
+		"rxjs": "~7.8.0"
+	},
+	"dependencies": {},
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public"
+	}
+}

libs/ui/tooltip/brain/project.json

@@ -0,0 +1,58 @@
+{
+	"name": "ui-tooltip-brain",
+	"$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "libs/ui/tooltip/brain/src",
+	"prefix": "brain",
+	"tags": ["scope:brain"],
+	"projectType": "library",
+	"targets": {
+		"build": {
+			"executor": "@nx/angular:package",
+			"outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+			"options": {
+				"project": "libs/ui/tooltip/brain/ng-package.json"
+			},
+			"configurations": {
+				"production": {
+					"tsConfig": "libs/ui/tooltip/brain/tsconfig.lib.prod.json"
+				},
+				"development": {
+					"tsConfig": "libs/ui/tooltip/brain/tsconfig.lib.json"
+				}
+			},
+			"defaultConfiguration": "production"
+		},
+		"test": {
+			"executor": "@nx/jest:jest",
+			"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+			"options": {
+				"jestConfig": "libs/ui/tooltip/brain/jest.config.ts",
+				"passWithNoTests": true
+			},
+			"configurations": {
+				"ci": {
+					"ci": true,
+					"codeCoverage": true
+				}
+			}
+		},
+		"lint": {
+			"executor": "@nx/linter:eslint",
+			"outputs": ["{options.outputFile}"],
+			"options": {
+				"lintFilePatterns": [
+					"libs/ui/tooltip/brain/**/*.ts",
+					"libs/ui/tooltip/brain/**/*.html",
+					"libs/ui/tooltip/brain/package.json",
+					"libs/ui/tooltip/brain/project.json"
+				]
+			}
+		},
+		"release": {
+			"executor": "@spartan-ng/tools:build-update-publish",
+			"options": {
+				"libName": "ui-tooltip-brain"
+			}
+		}
+	}
+}

libs/ui/tooltip/brain/src/index.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrnTooltipComponent } from './lib/brn-tooltip.component';
+import { BrnTooltipDirective } from './lib/brn-tooltip.directive';
+
+export * from './lib/brn-tooltip.component';
+export * from './lib/brn-tooltip.directive';
+export const BrnTooltipImports = [BrnTooltipDirective, BrnTooltipComponent] as const;
+
+@NgModule({
+	imports: [...BrnTooltipImports],
+	exports: [...BrnTooltipImports],
+})
+export class BrnTooltipModule {}