docs: add installation step (#268)

* docs: add installation step

* feat: remove tests

Author: lukonik

projects/docs/src/app/blueprint/source-tree/source-tree.component.html

@@ -1,15 +1,7 @@
 <div
   class="mb-3 flex flex-col items-start justify-between lg:flex-row lg:items-center"
 >
-  <h5 class="my-0 mb-3 text-lg font-medium">Source code</h5>
-  <div class="flex items-center gap-2">
-    <app-checkbox [(ngModel)]="includeTests" labelAlign="start"
-      >Include Tests</app-checkbox
-    >
-    <button appButton color="primary" variant="outline" (click)="download()">
-      Download (.zip)
-    </button>
-  </div>
+  <h5 class="text-lg font-medium">Source code</h5>
 </div>
 
 <div class="mb-3 flex items-center justify-between">

projects/docs/src/app/blueprint/source-tree/source-tree.component.ts

@@ -1,7 +1,5 @@
 import { Component, inject, input, model, OnInit, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ButtonComponent } from '@/ui/button/button.component';
-import { CheckboxComponent } from '@/ui/checkbox/checkbox.component';
 import { FileService } from '../../services/file.service';
 import { SourceCodeComponent } from '../source-code/source-code.component';
 import {
@@ -14,13 +12,7 @@ import { SourceTreeResolver } from './source-tree.resolver';
 
 @Component({
   selector: 'doc-source-tree',
-  imports: [
-    SourceCodeComponent,
-    SourceTreeSelectComponent,
-    ButtonComponent,
-    CheckboxComponent,
-    FormsModule,
-  ],
+  imports: [SourceCodeComponent, SourceTreeSelectComponent, FormsModule],
   templateUrl: './source-tree.component.html',
   styleUrl: './source-tree.component.css',
 })
@@ -59,13 +51,4 @@ export class SourceTreeComponent implements OnInit {
       this.code.set(data);
     });
   }
-
-  download() {
-    const sourceTree = this.sourceTreeAlpha();
-    this.fileService.downloadSourceTree(
-      this.name(),
-      sourceTree,
-      !!this.includeTests()
-    );
-  }
 }

projects/docs/src/app/features/installation-page/installation-page.component.html

@@ -10,12 +10,15 @@
   <ul>
     <li>
       <a href="https://material.angular.io/cdk/categories" target="_blank">
-        <code>&#64;angular/cdk</code>
+        &#64;angular/cdk
       </a>
     </li>
     <li>
-      <a href="https://tailwindcss.com/" target="_blank"
-        ><code>Tailwind CSS</code></a
+      <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a>
+    </li>
+    <li>
+      <a href="https://ng-icons.github.io/ng-icons/#/" target="_blank"
+        >ng-icons</a
       >
     </li>
   </ul>
@@ -63,7 +66,23 @@ <h2>Install tailwind (v4)</h2>
   <h2>Add Angular animations</h2>
   <p>We use Angular animations for smooth transition between states</p>
   <doc-source-code language="ts" [code]="animationsCode"></doc-source-code>
-
+  <h2>Installing an Icons Library (Optional)</h2>
+  <p>
+    Some components, such as the <code>select</code> component, require icons.
+    We use the
+    <a href="https://ng-icons.github.io/ng-icons/#/" target="_blank"
+      >ng-icons</a
+    >
+    library (Material Icons preset) for this purpose.
+  </p>
+  <p>
+    If you prefer not to use this library, you can skip this step and update the
+    components manually when needed.
+  </p>
+  <doc-source-code
+    language="bash"
+    code=" npm install @ng-icons/core @ng-icons/material-icons"
+  ></doc-source-code>
   <h2>Update typescript import</h2>
   <p>
     In <doc-project-name [code]="true"></doc-project-name>, UI components use