demo/2.0: Refactor naming

package.json

@@ -39,7 +39,6 @@
     "@taiga-ui/styles": "^3.7.1",
     "@tinkoff/ng-dompurify": "4.0.0",
     "dompurify": "2.4.0",
-    "ngx-tippy-wrapper": "file:dist/ngx-tippy-wrapper/ngx-tippy-wrapper-6.2.0.tgz",
     "rxjs": "~7.5.7",
     "tslib": "^2.4.0",
     "zone.js": "~0.11.8"

projects/ngx-tippy-demo/src/app/app.component.html

@@ -7,22 +7,22 @@
   <tui-theme-night *ngIf="scheme === Schemes.Dark"></tui-theme-night>
 
   <header class="t-demo__header">
-    <t-demo-header></t-demo-header>
+    <header></header>
   </header>
 
   <main class="t-demo__main">
 
     <nav class="t-demo__nav">
-      <t-demo-nav></t-demo-nav>
+      <nav></nav>
     </nav>
 
     <div class="t-demo__content">
-      <t-demo-content></t-demo-content>
+      <content></content>
     </div>
   </main>
 
   <footer class="t-demo__footer">
-    <t-demo-footer></t-demo-footer>
+    <footer></footer>
   </footer>
 
 </tui-root>

projects/ngx-tippy-demo/src/app/app.module.ts

@@ -2,13 +2,13 @@ import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ContentComponent } from '@components/content';
+import { FooterComponent } from '@components/footer';
 import { GettingStartedComponent } from '@components/getting-started';
-import { TDemoContentComponent } from '@components/t-demo-content';
-import { TDemoFooterComponent } from '@components/t-demo-footer';
-import { TDemoHeaderComponent } from '@components/t-demo-header';
-import { TDemoNavComponent } from '@components/t-demo-nav';
-import { TDemoSchemeSwitcherComponent } from '@components/t-demo-scheme-switcher';
-import { TDemoSocialComponent } from '@components/t-demo-social';
+import { HeaderComponent } from '@components/header';
+import { NavComponent } from '@components/nav';
+import { SchemeSwitcherComponent } from '@components/scheme-switcher';
+import { SocialComponent } from '@components/social';
 import { TuiLetModule } from '@taiga-ui/cdk';
 import {
   TUI_SANITIZER,
@@ -22,7 +22,6 @@ import {
 } from '@taiga-ui/core';
 import { TuiInputModule } from '@taiga-ui/kit';
 import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify';
-import { HighlightModule } from 'ngx-highlightjs';
 import { NgxTippyModule } from 'ngx-tippy-wrapper';
 import { SchemeService } from '../services/scheme-service';
 import { AppRoutingModule } from './app-routing.module';
@@ -35,12 +34,12 @@ function initialize(SchemeService: SchemeService) {
 @NgModule({
   declarations: [
     AppComponent,
-    TDemoHeaderComponent,
-    TDemoNavComponent,
-    TDemoFooterComponent,
-    TDemoContentComponent,
-    TDemoSchemeSwitcherComponent,
-    TDemoSocialComponent,
+    HeaderComponent,
+    NavComponent,
+    FooterComponent,
+    ContentComponent,
+    SchemeSwitcherComponent,
+    SocialComponent,
     GettingStartedComponent,
   ],
   imports: [
@@ -58,7 +57,6 @@ function initialize(SchemeService: SchemeService) {
     TuiModeModule,
     TuiLetModule,
     TuiThemeNightModule,
-    HighlightModule,
   ],
   providers: [
     { provide: TUI_SANITIZER, useClass: NgDompurifySanitizer },

projects/ngx-tippy-demo/src/components/t-demo-nav/_tests/t-demo-nav.component.spec.ts → projects/ngx-tippy-demo/src/components/content/_tests/content.component.spec.ts

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TDemoNavComponent } from '../t-demo-nav.component';
+import { ContentComponent } from '../content.component';
 
-describe('TDemoNavComponent', () => {
-  let component: TDemoNavComponent;
-  let fixture: ComponentFixture<TDemoNavComponent>;
+describe('ContentComponent', () => {
+  let component: ContentComponent;
+  let fixture: ComponentFixture<ContentComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [TDemoNavComponent],
+      declarations: [ContentComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(TDemoNavComponent);
+    fixture = TestBed.createComponent(ContentComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/ngx-tippy-demo/src/components/t-demo-nav/t-demo-nav.component.ts → projects/ngx-tippy-demo/src/components/content/content.component.ts

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 't-demo-nav',
-  templateUrl: './t-demo-nav.component.html',
-  styleUrls: ['./t-demo-nav.component.scss'],
+  selector: 'content',
+  templateUrl: './content.component.html',
+  styleUrls: ['./content.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TDemoNavComponent implements OnInit {
+export class ContentComponent implements OnInit {
   constructor() {}
 
   ngOnInit(): void {}

projects/ngx-tippy-demo/src/components/content/index.ts

@@ -0,0 +1 @@
+export { ContentComponent } from './content.component';

projects/ngx-tippy-demo/src/components/t-demo-header/_tests/t-demo-header.component.spec.ts → projects/ngx-tippy-demo/src/components/footer/_tests/footer.component.spec.ts

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TDemoHeaderComponent } from '../t-demo-header.component';
+import { FooterComponent } from '../footer.component';
 
-describe('TDemoHeaderComponent', () => {
-  let component: TDemoHeaderComponent;
-  let fixture: ComponentFixture<TDemoHeaderComponent>;
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [TDemoHeaderComponent],
+      declarations: [FooterComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(TDemoHeaderComponent);
+    fixture = TestBed.createComponent(FooterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/ngx-tippy-demo/src/components/t-demo-footer/t-demo-footer.component.ts → projects/ngx-tippy-demo/src/components/footer/footer.component.ts

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 't-demo-footer',
-  templateUrl: './t-demo-footer.component.html',
-  styleUrls: ['./t-demo-footer.component.scss'],
+  selector: 'footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TDemoFooterComponent implements OnInit {
+export class FooterComponent implements OnInit {
   constructor() {}
 
   ngOnInit(): void {}

projects/ngx-tippy-demo/src/components/footer/index.ts

@@ -0,0 +1 @@
+export { FooterComponent } from './footer.component';

projects/ngx-tippy-demo/src/components/getting-started/getting-started.component.html

@@ -0,0 +1 @@
+<p>works</p>

projects/ngx-tippy-demo/src/components/getting-started/getting-started.component.ts

@@ -1,8 +1,4 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { HighlightLoader } from 'ngx-highlightjs';
-
-const themeGithub: string = 'node_modules/highlight.js/styles/github.css';
-const themeAndroidStudio: string = 'node_modules/highlight.js/styles/androidstudio.css';
 
 @Component({
   selector: 'getting-started',
@@ -11,19 +7,7 @@ const themeAndroidStudio: string = 'node_modules/highlight.js/styles/androidstud
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GettingStartedComponent implements OnInit {
-  code = `function myFunction() {
-    document.getElementById("demo1").innerHTML = "Test 1!";
-    document.getElementById("demo2").innerHTML = "Test 2!";
-  }`;
-
-  currentTheme: string = themeGithub;
-
-  constructor(private hljsLoader: HighlightLoader) {}
+  constructor() {}
 
   ngOnInit(): void {}
-
-  changeTheme() {
-    this.currentTheme = this.currentTheme === themeGithub ? themeAndroidStudio : themeGithub;
-    this.hljsLoader.setTheme(this.currentTheme);
-  }
 }

projects/ngx-tippy-demo/src/components/t-demo-footer/_tests/t-demo-footer.component.spec.ts → projects/ngx-tippy-demo/src/components/header/_tests/header.component.spec.ts

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TDemoFooterComponent } from '../t-demo-footer.component';
+import { HeaderComponent } from '../header.component';
 
-describe('TDemoFooterComponent', () => {
-  let component: TDemoFooterComponent;
-  let fixture: ComponentFixture<TDemoFooterComponent>;
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [TDemoFooterComponent],
+      declarations: [HeaderComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(TDemoFooterComponent);
+    fixture = TestBed.createComponent(HeaderComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/ngx-tippy-demo/src/components/header/header.component.html

@@ -0,0 +1,30 @@
+<div class="header">
+  <div
+    class="header__hero"
+    tabindex="0"
+  >
+    <div class="header__logo">
+      <img
+        class="header__img header__img--ng"
+        src="assets/icons/angular.svg"
+        alt="angular logo"
+      >
+      <img
+        class="header__img header__img--tippy"
+        src="assets/icons/tippy.svg"
+        alt="tippy.js logo"
+      >
+    </div>
+
+    <h2 class="header__title">ngx-tippy-wrapper</h2>
+  </div>
+
+  <div class="header__actions">
+    <div class="header__social">
+      <social></social>
+    </div>
+    <div class="header__scheme-switcher">
+      <scheme-switcher></scheme-switcher>
+    </div>
+  </div>
+</div>

projects/ngx-tippy-demo/src/components/t-demo-header/t-demo-header.component.scss → projects/ngx-tippy-demo/src/components/header/header.component.scss

@@ -2,40 +2,40 @@
 
 $animation-time: 3s;
 
-.t-demo-header {
+.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.t-demo-header__hero {
+.header__hero {
   display: flex;
   align-items: center;
 }
 
-.t-demo-header__title {
+.header__title {
   font-family: var(--font-noto);
   font-size: 1.2rem;
 }
 
-.t-demo-header__actions {
+.header__actions {
   display: flex;
   align-items: center;
 }
 
-.t-demo-header__scheme-switcher {
+.header__scheme-switcher {
   margin-left: 2rem;
 }
 
-.t-demo-header__img {
+.header__img {
   width: 100%;
   max-width: 60px;
   height: auto;
   max-height: $header-height;
   animation: animation-bounce $animation-time ease infinite alternate;
 }
 
-.t-demo-header__img--tippy {
+.header__img--tippy {
   position: relative;
   left: -25px;
   z-index: -1;

projects/ngx-tippy-demo/src/components/t-demo-header/t-demo-header.component.ts → projects/ngx-tippy-demo/src/components/header/header.component.ts

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 't-demo-header',
-  templateUrl: './t-demo-header.component.html',
-  styleUrls: ['./t-demo-header.component.scss'],
+  selector: 'header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TDemoHeaderComponent implements OnInit {
+export class HeaderComponent implements OnInit {
   constructor() {}
 
   public ngOnInit(): void {}

projects/ngx-tippy-demo/src/components/header/index.ts

@@ -0,0 +1 @@
+export { HeaderComponent } from './header.component';

projects/ngx-tippy-demo/src/components/nav/_tests/nav.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavComponent } from '../nav.component';
+
+describe('NavComponent', () => {
+  let component: NavComponent;
+  let fixture: ComponentFixture<NavComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NavComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-tippy-demo/src/components/nav/index.ts

@@ -0,0 +1 @@
+export { NavComponent } from './nav.component';

projects/ngx-tippy-demo/src/components/t-demo-content/t-demo-content.component.ts → projects/ngx-tippy-demo/src/components/nav/nav.component.ts

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 't-demo-content',
-  templateUrl: './t-demo-content.component.html',
-  styleUrls: ['./t-demo-content.component.scss'],
+  selector: 'nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TDemoContentComponent implements OnInit {
+export class NavComponent implements OnInit {
   constructor() {}
 
   ngOnInit(): void {}

projects/ngx-tippy-demo/src/components/scheme-switcher/_tests/scheme-switcher.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SchemeSwitcherComponent } from '../scheme-switcher.component';
+
+describe('SchemeSwitcherComponent', () => {
+  let component: SchemeSwitcherComponent;
+  let fixture: ComponentFixture<SchemeSwitcherComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SchemeSwitcherComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SchemeSwitcherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-tippy-demo/src/components/scheme-switcher/index.ts

@@ -0,0 +1 @@
+export { SchemeSwitcherComponent } from './scheme-switcher.component';