@alliance-droid/svelte-docs-system 0.0.2 → 0.1.0

package/src/lib/components/CodeBlock.test.ts

@@ -1,133 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-/**
- * Unit tests for CodeBlock component
- * Tests code formatting and syntax highlighting
- */
-
-describe('CodeBlock Component', () => {
-  describe('Code Input', () => {
-    it('should accept code as string', () => {
-      const code = 'console.log("hello")';
-      expect(typeof code).toBe('string');
-    });
-
-    it('should accept empty code string', () => {
-      const code = '';
-      expect(code.length).toBe(0);
-    });
-
-    it('should preserve whitespace and indentation', () => {
-      const code = `function example() {
-  return true;
-}`;
-      expect(code).toContain('  ');
-      expect(code).toContain('\n');
-    });
-
-    it('should handle special characters', () => {
-      const code = 'const str = "hello<world>&friends";';
-      expect(code).toContain('<');
-      expect(code).toContain('>');
-      expect(code).toContain('&');
-    });
-  });
-
-  describe('Language Detection', () => {
-    it('should support common programming languages', () => {
-      const languages = ['javascript', 'typescript', 'python', 'rust', 'bash', 'json', 'html', 'css'];
-      languages.forEach((lang) => {
-        expect(typeof lang).toBe('string');
-        expect(lang.length).toBeGreaterThan(0);
-      });
-    });
-
-    it('should accept language as prop', () => {
-      const language = 'typescript';
-      expect(typeof language).toBe('string');
-    });
-
-    it('should default to plain text if language not provided', () => {
-      const defaultLanguage = 'plaintext';
-      expect(defaultLanguage).toBeDefined();
-    });
-
-    it('should detect language from code fence', () => {
-      const fence = '```javascript';
-      const match = fence.match(/```(\w+)?/);
-      expect(match).toBeTruthy();
-      if (match && match[1]) {
-        expect(match[1]).toBe('javascript');
-      }
-    });
-  });
-
-  describe('Syntax Highlighting', () => {
-    it('should apply syntax highlighting tokens', () => {
-      const token = {
-        type: 'keyword',
-        content: 'function',
-        class: 'hljs-keyword'
-      };
-      expect(token.type).toBeDefined();
-      expect(token.content).toBeDefined();
-      expect(token.class).toBeTruthy();
-    });
-
-    it('should support dark mode highlighting', () => {
-      const colorSchemes = ['light', 'dark'];
-      colorSchemes.forEach((scheme) => {
-        expect(['light', 'dark']).toContain(scheme);
-      });
-    });
-  });
-
-  describe('Copy Button', () => {
-    it('should have copy functionality', () => {
-      const hasCopyButton = true;
-      expect(hasCopyButton).toBe(true);
-    });
-
-    it('should copy entire code block', () => {
-      const code = 'const x = 42;';
-      const copied = code;
-      expect(copied).toBe(code);
-    });
-  });
-
-  describe('Line Numbers', () => {
-    it('should support optional line numbers', () => {
-      const showLineNumbers = true;
-      expect(typeof showLineNumbers).toBe('boolean');
-    });
-
-    it('should number lines correctly', () => {
-      const lines = [
-        'line 1',
-        'line 2',
-        'line 3'
-      ];
-      lines.forEach((line, index) => {
-        expect(index + 1).toBeGreaterThan(0);
-      });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should be keyboard accessible', () => {
-      const canCopyWithKeyboard = true;
-      expect(canCopyWithKeyboard).toBe(true);
-    });
-
-    it('should have proper ARIA labels', () => {
-      const ariaLabel = 'Code block, javascript';
-      expect(ariaLabel).toBeTruthy();
-      expect(typeof ariaLabel).toBe('string');
-    });
-
-    it('should announce copy feedback to screen readers', () => {
-      const announcement = 'Code copied to clipboard';
-      expect(announcement).toBeTruthy();
-    });
-  });
-});

package/src/lib/components/Image.test.ts

@@ -1,163 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-/**
- * Unit tests for Image component
- * Tests image rendering, optimization, and accessibility
- */
-
-describe('Image Component', () => {
-  describe('Image Props', () => {
-    it('should require src attribute', () => {
-      const src = '/images/example.png';
-      expect(src).toBeDefined();
-      expect(typeof src).toBe('string');
-      expect(src.startsWith('/')).toBe(true);
-    });
-
-    it('should require alt text for accessibility', () => {
-      const alt = 'A description of the image';
-      expect(alt).toBeDefined();
-      expect(typeof alt).toBe('string');
-      expect(alt.length).toBeGreaterThan(0);
-    });
-
-    it('should accept various image formats', () => {
-      const formats = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'];
-      const validSrc = 'image.webp';
-      expect(formats.some((fmt) => validSrc.endsWith(fmt))).toBe(true);
-    });
-
-    it('should accept optional width and height', () => {
-      const width = 800;
-      const height = 600;
-      expect(typeof width).toBe('number');
-      expect(typeof height).toBe('number');
-      expect(width).toBeGreaterThan(0);
-      expect(height).toBeGreaterThan(0);
-    });
-
-    it('should accept optional caption', () => {
-      const caption = 'Figure 1: Example screenshot';
-      expect(typeof caption).toBe('string');
-    });
-  });
-
-  describe('Image Optimization', () => {
-    it('should support responsive images with srcset', () => {
-      const srcset =
-        '/img/small.webp 640w, /img/medium.webp 1024w, /img/large.webp 1920w';
-      expect(srcset).toContain('640w');
-      expect(srcset).toContain('1024w');
-      expect(srcset).toContain('1920w');
-    });
-
-    it('should support multiple image formats with picture element', () => {
-      const formats = ['webp', 'jpg', 'png'];
-      formats.forEach((fmt) => {
-        expect(['webp', 'jpg', 'png']).toContain(fmt);
-      });
-    });
-
-    it('should lazy load images by default', () => {
-      const loading = 'lazy';
-      expect(['lazy', 'eager']).toContain(loading);
-    });
-
-    it('should support eager loading when needed', () => {
-      const loading = 'eager';
-      expect(['lazy', 'eager']).toContain(loading);
-    });
-  });
-
-  describe('Responsive Behavior', () => {
-    it('should support CSS aspect ratio', () => {
-      const aspectRatio = '16/9';
-      expect(aspectRatio).toContain('/');
-    });
-
-    it('should preserve aspect ratio', () => {
-      const width = 800;
-      const height = 600;
-      const aspectRatio = width / height;
-      expect(aspectRatio).toBeCloseTo(1.33, 1);
-    });
-
-    it('should scale to container width', () => {
-      const maxWidth = '100%';
-      expect(maxWidth).toBe('100%');
-    });
-  });
-
-  describe('Figure and Caption', () => {
-    it('should wrap in figure element', () => {
-      const element = 'figure';
-      expect(element).toBe('figure');
-    });
-
-    it('should support caption with figcaption', () => {
-      const caption = 'Example figure caption';
-      expect(caption).toBeTruthy();
-    });
-
-    it('should associate caption with image', () => {
-      const figcaptionId = 'img-caption-1';
-      const ariaDescribedBy = 'img-caption-1';
-      expect(ariaDescribedBy).toBe(figcaptionId);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have descriptive alt text', () => {
-      const alt = 'A screenshot showing the dashboard with user metrics';
-      expect(alt.length).toBeGreaterThan(10);
-    });
-
-    it('should not have empty alt text', () => {
-      const alt = 'Important diagram';
-      expect(alt.length).toBeGreaterThan(0);
-    });
-
-    it('should avoid decorative image alt text', () => {
-      const decorativeAlt = 'spacer';
-      const meaningfulAlt = 'Navigation menu icon';
-      expect(meaningfulAlt.length).toBeGreaterThan(decorativeAlt.length);
-    });
-
-    it('should have proper figure structure', () => {
-      const figureElement = 'figure';
-      const figcaptionElement = 'figcaption';
-      expect(figureElement).toBeDefined();
-      expect(figcaptionElement).toBeDefined();
-    });
-
-    it('should support extended descriptions for complex images', () => {
-      const longdesc = '/docs/image-description.html';
-      expect(longdesc).toBeTruthy();
-    });
-  });
-
-  describe('Dark Mode Support', () => {
-    it('should support dark mode styling', () => {
-      const lightClass = 'border-gray-200';
-      const darkClass = 'dark:border-gray-700';
-      expect(darkClass).toContain('dark:');
-    });
-
-    it('should maintain contrast in dark mode', () => {
-      const darkModeEnabled = true;
-      expect(darkModeEnabled).toBe(true);
-    });
-  });
-
-  describe('Browser Support', () => {
-    it('should provide fallback for old browsers', () => {
-      const hasFallback = true;
-      expect(hasFallback).toBe(true);
-    });
-
-    it('should support webp with fallback', () => {
-      const hasPicture = true;
-      expect(hasPicture).toBe(true);
-    });
-  });
-});

package/src/lib/components/Sidebar.svelte

@@ -1,110 +0,0 @@
-<script lang="ts">
-  import type { NavSection, NavItem } from '$lib/stores/nav';
-  import { sidebarOpen } from '$lib/stores/nav';
-
-  let {
-    sections = [] as NavSection[],
-    currentPath = '',
-    onNavigate = () => {},
-  }: {
-    sections?: NavSection[];
-    currentPath?: string;
-    onNavigate?: (path: string) => void;
-  } = $props();
-
-  function handleNavClick(path: string) {
-    onNavigate(path);
-    sidebarOpen.set(false);
-  }
-
-  function isActive(href: string | undefined): boolean {
-    if (!href) return false;
-    return currentPath === href || currentPath.startsWith(href + '/');
-  }
-
-  function renderNavItem(item: NavItem) {
-    const active = isActive(item.href);
-    return {
-      label: item.label,
-      href: item.href,
-      children: item.children,
-      active,
-      icon: item.icon,
-    };
-  }
-</script>
-
-<!-- Sidebar Overlay for Mobile -->
-{#if $sidebarOpen}
-  <button
-    class="fixed inset-0 z-30 bg-black/20 md:hidden"
-    onclick={() => sidebarOpen.set(false)}
-    aria-label="Close menu"
-  ></button>
-{/if}
-
-<!-- Sidebar -->
-<aside
-  class="fixed left-0 top-16 bottom-0 w-64 overflow-y-auto border-r border-claude-border dark:border-claude-dark-border bg-white dark:bg-claude-dark-bg-secondary transition-transform md:relative md:top-0 {$sidebarOpen
-    ? 'translate-x-0'
-    : '-translate-x-full md:translate-x-0'} z-30 md:z-auto"
->
-  <div class="p-6 space-y-8">
-    {#each sections as section (section.title)}
-      <div>
-        <h3 class="text-sm font-semibold text-claude-text dark:text-claude-dark-text uppercase tracking-wide mb-3 opacity-60">
-          {section.title}
-        </h3>
-        <nav class="space-y-2">
-          {#each section.items as item (item.label)}
-            <a
-              href={item.href || '#'}
-              onclick={(e) => {
-                if (item.href) {
-                  e.preventDefault();
-                  handleNavClick(item.href);
-                }
-              }}
-              class="block px-3 py-2 rounded-lg transition-colors {isActive(
-                item.href
-              )
-                ? 'bg-claude-accent text-white dark:bg-claude-dark-accent'
-                : 'text-claude-text dark:text-claude-dark-text hover:bg-claude-bg-secondary dark:hover:bg-claude-dark-bg'}"
-            >
-              <span class="flex items-center gap-2">
-                {#if item.icon}
-                  <span class="text-sm">{item.icon}</span>
-                {/if}
-                <span class="text-sm font-medium">{item.label}</span>
-              </span>
-            </a>
-
-            <!-- Nested Items -->
-            {#if item.children && item.children.length > 0}
-              <div class="ml-3 space-y-1 border-l border-claude-border dark:border-claude-dark-border pl-3">
-                {#each item.children as child (child.label)}
-                  <a
-                    href={child.href || '#'}
-                    onclick={(e) => {
-                      if (child.href) {
-                        e.preventDefault();
-                        handleNavClick(child.href);
-                      }
-                    }}
-                    class="block px-3 py-1 text-xs rounded transition-colors {isActive(
-                      child.href
-                    )
-                      ? 'bg-claude-accent text-white dark:bg-claude-dark-accent'
-                      : 'text-claude-text-secondary dark:text-claude-dark-text-secondary hover:text-claude-text dark:hover:text-claude-dark-text'}"
-                  >
-                    {child.label}
-                  </a>
-                {/each}
-              </div>
-            {/if}
-          {/each}
-        </nav>
-      </div>
-    {/each}
-  </div>
-</aside>

package/src/lib/components/Tabs.test.ts

@@ -1,102 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-/**
- * Unit tests for Tabs component
- * Tests component structure and tab handling logic
- */
-
-describe('Tabs Component', () => {
-  describe('Tab Props', () => {
-    it('should accept array of tabs', () => {
-      const tabs = [
-        { label: 'Tab 1', content: 'Content 1' },
-        { label: 'Tab 2', content: 'Content 2' }
-      ];
-      expect(Array.isArray(tabs)).toBe(true);
-      expect(tabs.length).toBe(2);
-    });
-
-    it('should require label for each tab', () => {
-      const tab = { label: 'TypeScript', content: 'code' };
-      expect(tab.label).toBeDefined();
-      expect(typeof tab.label).toBe('string');
-    });
-
-    it('should accept optional default active tab index', () => {
-      const defaultActive = 0;
-      expect(typeof defaultActive).toBe('number');
-      expect(defaultActive).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  describe('Tab Structure', () => {
-    it('should maintain tab order', () => {
-      const tabs = [
-        { label: 'First', content: 'First content' },
-        { label: 'Second', content: 'Second content' },
-        { label: 'Third', content: 'Third content' }
-      ];
-      expect(tabs[0].label).toBe('First');
-      expect(tabs[1].label).toBe('Second');
-      expect(tabs[2].label).toBe('Third');
-    });
-
-    it('should allow empty tab list', () => {
-      const tabs: any[] = [];
-      expect(tabs.length).toBe(0);
-    });
-
-    it('should support single tab', () => {
-      const tabs = [{ label: 'Only Tab', content: 'Content' }];
-      expect(tabs.length).toBe(1);
-    });
-  });
-
-  describe('Tab Content', () => {
-    it('should support text content', () => {
-      const tab = { label: 'Info', content: 'This is text content' };
-      expect(typeof tab.content).toBe('string');
-    });
-
-    it('should support HTML content', () => {
-      const tab = { label: 'Code', content: '<pre>code</pre>' };
-      expect(tab.content).toContain('<');
-      expect(tab.content).toContain('>');
-    });
-
-    it('should support code blocks', () => {
-      const tab = {
-        label: 'JavaScript',
-        content: 'console.log("hello")'
-      };
-      expect(tab.label).toBeTruthy();
-      expect(tab.content).toBeTruthy();
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('should support keyboard navigation', () => {
-      const supportedKeys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
-      supportedKeys.forEach((key) => {
-        expect(supportedKeys).toContain(key);
-      });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper ARIA attributes', () => {
-      const role = 'tablist';
-      const tabRole = 'tab';
-      const panelRole = 'tabpanel';
-      
-      expect(role).toBe('tablist');
-      expect(tabRole).toBe('tab');
-      expect(panelRole).toBe('tabpanel');
-    });
-
-    it('should maintain tab index', () => {
-      const tabIndex = -1; // initially not in tab order
-      expect(typeof tabIndex).toBe('number');
-    });
-  });
-});

package/src/lib/config.test.ts

@@ -1,140 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { validateConfig, mergeConfig, DEFAULT_CONFIG } from './config';
-
-describe('Config Validation', () => {
-  it('should validate a valid config', () => {
-    const config = {
-      name: 'My Docs',
-      docsRoute: '/docs',
-      enableSearch: true,
-    };
-
-    const result = validateConfig(config);
-    expect(result.valid).toBe(true);
-    expect(result.errors).toHaveLength(0);
-  });
-
-  it('should reject non-object config', () => {
-    const result = validateConfig('invalid');
-    expect(result.valid).toBe(false);
-    expect(result.errors.length).toBeGreaterThan(0);
-  });
-
-  it('should validate docsRoute must be a string', () => {
-    const config = { docsRoute: 123 };
-    const result = validateConfig(config);
-    expect(result.valid).toBe(false);
-    expect(result.errors.some((e) => e.includes('docsRoute'))).toBe(true);
-  });
-
-  it('should validate docsRoute must start with /', () => {
-    const config = { docsRoute: 'docs' };
-    const result = validateConfig(config);
-    expect(result.valid).toBe(false);
-  });
-
-  it('should validate layout is one of the allowed values', () => {
-    const config = { layout: 'invalid' };
-    const result = validateConfig(config);
-    expect(result.valid).toBe(false);
-    expect(result.errors.some((e) => e.includes('layout'))).toBe(true);
-  });
-
-  it('should validate defaultTheme is light or dark', () => {
-    const config = { defaultTheme: 'blue' };
-    const result = validateConfig(config);
-    expect(result.valid).toBe(false);
-    expect(result.errors.some((e) => e.includes('defaultTheme'))).toBe(true);
-  });
-
-  it('should accept valid theme object', () => {
-    const config = {
-      theme: {
-        primary: '#ff0000',
-        secondary: '#00ff00',
-      },
-    };
-
-    const result = validateConfig(config);
-    expect(result.valid).toBe(true);
-  });
-
-  it('should reject invalid theme object', () => {
-    const config = { theme: 'not-an-object' };
-    const result = validateConfig(config);
-    expect(result.valid).toBe(false);
-  });
-});
-
-describe('Config Merging', () => {
-  it('should merge user config with defaults', () => {
-    const userConfig = { name: 'Custom Docs' };
-    const merged = mergeConfig(userConfig);
-
-    expect(merged.name).toBe('Custom Docs');
-    expect(merged.docsRoute).toBe(DEFAULT_CONFIG.docsRoute);
-    expect(merged.enableSearch).toBe(DEFAULT_CONFIG.enableSearch);
-  });
-
-  it('should override defaults with user values', () => {
-    const userConfig = {
-      docsRoute: '/help',
-      enableSearch: false,
-    };
-
-    const merged = mergeConfig(userConfig);
-    expect(merged.docsRoute).toBe('/help');
-    expect(merged.enableSearch).toBe(false);
-  });
-
-  it('should merge nested theme objects', () => {
-    const userConfig = {
-      theme: {
-        primary: '#ff0000',
-      },
-    };
-
-    const merged = mergeConfig(userConfig);
-    expect(merged.theme?.primary).toBe('#ff0000');
-    expect(merged.theme?.secondary).toBe(DEFAULT_CONFIG.theme?.secondary);
-  });
-
-  it('should merge nested navigation objects', () => {
-    const userConfig = {
-      navigation: {
-        title: 'Custom Nav',
-      },
-    };
-
-    const merged = mergeConfig(userConfig);
-    expect(merged.navigation?.title).toBe('Custom Nav');
-    expect(merged.navigation?.autoGenerate).toBe(DEFAULT_CONFIG.navigation?.autoGenerate);
-  });
-
-  it('should handle null/undefined values correctly', () => {
-    const userConfig: any = {
-      name: null,
-      docsRoute: undefined,
-    };
-
-    const merged = mergeConfig(userConfig);
-    expect(merged.name).toBeNull();
-    expect(merged.docsRoute).toBeUndefined();
-  });
-});
-
-describe('DEFAULT_CONFIG', () => {
-  it('should have a valid default configuration', () => {
-    const result = validateConfig(DEFAULT_CONFIG);
-    expect(result.valid).toBe(true);
-    expect(result.errors).toHaveLength(0);
-  });
-
-  it('should have sensible default values', () => {
-    expect(DEFAULT_CONFIG.docsRoute).toBe('/docs');
-    expect(DEFAULT_CONFIG.enableSearch).toBe(true);
-    expect(DEFAULT_CONFIG.darkMode).toBe(true);
-    expect(DEFAULT_CONFIG.breadcrumbs).toBe(true);
-    expect(DEFAULT_CONFIG.prevNext).toBe(true);
-  });
-});