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

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.3",
   "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' | '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' | 'input';
 
 export interface ComponentGeneratorSchema extends GeneratorSchemaBase {
   components: ComponentType[];

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,28 @@
+$border: var(--zen-input-border, 1px solid #cbcbcb);
+$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);
+
+input {
+  border: $border;
+  border-radius: $border-radius;
+  padding: $padding;
+
+  &:disabled {
+    opacity: 0.6;
+  }
+
+  &:focus-visible {
+    outline: $outline;
+    box-shadow: 0 1px 4px #9999993f inset;
+  }
+
+  &:user-invalid {
+    border-color: $border-invalid;
+  }
+
+  &::placeholder {
+    color: #999;
+  }
+}

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,85 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input, model } from '@angular/core';
+import { ControlValueAccessor, 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/Kordrad/ng-zen?tab=BSD-2-Clause-1-ov-file|BSD-2-Clause}
+ * @see [GitHub](https://github.com/Kordrad/ng-zen)
+ */
+@Component({
+  selector: 'zen-input',
+  standalone: true,
+  template: `
+    <input
+      [attr.id]="id()"
+      [attr.placeholder]="placeholder()"
+      [attr.required]="required()"
+      [disabled]="disabled()"
+      [value]="value()"
+      (blur)="onTouched()"
+      (input)="onInputChange($event)"
+    />
+  `,
+  styleUrls: ['./input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ZenInputComponent),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+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);
+  }
+
+  /** @ignore */
+  onInputChange(event: Event): void {
+    const newValue = (event.target as HTMLInputElement).value;
+    this.value.set(newValue);
+    this.onChange(newValue);
+  }
+}

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

@@ -0,0 +1,46 @@
+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' },
+  },
+  args: {
+    value: '',
+    placeholder: '',
+    disabled: false,
+    required: false,
+  },
+} satisfies Meta<ZenInputComponent>;
+
+type Story = StoryObj<ZenInputComponent>;
+
+export const Default: Story = {
+  render: args => ({
+    props: { ...args },
+    template: `
+      <zen-input
+        [disabled]="${args.disabled}"
+        [value]="'${args.value}'"
+        [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", "input"]
       },
       "multiselect": true,
       "x-prompt": "Which component should be generated?"