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

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [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
+
+* **button:** add css variables for styling ([#191](https://github.com/kstepien3/ng-zen/issues/191)) ([7278585](https://github.com/kstepien3/ng-zen/commit/7278585c642a01468c2ef85dc39f3e767287ccf7))
+* **button:** update selector to support is() pseudo-class ([#195](https://github.com/kstepien3/ng-zen/issues/195)) ([e85135e](https://github.com/kstepien3/ng-zen/commit/e85135ef45c7a38b5597624254c7b0adae6e4db4))
+* **divider:** add zen-divider component ([#186](https://github.com/kstepien3/ng-zen/issues/186)) ([c021773](https://github.com/kstepien3/ng-zen/commit/c0217732a99efd1a68d23ed5e44d8da9e5344fdb))
+
+### 🐛 Bug Fixes
+
+* **schematics/ng-add:** run other schematics after installation ([#177](https://github.com/kstepien3/ng-zen/issues/177)) ([5cb1be4](https://github.com/kstepien3/ng-zen/commit/5cb1be4ce4cbeb7e5341baf937db135c16caad18))
+
+### 📚 Documentation
+
+* **readme:** remove the "next" build npm badges ([#194](https://github.com/kstepien3/ng-zen/issues/194)) ([48740d3](https://github.com/kstepien3/ng-zen/commit/48740d3c9ff3f3619e6f56baba8b933ba31498b3))
+* **releaserc:** update release note generator config ([#196](https://github.com/kstepien3/ng-zen/issues/196)) ([ca37df3](https://github.com/kstepien3/ng-zen/commit/ca37df375bf566476ec16c4cf10121f0d59c5c70))
+
 # [19.2.0-next.3](https://github.com/kstepien3/ng-zen/compare/v19.2.0-next.2...v19.2.0-next.3) (2025-05-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "19.2.0-next.3",
+  "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?"