@ng-zen/cli 0.0.1-alpha.1 → 19.0.0-alpha.2

package/LICENSE

@@ -1,24 +1,24 @@
-BSD 2-Clause License
-
-Copyright (c) 2024, Konrad Stępień
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+BSD 2-Clause License
+
+Copyright (c) 2024, Konrad Stępień
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,39 +1,46 @@
-# @ng-zen/cli
-
-## Overview
-
-The ng-zen CLI is a command-line tool designed to facilitate the generation of UI-kit elements for Angular applications using Angular schematics. It provides out-of-the-box components that can be quickly integrated into Angular projects.
-
-## Installation
-
-To install ng-zen CLI, use the following command:
-
-```bash
-ng add @ng-zen/cli
-```
-
-This command will add the necessary dependencies and configurations to your Angular project.
-
-## Generating Components
-
-You can generate components using the ng-zen CLI. Components are generated using the following command format:
-
-```bash
-ng generate @ng-zen/cli:component
-```
-
-## License
-
-This project is licensed under the BSD 2-Clause License. For more details, refer to the LICENSE file in the repository.
-
-
-## Author
-
-**@ng-zen/cli** is maintained by Konrad Stępień.
-
-- Email: kord.stp@gmail.com
-- LinkedIn: [Konrad Stępień](https://www.linkedin.com/in/konradstepien/)
-
-## Documentation
-
-The ng-zen CLI is documented using Storybook for component examples and JSDoc, as well as Compodoc for Angular project documentation.
+# @ng-zen/cli
+
+## Overview
+
+The ng-zen CLI is a command-line tool designed to facilitate the generation of UI-kit elements for Angular applications using Angular schematics. It provides out-of-the-box components that can be quickly integrated into Angular projects.
+
+## Installation
+
+To install ng-zen CLI, use the following command:
+
+```bash
+ng add @ng-zen/cli
+```
+
+This command will add the necessary dependencies and configurations to your Angular project.
+
+## Generating
+
+You can generate code using the ng-zen CLI.
+
+#### Components
+
+```bash
+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.
+
+## Author
+
+**@ng-zen/cli** is maintained by Konrad Stępień.
+
+- Email: kord.stp@gmail.com
+- LinkedIn: [Konrad Stępień](https://www.linkedin.com/in/konradstepien/)
+
+## Documentation
+
+The ng-zen CLI is documented using Storybook for component examples and JSDoc, as well as Compodoc for Angular project documentation.

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@ng-zen/cli",
-  "version": "0.0.1-alpha.1",
+  "version": "19.0.0-alpha.2",
+  "description": "A blank schematics",
   "license": "BSD-2-Clause",
   "private": false,
+  "builders": "./builders/builders.json",
   "repository": {
     "url": "https://github.com/Kordrad/ng-zen",
     "directory": "projects/cli"
@@ -15,24 +17,21 @@
     "email": "kord.stp@gmail.com",
     "url": "https://www.linkedin.com/in/KonradStepien/"
   },
-  "schematics": "./schematics/collection.json",
+  "keywords": [
+    "schematics"
+  ],
   "ng-add": {
     "save": "devDependencies"
   },
+  "schematics": "./schematics/collection.json",
   "peerDependencies": {
-    "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0"
+    "@angular/common": "^19.1.6",
+    "@angular/core": "^19.1.6"
   },
   "dependencies": {
-    "@angular-devkit/core": "^17.3.0",
-    "@angular-devkit/schematics": "^17.3.0",
+    "@angular-devkit/core": "^19.1.6",
+    "@angular-devkit/schematics": "^19.1.6",
     "tslib": "^2.3.0"
   },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.5",
-    "@storybook/addon-essentials": "^8.1.0",
-    "@storybook/addon-interactions": "^8.1.0",
-    "@storybook/addon-links": "^8.1.0"
-  },
   "sideEffects": false
-}
+}

package/schematics/collection.json

@@ -1,16 +1,16 @@
-{
-  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
-  "schematics": {
-    "ng-add": {
-      "description": "Add library to the project.",
-      "factory": "./ng-add/index#ngAdd",
-      "schema": "./ng-add/schema.json"
-    },
-    "component": {
-      "description": "This schematic generates ui components",
-      "factory": "./components/index#componentGenerator",
-      "schema": "./components/schema.json",
-      "aliases": ["c"]
-    }
-  }
-}
+{
+  "$schema": "../../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add library to the project.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    },
+    "component": {
+      "description": "This schematic generates ui components",
+      "factory": "./components/index#componentGenerator",
+      "schema": "./components/schema.json",
+      "aliases": ["c"]
+    }
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"components-generator.js","sourceRoot":"","sources":["../../../../../projects/cli/schematics/components/components-generator.ts"],"names":[],"mappings":"","sourcesContent":["export interface ComponentGeneratorSchema {\r\n  components: ('avatar' | 'badge' | 'button' | 'pin' | 'switch' | 'tag')[];\r\n  path: string;\r\n}\r\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';\n\nexport interface ComponentGeneratorSchema extends GeneratorSchemaBase {\n  components: ComponentType[];\n}\n"]}

package/schematics/components/components-generator.ts

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

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

@@ -1,23 +1,23 @@
-zen-avatar {
-  height: 32px;
-  width: 32px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  overflow: hidden;
-  touch-action: none;
-  pointer-events: none;
-  user-select: none;
-
-  // Text
-  &:not(:has(img)) {
-    background-color: #6b7280;
-  }
-
-  & > * {
-    height: 100%;
-    width: 100%;
-  }
-}
+$size: var(--zen-avatar-size, 32px);
+$bg-color: var(--zen-avatar-bg-color, #d3d3d3);
+$color: var(--zen-avatar-color, #0f172a);
+$font-size: var(--zen-avatar-font-size, small);
+
+:host {
+  display: flex;
+  height: $size;
+  width: $size;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+
+  // Content styles
+  background-color: $bg-color;
+  color: $color;
+  font-size: $font-size;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  text-align: center;
+  user-select: none;
+}

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

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

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

@@ -1,60 +1,66 @@
-import { NgOptimizedImage } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-
-/**
- * A component to display an avatar image. If a valid image source URL is provided,
- * it will render an image element. Otherwise, it will display projected content.
- *
- * The component uses Angular's optimized image directives for enhanced performance.
- *
- * Usage:
- *
- * ```html
- * <!-- If an image source is provided, it will display the image -->
- * <zen-avatar [src]="'/path/to/image.jpg'" />
- *
- * <!-- If no image source is provided, it will display the projected content -->
- * <zen-avatar> A </zen-avatar>
- * ```
- *
- * @example
- * <zen-avatar src="https://picsum.photos/32" />
- *
- * @component
- * @selector `zen-avatar`
- *
- * @license BSD-2-Clause
- * @author Konrad Stępień <kord.stp@gmail.com>
- * @link https://github.com/Kordrad/ng-zen
- */
-@Component({
-  selector: 'zen-avatar',
-  standalone: true,
-  imports: [NgOptimizedImage],
-  template: `
-    @if (src()) {
-      <img [ngSrc]="src()" alt="" fill />
-    } @else {
-      <ng-content />
-    }
-  `,
-  styleUrl: './avatar.component.scss',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ZenAvatarComponent {
-  /**
-   * Path to the image source. If the `src` is provided, an image element will be rendered.
-   * Otherwise, the content projected into this component will be displayed.
-   *
-   * @default ''
-   * @input
-   * @type string
-   */
-  readonly src = input<string>('');
-}
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+/**
+ * A component to display an avatar image.
+ * If a valid image source URL is provided, it will render an image element.
+ * Otherwise, it will display projected content.
+ *
+ * This component utilizes Angular's optimized image directives for enhanced performance.
+ *
+ * ### Usage
+ *
+ * To use the component, you can provide an image source or project content:
+ *
+ * ```html
+ * <!-- If an image source is provided, it will display the image -->
+ * <zen-avatar [src]="'/path/to/image.jpg'" />
+ *
+ * <!-- If no image source is provided, it will display the projected content -->
+ * <zen-avatar> A </zen-avatar>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the avatar using CSS custom properties:
+ *
+ * ```css
+ * zen-avatar {
+ *  --zen-avatar-size: 16px;
+ *  --zen-avatar-bg-color: black;
+ *  --zen-avatar-color: white;
+ *  --zen-avatar-font-size: small;
+ * }
+ * ```
+ *
+ * @example
+ * <zen-avatar src="https://picsum.photos/32" />
+ *
+ * @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-avatar',
+  imports: [NgOptimizedImage],
+  template: `
+    @if (src()) {
+      <img [alt]="alt()" [ngSrc]="src()" fill onerror="console.log('test')" />
+    } @else {
+      <ng-content />
+    }
+  `,
+  styleUrl: './avatar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenAvatarComponent {
+  /**
+   * Name of the source image. Image name will be processed by the image loader,
+   * and the final URL will be applied as the src property of the image.
+   */
+  readonly src = input<string>('');
+  /**
+   * Sets or retrieves a text alternative to the graphic.
+   */
+  readonly alt = input<string>('');
+}

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { ZenAvatarComponent } from './avatar.component';
+
+export default {
+  title: 'Components/Avatar',
+  component: ZenAvatarComponent,
+  tags: ['autodocs'],
+  render: args => ({ props: { ...args } }),
+} satisfies Meta<ZenAvatarComponent>;
+
+type Story = StoryObj<ZenAvatarComponent>;
+
+export const Image: Story = {
+  args: {
+    src: 'https://picsum.photos/32',
+  },
+};
+
+export const Default: Story = {
+  render: () => ({
+    template: `
+        <zen-avatar src="https://github.com/Kordrad.png" alt="Author" style="--zen-avatar-size: 64px"/>
+    `,
+  }),
+};
+
+export const Text: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; gap: 1rem;">
+        <zen-avatar>MI</zen-avatar>
+        <zen-avatar>IB</zen-avatar>
+        <zen-avatar>WP</zen-avatar>
+        <zen-avatar>AI</zen-avatar>
+      </div> `,
+  }),
+};

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

@@ -1 +1 @@
-export * from './avatar.component';
+export * from './avatar.component';

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

@@ -1,42 +1,42 @@
-$bg-color-hover: #333;
-$bg-color: #000;
-$color: #fff;
-$padding: 8px 24px;
-$shadow-hover: 0 0 0 3px rgb(0 123 255 / 50%);
-$shadow: 0 2px 4px rgb(0 0 0 / 10%);
-$transition-duration: 0.4s;
-
-:host {
-  display: inline-block;
-  font-size: 14px;
-  font-weight: bold;
-  text-align: center;
-  cursor: pointer;
-  border: none;
-  padding: $padding;
-  border-radius: 99999px;
-  transition: all $transition-duration ease;
-  background-color: $bg-color;
-  color: $color;
-  box-shadow: $shadow;
-  text-decoration: none;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-}
-
-/* Hover state */
-:host:hover {
-  background-color: $bg-color-hover;
-}
-
-/* Focus state */
-:host:focus {
-  box-shadow: $shadow-hover;
-}
-
-/* Disabled state */
-:host[disabled] {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
+$bg-color-hover: #333;
+$bg-color: #000;
+$color: #fff;
+$padding: 8px 24px;
+$shadow-hover: 0 0 0 3px rgb(0 123 255 / 50%);
+$shadow: 0 2px 4px rgb(0 0 0 / 10%);
+$transition-duration: 0.4s;
+
+:host {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  cursor: pointer;
+  border: none;
+  padding: $padding;
+  border-radius: 99999px;
+  transition: all $transition-duration ease;
+  background-color: $bg-color;
+  color: $color;
+  box-shadow: $shadow;
+  text-decoration: none;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Hover state */
+:host:hover {
+  background-color: $bg-color-hover;
+}
+
+/* Focus state */
+:host:focus {
+  box-shadow: $shadow-hover;
+}
+
+/* Disabled state */
+:host[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

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

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