@surfnet/curve-angular 0.2.0

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate, moduleMetadata } from '@storybook/angular';
+import { HlmCard, HlmCardImports } from '..';
+import { HlmButton } from '../../../button/src/lib/hlm-button';
+import { cardContract } from '@surfnet/curve-contracts';
+
+const meta: Meta<HlmCard> = {
+  title: 'Components/Card',
+  component: HlmCard,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmButton, HlmCardImports],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: cardContract.docs.description,
+      },
+    },
+  },
+
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['default', 'sm'],
+      description: 'Spacing density of the card.',
+      table: { defaultValue: { summary: 'default' } },
+    },
+  },
+  args: {
+    size: 'default',
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmCard>;
+
+/** Default card with header, content, and footer. */
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <hlm-card class="w-80" ${argsToTemplate(args)}>
+        <div hlmCardHeader>
+          <h3 hlmCardTitle>Card title</h3>
+          <p hlmCardDescription>A short description of what this card is about.</p>
+        </div>
+        <p hlmCardContent class="text-muted-foreground">Card body content goes here.</p>
+        <p hlmCardFooter class="justify-end gap-2">
+          <button hlmBtn variant="outline">Cancel</button>
+          <button hlmBtn>Confirm</button>
+        </p>
+      </hlm-card>
+    `,
+  }),
+};
+
+/** Compact (`sm`) card with tighter spacing. */
+export const Small: Story = {
+  render: () => ({
+    template: `
+      <section hlmCard size="sm" class="w-80">
+        <div hlmCardHeader>
+          <h3 hlmCardTitle>Small card</h3>
+          <p hlmCardDescription>Compact spacing variant.</p>
+        </div>
+        <p hlmCardContent class="text-muted-foreground">Less padding all round.</p>
+      </section>
+    `,
+  }),
+};
+
+/** Card with an action slot in the header (e.g. a menu trigger). */
+export const WithHeaderAction: Story = {
+  render: () => ({
+    template: `
+      <section hlmCard class='w-80'>
+        <div hlmCardHeader>
+          <h3 hlmCardTitle>With action</h3>
+          <p hlmCardDescription>
+            An action button lives in the header.
+          </p>
+          <div hlmCardAction>
+            <button hlmBtn variant="ghost" size="sm">Edit</button>
+          </div>
+        </div>
+        <p hlmCardContent class="text-muted-foreground">Content area.</p>
+      </section>
+    `,
+  }),
+};
+
+/** Card with only a content area — no header or footer. */
+export const ContentOnly: Story = {
+  render: () => ({
+    template: `
+      <section hlmCard class='w-80'>
+        <p hlmCardContent class="text-muted-foreground">
+          Just a card with content and no header or footer.
+        </p>
+      </section>
+    `,
+  }),
+};

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

@@ -0,0 +1,19 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export type HlmCardConfig = {
+  size: 'sm' | 'default';
+};
+
+const defaultConfig: HlmCardConfig = {
+  size: 'default',
+};
+
+const HlmCardConfigToken = new InjectionToken<HlmCardConfig>('HlmCardConfig');
+
+export function provideHlmCardConfig(config: Partial<HlmCardConfig>): ValueProvider {
+  return { provide: HlmCardConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmCardConfig(): HlmCardConfig {
+  return inject(HlmCardConfigToken, { optional: true }) ?? defaultConfig;
+}

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

@@ -0,0 +1,22 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+import { HlmCardConfig, injectHlmCardConfig } from './hlm-card.token';
+
+@Directive({
+  selector: '[hlmCard],hlm-card',
+  host: {
+    'data-slot': 'card',
+    '[attr.data-size]': 'size()',
+  },
+})
+export class HlmCard {
+  private readonly _defaultConfig = injectHlmCardConfig();
+  public readonly size = input<HlmCardConfig['size']>(this._defaultConfig.size);
+
+  constructor() {
+    classes(
+      () =>
+        'ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+    );
+  }
+}

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

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

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { HlmCheckbox, HlmCheckboxImports } from '..';
+import { HlmLabel } from '../../../label/src/lib/hlm-label';
+import { checkboxContract } from '@surfnet/curve-contracts';
+
+const meta: Meta<HlmCheckbox> = {
+  title: 'Components/Checkbox',
+  component: HlmCheckbox,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmCheckboxImports, HlmLabel],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: checkboxContract.docs.description,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmCheckbox>;
+
+/** A controlled checkbox driven by React state — the typical usage pattern. */
+export const Default: Story = {
+  args: { disabled: false },
+  render: (args) => ({
+    props: args,
+    template: `
+			<hlm-checkbox inputId="testCheckbox" checked [disabled]="disabled" />
+		`,
+  }),
+};
+
+/** A checkbox paired with a clickable label. */
+export const WithLabel: Story = {
+  render: () => ({
+    template: `
+			<label class="gap-2" hlmLabel>
+				<hlm-checkbox checked/>
+				Accept terms and conditions
+			</label>
+		`,
+  }),
+};
+
+/** Every state side by side. */
+export const States: Story = {
+  render: () => ({
+    template: `
+			<div class="flex flex-col gap-3">
+				<label class="gap-2" hlmLabel>
+					<hlm-checkbox/>
+					Unchecked
+				</label>
+				<label class="gap-2" hlmLabel>
+					<hlm-checkbox checked/>
+					Checked
+				</label>
+				<label class="gap-2" hlmLabel>
+					<hlm-checkbox indeterminate="true"/>
+					Indeterminate
+				</label>
+				<label class="gap-2" hlmLabel>
+					<hlm-checkbox disabled/>
+					Disabled
+				</label>
+				<label class="gap-2" hlmLabel>
+					<hlm-checkbox checked disabled/>
+					Disabled checked
+				</label>
+			</div>
+    `,
+  }),
+};

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

@@ -0,0 +1,160 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  linkedSignal,
+  model,
+  output,
+  viewChild,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCheck } from '@ng-icons/phosphor-icons/regular';
+import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { HlmIcon } from '../../../icon/src';
+import { hlm } from '../../../utils/src';
+import type { ClassValue } from 'clsx';
+
+export const HLM_CHECKBOX_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => HlmCheckbox),
+  multi: true,
+};
+
+@Component({
+  selector: 'hlm-checkbox',
+  imports: [BrnCheckbox, NgIcon, HlmIcon],
+  providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
+  viewProviders: [provideIcons({ phosphorCheck })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnFieldControlDescribedBy],
+  host: {
+    class: 'contents peer',
+    'data-slot': 'checkbox',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.data-disabled]': '_disabled() ? "" : null',
+  },
+  template: `
+    <brn-checkbox
+      [id]="inputId()"
+      [name]="name()"
+      [class]="_computedClass()"
+      [checked]="checked()"
+      [(indeterminate)]="indeterminate"
+      [disabled]="_disabled()"
+      [required]="required()"
+      [aria-label]="ariaLabel()"
+      [aria-labelledby]="ariaLabelledby()"
+      [aria-describedby]="ariaDescribedby()"
+      [forceInvalid]="forceInvalid()"
+      (checkedChange)="_handleChange($event)"
+      (touched)="_onTouched?.()"
+    >
+      @if (checked() || indeterminate()) {
+        <span class="flex items-center justify-center text-current transition-none">
+          <ng-icon hlm size="14px" name="phosphorCheck" />
+        </span>
+      }
+    </brn-checkbox>
+  `,
+})
+export class HlmCheckbox implements ControlValueAccessor {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary data-[matches-spartan-invalid=true]:aria-checked:border-primary data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 peer shrink-0 cursor-default outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      this.userClass(),
+      this._errorStateClass(),
+    ),
+  );
+
+  /** Used to set the id on the underlying brn element. */
+  public readonly inputId = input<string | null>(null);
+
+  /** Used to set the aria-label attribute on the underlying brn element. */
+  public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+
+  /** Used to set the aria-labelledby attribute on the underlying brn element. */
+  public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });
+
+  /** Used to set the aria-describedby attribute on the underlying brn element. */
+  public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });
+
+  /** The checked state of the checkbox. */
+  public readonly checkedInput = input<boolean, BooleanInput>(false, {
+    alias: 'checked',
+    transform: booleanAttribute,
+  });
+  public readonly checked = linkedSignal(this.checkedInput);
+
+  /** Emits when checked state changes. */
+  public readonly checkedChange = output<boolean>();
+
+  /**
+   * The indeterminate state of the checkbox.
+   * For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked.
+   */
+  public readonly indeterminate = model<boolean>(false);
+
+  /** The name attribute of the checkbox. */
+  public readonly name = input<string | null>(null);
+
+  /** Whether the checkbox is required. */
+  public readonly required = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  /** Whether the checkbox is disabled. */
+  public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  /** Whether to force the checkbox into an invalid state. */
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  protected readonly _disabled = linkedSignal(this.disabled);
+
+  private readonly _brnCheckbox = viewChild.required(BrnCheckbox);
+
+  private readonly _spartanInvalid = computed(
+    () => this.forceInvalid() || this._brnCheckbox().spartanInvalid?.(),
+  );
+  protected readonly _errorStateClass = computed(() =>
+    this._spartanInvalid()
+      ? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+      : '',
+  );
+
+  protected _onChange?: ChangeFn<boolean>;
+  protected _onTouched?: TouchFn;
+
+  protected _handleChange(value: boolean): void {
+    if (this._disabled()) return;
+    this.checked.set(value);
+    this.checkedChange.emit(value);
+    this._onChange?.(value);
+  }
+
+  /** CONTROL VALUE ACCESSOR */
+  writeValue(value: boolean): void {
+    this.checked.set(value);
+  }
+
+  registerOnChange(fn: ChangeFn<boolean>): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: TouchFn): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabled.set(isDisabled);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { HlmDataTableContent } from './lib/hlm-data-table-content';
+import { HlmDataTablePagination } from './lib/hlm-data-table-pagination';
+import { HlmDataTableToolbar } from './lib/hlm-data-table-toolbar';
+
+export * from './lib/inject-data-table';
+export * from './lib/hlm-data-table-content';
+export * from './lib/hlm-data-table-pagination';
+export * from './lib/hlm-data-table-toolbar';
+
+export const HlmDataTableImports = [
+  HlmDataTableContent,
+  HlmDataTablePagination,
+  HlmDataTableToolbar,
+] as const;

package/src/lib/ui/data-table/src/lib/hlm-data-table-content.ts

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmTableImports } from '../../../table/src';
+import { FlexRenderDirective, type ColumnDef, type Table } from '@tanstack/angular-table';
+
+/**
+ * Renders a TanStack table instance into the styled helm `table` directives. Mirrors React's
+ * `DataTableContent`: header groups, body rows (with `data-state="selected"` per selected
+ * row), and an empty-state row when there are no rows.
+ *
+ * String / primitive header and cell defs are rendered as inert escaped text by `*flexRender`
+ * (matching React's `flexRender` of a string node); component cell defs created with
+ * `flexRenderComponent()` are mounted in place. To render markup, return a
+ * `flexRenderComponent()` rather than an HTML string — raw strings are never parsed as HTML.
+ */
+@Component({
+  selector: 'hlm-data-table-content',
+  imports: [HlmTableImports, FlexRenderDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'data-table-content',
+    class: 'block overflow-hidden rounded-md border',
+  },
+  template: `
+    <div hlmTableContainer>
+      <table hlmTable>
+        <thead hlmTableHeader>
+          @for (headerGroup of table().getHeaderGroups(); track headerGroup.id) {
+            <tr hlmTableRow>
+              @for (header of headerGroup.headers; track header.id) {
+                <th hlmTableHead>
+                  @if (!header.isPlaceholder) {
+                    <ng-container
+                      *flexRender="
+                        header.column.columnDef.header;
+                        props: header.getContext();
+                        let headerContent
+                      "
+                    >
+                      {{ headerContent }}
+                    </ng-container>
+                  }
+                </th>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody hlmTableBody>
+          @if (table().getRowModel().rows.length) {
+            @for (row of table().getRowModel().rows; track row.id) {
+              <tr hlmTableRow [attr.data-state]="row.getIsSelected() ? 'selected' : null">
+                @for (cell of row.getVisibleCells(); track cell.id) {
+                  <td hlmTableCell>
+                    <ng-container
+                      *flexRender="
+                        cell.column.columnDef.cell;
+                        props: cell.getContext();
+                        let cellContent
+                      "
+                    >
+                      {{ cellContent }}
+                    </ng-container>
+                  </td>
+                }
+              </tr>
+            }
+          } @else {
+            <tr hlmTableRow>
+              <td hlmTableCell [attr.colspan]="columns().length" class="h-24 text-center">
+                {{ noResultsLabel() }}
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+})
+export class HlmDataTableContent<TData> {
+  /** The TanStack table instance, e.g. from `injectDataTable`. */
+  public readonly table = input.required<Table<TData>>();
+
+  /** The column defs — used to span the empty-state row across all columns. */
+  public readonly columns = input.required<ColumnDef<TData, unknown>[]>();
+
+  /** Content shown in the body when there are no rows. */
+  public readonly noResultsLabel = input<string>('No results.');
+}

package/src/lib/ui/data-table/src/lib/hlm-data-table-pagination.ts

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmButton } from '../../../button/src';
+import { type Table } from '@tanstack/angular-table';
+
+/**
+ * Selection summary plus Previous / Next paging controls. Mirrors React's
+ * `DataTablePagination`.
+ */
+@Component({
+  selector: 'hlm-data-table-pagination',
+  imports: [HlmButton],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'data-table-pagination',
+    class: 'flex items-center justify-end gap-2 py-4',
+  },
+  template: `
+    <div class="text-muted-foreground flex-1 text-sm">
+      {{
+        selectionLabel()(
+          table().getFilteredSelectedRowModel().rows.length,
+          table().getFilteredRowModel().rows.length
+        )
+      }}
+    </div>
+    <div class="flex gap-2">
+      <button
+        hlmBtn
+        variant="outline"
+        size="sm"
+        [disabled]="!table().getCanPreviousPage()"
+        (click)="table().previousPage()"
+      >
+        {{ previousLabel() }}
+      </button>
+      <button
+        hlmBtn
+        variant="outline"
+        size="sm"
+        [disabled]="!table().getCanNextPage()"
+        (click)="table().nextPage()"
+      >
+        {{ nextLabel() }}
+      </button>
+    </div>
+  `,
+})
+export class HlmDataTablePagination<TData> {
+  /** The TanStack table instance, e.g. from `injectDataTable`. */
+  public readonly table = input.required<Table<TData>>();
+
+  /** Label for the "previous page" button. */
+  public readonly previousLabel = input<string>('Previous');
+
+  /** Label for the "next page" button. */
+  public readonly nextLabel = input<string>('Next');
+
+  /** Builds the selection-summary text from the selected and total row counts. */
+  public readonly selectionLabel = input<(selectedCount: number, totalCount: number) => string>(
+    (selectedCount, totalCount) => `${selectedCount} of ${totalCount} row(s) selected.`,
+  );
+}

package/src/lib/ui/data-table/src/lib/hlm-data-table-toolbar.ts

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+/**
+ * Layout wrapper for data-table controls (filter inputs, column toggles, actions). Mirrors
+ * React's `DataTableToolbar` — a styled flex row above the table.
+ */
+@Directive({
+  selector: '[hlmDataTableToolbar]',
+  host: { 'data-slot': 'data-table-toolbar' },
+})
+export class HlmDataTableToolbar {
+  constructor() {
+    classes(() => 'flex items-center gap-2 py-4');
+  }
+}