feat(radio): add component (#67)

projects/cli/schematics/components/components-generator.ts

@@ -5,6 +5,7 @@ export interface ComponentGeneratorSchema {
     | 'button'
     | 'checkbox'
     | 'pin'
+    | 'radio'
     | 'switch'
     | 'tag'
   )[];

projects/cli/schematics/components/files/radio/index.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { ZenRadioComponent } from './radio.component';
+
+@NgModule({
+  imports: [ZenRadioComponent],
+  exports: [ZenRadioComponent],
+})
+export class ZenRadioModule {}
+export * from './radio.component';

projects/cli/schematics/components/files/radio/radio.component.html

@@ -0,0 +1,9 @@
+<input
+  [attr.aria-checked]="checked()"
+  [checked]="checked()"
+  [attr.aria-disabled]="zenDisabledDirective.disabledBoolean()"
+  [disabled]="zenDisabledDirective.disabledBoolean()"
+  [attr.id]="id()"
+  [attr.name]="name()"
+  type="radio"
+/>

projects/cli/schematics/components/files/radio/radio.component.scss

@@ -0,0 +1,8 @@
+$radio-disabled-bg-color: lightgrey;
+
+:host[aria-disabled='true'],
+:host:has([aria-disabled='true']) {
+  &, & > * {
+    cursor: not-allowed;
+  }
+}

projects/cli/schematics/components/files/radio/radio.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenRadioComponent } from './radio.component';
+
+describe('ZenRadioComponent', () => {
+  let component: ZenRadioComponent;
+  let fixture: ComponentFixture<ZenRadioComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenRadioComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenRadioComponent);
+    fixture.componentRef.setInput('name', 'name-value');
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/cli/schematics/components/files/radio/radio.component.ts

@@ -0,0 +1,73 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  inject,
+  input,
+  model,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  ZenDisabledDirective,
+  ZenHostDirective,
+} from 'ng-zen/directives/disabled';
+
+type OnChangeFn = (value: boolean) => void;
+type OnTouchedFn = () => void;
+
+@Component({
+  selector: 'zen-radio',
+  standalone: true,
+  templateUrl: './radio.component.html',
+  styleUrl: './radio.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ZenRadioComponent),
+      multi: true,
+    },
+  ],
+  hostDirectives: [ZenHostDirective],
+})
+export class ZenRadioComponent implements ControlValueAccessor {
+  readonly name = input.required<string>();
+  readonly id = input<string | undefined>();
+
+  /** Model for the checked state of the checkbox. */
+  readonly checked = model<boolean>(false);
+
+  /** @ignore */
+  readonly zenDisabledDirective = inject(ZenDisabledDirective, { self: true });
+
+  private onChange: OnChangeFn = () => {};
+  private onTouched: OnTouchedFn = () => {};
+
+  /**
+   * Writes a new value to the component.
+   */
+  writeValue(value: boolean): void {
+    this.checked.set(value);
+  }
+
+  /**
+   * Registers a function to be called when the value changes.
+   */
+  registerOnChange(fn: OnChangeFn): void {
+    this.onChange = fn;
+  }
+
+  /**
+   * Registers a function to be called when the component is touched.
+   */
+  registerOnTouched(fn: OnTouchedFn): void {
+    this.onTouched = fn;
+  }
+
+  /**
+   * Sets the disabled state of the component.
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.zenDisabledDirective.disabled.set(isDisabled);
+  }
+}

projects/cli/schematics/components/schema.json

@@ -16,6 +16,7 @@
           "button",
           "checkbox",
           "pin",
+          "radio",
           "switch",
           "tag"
         ]

projects/cli/stories/components/radio.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { ZenRadioComponent } from 'ng-zen/components/radio';
+
+export default {
+  title: 'Components/Radio',
+  component: ZenRadioComponent,
+  tags: ['autodocs'],
+  render: args => ({ props: { ...args } }),
+} satisfies Meta<ZenRadioComponent>;
+
+type Story = StoryObj<ZenRadioComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `
+        <zen-radio name="group-1" />
+        <zen-radio name="group-1" [checked]="true" />
+        <zen-radio name="group-1" />
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    template: `
+        <zen-radio disabled name="group-2"/>
+        <zen-radio disabled name="group-2"/>
+        <zen-radio disabled name="group-2"/>
+    `,
+  }),
+};
+
+export const Labeled: Story = {
+  render: () => ({
+    template: `
+        <div style="display: flex; flex-direction: column">
+          <label><zen-radio name="group-3"/> 1</label>
+          <label><zen-radio name="group-3"/> 2</label>
+          <label><zen-radio name="group-3"/> 3</label>
+        </div>
+    `,
+  }),
+};