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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "19.0.0-alpha.4",
+  "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' | 'checkbox' | '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' | 'checkbox' | 'input';
+export type ComponentType = 'avatar' | 'button' | 'checkbox' | 'input' | 'textarea';
 
 export interface ComponentGeneratorSchema extends GeneratorSchemaBase {
   components: ComponentType[];

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", "checkbox", "input"]
+        "enum": ["avatar", "button", "checkbox", "input", "textarea"]
       },
       "multiselect": true,
       "x-prompt": "Which component should be generated?"