@constela/ui 0.2.0

package/components/checkbox/checkbox.test.ts

@@ -0,0 +1,275 @@
+/**
+ * Test suite for Checkbox component
+ *
+ * @constela/ui Checkbox component tests following TDD methodology.
+ * These tests verify the Checkbox 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('Checkbox Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('checkbox');
+  });
+
+  // ==================== 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="checkbox" attribute', () => {
+      const type = findPropInView(ctx.component.view, 'type');
+      expect(type).not.toBeNull();
+      // Type should be a literal 'checkbox'
+      expect(type).toMatchObject({
+        expr: 'lit',
+        value: 'checkbox',
+      });
+    });
+
+    it('should NOT contain a slot (checkbox 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: 'checkboxStyles',
+      });
+    });
+
+    it('should support checked attribute for localState usage', () => {
+      const checked = findPropInView(ctx.component.view, 'checked');
+      expect(checked).not.toBeNull();
+      // Should reference the checked param
+      expect(checked).toMatchObject({
+        expr: 'param',
+        name: 'checked',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = [
+      'checked',
+      'disabled',
+      'required',
+      'name',
+      'id',
+      'ariaLabel',
+      'value',
+    ];
+
+    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: 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: 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);
+      });
+    });
+
+    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);
+      });
+    });
+  });
+
+  // ==================== Style Preset Tests ====================
+
+  describe('Style Preset', () => {
+    it('should have valid style preset structure', () => {
+      const checkboxStyles = ctx.styles['checkboxStyles'];
+      expect(checkboxStyles).toBeDefined();
+      assertValidStylePreset(checkboxStyles);
+    });
+
+    it('should have base classes', () => {
+      const checkboxStyles = ctx.styles['checkboxStyles'];
+      expect(checkboxStyles.base).toBeDefined();
+      expect(typeof checkboxStyles.base).toBe('string');
+      expect(checkboxStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('size options', () => {
+      const sizeOptions = ['default', 'sm', 'lg'];
+
+      it('should have size variants', () => {
+        const checkboxStyles = ctx.styles['checkboxStyles'];
+        expect(hasVariants(checkboxStyles, ['size'])).toBe(true);
+      });
+
+      it.each(sizeOptions)('should have %s size option', (option) => {
+        const checkboxStyles = ctx.styles['checkboxStyles'];
+        expect(hasVariantOptions(checkboxStyles, 'size', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default size set to default', () => {
+        const checkboxStyles = ctx.styles['checkboxStyles'];
+        expect(hasDefaultVariants(checkboxStyles, { 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 name to checkbox', () => {
+      const name = findPropInView(ctx.component.view, 'name');
+      expect(name).not.toBeNull();
+      expect(name).toMatchObject({
+        expr: 'param',
+        name: 'name',
+      });
+    });
+
+    it('should pass id to checkbox', () => {
+      const id = findPropInView(ctx.component.view, 'id');
+      expect(id).not.toBeNull();
+      expect(id).toMatchObject({
+        expr: 'param',
+        name: 'id',
+      });
+    });
+
+    it('should pass value to checkbox', () => {
+      const value = findPropInView(ctx.component.view, 'value');
+      expect(value).not.toBeNull();
+      expect(value).toMatchObject({
+        expr: 'param',
+        name: 'value',
+      });
+    });
+  });
+});

package/components/container/container.constela.json

@@ -0,0 +1,21 @@
+{
+  "params": {
+    "maxWidth": { "type": "string", "required": false },
+    "className": { "type": "string", "required": false }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "div",
+    "props": {
+      "className": {
+        "expr": "style",
+        "preset": "containerStyles",
+        "props": {
+          "maxWidth": { "expr": "param", "name": "maxWidth" },
+          "className": { "expr": "param", "name": "className" }
+        }
+      }
+    },
+    "children": [{ "kind": "slot" }]
+  }
+}

package/components/container/container.styles.json

@@ -0,0 +1,18 @@
+{
+  "containerStyles": {
+    "base": "mx-auto w-full px-4 sm:px-6 lg:px-8",
+    "variants": {
+      "maxWidth": {
+        "sm": "max-w-screen-sm",
+        "md": "max-w-screen-md",
+        "lg": "max-w-screen-lg",
+        "xl": "max-w-screen-xl",
+        "2xl": "max-w-screen-2xl",
+        "full": "max-w-full"
+      }
+    },
+    "defaultVariants": {
+      "maxWidth": "lg"
+    }
+  }
+}

package/components/container/container.test.ts

@@ -0,0 +1,164 @@
+/**
+ * Test suite for Container component
+ *
+ * @constela/ui Container component tests following TDD methodology.
+ * These tests verify the Container component structure, params, and styles.
+ *
+ * Coverage:
+ * - Component structure validation
+ * - Params definition validation
+ * - Style preset validation
+ */
+
+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('Container Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('container');
+  });
+
+  // ==================== 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 content', () => {
+      expect(hasSlot(ctx.component.view)).toBe(true);
+    });
+
+    it('should have className using StyleExpr with containerStyles preset', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).not.toBeNull();
+      expect(className).toMatchObject({
+        expr: 'style',
+        preset: 'containerStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['maxWidth', 'className'];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: maxWidth', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'maxWidth')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'maxWidth', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: className', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'className')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'className', 'string')).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Style Preset Tests ====================
+
+  describe('Style Preset', () => {
+    it('should have valid style preset structure', () => {
+      const containerStyles = ctx.styles['containerStyles'];
+      expect(containerStyles).toBeDefined();
+      assertValidStylePreset(containerStyles);
+    });
+
+    it('should have base classes for common container styles', () => {
+      const containerStyles = ctx.styles['containerStyles'];
+      expect(containerStyles.base).toBeDefined();
+      expect(typeof containerStyles.base).toBe('string');
+      expect(containerStyles.base.length).toBeGreaterThan(0);
+    });
+
+    it('should include mx-auto in base classes', () => {
+      const containerStyles = ctx.styles['containerStyles'];
+      expect(containerStyles.base).toContain('mx-auto');
+    });
+
+    it('should include px-4 in base classes', () => {
+      const containerStyles = ctx.styles['containerStyles'];
+      expect(containerStyles.base).toContain('px-4');
+    });
+
+    describe('maxWidth variants', () => {
+      const maxWidthOptions = ['sm', 'md', 'lg', 'xl', '2xl', 'full'];
+
+      it('should have maxWidth variants', () => {
+        const containerStyles = ctx.styles['containerStyles'];
+        expect(hasVariants(containerStyles, ['maxWidth'])).toBe(true);
+      });
+
+      it.each(maxWidthOptions)('should have %s maxWidth option', (option) => {
+        const containerStyles = ctx.styles['containerStyles'];
+        expect(hasVariantOptions(containerStyles, 'maxWidth', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default maxWidth set to lg', () => {
+        const containerStyles = ctx.styles['containerStyles'];
+        expect(hasDefaultVariants(containerStyles, { maxWidth: 'lg' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== View Props Tests ====================
+
+  describe('View Props', () => {
+    it('should pass maxWidth to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          maxWidth: expect.objectContaining({ expr: 'param', name: 'maxWidth' }),
+        }),
+      });
+    });
+
+    it('should pass className to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          className: expect.objectContaining({ expr: 'param', name: 'className' }),
+        }),
+      });
+    });
+  });
+});

package/components/dialog/dialog.constela.json

@@ -0,0 +1,19 @@
+{
+  "params": {
+    "open": { "type": "boolean", "required": false },
+    "title": { "type": "string", "required": false }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "div",
+    "props": {
+      "role": { "expr": "lit", "value": "dialog" },
+      "aria-modal": { "expr": "lit", "value": "true" },
+      "className": {
+        "expr": "style",
+        "preset": "dialogStyles"
+      }
+    },
+    "children": [{ "kind": "slot" }]
+  }
+}

package/components/dialog/dialog.styles.json

@@ -0,0 +1,5 @@
+{
+  "dialogStyles": {
+    "base": "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+  }
+}

package/components/dialog/dialog.test.ts

@@ -0,0 +1,139 @@
+/**
+ * Test suite for Dialog component
+ *
+ * @constela/ui Dialog component tests following TDD methodology.
+ * These tests verify the Dialog component structure, params, styles, and accessibility.
+ *
+ * Coverage:
+ * - Component structure validation
+ * - Params definition validation
+ * - Style preset validation
+ * - Accessibility attributes (role="dialog", aria-modal="true")
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import {
+  loadComponentForTesting,
+  assertValidComponent,
+  assertValidStylePreset,
+  hasParams,
+  isOptionalParam,
+  hasParamType,
+  getRootTag,
+  hasSlot,
+  findPropInView,
+  hasRole,
+  hasAriaAttribute,
+  type ComponentTestContext,
+} from '../../tests/helpers/test-utils.js';
+
+describe('Dialog Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('dialog');
+  });
+
+  // ==================== 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="dialog" attribute', () => {
+      expect(hasRole(ctx.component.view, 'dialog')).toBe(true);
+    });
+
+    it('should have aria-modal="true" attribute', () => {
+      expect(hasAriaAttribute(ctx.component.view, 'aria-modal')).toBe(true);
+    });
+
+    it('should contain a slot for dialog content', () => {
+      expect(hasSlot(ctx.component.view)).toBe(true);
+    });
+
+    it('should have className using StyleExpr with dialogStyles preset', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).not.toBeNull();
+      expect(className).toMatchObject({
+        expr: 'style',
+        preset: 'dialogStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['open', 'title'];
+
+    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: 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);
+      });
+    });
+  });
+
+  // ==================== Style Preset Tests ====================
+
+  describe('Style Preset', () => {
+    it('should have valid style preset structure', () => {
+      const dialogStyles = ctx.styles['dialogStyles'];
+      expect(dialogStyles).toBeDefined();
+      assertValidStylePreset(dialogStyles);
+    });
+
+    it('should have base classes for common dialog styles', () => {
+      const dialogStyles = ctx.styles['dialogStyles'];
+      expect(dialogStyles.base).toBeDefined();
+      expect(typeof dialogStyles.base).toBe('string');
+      expect(dialogStyles.base.length).toBeGreaterThan(0);
+    });
+  });
+
+  // ==================== Accessibility Tests ====================
+
+  describe('Accessibility', () => {
+    it('should have role="dialog" for screen readers', () => {
+      const role = findPropInView(ctx.component.view, 'role');
+      expect(role).not.toBeNull();
+      expect(role).toMatchObject({
+        expr: 'lit',
+        value: 'dialog',
+      });
+    });
+
+    it('should have aria-modal="true" to indicate modal behavior', () => {
+      const ariaModal = findPropInView(ctx.component.view, 'aria-modal');
+      expect(ariaModal).not.toBeNull();
+      expect(ariaModal).toMatchObject({
+        expr: 'lit',
+        value: 'true',
+      });
+    });
+  });
+});

package/components/grid/grid.constela.json

@@ -0,0 +1,23 @@
+{
+  "params": {
+    "cols": { "type": "string", "required": false },
+    "gap": { "type": "string", "required": false },
+    "className": { "type": "string", "required": false }
+  },
+  "view": {
+    "kind": "element",
+    "tag": "div",
+    "props": {
+      "className": {
+        "expr": "style",
+        "preset": "gridStyles",
+        "props": {
+          "cols": { "expr": "param", "name": "cols" },
+          "gap": { "expr": "param", "name": "gap" },
+          "className": { "expr": "param", "name": "className" }
+        }
+      }
+    },
+    "children": [{ "kind": "slot" }]
+  }
+}

package/components/grid/grid.styles.json

@@ -0,0 +1,25 @@
+{
+  "gridStyles": {
+    "base": "grid",
+    "variants": {
+      "cols": {
+        "1": "grid-cols-1",
+        "2": "grid-cols-2",
+        "3": "grid-cols-3",
+        "4": "grid-cols-4",
+        "6": "grid-cols-6",
+        "12": "grid-cols-12"
+      },
+      "gap": {
+        "none": "gap-0",
+        "sm": "gap-2",
+        "md": "gap-4",
+        "lg": "gap-8"
+      }
+    },
+    "defaultVariants": {
+      "cols": "1",
+      "gap": "md"
+    }
+  }
+}