@sonny-ui/core 0.1.0-alpha.1

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

@@ -0,0 +1,258 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateComponent = generateComponent;
+const path = __importStar(require("path"));
+const AVAILABLE_COMPONENTS = [
+    'accordion',
+    'avatar',
+    'badge',
+    'breadcrumb',
+    'button',
+    'button-group',
+    'card',
+    'checkbox',
+    'combobox',
+    'input',
+    'loader',
+    'modal',
+    'radio',
+    'select',
+    'sheet',
+    'skeleton',
+    'slider',
+    'switch',
+    'table',
+    'tabs',
+    'toast',
+    'toggle',
+];
+const COMPONENT_FILES = {
+    accordion: [
+        'accordion.directives.ts',
+        'index.ts',
+    ],
+    avatar: [
+        'avatar.component.ts',
+        'avatar.variants.ts',
+        'index.ts',
+    ],
+    badge: [
+        'badge.directive.ts',
+        'badge.variants.ts',
+        'index.ts',
+    ],
+    breadcrumb: [
+        'breadcrumb.directives.ts',
+        'index.ts',
+    ],
+    button: [
+        'button.directive.ts',
+        'button.variants.ts',
+        'index.ts',
+    ],
+    'button-group': [
+        'button-group.directive.ts',
+        'button-group.variants.ts',
+        'index.ts',
+    ],
+    card: [
+        'card.directives.ts',
+        'card.variants.ts',
+        'index.ts',
+    ],
+    checkbox: [
+        'checkbox.directive.ts',
+        'checkbox.variants.ts',
+        'index.ts',
+    ],
+    combobox: [
+        'combobox.component.ts',
+        'combobox.variants.ts',
+        'index.ts',
+    ],
+    input: [
+        'input.directive.ts',
+        'input.variants.ts',
+        'label.directive.ts',
+        'index.ts',
+    ],
+    loader: [
+        'loader.component.ts',
+        'loader.variants.ts',
+        'index.ts',
+    ],
+    modal: [
+        'dialog.types.ts',
+        'dialog-ref.ts',
+        'dialog.service.ts',
+        'dialog.directives.ts',
+        'index.ts',
+    ],
+    radio: [
+        'radio.directive.ts',
+        'radio.variants.ts',
+        'index.ts',
+    ],
+    select: [
+        'select.component.ts',
+        'select.variants.ts',
+        'index.ts',
+    ],
+    sheet: [
+        'sheet-ref.ts',
+        'sheet.directives.ts',
+        'sheet.service.ts',
+        'sheet.types.ts',
+        'index.ts',
+    ],
+    skeleton: [
+        'skeleton.directive.ts',
+        'skeleton.variants.ts',
+        'index.ts',
+    ],
+    slider: [
+        'slider.component.ts',
+        'slider.variants.ts',
+        'index.ts',
+    ],
+    switch: [
+        'switch.component.ts',
+        'switch.variants.ts',
+        'index.ts',
+    ],
+    table: [
+        'table.directives.ts',
+        'table.variants.ts',
+        'index.ts',
+    ],
+    tabs: [
+        'tabs.directives.ts',
+        'tabs.variants.ts',
+        'index.ts',
+    ],
+    toast: [
+        'toast.service.ts',
+        'toast.variants.ts',
+        'toaster.component.ts',
+        'index.ts',
+    ],
+    toggle: [
+        'toggle.directive.ts',
+        'toggle.variants.ts',
+        'index.ts',
+    ],
+};
+const COMPONENT_SPEC_FILES = {
+    accordion: ['accordion.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'],
+    card: ['card.directives.spec.ts'],
+    checkbox: ['checkbox.directive.spec.ts'],
+    combobox: ['combobox.component.spec.ts'],
+    input: ['input.directive.spec.ts'],
+    loader: ['loader.component.spec.ts'],
+    modal: ['dialog.service.spec.ts'],
+    radio: ['radio.directive.spec.ts'],
+    select: ['select.component.spec.ts'],
+    sheet: ['sheet.component.spec.ts'],
+    skeleton: ['skeleton.directive.spec.ts'],
+    slider: ['slider.component.spec.ts'],
+    switch: ['switch.component.spec.ts'],
+    table: ['table.directives.spec.ts'],
+    tabs: ['tabs.directives.spec.ts'],
+    toast: ['toast.service.spec.ts'],
+    toggle: ['toggle.directive.spec.ts'],
+};
+function generateComponent(options) {
+    return (tree, context) => {
+        const name = options.name.toLowerCase();
+        if (!AVAILABLE_COMPONENTS.includes(name)) {
+            throw new Error(`Unknown component "${name}". Available: ${AVAILABLE_COMPONENTS.join(', ')}`);
+        }
+        const targetDir = options.path || 'src/app/ui';
+        const componentDir = `${targetDir}/${name}`;
+        const files = COMPONENT_FILES[name];
+        const specFiles = options.skipTests ? [] : (COMPONENT_SPEC_FILES[name] || []);
+        // Ensure cn.ts utility exists
+        const cnTargetPath = `${targetDir}/utils/cn.ts`;
+        if (!tree.exists(cnTargetPath)) {
+            const cnContent = `import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+`;
+            tree.create(cnTargetPath, cnContent);
+            context.logger.info('Created utils/cn.ts');
+        }
+        // Copy component files from the library source
+        const sourceBase = path.join(__dirname, '..', '..', '..', 'src', 'lib', name);
+        for (const file of [...files, ...specFiles]) {
+            const sourcePath = path.join(sourceBase, file);
+            const destPath = `${componentDir}/${file}`;
+            if (tree.exists(destPath)) {
+                context.logger.warn(`File already exists: ${destPath} — skipping`);
+                continue;
+            }
+            // Read from the package's source files
+            try {
+                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'`);
+                // Rewrite prefix if custom
+                if (options.prefix && options.prefix !== 'sny') {
+                    content = content.replace(/sny/g, options.prefix);
+                    content = content.replace(/Sny/g, capitalize(options.prefix));
+                }
+                tree.create(destPath, content);
+                context.logger.info(`Created ${destPath}`);
+            }
+            catch (e) {
+                context.logger.error(`Could not read source file: ${sourcePath}`);
+            }
+        }
+        context.logger.info(`Component "${name}" copied to ${componentDir}`);
+        return tree;
+    };
+}
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}

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

@@ -0,0 +1,32 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "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).",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "path": {
+      "type": "string",
+      "default": "src/app/ui",
+      "description": "The path to copy the component into."
+    },
+    "prefix": {
+      "type": "string",
+      "default": "sny",
+      "description": "The prefix to use for selectors."
+    },
+    "skipTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "Skip copying test files."
+    }
+  },
+  "required": ["name"]
+}

package/src/styles/sonny-theme.css

@@ -0,0 +1,126 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-background: var(--sny-background);
+  --color-foreground: var(--sny-foreground);
+  --color-primary: var(--sny-primary);
+  --color-primary-foreground: var(--sny-primary-foreground);
+  --color-secondary: var(--sny-secondary);
+  --color-secondary-foreground: var(--sny-secondary-foreground);
+  --color-muted: var(--sny-muted);
+  --color-muted-foreground: var(--sny-muted-foreground);
+  --color-accent: var(--sny-accent);
+  --color-accent-foreground: var(--sny-accent-foreground);
+  --color-destructive: var(--sny-destructive);
+  --color-destructive-foreground: var(--sny-destructive-foreground);
+  --color-card: var(--sny-card);
+  --color-card-foreground: var(--sny-card-foreground);
+  --color-border: var(--sny-border);
+  --color-input: var(--sny-input);
+  --color-ring: var(--sny-ring);
+  --radius-sm: var(--sny-radius);
+}
+
+:root {
+  --sny-background: #ffffff;
+  --sny-foreground: #0a0a0a;
+  --sny-primary: #171717;
+  --sny-primary-foreground: #fafafa;
+  --sny-secondary: #f5f5f5;
+  --sny-secondary-foreground: #171717;
+  --sny-muted: #f5f5f5;
+  --sny-muted-foreground: #737373;
+  --sny-accent: #f5f5f5;
+  --sny-accent-foreground: #171717;
+  --sny-destructive: #ef4444;
+  --sny-destructive-foreground: #fafafa;
+  --sny-card: #ffffff;
+  --sny-card-foreground: #0a0a0a;
+  --sny-border: #e5e5e5;
+  --sny-input: #e5e5e5;
+  --sny-ring: #0a0a0a;
+  --sny-radius: 0.5rem;
+}
+
+.dark,
+[data-theme="dark"] {
+  --sny-background: #0a0a0a;
+  --sny-foreground: #fafafa;
+  --sny-primary: #fafafa;
+  --sny-primary-foreground: #171717;
+  --sny-secondary: #262626;
+  --sny-secondary-foreground: #fafafa;
+  --sny-muted: #262626;
+  --sny-muted-foreground: #a3a3a3;
+  --sny-accent: #262626;
+  --sny-accent-foreground: #fafafa;
+  --sny-destructive: #dc2626;
+  --sny-destructive-foreground: #fafafa;
+  --sny-card: #0a0a0a;
+  --sny-card-foreground: #fafafa;
+  --sny-border: #262626;
+  --sny-input: #262626;
+  --sny-ring: #d4d4d4;
+}
+
+[data-theme="corporate"] {
+  --sny-background: #f8fafc;
+  --sny-foreground: #0f172a;
+  --sny-primary: #1e40af;
+  --sny-primary-foreground: #ffffff;
+  --sny-secondary: #e2e8f0;
+  --sny-secondary-foreground: #1e293b;
+  --sny-muted: #f1f5f9;
+  --sny-muted-foreground: #64748b;
+  --sny-accent: #dbeafe;
+  --sny-accent-foreground: #1e3a8a;
+  --sny-destructive: #dc2626;
+  --sny-destructive-foreground: #ffffff;
+  --sny-card: #ffffff;
+  --sny-card-foreground: #0f172a;
+  --sny-border: #cbd5e1;
+  --sny-input: #cbd5e1;
+  --sny-ring: #3b82f6;
+  --sny-radius: 0.375rem;
+}
+
+/* ─── Dialog / Sheet overlay ─── */
+
+.sny-dialog-backdrop {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Sheet panel — styling only; positioning handled by CDK GlobalPositionStrategy */
+.sny-sheet-panel {
+  background-color: var(--sny-background);
+  padding: 1.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+}
+
+.sny-sheet-right {
+  border-left: 1px solid var(--sny-border);
+}
+
+.sny-sheet-left {
+  border-right: 1px solid var(--sny-border);
+}
+
+.sny-sheet-top {
+  border-bottom: 1px solid var(--sny-border);
+}
+
+.sny-sheet-bottom {
+  border-top: 1px solid var(--sny-border);
+}
+
+/* Search dialog panel */
+.sny-search-dialog {
+  background-color: var(--sny-background);
+  border: 1px solid var(--sny-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+}