feat: add Hilla demo project (#213)

Author: Lodin

.editorconfig

@@ -0,0 +1,18 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{java,xml}]
+indent_size = 4
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.gitignore

@@ -27,3 +27,5 @@ package-lock.json
 tsconfig.json
 types.d.ts
 vite.*
+
+!observability-kit-hilla-demo/**/*

observability-kit-demo-hilla/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "vaadin/typescript-requiring-type-checking",
+    "vaadin/imports-typescript",
+    "vaadin/lit",
+    "vaadin/prettier"
+  ],
+  "rules": {
+    "class-methods-use-this": "off",
+    "import/no-unassigned-import": "off",
+    "import/no-cycle": "off",
+    "@typescript-eslint/unbound-method": "off"
+  }
+}

observability-kit-demo-hilla/.gitignore

@@ -0,0 +1,22 @@
+/target/
+.idea/
+.vscode/
+.settings
+.project
+.classpath
+
+*.iml
+.DS_Store
+
+# The following files are generated/updated by vaadin-maven-plugin
+node_modules/
+frontend/generated/
+pnpmfile.js
+vite.generated.ts
+
+# Browser drivers for local integration tests
+drivers/
+# Error screenshots generated by TestBench for failed integration tests
+error-screenshots/
+webpack.generated.js
+config/secrets

observability-kit-demo-hilla/.lintstagedrc.mjs

@@ -0,0 +1,17 @@
+import micromatch from 'micromatch';
+
+const excludePatterns = ['**/node_modules/**/*', 'vite.generated.ts'];
+
+function createExcludeCallback(command) {
+  return (files) => {
+    const matched = micromatch.not(files, excludePatterns);
+
+    return matched.length > 0 ? [`${command} ${matched.join(' ')}`] : [];
+  };
+}
+
+export const commands = [createExcludeCallback('eslint --fix'), createExcludeCallback('prettier --write')];
+
+export default {
+  '*{.js,.ts}': commands,
+};

observability-kit-demo-hilla/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 120,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "singleQuote": true
+}

observability-kit-demo-hilla/.simple-git-hooks.json

@@ -0,0 +1,3 @@
+{
+  "pre-commit": "npx lint-staged"
+}

observability-kit-demo-hilla/LICENSE.md

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org>

observability-kit-demo-hilla/README.md

@@ -0,0 +1,46 @@
+# Custom project from Hilla
+
+This project can be used as a starting point to create your own Hilla application with Spring Boot.
+It contains all the necessary configuration and some placeholder files to get you started.
+
+## Running the application
+
+The project is a standard Maven project. To run it from the command line,
+type `mvnw` (Windows), or `./mvnw` (Mac & Linux), then open
+http://localhost:8080 in your browser.
+
+You can also import the project to your IDE of choice as you would with any
+Maven project.
+
+## Deploying to Production
+
+To create a production build, call `mvnw clean package -Pproduction` (Windows),
+or `./mvnw clean package -Pproduction` (Mac & Linux).
+This will build a JAR file with all the dependencies and front-end resources,
+ready to be deployed. The file can be found in the `target` folder after the build completes.
+
+Once the JAR file is built, you can run it using
+`java -jar target/myapp-1.0-SNAPSHOT.jar` (NOTE, replace
+`myapp-1.0-SNAPSHOT.jar` with the name of your jar).
+
+## Project structure
+
+<table style="width:100%; text-align: left;">
+  <tr><th>Directory</th><th>Description</th></tr>
+  <tr><td><code>frontend/</code></td><td>Client-side source directory</td></tr>
+  <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;<code>index.html</code></td><td>HTML template</td></tr>
+  <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;<code>index.ts</code></td><td>Frontend entrypoint, contains the client-side routing setup using <a href="https://hilla.dev/docs/routing/router">Hilla Router</a></td></tr>
+  <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;<code>main-layout.ts</code></td><td>Main layout Web Component, contains the navigation menu, uses <a href="https://vaadin.com/docs/latest/ds/components/app-layout">App Layout</a></td></tr>
+  <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;<code>views/</code></td><td>UI views Web Components (TypeScript)</td></tr>
+  <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;<code>themes/</code></td><td>Custom  
+CSS styles</td></tr>
+  <tr><td><code>src/main/java/&lt;groupId&gt;/</code></td><td>Server-side 
+source directory, contains the server-side Java views</td></tr>
+  <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;<code>Application.java</code></td><td>Server entry-point</td></tr>
+</table>
+
+## Useful links
+
+- Read the documentation at [hilla.dev/docs](https://hilla.dev/docs/).
+- Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/hilla) or join our [Discord channel](https://discord.gg/MYFq5RTbBn).
+- Report issues, create pull requests in [GitHub](https://github.com/vaadin/hilla).

observability-kit-demo-hilla/frontend/components/auth-button.css

@@ -0,0 +1,3 @@
+.button:hover {
+    text-decoration: none;
+}

observability-kit-demo-hilla/frontend/components/auth-button.ts

@@ -0,0 +1,18 @@
+import { html, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './auth-button.css';
+import { Layout } from 'Frontend/views/view.js';
+
+@customElement('auth-button')
+export default class AuthButton extends Layout {
+  static override readonly styles = styles;
+
+  @property()
+  to: string = '#';
+
+  override render(): TemplateResult {
+    return html`<a href=${this.to} class="button block rounded-l ms-auto text-l bg-primary text-primary-contrast p-s">
+      <slot></slot>
+    </a>`;
+  }
+}

observability-kit-demo-hilla/frontend/connect-client.ts

@@ -0,0 +1,20 @@
+import { type MiddlewareContext, type MiddlewareNext, ConnectClient } from '@hilla/frontend';
+import { logout } from 'Frontend/stores/login-store.js';
+
+const client = new ConnectClient({
+  middlewares: [
+    async (context: MiddlewareContext, next: MiddlewareNext) => {
+      const response = await next(context);
+
+      // Log out if the authentication has expired
+      if (response.status === 401) {
+        await logout();
+      }
+
+      return response;
+    },
+  ],
+  prefix: 'connect',
+});
+
+export default client;

observability-kit-demo-hilla/frontend/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>observability-kit-hilla-demo</title>
+    <style>
+      body {
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+
+      #outlet {
+        height: 100%;
+      }
+    </style>
+    <!-- index.ts is included here automatically (either by the dev server or during the build) -->
+  </head>
+
+  <body>
+    <div id="outlet"></div>
+  </body>
+</html>

observability-kit-demo-hilla/frontend/index.ts

@@ -0,0 +1,13 @@
+/* eslint-disable import/prefer-default-export */
+import { Router } from '@vaadin/router';
+import { routes } from './routes.js';
+import { appName, location, setLocation } from './stores/location-store.js';
+
+addEventListener('vaadin-router-location-changed', ({ detail: { location: loc } }) => {
+  setLocation(loc);
+  const { title } = location.value;
+  document.title = title ? `${title} | ${appName}` : appName;
+});
+
+export const router = new Router(document.querySelector('#outlet'));
+await router.setRoutes(routes);

observability-kit-demo-hilla/frontend/routes.ts

@@ -0,0 +1,81 @@
+import type { Route, Router } from '@vaadin/router';
+import './views/helloworld/hello-world-view.js';
+import './views/main-layout.js';
+import './views/login-view.ts';
+import './views/image-list/image-list-view.js';
+import { user, login, logout, doesUserHaveRole } from 'Frontend/stores/login-store.js';
+
+export type ViewRoute = Route & {
+  children?: ViewRoute[];
+  icon?: string;
+  title?: string;
+  requiresRole?: string;
+  showInMenu?(): boolean;
+};
+
+export function hasAccess(route: ViewRoute): boolean {
+  return !route.requiresRole || doesUserHaveRole(route.requiresRole);
+}
+
+function checkAuthentication(this: ViewRoute, context: Router.Context, commands: Router.Commands) {
+  if (!hasAccess(this)) {
+    return commands.redirect('/login');
+  }
+
+  return undefined;
+}
+
+export const views = [
+  // Place routes below (more info https://hilla.dev/docs/routing)
+  {
+    action: checkAuthentication,
+    component: 'hello-world-view',
+    path: 'hello',
+    title: 'Hello World',
+  },
+  {
+    action: checkAuthentication,
+    component: 'image-list-view',
+    path: 'image-list',
+    title: 'Image List',
+  },
+  {
+    action: checkAuthentication,
+    component: 'address-form-view',
+    path: 'address-form',
+    requiresRole: 'ROLE_USER',
+    title: 'Address Form',
+  },
+] satisfies readonly ViewRoute[];
+
+export const routes = [
+  {
+    children: [
+      {
+        action(context, commands) {
+          if (user.value && context.pathname === '/login') {
+            return commands.redirect('/');
+          }
+
+          if (!hasAccess(context.route as ViewRoute)) {
+            return commands.redirect('/login');
+          }
+
+          return undefined;
+        },
+        component: 'login-view',
+        path: 'login',
+      },
+      ...views,
+    ],
+    component: 'main-layout',
+    path: '',
+  },
+  {
+    async action(_, commands) {
+      await logout();
+      return commands.redirect('/login');
+    },
+    path: 'logout',
+  },
+] satisfies readonly ViewRoute[];

observability-kit-demo-hilla/frontend/stores/location-store.ts

@@ -0,0 +1,32 @@
+import { signal } from '@preact/signals-core';
+import type { RouterLocation } from '@vaadin/router';
+import type { ViewRoute } from 'Frontend/routes.js';
+
+export const appName = 'observability-kit-hilla-demo';
+
+export const location = signal({
+  path: '',
+  title: '',
+});
+
+export function setLocation(loc: RouterLocation): void {
+  const serverSideRoute = loc.route?.path === '(.*)';
+
+  let path: string;
+  if (loc.route && !serverSideRoute) {
+    ({ path } = loc.route);
+  } else if (loc.pathname.startsWith(loc.baseUrl)) {
+    path = loc.pathname.substring(loc.baseUrl.length);
+  } else {
+    path = loc.pathname;
+  }
+
+  let title: string;
+  if (serverSideRoute) {
+    ({ title } = document); // Title set by server
+  } else {
+    ({ title = '' } = loc.route as ViewRoute);
+  }
+
+  location.value = { path, title };
+}