@htlkg/astro 0.0.1

package/src/components/Sidebar.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * Sidebar Component
+ *
+ * Navigation sidebar with logo, menu items, and footer.
+ *
+ * @example
+ * ```astro
+ * <Sidebar
+ *   logo="https://example.com/logo.png"
+ *   title="Admin"
+ *   items={sidebarItems}
+ *   currentPage="dashboard"
+ * />
+ * ```
+ */
+
+interface SidebarItem {
+  id: string;
+  name: string;
+  href: string;
+  icon?: string;
+}
+
+interface Props {
+  logo: string;
+  title: string;
+  items: SidebarItem[];
+  currentPage?: string;
+  isOpen?: boolean;
+}
+
+const { logo, title, items, currentPage, isOpen = true } = Astro.props;
+---
+
+<aside class:list={["sidebar", { "sidebar-closed": !isOpen }]}>
+  <div class="sidebar-header">
+    <img src={logo} alt={title} class="sidebar-logo" />
+    <h2 class="sidebar-title">{title}</h2>
+  </div>
+
+  <nav class="sidebar-nav">
+    {
+      items.map((item) => (
+        <a
+          href={item.href}
+          class:list={["sidebar-item", { active: currentPage === item.id }]}
+        >
+          {item.icon && <span class="sidebar-icon">{item.icon}</span>}
+          <span class="sidebar-label">{item.name}</span>
+        </a>
+      ))
+    }
+  </nav>
+
+  <div class="sidebar-footer">
+    <slot name="footer" />
+  </div>
+</aside>
+
+<style>
+  .sidebar {
+    width: 16rem;
+    background: white;
+    border-right: 1px solid #e5e7eb;
+    display: flex;
+    flex-direction: column;
+    transition: width 0.3s ease;
+  }
+
+  .sidebar-closed {
+    width: 4rem;
+  }
+
+  .sidebar-closed .sidebar-title,
+  .sidebar-closed .sidebar-label {
+    display: none;
+  }
+
+  .sidebar-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .sidebar-logo {
+    height: 2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .sidebar-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+  }
+
+  .sidebar-nav {
+    flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+  }
+
+  .sidebar-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    color: #6b7280;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s;
+    margin-bottom: 0.25rem;
+  }
+
+  .sidebar-item:hover {
+    background: #f3f4f6;
+    color: #111827;
+  }
+
+  .sidebar-item.active {
+    background: #eff6ff;
+    color: #2563eb;
+  }
+
+  .sidebar-icon {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sidebar-footer {
+    padding: 1rem;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .sidebar {
+      position: fixed;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 50;
+      transform: translateX(-100%);
+    }
+
+    .sidebar:not(.sidebar-closed) {
+      transform: translateX(0);
+    }
+  }
+</style>

package/src/components/Topbar.astro

@@ -0,0 +1,167 @@
+---
+/**
+ * Topbar Component
+ *
+ * Top navigation bar with actions and user menu.
+ *
+ * @example
+ * ```astro
+ * <Topbar
+ *   user={user}
+ *   actions={topbarActions}
+ * />
+ * ```
+ */
+
+interface User {
+  username: string;
+  email: string;
+  avatar?: string;
+}
+
+interface Action {
+  name: string;
+  event: string;
+  icon?: string;
+}
+
+interface Props {
+  user: User;
+  actions?: Action[];
+}
+
+const { user, actions = [] } = Astro.props;
+
+const userAvatar =
+  user.avatar ||
+  `https://ui-avatars.com/api/?name=${encodeURIComponent(user.username)}&background=3B82F6&color=fff`;
+---
+
+<header class="topbar">
+  <div class="topbar-left">
+    <slot name="left" />
+  </div>
+
+  <div class="topbar-right">
+    {
+      actions.map((action) => (
+        <button class="topbar-action" data-event={action.event}>
+          {action.icon && <span class="action-icon">{action.icon}</span>}
+          <span class="action-label">{action.name}</span>
+        </button>
+      ))
+    }
+
+    <div class="user-menu">
+      <img src={userAvatar} alt={user.username} class="user-avatar" />
+      <div class="user-info">
+        <div class="user-name">{user.username}</div>
+        <div class="user-email">{user.email}</div>
+      </div>
+      <slot name="user-menu" />
+    </div>
+  </div>
+</header>
+
+<style>
+  .topbar {
+    background: white;
+    border-bottom: 1px solid #e5e7eb;
+    padding: 1rem 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .topbar-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+  }
+
+  .topbar-right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .topbar-action {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    background: white;
+    color: #374151;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .topbar-action:hover {
+    background: #f9fafb;
+    border-color: #9ca3af;
+  }
+
+  .action-icon {
+    font-size: 1rem;
+  }
+
+  .user-menu {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .user-menu:hover {
+    background: #f9fafb;
+  }
+
+  .user-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    object-fit: cover;
+  }
+
+  .user-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .user-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #111827;
+    line-height: 1.2;
+  }
+
+  .user-email {
+    font-size: 0.75rem;
+    color: #6b7280;
+    line-height: 1.2;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .topbar {
+      padding: 0.75rem 1rem;
+    }
+
+    .action-label {
+      display: none;
+    }
+
+    .user-info {
+      display: none;
+    }
+  }
+</style>

package/src/components/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @htlkg/pages - Components
+ * 
+ * Reusable page components for building layouts.
+ */
+
+export { default as PageHeader } from './PageHeader.astro';
+export { default as Sidebar } from './Sidebar.astro';
+export { default as Topbar } from './Topbar.astro';

package/src/htlkg/config.test.ts

@@ -0,0 +1,165 @@
+/**
+ * Unit tests for htlkg configuration types and utilities
+ */
+
+import { describe, it, expect } from 'vitest';
+import { isAuthenticatedUser } from './config.js';
+
+describe('Configuration Utilities', () => {
+	describe('isAuthenticatedUser', () => {
+		it('should return true for valid AuthUser object', () => {
+			const validUser = {
+				username: 'testuser',
+				email: 'test@example.com',
+				brandIds: [1, 2, 3],
+				accountIds: [1],
+				isAdmin: false,
+				roles: ['user'],
+			};
+
+			expect(isAuthenticatedUser(validUser)).toBe(true);
+		});
+
+		it('should return true for admin user', () => {
+			const adminUser = {
+				username: 'admin',
+				email: 'admin@example.com',
+				brandIds: [],
+				accountIds: [1],
+				isAdmin: true,
+				roles: ['admin'],
+			};
+
+			expect(isAuthenticatedUser(adminUser)).toBe(true);
+		});
+
+		it('should return false for null', () => {
+			expect(isAuthenticatedUser(null)).toBe(false);
+		});
+
+		it('should return false for undefined', () => {
+			expect(isAuthenticatedUser(undefined)).toBe(false);
+		});
+
+		it('should return false for non-object values', () => {
+			expect(isAuthenticatedUser('string')).toBe(false);
+			expect(isAuthenticatedUser(123)).toBe(false);
+			expect(isAuthenticatedUser(true)).toBe(false);
+		});
+
+		it('should return false for object missing username', () => {
+			const invalidUser = {
+				email: 'test@example.com',
+				brandIds: [1],
+				accountIds: [1],
+				isAdmin: false,
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false for object missing email', () => {
+			const invalidUser = {
+				username: 'testuser',
+				brandIds: [1],
+				accountIds: [1],
+				isAdmin: false,
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false for object missing brandIds', () => {
+			const invalidUser = {
+				username: 'testuser',
+				email: 'test@example.com',
+				accountIds: [1],
+				isAdmin: false,
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false for object missing accountIds', () => {
+			const invalidUser = {
+				username: 'testuser',
+				email: 'test@example.com',
+				brandIds: [1],
+				isAdmin: false,
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false for object missing isAdmin', () => {
+			const invalidUser = {
+				username: 'testuser',
+				email: 'test@example.com',
+				brandIds: [1],
+				accountIds: [1],
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false when username is not a string', () => {
+			const invalidUser = {
+				username: 123,
+				email: 'test@example.com',
+				brandIds: [1],
+				accountIds: [1],
+				isAdmin: false,
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false when email is not a string', () => {
+			const invalidUser = {
+				username: 'testuser',
+				email: 123,
+				brandIds: [1],
+				accountIds: [1],
+				isAdmin: false,
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false when brandIds is not an array', () => {
+			const invalidUser = {
+				username: 'testuser',
+				email: 'test@example.com',
+				brandIds: 'not-an-array',
+				accountIds: [1],
+				isAdmin: false,
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false when accountIds is not an array', () => {
+			const invalidUser = {
+				username: 'testuser',
+				email: 'test@example.com',
+				brandIds: [1],
+				accountIds: 'not-an-array',
+				isAdmin: false,
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+
+		it('should return false when isAdmin is not a boolean', () => {
+			const invalidUser = {
+				username: 'testuser',
+				email: 'test@example.com',
+				brandIds: [1],
+				accountIds: [1],
+				isAdmin: 'not-a-boolean',
+			};
+
+			expect(isAuthenticatedUser(invalidUser)).toBe(false);
+		});
+	});
+});