@constela/ui 0.2.0

package/components/stack/stack.test.ts

@@ -0,0 +1,261 @@
+/**
+ * Test suite for Stack component
+ *
+ * @constela/ui Stack component tests following TDD methodology.
+ * These tests verify the Stack 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('Stack Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('stack');
+  });
+
+  // ==================== 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 stack items', () => {
+      expect(hasSlot(ctx.component.view)).toBe(true);
+    });
+
+    it('should have className using StyleExpr with stackStyles preset', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).not.toBeNull();
+      expect(className).toMatchObject({
+        expr: 'style',
+        preset: 'stackStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['direction', 'gap', 'align', 'justify', 'className'];
+
+    it('should have all expected params', () => {
+      expect(hasParams(ctx.component, expectedParams)).toBe(true);
+    });
+
+    describe('param: direction', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'direction')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'direction', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: gap', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'gap')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'gap', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: align', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'align')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'align', 'string')).toBe(true);
+      });
+    });
+
+    describe('param: justify', () => {
+      it('should be optional', () => {
+        expect(isOptionalParam(ctx.component, 'justify')).toBe(true);
+      });
+
+      it('should have type string', () => {
+        expect(hasParamType(ctx.component, 'justify', '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 stackStyles = ctx.styles['stackStyles'];
+      expect(stackStyles).toBeDefined();
+      assertValidStylePreset(stackStyles);
+    });
+
+    it('should have base classes for common stack styles', () => {
+      const stackStyles = ctx.styles['stackStyles'];
+      expect(stackStyles.base).toBeDefined();
+      expect(typeof stackStyles.base).toBe('string');
+      expect(stackStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('direction variants', () => {
+      const directionOptions = ['row', 'column'];
+
+      it('should have direction variant', () => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasVariants(stackStyles, ['direction'])).toBe(true);
+      });
+
+      it.each(directionOptions)('should have %s direction option', (option) => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasVariantOptions(stackStyles, 'direction', [option])).toBe(true);
+      });
+    });
+
+    describe('gap variants', () => {
+      const gapOptions = ['none', 'sm', 'md', 'lg'];
+
+      it('should have gap variant', () => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasVariants(stackStyles, ['gap'])).toBe(true);
+      });
+
+      it.each(gapOptions)('should have %s gap option', (option) => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasVariantOptions(stackStyles, 'gap', [option])).toBe(true);
+      });
+    });
+
+    describe('align variants', () => {
+      const alignOptions = ['start', 'center', 'end', 'stretch'];
+
+      it('should have align variant', () => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasVariants(stackStyles, ['align'])).toBe(true);
+      });
+
+      it.each(alignOptions)('should have %s align option', (option) => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasVariantOptions(stackStyles, 'align', [option])).toBe(true);
+      });
+    });
+
+    describe('justify variants', () => {
+      const justifyOptions = ['start', 'center', 'end', 'between'];
+
+      it('should have justify variant', () => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasVariants(stackStyles, ['justify'])).toBe(true);
+      });
+
+      it.each(justifyOptions)('should have %s justify option', (option) => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasVariantOptions(stackStyles, 'justify', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default direction set to column', () => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasDefaultVariants(stackStyles, { direction: 'column' })).toBe(true);
+      });
+
+      it('should have default gap set to md', () => {
+        const stackStyles = ctx.styles['stackStyles'];
+        expect(hasDefaultVariants(stackStyles, { gap: 'md' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== View Props Tests ====================
+
+  describe('View Props', () => {
+    it('should pass direction to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          direction: expect.objectContaining({ expr: 'param', name: 'direction' }),
+        }),
+      });
+    });
+
+    it('should pass gap to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          gap: expect.objectContaining({ expr: 'param', name: 'gap' }),
+        }),
+      });
+    });
+
+    it('should pass align to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          align: expect.objectContaining({ expr: 'param', name: 'align' }),
+        }),
+      });
+    });
+
+    it('should pass justify to StyleExpr', () => {
+      const className = findPropInView(ctx.component.view, 'className');
+      expect(className).toMatchObject({
+        expr: 'style',
+        props: expect.objectContaining({
+          justify: expect.objectContaining({ expr: 'param', name: 'justify' }),
+        }),
+      });
+    });
+
+    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/switch/switch.constela.json

@@ -0,0 +1,29 @@
+{
+  "params": {
+    "checked": { "type": "boolean", "required": false },
+    "disabled": { "type": "boolean", "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": "button",
+    "props": {
+      "role": { "expr": "lit", "value": "switch" },
+      "className": {
+        "expr": "style",
+        "preset": "switchStyles",
+        "props": {
+          "size": { "expr": "param", "name": "size" }
+        }
+      },
+      "aria-checked": { "expr": "param", "name": "checked" },
+      "aria-label": { "expr": "param", "name": "ariaLabel" },
+      "disabled": { "expr": "param", "name": "disabled" },
+      "name": { "expr": "param", "name": "name" },
+      "id": { "expr": "param", "name": "id" }
+    }
+  }
+}

package/components/switch/switch.styles.json

@@ -0,0 +1,15 @@
+{
+  "switchStyles": {
+    "base": "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+    "variants": {
+      "size": {
+        "default": "h-6 w-11",
+        "sm": "h-5 w-9",
+        "lg": "h-7 w-14"
+      }
+    },
+    "defaultVariants": {
+      "size": "default"
+    }
+  }
+}

package/components/switch/switch.test.ts

@@ -0,0 +1,224 @@
+/**
+ * Test suite for Switch component
+ *
+ * @constela/ui Switch component tests following TDD methodology.
+ * These tests verify the Switch component structure, params, styles, and accessibility.
+ *
+ * Coverage:
+ * - Component structure validation
+ * - Params definition validation
+ * - Style preset validation
+ * - Accessibility attributes (role="switch", aria-checked, aria-label)
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import {
+  loadComponentForTesting,
+  assertValidComponent,
+  assertValidStylePreset,
+  hasParams,
+  isOptionalParam,
+  hasParamType,
+  getRootTag,
+  hasVariants,
+  hasVariantOptions,
+  hasDefaultVariants,
+  hasSlot,
+  findPropInView,
+  hasRole,
+  hasAriaAttribute,
+  type ComponentTestContext,
+} from '../../tests/helpers/test-utils.js';
+
+describe('Switch Component', () => {
+  let ctx: ComponentTestContext;
+
+  beforeAll(() => {
+    ctx = loadComponentForTesting('switch');
+  });
+
+  // ==================== Component Structure Tests ====================
+
+  describe('Component Structure', () => {
+    it('should have valid component structure', () => {
+      assertValidComponent(ctx.component);
+    });
+
+    it('should have button as root element', () => {
+      const rootTag = getRootTag(ctx.component);
+      expect(rootTag).toBe('button');
+    });
+
+    it('should NOT contain a slot (switch is self-contained)', () => {
+      expect(hasSlot(ctx.component.view)).toBe(false);
+    });
+
+    it('should have className using StyleExpr with preset "switchStyles"', () => {
+      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: 'switchStyles',
+      });
+    });
+  });
+
+  // ==================== Params Validation Tests ====================
+
+  describe('Params Validation', () => {
+    const expectedParams = ['checked', 'disabled', 'name', '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: 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 switchStyles = ctx.styles['switchStyles'];
+      expect(switchStyles).toBeDefined();
+      assertValidStylePreset(switchStyles);
+    });
+
+    it('should have base classes with common switch styles', () => {
+      const switchStyles = ctx.styles['switchStyles'];
+      expect(switchStyles.base).toBeDefined();
+      expect(typeof switchStyles.base).toBe('string');
+      expect(switchStyles.base.length).toBeGreaterThan(0);
+    });
+
+    describe('size options', () => {
+      const sizeOptions = ['default', 'sm', 'lg'];
+
+      it('should have size variants', () => {
+        const switchStyles = ctx.styles['switchStyles'];
+        expect(hasVariants(switchStyles, ['size'])).toBe(true);
+      });
+
+      it.each(sizeOptions)('should have %s size option', (option) => {
+        const switchStyles = ctx.styles['switchStyles'];
+        expect(hasVariantOptions(switchStyles, 'size', [option])).toBe(true);
+      });
+    });
+
+    describe('default variants', () => {
+      it('should have default size set to "default"', () => {
+        const switchStyles = ctx.styles['switchStyles'];
+        expect(hasDefaultVariants(switchStyles, { size: 'default' })).toBe(true);
+      });
+    });
+  });
+
+  // ==================== Accessibility Tests ====================
+
+  describe('Accessibility', () => {
+    it('should have role="switch"', () => {
+      expect(hasRole(ctx.component.view, 'switch')).toBe(true);
+    });
+
+    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 have aria-checked attribute bound to checked param', () => {
+      const ariaChecked = findPropInView(ctx.component.view, 'aria-checked');
+      expect(ariaChecked).not.toBeNull();
+      // Should reference the checked param
+      expect(ariaChecked).toMatchObject({
+        expr: 'param',
+        name: 'checked',
+      });
+    });
+
+    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 name to button', () => {
+      const name = findPropInView(ctx.component.view, 'name');
+      expect(name).not.toBeNull();
+      expect(name).toMatchObject({
+        expr: 'param',
+        name: 'name',
+      });
+    });
+
+    it('should pass id to button', () => {
+      const id = findPropInView(ctx.component.view, 'id');
+      expect(id).not.toBeNull();
+      expect(id).toMatchObject({
+        expr: 'param',
+        name: 'id',
+      });
+    });
+  });
+});

package/components/tabs/tabs.constela.json

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

package/components/tabs/tabs.styles.json

@@ -0,0 +1,14 @@
+{
+  "tabsStyles": {
+    "base": "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+    "variants": {
+      "variant": {
+        "default": "",
+        "outline": "border border-input bg-transparent"
+      }
+    },
+    "defaultVariants": {
+      "variant": "default"
+    }
+  }
+}