@synetics/ui 0.7.0-alpha

package/src/showcase/http/http-test.syn

@@ -0,0 +1,88 @@
+/**
+ * P1-02 HTTP Showcase
+ * HttpClient · createHttpClient · useHttpGet · useHttpPost
+ * Interceptors · Retry · Abort
+ * Real network — jsonplaceholder.typicode.com
+ */
+
+import { createSignal, ShowRegistry as Show } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { DemoButton } from '../common/components/demo-button.syn';
+import { BasicRequestsDemo } from './components/basic-requests-demo.syn';
+import { InterceptorsDemo } from './components/interceptors-demo.syn';
+import { RetryDemo } from './components/retry-demo.syn';
+import { AbortDemo } from './components/abort-demo.syn';
+
+export component HttpTestPage() {
+  const [showBasic, setShowBasic] = createSignal(false);
+  const [showInterceptors, setShowInterceptors] = createSignal(false);
+  const [showRetry, setShowRetry] = createSignal(false);
+  const [showAbort, setShowAbort] = createSignal(false);
+
+  return (
+    <div>
+      <PageHeader
+        title="HTTP Client"
+        emoji="🌐"
+        description="P1-02 · createHttpClient · useHttpGet / useHttpPost · interceptors · retry · abort"
+      />
+
+      <DemoSection
+        title="1️⃣ Basic GET + POST"
+        description="createHttpClient at module scope. useHttpGet / useHttpPost with real JSONPlaceholder calls."
+        borderColor="#3b82f6"
+      >
+        <DemoButton
+          label={showBasic() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowBasic((v) => !v)}
+        />
+        <Show when={showBasic()}>
+          <BasicRequestsDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="2️⃣ Interceptors"
+        description="RequestInterceptor injects Authorization header. ResponseInterceptor logs latency. ErrorInterceptor catches failures."
+        borderColor="#8b5cf6"
+      >
+        <DemoButton
+          label={showInterceptors() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowInterceptors((v) => !v)}
+        />
+        <Show when={showInterceptors()}>
+          <InterceptorsDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="3️⃣ Retry with Backoff"
+        description="IRetryConfig: maxAttempts, delay, exponential backoff. Triggers on configured status codes."
+        borderColor="#f59e0b"
+      >
+        <DemoButton
+          label={showRetry() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowRetry((v) => !v)}
+        />
+        <Show when={showRetry()}>
+          <RetryDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="4️⃣ Abort on Unmount"
+        description="Request cancelled when component unmounts mid-flight. AbortError confirms no stale state updates."
+        borderColor="#ef4444"
+      >
+        <DemoButton
+          label={showAbort() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowAbort((v) => !v)}
+        />
+        <Show when={showAbort()}>
+          <AbortDemo />
+        </Show>
+      </DemoSection>
+    </div>
+  );
+}

package/src/showcase/index.ts

@@ -0,0 +1,46 @@
+/**
+ * Showcase Index
+ * Central exports for all showcase pages
+ */
+
+// Main pages
+export { AboutPage } from './about/about.syn';
+export { BootstrapTestPage } from './bootstrap/bootstrap-test.syn';
+export { ContextTestPage } from './context/context-test.syn';
+export { ControlFlowTestPage } from './control-flow/control-flow-test.syn';
+export { DependencyInjectionTestPage } from './di/di-test.syn';
+export { DragDropTestPage } from './drag-drop/drag-drop-test.syn';
+export { ErrorBoundaryMegaPage } from './error-boundary/error-boundary-mega.syn';
+export { ErrorBoundarySimplePage } from './error-boundary/error-boundary-simple.syn';
+export { ErrorBoundaryTestPage } from './error-boundary/error-boundary-test.syn';
+export { FormsTestPage } from './forms/forms-test.syn';
+export { CrossValidationPage } from './forms/pages/cross-validation-page.syn';
+export { DependentFieldsPage } from './forms/pages/dependent-fields-page.syn';
+export { DynamicFieldsPage } from './forms/pages/dynamic-fields-page.syn';
+export { EditFormPage } from './forms/pages/edit-form-page.syn';
+export { SelectControlsPage } from './forms/pages/select-controls-page.syn';
+export { WizardPage } from './forms/pages/wizard-page.syn';
+export { HomePage } from './home/home.syn';
+export { HttpTestPage } from './http/http-test.syn';
+export { JsxTestPage } from './jsx/jsx-test.syn';
+export { PortalTestPage } from './portal/portal-test.syn';
+export { ReactivityTestPage } from './reactivity/reactivity-test.syn';
+export { ResourceTestPage } from './resource/resource-test.syn';
+export { RoutingTestPage } from './routing/routing-test.syn';
+export { SSRTestPage } from './ssr/ssr-test.syn';
+export { LineCanvasDemo } from './svg-canvas/board/components/line-canvas.syn';
+export { SvgCanvasPage } from './svg-canvas/svg-canvas-page.syn';
+
+// Test pages
+export { AssignmentTest } from './tests/assignment-test.syn';
+export { MinimalTest } from './tests/minimal-export-test.syn';
+export { ObjectLiteralTest } from './tests/object-literal-test.syn';
+export { SimpleTestPage } from './tests/simple-test.syn';
+export { TemplateLiteralDemo } from './tests/template-literal-demo.syn';
+
+// Common components
+export { CodeBlock } from './common/components/code-block.syn';
+export { DemoButton } from './common/components/demo-button.syn';
+export { DemoSection } from './common/components/demo-section.syn';
+export { PageHeader } from './common/components/page-header.syn';
+export { StatusIndicator } from './common/components/status-indicator.syn';

package/src/showcase/jsx/components/event-handlers-demo.syn

@@ -0,0 +1,78 @@
+/**
+ * Event Handlers Demo Component
+ * Tests onClick, onInput, onKeyPress events
+ */
+
+import type { Accessor, Setter } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+interface EventHandlersDemoProps {
+  clickCount: Accessor<number>
+  setClickCount: Setter<number>
+  inputValue: Accessor<string>
+  setInputValue: Setter<string>
+  lastKey: Accessor<string>
+  setLastKey: Setter<string>
+}
+
+export const EventHandlersDemo = ({ 
+  clickCount, 
+  setClickCount, 
+  inputValue, 
+  setInputValue,
+  lastKey,
+  setLastKey 
+}: EventHandlersDemoProps) => {
+  const handleClick = () => {
+    setClickCount(clickCount() + 1);
+  };
+  
+  const handleInput = (e) => {
+    setInputValue(e.target.value);
+  };
+  
+  const handleKeyPress = (e) => {
+    setLastKey(e.key);
+  };
+  
+  return (
+    <div>
+      <div style="margin-bottom: 15px;">
+        <div style="margin-bottom: 10px;">
+          <strong style="color: #10b981;">Click Count:</strong> {clickCount()}
+        </div>
+        <div style="display: flex; gap: 10px;">
+          <DemoButton onClick={handleClick} color="#8b5cf6">
+            Click Me!
+          </DemoButton>
+          <DemoButton onClick={() => setClickCount(0)} color="#6b7280">
+            Reset
+          </DemoButton>
+        </div>
+      </div>
+      
+      <div style="margin-bottom: 15px;">
+        <div style="margin-bottom: 10px;">
+          <strong style="color: #10b981;">Input Value:</strong> {inputValue()}
+        </div>
+        <input 
+          type="text"
+          placeholder="Type something..."
+          value={inputValue()}
+          onInput={handleInput}
+          style="padding: 10px; background: #2a2a2a; border: 2px solid #3b82f6; color: white; border-radius: 6px; font-size: 16px; width: 100%; max-width: 300px;" />
+      </div>
+      
+      <div>
+        <div style="margin-bottom: 10px;">
+          <strong style="color: #10b981;">Last Key Pressed:</strong> {lastKey() || '(none)'}
+        </div>
+        <input 
+          type="text"
+          placeholder="Press any key..."
+          onKeyPress={handleKeyPress}
+          style="padding: 10px; background: #2a2a2a; border: 2px solid #8b5cf6; color: white; border-radius: 6px; font-size: 16px; width: 100%; max-width: 300px;" />
+      </div>
+    </div>
+  );
+};

package/src/showcase/jsx/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * JSX Components Index
+ */
+
+export { EventHandlersDemo } from './event-handlers-demo.syn';
+export { ReactiveAttributesDemo } from './reactive-attributes-demo.syn';
+export { StyleObjectsDemo } from './style-objects-demo.syn';

package/src/showcase/jsx/components/reactive-attributes-demo.syn

@@ -0,0 +1,69 @@
+/**
+ * Reactive Attributes Demo Component
+ * Tests reactive attributes and color changes
+ */
+
+import type { Accessor, Setter } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+interface ReactiveAttributesDemoProps {
+  bgColor: Accessor<string>
+  setBgColor: Setter<string>
+  isDisabled: Accessor<boolean>
+  setIsDisabled: Setter<boolean>
+}
+
+export const ReactiveAttributesDemo = ({ bgColor, setBgColor, isDisabled, setIsDisabled }: ReactiveAttributesDemoProps) => {
+  const colors = [
+    { name: 'Blue', value: '#3b82f6' },
+    { name: 'Green', value: '#10b981' },
+    { name: 'Orange', value: '#f59e0b' },
+    { name: 'Red', value: '#ef4444' }
+  ];
+  
+  return (
+    <div>
+      <div 
+        style={{
+          padding: '20px',
+          background: bgColor(),
+          color: 'white',
+          borderRadius: '6px',
+          marginBottom: '15px',
+          transition: 'background 0.3s'
+        }}>
+        Background Color: {bgColor()}
+      </div>
+      
+      <div style="display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;">
+        {colors.map(color => (
+          <DemoButton onClick={() => setBgColor(color.value)} color={color.value}>
+            {color.name}
+          </DemoButton>
+        ))}
+      </div>
+      
+      <div style="display: flex; gap: 10px; align-items: center;">
+        <button 
+          disabled={isDisabled()}
+          style={() => ({
+            padding: '10px 20px',
+            background: isDisabled() ? '#4b5563' : '#8b5cf6',
+            border: 'none',
+            color: 'white',
+            borderRadius: '6px',
+            cursor: isDisabled() ? 'not-allowed' : 'pointer',
+            opacity: isDisabled() ? '0.45' : '1',
+            pointerEvents: isDisabled() ? 'none' : 'auto',
+            transition: 'all 0.2s'
+          })}>
+          {isDisabled() ? 'Disabled Button' : 'Enabled Button'}
+        </button>
+        
+        <DemoButton onClick={() => setIsDisabled(!isDisabled())} color="#6b7280">
+          Toggle Disabled
+        </DemoButton>
+      </div>
+    </div>
+  );
+};

package/src/showcase/jsx/components/style-objects-demo.syn

@@ -0,0 +1,40 @@
+/**
+ * Style Objects Demo Component
+ * Tests reactive style objects
+ */
+
+import type { Accessor, Setter } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+interface StyleObjectsDemoProps {
+  fontSize: Accessor<number>
+  setFontSize: Setter<number>
+}
+
+export const StyleObjectsDemo = ({ fontSize, setFontSize }: StyleObjectsDemoProps) => {
+  return (
+    <div>
+      <div style={{
+        padding: '20px',
+        background: '#2a2a2a',
+        borderRadius: '6px',
+        fontSize: `${fontSize()}px`,
+        marginBottom: '15px'
+      }}>
+        Font size: {fontSize()}px - Adjust with buttons below
+      </div>
+      
+      <div style="display: flex; gap: 10px;">
+        <DemoButton onClick={() => setFontSize(fontSize() - 2)} color="#ef4444">
+          Smaller
+        </DemoButton>
+        <DemoButton onClick={() => setFontSize(16)} color="#6b7280">
+          Reset
+        </DemoButton>
+        <DemoButton onClick={() => setFontSize(fontSize() + 2)} color="#10b981">
+          Larger
+        </DemoButton>
+      </div>
+    </div>
+  );
+};

package/src/showcase/jsx/jsx-test.syn

@@ -0,0 +1,81 @@
+/**
+ * PHASE 2: JSX & DOM Tests
+ * Refactored with modular components
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { ReactiveAttributesDemo } from './components/reactive-attributes-demo.syn';
+import { EventHandlersDemo } from './components/event-handlers-demo.syn';
+import { StyleObjectsDemo } from './components/style-objects-demo.syn';
+
+export component JsxTestPage() {
+  // Reactive Attributes
+  const [bgColor, setBgColor] = createSignal('#3b82f6');
+  const [isDisabled, setIsDisabled] = createSignal(false);
+  
+  // Event Handlers
+  const [clickCount, setClickCount] = createSignal(0);
+  const [inputValue, setInputValue] = createSignal('');
+  const [lastKey, setLastKey] = createSignal('');
+  
+  // Style Objects
+  const [fontSize, setFontSize] = createSignal(16);
+  
+  return (
+    <div>
+      <PageHeader 
+        title="JSX & DOM Tests"
+        emoji="🎨"
+        color="#10b981"
+        description="Testing attributes, events, and nesting"
+      />
+      
+      <DemoSection 
+        title="1️⃣ Reactive Attributes" 
+        description="Dynamic attributes that update with state changes"
+        borderColor="#3b82f6">
+        <ReactiveAttributesDemo 
+          bgColor={bgColor}
+          setBgColor={setBgColor}
+          isDisabled={isDisabled}
+          setIsDisabled={setIsDisabled}
+        />
+      </DemoSection>
+      
+      <DemoSection 
+        title="2️⃣ Event Handlers" 
+        description="Testing onClick, onInput, and onKeyPress events"
+        borderColor="#8b5cf6">
+        <EventHandlersDemo 
+          clickCount={clickCount}
+          setClickCount={setClickCount}
+          inputValue={inputValue}
+          setInputValue={setInputValue}
+          lastKey={lastKey}
+          setLastKey={setLastKey}
+        />
+      </DemoSection>
+      
+      <DemoSection 
+        title="3️⃣ Reactive Style Objects" 
+        description="Style objects with dynamic values"
+        borderColor="#10b981">
+        <StyleObjectsDemo fontSize={fontSize} setFontSize={setFontSize} />
+      </DemoSection>
+      
+      <section style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 2px solid #10b981;">
+        <h3 style="font-size: 20px; margin-bottom: 15px; color: #10b981;">
+          ✅ Test Status
+        </h3>
+        <ul style="list-style: none; padding: 0; color: #9ca3af;">
+          <li style="margin-bottom: 8px;">✅ Reactive attributes</li>
+          <li style="margin-bottom: 8px;">✅ Boolean attributes (disabled)</li>
+          <li style="margin-bottom: 8px;">✅ Style objects</li>
+          <li style="margin-bottom: 8px;">✅ Event handlers (onClick, onInput, onKeyPress)</li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/src/showcase/pages/__tests__/about.test.ts

@@ -0,0 +1,120 @@
+/**
+ * Unit Tests: About Page
+ * Tests router interaction, toggle details, navigation
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { AboutPage } from '../about.syn';
+
+describe('AboutPage', () => {
+  let container: HTMLElement;
+  const mockRouter = {
+    navigate: vi.fn(),
+    location: { pathname: '/about', search: '' },
+  };
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render about heading', () => {
+      const page = AboutPage();
+      container.appendChild(page);
+
+      const heading = container.querySelector('h2');
+      expect(heading?.textContent).toContain('About Synetics framework');
+    });
+
+    it('should render key features list', () => {
+      const page = AboutPage();
+      container.appendChild(page);
+
+      const list = container.querySelector('ul');
+      expect(list).toBeTruthy();
+      expect(list?.querySelectorAll('li').length).toBeGreaterThan(5);
+    });
+
+    it('should render toggle details button', () => {
+      const page = AboutPage();
+      container.appendChild(page);
+
+      const button = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Show More Details')
+      );
+      expect(button).toBeTruthy();
+    });
+
+    it('should render back to home button', () => {
+      const page = AboutPage();
+      container.appendChild(page);
+
+      const button = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Back to Home')
+      );
+      expect(button).toBeTruthy();
+    });
+  });
+
+  describe('Toggle Details Behavior', () => {
+    it('should hide details by default', () => {
+      const page = AboutPage();
+      container.appendChild(page);
+
+      const detailsSection = Array.from(container.querySelectorAll('div')).find((div) =>
+        div.textContent?.includes('Navigation System')
+      );
+      expect(detailsSection).toBeFalsy();
+    });
+
+    it('should show details after clicking toggle button', (done) => {
+      const page = AboutPage();
+      container.appendChild(page);
+
+      const toggleBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Show More Details')
+      );
+
+      toggleBtn?.click();
+
+      setTimeout(() => {
+        const detailsSection = Array.from(container.querySelectorAll('div')).find((div) =>
+          div.textContent?.includes('Navigation System')
+        );
+        expect(detailsSection).toBeTruthy();
+        done();
+      }, 50);
+    });
+
+    it('should toggle button text when clicked', (done) => {
+      const page = AboutPage();
+      container.appendChild(page);
+
+      const toggleBtn = Array.from(container.querySelectorAll('button')).find((btn) =>
+        btn.textContent?.includes('Show More')
+      );
+
+      expect(toggleBtn?.textContent).toContain('Show More Details');
+      toggleBtn?.click();
+
+      setTimeout(() => {
+        expect(toggleBtn?.textContent).toContain('Hide Details');
+        done();
+      }, 50);
+    });
+  });
+
+  describe('Router Integration', () => {
+    it('should display current route path', () => {
+      const page = AboutPage();
+      container.appendChild(page);
+
+      const routeInfo = Array.from(container.querySelectorAll('p')).find((p) =>
+        p.textContent?.includes('Current Path')
+      );
+      expect(routeInfo).toBeTruthy();
+    });
+  });
+});

package/src/showcase/pages/__tests__/assignment-test.test.ts

@@ -0,0 +1,68 @@
+/**
+ * Unit Tests: Assignment Test Page
+ * Tests assignment expression parsing
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import { AssignmentTest } from '../assignment-test.syn';
+
+describe('AssignmentTest', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  describe('Rendering', () => {
+    it('should render without errors', () => {
+      const page = AssignmentTest();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Assignment Expression Test');
+    });
+
+    it('should display initial count', () => {
+      const page = AssignmentTest();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('Count: 0');
+    });
+
+    it('should display success message', () => {
+      const page = AssignmentTest();
+      container.appendChild(page);
+
+      expect(container.textContent).toContain('assignment expressions are working');
+    });
+  });
+
+  describe('Assignment Operations', () => {
+    it('should increment count when button clicked', (done) => {
+      const page = AssignmentTest();
+      container.appendChild(page);
+
+      const button = container.querySelector('button');
+      button?.click();
+
+      setTimeout(() => {
+        expect(container.textContent).toContain('Count: 1');
+        done();
+      }, 50);
+    });
+
+    it('should execute assignment in testAssignments function', (done) => {
+      const page = AssignmentTest();
+      container.appendChild(page);
+
+      const button = container.querySelector('button');
+      button?.click();
+
+      setTimeout(() => {
+        // If no error thrown, assignment worked
+        expect(container.textContent).toBeTruthy();
+        done();
+      }, 50);
+    });
+  });
+});