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

package/template-starter/src/lib/components/Tabs.test.ts

@@ -1,89 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-/**
- * Unit tests for Tabs component
- * Tests component configuration and prop handling
- */
-
-describe('Tabs Component', () => {
-  describe('Props', () => {
-    it('renders all tab buttons', () => {
-      const items = [
-        { label: 'Tab 1', content: 'Content 1' },
-        { label: 'Tab 2', content: 'Content 2' }
-      ];
-
-      const labels = items.map((item) => item.label);
-      expect(labels).toContain('Tab 1');
-      expect(labels).toContain('Tab 2');
-    });
-
-    it('should accept items array prop', () => {
-      const items = [
-        { label: 'Overview', content: 'Overview content' },
-        { label: 'API', content: 'API content' }
-      ];
-      expect(Array.isArray(items)).toBe(true);
-      expect(items.length).toBeGreaterThan(0);
-      expect(items[0]).toHaveProperty('label');
-      expect(items[0]).toHaveProperty('content');
-    });
-
-    it('should have tab labels and content', () => {
-      const items = [
-        { label: 'Tab 1', content: 'Content 1' },
-        { label: 'Tab 2', content: 'Content 2' }
-      ];
-      items.forEach((item) => {
-        expect(item.label).toBeTruthy();
-        expect(item.content).toBeTruthy();
-      });
-    });
-
-    it('should display correct tab labels', () => {
-      const items = [
-        { label: 'Introduction', content: 'Intro content' },
-        { label: 'Installation', content: 'Install content' },
-        { label: 'Usage', content: 'Usage content' }
-      ];
-      const labels = items.map((item) => item.label);
-      expect(labels).toContain('Introduction');
-      expect(labels).toContain('Installation');
-      expect(labels).toContain('Usage');
-    });
-  });
-
-  describe('Functionality', () => {
-    it('should track selected tab', () => {
-      let selectedIndex = 0;
-      const items = [
-        { label: 'Tab 1', content: 'Content 1' },
-        { label: 'Tab 2', content: 'Content 2' }
-      ];
-      expect(selectedIndex).toBeGreaterThanOrEqual(0);
-      expect(selectedIndex).toBeLessThan(items.length);
-    });
-
-    it('should support switching between tabs', () => {
-      const items = [
-        { label: 'Tab 1', content: 'Content 1' },
-        { label: 'Tab 2', content: 'Content 2' },
-        { label: 'Tab 3', content: 'Content 3' }
-      ];
-      const currentTab = 1;
-      expect(currentTab).toBeGreaterThanOrEqual(0);
-      expect(currentTab).toBeLessThan(items.length);
-      expect(items[currentTab].label).toBe('Tab 2');
-    });
-
-    it('should handle single tab', () => {
-      const items = [{ label: 'Single Tab', content: 'Content' }];
-      expect(items.length).toBe(1);
-    });
-
-    it('should be accessible with keyboard navigation', () => {
-      const navigableKeys = ['Enter', 'Space', 'ArrowLeft', 'ArrowRight'];
-      expect(navigableKeys.length).toBeGreaterThan(0);
-    });
-  });
-});

package/template-starter/src/routes/+layout.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import '../app.css';
-
-	let { children } = $props();
-</script>
-
-<svelte:window
-	on:resize={() => {
-		// Handle window resize if needed
-	}}
-/>
-
-<div class="app">
-	{@render children?.()}
-</div>
-
-<style>
-	:global(body) {
-		margin: 0;
-		padding: 0;
-	}
-
-	.app {
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh;
-	}
-</style>

package/template-starter/src/routes/+page.svelte

@@ -1,92 +0,0 @@
-<script>
-  // Home page for documentation starter
-</script>
-
-<main class="mx-auto max-w-4xl px-6 py-12">
-  <div class="mb-12">
-    <h1 class="mb-4 text-5xl font-bold">Documentation Starter</h1>
-    <p class="mb-6 text-xl text-gray-600">
-      Welcome to your documentation site built with Svelte Docs System.
-    </p>
-    <p class="text-lg text-gray-500">
-      Edit the <code class="rounded bg-gray-100 px-2 py-1 font-mono">docs/</code> folder to add your documentation content.
-    </p>
-  </div>
-
-  <section class="mb-12">
-    <h2 class="mb-4 text-3xl font-bold">Getting Started</h2>
-    <div class="space-y-4">
-      <div class="rounded-lg border border-gray-200 p-6">
-        <h3 class="mb-2 font-semibold">📝 Add Documentation</h3>
-        <p class="text-gray-600">Create markdown files in the <code class="font-mono">docs/</code> folder and they'll automatically be added to your site.</p>
-      </div>
-      <div class="rounded-lg border border-gray-200 p-6">
-        <h3 class="mb-2 font-semibold">⚙️ Configure Navigation</h3>
-        <p class="text-gray-600">Edit <code class="font-mono">docs/_config.json</code> to customize the sidebar navigation structure.</p>
-      </div>
-      <div class="rounded-lg border border-gray-200 p-6">
-        <h3 class="mb-2 font-semibold">🎨 Customize Styling</h3>
-        <p class="text-gray-600">Update <code class="font-mono">tailwind.config.ts</code> and CSS files to match your brand.</p>
-      </div>
-    </div>
-  </section>
-
-  <section class="mb-12">
-    <h2 class="mb-4 text-3xl font-bold">Available Scripts</h2>
-    <ul class="space-y-2 text-gray-700">
-      <li><code class="font-mono">npm run dev</code> - Start development server</li>
-      <li><code class="font-mono">npm run build</code> - Build for production</li>
-      <li><code class="font-mono">npm run preview</code> - Preview production build</li>
-      <li><code class="font-mono">npm run check</code> - Type check and lint</li>
-    </ul>
-  </section>
-
-  <section>
-    <h2 class="mb-4 text-3xl font-bold">Learn More</h2>
-    <p class="text-gray-700">
-      Check the documentation in the <code class="font-mono">docs/</code> folder to learn how to use all available features.
-    </p>
-  </section>
-</main>
-
-<style>
-  :global(body) {
-    background-color: white;
-    color: #333;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  }
-
-  :global(.dark) :global(body) {
-    background-color: #030712;
-    color: #f3f4f6;
-  }
-
-  main {
-    max-width: 56rem;
-    margin: 0 auto;
-  }
-
-  h1 {
-    color: #111827;
-  }
-
-  :global(.dark) h1 {
-    color: white;
-  }
-
-  h2 {
-    color: #111827;
-  }
-
-  :global(.dark) h2 {
-    color: white;
-  }
-
-  code {
-    color: #dc2626;
-  }
-
-  :global(.dark) code {
-    color: #fca5a5;
-  }
-</style>

package/template-starter/svelte.config.js

@@ -1,17 +0,0 @@
-import adapter from '@sveltejs/adapter-static';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-  kit: {
-    adapter: adapter({
-      pages: 'build',
-      assets: 'build',
-      fallback: 'index.html'
-    }),
-    prerender: {
-      entries: ['*']
-    }
-  }
-};
-
-export default config;

package/template-starter/tailwind.config.ts

@@ -1,17 +0,0 @@
-export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  theme: {
-    extend: {
-      colors: {
-        'docs': {
-          'primary': '#3b82f6',
-          'dark': '#1f2937',
-          'light': '#f9fafb',
-          'border': '#e5e7eb'
-        }
-      }
-    }
-  },
-  plugins: [],
-  darkMode: 'class'
-};

package/template-starter/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true
-  }
-}

package/template-starter/vite.config.ts

@@ -1,6 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [sveltekit()]
-});

package/tests/e2e/example.spec.ts

@@ -1,345 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-/**
- * Example E2E Tests
- * Demonstrates the structure of E2E tests for Svelte Docs System
- * 
- * Note: These tests require Playwright to be installed
- * Run with: npm run test:e2e
- */
-
-test.describe('Documentation System E2E', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the documentation homepage before each test
-    await page.goto('/');
-  });
-
-  test.describe('Navigation', () => {
-    test('should navigate between pages', async ({ page }) => {
-      // Find and click a navigation link
-      await page.click('a[href="/docs/guides"]');
-
-      // Wait for navigation and verify page content
-      await page.waitForURL('/docs/guides');
-      expect(page.url()).toContain('/docs/guides');
-
-      // Verify content loaded
-      const heading = await page.locator('h1');
-      await expect(heading).toBeVisible();
-    });
-
-    test('should display breadcrumbs', async ({ page }) => {
-      await page.goto('/docs/guides/getting-started');
-
-      // Check breadcrumb structure
-      const breadcrumbs = page.locator('[role="navigation"] a');
-      const count = await breadcrumbs.count();
-
-      expect(count).toBeGreaterThan(0);
-
-      // Verify breadcrumb content
-      const lastBreadcrumb = breadcrumbs.nth(count - 1);
-      await expect(lastBreadcrumb).toContainText(/Getting Started|getting-started/i);
-    });
-
-    test('should update active navigation item', async ({ page }) => {
-      const navItem = page.locator('nav a').first();
-
-      await navItem.click();
-      await page.waitForLoadState('networkidle');
-
-      // Check if active class is applied
-      const activeItem = page.locator('nav a.active, nav a[aria-current]').first();
-      await expect(activeItem).toBeVisible();
-    });
-  });
-
-  test.describe('Search', () => {
-    test('should search and display results', async ({ page }) => {
-      // Click search input
-      const searchInput = page.locator('input[placeholder*="Search"]');
-      await searchInput.click();
-
-      // Type search query
-      await searchInput.fill('getting started');
-
-      // Wait for results to appear
-      const searchResults = page.locator('[role="listbox"], .search-results');
-      await expect(searchResults).toBeVisible();
-
-      // Verify results contain the query
-      const resultItems = page.locator('[role="option"], .search-result-item');
-      expect(await resultItems.count()).toBeGreaterThan(0);
-    });
-
-    test('should navigate to search result', async ({ page }) => {
-      const searchInput = page.locator('input[placeholder*="Search"]');
-      await searchInput.fill('API');
-
-      // Wait for results and click first one
-      const firstResult = page.locator('[role="option"], .search-result-item').first();
-      await firstResult.click();
-
-      // Verify navigation happened
-      await page.waitForLoadState('networkidle');
-      expect(page.url()).toContain('/');
-    });
-
-    test('should show no results message', async ({ page }) => {
-      const searchInput = page.locator('input[placeholder*="Search"]');
-      await searchInput.fill('xyzabc123notarealterm');
-
-      // Wait a bit for search to complete
-      await page.waitForTimeout(500);
-
-      // Check for no results message
-      const noResultsMsg = page.locator('text=/No results|nothing found/i');
-      await expect(noResultsMsg).toBeVisible();
-    });
-  });
-
-  test.describe('Dark Mode', () => {
-    test('should toggle dark mode', async ({ page }) => {
-      // Find and click dark mode toggle
-      const darkModeToggle = page.locator('[aria-label*="Dark"], [aria-label*="Theme"]');
-
-      // Get initial state
-      const htmlElement = page.locator('html');
-      const initialClass = await htmlElement.getAttribute('class');
-
-      // Click toggle
-      await darkModeToggle.click();
-
-      // Verify class changed
-      const newClass = await htmlElement.getAttribute('class');
-      expect(newClass).not.toBe(initialClass);
-    });
-
-    test('should persist dark mode preference', async ({ page, context }) => {
-      // Enable dark mode
-      const toggle = page.locator('[aria-label*="Dark"], [aria-label*="Theme"]');
-      await toggle.click();
-
-      // Verify it's enabled
-      const htmlElement = page.locator('html');
-      const isDarkMode = (await htmlElement.getAttribute('class'))?.includes('dark');
-      expect(isDarkMode).toBeTruthy();
-
-      // Reload page
-      await page.reload();
-
-      // Verify dark mode still active
-      const isDarkModeAfterReload = (
-        await htmlElement.getAttribute('class')
-      )?.includes('dark');
-      expect(isDarkModeAfterReload).toBeTruthy();
-    });
-
-    test('should have readable text in dark mode', async ({ page }) => {
-      // Enable dark mode
-      const toggle = page.locator('[aria-label*="Dark"], [aria-label*="Theme"]');
-      await toggle.click();
-
-      // Get text color and background color
-      const mainContent = page.locator('main').first();
-
-      const styles = await mainContent.evaluate((el) => {
-        const computed = window.getComputedStyle(el);
-        return {
-          color: computed.color,
-          backgroundColor: computed.backgroundColor
-        };
-      });
-
-      // Verify colors are defined
-      expect(styles.color).toBeTruthy();
-      expect(styles.backgroundColor).toBeTruthy();
-    });
-  });
-
-  test.describe('Responsive Design', () => {
-    test('should show mobile menu on small screens', async ({ page }) => {
-      // Set mobile viewport
-      await page.setViewportSize({ width: 375, height: 667 });
-
-      // Look for hamburger menu
-      const hamburgerMenu = page.locator('[aria-label*="Menu"], [aria-label*="Navigation"]');
-      await expect(hamburgerMenu).toBeVisible();
-
-      // Click hamburger
-      await hamburgerMenu.click();
-
-      // Verify menu opens
-      const mobileNav = page.locator('nav').first();
-      await expect(mobileNav).toBeVisible();
-    });
-
-    test('should show sidebar on desktop', async ({ page }) => {
-      // Set desktop viewport
-      await page.setViewportSize({ width: 1440, height: 900 });
-
-      // Sidebar should be visible
-      const sidebar = page.locator('aside, nav');
-      await expect(sidebar.first()).toBeVisible();
-    });
-  });
-
-  test.describe('Accessibility', () => {
-    test('should be keyboard navigable', async ({ page }) => {
-      // Tab through page elements
-      const firstButton = page.locator('button').first();
-
-      // Initially should not have focus
-      let hasFocus = await firstButton.evaluate((el) => el === document.activeElement);
-      expect(hasFocus).toBeFalsy();
-
-      // Press Tab and verify focus appears
-      await page.keyboard.press('Tab');
-
-      // Check if any element has focus
-      const focusedElement = await page.evaluate(() => {
-        return document.activeElement?.tagName;
-      });
-
-      expect(focusedElement).toBeTruthy();
-    });
-
-    test('should have alt text for images', async ({ page }) => {
-      const images = page.locator('img');
-
-      const count = await images.count();
-      if (count > 0) {
-        // Get alt text of first image
-        const altText = await images.first().getAttribute('alt');
-
-        // Should have alt text (if decorative, should be empty intentionally)
-        expect(altText).not.toBeNull();
-      }
-    });
-
-    test('should have proper heading hierarchy', async ({ page }) => {
-      const h1Count = await page.locator('h1').count();
-      const h2s = await page.locator('h2').count();
-
-      // Page should have exactly one h1
-      expect(h1Count).toBe(1);
-
-      // h2s should exist (if multiple sections)
-      // This is flexible as some pages might not have subsections
-      expect(h2s).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  test.describe('Content Display', () => {
-    test('should render markdown content', async ({ page }) => {
-      // Navigate to a content page
-      await page.goto('/docs');
-
-      // Wait for main content to load
-      const mainContent = page.locator('main, article').first();
-      await expect(mainContent).toBeVisible();
-
-      // Verify content exists
-      const text = await mainContent.textContent();
-      expect(text).toBeTruthy();
-      expect(text?.length).toBeGreaterThan(0);
-    });
-
-    test('should display code blocks with syntax highlighting', async ({ page }) => {
-      const codeBlocks = page.locator('pre, code');
-
-      if (await codeBlocks.count() > 0) {
-        const firstCode = codeBlocks.first();
-        await expect(firstCode).toBeVisible();
-
-        // Verify code content
-        const content = await firstCode.textContent();
-        expect(content).toBeTruthy();
-      }
-    });
-
-    test('should have functional copy button on code blocks', async ({ page }) => {
-      const codeBlock = page.locator('pre').first();
-
-      if (await codeBlock.isVisible()) {
-        const copyButton = page
-          .locator('button')
-          .filter({ hasText: /Copy|copy/ })
-          .first();
-
-        if (await copyButton.isVisible()) {
-          // Click copy button
-          await copyButton.click();
-
-          // Verify some feedback (success message, button state change, etc.)
-          const successMsg = page.locator('text=/copied|success/i').first();
-          await expect(successMsg).toBeVisible({ timeout: 2000 });
-        }
-      }
-    });
-  });
-
-  test.describe('Performance', () => {
-    test('should load page within acceptable time', async ({ page }) => {
-      const startTime = Date.now();
-
-      await page.goto('/');
-      await page.waitForLoadState('networkidle');
-
-      const loadTime = Date.now() - startTime;
-
-      // Page should load within 3 seconds
-      expect(loadTime).toBeLessThan(3000);
-    });
-
-    test('should have good Core Web Vitals', async ({ page }) => {
-      await page.goto('/');
-
-      const vitals = await page.evaluate(() => {
-        return new Promise<any>((resolve) => {
-          let lcp = 0;
-          let cls = 0;
-
-          const observer = new PerformanceObserver((list) => {
-            for (const entry of list.getEntries()) {
-              if ((entry as any).name === 'largest-contentful-paint') {
-                lcp = (entry as any).renderTime || (entry as any).loadTime;
-              } else if ((entry as any).hadRecentInput === false) {
-                cls += (entry as any).value;
-              }
-            }
-          });
-
-          observer.observe({ entryTypes: ['largest-contentful-paint', 'layout-shift'] });
-
-          setTimeout(() => {
-            observer.disconnect();
-            resolve({ lcp, cls });
-          }, 3000);
-        });
-      });
-
-      // LCP should be less than 2.5 seconds
-      expect(vitals.lcp).toBeLessThan(2500);
-
-      // CLS should be less than 0.1
-      expect(vitals.cls).toBeLessThan(0.1);
-    });
-  });
-});
-
-test.describe('Error Handling', () => {
-  test('should show 404 page for non-existent routes', async ({ page }) => {
-    await page.goto('/docs/this-page-does-not-exist-123');
-
-    // Should see 404 message or not found page
-    const notFoundMsg = page.locator('text=/404|not found|does not exist/i');
-
-    // Try to find error message
-    const hasError =
-      (await notFoundMsg.count()) > 0 ||
-      page.url().includes('404');
-
-    expect(hasError).toBeTruthy();
-  });
-});

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"rewriteRelativeImportExtensions": true,
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler"
-	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// To make changes to top-level options such as include and exclude, we recommend extending
-	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
-}

package/vite.config.ts

@@ -1,6 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [sveltekit()]
-});

package/vitest.config.ts

@@ -1,33 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import { sveltekit } from '@sveltejs/kit/vite';
-
-export default defineConfig({
-  plugins: [sveltekit()],
-  test: {
-    globals: true,
-    environment: 'happy-dom',
-    setupFiles: ['./vitest.setup.ts'],
-    // Ensure we use browser build of Svelte - force conditions for client-side rendering
-    conditions: ['browser', 'import', 'module'],
-    singleThread: true,
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html', 'lcov'],
-      exclude: [
-        'node_modules/',
-        'dist/',
-        'build/',
-        'coverage/',
-        '**/*.test.ts',
-        '**/*.spec.ts',
-        'tests/',
-        'template-starter/'
-      ],
-      include: ['src/lib/**/*.ts', 'src/lib/**/*.svelte'],
-      lines: 85,
-      functions: 85,
-      branches: 80,
-      statements: 85
-    }
-  }
-});