@surfnet/curve-angular 0.2.0

package/src/lib/ui/field/src/lib/hlm-field-error.ts

@@ -0,0 +1,100 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  EffectRef,
+  inject,
+  input,
+  OnDestroy,
+} from '@angular/core';
+import { BrnField, BrnFieldA11yService } from '@spartan-ng/brain/field';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-field-error',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: 'alert',
+    'data-slot': 'field-error',
+    '[attr.id]': 'id()',
+    '[hidden]': '!_display()',
+  },
+  template: `
+    @if (_display()) {
+      <ng-content />
+    }
+  `,
+})
+export class HlmFieldError implements OnDestroy {
+  private static _id = 0;
+
+  private readonly _field = inject(BrnField, { optional: true });
+  private readonly _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+
+  private _registeredId?: string | undefined;
+
+  private readonly _hasParentField = !!this._field;
+
+  /** The unique ID for the field error. If none is supplied, it will be auto-generated. */
+  public readonly id = input<string>(`hlm-field-error-${HlmFieldError._id++}`);
+
+  /**
+   * The name of the specific validator error key to match (e.g. 'required').
+   * When omitted, the error is shown if any validation error is present.
+   */
+  public readonly validator = input<string>();
+
+  /** Forces the error message to be visible regardless of the control's validation state. */
+  public readonly forceShow = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  protected readonly _display = computed(
+    () => !this._hasParentField || this.forceShow() || this._hasError(),
+  );
+
+  protected readonly _hasError = computed(() => {
+    const errors = this._field?.errors();
+    if (!errors) return false;
+
+    const validator = this.validator();
+    const spartanInvalid = this._field?.controlState()?.spartanInvalid;
+
+    if (!spartanInvalid) return false;
+
+    return validator ? validator in errors : Object.keys(errors).length > 0;
+  });
+
+  private readonly _cleanup: EffectRef | null = this._a11y
+    ? effect(() => {
+        const a11y = this._a11y;
+        if (!a11y) return;
+
+        const id = this.id();
+        const hasError = this._hasError();
+
+        if (this._registeredId && (this._registeredId !== id || !hasError)) {
+          a11y.unregisterError(this._registeredId);
+          this._registeredId = undefined;
+        }
+
+        if (hasError && this._registeredId !== id) {
+          a11y.registerError(id);
+          this._registeredId = id;
+        }
+      })
+    : null;
+
+  constructor() {
+    classes(() => 'text-destructive text-sm font-normal');
+  }
+
+  ngOnDestroy() {
+    this._cleanup?.destroy();
+
+    if (this._registeredId) {
+      this._a11y?.unregisterError(this._registeredId);
+    }
+  }
+}

package/src/lib/ui/field/src/lib/hlm-field-group.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmFieldGroup],hlm-field-group',
+  host: { 'data-slot': 'field-group' },
+})
+export class HlmFieldGroup {
+  constructor() {
+    classes(
+      () =>
+        'gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
+    );
+  }
+}

package/src/lib/ui/field/src/lib/hlm-field-label.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmLabel } from '../../../label/src';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmFieldLabel],hlm-field-label',
+  hostDirectives: [HlmLabel],
+  host: { 'data-slot': 'field-label' },
+})
+export class HlmFieldLabel {
+  constructor() {
+    classes(() => [
+      'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit',
+      'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+    ]);
+  }
+}

package/src/lib/ui/field/src/lib/hlm-field-legend.ts

@@ -0,0 +1,17 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'legend[hlmFieldLegend]',
+  host: {
+    'data-slot': 'field-legend',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class HlmFieldLegend {
+  public readonly variant = input<'label' | 'legend'>('legend');
+
+  constructor() {
+    classes(() => 'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base');
+  }
+}

package/src/lib/ui/field/src/lib/hlm-field-separator.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSeparator } from '../../../separator/src';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-field-separator',
+  imports: [HlmSeparator],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'data-slot': 'field-separator' },
+  template: `
+    <hlm-separator class="absolute inset-0 top-1/2" />
+    <span
+      data-slot="field-separator-content"
+      class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+    >
+      <ng-content />
+    </span>
+  `,
+})
+export class HlmFieldSeparator {
+  constructor() {
+    classes(() => '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative');
+  }
+}

package/src/lib/ui/field/src/lib/hlm-field-set.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'fieldset[hlmFieldSet]',
+  host: { 'data-slot': 'field-set' },
+})
+export class HlmFieldSet {
+  constructor() {
+    classes(
+      () =>
+        'gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
+    );
+  }
+}

package/src/lib/ui/field/src/lib/hlm-field-title.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmFieldTitle],hlm-field-title',
+  host: { 'data-slot': 'field-label' },
+})
+export class HlmFieldTitle {
+  constructor() {
+    classes(
+      () =>
+        'gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center',
+    );
+  }
+}

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

@@ -0,0 +1,117 @@
+import { JsonPipe } from '@angular/common';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { argsToTemplate, type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
+import { fieldContract } from '@surfnet/curve-contracts';
+import { HlmField, HlmFieldImports } from '..';
+import { HlmCheckbox, HlmInputImports } from '../../../../../public-api';
+
+const meta: Meta<HlmField> = {
+  title: 'Components/Field',
+  component: HlmField,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmFieldImports, HlmInputImports, HlmCheckbox, ReactiveFormsModule, JsonPipe],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: fieldContract.docs.description,
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'inline-radio',
+      options: fieldContract.props.orientations,
+      description: fieldContract.props.orientations
+        .map(
+          (orientation) => `\`${orientation}\` — ${fieldContract.docs.orientations[orientation]}`,
+        )
+        .join('\n\n'),
+      table: {
+        defaultValue: { summary: fieldContract.defaults.orientations },
+      },
+    },
+  },
+  args: {
+    orientation: fieldContract.defaults.orientations,
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmField>;
+
+/** A label, input, and helper description. */
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+			<div class="w-full max-w-md">
+				<div hlmField class="w-72" ${argsToTemplate(args)}>
+					<label hlmFieldLabel for="email">Email</label>
+					<input hlmInput id="email" type="email" placeholder="you@surf.nl" />
+					<p hlmFieldDescription>This is an input description.</p>
+				</div>
+			</div>
+		`,
+  }),
+};
+
+/** A horizontal field, e.g. a checkbox with its label. */
+export const Horizontal: Story = {
+  render: () => ({
+    template: `
+			<div class="w-full max-w-md">
+				<div hlmField orientation="horizontal" class="w-72">
+					<hlm-checkbox inputId="remember" />
+					<label hlmFieldLabel for="remember" class="font-normal">Remember me</label>
+				</div>
+			</div>
+		`,
+  }),
+};
+
+/** An invalid field showing an error message. Touch the field to test the minimum of 8 characters. */
+export const WithError: Story = {
+  render: () => ({
+    props: {
+      form: new FormGroup({
+        password: new FormControl('', {
+          validators: [Validators.required, Validators.minLength(8)],
+        }),
+      }),
+    },
+    template: `
+			<form [formGroup]="form" class="w-full max-w-md">
+				<div hlmField class="w-72">
+					<label hlmFieldLabel for="password">Password</label>
+					<input hlmInput formControlName="password" id="password" type="password" />
+					<hlm-field-error validator="required">Password must be at least 8 characters.</hlm-field-error>
+          <hlm-field-error validator="minlength">Password must be at least 8 characters.</hlm-field-error>
+				</div>
+			</form>
+		`,
+  }),
+};
+
+/** Several fields grouped, with a labelled separator. */
+export const Group: Story = {
+  render: () => ({
+    template: `
+			<div class="w-full max-w-md">
+				<fieldset hlmFieldSet class="w-72">
+					<div hlmField>
+						<label hlmFieldLabel for="g-email">Email</label>
+						<input hlmInput id="g-email" type="email" placeholder="you@surf.nl" />
+					</div>
+					<hlm-field-separator>Or continue with</hlm-field-separator>
+					<div hlmField>
+						<label hlmFieldLabel for="g-password">Password</label>
+						<input hlmInput id="g-password" type="password" />
+					</div>
+				</fieldset>
+			</div>
+		`,
+  }),
+};

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

@@ -0,0 +1,49 @@
+import { Directive, input } from '@angular/core';
+import { BrnField } from '@spartan-ng/brain/field';
+import { classes } from '../../../utils/src';
+import type { FieldOrientationName } from '@surfnet/curve-contracts';
+import { cva, VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+
+const fieldVariants = cva(
+  'data-[matches-spartan-invalid=true]:text-destructive gap-3 group/field flex w-full',
+  {
+    variants: {
+      orientation: {
+        vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+        horizontal: [
+          'flex-row items-center',
+          '*:data-[slot=field-label]:flex-auto',
+          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+        responsive: [
+          'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto',
+          '@md/field-group:*:data-[slot=field-label]:flex-auto',
+          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+      } satisfies Record<FieldOrientationName, ClassValue>,
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  },
+);
+
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+
+@Directive({
+  selector: '[hlmField],hlm-field',
+  hostDirectives: [{ directive: BrnField, inputs: ['data-invalid', 'forceInvalid'] }],
+  host: {
+    role: 'group',
+    'data-slot': 'field',
+    '[attr.data-orientation]': 'orientation()',
+  },
+})
+export class HlmField {
+  public readonly orientation = input<FieldVariants['orientation']>('vertical');
+
+  constructor() {
+    classes(() => fieldVariants({ orientation: this.orientation() }));
+  }
+}

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

@@ -0,0 +1,7 @@
+import { NgIcon } from '@ng-icons/core';
+import { HlmIcon } from './lib/hlm-icon';
+
+export * from './lib/hlm-icon';
+export * from './lib/hlm-icon.token';
+
+export const HlmIconImports = [HlmIcon, NgIcon] as const;

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

@@ -0,0 +1,20 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import type { IconSize } from './hlm-icon';
+
+export interface HlmIconConfig {
+  size: IconSize;
+}
+
+const defaultConfig: HlmIconConfig = {
+  size: 'base',
+};
+
+const HlmIconConfigToken = new InjectionToken<HlmIconConfig>('HlmIconConfig');
+
+export function provideHlmIconConfig(config: Partial<HlmIconConfig>): ValueProvider {
+  return { provide: HlmIconConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmIconConfig(): HlmIconConfig {
+  return inject(HlmIconConfigToken, { optional: true }) ?? defaultConfig;
+}

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

@@ -0,0 +1,42 @@
+import { Directive, computed, input } from '@angular/core';
+import { injectHlmIconConfig } from './hlm-icon.token';
+
+export type IconSize =
+  | 'xs'
+  | 'sm'
+  | 'base'
+  | 'lg'
+  | 'xl'
+  | 'none'
+  | (Record<never, never> & string);
+
+@Directive({
+  selector: 'ng-icon[hlmIcon], ng-icon[hlm]',
+  host: {
+    '[style.--ng-icon__size]': '_computedSize()',
+  },
+})
+export class HlmIcon {
+  private readonly _config = injectHlmIconConfig();
+  public readonly size = input<IconSize>(this._config.size);
+
+  protected readonly _computedSize = computed(() => {
+    const size = this.size();
+
+    switch (size) {
+      case 'xs':
+        return '12px';
+      case 'sm':
+        return '16px';
+      case 'base':
+        return '24px';
+      case 'lg':
+        return '32px';
+      case 'xl':
+        return '48px';
+      default: {
+        return size;
+      }
+    }
+  });
+}

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

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

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

@@ -0,0 +1,94 @@
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { argsToTemplate, type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
+import { inputContract } from '@surfnet/curve-contracts';
+import { HlmInput, HlmInputImports } from '..';
+import { HlmButton, HlmLabel } from '../../../../../public-api';
+
+const meta: Meta<HlmInput> = {
+  title: 'Components/Input',
+  component: HlmInput,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmInputImports, HlmLabel, HlmButton, FormsModule, ReactiveFormsModule],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: inputContract.docs.description,
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+      description: 'The native input type.',
+    },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    type: 'text',
+    placeholder: 'Type something…',
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmInput>;
+
+/** The default input — tweak it via the controls. */
+export const Default: Story = {
+  render: ({ ...args }) => ({
+    props: args,
+    template: `
+    	<input hlmInput type="text" class="w-72" ${argsToTemplate(args)} />
+    `,
+  }),
+};
+
+/** Common input types side by side. */
+export const Types: Story = {
+  render: () => ({
+    template: `
+			<div class="flex w-72 flex-col gap-3">
+				<input hlmInput type="text" placeholder="Text" />
+				<input hlmInput type="email" placeholder="Email" />
+				<input hlmInput type="password" placeholder="Password" />
+				<input hlmInput type="search" placeholder="Search" />
+			</div>
+		`,
+  }),
+};
+
+/** Disabled state. */
+export const Disabled: Story = {
+  render: () => ({
+    template: `
+    	<input aria-label="Email" disabled class="w-72" hlmInput placeholder="Disabled"/>
+    `,
+  }),
+};
+
+/** Invalid state. Touch the input to test the required validator. */
+export const Error: Story = {
+  render: () => ({
+    props: {
+      form: new FormGroup({
+        test: new FormControl('', { validators: [Validators.required] }),
+      }),
+    },
+    template: `
+			<form [formGroup]="form" class="w-full max-w-md">
+    		<input hlmInput formControlName="test" class="w-72" placeholder="Invalid value" />
+			</form>
+    `,
+  }),
+};

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

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnInput } from '@spartan-ng/brain/input';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmInput]',
+  hostDirectives: [
+    { directive: BrnInput, inputs: ['id', 'forceInvalid'] },
+    BrnFieldControlDescribedBy,
+  ],
+})
+export class HlmInput {
+  constructor() {
+    classes(
+      () =>
+        'dark:bg-input/30 border-input 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 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    );
+  }
+}

package/src/lib/ui/input-group/src/index.ts

@@ -0,0 +1,22 @@
+import { HlmInputGroup } from './lib/hlm-input-group';
+import { HlmInputGroupAddon } from './lib/hlm-input-group-addon';
+import { HlmInputGroupButton } from './lib/hlm-input-group-button';
+import { HlmInputGroupInput } from './lib/hlm-input-group-input';
+import { HlmInputGroupText } from './lib/hlm-input-group-text';
+import { HlmInputGroupTextarea } from './lib/hlm-input-group-textarea';
+
+export * from './lib/hlm-input-group';
+export * from './lib/hlm-input-group-addon';
+export * from './lib/hlm-input-group-button';
+export * from './lib/hlm-input-group-input';
+export * from './lib/hlm-input-group-text';
+export * from './lib/hlm-input-group-textarea';
+
+export const HlmInputGroupImports = [
+  HlmInputGroup,
+  HlmInputGroupAddon,
+  HlmInputGroupButton,
+  HlmInputGroupInput,
+  HlmInputGroupText,
+  HlmInputGroupTextarea,
+] as const;

package/src/lib/ui/input-group/src/lib/hlm-input-group-addon.ts

@@ -0,0 +1,40 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        'inline-start': 'ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem] order-first',
+        'inline-end': 'pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem] order-last',
+        'block-start':
+          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+        'block-end':
+          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+);
+
+type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+
+@Directive({
+  selector: '[hlmInputGroupAddon],hlm-input-group-addon',
+  host: {
+    role: 'group',
+    'data-slot': 'input-group-addon',
+    '[attr.data-align]': 'align()',
+  },
+})
+export class HlmInputGroupAddon {
+  public readonly align = input<InputGroupAddonVariants['align']>('inline-start');
+
+  constructor() {
+    classes(() => inputGroupAddonVariants({ align: this.align() }));
+  }
+}