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

package/src/lib/stores/theme.ts

@@ -1,167 +0,0 @@
-import { writable } from 'svelte/store';
-
-type Theme = 'light' | 'dark';
-
-/**
- * Detects if this app is embedded in a parent app by checking if window.parent exists
- * and is different from the current window.
- */
-function isEmbedded(): boolean {
-  if (typeof window === 'undefined') return false;
-  try {
-    return window.parent !== window && window.parent !== null;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Attempts to detect the parent app's theme by checking the parent window's
- * document.documentElement classList for the 'dark' class.
- */
-function getParentTheme(): Theme | null {
-  if (!isEmbedded()) return null;
-
-  try {
-    // Try to access parent's document to check for dark class
-    if (
-      window.parent &&
-      window.parent.document &&
-      window.parent.document.documentElement
-    ) {
-      const hasDarkClass =
-        window.parent.document.documentElement.classList.contains('dark');
-      return hasDarkClass ? 'dark' : 'light';
-    }
-  } catch (e) {
-    // Cross-origin or other access errors - fall back to other methods
-    console.debug('Unable to detect parent theme via document inspection:', e);
-  }
-
-  return null;
-}
-
-function createThemeStore() {
-  /**
-   * Initializes theme by:
-   * 1. Checking if embedded in parent app and inheriting parent's theme
-   * 2. Falling back to localStorage preference
-   * 3. Falling back to system preference
-   * 4. Defaulting to 'light'
-   */
-  const getInitialTheme = (): Theme => {
-    if (typeof window === 'undefined') {
-      return 'light'; // SSR default
-    }
-
-    // Priority 1: Check parent app theme if embedded
-    const parentTheme = getParentTheme();
-    if (parentTheme) {
-      return parentTheme;
-    }
-
-    // Priority 2: Check localStorage (user preference in standalone mode)
-    try {
-      const stored = localStorage?.getItem?.('theme') as Theme | null;
-      if (stored) {
-        return stored;
-      }
-    } catch (e) {
-      // localStorage may not be available in some environments
-    }
-
-    // Priority 3: Check system preference
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-
-    return 'light';
-  };
-
-  const { subscribe, set, update } = writable<Theme>(getInitialTheme());
-
-  // Set up listener for parent theme changes when embedded
-  if (typeof window !== 'undefined' && isEmbedded()) {
-    try {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (
-            mutation.type === 'attributes' &&
-            mutation.attributeName === 'class' &&
-            mutation.target === window.parent?.document?.documentElement
-          ) {
-            // Parent's dark class changed, update our theme
-            const parentTheme = getParentTheme();
-            if (parentTheme) {
-              const currentTheme: Theme = parentTheme;
-              applyTheme(currentTheme);
-              set(currentTheme);
-            }
-          }
-        });
-      });
-
-      // Watch for class changes on parent's documentElement
-      if (window.parent?.document?.documentElement) {
-        observer.observe(window.parent.document.documentElement, {
-          attributes: true,
-          attributeFilter: ['class'],
-        });
-      }
-    } catch (e) {
-      console.debug(
-        'Could not set up parent theme listener (may be cross-origin):',
-        e
-      );
-    }
-  }
-
-  /**
-   * Applies theme to the document by adding/removing the 'dark' class
-   */
-  const applyTheme = (theme: Theme) => {
-    if (typeof window === 'undefined') return;
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  };
-
-  return {
-    subscribe,
-    set: (theme: Theme) => {
-      if (typeof window !== 'undefined') {
-        // Only save to localStorage if not embedded (standalone mode)
-        if (!isEmbedded()) {
-          try {
-            localStorage?.setItem?.('theme', theme);
-          } catch (e) {
-            // localStorage may not be available
-          }
-        }
-        applyTheme(theme);
-      }
-      set(theme);
-    },
-    toggle: () => {
-      update((theme) => {
-        const newTheme = theme === 'dark' ? 'light' : 'dark';
-        if (typeof window !== 'undefined') {
-          // Only save to localStorage if not embedded (standalone mode)
-          if (!isEmbedded()) {
-            try {
-              localStorage?.setItem?.('theme', newTheme);
-            } catch (e) {
-              // localStorage may not be available
-            }
-          }
-          applyTheme(newTheme);
-        }
-        return newTheme;
-      });
-    },
-  };
-}
-
-export const theme = createThemeStore();

package/src/lib/stores/version.test.ts

@@ -1,139 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { version } from './version';
-
-// Mock localStorage
-const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-
-  return {
-    getItem: (key: string) => store[key] || null,
-    setItem: (key: string, value: string) => {
-      store[key] = value.toString();
-    },
-    removeItem: (key: string) => {
-      delete store[key];
-    },
-    clear: () => {
-      store = {};
-    },
-  };
-})();
-
-Object.defineProperty(window, 'localStorage', {
-  value: localStorageMock,
-});
-
-describe('version store', () => {
-  beforeEach(() => {
-    localStorage.clear();
-  });
-
-  it('should initialize with default version', () => {
-    let currentVersion = '';
-    const unsubscribe = version.subscribe((config) => {
-      currentVersion = config.current;
-    });
-
-    expect(currentVersion).toBe('2.0');
-    unsubscribe();
-  });
-
-  it('should have multiple versions available', () => {
-    let versions = [];
-    const unsubscribe = version.subscribe((config) => {
-      versions = config.availableVersions.map((v) => v.version);
-    });
-
-    expect(versions).toContain('2.0');
-    expect(versions).toContain('1.5');
-    expect(versions).toContain('1.0');
-    expect(versions.length).toBe(3);
-    unsubscribe();
-  });
-
-  it('should mark v2.0 as latest', () => {
-    let latestVersion = null;
-    const unsubscribe = version.subscribe((config) => {
-      const latest = config.availableVersions.find((v) => v.isLatest);
-      latestVersion = latest?.version;
-    });
-
-    expect(latestVersion).toBe('2.0');
-    unsubscribe();
-  });
-
-  it('should allow changing version', () => {
-    let currentVersion = '';
-    const unsubscribe = version.subscribe((config) => {
-      currentVersion = config.current;
-    });
-
-    version.setVersion('1.5');
-    expect(currentVersion).toBe('1.5');
-
-    version.setVersion('1.0');
-    expect(currentVersion).toBe('1.0');
-
-    unsubscribe();
-  });
-
-  it('should persist version preference to localStorage', () => {
-    version.setVersion('1.5');
-    expect(localStorage.getItem('docs-version')).toBe('1.5');
-
-    version.setVersion('1.0');
-    expect(localStorage.getItem('docs-version')).toBe('1.0');
-  });
-
-  it('should ignore setting invalid version', () => {
-    let currentVersion = '';
-    const unsubscribe = version.subscribe((config) => {
-      currentVersion = config.current;
-    });
-
-    const initialVersion = currentVersion;
-    version.setVersion('99.0');
-    expect(currentVersion).toBe(initialVersion);
-
-    unsubscribe();
-  });
-
-  it('should allow adding new versions', () => {
-    let versions = [];
-    const unsubscribe = version.subscribe((config) => {
-      versions = config.availableVersions.map((v) => v.version);
-    });
-
-    version.addVersion({
-      version: '3.0',
-      label: 'v3.0',
-      isLatest: false,
-      status: 'beta',
-    });
-
-    expect(versions).toContain('3.0');
-    unsubscribe();
-  });
-
-  it('should allow removing versions', () => {
-    let versions = [];
-    const unsubscribe = version.subscribe((config) => {
-      versions = config.availableVersions.map((v) => v.version);
-    });
-
-    const initialCount = versions.length;
-    version.removeVersion('1.0');
-
-    expect(versions.length).toBe(initialCount - 1);
-    expect(versions).not.toContain('1.0');
-    unsubscribe();
-  });
-
-  it('should retrieve version metadata', () => {
-    const metadata = version.getVersionMetadata('2.0');
-    expect(metadata).toBeDefined();
-    expect(metadata?.version).toBe('2.0');
-    expect(metadata?.isLatest).toBe(true);
-    expect(metadata?.status).toBe('stable');
-  });
-});

package/src/lib/stores/version.ts

@@ -1,111 +0,0 @@
-import { writable } from 'svelte/store';
-
-export interface VersionMetadata {
-  version: string;
-  label: string;
-  isLatest: boolean;
-  releaseDate?: string;
-  status?: 'stable' | 'beta' | 'deprecated';
-}
-
-export interface VersionConfig {
-  current: string;
-  availableVersions: VersionMetadata[];
-}
-
-function createVersionStore() {
-  // Default version configuration
-  const defaultConfig: VersionConfig = {
-    current: '2.0',
-    availableVersions: [
-      {
-        version: '2.0',
-        label: 'v2.0 (Latest)',
-        isLatest: true,
-        releaseDate: '2026-02-04',
-        status: 'stable',
-      },
-      {
-        version: '1.5',
-        label: 'v1.5',
-        isLatest: false,
-        releaseDate: '2025-12-01',
-        status: 'stable',
-      },
-      {
-        version: '1.0',
-        label: 'v1.0 (Archive)',
-        isLatest: false,
-        releaseDate: '2025-10-01',
-        status: 'deprecated',
-      },
-    ],
-  };
-
-  const getInitialVersion = (): string => {
-    if (typeof window === 'undefined') {
-      return defaultConfig.current;
-    }
-
-    try {
-      // Check localStorage for stored version preference
-      const stored = localStorage?.getItem?.('docs-version');
-      if (stored) {
-        return stored;
-      }
-    } catch (e) {
-      // localStorage may not be available in some environments
-    }
-
-    return defaultConfig.current;
-  };
-
-  const { subscribe, set, update } = writable<VersionConfig>({
-    ...defaultConfig,
-    current: getInitialVersion(),
-  });
-
-  return {
-    subscribe,
-    setVersion: (version: string) => {
-      update((config) => {
-        if (config.availableVersions.some((v) => v.version === version)) {
-          if (typeof window !== 'undefined') {
-            try {
-              localStorage?.setItem?.('docs-version', version);
-            } catch (e) {
-              // localStorage may not be available
-            }
-          }
-          return { ...config, current: version };
-        }
-        return config;
-      });
-    },
-    addVersion: (metadata: VersionMetadata) => {
-      update((config) => ({
-        ...config,
-        availableVersions: [
-          ...config.availableVersions.filter((v) => v.version !== metadata.version),
-          metadata,
-        ],
-      }));
-    },
-    removeVersion: (version: string) => {
-      update((config) => ({
-        ...config,
-        availableVersions: config.availableVersions.filter((v) => v.version !== version),
-      }));
-    },
-    getVersionMetadata: (version: string): VersionMetadata | undefined => {
-      let metadata: VersionMetadata | undefined;
-      const unsubscribe = subscribe((config) => {
-        metadata = config.availableVersions.find((v) => v.version === version);
-      });
-      unsubscribe();
-      return metadata;
-    },
-  };
-}
-
-export const version = createVersionStore();

package/src/lib/themeCustomization.test.ts

@@ -1,223 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-  generateCSSVariables,
-  createCSSVariablesStylesheet,
-  parseColor,
-  validateTheme,
-  mergeThemes,
-  getThemeTemplate,
-} from './themeCustomization';
-
-describe('Theme Customization', () => {
-  describe('generateCSSVariables', () => {
-    it('should generate CSS variables from theme config', () => {
-      const theme = {
-        primary: '#ff0000',
-        secondary: '#00ff00',
-        fontFamily: 'Arial',
-      };
-
-      const vars = generateCSSVariables(theme);
-      expect(vars['--color-primary']).toBe('#ff0000');
-      expect(vars['--color-secondary']).toBe('#00ff00');
-      expect(vars['--font-family-body']).toBe('Arial');
-    });
-
-    it('should skip undefined values', () => {
-      const theme = { primary: '#ff0000' };
-      const vars = generateCSSVariables(theme);
-
-      expect(Object.keys(vars)).toContain('--color-primary');
-      expect(Object.keys(vars)).not.toContain('--color-secondary');
-    });
-
-    it('should handle all color properties', () => {
-      const theme = {
-        primary: '#1',
-        secondary: '#2',
-        textLight: '#3',
-        textDark: '#4',
-        bgLight: '#5',
-        bgDark: '#6',
-        sidebarBg: '#7',
-        navbarBg: '#8',
-        codeBg: '#9',
-      };
-
-      const vars = generateCSSVariables(theme);
-      expect(Object.keys(vars)).toHaveLength(9);
-    });
-
-    it('should handle all font properties', () => {
-      const theme = {
-        fontFamily: 'sans-serif',
-        headingFont: 'serif',
-      };
-
-      const vars = generateCSSVariables(theme);
-      expect(vars['--font-family-body']).toBe('sans-serif');
-      expect(vars['--font-family-heading']).toBe('serif');
-    });
-  });
-
-  describe('createCSSVariablesStylesheet', () => {
-    it('should create valid CSS string', () => {
-      const vars = { '--color-primary': '#ff0000' };
-      const css = createCSSVariablesStylesheet(vars);
-
-      expect(css).toContain(':root');
-      expect(css).toContain('--color-primary: #ff0000');
-    });
-
-    it('should include multiple variables', () => {
-      const vars = {
-        '--color-primary': '#ff0000',
-        '--color-secondary': '#00ff00',
-      };
-
-      const css = createCSSVariablesStylesheet(vars);
-      expect(css).toContain('--color-primary');
-      expect(css).toContain('--color-secondary');
-    });
-  });
-
-  describe('parseColor', () => {
-    it('should parse hex colors', () => {
-      expect(parseColor('#ff0000').valid).toBe(true);
-      expect(parseColor('#f00').valid).toBe(true);
-      expect(parseColor('#ff0000aa').valid).toBe(true);
-    });
-
-    it('should parse RGB colors', () => {
-      expect(parseColor('rgb(255, 0, 0)').valid).toBe(true);
-      expect(parseColor('rgba(255, 0, 0, 0.5)').valid).toBe(true);
-    });
-
-    it('should parse named colors', () => {
-      expect(parseColor('red').valid).toBe(true);
-      expect(parseColor('blue').valid).toBe(true);
-      expect(parseColor('transparent').valid).toBe(true);
-    });
-
-    it('should parse CSS variables', () => {
-      expect(parseColor('var(--color-primary)').valid).toBe(true);
-    });
-
-    it('should reject invalid colors', () => {
-      expect(parseColor('invalid').valid).toBe(false);
-      expect(parseColor('#').valid).toBe(false);
-      expect(parseColor('').valid).toBe(false);
-    });
-
-    it('should return error message for invalid colors', () => {
-      const result = parseColor('not-a-color');
-      expect(result.valid).toBe(false);
-      expect(result.error).toBeDefined();
-    });
-  });
-
-  describe('validateTheme', () => {
-    it('should validate valid theme', () => {
-      const theme = {
-        primary: '#ff0000',
-        secondary: 'blue',
-        fontFamily: 'Arial',
-      };
-
-      const result = validateTheme(theme);
-      expect(result.valid).toBe(true);
-      expect(result.errors).toHaveLength(0);
-    });
-
-    it('should reject non-object theme', () => {
-      const result = validateTheme('not-object' as any);
-      expect(result.valid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
-    });
-
-    it('should validate all color fields', () => {
-      const theme = {
-        primary: 'invalid-color',
-      };
-
-      const result = validateTheme(theme);
-      expect(result.valid).toBe(false);
-      expect(result.errors.some((e) => e.includes('primary'))).toBe(true);
-    });
-
-    it('should validate font fields are strings', () => {
-      const theme = {
-        fontFamily: 123 as any,
-      };
-
-      const result = validateTheme(theme);
-      expect(result.valid).toBe(false);
-      expect(result.errors.some((e) => e.includes('fontFamily'))).toBe(true);
-    });
-  });
-
-  describe('mergeThemes', () => {
-    it('should merge two themes with priority to first', () => {
-      const primary = { primary: '#ff0000' };
-      const secondary = { primary: '#00ff00', secondary: '#0000ff' };
-
-      const merged = mergeThemes(primary, secondary);
-      expect(merged.primary).toBe('#ff0000');
-      expect(merged.secondary).toBe('#0000ff');
-    });
-
-    it('should handle undefined values', () => {
-      const primary = { primary: '#ff0000' };
-      const secondary = { secondary: '#00ff00' };
-
-      const merged = mergeThemes(primary, secondary);
-      expect(merged.primary).toBe('#ff0000');
-      expect(merged.secondary).toBe('#00ff00');
-    });
-  });
-
-  describe('getThemeTemplate', () => {
-    it('should return default theme', () => {
-      const theme = getThemeTemplate('default');
-      expect(theme.primary).toBeDefined();
-      expect(theme.fontFamily).toBeDefined();
-    });
-
-    it('should return dark theme', () => {
-      const theme = getThemeTemplate('dark');
-      expect(theme.primary).toBeDefined();
-      // Dark theme might have different colors
-      expect(theme.bgDark).toBeDefined();
-    });
-
-    it('should return minimal theme', () => {
-      const theme = getThemeTemplate('minimal');
-      expect(theme.primary).toBe('#000000');
-    });
-
-    it('should return colorful theme', () => {
-      const theme = getThemeTemplate('colorful');
-      expect(theme.primary).toBe('#ff006e');
-    });
-
-    it('should default to default theme if invalid', () => {
-      const theme = getThemeTemplate('invalid' as any);
-      expect(theme).toEqual(getThemeTemplate('default'));
-    });
-
-    it('should return default if not specified', () => {
-      const theme = getThemeTemplate();
-      expect(theme).toEqual(getThemeTemplate('default'));
-    });
-
-    it('all theme templates should be valid', () => {
-      const templates = ['default', 'dark', 'minimal', 'colorful'] as const;
-
-      templates.forEach((templateName) => {
-        const theme = getThemeTemplate(templateName);
-        const result = validateTheme(theme);
-        expect(result.valid).toBe(true);
-      });
-    });
-  });
-});