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

Feature/documentations

apps/documentations-e2e/eslint.config.js

@@ -0,0 +1,13 @@
+const playwright = require('eslint-plugin-playwright');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  playwright.configs['flat/recommended'],
+
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.js'],
+    // Override or add rules here
+    rules: {},
+  },
+];

apps/documentations-e2e/playwright.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm exec nx run documentations:serve',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});

apps/documentations-e2e/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "documentations-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/documentations-e2e/src",
+  "implicitDependencies": ["documentations"],
+  "// targets": "to see all targets run: nx show project documentations-e2e --web",
+  "targets": {}
+}

apps/documentations-e2e/src/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect h1 to contain a substring.
+  expect(await page.locator('h1').innerText()).toContain('Welcome');
+});

apps/documentations-e2e/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "sourceMap": false,
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "playwright.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.ts",
+    "src/**/*.test.js",
+    "src/**/*.d.ts"
+  ]
+}

apps/documentations/eslint.config.js

@@ -0,0 +1,34 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

apps/documentations/project.json

@@ -0,0 +1,88 @@
+{
+  "name": "documentations",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/documentations/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/documentations",
+        "index": "apps/documentations/src/index.html",
+        "browser": "apps/documentations/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/documentations/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "apps/documentations/public"
+          }
+        ],
+        "styles": ["apps/documentations/src/styles.scss"],
+        "scripts": [],
+        "server": "apps/documentations/src/main.server.ts",
+        "ssr": {
+          "entry": "apps/documentations/src/server.ts"
+        },
+        "outputMode": "server"
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "4kb",
+              "maximumError": "8kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "documentations:build:production"
+        },
+        "development": {
+          "buildTarget": "documentations:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "documentations:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "documentations:build",
+        "port": 4200,
+        "staticFilePath": "dist/apps/documentations/browser",
+        "spa": true
+      }
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+<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>
+
+  <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>
+        </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">
+        @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>
+        }
+      </div>
+    </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>
+</div>

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

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+import { NxWelcomeComponent } from './nx-welcome.component';
+import { RouterModule } from '@angular/router';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent, NxWelcomeComponent, RouterModule.forRoot([])],
+    }).compileComponents();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Welcome documentations'
+    );
+  });
+
+  it(`should have as title 'documentations'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('documentations');
+  });
+});