@sonny-ui/core 0.1.0-alpha.2 → 0.1.0-alpha.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.20",
   "description": "Angular UI component library inspired by shadcn/ui — signals, zoneless, Tailwind CSS v4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -33,13 +33,14 @@
     "type": "git",
     "url": "https://github.com/coci-dev/sonny-ui.git"
   },
-  "homepage": "https://github.com/coci-dev/sonny-ui#readme",
+  "homepage": "https://coci-dev.github.io/sonny-ui/",
   "bugs": {
     "url": "https://github.com/coci-dev/sonny-ui/issues"
   },
-  "module": "fesm2022/sonny-ui-core.mjs",
-  "typings": "types/sonny-ui-core.d.ts",
   "exports": {
+    "./styles/*": {
+      "default": "./src/styles/*"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -47,5 +48,7 @@
       "types": "./types/sonny-ui-core.d.ts",
       "default": "./fesm2022/sonny-ui-core.mjs"
     }
-  }
+  },
+  "module": "fesm2022/sonny-ui-core.mjs",
+  "typings": "types/sonny-ui-core.d.ts"
 }

package/schematics/ng-add/index.js

@@ -21,6 +21,33 @@ function ngAdd(options) {
                 context.logger.info('Added SonnyUI theme import to styles.css');
             }
         }
+        // Add provideSonnyUI to app.config.ts
+        const configPath = 'src/app/app.config.ts';
+        if (tree.exists(configPath)) {
+            let configContent = tree.read(configPath).toString('utf-8');
+            const theme = options.theme || 'light';
+            if (!configContent.includes('provideSonnyUI')) {
+                // Add import statement
+                const importLine = `import { provideSonnyUI } from '@sonny-ui/core';\n`;
+                const lastImportIndex = configContent.lastIndexOf('import ');
+                const lastImportEnd = configContent.indexOf('\n', lastImportIndex);
+                configContent =
+                    configContent.slice(0, lastImportEnd + 1) +
+                        importLine +
+                        configContent.slice(lastImportEnd + 1);
+                // Add provider to providers array
+                const providersMatch = configContent.match(/providers\s*:\s*\[/);
+                if (providersMatch && providersMatch.index !== undefined) {
+                    const insertPos = providersMatch.index + providersMatch[0].length;
+                    configContent =
+                        configContent.slice(0, insertPos) +
+                            `\n    provideSonnyUI({ defaultTheme: '${theme}' }),` +
+                            configContent.slice(insertPos);
+                }
+                tree.overwrite(configPath, configContent);
+                context.logger.info('Added provideSonnyUI to app.config.ts');
+            }
+        }
         return tree;
     };
 }

package/schematics/ng-add/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "SonnyUIAddSchema",
+  "$id": "SonnyUIAddSchema",
   "title": "SonnyUI ng-add schematic",
   "type": "object",
   "properties": {

package/schematics/ng-generate/component/index.js

@@ -37,33 +37,66 @@ exports.generateComponent = generateComponent;
 const path = __importStar(require("path"));
 const AVAILABLE_COMPONENTS = [
     'accordion',
+    'alert',
     'avatar',
     'badge',
     'breadcrumb',
     'button',
     'button-group',
+    'calendar',
     'card',
+    'carousel',
+    'chat-bubble',
     'checkbox',
     'combobox',
+    'diff',
+    'divider',
+    'dock',
+    'drawer',
+    'dropdown',
+    'fab',
+    'fieldset',
+    'file-input',
+    'indicator',
     'input',
+    'kbd',
+    'link',
+    'list',
     'loader',
     'modal',
+    'navbar',
+    'pagination',
+    'progress',
+    'radial-progress',
     'radio',
+    'rating',
     'select',
     'sheet',
     'skeleton',
     'slider',
+    'stat',
+    'status',
+    'steps',
     'switch',
     'table',
     'tabs',
+    'textarea',
+    'timeline',
     'toast',
     'toggle',
+    'tooltip',
+    'validator',
 ];
 const COMPONENT_FILES = {
     accordion: [
         'accordion.directives.ts',
         'index.ts',
     ],
+    alert: [
+        'alert.directives.ts',
+        'alert.variants.ts',
+        'index.ts',
+    ],
     avatar: [
         'avatar.component.ts',
         'avatar.variants.ts',
@@ -88,11 +121,23 @@ const COMPONENT_FILES = {
         'button-group.variants.ts',
         'index.ts',
     ],
+    calendar: [
+        'calendar.component.ts',
+        'index.ts',
+    ],
     card: [
         'card.directives.ts',
         'card.variants.ts',
         'index.ts',
     ],
+    carousel: [
+        'carousel.directives.ts',
+        'index.ts',
+    ],
+    'chat-bubble': [
+        'chat-bubble.directives.ts',
+        'index.ts',
+    ],
     checkbox: [
         'checkbox.directive.ts',
         'checkbox.variants.ts',
@@ -103,12 +148,66 @@ const COMPONENT_FILES = {
         'combobox.variants.ts',
         'index.ts',
     ],
+    diff: [
+        'diff.component.ts',
+        'index.ts',
+    ],
+    divider: [
+        'divider.component.ts',
+        'divider.variants.ts',
+        'index.ts',
+    ],
+    dock: [
+        'dock.directives.ts',
+        'index.ts',
+    ],
+    drawer: [
+        'drawer.directives.ts',
+        'index.ts',
+    ],
+    dropdown: [
+        'dropdown.directives.ts',
+        'dropdown.variants.ts',
+        'index.ts',
+    ],
+    fab: [
+        'fab.directives.ts',
+        'index.ts',
+    ],
+    fieldset: [
+        'fieldset.directives.ts',
+        'fieldset.variants.ts',
+        'index.ts',
+    ],
+    'file-input': [
+        'file-input.component.ts',
+        'file-input.variants.ts',
+        'index.ts',
+    ],
+    indicator: [
+        'indicator.directives.ts',
+        'index.ts',
+    ],
     input: [
         'input.directive.ts',
         'input.variants.ts',
         'label.directive.ts',
         'index.ts',
     ],
+    kbd: [
+        'kbd.directive.ts',
+        'kbd.variants.ts',
+        'index.ts',
+    ],
+    link: [
+        'link.directive.ts',
+        'link.variants.ts',
+        'index.ts',
+    ],
+    list: [
+        'list.directives.ts',
+        'index.ts',
+    ],
     loader: [
         'loader.component.ts',
         'loader.variants.ts',
@@ -121,11 +220,34 @@ const COMPONENT_FILES = {
         'dialog.directives.ts',
         'index.ts',
     ],
+    navbar: [
+        'navbar.directives.ts',
+        'index.ts',
+    ],
+    pagination: [
+        'pagination.component.ts',
+        'pagination.variants.ts',
+        'index.ts',
+    ],
+    progress: [
+        'progress.component.ts',
+        'progress.variants.ts',
+        'index.ts',
+    ],
+    'radial-progress': [
+        'radial-progress.component.ts',
+        'index.ts',
+    ],
     radio: [
         'radio.directive.ts',
         'radio.variants.ts',
         'index.ts',
     ],
+    rating: [
+        'rating.component.ts',
+        'rating.variants.ts',
+        'index.ts',
+    ],
     select: [
         'select.component.ts',
         'select.variants.ts',
@@ -148,6 +270,19 @@ const COMPONENT_FILES = {
         'slider.variants.ts',
         'index.ts',
     ],
+    stat: [
+        'stat.directives.ts',
+        'index.ts',
+    ],
+    status: [
+        'status.directive.ts',
+        'status.variants.ts',
+        'index.ts',
+    ],
+    steps: [
+        'steps.directives.ts',
+        'index.ts',
+    ],
     switch: [
         'switch.component.ts',
         'switch.variants.ts',
@@ -163,6 +298,15 @@ const COMPONENT_FILES = {
         'tabs.variants.ts',
         'index.ts',
     ],
+    textarea: [
+        'textarea.directive.ts',
+        'textarea.variants.ts',
+        'index.ts',
+    ],
+    timeline: [
+        'timeline.directives.ts',
+        'index.ts',
+    ],
     toast: [
         'toast.service.ts',
         'toast.variants.ts',
@@ -174,30 +318,67 @@ const COMPONENT_FILES = {
         'toggle.variants.ts',
         'index.ts',
     ],
+    tooltip: [
+        'tooltip.directive.ts',
+        'tooltip.variants.ts',
+        'index.ts',
+    ],
+    validator: [
+        'validator.directives.ts',
+        'index.ts',
+    ],
 };
 const COMPONENT_SPEC_FILES = {
     accordion: ['accordion.directives.spec.ts'],
+    alert: ['alert.directives.spec.ts'],
     avatar: ['avatar.component.spec.ts'],
     badge: ['badge.directive.spec.ts'],
     breadcrumb: ['breadcrumb.directives.spec.ts'],
     button: ['button.directive.spec.ts'],
     'button-group': ['button-group.directive.spec.ts'],
+    calendar: ['calendar.component.spec.ts'],
     card: ['card.directives.spec.ts'],
+    carousel: ['carousel.directives.spec.ts'],
+    'chat-bubble': ['chat-bubble.directives.spec.ts'],
     checkbox: ['checkbox.directive.spec.ts'],
     combobox: ['combobox.component.spec.ts'],
+    diff: ['diff.component.spec.ts'],
+    divider: ['divider.component.spec.ts'],
+    dock: ['dock.directives.spec.ts'],
+    drawer: ['drawer.directives.spec.ts'],
+    dropdown: ['dropdown.directives.spec.ts'],
+    fab: ['fab.directives.spec.ts'],
+    fieldset: ['fieldset.directives.spec.ts'],
+    'file-input': ['file-input.component.spec.ts'],
+    indicator: ['indicator.directives.spec.ts'],
     input: ['input.directive.spec.ts'],
+    kbd: ['kbd.directive.spec.ts'],
+    link: ['link.directive.spec.ts'],
+    list: ['list.directives.spec.ts'],
     loader: ['loader.component.spec.ts'],
     modal: ['dialog.service.spec.ts'],
+    navbar: ['navbar.directives.spec.ts'],
+    pagination: ['pagination.component.spec.ts'],
+    progress: ['progress.component.spec.ts'],
+    'radial-progress': ['radial-progress.component.spec.ts'],
     radio: ['radio.directive.spec.ts'],
+    rating: ['rating.component.spec.ts'],
     select: ['select.component.spec.ts'],
     sheet: ['sheet.component.spec.ts'],
     skeleton: ['skeleton.directive.spec.ts'],
     slider: ['slider.component.spec.ts'],
+    stat: ['stat.directives.spec.ts'],
+    status: ['status.directive.spec.ts'],
+    steps: ['steps.directives.spec.ts'],
     switch: ['switch.component.spec.ts'],
     table: ['table.directives.spec.ts'],
     tabs: ['tabs.directives.spec.ts'],
+    textarea: ['textarea.directive.spec.ts'],
+    timeline: ['timeline.directives.spec.ts'],
     toast: ['toast.service.spec.ts'],
     toggle: ['toggle.directive.spec.ts'],
+    tooltip: ['tooltip.directive.spec.ts'],
+    validator: ['validator.directives.spec.ts'],
 };
 function generateComponent(options) {
     return (tree, context) => {
@@ -236,7 +417,7 @@ export function cn(...inputs: ClassValue[]): string {
                 const fs = require('fs');
                 let content = fs.readFileSync(sourcePath, 'utf-8');
                 // Rewrite imports to use local cn utility
-                content = content.replace(/from ['"]\.\.\/core\/utils\/cn['"]/g, `from '../../utils/cn'`);
+                content = content.replace(/from ['"]\.\.\/core\/utils\/cn['"]/g, `from '../utils/cn'`);
                 // Rewrite prefix if custom
                 if (options.prefix && options.prefix !== 'sny') {
                     content = content.replace(/sny/g, options.prefix);

package/schematics/ng-generate/component/schema.json

@@ -1,12 +1,12 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "SonnyUIGenerateComponentSchema",
+  "$id": "SonnyUIGenerateComponentSchema",
   "title": "SonnyUI component generator (copy-paste style)",
   "type": "object",
   "properties": {
     "name": {
       "type": "string",
-      "description": "The component to copy (accordion, avatar, badge, breadcrumb, button, button-group, card, checkbox, combobox, input, loader, modal, radio, select, sheet, skeleton, slider, switch, table, tabs, toast, toggle).",
+      "description": "The component to copy (accordion, alert, avatar, badge, breadcrumb, button, button-group, calendar, card, carousel, chat-bubble, checkbox, combobox, diff, divider, dock, drawer, dropdown, fab, fieldset, file-input, indicator, input, kbd, link, list, loader, modal, navbar, pagination, progress, radial-progress, radio, rating, select, sheet, skeleton, slider, stat, status, steps, switch, table, tabs, textarea, timeline, toast, toggle, tooltip, validator).",
       "$default": {
         "$source": "argv",
         "index": 0

package/src/lib/accordion/accordion.directives.spec.ts

@@ -0,0 +1,173 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  SnyAccordionDirective,
+  SnyAccordionItemDirective,
+  SnyAccordionTriggerDirective,
+  SnyAccordionContentDirective,
+} from './accordion.directives';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyAccordionDirective,
+    SnyAccordionItemDirective,
+    SnyAccordionTriggerDirective,
+    SnyAccordionContentDirective,
+  ],
+  template: `
+    <div snyAccordion [multi]="multi()">
+      <div snyAccordionItem value="item-1">
+        <button snyAccordionTrigger>Item 1</button>
+        <div snyAccordionContent><div>Content 1</div></div>
+      </div>
+      <div snyAccordionItem value="item-2">
+        <button snyAccordionTrigger>Item 2</button>
+        <div snyAccordionContent><div>Content 2</div></div>
+      </div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  multi = signal(false);
+}
+
+describe('Accordion Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render accordion items', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyAccordionItem]');
+    expect(items.length).toBe(2);
+  });
+
+  it('should toggle item on trigger click', () => {
+    const trigger = fixture.nativeElement.querySelector('[snyAccordionTrigger]');
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should close previous item in single mode', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    triggers[0].click();
+    fixture.detectChanges();
+    expect(triggers[0].getAttribute('aria-expanded')).toBe('true');
+
+    triggers[1].click();
+    fixture.detectChanges();
+    expect(triggers[0].getAttribute('aria-expanded')).toBe('false');
+    expect(triggers[1].getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should allow multiple open in multi mode', () => {
+    fixture.componentInstance.multi.set(true);
+    fixture.detectChanges();
+
+    const triggers = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    triggers[0].click();
+    fixture.detectChanges();
+    triggers[1].click();
+    fixture.detectChanges();
+
+    expect(triggers[0].getAttribute('aria-expanded')).toBe('true');
+    expect(triggers[1].getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should apply content visibility classes', () => {
+    const content = fixture.nativeElement.querySelector('[snyAccordionContent]');
+    expect(content.className).toContain('grid-rows-[0fr]');
+
+    const trigger = fixture.nativeElement.querySelector('[snyAccordionTrigger]');
+    trigger.click();
+    fixture.detectChanges();
+
+    expect(content.className).toContain('grid-rows-[1fr]');
+  });
+
+  it('should move focus with ArrowDown', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    (triggers[0] as HTMLElement).focus();
+    triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    expect(document.activeElement).toBe(updated[1]);
+  });
+
+  it('should move focus with ArrowUp', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    (triggers[1] as HTMLElement).focus();
+    triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    expect(document.activeElement).toBe(updated[0]);
+  });
+
+  it('should move focus to first with Home', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    (triggers[1] as HTMLElement).focus();
+    triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    expect(document.activeElement).toBe(updated[0]);
+  });
+
+  it('should move focus to last with End', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    (triggers[0] as HTMLElement).focus();
+    triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    expect(document.activeElement).toBe(updated[1]);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyAccordionDirective,
+    SnyAccordionItemDirective,
+    SnyAccordionTriggerDirective,
+    SnyAccordionContentDirective,
+  ],
+  template: `
+    <div snyAccordion #a="snyAccordion">
+      <div snyAccordionItem #i="snyAccordionItem" value="item-1">
+        <button snyAccordionTrigger>Item 1</button>
+        <div snyAccordionContent><div>Content 1</div></div>
+      </div>
+    </div>
+  `,
+})
+class ExportAsHost {
+  accordion = viewChild<SnyAccordionDirective>('a');
+  item = viewChild<SnyAccordionItemDirective>('i');
+}
+
+describe('Accordion exportAs', () => {
+  it('should expose snyAccordion via template ref', async () => {
+    await TestBed.configureTestingModule({ imports: [ExportAsHost] }).compileComponents();
+    const fixture = TestBed.createComponent(ExportAsHost);
+    fixture.detectChanges();
+    const ref = fixture.componentInstance.accordion();
+    expect(ref).toBeTruthy();
+    expect(ref!.multi()).toBe(false);
+  });
+
+  it('should expose snyAccordionItem via template ref', async () => {
+    await TestBed.configureTestingModule({ imports: [ExportAsHost] }).compileComponents();
+    const fixture = TestBed.createComponent(ExportAsHost);
+    fixture.detectChanges();
+    const ref = fixture.componentInstance.item();
+    expect(ref).toBeTruthy();
+    expect(ref!.isOpen()).toBe(false);
+  });
+});