Merge pull request #30 from ngx-primer/feature/documentations

Feature/documentations

README.md

@@ -47,8 +47,12 @@ export class AppModule {}
 
 ```html
 <ngx-primer-accordion-root [type]="'Single'" [collapsible]="true">
-  <ngx-primer-accordion-item [value]="'item1'">Item 1 Content</ngx-primer-accordion-item>
-  <ngx-primer-accordion-item [value]="'item2'">Item 2 Content</ngx-primer-accordion-item>
+  <ngx-primer-accordion-item [value]="'item1'"
+    >Item 1 Content</ngx-primer-accordion-item
+  >
+  <ngx-primer-accordion-item [value]="'item2'"
+    >Item 2 Content</ngx-primer-accordion-item
+  >
 </ngx-primer-accordion-root>
 ```
 

apps/documentations/src/app/app.component.html

@@ -1,83 +1,34 @@
 <div class="bg-[#161617] min-h-screen flex flex-col">
-  <header class="border-b border-none w-full">
-    <div class="container mx-auto px-6 py-3">
-      <div class="flex items-center justify-between">
-        <div class="text-xl font-semibold text-gray-700">
-          <a href="#" class="hover:text-gray-50 text-gray-200">NgxPrimer</a>
-        </div>
-        <div class="text-sm font-semibold text-gray-700">
-          <a href="#" class="mx-4 text-gray-400">Guide</a>
-          <a href="#" class="mx-4 text-gray-400">Reference</a>
-        </div>
-      </div>
-    </div>
-  </header>
-
+  <app-header-component />
   <main>
-    <section class="container mx-auto px-24 py-24 flex flex-row">
-      <div class="w-1/2 h-full">
-        <h1
-          class="h-full text-[72px] leading-[2] font-bold text-foreground-brand"
-        >
-          NgxPrimer
-        </h1>
-        <h2 class="text-[48px] leading-[1] font-bold text-gray-300">
-          Lightweight, Agnostic, Unstyled UI Component
-        </h2>
-        <h2 class="text-[28px] leading-[3] font-bold text-gray-600">
-          Primitive UI to Build Your Own Design System
-        </h2>
-        <div class="flex flex-row gap-x-3 mt-6">
-          <button
-            class="bg-black font-semibold text-gray-100 px-6 py-3 rounded-full"
-          >
-            Get Started
-          </button>
-          <button
-            class="bg-black font-semibold text-gray-500 px-6 py-3 rounded-full"
-          >
-            Quick Start
-          </button>
-          <button
-            class="bg-black font-semibold text-gray-500 px-6 py-3 rounded-full"
-          >
-            Api Reference
-          </button>
-          <button
-            class="bg-black font-semibold text-gray-500 px-6 py-3 rounded-full"
-          >
-            Github
-          </button>
+    <app-content-section>
+      <div class="lg:w-2/3 h-full">
+        <app-banner-text
+          [brand]="'NgxPrimer'"
+          [tagline]="'Lightweight, Agnostic, Unstyled UI Component'"
+          [subtle]="'Primitive UI to Build Your Own Design System'"
+        />
+
+        <div class="w-full flex sm:flex-row justify-start flex-wrap gap-3 mt-6">
+          @for (link of hyperlinks; track $index) {
+            <app-feature-button
+              [hyperlink]="link.hyperlink"
+              [text]="link.text"
+              [target]="link.target"
+            />
+          }
         </div>
       </div>
-      <div class="w-1/2">
-        <!-- Logo -->
-      </div>
-    </section>
-    <section class="container mx-auto px-24 flex flex-row">
-      <div class="grid grid-cols-5 gap-4">
+    </app-content-section>
+    <app-content-section>
+      <div
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"
+      >
         @for (item of features; track $index) {
-          <div class="bg-black bg-opacity-30 rounded-lg p-6 flex flex-col gap-4">
-            <h3 class="text-[20px] font-semibold text-gray-500 leading-[1.1] mb-8">{{ item.title }}</h3>
-            <p class="text-gray-700 text-sm leading-[1.1] font-semibold">
-              {{ item.description }}
-            </p>
-          </div>
+          <app-feature-card [item]="item" />
         }
       </div>
-    </section>
+    </app-content-section>
   </main>
-
-  <footer
-    class="font-semibold border-t border-gray-950 text-sm h-[100px] items-center flex flex-col justify-center w-full mt-auto"
-  >
-    <div class="container mx-auto">
-      <p class="text-gray-400 text-center">
-        Released under the Apache-2.0 license.
-      </p>
-      <p class="text-gray-400 text-center">
-        Copyright © 2024-present ElhakimDev99
-      </p>
-    </div>
-  </footer>
+  <app-footer-component />
 </div>

apps/documentations/src/app/app.component.spec.ts

@@ -1,12 +1,11 @@
-import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
 import { RouterModule } from '@angular/router';
+import { TestBed } from '@angular/core/testing';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent, NxWelcomeComponent, RouterModule.forRoot([])],
+      imports: [AppComponent, RouterModule.forRoot([])],
     }).compileComponents();
   });
 
@@ -15,7 +14,7 @@ describe('AppComponent', () => {
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Welcome documentations'
+      'Welcome documentations',
     );
   });
 

apps/documentations/src/app/app.component.ts

@@ -1,36 +1,72 @@
+import { AppBannerTextComponent } from './shared/components/commons/app-banner-text/app-banner-text.component';
+import { AppContentSectionComponent } from './shared/components/commons/app-content-section/app-content-section.component';
+import { AppFeatureButtonComponent } from './shared/components/commons/app-feature-button/app-feature-button.component';
+import { AppFeatureCardComponent } from './shared/components/commons/app-feature-card/app-feature-card.component';
+import { AppFooterComponentComponent } from './shared/components/commons/app-footer-component/app-footer-component.component';
+import { AppHeaderComponentComponent } from './shared/components/commons/app-header-component/app-header-component.component';
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
-  imports: [RouterModule],
+  imports: [
+    RouterModule,
+    AppHeaderComponentComponent,
+    AppFooterComponentComponent,
+    AppFeatureButtonComponent,
+    AppContentSectionComponent,
+    AppBannerTextComponent,
+    AppFeatureCardComponent,
+  ],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  providers: [
-  ]
+  providers: [],
 })
 export class AppComponent {
-  title = 'documentations';
+  title = 'Ngx Primer | Angular Primtives Component Library';
   features = [
     {
-      title: "Accessible",
-      description: "All components follow the accessibility guidelines set out by the Primer Design System to ensure a better user experience."
-    }, 
+      title: 'Accessible',
+      description:
+        'All components follow the accessibility guidelines set out by the Primer Design System to ensure a better user experience.',
+    },
+    {
+      title: 'Customizable',
+      description:
+        "Tailor the components' appearance and behavior using Angular's flexible input properties and directives.",
+    },
     {
-      title: "Customizable",
-      description: "Tailor the components' appearance and behavior using Angular's flexible input properties and directives."  
-    }, 
+      title: 'Responsive',
+      description:
+        'The library is designed to be responsive and work seamlessly across all device types and screen sizes.',
+    },
     {
-      title: "Responsive",
-      description: "The library is designed to be responsive and work seamlessly across all device types and screen sizes."
+      title: 'Themeable',
+      description:
+        'Easily switch between light and dark modes, as well as apply custom themes to your components.',
     },
     {
-      title: "Themeable",
-      description: "Easily switch between light and dark modes, as well as apply custom themes to your components."
+      title: 'Signal API',
+      description:
+        "Leverage Angular's Signal API to create custom events and handle them in your application, for highly reactive, optimized performance.",
     },
+  ];
+
+  hyperlinks = [
     {
-      title: "Signal API",
-      description: "Leverage Angular's Signal API to create custom events and handle them in your application, for highly reactive, optimized performance.",
-    }
+      text: 'Get Started',
+      hyperlink: true,
+      target: 'get-started',
+    },
+    {
+      text: 'Quick Start',
+      hyperlink: true,
+      target: 'quick-start',
+    },
+    {
+      text: 'Api Reference',
+      hyperlink: true,
+      target: 'api-reference',
+    },
   ];
 }

apps/documentations/src/app/shared/components/commons/app-banner-text/app-banner-text.component.html

@@ -0,0 +1,15 @@
+<h1
+  class="h-full text-[36px] md:text-[48px] lg:text-[72px] leading-[1.5] md:leading-[2] font-bold text-foreground-brand"
+>
+  {{ brand() }}
+</h1>
+<h2
+  class="text-[24px] md:text-[36px] lg:text-[48px] leading-[1.5] font-bold text-gray-300"
+>
+  {{ tagline() }}
+</h2>
+<h3
+  class="text-[20px] md:text-[24px] lg:text-[28px] leading-[1.5] font-bold text-[#F637E3]"
+>
+  {{ subtle() }}
+</h3>

apps/documentations/src/app/shared/components/commons/app-banner-text/app-banner-text.component.spec.ts

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

apps/documentations/src/app/shared/components/commons/app-banner-text/app-banner-text.component.ts

@@ -0,0 +1,14 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-banner-text',
+  imports: [],
+  templateUrl: './app-banner-text.component.html',
+  styleUrl: './app-banner-text.component.scss',
+  standalone: true,
+})
+export class AppBannerTextComponent {
+  brand = input('');
+  tagline = input('');
+  subtle = input('');
+}

apps/documentations/src/app/shared/components/commons/app-content-section/app-content-section.component.html

@@ -0,0 +1,5 @@
+<section
+  class="container mx-auto px-6 md:px-12 lg:px-24 py-12 md:py-24 flex flex-col md:flex-row"
+>
+  <ng-content />
+</section>

apps/documentations/src/app/shared/components/commons/app-content-section/app-content-section.component.spec.ts

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

apps/documentations/src/app/shared/components/commons/app-content-section/app-content-section.component.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-content-section',
+  imports: [CommonModule],
+  templateUrl: './app-content-section.component.html',
+  styleUrl: './app-content-section.component.scss',
+})
+export class AppContentSectionComponent {}

apps/documentations/src/app/shared/components/commons/app-feature-button/app-feature-button.component.html

@@ -0,0 +1,14 @@
+@if (!hyperlink()) {
+  <button
+    class="bg-[#0546f1] font-semibold text-gray-100 text-xs sm:text-sm xl:text-md p-2 sm:py-2 sm:px-2 md:px-4 md:py-2 rounded-lg md:rounded-xl"
+  >
+    {{ buttonText }}
+  </button>
+} @else {
+  <a
+    [routerLink]="hyperlinkTarget()"
+    class="bg-[#0546f1]/100 font-semibold text-xs sm:text-sm xl:text-md p-2 sm:py-2 sm:px-2 md:px-4 md:py-2 rounded-lg md:rounded-xl"
+  >
+    {{ buttonText }}
+  </a>
+}

apps/documentations/src/app/shared/components/commons/app-feature-button/app-feature-button.component.spec.ts

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