@ng-zen/cli 19.0.0-alpha.1 → 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.1",
+  "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 interface ComponentGeneratorSchema extends GeneratorSchemaBase {\n  components: 'button'[];\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,5 +1,7 @@
 import { GeneratorSchemaBase } from '../../types';
 
+export type ComponentType = 'avatar' | 'button' | 'input';
+
 export interface ComponentGeneratorSchema extends GeneratorSchemaBase {
-  components: 'button'[];
+  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": ["button"]
+        "enum": ["avatar", "button", "input"]
       },
       "multiselect": true,
       "x-prompt": "Which component should be generated?"

package/types/schematics-folder.type.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schematics-folder.type.js.map

package/types/schematics-folder.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematics-folder.type.js","sourceRoot":"","sources":["../../../../projects/cli/src/types/schematics-folder.type.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from '../schematics/components/components-generator';\n\nexport type SchematicsFolder = ComponentType;\n"]}

package/types/schematics-folder.type.ts

@@ -0,0 +1,3 @@
+import { ComponentType } from '../schematics/components/components-generator';
+
+export type SchematicsFolder = ComponentType;

package/utils/apply-file-template.util.js

@@ -15,7 +15,7 @@ const getTemplates = (rules) => (0, schematics_1.apply)((0, schematics_1.url)(`.
 const includeStories = (include) => (0, schematics_1.filter)(filePath => include || !filePath.endsWith('.stories.ts'));
 function applyFileTemplateUtil(folders, config) {
     return folders.map(folder => {
-        const RULES = createTemplateRules(folders, config.path);
+        const RULES = createTemplateRules(folder, config.path);
         const folderSource = (0, schematics_1.apply)((0, schematics_1.url)(`./files/${folder}`), [includeStories(config.stories), ...RULES]);
         return (0, schematics_1.chain)([folderSource, getTemplates(RULES)].map(schematics_1.mergeWith));
     });

package/utils/apply-file-template.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"apply-file-template.util.js","sourceRoot":"","sources":["../../../../projects/cli/src/utils/apply-file-template.util.ts"],"names":[],"mappings":";;AAmBA,sDAQC;AA3BD,+CAA0D;AAC1D,2DAA8G;AAM9G,MAAM,mBAAmB,GAAG,CAAC,MAAe,EAAE,IAAY,EAAU,EAAE,CAAC;IACrE,IAAA,2BAAc,EAAC;QACb,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE;QACvC,GAAG,cAAO;KACX,CAAC;IACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,GAAG,IAAI,IAAI,MAAM,EAAE,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC;AACzE,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,IAAA,mBAAM,EAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9G,SAAgB,qBAAqB,CAAC,OAAgB,EAAE,MAA2B;IACjF,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC1B,MAAM,KAAK,GAAG,mBAAmB,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAExD,MAAM,YAAY,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,WAAW,MAAM,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;QAEjG,OAAO,IAAA,kBAAK,EAAC,CAAC,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,sBAAS,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { normalize, strings } from '@angular-devkit/core';\nimport { apply, applyTemplates, chain, filter, mergeWith, move, Rule, url } from '@angular-devkit/schematics';\nimport { ComponentGeneratorSchema } from '../schematics/components/components-generator';\nimport { GeneratorSchemaBase } from '../types';\n\ntype Folders = ComponentGeneratorSchema['components'];\n\nconst createTemplateRules = (folder: Folders, path: string): Rule[] => [\n  applyTemplates({\n    name: folder,\n    localeDate: new Date().toLocaleString(),\n    ...strings,\n  }),\n  move(normalize(`${path}/${folder}`)),\n];\n\nconst getTemplates = (rules: Rule[]) => apply(url(`./templates`), rules);\nconst includeStories = (include: boolean) => filter(filePath => include || !filePath.endsWith('.stories.ts'));\n\nexport function applyFileTemplateUtil(folders: Folders, config: GeneratorSchemaBase): Rule[] {\n  return folders.map(folder => {\n    const RULES = createTemplateRules(folders, config.path);\n\n    const folderSource = apply(url(`./files/${folder}`), [includeStories(config.stories), ...RULES]);\n\n    return chain([folderSource, getTemplates(RULES)].map(mergeWith));\n  });\n}\n"]}
+{"version":3,"file":"apply-file-template.util.js","sourceRoot":"","sources":["../../../../projects/cli/src/utils/apply-file-template.util.ts"],"names":[],"mappings":";;AAiBA,sDAQC;AAzBD,+CAA0D;AAC1D,2DAA8G;AAI9G,MAAM,mBAAmB,GAAG,CAAC,MAAc,EAAE,IAAY,EAAU,EAAE,CAAC;IACpE,IAAA,2BAAc,EAAC;QACb,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE;QACvC,GAAG,cAAO;KACX,CAAC;IACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,GAAG,IAAI,IAAI,MAAM,EAAE,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC;AACzE,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,IAAA,mBAAM,EAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9G,SAAgB,qBAAqB,CAAC,OAA2B,EAAE,MAA2B;IAC5F,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC1B,MAAM,KAAK,GAAG,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAEvD,MAAM,YAAY,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,WAAW,MAAM,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;QAEjG,OAAO,IAAA,kBAAK,EAAC,CAAC,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,sBAAS,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { normalize, strings } from '@angular-devkit/core';\nimport { apply, applyTemplates, chain, filter, mergeWith, move, Rule, url } from '@angular-devkit/schematics';\nimport { GeneratorSchemaBase } from '../types';\nimport { SchematicsFolder } from '../types/schematics-folder.type';\n\nconst createTemplateRules = (folder: string, path: string): Rule[] => [\n  applyTemplates({\n    name: folder,\n    localeDate: new Date().toLocaleString(),\n    ...strings,\n  }),\n  move(normalize(`${path}/${folder}`)),\n];\n\nconst getTemplates = (rules: Rule[]) => apply(url(`./templates`), rules);\nconst includeStories = (include: boolean) => filter(filePath => include || !filePath.endsWith('.stories.ts'));\n\nexport function applyFileTemplateUtil(folders: SchematicsFolder[], config: GeneratorSchemaBase): Rule[] {\n  return folders.map(folder => {\n    const RULES = createTemplateRules(folder, config.path);\n\n    const folderSource = apply(url(`./files/${folder}`), [includeStories(config.stories), ...RULES]);\n\n    return chain([folderSource, getTemplates(RULES)].map(mergeWith));\n  });\n}\n"]}

package/utils/apply-file-template.util.ts

@@ -1,11 +1,9 @@
 import { normalize, strings } from '@angular-devkit/core';
 import { apply, applyTemplates, chain, filter, mergeWith, move, Rule, url } from '@angular-devkit/schematics';
-import { ComponentGeneratorSchema } from '../schematics/components/components-generator';
 import { GeneratorSchemaBase } from '../types';
+import { SchematicsFolder } from '../types/schematics-folder.type';
 
-type Folders = ComponentGeneratorSchema['components'];
-
-const createTemplateRules = (folder: Folders, path: string): Rule[] => [
+const createTemplateRules = (folder: string, path: string): Rule[] => [
   applyTemplates({
     name: folder,
     localeDate: new Date().toLocaleString(),
@@ -17,9 +15,9 @@ const createTemplateRules = (folder: Folders, path: string): Rule[] => [
 const getTemplates = (rules: Rule[]) => apply(url(`./templates`), rules);
 const includeStories = (include: boolean) => filter(filePath => include || !filePath.endsWith('.stories.ts'));
 
-export function applyFileTemplateUtil(folders: Folders, config: GeneratorSchemaBase): Rule[] {
+export function applyFileTemplateUtil(folders: SchematicsFolder[], config: GeneratorSchemaBase): Rule[] {
   return folders.map(folder => {
-    const RULES = createTemplateRules(folders, config.path);
+    const RULES = createTemplateRules(folder, config.path);
 
     const folderSource = apply(url(`./files/${folder}`), [includeStories(config.stories), ...RULES]);