{"id":33171650,"url":"https://github.com/linuxfoundation/lfx-v2-ui","last_synced_at":"2026-04-19T22:12:51.746Z","repository":{"id":305005665,"uuid":"1019777347","full_name":"linuxfoundation/lfx-v2-ui","owner":"linuxfoundation","description":"LFX v2 UI","archived":false,"fork":false,"pushed_at":"2026-03-02T23:32:55.000Z","size":7834,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-02T23:51:34.186Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linuxfoundation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-14T21:22:45.000Z","updated_at":"2026-03-02T23:05:32.000Z","dependencies_parsed_at":"2025-08-29T01:57:07.201Z","dependency_job_id":"b5b0dffc-385d-451e-a790-fc8767642a6c","html_url":"https://github.com/linuxfoundation/lfx-v2-ui","commit_stats":null,"previous_names":["linuxfoundation/lfx-v2-pcc-ui","linuxfoundation/lfx-v2-ui"],"tags_count":77,"template":false,"template_full_name":null,"purl":"pkg:github/linuxfoundation/lfx-v2-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxfoundation%2Flfx-v2-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxfoundation%2Flfx-v2-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxfoundation%2Flfx-v2-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxfoundation%2Flfx-v2-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linuxfoundation","download_url":"https://codeload.github.com/linuxfoundation/lfx-v2-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxfoundation%2Flfx-v2-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30310080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T20:05:46.299Z","status":"ssl_error","status_checked_at":"2026-03-09T19:57:04.425Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-11-16T01:10:26.774Z","updated_at":"2026-04-19T22:12:51.733Z","avatar_url":"https://github.com/linuxfoundation.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LFX One\n\nThis is a monorepo for the LFX One application, built\nwith Angular 20 and stable zoneless change detection.\n\n## What's inside?\n\n### Apps and Packages\n\n- `apps/lfx-one`: Angular 20 SSR application with stable zoneless change detection and\n  direct PrimeNG UI components\n\nThe app is 100% [TypeScript](https://www.typescriptlang.org/).\n\n### Architecture\n\n- **Frontend**: Angular 20 with stable zoneless change detection, Angular\n  Signals, PrimeNG components, Tailwind CSS\n- **UI Framework**: PrimeNG 20 with custom LFX UI Core preset and Tailwind CSS integration\n- **Styling**: Tailwind CSS v3 with PrimeUI plugin, CSS layers architecture,\n  Google Fonts (Inter + Roboto Slab)\n- **Icons**: Font Awesome Pro via kits (no npm packages)\n- **Backend**: Express.js server with Angular 20 SSR, Auth0 authentication, Pino logging\n- **Infrastructure**: PM2 process management for production deployment\n\n### Development Tools\n\nThis has comprehensive development tooling:\n\n- **[TypeScript](https://www.typescriptlang.org/)** for static type checking with strict configuration\n- **[ESLint](https://eslint.org/)** for code linting with Angular 20 specific rules\n- **[Prettier](https://prettier.io)** for code formatting with Tailwind class sorting\n- **[Turborepo](https://turborepo.com/)** for efficient monorepo builds and caching\n- **[PM2](https://pm2.keymetrics.io/)** for production process management\n\n## Contributing\n\nPlease read our [Contributing Guide](CONTRIBUTING.md) for details on our code\nof conduct, development process, and how to submit pull requests.\n\n## Development\n\n### Getting Started\n\n#### Prerequisites\n\n- **Node.js** v22+ (specified in package.json)\n- **Yarn** v4.9.2+ package manager\n- **Auth0 Account** for authentication setup\n- **Supabase Project** for user profile email management\n\n#### Environment Setup\n\n1. **Copy the environment template:**\n\n   ```bash\n   cp apps/lfx-one/.env.example apps/lfx-one/.env\n   ```\n\n2. **Configure required environment variables:**\n\n   **Auth0 Configuration:**\n   - Set `PCC_AUTH0_CLIENT_ID` and `PCC_AUTH0_CLIENT_SECRET`\n     - Local Development: The default client ID is `lfx` and you can get the client secret from the k8s via `k get secrets authelia-clients -n lfx -o jsonpath='{.data.lfx}' | base64 --decode`\n   - Update `PCC_AUTH0_ISSUER_BASE_URL` with your Auth0 domain\n     - Local Development: `https://auth.k8s.orb.local`\n   - Configure `PCC_AUTH0_AUDIENCE` for your API\n     - Local Development: `http://lfx-api.k8s.orb.local/`\n   - Set `PCC_AUTH0_SECRET` to a sufficiently long random string (32+ characters)\n     - Generate a random 32 characters long string\n\n   **API Gateway:**\n   - Set `API_GW_AUDIENCE` to the audience for the secondary API Gateway access token\n     - This token is fetched silently alongside the primary bearer token on each authenticated request\n     - Local Development: `https://api-gw.dev.platform.linuxfoundation.org/`\n\n   **M2M (Machine-to-Machine) Authentication:**\n   - Set `M2M_AUTH_CLIENT_ID` and `M2M_AUTH_CLIENT_SECRET` for server-side API calls\n   - Configure `M2M_AUTH_ISSUER_BASE_URL` (typically same as Auth0 base URL)\n   - Set `M2M_AUTH_AUDIENCE` to match your API audience\n\n   **Supabase Configuration:**\n   - Create a project in [Supabase](https://supabase.com)\n   - Get your project URL and anon key from Project Settings → API\n   - Set `SUPABASE_URL` and `POSTGRES_API_KEY`\n   - Used exclusively for user profile email management\n\n   **Microservice Configuration:**\n   - Set `LFX_V2_SERVICE` to your query service endpoint\n     - Local Development: `http://lfx-api.k8s.orb.local`\n\n   **AI Service Configuration (Optional):**\n   - Set `AI_PROXY_URL` to your LiteLLM proxy endpoint for meeting agenda generation\n   - Provide a valid API key in `AI_API_KEY`\n\n   **NATS Configuration:**\n   - Set `NATS_URL` for internal messaging system (typically in Kubernetes environments)\n     - Local Development: `nats://lfx-platform-nats.lfx.svc.cluster.local:4222`\n\n   **Testing Configuration (Optional):**\n   - Set `TEST_USERNAME` and `TEST_PASSWORD` for automated E2E testing\n\n   **Local Development:**\n   - Set `NODE_TLS_REJECT_UNAUTHORIZED=0` when using Authelia for local authentication\n\n#### Install and Run\n\n```bash\n# Install dependencies\nyarn install\n\n# Start development server (Angular dev server)\nyarn start\n\n# Build the application\nyarn build\n\n# Run tests\nyarn test\n```\n\n### Code Quality Commands\n\n```bash\n# Linting\nyarn lint           # Lint and auto-fix all packages\nyarn lint:check     # Check linting without fixing\n\n# Formatting\nyarn format         # Format code with Prettier\nyarn format:check   # Check formatting without fixing\n\n# Testing\nyarn test           # Run unit tests\nyarn test:watch     # Run tests in watch mode\n```\n\n### Common Commands\n\n```bash\n# Development\nyarn start          # Start Angular dev server (ng serve)\nyarn build          # Build the application\nyarn watch          # Build in watch mode\n\n# Production\nyarn serve:ssr      # Serve SSR application locally\nyarn start:prod     # Start with PM2 in production\nyarn reload:prod    # Zero-downtime reload\nyarn logs:prod      # View PM2 logs\n```\n\n### Working with the application\n\nYou can run commands for the application using Turborepo filters:\n\n```bash\n# Start the Angular app\nyarn start --filter=lfx-one\n\n# Build the Angular app\nyarn build --filter=lfx-one\n\n# Run tests for the app\nyarn test --filter=lfx-one\n\n# Lint the app\nyarn lint --filter=lfx-one\n```\n\n## Project Structure\n\n```text\nlfx-one/\n├── apps/\n│   └── lfx-one/              # Angular 20 SSR application\n│       ├── src/app/\n│       │   ├── layouts/      # Layout components\n│       │   ├── modules/      # Feature modules (see below)\n│       │   └── shared/       # Shared code\n│       │       ├── components/   # 46 UI components\n│       │       ├── pipes/        # 34 custom pipes\n│       │       └── services/     # 20 services\n│       ├── eslint.config.mjs # Angular-specific ESLint rules\n│       ├── .prettierrc       # Prettier with Tailwind integration\n│       └── tailwind.config.js # Tailwind with PrimeUI plugin\n├── packages/\n│   └── shared/               # Shared types, interfaces, utilities\n│       ├── src/\n│       │   ├── interfaces/   # TypeScript interfaces\n│       │   ├── constants/    # Design tokens\n│       │   ├── enums/        # Shared enumerations\n│       │   ├── utils/        # 12 utility modules\n│       │   └── validators/   # 3 form validators\n│       └── package.json\n├── docs/                     # Architecture and deployment documentation\n├── turbo.json               # Turborepo pipeline configuration\n└── package.json             # Root workspace configuration\n```\n\n## Feature Modules\n\nThe application is organized into 9 feature modules under `apps/lfx-one/src/app/modules/`:\n\n| Module            | Description                                                                      |\n| ----------------- | -------------------------------------------------------------------------------- |\n| **committees**    | Committee management - view, create, and manage project committees               |\n| **dashboards**    | Role-based dashboards - personalized views for different user roles              |\n| **mailing-lists** | Mailing list management - subscribe, unsubscribe, and manage lists               |\n| **meetings**      | Meeting scheduling - create, manage, and join meetings with calendar integration |\n| **my-activity**   | User activity tracking - personal activity history and notifications             |\n| **profile**       | User profile - profile management and account settings                           |\n| **settings**      | Application settings - preferences and configuration                             |\n| **surveys**       | Survey management - create surveys, collect responses, view NPS analytics        |\n| **votes**         | Voting system - create polls, cast votes, and view results                       |\n\n## Key Features\n\n### Angular 20 with Zoneless Change Detection\n\n- **Stable zoneless change detection** for improved performance\n- **Angular Signals** for reactive state management (preferred over RxJS)\n- **Standalone components** with explicit imports\n- **Component prefix**: All components use `lfx-` prefix (enforced by ESLint)\n\n### CSS Architecture\n\n- **CSS Layers**: Organized layer system (`tailwind-base, primeng, tailwind-utilities`)\n- **PrimeNG Integration**: Custom preset using LFX UI Core design system\n- **Tailwind CSS**: Utility-first styling with PrimeUI plugin integration\n- **Custom Fonts**: Google Fonts (Inter + Roboto Slab) with CSS variables\n\n### Direct PrimeNG Usage\n\n- **PrimeNG Components**: Direct integration of PrimeNG components with LFX theming\n- **Custom Styling**: PrimeNG components styled with LFX UI Core design system\n- **Template Support**: Full access to PrimeNG template functionality\n- **Type Safety**: Full TypeScript support with PrimeNG type definitions\n\n### Code Quality\n\n- **ESLint**: Angular 20 specific rules with import organization and naming conventions\n- **Prettier**: Automatic code formatting with Tailwind class sorting\n- **TypeScript**: Strict configuration with path mappings (`@app/*`, `@config/*`)\n- **Testing**: Angular testing framework with comprehensive coverage\n\n## Deployment\n\nThe application supports deployment with PM2:\n\n1. **Node.js with PM2**: Production process management with clustering and\n   zero-downtime deployments\n\nSee the [deployment documentation](docs/deployment.md) for detailed instructions.\n\n## 📚 Documentation\n\n### Architecture Documentation\n\nComprehensive documentation organized by domain:\n\n#### 🎨 [Frontend Architecture](docs/architecture/frontend/)\n\n- **[Angular Patterns](docs/architecture/frontend/angular-patterns.md)** - Zoneless change detection, SSR, and Angular 20 features\n- **[Component Architecture](docs/architecture/frontend/component-architecture.md)** - PrimeNG wrappers, layout patterns, and component hierarchy\n- **[Styling System](docs/architecture/frontend/styling-system.md)** - CSS layers, Tailwind configuration, and LFX UI Core\n- **[State Management](docs/architecture/frontend/state-management.md)** - Angular Signals patterns and service architecture\n- **[Performance](docs/architecture/frontend/performance.md)** - SSR optimization, build strategies, and monitoring\n\n#### 🖥 [Backend Architecture](docs/architecture/backend/)\n\n- **[SSR Server](docs/architecture/backend/ssr-server.md)** - Express.js configuration and Angular 20 SSR integration\n- **[Authentication](docs/architecture/backend/authentication.md)** - Auth0 integration with express-openid-connect\n- **[Logging \u0026 Monitoring](docs/architecture/backend/logging-monitoring.md)** - Pino logging, structured logs, and health monitoring\n- **[Deployment](docs/deployment.md)** - PM2 configuration and production deployment\n\n#### 📦 [Shared Architecture](docs/architecture/shared/)\n\n- **[Package Architecture](docs/architecture/shared/package-architecture.md)** - Shared interfaces, constants, and TypeScript types\n- **[Development Workflow](docs/architecture/shared/development-workflow.md)** - Turborepo configuration and monorepo patterns\n\n#### 🧪 [Testing Architecture](docs/architecture/testing/)\n\n- **[E2E Testing](docs/architecture/testing/e2e-testing.md)** - Playwright configuration and user workflow testing\n- **[Testing Best Practices](docs/architecture/testing/testing-best-practices.md)** - Testing patterns and implementation guide\n\n### Quick Start Guides\n\n- **[📋 Architecture Navigation Hub](docs/architecture/README.md)** - Complete architecture documentation guide\n- **[⚡ Development Setup](CLAUDE.md)** - Claude Code assistant instructions and patterns\n- **[🧪 Testing Guide](docs/architecture/testing/e2e-testing.md)** - Comprehensive E2E testing with Playwright\n\n## Development Workflow\n\n### Before Committing\n\nAlways run these commands before committing code:\n\n```bash\nyarn lint           # Fix code linting issues\nyarn format         # Format code consistently\nyarn test           # Ensure all tests pass\nyarn build          # Verify build succeeds\n\n# Use the GitHub CI job to check license headers\nact -W .github/workflows/license-header-check.yml  # Verify license headers, requires container runtime\n\n# Use the GitHub CI job to check markdown formatting\nact -W .github/workflows/markdown-lint.yml # Check markdown formatting\n```\n\n**Note**: All source files must include the proper license header. See the [Contributing Guide](CONTRIBUTING.md#license-headers) for details.\n\n### Component Development\n\n```bash\n# Generate new component (will use lfx- prefix automatically)\nng generate component my-feature --standalone\n\n# Generate service\nng generate service my-service\n\n# Generate guard\nng generate guard my-guard\n```\n\n### Using PrimeNG Components\n\n```typescript\n// Import PrimeNG modules directly in your components\nimport { ButtonModule } from 'primeng/button';\nimport { CardModule } from 'primeng/card';\n\n@Component({\n  selector: 'lfx-example',\n  imports: [ButtonModule, CardModule],\n  templateUrl: './example.component.html',\n  styleUrl: './example.component.scss',\n})\nexport class ExampleComponent {}\n```\n\n```html\n\u003c!-- example.component.html --\u003e\n\u003cp-card header=\"Example Card\"\u003e\n  \u003cp-button label=\"Click me\" severity=\"primary\"\u003e\u003c/p-button\u003e\n\u003c/p-card\u003e\n```\n\n## Technology Stack\n\n### Frontend\n\n- **Angular 20** with stable zoneless change detection\n- **Angular Signals** for state management\n- **PrimeNG 20** UI component library with custom LFX preset\n- **Tailwind CSS v3** with PrimeUI plugin\n- **LFX UI Core** design system integration\n- **Font Awesome Pro** icons (via kits)\n- **Google Fonts** (Inter + Roboto Slab)\n\n### Backend \u0026 Infrastructure\n\n- **Express.js** server with Angular 20 SSR\n- **Auth0** authentication with express-openid-connect\n- **Pino** high-performance structured logging\n- **PM2** for production process management and clustering\n\n## Useful Links\n\nLearn more about the technologies used:\n\n- **[Turborepo Documentation](https://turborepo.com/docs)** - Monorepo build system\n- **[Angular Documentation](https://angular.io/docs)** - Angular framework\n- **[Angular Signals](https://angular.io/guide/signals)** - Reactive programming with Signals\n- **[PrimeNG Components](https://primeng.org/)** - UI component library\n- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[LFX UI Core](https://github.com/linuxfoundation/lfx-ui-core)** - Linux Foundation design system\n- **[PM2 Documentation](https://pm2.keymetrics.io/docs/)** - Process manager for Node.js\n\n## License\n\nCopyright The Linux Foundation and each contributor to LFX.\n\nThis project’s source code is licensed under the MIT License. A copy of the\nlicense is available in LICENSE.\n\nThis project’s documentation is licensed under the Creative Commons Attribution\n4.0 International License \\(CC-BY-4.0\\). A copy of the license is available in\nLICENSE-docs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinuxfoundation%2Flfx-v2-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinuxfoundation%2Flfx-v2-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinuxfoundation%2Flfx-v2-ui/lists"}