@ng-zen/cli 19.0.0-alpha.3 → 19.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "19.0.0-alpha.3",
+  "version": "19.0.0-alpha.5",
   "description": "A blank schematics",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/components/components-generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"components-generator.js","sourceRoot":"","sources":["../../../../../projects/cli/src/schematics/components/components-generator.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type ComponentType = 'avatar' | 'button' | 'input';\n\nexport interface ComponentGeneratorSchema extends GeneratorSchemaBase {\n  components: ComponentType[];\n}\n"]}
+{"version":3,"file":"components-generator.js","sourceRoot":"","sources":["../../../../../projects/cli/src/schematics/components/components-generator.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type ComponentType = 'avatar' | 'button' | 'checkbox' | 'input' | 'textarea';\n\nexport interface ComponentGeneratorSchema extends GeneratorSchemaBase {\n  components: ComponentType[];\n}\n"]}

package/schematics/components/components-generator.ts

@@ -1,6 +1,6 @@
 import { GeneratorSchemaBase } from '../../types';
 
-export type ComponentType = 'avatar' | 'button' | 'input';
+export type ComponentType = 'avatar' | 'button' | 'checkbox' | 'input' | 'textarea';
 
 export interface ComponentGeneratorSchema extends GeneratorSchemaBase {
   components: ComponentType[];

package/schematics/components/files/checkbox/checkbox.component.scss

@@ -0,0 +1,69 @@
+// Component Variables
+$size: var(--zen-checkbox-size, 16px);
+$border-radius: var(--zen-checkbox-border-radius, 6px);
+$focus-shadow: var(--zen-checkbox-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
+
+// Color Palette
+$appearance: var(--zen-checkbox-appearance, hsl(0% 0% 10%));
+$disabled-opacity: var(--zen-checkbox-disabled-opacity, 0.6);
+$border: var(--zen-checkbox-border, 1px solid hsl(0% 0% 80%));
+$error: var(--zen-error, hsl(0% 70% 50%));
+$outline: var(--zen-outline, 1px solid hsl(0% 0% 60%));
+
+// Animations
+$transition-duration: var(--zen-transition-duration, 0.2s);
+
+input {
+  position: absolute;
+  cursor: pointer;
+  opacity: 0;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  top: 0;
+  left: 0;
+}
+
+:host {
+  background-color: white;
+  cursor: pointer;
+  border: $border;
+  border-radius: $border-radius;
+  height: $size;
+  width: $size;
+  position: relative;
+  transition:
+    background-color ease,
+    border-color ease;
+  transition-duration: $transition-duration;
+  user-select: none;
+  justify-content: center;
+  display: grid;
+  place-items: center;
+  font-size: small;
+}
+
+:host:has(input:checked) {
+  color: white;
+  background-color: $appearance;
+  border-color: $appearance;
+}
+
+:host:has(input[type='checkbox']:disabled) {
+  &,
+  input {
+    cursor: not-allowed;
+  }
+
+  opacity: $disabled-opacity;
+}
+
+:host:has(input:focus-visible) {
+  outline: $outline;
+  box-shadow: $focus-shadow;
+}
+
+:host:has(input:user-invalid) {
+  border-color: $error;
+}

package/schematics/components/files/checkbox/checkbox.component.spec.ts

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

package/schematics/components/files/checkbox/checkbox.component.ts

@@ -0,0 +1,97 @@
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input, model } from '@angular/core';
+
+/**
+ * ZenCheckboxComponent is a reusable checkbox component designed to provide
+ * a consistent and customizable checkbox style across the application.
+ * It supports Angular forms integration and provides two-way data binding
+ * for boolean values.
+ *
+ * @example
+ * <zen-checkbox value="false" />
+ *
+ * @implements {ControlValueAccessor}
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen?tab=BSD-2-Clause-1-ov-file|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ */
+@Component({
+  selector: 'zen-checkbox',
+  standalone: true,
+  template: `
+    <input
+      [attr.aria-disabled]="disabled()"
+      [attr.id]="id()"
+      [disabled]="disabled()"
+      [ngModel]="value()"
+      (ngModelChange)="onInputChange($event)"
+      #inputElement
+      type="checkbox"
+    />
+    @if (inputElement.indeterminate) {
+      ─
+    } @else if (inputElement.checked) {
+      ✓
+    }
+    <!-- @else { ✕ } -->
+  `,
+  styleUrls: ['./checkbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [FormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ZenCheckboxComponent),
+      multi: true,
+    },
+  ],
+  host: {
+    '(blur)': 'onTouched()',
+  },
+})
+export class ZenCheckboxComponent implements ControlValueAccessor {
+  /** Holds the current checkbox value. */
+  readonly value = model(false);
+  /** Determines if the checkbox is disabled. */
+  readonly disabled = model(false);
+  /** Determines if the input is required.*/
+  readonly required = input(false, { transform: booleanAttribute });
+  /** Sets the HTML id attribute for the checkbox element. */
+  readonly id = input<string>();
+
+  /** @ignore */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange: (value: boolean) => void = () => {};
+  /** @ignore */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onTouched: () => void = () => {};
+
+  /** @ignore */
+  writeValue(value: boolean): void {
+    this.value.set(value);
+  }
+
+  /** @ignore */
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  /** @ignore */
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  /** @ignore */
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  /** Handles checkbox change event */
+  onInputChange(value: boolean): void {
+    if (this.disabled()) return;
+
+    this.value.set(value);
+    this.onChange(value);
+  }
+}

package/schematics/components/files/checkbox/checkbox.stories.ts

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { ZenCheckboxComponent } from './checkbox.component';
+
+export default {
+  title: 'Components/Checkbox',
+  component: ZenCheckboxComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    id: { control: 'text' },
+  },
+  args: {
+    value: false,
+    disabled: false,
+    required: false,
+    id: '',
+  },
+} satisfies Meta<ZenCheckboxComponent>;
+
+type Story = StoryObj<ZenCheckboxComponent>;
+
+export const Default: Story = {
+  render: args => ({
+    props: { ...args },
+    template: `
+      <zen-checkbox
+        [disabled]="${args.disabled}"
+        [value]="${args.value}"
+        ${args.id ? 'id="' + args.id + '"' : ''}
+        ${args.required ? 'required' : ''}
+      />`,
+  }),
+};
+
+export const WithLabel: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; align-items: center; gap: 0.25rem">
+        <zen-checkbox id="label-example"/>
+        <label for="label-example"> With label </label>
+      </div>
+  `,
+  }),
+};

package/schematics/components/files/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox.component';

package/schematics/components/files/input/input.component.scss

@@ -1,8 +1,13 @@
-$border: var(--zen-input-border, 1px solid #cbcbcb);
+// Component Variables
+$border: var(--zen-input-border, 1px solid hsl(0% 0% 80%));
 $border-radius: var(--zen-input-border-radius, 8px);
 $padding: var(--zen-input-padding, 0.5rem 1rem);
-$outline: var(--zen-outline, 1px solid #999);
-$border-invalid: var(--zen-error, #dc2626);
+$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
+$placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
+
+// Color Palette
+$outline: var(--zen-outline, 1px solid hsl(0% 0% 60%));
+$error: var(--zen-error, hsl(0% 70% 50%));
 
 input {
   border: $border;
@@ -15,14 +20,14 @@ input {
 
   &:focus-visible {
     outline: $outline;
-    box-shadow: 0 1px 4px #9999993f inset;
+    box-shadow: $focus-shadow;
   }
 
   &:user-invalid {
-    border-color: $border-invalid;
+    border-color: $error;
   }
 
   &::placeholder {
-    color: #999;
+    color: $placeholder-color;
   }
 }

package/schematics/components/files/input/input.component.ts

@@ -1,5 +1,5 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input, model } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
  * ZenInputComponent is a reusable text input component designed to provide
@@ -12,8 +12,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
  * @implements {ControlValueAccessor}
  *
  * @author Konrad Stępień
- * @license {@link https://github.com/Kordrad/ng-zen?tab=BSD-2-Clause-1-ov-file|BSD-2-Clause}
- * @see [GitHub](https://github.com/Kordrad/ng-zen)
+ * @license {@link https://github.com/kstepien3/ng-zen?tab=BSD-2-Clause-1-ov-file|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
  */
 @Component({
   selector: 'zen-input',
@@ -24,12 +24,14 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
       [attr.placeholder]="placeholder()"
       [attr.required]="required()"
       [disabled]="disabled()"
+      [ngModel]="value()"
       [value]="value()"
       (blur)="onTouched()"
-      (input)="onInputChange($event)"
+      (ngModelChange)="onInputChange($event)"
     />
   `,
   styleUrls: ['./input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -37,7 +39,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
       multi: true,
     },
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [FormsModule],
 })
 export class ZenInputComponent implements ControlValueAccessor {
   /** Holds the current input value. */
@@ -76,10 +78,11 @@ export class ZenInputComponent implements ControlValueAccessor {
     this.disabled.set(isDisabled);
   }
 
-  /** @ignore */
-  onInputChange(event: Event): void {
-    const newValue = (event.target as HTMLInputElement).value;
-    this.value.set(newValue);
-    this.onChange(newValue);
+  /** Handles input change event */
+  onInputChange(value: string): void {
+    if (this.disabled()) return;
+
+    this.value.set(value);
+    this.onChange(value);
   }
 }

package/schematics/components/files/input/input.stories.ts

@@ -10,12 +10,14 @@ export default {
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
     required: { control: 'boolean' },
+    id: { control: 'text' },
   },
   args: {
     value: '',
     placeholder: '',
     disabled: false,
     required: false,
+    id: '',
   },
 } satisfies Meta<ZenInputComponent>;
 
@@ -28,7 +30,8 @@ export const Default: Story = {
       <zen-input
         [disabled]="${args.disabled}"
         [value]="'${args.value}'"
-        [placeholder]="${args.placeholder}"
+        ${args.id ? 'id="' + args.id + '"' : ''}
+        ${args.placeholder ? 'placeholder="' + args.placeholder + '"' : ''}
         ${args.required ? 'required' : ''}
       />`,
   }),

package/schematics/components/files/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea.component';

package/schematics/components/files/textarea/textarea.component.scss

@@ -0,0 +1,38 @@
+// Component Variables
+$border: var(--zen-input-border, 1px solid hsl(0% 0% 80%));
+$border-radius: var(--zen-input-border-radius, 8px);
+$padding: var(--zen-input-padding, 0.5rem 1rem);
+$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
+$placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
+
+// Color Palette
+$outline: var(--zen-outline, 1px solid hsl(0% 0% 60%));
+$error: var(--zen-error, hsl(0% 70% 50%));
+
+:host {
+  border: $border;
+  border-radius: $border-radius;
+  padding: $padding;
+
+  &[autoresize] {
+    field-sizing: content;
+    resize: none;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+  }
+
+  &:focus-visible {
+    outline: $outline;
+    box-shadow: $focus-shadow;
+  }
+
+  &:user-invalid {
+    border-color: $error;
+  }
+
+  &::placeholder {
+    color: $placeholder-color;
+  }
+}

package/schematics/components/files/textarea/textarea.component.spec.ts

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

package/schematics/components/files/textarea/textarea.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * ZenTextareaComponent is a reusable textarea component designed to provide
+ * a consistent and customizable textarea style across the application.
+ * It supports Angular forms integration and provides two-way data binding.
+ *
+ * @example
+ * <textarea zen-textarea></textarea>
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen?tab=BSD-2-Clause-1-ov-file|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'textarea[zen-textarea], textarea[zen-textarea][autoresize]',
+  standalone: true,
+  template: `
+    <ng-content />
+  `,
+  styleUrls: ['./textarea.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenTextareaComponent {}

package/schematics/components/files/textarea/textarea.stories.ts

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { ZenTextareaComponent } from './textarea.component';
+
+interface StoryParams {
+  value: string;
+  placeholder: string;
+  required: boolean;
+  autoresize: boolean;
+  disabled: boolean;
+}
+
+export default {
+  title: 'Components/Textarea',
+  component: ZenTextareaComponent,
+  tags: ['autodocs'],
+  args: {
+    value: '',
+    autoresize: false,
+    placeholder: 'ZenTextareaComponent',
+    required: false,
+    disabled: false,
+  },
+  argTypes: {
+    value: { control: 'text' },
+    autoresize: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<ZenTextareaComponent & StoryParams>;
+
+type Story = StoryObj<ZenTextareaComponent & StoryParams>;
+
+export const Default: Story = {
+  render: args => ({
+    template: `
+      <textarea
+      zen-textarea
+      placeholder="${args.placeholder}"
+      ${args.required ? 'required' : ''}
+      ${args.autoresize ? 'autoresize' : ''}
+      ${args.disabled ? 'disabled' : ''}
+      >${args.value}</textarea>`,
+  }),
+};
+
+export const WithLabel: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column">
+        <label for="label-example"> With label </label>
+        <textarea zen-textarea id="label-example"></textarea>
+      </div>
+  `,
+  }),
+};
+
+export const Autoresize: Story = {
+  render: args => ({
+    props: { ...args },
+    template: `
+<textarea zen-textarea autoresize style="max-width: 300px">Start typing...</textarea>
+`,
+  }),
+};

package/schematics/components/schema.json

@@ -10,7 +10,7 @@
       "type": "array",
       "items": {
         "type": "string",
-        "enum": ["avatar", "button", "input"]
+        "enum": ["avatar", "button", "checkbox", "input", "textarea"]
       },
       "multiselect": true,
       "x-prompt": "Which component should be generated?"