@constela/ui 0.2.0

package/components/toast/toast.test.ts

@@ -0,0 +1,183 @@
+/**
+ * Test suite for Toast component
+ *
+ * @constela/ui Toast component tests following TDD methodology.
+ * These tests verify the Toast component structure, params, styles, and accessibility.
+ *
+ * Coverage:
+ * - Component structure validation
+ * - Params definition validation
+ * - Style preset validation
+ * - Accessibility attributes
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import {
+  loadComponentForTesting,
+  assertValidComponent,
+  assertValidStylePreset,
+  hasParams,
+  isOptionalParam,
+  hasParamType,
+  getRootTag,
+  hasVariants,
+  hasVariantOptions,
+  hasDefaultVariants,
+  hasSlot,
+  findPropInView,
+  hasRole,
+  type ComponentTestContext,
+} from '../../tests/helpers/test-utils.js';
+
+describe('Toast Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('toast');
+  });
+
+  // ==================== Component Structure Tests ====================
+
+  describe('Component Structure', () => {
+    it('should have valid component structure', () => {
+      assertValidComponent(ctx.component);
+    });
+
+    it('should have div as root element', () => {
+      const rootTag = getRootTag(ctx.component);
+      expect(rootTag).toBe('div');
+    });
+
+    it('should have role="alert" attribute', () => {
+      expect(hasRole(ctx.component.view, 'alert')).toBe(true);
+    });
+
+    it('should contain a slot for toast content', () => {
+      expect(hasSlot(ctx.component.view)).toBe(true);
+    });
+
+    it('should have className using StyleExpr with preset toastStyles', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).not.toBeNull();
+      // StyleExpr should have expr: 'style' and preset reference
+      expect(className).toMatchObject({
+        expr: 'style',
+        preset: 'toastStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['variant', 'title', 'description'];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: variant', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'variant')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'variant', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: title', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'title')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'title', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: description', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'description')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'description', 'string')).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Style Preset Tests ====================
+
+  describe('Style Preset', () => {
+    it('should have valid style preset structure', () => {
+      const toastStyles = ctx.styles['toastStyles'];
+      expect(toastStyles).toBeDefined();
+      assertValidStylePreset(toastStyles);
+    });
+
+    it('should have base classes for common toast styles', () => {
+      const toastStyles = ctx.styles['toastStyles'];
+      expect(toastStyles.base).toBeDefined();
+      expect(typeof toastStyles.base).toBe('string');
+      expect(toastStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('variant options', () => {
+      const variantOptions = ['default', 'success', 'error', 'warning', 'info'];
+
+      it('should have variant variants', () => {
+        const toastStyles = ctx.styles['toastStyles'];
+        expect(hasVariants(toastStyles, ['variant'])).toBe(true);
+      });
+
+      it.each(variantOptions)('should have %s variant option', (option) => {
+        const toastStyles = ctx.styles['toastStyles'];
+        expect(hasVariantOptions(toastStyles, 'variant', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default variant set to default', () => {
+        const toastStyles = ctx.styles['toastStyles'];
+        expect(hasDefaultVariants(toastStyles, { variant: 'default' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Accessibility Tests ====================
+
+  describe('Accessibility', () => {
+    it('should have role="alert" for screen readers', () => {
+      const role = findPropInView(ctx.component.view, 'role');
+      expect(role).not.toBeNull();
+      expect(role).toMatchObject({
+        expr: 'lit',
+        value: 'alert',
+      });
+    });
+
+    it('should have aria-live="polite" for non-intrusive notifications', () => {
+      const ariaLive = findPropInView(ctx.component.view, 'aria-live');
+      expect(ariaLive).not.toBeNull();
+      expect(ariaLive).toMatchObject({
+        expr: 'lit',
+        value: 'polite',
+      });
+    });
+  });
+
+  // ==================== View Props Tests ====================
+
+  describe('View Props', () => {
+    it('should pass variant to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          variant: expect.objectContaining({ expr: 'param', name: 'variant' }),
+        }),
+      });
+    });
+  });
+});

package/components/tooltip/tooltip.constela.json

@@ -0,0 +1,21 @@
+{
+  "params": {
+    "content": { "type": "string", "required": false },
+    "position": { "type": "string", "required": false }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "div",
+    "props": {
+      "role": { "expr": "lit", "value": "tooltip" },
+      "className": {
+        "expr": "style",
+        "preset": "tooltipStyles",
+        "props": {
+          "position": { "expr": "param", "name": "position" }
+        }
+      }
+    },
+    "children": [{ "kind": "slot" }]
+  }
+}

package/components/tooltip/tooltip.styles.json

@@ -0,0 +1,16 @@
+{
+  "tooltipStyles": {
+    "base": "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    "variants": {
+      "position": {
+        "top": "bottom-full mb-2",
+        "right": "left-full ml-2",
+        "bottom": "top-full mt-2",
+        "left": "right-full mr-2"
+      }
+    },
+    "defaultVariants": {
+      "position": "top"
+    }
+  }
+}

package/components/tooltip/tooltip.test.ts

@@ -0,0 +1,164 @@
+/**
+ * Test suite for Tooltip component
+ *
+ * @constela/ui Tooltip component tests following TDD methodology.
+ * These tests verify the Tooltip component structure, params, styles, and accessibility.
+ *
+ * Coverage:
+ * - Component structure validation
+ * - Params definition validation
+ * - Style preset validation
+ * - Accessibility attributes
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import {
+  loadComponentForTesting,
+  assertValidComponent,
+  assertValidStylePreset,
+  hasParams,
+  isOptionalParam,
+  hasParamType,
+  getRootTag,
+  hasVariants,
+  hasVariantOptions,
+  hasDefaultVariants,
+  hasSlot,
+  findPropInView,
+  hasRole,
+  type ComponentTestContext,
+} from '../../tests/helpers/test-utils.js';
+
+describe('Tooltip Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('tooltip');
+  });
+
+  // ==================== Component Structure Tests ====================
+
+  describe('Component Structure', () => {
+    it('should have valid component structure', () => {
+      assertValidComponent(ctx.component);
+    });
+
+    it('should have div as root element', () => {
+      const rootTag = getRootTag(ctx.component);
+      expect(rootTag).toBe('div');
+    });
+
+    it('should have role="tooltip" attribute', () => {
+      expect(hasRole(ctx.component.view, 'tooltip')).toBe(true);
+    });
+
+    it('should contain a slot for trigger element', () => {
+      expect(hasSlot(ctx.component.view)).toBe(true);
+    });
+
+    it('should have className using StyleExpr with preset tooltipStyles', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).not.toBeNull();
+      // StyleExpr should have expr: 'style' and preset reference
+      expect(className).toMatchObject({
+        expr: 'style',
+        preset: 'tooltipStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['content', 'position'];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: content', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'content')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'content', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: position', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'position')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'position', 'string')).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Style Preset Tests ====================
+
+  describe('Style Preset', () => {
+    it('should have valid style preset structure', () => {
+      const tooltipStyles = ctx.styles['tooltipStyles'];
+      expect(tooltipStyles).toBeDefined();
+      assertValidStylePreset(tooltipStyles);
+    });
+
+    it('should have base classes for common tooltip styles', () => {
+      const tooltipStyles = ctx.styles['tooltipStyles'];
+      expect(tooltipStyles.base).toBeDefined();
+      expect(typeof tooltipStyles.base).toBe('string');
+      expect(tooltipStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('position variants', () => {
+      const positionOptions = ['top', 'right', 'bottom', 'left'];
+
+      it('should have position variants', () => {
+        const tooltipStyles = ctx.styles['tooltipStyles'];
+        expect(hasVariants(tooltipStyles, ['position'])).toBe(true);
+      });
+
+      it.each(positionOptions)('should have %s position option', (option) => {
+        const tooltipStyles = ctx.styles['tooltipStyles'];
+        expect(hasVariantOptions(tooltipStyles, 'position', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default position set to top', () => {
+        const tooltipStyles = ctx.styles['tooltipStyles'];
+        expect(hasDefaultVariants(tooltipStyles, { position: 'top' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Accessibility Tests ====================
+
+  describe('Accessibility', () => {
+    it('should have role="tooltip" for screen readers', () => {
+      const role = findPropInView(ctx.component.view, 'role');
+      expect(role).not.toBeNull();
+      expect(role).toMatchObject({
+        expr: 'lit',
+        value: 'tooltip',
+      });
+    });
+  });
+
+  // ==================== View Props Tests ====================
+
+  describe('View Props', () => {
+    it('should pass position to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          position: expect.objectContaining({ expr: 'param', name: 'position' }),
+        }),
+      });
+    });
+  });
+});

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+export { ComponentDef, Expression, ParamDef, StylePreset, ViewNode, validateAst } from '@constela/core';
+
+/**
+ * @constela/ui - Copy-paste UI components for Constela
+ *
+ * A shadcn/ui style component library providing pre-built,
+ * accessible UI components written in Constela JSON DSL.
+ */
+
+/**
+ * Component validation result
+ */
+interface ComponentValidationResult {
+    valid: boolean;
+    errors: string[];
+}
+/**
+ * Style preset validation result
+ */
+interface StyleValidationResult {
+    valid: boolean;
+    errors: string[];
+}
+/**
+ * Validate a Constela component definition
+ */
+declare function validateComponent(component: unknown): ComponentValidationResult;
+/**
+ * Validate a style preset definition
+ */
+declare function validateStylePreset(preset: unknown): StyleValidationResult;
+/**
+ * Button component variant types
+ */
+type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
+/**
+ * Input component type
+ */
+type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+/**
+ * Alert component variant types
+ */
+type AlertVariant = 'default' | 'destructive';
+/**
+ * Badge component variant types
+ */
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+/**
+ * Toast component variant types
+ */
+type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
+
+export { type AlertVariant, type BadgeVariant, type ButtonSize, type ButtonVariant, type ComponentValidationResult, type InputType, type StyleValidationResult, type ToastVariant, validateComponent, validateStylePreset };

package/dist/index.js

@@ -0,0 +1,83 @@
+// src/index.ts
+import { validateAst } from "@constela/core";
+function validateComponent(component) {
+  const errors = [];
+  if (!component || typeof component !== "object") {
+    return { valid: false, errors: ["Component must be an object"] };
+  }
+  const comp = component;
+  if (!comp["view"]) {
+    errors.push("Component must have a view property");
+  }
+  if (comp["params"] !== void 0) {
+    if (typeof comp["params"] !== "object" || comp["params"] === null) {
+      errors.push("params must be an object");
+    } else {
+      const params = comp["params"];
+      for (const [name, def] of Object.entries(params)) {
+        if (!def || typeof def !== "object") {
+          errors.push(`Param "${name}" must be an object`);
+          continue;
+        }
+        const paramDef = def;
+        if (!paramDef["type"] || typeof paramDef["type"] !== "string") {
+          errors.push(`Param "${name}" must have a string type property`);
+        }
+      }
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function validateStylePreset(preset) {
+  const errors = [];
+  if (!preset || typeof preset !== "object") {
+    return { valid: false, errors: ["Style preset must be an object"] };
+  }
+  const style = preset;
+  if (typeof style["base"] !== "string") {
+    errors.push("Style preset must have a string base property");
+  }
+  if (style["variants"] !== void 0) {
+    if (typeof style["variants"] !== "object" || style["variants"] === null) {
+      errors.push("variants must be an object");
+    } else {
+      const variants = style["variants"];
+      for (const [variantName, variantOptions] of Object.entries(variants)) {
+        if (typeof variantOptions !== "object" || variantOptions === null) {
+          errors.push(`Variant "${variantName}" must be an object`);
+          continue;
+        }
+        const options = variantOptions;
+        for (const [optionName, optionValue] of Object.entries(options)) {
+          if (typeof optionValue !== "string") {
+            errors.push(`Variant "${variantName}.${optionName}" must be a string`);
+          }
+        }
+      }
+    }
+  }
+  if (style["defaultVariants"] !== void 0) {
+    if (typeof style["defaultVariants"] !== "object" || style["defaultVariants"] === null) {
+      errors.push("defaultVariants must be an object");
+    } else {
+      const defaults = style["defaultVariants"];
+      for (const [name, value] of Object.entries(defaults)) {
+        if (typeof value !== "string") {
+          errors.push(`defaultVariants.${name} must be a string`);
+        }
+      }
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+export {
+  validateAst,
+  validateComponent,
+  validateStylePreset
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@constela/ui",
+  "version": "0.2.0",
+  "description": "Copy-paste UI components for Constela - shadcn/ui style component library",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "components"
+  ],
+  "dependencies": {
+    "@constela/core": "0.15.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^2.0.0"
+  },
+  "peerDependencies": {},
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  }
+}