Merge pull request #128 from Rikarin/develop

Release

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,69 @@
+name: Bug Report
+description: Report a bug in xUI
+title: 'bug(COMPONENT): TITLE'
+labels: ['needs triage']
+body:
+  - type: checkboxes
+    id: is-regression
+    attributes:
+      label: Is this a regression?
+      description: Did this behavior used to work in the previous version?
+      options:
+        - label: Yes, this behavior used to work in the previous version
+  - type: input
+    id: version-bug-was-not-present
+    attributes:
+      label: The previous version in which this bug was not present was
+    validations:
+      required: false
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A clear and concise description of the problem.
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: |
+        Use StackBlitz to reproduce your issue:
+        - [xUI StackBlitz starter](https://stackblitz.com/fork/xui)
+
+        Issues that do not include a StackBlitz (or other REPL) reproduction link will be closed.
+        If it is not possible to create a StackBlitz reproduction for your issue, please explain why
+        and include any other information you can to help the team reliably reproduce the issue.
+      value: |
+        StackBlitz link:
+        Steps to reproduce:
+        1.
+        2.
+    validations:
+      required: true
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected Behavior
+      description: What behavior were you expecting to see?
+    validations:
+      required: true
+  - type: textarea
+    id: actual-behavior
+    attributes:
+      label: Actual Behavior
+      description: What behavior did you actually see?
+    validations:
+      required: true
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment
+      description: You can use `ng version` command.
+      value: |
+        - Angular:
+        - xUI:
+        - Browser(s):
+        - Operating System (e.g. Windows, macOS, Ubuntu):
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/docs.yml

@@ -0,0 +1,21 @@
+name: Documentation
+description: Suggest an improvement to our documentation at xuijs.org
+title: 'docs-bug(COMPONENT): TITLE'
+labels: ['docs', 'needs triage']
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Documentation Feedback
+      description: |
+        Provide a brief summary of what you would like to see changed in our documentation at [xuijs.org](https://xuijs.org/).
+        Feel free to provide any suggestions of content or examples you’d like us to include.
+    validations:
+      required: true
+  - type: input
+    id: affected-documentation-page
+    attributes:
+      label: Affected documentation page
+      description: Insert a link to the affected page on [xuijs.org](https://xuijs.org/).
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,19 @@
+name: Feature
+description: Propose a new feature for xUI
+title: 'feat(COMPONENT): TITLE'
+labels: ['feature', 'needs triage']
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Feature Description
+      description: Provide a brief summary of the feature you would like to see.
+    validations:
+      required: true
+  - type: textarea
+    id: use-case
+    attributes:
+      label: Use Case
+      description: Describe the use case(s) that the proposed feature would enable.
+    validations:
+      required: false

.husky/pre-commit

@@ -0,0 +1,2 @@
+#yarn format
+#npx --no -- commitlint --edit "${1}"

.prettierrc

@@ -3,5 +3,13 @@
   "trailingComma": "none",
   "printWidth": 120,
   "arrowParens": "avoid",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
 }

apps/web/project.json

@@ -162,7 +162,9 @@
     "prerender": {
       "executor": "@angular-devkit/build-angular:prerender",
       "options": {
-        "routes": ["/"]
+        "prerender": {
+          "discoverRoutes": true
+        }
       },
       "configurations": {
         "development": {

apps/web/server.ts

@@ -5,7 +5,7 @@ import { CommonEngine } from '@angular/ssr';
 import * as express from 'express';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
-import bootstrap from './src/main.server';
+import { AppModule } from './src/main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
@@ -24,19 +24,20 @@ export function app(): express.Express {
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
   server.get(
-    '*.*',
+    '**',
     express.static(distFolder, {
-      maxAge: '1y'
+      maxAge: '1y',
+      index: 'index.html'
     })
   );
 
   // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
+  server.get('**', (req, res, next) => {
     const { protocol, originalUrl, baseUrl, headers } = req;
 
     commonEngine
       .render({
-        bootstrap,
+        bootstrap: AppModule,
         documentFilePath: indexHtml,
         url: `${protocol}://${headers.host}${originalUrl}`,
         publicPath: distFolder,
@@ -69,4 +70,4 @@ if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
   run();
 }
 
-export default bootstrap;
+export default AppModule;

apps/web/src/app/app.module.ts

@@ -1,17 +1,18 @@
-import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
+import { BrowserModule, DomSanitizer, provideClientHydration } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-google-analytics';
 import { environment } from '../environments/environment';
 import { MatIconRegistry } from '@angular/material/icon';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { RootComponent } from './root.component';
 import { XUI_CONFIG } from '@xui/components';
 import { ThemingService } from '@xui/theme-core';
 import { provideHighlightOptions } from 'ngx-highlightjs';
+import { ServerModule } from '@angular/platform-server';
 
 const routes: Routes = [
   { path: 'theme-designer', loadChildren: () => import('./designer/designer.module').then(x => x.DesignerModule) },
@@ -26,6 +27,7 @@ const routes: Routes = [
     RouterModule.forRoot(routes),
     BrowserModule,
     BrowserAnimationsModule,
+    ServerModule,
     NgxGoogleAnalyticsModule.forRoot(environment.ga),
     NgxGoogleAnalyticsRouterModule,
     NgxEchartsModule.forRoot({
@@ -53,7 +55,8 @@ const routes: Routes = [
         xml: () => import('highlight.js/lib/languages/xml')
       }
     }),
-    provideHttpClient(withInterceptorsFromDi())
+    provideHttpClient(withInterceptorsFromDi(), withFetch()),
+    provideClientHydration()
   ]
 })
 export class AppModule {

apps/web/src/app/docs/components/example/example.html

@@ -7,16 +7,16 @@
     </xui-tab>
 
     @for (file of content$ | async; track file.name) {
-    <xui-tab [title]="file.name">
-      <pre><code lineNumbers="true" [language]="getFileType(file)" [highlight]="file.content"></code></pre>
-    </xui-tab>
+      <xui-tab [title]="file.name">
+        <pre><code lineNumbers="true" [language]="getFileType(file)" [highlight]="file.content"></code></pre>
+      </xui-tab>
     }
   </xui-tab-group>
 
   <div *ngIf="files || todo" class="menu">
     <div *ngIf="todo" class="todo">TODO</div>
     @if (files) {
-    <xui-icon (click)="openProject()" xuiTooltip="Edit in StackBlitz">open-in-new</xui-icon>
+      <xui-icon (click)="openProject()" xuiTooltip="Edit in StackBlitz">open-in-new</xui-icon>
     }
   </div>
 </xui-card>

apps/web/src/app/docs/components/overview/overview.component.html

@@ -6,9 +6,9 @@ <h3 xuiTooltip="this is tooltip">Welcome to the XUI Documentation!</h3>
 <xui-card>
   <h6>What is xUI?</h6>
   <p>
-    xUI is a customizable Angular 16 UI Library with gaming look which can be easily adapted to your brand. Contains
-    default dark and light theme and also SCSS functions to generate your own theme in few steps. Which can be also
-    switch on runtime.
+    xUI is a customizable Angular 18 UI library with a gaming look, which can be easily adapted to your brand. It
+    contains a default dark and light theme, as well as SCSS functions to generate your own theme in a few steps.
+    Additionally, the theme can be switched at runtime.
   </p>
 </xui-card>
 

apps/web/src/app/docs/xui-components/progress/progress.component.html

@@ -11,9 +11,11 @@
   <xui-progress color="secondary" status="error" progress="100"></xui-progress>
 </app-example>
 
-<app-example todo>
-  <xui-progress type="circle" progress="42"></xui-progress>
-  <xui-progress type="circle" color="warning" progress="80"></xui-progress>
-  <xui-progress type="circle" color="secondary" progress="100"></xui-progress>
-  <xui-progress type="circle" color="secondary" status="error" progress="100"></xui-progress>
+<app-example>
+  <div style="display: flex; gap: 24px">
+    <xui-progress type="circle" progress="42"></xui-progress>
+    <xui-progress type="circle" color="warning" progress="80"></xui-progress>
+    <xui-progress type="circle" color="secondary" progress="100"></xui-progress>
+    <xui-progress type="circle" color="secondary" status="error" progress="100"></xui-progress>
+  </div>
 </app-example>

apps/web/src/main.server.ts

@@ -10,4 +10,4 @@ const win = createWindow(template);
 (global.window as any) = win;
 global.document = win.document;
 
-export { AppServerModule } from './app/app.server.module';
+export * from './app/app.module';

apps/web/tsconfig.server.json

@@ -2,8 +2,8 @@
 {
   "extends": "./tsconfig.app.json",
   "compilerOptions": {
-    "module": "commonjs",
     "outDir": "../../out-tsc/server",
+    "target": "es2019",
     "types": ["node"]
   },
   "files": ["src/main.server.ts", "server.ts"]