✨ Add input controls and checkbox component

Introduced a new input controls library with a checkbox component.

- ✨ **Feature**: Added input controls library with checkbox component
- 🎨 **Style**: Updated checkbox component styles and structure
- 🧪 **Test**: Added unit tests for checkbox and empty state components
- 🛠️ **Refactor**: Improved checkbox component code and removed unused styles
- 📚 **Docs**: Updated commit message guidelines in VSCode settings

libs/ui/input-controls/src/input-controls.scss

@@ -0,0 +1 @@
+@use "./lib/checkbox/checkbox";

libs/ui/input-controls/src/lib/checkbox/_checkbox.scss

@@ -2,11 +2,11 @@
   @apply relative inline-flex p-3 items-center justify-center rounded-lg bg-isa-white size-6 border border-solid border-isa-neutral-900;
   font-size: 1.5rem;
 
-  ng-icon {
+  .ui-checkbox__icon {
     @apply invisible min-w-6 size-6 text-isa-white;
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     position: absolute;
     top: 0;
     left: 0;
@@ -16,22 +16,22 @@
     @apply cursor-pointer;
   }
 
-  &:has(input[type='checkbox']:checked) {
+  &:has(input[type="checkbox"]:checked) {
     @apply bg-isa-neutral-900 text-isa-white;
 
-    ng-icon {
+    .ui-checkbox__icon {
       @apply visible;
     }
   }
 
-  &:has(input[type='checkbox']:disabled) {
+  &:has(input[type="checkbox"]:disabled) {
     @apply bg-isa-neutral-400 border-isa-neutral-400 cursor-default;
 
-    &:has(input[type='checkbox']:checked) {
+    &:has(input[type="checkbox"]:checked) {
       @apply bg-isa-neutral-400 border-isa-neutral-400;
     }
 
-    input[type='checkbox'] {
+    input[type="checkbox"] {
       @apply cursor-default;
     }
   }
@@ -47,11 +47,11 @@
 
   @apply rounded-full bg-isa-neutral-300 size-12;
 
-  ng-icon {
+  .ui-checkbox__icon {
     @apply invisible size-6 text-isa-neutral-100;
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     position: absolute;
     top: 0;
     left: 0;
@@ -65,10 +65,10 @@
     @apply bg-isa-neutral-400;
   }
 
-  &:has(input[type='checkbox']:checked) {
+  &:has(input[type="checkbox"]:checked) {
     @apply bg-isa-neutral-700;
 
-    ng-icon {
+    .ui-checkbox__icon {
       @apply visible;
     }
 
@@ -77,14 +77,14 @@
     }
   }
 
-  &:has(input[type='checkbox']:disabled) {
+  &:has(input[type="checkbox"]:disabled) {
     @apply bg-isa-neutral-400 cursor-default;
 
-    &:has(input[type='checkbox']:checked) {
+    &:has(input[type="checkbox"]:checked) {
       @apply bg-isa-neutral-700;
     }
 
-    input[type='checkbox'] {
+    input[type="checkbox"] {
       @apply cursor-default;
     }
   }

libs/ui/input-controls/src/lib/checkbox/checkbox.component.html

@@ -1 +1,2 @@
-<ng-content select="input[type=checkbox]"></ng-content> <ng-icon name="isaActionCheck"></ng-icon>
+<ng-content select="input[type=checkbox]"></ng-content>
+<ng-icon class="ui-checkbox__icon" name="isaActionCheck"></ng-icon>

libs/ui/input-controls/src/lib/checkbox/checkbox.component.spec.ts

@@ -0,0 +1,49 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import { CheckboxComponent, CheckboxAppearance } from './checkbox.component';
+import { MockComponent } from 'ng-mocks';
+import { NgIconComponent } from '@ng-icons/core';
+
+describe('CheckboxComponent', () => {
+  let spectator: SpectatorHost<CheckboxComponent>;
+  const createHost = createHostFactory({
+    component: CheckboxComponent,
+    declarations: [MockComponent(NgIconComponent)],
+    template: `<ui-checkbox [appearance]="appearance"><input type="checkbox" />></ui-checkbox>`,
+  });
+
+  beforeEach(() => {
+    spectator = createHost(undefined, {
+      hostProps: {
+        appearance: CheckboxAppearance.Checkbox,
+      },
+    });
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should use default appearance as Checkbox', () => {
+    // Assert default appearance value and computed class
+    expect(spectator.component.appearance()).toEqual(CheckboxAppearance.Checkbox);
+    expect(spectator.component.appearanceClass()).toEqual('ui-checkbox__checkbox');
+  });
+
+  it('should compute bullet class when appearance is set to Bullet', () => {
+    // Act: update appearance signal to Bullet
+    spectator.setHostInput('appearance', CheckboxAppearance.Bullet);
+
+    // Assert updated appearance & computed class
+    expect(spectator.component.appearance()).toEqual(CheckboxAppearance.Bullet);
+    expect(spectator.component.appearanceClass()).toEqual('ui-checkbox__bullet');
+  });
+
+  it('should render checkbox input element', () => {
+    // Arrange & Act
+    const checkbox = spectator.query('input[type="checkbox"]');
+
+    // Assert
+    expect(checkbox).toBeTruthy();
+    expect(checkbox).toHaveAttribute('type', 'checkbox');
+  });
+});

libs/ui/input-controls/src/lib/checkbox/checkbox.component.ts

@@ -13,13 +13,11 @@ export const CheckboxAppearance = {
   Checkbox: 'checkbox',
 } as const;
 
-export type CheckboxAppearance =
-  (typeof CheckboxAppearance)[keyof typeof CheckboxAppearance];
+export type CheckboxAppearance = (typeof CheckboxAppearance)[keyof typeof CheckboxAppearance];
 
 @Component({
   selector: 'ui-checkbox',
   templateUrl: './checkbox.component.html',
-  styleUrls: ['./checkbox.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [NgIconComponent],