fix: add base compoennt structure

apps/playground-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/playground-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 playground: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/playground-e2e/project.json

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

apps/playground-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/playground-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/playground/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/playground/project.json

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

apps/playground/server.ts

@@ -0,0 +1,60 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr';
+import express from 'express';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import bootstrap from './src/main.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
+
+  const commonEngine = new CommonEngine();
+
+  server.set('view engine', 'html');
+  server.set('views', browserDistFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get(
+    '**',
+    express.static(browserDistFolder, {
+      maxAge: '1y',
+      index: 'index.html',
+    })
+  );
+
+  // All regular routes use the Angular engine
+  server.get('**', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: browserDistFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+run();

apps/playground/src/app/app.component.html

@@ -0,0 +1,81 @@
+<div 
+  class="py-5 flex flex-row gap-x-3 w-full h-full text-sm text-justify">
+  <ngx-primer-accordion-root
+    #accordionRoot
+    [(ngxPrimerAccordionValue)]="accordionVal"
+    [ngxPrimerAccordionType]="'Single'"
+    class="flex min-w-[360px] w-[360px] h-full flex-col border rounded-md shadow-sm shadow-gray-300 border-opacity-50 border-gray-400 overflow-hidden"
+    >
+    @for (item of accordionData; track $index) {
+      <ngx-primer-accordion-item 
+        #accordionItem
+        [ngxPrimerAccordionItemValue]="item.value"
+        class="flex border-b flex-col"
+        >
+        <ngx-primer-accordion-trigger
+          class="flex flex-row w-full justify-between p-2 cursor-pointer hover:bg-gray-100"
+          [ngClass]="{
+            'border-b': accordionItem.isOpen()
+          }">
+          <div  class="text-gray-800">
+            {{ item.label }}
+          </div>
+          <div >
+            <ng-icon
+              [name]="'heroChevronDownMini'" 
+              class="transition-all ease-in-out duration-300" 
+              [ngClass]="{
+                'transform -rotate-180': accordionItem.isOpen()
+              }"/>
+          </div>
+        </ngx-primer-accordion-trigger>
+        <ngx-primer-accordion-content
+          ngxPrimerCollapsibleDirective 
+          [ngxPrimerCollapsed]="!accordionItem.isOpen()" 
+          [ngxPrimerCollapsibleDirection]="accordionRoot.orientation()"
+          class="text-gray-700 overflow-hidden">
+          <span>
+            {{ item.content }}
+          </span>
+        </ngx-primer-accordion-content>
+      </ngx-primer-accordion-item>
+    }
+  </ngx-primer-accordion-root>
+
+  <ngx-primer-accordion-root
+    #accordionRoot2
+    class="flex min-w-[360px] w-[360px] h-full flex-col border rounded-md shadow-sm shadow-gray-300 border-opacity-50 border-gray-400 overflow-hidden"
+    [(ngxPrimerAccordionValue)]="accordion2Val"
+    [ngxPrimerAccordionType]="'Single'"
+    >
+    @for (item of accordion2Data; track $index) {
+      <ngx-primer-accordion-item 
+        #accordionItem2
+        class="flex border-b flex-col"
+        [ngxPrimerAccordionItemValue]="item.value"
+        >
+        <ngx-primer-accordion-trigger 
+          class="flex flex-row w-full justify-between p-2 cursor-pointer hover:bg-gray-100"
+          [ngClass]="{
+            'border-b': accordionItem2.isOpen()
+          }">
+          <div class="text-gray-800">
+            {{ item.label }}
+          </div>
+          <div>
+            <ng-icon [name]="accordionItem2.isOpen() ? 'heroChevronUpMini' : 'heroChevronDownMini'" class="transition-all ease-in-out"/>
+          </div>
+        </ngx-primer-accordion-trigger>
+        <ngx-primer-accordion-content  
+          ngxPrimerCollapsibleDirective 
+          [ngxPrimerCollapsed]="!accordionItem2.isOpen()" 
+          [ngxPrimerCollapsibleDirection]="accordionRoot2.orientation()"
+          class="text-gray-700 overflow-hidden">
+          <span>
+            {{ item.content }}
+          </span>
+        </ngx-primer-accordion-content>
+      </ngx-primer-accordion-item>
+    }
+  </ngx-primer-accordion-root>
+</div>