@ng-zen/cli 19.2.0 → 19.3.0-next.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [19.3.0-next.1](https://github.com/kstepien3/ng-zen/compare/v19.2.0...v19.3.0-next.1) (2025-06-10)
+
+### 🚀 New Features
+
+* **skeleton:** add component ([#205](https://github.com/kstepien3/ng-zen/issues/205)) ([fa21c9a](https://github.com/kstepien3/ng-zen/commit/fa21c9a440ce918d521c12cd9e9eec17cade60cd))
+
 ## [19.2.0](https://github.com/kstepien3/ng-zen/compare/v19.1.0...v19.2.0) (2025-05-25)
 
 ### 🚀 New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "19.2.0",
+  "version": "19.3.0-next.1",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "license": "BSD-2-Clause",
   "private": false,

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

@@ -1 +1 @@
-{"version":3,"file":"components-generator.js","sourceRoot":"","sources":["../../../../../src/schematics/components/components-generator.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type ComponentType = 'avatar' | 'button' | 'checkbox' | 'divider' | 'input' | 'switch' | 'textarea';\n\nexport interface ComponentGeneratorSchema extends GeneratorSchemaBase {\n  components: ComponentType[];\n}\n"]}
+{"version":3,"file":"components-generator.js","sourceRoot":"","sources":["../../../../../src/schematics/components/components-generator.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type ComponentType = 'avatar' | 'button' | 'checkbox' | 'divider' | 'input' | 'skeleton' | 'switch' | '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' | 'divider' | 'input' | 'switch' | 'textarea';
+export type ComponentType = 'avatar' | 'button' | 'checkbox' | 'divider' | 'input' | 'skeleton' | 'switch' | 'textarea';
 
 export interface ComponentGeneratorSchema extends GeneratorSchemaBase {
   components: ComponentType[];

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

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

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

@@ -0,0 +1,72 @@
+$background: var(--zen-skeleton-background, hsl(0deg 0% 80%));
+$radius: var(--zen-skeleton-border-radius, 0.5rem);
+$animation-duration: var(--zen-skeleton-animation-duration, 1.6s);
+
+:host {
+  background: $background;
+  display: inline-block;
+  min-height: 1rem;
+  min-width: 1rem;
+  border-radius: $radius;
+  position: relative;
+  overflow: hidden;
+
+  // GPU acceleration hint
+  will-change: auto;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      hsl(0deg 0% 100% / 60%) 40%,
+      hsl(0deg 0% 100% / 60%) 60%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: shimmer $animation-duration ease-in-out infinite;
+  }
+
+  &[rounded] {
+    border-radius: 9999px;
+  }
+}
+
+// Accessibility: Motion sensitivity support
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    &::before {
+      animation: none;
+      content: unset;
+    }
+
+    // Subtle pulse animation as fallback
+    animation: pulse $animation-duration ease-in-out infinite alternate;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.6;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// GPU-optimized keyframes
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}

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

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

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

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * ZenInputComponent loader component that displays loading states.
+ *
+ * @example
+ * ```HTML
+ * <zen-skeleton rounded/>
+ * ```
+ * ### Properties:
+ * - `rounded` - Whether to display rounded corners
+ *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```CSS
+ * :root {
+ *  --zen-skeleton-background: red;
+ *  --zen-skeleton-border-radius: 1rem;
+ *  --zen-skeleton-animation-duration: 1s;
+ * }
+ * ```
+ */
+
+@Component({
+  selector: 'zen-skeleton, zen-skeleton[rounded]',
+  template: ``,
+  styleUrl: './skeleton.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenSkeletonComponent {}

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

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+import { ZenSkeletonComponent } from './skeleton.component';
+
+interface StoryParams {
+  rounded: boolean;
+  height: number;
+  width: number;
+}
+
+type StoryType = ZenSkeletonComponent & StoryParams;
+
+export default {
+  title: 'Components/Skeleton',
+  component: ZenSkeletonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    rounded: { control: { type: 'boolean' } },
+    height: { control: { type: 'range', min: 1, max: 20, step: 0.25 }, description: 'Height managed by css' },
+    width: { control: { type: 'range', min: 1, max: 20, step: 0.25 }, description: 'Width managed by css' },
+  },
+  args: {
+    rounded: false,
+    height: 3,
+    width: 3,
+  },
+} satisfies Meta<StoryType>;
+
+type Story = StoryObj<StoryType>;
+
+export const Default: Story = {
+  render: args => ({
+    props: { ...args },
+    template: `
+      <zen-skeleton ${args.rounded ? 'rounded' : ''} style="width: ${args.width}rem; height: ${args.height}rem"/>`,
+  }),
+};

package/schematics/components/schema.json

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