@constela/ui 0.2.0

package/components/pagination/pagination.test.ts

@@ -0,0 +1,170 @@
+/**
+ * Test suite for Pagination component
+ *
+ * @constela/ui Pagination component tests following TDD methodology.
+ * These tests verify the Pagination 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,
+  type ComponentTestContext,
+} from '../../tests/helpers/test-utils.js';
+
+describe('Pagination Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('pagination');
+  });
+
+  // ==================== Component Structure Tests ====================
+
+  describe('Component Structure', () => {
+    it('should have valid component structure', () => {
+      assertValidComponent(ctx.component);
+    });
+
+    it('should have nav as root element', () => {
+      const rootTag = getRootTag(ctx.component);
+      expect(rootTag).toBe('nav');
+    });
+
+    it('should contain a slot for pagination items', () => {
+      expect(hasSlot(ctx.component.view)).toBe(true);
+    });
+
+    it('should have className using StyleExpr with preset paginationStyles', () => {
+      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: 'paginationStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['currentPage', 'totalPages', 'size'];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: currentPage', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'currentPage')).toBe(true);
+      });
+
+      it('should have type number', () => {
+        expect(hasParamType(ctx.component, 'currentPage', 'number')).toBe(true);
+      });
+    });
+
+    describe('param: totalPages', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'totalPages')).toBe(true);
+      });
+
+      it('should have type number', () => {
+        expect(hasParamType(ctx.component, 'totalPages', 'number')).toBe(true);
+      });
+    });
+
+    describe('param: size', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'size')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'size', 'string')).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Style Preset Tests ====================
+
+  describe('Style Preset', () => {
+    it('should have valid style preset structure', () => {
+      const paginationStyles = ctx.styles['paginationStyles'];
+      expect(paginationStyles).toBeDefined();
+      assertValidStylePreset(paginationStyles);
+    });
+
+    it('should have base classes for common pagination styles', () => {
+      const paginationStyles = ctx.styles['paginationStyles'];
+      expect(paginationStyles.base).toBeDefined();
+      expect(typeof paginationStyles.base).toBe('string');
+      expect(paginationStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('size options', () => {
+      const sizeOptions = ['default', 'sm', 'lg'];
+
+      it('should have size variants', () => {
+        const paginationStyles = ctx.styles['paginationStyles'];
+        expect(hasVariants(paginationStyles, ['size'])).toBe(true);
+      });
+
+      it.each(sizeOptions)('should have %s size option', (option) => {
+        const paginationStyles = ctx.styles['paginationStyles'];
+        expect(hasVariantOptions(paginationStyles, 'size', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default size set to default', () => {
+        const paginationStyles = ctx.styles['paginationStyles'];
+        expect(hasDefaultVariants(paginationStyles, { size: 'default' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Accessibility Tests ====================
+
+  describe('Accessibility', () => {
+    it('should have aria-label="Pagination" on root element', () => {
+      const ariaLabel = findPropInView(ctx.component.view, 'aria-label');
+      expect(ariaLabel).not.toBeNull();
+      // Should be a literal "Pagination" value
+      expect(ariaLabel).toMatchObject({
+        expr: 'lit',
+        value: 'Pagination',
+      });
+    });
+  });
+
+  // ==================== View Props Tests ====================
+
+  describe('View Props', () => {
+    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/popover/popover.constela.json

@@ -0,0 +1,20 @@
+{
+  "params": {
+    "open": { "type": "boolean", "required": false },
+    "position": { "type": "string", "required": false }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "div",
+    "props": {
+      "className": {
+        "expr": "style",
+        "preset": "popoverStyles",
+        "props": {
+          "position": { "expr": "param", "name": "position" }
+        }
+      }
+    },
+    "children": [{ "kind": "slot" }]
+  }
+}

package/components/popover/popover.styles.json

@@ -0,0 +1,16 @@
+{
+  "popoverStyles": {
+    "base": "absolute z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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": "bottom"
+    }
+  }
+}

package/components/popover/popover.test.ts

@@ -0,0 +1,165 @@
+/**
+ * Test suite for Popover component
+ *
+ * @constela/ui Popover component tests following TDD methodology.
+ * These tests verify the Popover component structure, params, styles, and slots.
+ *
+ * Coverage:
+ * - Component structure validation
+ * - Params definition validation (open, position)
+ * - Style preset validation (base, position variants, default variants)
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import {
+  loadComponentForTesting,
+  assertValidComponent,
+  assertValidStylePreset,
+  hasParams,
+  isOptionalParam,
+  hasParamType,
+  getRootTag,
+  hasVariants,
+  hasVariantOptions,
+  hasDefaultVariants,
+  hasSlot,
+  findPropInView,
+  type ComponentTestContext,
+} from '../../tests/helpers/test-utils.js';
+
+describe('Popover Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('popover');
+  });
+
+  // ==================== 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 contain a slot for popover content', () => {
+      expect(hasSlot(ctx.component.view)).toBe(true);
+    });
+
+    it('should have className using StyleExpr with preset popoverStyles', () => {
+      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: 'popoverStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['open', 'position'];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: open', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'open')).toBe(true);
+      });
+
+      it('should have type boolean', () => {
+        expect(hasParamType(ctx.component, 'open', 'boolean')).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 popoverStyles = ctx.styles['popoverStyles'];
+      expect(popoverStyles).toBeDefined();
+      assertValidStylePreset(popoverStyles);
+    });
+
+    it('should have base classes for common popover styles', () => {
+      const popoverStyles = ctx.styles['popoverStyles'];
+      expect(popoverStyles.base).toBeDefined();
+      expect(typeof popoverStyles.base).toBe('string');
+      expect(popoverStyles.base.length).toBeGreaterThan(0);
+    });
+
+    it('should include absolute positioning in base styles', () => {
+      const popoverStyles = ctx.styles['popoverStyles'];
+      expect(popoverStyles.base).toContain('absolute');
+    });
+
+    it('should include z-index in base styles', () => {
+      const popoverStyles = ctx.styles['popoverStyles'];
+      expect(popoverStyles.base).toMatch(/z-\d+/);
+    });
+
+    it('should include rounded corners in base styles', () => {
+      const popoverStyles = ctx.styles['popoverStyles'];
+      expect(popoverStyles.base).toMatch(/rounded/);
+    });
+
+    it('should include shadow in base styles', () => {
+      const popoverStyles = ctx.styles['popoverStyles'];
+      expect(popoverStyles.base).toMatch(/shadow/);
+    });
+
+    describe('position variants', () => {
+      const positionOptions = ['top', 'right', 'bottom', 'left'];
+
+      it('should have position variants', () => {
+        const popoverStyles = ctx.styles['popoverStyles'];
+        expect(hasVariants(popoverStyles, ['position'])).toBe(true);
+      });
+
+      it.each(positionOptions)('should have %s position option', (option) => {
+        const popoverStyles = ctx.styles['popoverStyles'];
+        expect(hasVariantOptions(popoverStyles, 'position', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default position set to bottom', () => {
+        const popoverStyles = ctx.styles['popoverStyles'];
+        expect(hasDefaultVariants(popoverStyles, { position: 'bottom' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== 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/components/radio/radio.constela.json

@@ -0,0 +1,31 @@
+{
+  "params": {
+    "checked": { "type": "boolean", "required": false },
+    "disabled": { "type": "boolean", "required": false },
+    "name": { "type": "string", "required": false },
+    "value": { "type": "string", "required": false },
+    "id": { "type": "string", "required": false },
+    "ariaLabel": { "type": "string", "required": false },
+    "size": { "type": "string", "required": false }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "input",
+    "props": {
+      "type": { "expr": "lit", "value": "radio" },
+      "className": {
+        "expr": "style",
+        "preset": "radioStyles",
+        "props": {
+          "size": { "expr": "param", "name": "size" }
+        }
+      },
+      "checked": { "expr": "param", "name": "checked" },
+      "disabled": { "expr": "param", "name": "disabled" },
+      "name": { "expr": "param", "name": "name" },
+      "value": { "expr": "param", "name": "value" },
+      "id": { "expr": "param", "name": "id" },
+      "aria-label": { "expr": "param", "name": "ariaLabel" }
+    }
+  }
+}

package/components/radio/radio.styles.json

@@ -0,0 +1,15 @@
+{
+  "radioStyles": {
+    "base": "aspect-square rounded-full border border-primary text-primary ring-offset-background focus: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": "h-4 w-4",
+        "sm": "h-3 w-3",
+        "lg": "h-5 w-5"
+      }
+    },
+    "defaultVariants": {
+      "size": "default"
+    }
+  }
+}

package/components/radio/radio.test.ts

@@ -0,0 +1,253 @@
+/**
+ * Test suite for Radio component
+ *
+ * @constela/ui Radio component tests following TDD methodology.
+ * These tests verify the Radio 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,
+  type ComponentTestContext,
+} from '../../tests/helpers/test-utils.js';
+
+describe('Radio Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('radio');
+  });
+
+  // ==================== Component Structure Tests ====================
+
+  describe('Component Structure', () => {
+    it('should have valid component structure', () => {
+      assertValidComponent(ctx.component);
+    });
+
+    it('should have input as root element', () => {
+      const rootTag = getRootTag(ctx.component);
+      expect(rootTag).toBe('input');
+    });
+
+    it('should have type="radio" attribute', () => {
+      const type = findPropInView(ctx.component.view, 'type');
+      expect(type).not.toBeNull();
+      // Should be a literal value 'radio'
+      expect(type).toMatchObject({
+        expr: 'lit',
+        value: 'radio',
+      });
+    });
+
+    it('should NOT contain a slot (radio is self-closing)', () => {
+      expect(hasSlot(ctx.component.view)).toBe(false);
+    });
+
+    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: 'radioStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = [
+      'checked',
+      'disabled',
+      'name',
+      'value',
+      'id',
+      'ariaLabel',
+    ];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: checked', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'checked')).toBe(true);
+      });
+
+      it('should have type boolean', () => {
+        expect(hasParamType(ctx.component, 'checked', 'boolean')).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: 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: 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: 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 radioStyles = ctx.styles['radioStyles'];
+      expect(radioStyles).toBeDefined();
+      assertValidStylePreset(radioStyles);
+    });
+
+    it('should have base classes', () => {
+      const radioStyles = ctx.styles['radioStyles'];
+      expect(radioStyles.base).toBeDefined();
+      expect(typeof radioStyles.base).toBe('string');
+      expect(radioStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('size options', () => {
+      const sizeOptions = ['default', 'sm', 'lg'];
+
+      it('should have size variants', () => {
+        const radioStyles = ctx.styles['radioStyles'];
+        expect(hasVariants(radioStyles, ['size'])).toBe(true);
+      });
+
+      it.each(sizeOptions)('should have %s size option', (option) => {
+        const radioStyles = ctx.styles['radioStyles'];
+        expect(hasVariantOptions(radioStyles, 'size', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default size set to default', () => {
+        const radioStyles = ctx.styles['radioStyles'];
+        expect(hasDefaultVariants(radioStyles, { 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',
+      });
+    });
+  });
+
+  // ==================== View Props Tests ====================
+
+  describe('View Props', () => {
+    it('should pass checked to input', () => {
+      const checked = findPropInView(ctx.component.view, 'checked');
+      expect(checked).not.toBeNull();
+      expect(checked).toMatchObject({
+        expr: 'param',
+        name: 'checked',
+      });
+    });
+
+    it('should pass name to input', () => {
+      const name = findPropInView(ctx.component.view, 'name');
+      expect(name).not.toBeNull();
+      expect(name).toMatchObject({
+        expr: 'param',
+        name: 'name',
+      });
+    });
+
+    it('should pass value to input', () => {
+      const value = findPropInView(ctx.component.view, 'value');
+      expect(value).not.toBeNull();
+      expect(value).toMatchObject({
+        expr: 'param',
+        name: 'value',
+      });
+    });
+
+    it('should pass id to input', () => {
+      const id = findPropInView(ctx.component.view, 'id');
+      expect(id).not.toBeNull();
+      expect(id).toMatchObject({
+        expr: 'param',
+        name: 'id',
+      });
+    });
+  });
+});