@surfnet/curve-angular 0.2.0

package/src/lib/ui/sidebar/src/lib/hlm-sidebar.service.ts

@@ -0,0 +1,136 @@
+import { isPlatformServer } from '@angular/common';
+import {
+  afterNextRender,
+  computed,
+  DestroyRef,
+  DOCUMENT,
+  inject,
+  Injectable,
+  PLATFORM_ID,
+  REQUEST,
+  type Signal,
+  signal,
+} from '@angular/core';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+
+@Injectable({ providedIn: 'root' })
+export class HlmSidebarService {
+  private readonly _platformId = inject(PLATFORM_ID);
+  private readonly _request = inject(REQUEST, { optional: true });
+  private readonly _config = injectHlmSidebarConfig();
+  private readonly _document = inject(DOCUMENT);
+  private readonly _window = this._document.defaultView;
+  private readonly _open = signal<boolean>(true);
+  private readonly _openMobile = signal<boolean>(false);
+  private readonly _isMobile = signal<boolean>(false);
+  private readonly _variant = signal<SidebarVariant>('sidebar');
+  private _mediaQuery: MediaQueryList | null = null;
+
+  public readonly open: Signal<boolean> = this._open.asReadonly();
+  public readonly openMobile: Signal<boolean> = this._openMobile.asReadonly();
+  public readonly isMobile: Signal<boolean> = this._isMobile.asReadonly();
+  public readonly variant: Signal<SidebarVariant> = this._variant.asReadonly();
+
+  public readonly state = computed<'expanded' | 'collapsed'>(() =>
+    this._open() ? 'expanded' : 'collapsed',
+  );
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+    this.restoreStateFromCookie();
+
+    afterNextRender(() => {
+      if (!this._window) return;
+
+      // Initialize MediaQueryList
+      this._mediaQuery = this._window.matchMedia(`(max-width: ${this._config.mobileBreakpoint})`);
+      this._isMobile.set(this._mediaQuery.matches);
+
+      // Add media query listener
+      const mediaQueryHandler = (e: MediaQueryListEvent) => {
+        this._isMobile.set(e.matches);
+        // If switching from mobile to desktop, close mobile sidebar
+        if (!e.matches) this._openMobile.set(false);
+      };
+      this._mediaQuery.addEventListener('change', mediaQueryHandler);
+
+      // Add keyboard shortcut listener
+      const keydownHandler = (event: KeyboardEvent) => {
+        if (
+          event.key === this._config.sidebarKeyboardShortcut &&
+          (event.ctrlKey || event.metaKey)
+        ) {
+          event.preventDefault();
+          this.toggleSidebar();
+        }
+      };
+      this._window.addEventListener('keydown', keydownHandler);
+
+      // Add resize listener with debounce
+      let resizeTimeout: number;
+      const resizeHandler = () => {
+        if (!this._window) return;
+
+        if (resizeTimeout) this._window.clearTimeout(resizeTimeout);
+        resizeTimeout = this._window.setTimeout(() => {
+          if (this._mediaQuery) this._isMobile.set(this._mediaQuery.matches);
+        }, 100);
+      };
+      this._window.addEventListener('resize', resizeHandler);
+
+      // Cleanup listeners on destroy
+      destroyRef.onDestroy(() => {
+        if (!this._window) return;
+
+        if (this._mediaQuery) this._mediaQuery.removeEventListener('change', mediaQueryHandler);
+        this._window.removeEventListener('keydown', keydownHandler);
+        this._window.removeEventListener('resize', resizeHandler);
+        if (resizeTimeout) this._window.clearTimeout(resizeTimeout);
+      });
+    });
+  }
+
+  public setOpen(open: boolean): void {
+    this._open.set(open);
+    this._document.cookie = `${this._config.sidebarCookieName}=${open}; path=/; max-age=${this._config.sidebarCookieMaxAge}`;
+  }
+
+  public setOpenMobile(open: boolean): void {
+    if (this._isMobile()) {
+      this._openMobile.set(open);
+    }
+  }
+
+  public setVariant(variant: SidebarVariant): void {
+    this._variant.set(variant);
+  }
+
+  public toggleSidebar(): void {
+    if (this._isMobile()) {
+      this._openMobile.update((value) => !value);
+    } else {
+      this.setOpen(!this._open());
+    }
+  }
+
+  private restoreStateFromCookie(): void {
+    const cookieString = isPlatformServer(this._platformId)
+      ? this._request?.headers.get('cookie')
+      : this._document.cookie;
+
+    if (!cookieString) return;
+
+    const prefix = `${this._config.sidebarCookieName}=`;
+    const cookieValue = cookieString
+      .split(';')
+      .map((c) => c.trim())
+      .find((c) => c.startsWith(prefix))
+      ?.slice(prefix.length);
+
+    if (cookieValue !== undefined) {
+      this._open.set(cookieValue === 'true');
+    }
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar.stories.ts

@@ -0,0 +1,177 @@
+import { Component, Input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  phosphorGauge,
+  phosphorGear,
+  phosphorSquaresFour,
+  phosphorUser,
+} from '@ng-icons/phosphor-icons/regular';
+import { type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
+import { sidebarContract, sidebarMenuButtonContract } from '@surfnet/curve-contracts';
+import { HlmSidebar, HlmSidebarImports } from '..';
+
+const meta: Meta<HlmSidebar> = {
+  title: 'Components/Sidebar',
+  component: HlmSidebar,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmSidebarImports],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: sidebarContract.docs.description,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmSidebar>;
+
+@Component({
+  selector: 'sidebar',
+  imports: [HlmSidebarImports, NgIcon],
+  providers: [provideIcons({ phosphorGear, phosphorGauge, phosphorSquaresFour, phosphorUser })],
+  template: `
+    <div hlmSidebarWrapper>
+      <hlm-sidebar>
+        <div hlmSidebarHeader>
+          <div hlmSidebarMenu>
+            <div hlmSidebarMenuItem>
+              <button hlmSidebarMenuButton size="lg">
+                <ng-icon name="phosphorSquaresFour" />
+                <span>App catalog</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div hlmSidebarContent>
+          <div hlmSidebarGroup>
+            <div hlmSidebarGroupLabel>Platform</div>
+            <div hlmSidebarGroupContent>
+              <ul hlmSidebarMenu>
+                @for (item of nav; track item.title) {
+                  <li hlmSidebarMenuItem>
+                    <button hlmSidebarMenuButton [isActive]="item.active" [tooltip]="item.title">
+                      <ng-icon [name]="item.icon" />
+                      <span>{{ item.title }}</span>
+                    </button>
+                    @if (item.title === 'Apps') {
+                      <ul hlmSidebarMenuSub>
+                        <li hlmSidebarMenuSubItem>
+                          <button hlmSidebarMenuSubButton>Catalog</button>
+                        </li>
+                        <li hlmSidebarMenuSubItem>
+                          <button hlmSidebarMenuSubButton>Installed</button>
+                        </li>
+                      </ul>
+                    }
+                  </li>
+                }
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div hlmSidebarFooter>
+          <div hlmSidebarMenu>
+            <div hlmSidebarMenuItem>
+              <button hlmSidebarMenuButton tooltip="Settings">
+                <ng-icon name="phosphorGear" />
+                <span>Settings</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </hlm-sidebar>
+      <main hlmSidebarInset>
+        <header class="flex h-12 items-center gap-2 border-b px-4">
+          <button hlmSidebarTrigger></button>
+          <span class="text-sm font-medium">App catalog</span>
+        </header>
+        <div class="p-4 text-sm text-muted-foreground">Page content goes here.</div>
+      </main>
+    </div>
+  `,
+})
+class Sidebar {
+  public readonly nav = [
+    { title: 'Dashboard', icon: 'phosphorGauge', active: true },
+    { title: 'Apps', icon: 'phosphorSquaresFour' },
+    { title: 'Users', icon: 'phosphorUser' },
+  ];
+}
+
+/** A full sidebar with a collapsible icon rail, grouped menu, submenu, and trigger. */
+export const Default: Story = {
+  render: () => ({
+    moduleMetadata: {
+      imports: [Sidebar],
+    },
+    template: '<sidebar/>',
+  }),
+};
+
+@Component({
+  selector: 'sidebar-variant',
+  imports: [HlmSidebarImports, NgIcon],
+  providers: [provideIcons({ phosphorSquaresFour })],
+  template: `
+    <div hlmSidebarWrapper>
+      <hlm-sidebar collapsible="none" class="w-64 border-r">
+        <div hlmSidebarContent>
+          <div hlmSidebarGroup>
+            <div hlmSidebarGroupLabel>Variants</div>
+            <div hlmSidebarGroupContent>
+              <ul hlmSidebarMenu>
+                @for (variant of contract.props.variants; track variant) {
+                  <li hlmSidebarMenuItem>
+                    <button
+                      hlmSidebarMenuButton
+                      [variant]="variant"
+                      [title]="contract.docs.variants[variant]"
+                    >
+                      <ng-icon name="phosphorSquaresFour" />
+                      <span>{{ variant }}</span>
+                    </button>
+                  </li>
+                }
+              </ul>
+            </div>
+          </div>
+          <div hlmSidebarGroup>
+            <div hlmSidebarGroupLabel>Sizes</div>
+            <div hlmSidebarGroupContent>
+              <ul hlmSidebarMenu>
+                @for (size of contract.props.sizes; track size) {
+                  <li hlmSidebarMenuItem>
+                    <button hlmSidebarMenuButton [size]="size" [title]="contract.docs.sizes[size]">
+                      <ng-icon name="phosphorSquaresFour" />
+                      <span>{{ size }}</span>
+                    </button>
+                  </li>
+                }
+              </ul>
+            </div>
+          </div>
+        </div>
+      </hlm-sidebar>
+    </div>
+  `,
+})
+class SidebarVariant {
+  @Input() contract!: typeof sidebarMenuButtonContract;
+}
+
+/** The `SidebarMenuButton` variants and sizes declared in the contract. */
+export const MenuButtonVariants: Story = {
+  render: () => ({
+    moduleMetadata: {
+      imports: [SidebarVariant],
+    },
+    props: { contract: sidebarMenuButtonContract },
+    template: '<sidebar-variant [contract]="contract"></sidebar-variant>',
+  }),
+};

package/src/lib/ui/sidebar/src/lib/hlm-sidebar.token.ts

@@ -0,0 +1,33 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmSidebarConfig {
+  sidebarWidth: string;
+  sidebarWidthMobile: string;
+  sidebarWidthIcon: string;
+  sidebarCookieName: string;
+  sidebarCookieMaxAge: number;
+  sidebarKeyboardShortcut: string;
+  mobileBreakpoint: string;
+  closeMobileSidebarOnMenuButtonClick: boolean;
+}
+
+const defaultConfig: HlmSidebarConfig = {
+  sidebarWidth: '16rem',
+  sidebarWidthMobile: '18rem',
+  sidebarWidthIcon: '3rem',
+  sidebarCookieName: 'sidebar_state',
+  sidebarCookieMaxAge: 60 * 60 * 24 * 7, // 7 days in seconds
+  sidebarKeyboardShortcut: 'b',
+  mobileBreakpoint: '768px',
+  closeMobileSidebarOnMenuButtonClick: false,
+};
+
+const HlmSidebarConfigToken = new InjectionToken<HlmSidebarConfig>('HlmSidebarConfig');
+
+export function provideHlmSidebarConfig(config: Partial<HlmSidebarConfig>): ValueProvider {
+  return { provide: HlmSidebarConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmSidebarConfig(): HlmSidebarConfig {
+  return inject(HlmSidebarConfigToken, { optional: true }) ?? defaultConfig;
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar.ts

@@ -0,0 +1,139 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
+import { classes, hlm } from '../../../utils/src';
+import type { ClassValue } from 'clsx';
+import { HlmSidebarService, type SidebarVariant } from './hlm-sidebar.service';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+import { HlmSheetImports } from '../../../sheet/src';
+
+@Component({
+  selector: 'hlm-sidebar',
+  imports: [NgTemplateOutlet, HlmSheetImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.data-slot]': '_dataSlot()',
+    '[attr.data-state]': '_dataState()',
+    '[attr.data-collapsible]': '_dataCollapsible()',
+    '[attr.data-variant]': '_dataVariant()',
+    '[attr.data-side]': '_dataSide()',
+  },
+  template: `
+    <ng-template #contentContainer>
+      <ng-content />
+    </ng-template>
+
+    @if (collapsible() === 'none') {
+      <ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+    } @else if (_sidebarService.isMobile()) {
+      <hlm-sheet
+        [side]="side()"
+        [state]="_sidebarService.openMobile() ? 'open' : 'closed'"
+        (stateChanged)="_sidebarService.setOpenMobile($event === 'open')"
+      >
+        <hlm-sheet-content
+          *hlmSheetPortal="let ctx"
+          data-slot="sidebar"
+          data-sidebar="sidebar"
+          data-mobile="true"
+          class="bg-sidebar text-sidebar-foreground h-svh w-(--sidebar-width) p-0 [&>button]:hidden"
+          [style.--sidebar-width]="sidebarWidthMobile()"
+        >
+          <div class="flex h-full w-full flex-col">
+            <ng-container *ngTemplateOutlet="contentContainer" />
+          </div>
+        </hlm-sheet-content>
+      </hlm-sheet>
+    } @else {
+      <!-- Sidebar gap on desktop -->
+      <div data-slot="sidebar-gap" [class]="_sidebarGapComputedClass()"></div>
+      <div
+        data-slot="sidebar-container"
+        [attr.data-side]="_dataSide()"
+        [class]="_sidebarContainerComputedClass()"
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+        >
+          <ng-container *ngTemplateOutlet="contentContainer" />
+        </div>
+      </div>
+    }
+  `,
+})
+export class HlmSidebar {
+  protected readonly _sidebarService = inject(HlmSidebarService);
+  private readonly _config = injectHlmSidebarConfig();
+  public readonly sidebarWidthMobile = input<string>(this._config.sidebarWidthMobile);
+
+  public readonly side = input<'left' | 'right'>('left');
+  public readonly variant = input<SidebarVariant>(this._sidebarService.variant());
+  public readonly collapsible = input<'offcanvas' | 'icon' | 'none'>('offcanvas');
+
+  protected readonly _sidebarGapComputedClass = computed(() =>
+    hlm(
+      'transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent',
+      'group-data-[collapsible=offcanvas]:w-0',
+      'group-data-[side=right]:rotate-180',
+      this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+    ),
+  );
+
+  public readonly sidebarContainerClass = input<ClassValue>('');
+  protected readonly _sidebarContainerComputedClass = computed(() =>
+    hlm(
+      'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
+      this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+      this.sidebarContainerClass(),
+    ),
+  );
+
+  protected readonly _dataSlot = computed(() => {
+    return !this._sidebarService.isMobile() ? 'sidebar' : undefined;
+  });
+
+  private readonly _collapsibleAndNonMobile = computed(() => {
+    return this.collapsible() !== 'none' && !this._sidebarService.isMobile();
+  });
+
+  protected readonly _dataState = computed(() => {
+    return this._collapsibleAndNonMobile() ? this._sidebarService.state() : undefined;
+  });
+
+  protected readonly _dataCollapsible = computed(() => {
+    if (this._collapsibleAndNonMobile()) {
+      return this._sidebarService.state() === 'collapsed' ? this.collapsible() : '';
+    }
+    return undefined;
+  });
+
+  protected readonly _dataVariant = computed(() => {
+    return this._collapsibleAndNonMobile() ? this.variant() : undefined;
+  });
+
+  protected readonly _dataSide = computed(() => {
+    return this._collapsibleAndNonMobile() ? this.side() : undefined;
+  });
+
+  constructor() {
+    // Sync variant input with service
+    effect(() => {
+      this._sidebarService.setVariant(this.variant());
+    });
+
+    classes(() => {
+      if (this.collapsible() === 'none') {
+        return hlm('bg-sidebar text-sidebar-foreground flex h-svh w-(--sidebar-width) flex-col');
+      } else if (this._sidebarService.isMobile()) {
+        return '';
+      } else {
+        return hlm('group peer text-sidebar-foreground hidden md:block');
+      }
+    });
+  }
+}

package/src/lib/ui/skeleton/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmSkeleton } from './lib/hlm-skeleton';
+
+export * from './lib/hlm-skeleton';
+
+export const HlmSkeletonImports = [HlmSkeleton] as const;

package/src/lib/ui/skeleton/src/lib/hlm-skeleton.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSkeleton],hlm-skeleton',
+  host: {
+    'data-slot': 'skeleton',
+  },
+})
+export class HlmSkeleton {
+  constructor() {
+    classes(() => 'bg-muted rounded-md block motion-safe:animate-pulse');
+  }
+}

package/src/lib/ui/table/src/index.ts

@@ -0,0 +1,25 @@
+import {
+  HlmCaption,
+  HlmTable,
+  HlmTableContainer,
+  HlmTBody,
+  HlmTd,
+  HlmTFoot,
+  HlmTh,
+  HlmTHead,
+  HlmTr,
+} from './lib/hlm-table';
+
+export * from './lib/hlm-table';
+
+export const HlmTableImports = [
+  HlmCaption,
+  HlmTableContainer,
+  HlmTable,
+  HlmTBody,
+  HlmTd,
+  HlmTFoot,
+  HlmTh,
+  HlmTHead,
+  HlmTr,
+] as const;

package/src/lib/ui/table/src/lib/hlm-table.stories.ts

@@ -0,0 +1,70 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { tableContract } from '@surfnet/curve-contracts';
+import { HlmTable } from './hlm-table';
+import { Component, Input } from '@angular/core';
+import { HlmTableImports } from '..';
+
+const meta: Meta<HlmTable> = {
+  title: 'Components/Table',
+  component: HlmTable,
+  parameters: {
+    docs: {
+      description: {
+        component: tableContract.docs.description,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmTable>;
+
+const apps = [
+  { name: 'SURFconext', category: 'Identity', status: 'Active' },
+  { name: 'SURFdrive', category: 'Storage', status: 'Active' },
+  { name: 'SURFspot', category: 'Marketplace', status: 'Inactive' },
+];
+
+@Component({
+  selector: 'simple-table',
+  imports: [HlmTableImports],
+  template: `
+    <div hlmTableContainer>
+      <table hlmTable class="w-[28rem]">
+        <caption hlmTableCaption>
+          A list of available apps.
+        </caption>
+        <thead hlmTableHeader>
+          <tr hlmTableRow>
+            <th hlmTableHead>Name</th>
+            <th hlmTableHead>Category</th>
+            <th hlmTableHead class="text-right">Status</th>
+          </tr>
+        </thead>
+        <tbody hlmTableBody>
+          @for (app of apps; track app) {
+            <tr hlmTableRow>
+              <td hlmTableCell class="font-medium">{{ app.name }}</td>
+              <td hlmTableCell>{{ app.category }}</td>
+              <td hlmTableCell class="text-right">{{ app.status }}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+})
+class SimpleTable {
+  @Input() apps!: { name: string; category: string; status: string }[];
+}
+
+/** A basic table with a header, body, and caption. */
+export const MenuButtonVariants: Story = {
+  render: () => ({
+    moduleMetadata: {
+      imports: [SimpleTable],
+    },
+    props: { apps: apps },
+    template: '<simple-table [apps]="apps"></simple-table>',
+  }),
+};