@constela/ui 0.2.0

package/components/tabs/tabs.test.ts

@@ -0,0 +1,163 @@
+/**
+ * Test suite for Tabs component
+ *
+ * @constela/ui Tabs component tests following TDD methodology.
+ * These tests verify the Tabs component structure, params, styles, and accessibility.
+ *
+ * Coverage:
+ * - Component structure validation
+ * - Params definition validation
+ * - Style preset validation
+ * - Accessibility attributes (role="tablist")
+ */
+
+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('Tabs Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('tabs');
+  });
+
+  // ==================== 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="tablist" attribute', () => {
+      expect(hasRole(ctx.component.view, 'tablist')).toBe(true);
+    });
+
+    it('should contain a slot for tab items', () => {
+      expect(hasSlot(ctx.component.view)).toBe(true);
+    });
+
+    it('should have className using StyleExpr with tabsStyles preset', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).not.toBeNull();
+      expect(className).toMatchObject({
+        expr: 'style',
+        preset: 'tabsStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['activeTab', 'variant'];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: activeTab', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'activeTab')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'activeTab', 'string')).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);
+      });
+    });
+  });
+
+  // ==================== Style Preset Tests ====================
+
+  describe('Style Preset', () => {
+    it('should have valid style preset structure', () => {
+      const tabsStyles = ctx.styles['tabsStyles'];
+      expect(tabsStyles).toBeDefined();
+      assertValidStylePreset(tabsStyles);
+    });
+
+    it('should have base classes for common tabs styles', () => {
+      const tabsStyles = ctx.styles['tabsStyles'];
+      expect(tabsStyles.base).toBeDefined();
+      expect(typeof tabsStyles.base).toBe('string');
+      expect(tabsStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('variant options', () => {
+      const variantOptions = ['default', 'outline'];
+
+      it('should have variant variants', () => {
+        const tabsStyles = ctx.styles['tabsStyles'];
+        expect(hasVariants(tabsStyles, ['variant'])).toBe(true);
+      });
+
+      it.each(variantOptions)('should have %s variant option', (option) => {
+        const tabsStyles = ctx.styles['tabsStyles'];
+        expect(hasVariantOptions(tabsStyles, 'variant', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default variant set to default', () => {
+        const tabsStyles = ctx.styles['tabsStyles'];
+        expect(hasDefaultVariants(tabsStyles, { variant: 'default' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Accessibility Tests ====================
+
+  describe('Accessibility', () => {
+    it('should have role="tablist" for screen readers', () => {
+      const role = findPropInView(ctx.component.view, 'role');
+      expect(role).not.toBeNull();
+      expect(role).toMatchObject({
+        expr: 'lit',
+        value: 'tablist',
+      });
+    });
+  });
+
+  // ==================== 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/textarea/textarea.constela.json

@@ -0,0 +1,34 @@
+{
+  "params": {
+    "value": { "type": "string", "required": false },
+    "placeholder": { "type": "string", "required": false },
+    "disabled": { "type": "boolean", "required": false },
+    "required": { "type": "boolean", "required": false },
+    "rows": { "type": "number", "required": false },
+    "name": { "type": "string", "required": false },
+    "id": { "type": "string", "required": false },
+    "ariaLabel": { "type": "string", "required": false },
+    "size": { "type": "string", "required": false }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "textarea",
+    "props": {
+      "className": {
+        "expr": "style",
+        "preset": "textareaStyles",
+        "props": {
+          "size": { "expr": "param", "name": "size" }
+        }
+      },
+      "value": { "expr": "param", "name": "value" },
+      "placeholder": { "expr": "param", "name": "placeholder" },
+      "disabled": { "expr": "param", "name": "disabled" },
+      "required": { "expr": "param", "name": "required" },
+      "rows": { "expr": "param", "name": "rows" },
+      "name": { "expr": "param", "name": "name" },
+      "id": { "expr": "param", "name": "id" },
+      "aria-label": { "expr": "param", "name": "ariaLabel" }
+    }
+  }
+}

package/components/textarea/textarea.styles.json

@@ -0,0 +1,15 @@
+{
+  "textareaStyles": {
+    "base": "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    "variants": {
+      "size": {
+        "default": "",
+        "sm": "min-h-[60px] text-xs",
+        "lg": "min-h-[120px] text-base"
+      }
+    },
+    "defaultVariants": {
+      "size": "default"
+    }
+  }
+}

package/components/textarea/textarea.test.ts

@@ -0,0 +1,290 @@
+/**
+ * Test suite for Textarea component
+ *
+ * @constela/ui Textarea component tests following TDD methodology.
+ * These tests verify the Textarea 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,
+  findPropInView,
+  type ComponentTestContext,
+} from '../../tests/helpers/test-utils.js';
+
+describe('Textarea Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('textarea');
+  });
+
+  // ==================== Component Structure Tests ====================
+
+  describe('Component Structure', () => {
+    it('should have valid component structure', () => {
+      assertValidComponent(ctx.component);
+    });
+
+    it('should have textarea as root element', () => {
+      const rootTag = getRootTag(ctx.component);
+      expect(rootTag).toBe('textarea');
+    });
+
+    it('should have className using StyleExpr', () => {
+      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: 'textareaStyles',
+      });
+    });
+
+    it('should support rows attribute', () => {
+      const rows = findPropInView(ctx.component.view, 'rows');
+      expect(rows).not.toBeNull();
+      // Should reference the rows param
+      expect(rows).toMatchObject({
+        expr: 'param',
+        name: 'rows',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = [
+      'value',
+      'placeholder',
+      'disabled',
+      'required',
+      'rows',
+      'name',
+      'id',
+      'ariaLabel',
+    ];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: value', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'value')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'value', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: placeholder', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'placeholder')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'placeholder', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: disabled', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'disabled')).toBe(true);
+      });
+
+      it('should have type boolean', () => {
+        expect(hasParamType(ctx.component, 'disabled', 'boolean')).toBe(true);
+      });
+    });
+
+    describe('param: required', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'required')).toBe(true);
+      });
+
+      it('should have type boolean', () => {
+        expect(hasParamType(ctx.component, 'required', 'boolean')).toBe(true);
+      });
+    });
+
+    describe('param: rows', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'rows')).toBe(true);
+      });
+
+      it('should have type number', () => {
+        expect(hasParamType(ctx.component, 'rows', 'number')).toBe(true);
+      });
+    });
+
+    describe('param: name', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'name')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'name', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: id', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'id')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'id', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: ariaLabel', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'ariaLabel')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'ariaLabel', 'string')).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Style Preset Tests ====================
+
+  describe('Style Preset', () => {
+    it('should have valid style preset structure', () => {
+      const textareaStyles = ctx.styles['textareaStyles'];
+      expect(textareaStyles).toBeDefined();
+      assertValidStylePreset(textareaStyles);
+    });
+
+    it('should have base classes', () => {
+      const textareaStyles = ctx.styles['textareaStyles'];
+      expect(textareaStyles.base).toBeDefined();
+      expect(typeof textareaStyles.base).toBe('string');
+      expect(textareaStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('size options', () => {
+      const sizeOptions = ['default', 'sm', 'lg'];
+
+      it('should have size variants', () => {
+        const textareaStyles = ctx.styles['textareaStyles'];
+        expect(hasVariants(textareaStyles, ['size'])).toBe(true);
+      });
+
+      it.each(sizeOptions)('should have %s size option', (option) => {
+        const textareaStyles = ctx.styles['textareaStyles'];
+        expect(hasVariantOptions(textareaStyles, 'size', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default size set to default', () => {
+        const textareaStyles = ctx.styles['textareaStyles'];
+        expect(hasDefaultVariants(textareaStyles, { size: 'default' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Accessibility Tests ====================
+
+  describe('Accessibility', () => {
+    it('should support aria-label attribute', () => {
+      const ariaLabel = findPropInView(ctx.component.view, 'aria-label');
+      expect(ariaLabel).not.toBeNull();
+      // Should reference the ariaLabel param
+      expect(ariaLabel).toMatchObject({
+        expr: 'param',
+        name: 'ariaLabel',
+      });
+    });
+
+    it('should support disabled attribute', () => {
+      const disabled = findPropInView(ctx.component.view, 'disabled');
+      expect(disabled).not.toBeNull();
+      // Should reference the disabled param
+      expect(disabled).toMatchObject({
+        expr: 'param',
+        name: 'disabled',
+      });
+    });
+
+    it('should support required attribute', () => {
+      const required = findPropInView(ctx.component.view, 'required');
+      expect(required).not.toBeNull();
+      // Should reference the required param
+      expect(required).toMatchObject({
+        expr: 'param',
+        name: 'required',
+      });
+    });
+  });
+
+  // ==================== View Props Tests ====================
+
+  describe('View Props', () => {
+    it('should pass value to textarea', () => {
+      const value = findPropInView(ctx.component.view, 'value');
+      expect(value).not.toBeNull();
+      expect(value).toMatchObject({
+        expr: 'param',
+        name: 'value',
+      });
+    });
+
+    it('should pass placeholder to textarea', () => {
+      const placeholder = findPropInView(ctx.component.view, 'placeholder');
+      expect(placeholder).not.toBeNull();
+      expect(placeholder).toMatchObject({
+        expr: 'param',
+        name: 'placeholder',
+      });
+    });
+
+    it('should pass name to textarea', () => {
+      const name = findPropInView(ctx.component.view, 'name');
+      expect(name).not.toBeNull();
+      expect(name).toMatchObject({
+        expr: 'param',
+        name: 'name',
+      });
+    });
+
+    it('should pass id to textarea', () => {
+      const id = findPropInView(ctx.component.view, 'id');
+      expect(id).not.toBeNull();
+      expect(id).toMatchObject({
+        expr: 'param',
+        name: 'id',
+      });
+    });
+
+    it('should pass size to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          size: expect.objectContaining({ expr: 'param', name: 'size' }),
+        }),
+      });
+    });
+  });
+});

package/components/toast/toast.constela.json

@@ -0,0 +1,23 @@
+{
+  "params": {
+    "variant": { "type": "string", "required": false },
+    "title": { "type": "string", "required": false },
+    "description": { "type": "string", "required": false }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "div",
+    "props": {
+      "role": { "expr": "lit", "value": "alert" },
+      "aria-live": { "expr": "lit", "value": "polite" },
+      "className": {
+        "expr": "style",
+        "preset": "toastStyles",
+        "props": {
+          "variant": { "expr": "param", "name": "variant" }
+        }
+      }
+    },
+    "children": [{ "kind": "slot" }]
+  }
+}

package/components/toast/toast.styles.json

@@ -0,0 +1,17 @@
+{
+  "toastStyles": {
+    "base": "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+    "variants": {
+      "variant": {
+        "default": "border bg-background text-foreground",
+        "success": "border-green-500 bg-green-50 text-green-900 dark:bg-green-900 dark:text-green-50",
+        "error": "border-destructive bg-destructive text-destructive-foreground",
+        "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-50",
+        "info": "border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-900 dark:text-blue-50"
+      }
+    },
+    "defaultVariants": {
+      "variant": "default"
+    }
+  }
+}