@ng-zen/cli 19.0.0-alpha.2 → 19.0.0-alpha.4

package/README.md

@@ -24,12 +24,6 @@ You can generate code using the ng-zen CLI.
 ng generate @ng-zen/cli:component
 ```
 
-#### Directives
-
-```bash
-ng generate @ng-zen/cli:directive
-```
-
 ## License
 
 This project is licensed under the BSD 2-Clause License. For more details, refer to the LICENSE file in the repository.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "19.0.0-alpha.2",
+  "version": "19.0.0-alpha.4",
   "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';\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';\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';
+export type ComponentType = 'avatar' | 'button' | 'checkbox' | 'input';
 
 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/index.ts

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

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

@@ -0,0 +1,33 @@
+// 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%));
+
+input {
+  border: $border;
+  border-radius: $border-radius;
+  padding: $padding;
+
+  &: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/input/input.component.spec.ts

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

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

@@ -0,0 +1,88 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input, model } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * ZenInputComponent is a reusable text input component designed to provide
+ * a consistent and customizable input style across the application.
+ * It supports Angular forms integration and provides two-way data binding.
+ *
+ * @example
+ * <zen-input value="string" />
+ *
+ * @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-input',
+  standalone: true,
+  template: `
+    <input
+      [attr.id]="id()"
+      [attr.placeholder]="placeholder()"
+      [attr.required]="required()"
+      [disabled]="disabled()"
+      [ngModel]="value()"
+      [value]="value()"
+      (blur)="onTouched()"
+      (ngModelChange)="onInputChange($event)"
+    />
+  `,
+  styleUrls: ['./input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ZenInputComponent),
+      multi: true,
+    },
+  ],
+  imports: [FormsModule],
+})
+export class ZenInputComponent implements ControlValueAccessor {
+  /** Holds the current input value. */
+  readonly value = model('');
+  /** Determines if the input 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 input element.*/
+  readonly id = input<string>();
+  /** Provides a hint or example text that will be displayed */
+  readonly placeholder = input<string>();
+
+  /** @ignore */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange: (value: string) => void = () => {};
+  /** @ignore */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onTouched: () => void = () => {};
+
+  /** @ignore */
+  writeValue(value: string): void {
+    this.value.set(value);
+  }
+  /** @ignore */
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+  /** @ignore */
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  /** @ignore */
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  /** 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

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { ZenInputComponent } from './input.component';
+
+export default {
+  title: 'Components/Input',
+  component: ZenInputComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'text' },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    id: { control: 'text' },
+  },
+  args: {
+    value: '',
+    placeholder: '',
+    disabled: false,
+    required: false,
+    id: '',
+  },
+} satisfies Meta<ZenInputComponent>;
+
+type Story = StoryObj<ZenInputComponent>;
+
+export const Default: Story = {
+  render: args => ({
+    props: { ...args },
+    template: `
+      <zen-input
+        [disabled]="${args.disabled}"
+        [value]="'${args.value}'"
+        ${args.id ? 'id="' + args.id + '"' : ''}
+        ${args.placeholder ? 'placeholder="' + args.placeholder + '"' : ''}
+        ${args.required ? 'required' : ''}
+      />`,
+  }),
+};
+
+export const WithLabel: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column">
+        <label for="label-example"> With label </label>
+        <zen-input id="label-example"/>
+      </div>
+  `,
+  }),
+};

package/schematics/components/schema.json

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