@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/styles/fetchTheme.test.ts

@@ -1,390 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { fetchAndApplyTheme, fetchAssets, fetchTheme } from './fetchTheme';
-import type { AssetsResponse, ThemeConfig } from './themeTypes';
-
-const mockApiGet = vi.fn();
-const mockFetch = vi.fn();
-
-vi.mock('@incodetech/core', () => ({
-  api: {
-    get: (...args: unknown[]) => mockApiGet(...args),
-  },
-}));
-
-global.fetch = mockFetch as typeof fetch;
-
-class MockFileReaderClass {
-  result = '';
-  onloadend: (() => void) | null = null;
-  onerror: ((error: Event) => void) | null = null;
-  readAsDataURL = vi.fn((_blob: Blob) => {
-    const mockResult = (global as { __mockFileReaderResult?: string })
-      .__mockFileReaderResult;
-    if (mockResult) {
-      this.result = mockResult;
-    }
-    setTimeout(() => {
-      if (this.onloadend) {
-        this.onloadend();
-      }
-    }, 0);
-  });
-
-  constructor() {
-    const mockResult = (global as { __mockFileReaderResult?: string })
-      .__mockFileReaderResult;
-    if (mockResult) {
-      this.result = mockResult;
-    }
-  }
-}
-
-global.FileReader = MockFileReaderClass as unknown as typeof FileReader;
-
-describe('fetchTheme', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    (global as { __mockFileReaderResult?: string }).__mockFileReaderResult =
-      undefined;
-    const styleElement = document.getElementById('incode-theme');
-    if (styleElement) {
-      styleElement.remove();
-    }
-  });
-
-  describe('fetchAssets', () => {
-    it('should fetch assets from API', async () => {
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-        'logo.png': 'https://example.com/logo.png',
-      };
-
-      mockApiGet.mockResolvedValueOnce({
-        data: mockAssets,
-      });
-
-      const result = await fetchAssets();
-
-      expect(mockApiGet).toHaveBeenCalledWith('/omni/asset/fetch-all');
-      expect(result).toEqual(mockAssets);
-    });
-
-    it('should handle API errors', async () => {
-      mockApiGet.mockRejectedValueOnce(new Error('Network error'));
-
-      await expect(fetchAssets()).rejects.toThrow('Network error');
-    });
-  });
-
-  describe('fetchTheme', () => {
-    it('should fetch theme with relative URL using API', async () => {
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-      };
-
-      const mockTheme: ThemeConfig = {
-        main: '#ff0000',
-        buttonColor: '#ffffff',
-      };
-
-      mockApiGet
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        });
-
-      const result = await fetchTheme();
-
-      expect(mockApiGet).toHaveBeenCalledTimes(2);
-      expect(mockApiGet).toHaveBeenNthCalledWith(1, '/omni/asset/fetch-all');
-      expect(mockApiGet).toHaveBeenNthCalledWith(2, '/api/theme.json');
-      expect(result.main).toBe('#ff0000');
-      expect(result.buttonColor).toBe('#ffffff');
-    });
-
-    it('should fetch theme with absolute URL using fetch', async () => {
-      const mockAssets: AssetsResponse = {
-        theme: 'https://example.com/theme.json',
-      };
-
-      const mockTheme: ThemeConfig = {
-        main: '#00ff00',
-        buttonColor: '#000000',
-      };
-
-      mockApiGet.mockResolvedValueOnce({
-        data: mockAssets,
-      });
-
-      mockFetch.mockResolvedValueOnce({
-        ok: true,
-        json: async () => mockTheme,
-      } as Response);
-
-      const result = await fetchTheme();
-
-      expect(mockApiGet).toHaveBeenCalledTimes(1);
-      expect(mockFetch).toHaveBeenCalledWith('https://example.com/theme.json');
-      expect(result.main).toBe('#00ff00');
-      expect(result.buttonColor).toBe('#000000');
-    });
-
-    it('should throw error when theme URL is not found in assets', async () => {
-      const mockAssets: AssetsResponse = {} as AssetsResponse;
-
-      mockApiGet.mockResolvedValueOnce({
-        data: mockAssets,
-      });
-
-      await expect(fetchTheme()).rejects.toThrow(
-        'Theme URL not found in assets response',
-      );
-    });
-
-    it('should throw error when absolute URL fetch fails', async () => {
-      const mockAssets: AssetsResponse = {
-        theme: 'https://example.com/theme.json',
-      };
-
-      mockApiGet.mockResolvedValueOnce({
-        data: mockAssets,
-      });
-
-      mockFetch.mockResolvedValueOnce({
-        ok: false,
-        statusText: 'Not Found',
-      } as Response);
-
-      await expect(fetchTheme()).rejects.toThrow(
-        'Failed to fetch theme: Not Found',
-      );
-    });
-
-    it('should convert logo URL to data URL', async () => {
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-        'logo.png': 'https://example.com/logo.png',
-      };
-
-      const mockTheme: ThemeConfig = {
-        main: '#ff0000',
-      };
-
-      const mockBlob = new Blob(['logo-data'], { type: 'image/png' });
-
-      mockApiGet
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        });
-
-      mockFetch.mockResolvedValueOnce({
-        blob: async () => mockBlob,
-      } as Response);
-
-      (global as { __mockFileReaderResult?: string }).__mockFileReaderResult =
-        'data:image/png;base64,logo-data';
-
-      const result = await fetchTheme();
-
-      expect(mockFetch).toHaveBeenCalledWith('https://example.com/logo.png');
-      expect(result.logo).toBe('data:image/png;base64,logo-data');
-    });
-
-    it('should return data URL as-is if logo is already a data URL', async () => {
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-      };
-
-      const mockTheme: ThemeConfig = {
-        main: '#ff0000',
-        logo: 'data:image/png;base64,existing-data',
-      };
-
-      mockApiGet
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        });
-
-      const result = await fetchTheme();
-
-      expect(result.logo).toBe('data:image/png;base64,existing-data');
-      expect(mockFetch).not.toHaveBeenCalled();
-    });
-
-    it('should prefer logo from assets over theme', async () => {
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-        'logo.png': 'https://example.com/assets-logo.png',
-      };
-
-      const mockTheme: ThemeConfig = {
-        main: '#ff0000',
-        logo: 'https://example.com/theme-logo.png',
-      };
-
-      mockApiGet
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        });
-
-      mockFetch.mockResolvedValueOnce({
-        blob: async () => new Blob(['logo'], { type: 'image/png' }),
-      } as Response);
-
-      (global as { __mockFileReaderResult?: string }).__mockFileReaderResult =
-        'data:image/png;base64,assets-logo';
-
-      await fetchTheme();
-
-      expect(mockFetch).toHaveBeenCalledWith(
-        'https://example.com/assets-logo.png',
-      );
-    });
-
-    it('should check multiple logo formats in order', async () => {
-      const uniqueUrl = `https://example.com/logo-formats-${Date.now()}.png`;
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-        'logo.svg': `https://example.com/logo-formats-${Date.now()}.svg`,
-        'logo.png': uniqueUrl,
-      };
-
-      const mockTheme: ThemeConfig = {
-        main: '#ff0000',
-      };
-
-      mockApiGet
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        });
-
-      mockFetch.mockResolvedValueOnce({
-        blob: async () => new Blob(['logo'], { type: 'image/png' }),
-      } as Response);
-
-      (global as { __mockFileReaderResult?: string }).__mockFileReaderResult =
-        'data:image/png;base64,logo-formats';
-
-      const result = await fetchTheme();
-
-      expect(mockFetch).toHaveBeenCalledWith(uniqueUrl);
-      expect(result.logo).toBe('data:image/png;base64,logo-formats');
-    });
-
-    it('should cache converted logo URLs', async () => {
-      const uniqueUrl = `https://example.com/cached-logo-${Date.now()}.png`;
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-        'logo.png': uniqueUrl,
-      };
-
-      const mockTheme: ThemeConfig = {
-        main: '#ff0000',
-      };
-
-      mockApiGet
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        })
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        });
-
-      mockFetch.mockResolvedValue({
-        blob: async () => new Blob(['logo'], { type: 'image/png' }),
-      } as Response);
-
-      (global as { __mockFileReaderResult?: string }).__mockFileReaderResult =
-        'data:image/png;base64,cached-logo';
-
-      const result1 = await fetchTheme();
-      const result2 = await fetchTheme();
-
-      expect(mockFetch).toHaveBeenCalledTimes(1);
-      expect(result1.logo).toBe('data:image/png;base64,cached-logo');
-      expect(result2.logo).toBe('data:image/png;base64,cached-logo');
-    });
-  });
-
-  describe('fetchAndApplyTheme', () => {
-    it('should fetch theme and apply it', async () => {
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-      };
-
-      const mockTheme: ThemeConfig = {
-        main: '#ff0000',
-        buttonColor: '#ffffff',
-      };
-
-      mockApiGet
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        });
-
-      const result = await fetchAndApplyTheme();
-
-      expect(result).toEqual({
-        ...mockTheme,
-        logo: undefined,
-      });
-
-      const styleElement = document.getElementById(
-        'incode-theme',
-      ) as HTMLStyleElement;
-      expect(styleElement).toBeTruthy();
-      expect(styleElement.textContent).toContain('--primitive-color-brand-500');
-    });
-
-    it('should not apply theme if main color is missing', async () => {
-      const styleElement = document.getElementById('incode-theme');
-      if (styleElement) {
-        styleElement.remove();
-      }
-
-      const mockAssets: AssetsResponse = {
-        theme: '/api/theme.json',
-      };
-
-      const mockTheme = {
-        buttonColor: '#ffffff',
-      } as ThemeConfig;
-
-      mockApiGet
-        .mockResolvedValueOnce({
-          data: mockAssets,
-        })
-        .mockResolvedValueOnce({
-          data: mockTheme,
-        });
-
-      await fetchAndApplyTheme();
-
-      const newStyleElement = document.getElementById('incode-theme');
-      expect(newStyleElement).toBeFalsy();
-    });
-  });
-});

package/src/styles/fetchTheme.ts

@@ -1,88 +0,0 @@
-import { api } from '@incodetech/core';
-import { applyTheme } from './applyTheme';
-import type { AssetsResponse, ThemeConfig } from './themeTypes';
-
-export async function fetchAssets(): Promise<AssetsResponse> {
-  const response = await api.get<AssetsResponse>('/omni/asset/fetch-all');
-  return response.data;
-}
-
-const dataUrlCache = new Map<string, string>();
-
-async function urlToDataUrl(url: string): Promise<string> {
-  if (url.startsWith('data:')) {
-    return url;
-  }
-
-  const cached = dataUrlCache.get(url);
-  if (cached) {
-    return cached;
-  }
-
-  const response = await fetch(url);
-  const blob = await response.blob();
-  const dataUrl = await new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string);
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-
-  dataUrlCache.set(url, dataUrl);
-  return dataUrl;
-}
-
-export async function fetchTheme(): Promise<ThemeConfig> {
-  const assets = await fetchAssets();
-
-  if (!assets.theme) {
-    throw new Error('Theme URL not found in assets response');
-  }
-
-  const themeUrl = assets.theme;
-  const isAbsoluteUrl =
-    themeUrl.startsWith('http://') || themeUrl.startsWith('https://');
-
-  let theme: ThemeConfig;
-
-  if (isAbsoluteUrl) {
-    const themeResponse = await fetch(themeUrl);
-
-    if (!themeResponse.ok) {
-      throw new Error(`Failed to fetch theme: ${themeResponse.statusText}`);
-    }
-
-    theme = (await themeResponse.json()) as ThemeConfig;
-  } else {
-    const themeResponse = await api.get<ThemeConfig>(themeUrl);
-    theme = themeResponse.data;
-  }
-
-  const logoUrl =
-    assets['logo.png'] ||
-    assets['logo.svg'] ||
-    assets['logo.jpg'] ||
-    assets['logo.jpeg'] ||
-    assets['logo.webp'] ||
-    theme.logo;
-
-  let cachedLogoUrl = logoUrl;
-  if (logoUrl) {
-    cachedLogoUrl = await urlToDataUrl(logoUrl);
-  }
-
-  return {
-    ...theme,
-    logo: cachedLogoUrl,
-  };
-}
-
-export async function fetchAndApplyTheme(): Promise<ThemeConfig> {
-  const theme = await fetchTheme();
-
-  if (theme.main) {
-    applyTheme(theme.main, theme.buttonColor);
-  }
-
-  return theme;
-}

package/src/styles/generatePalette.ts

@@ -1,111 +0,0 @@
-type HslColor = {
-  h: number;
-  s: number;
-  l: number;
-};
-
-function hexToHsl(hex: string): HslColor | null {
-  let normalizedHex = hex.replace('#', '');
-  if (normalizedHex.length === 3) {
-    normalizedHex = normalizedHex
-      .split('')
-      .map((char) => char + char)
-      .join('');
-  }
-
-  const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalizedHex);
-  if (!result) return null;
-
-  const r = Number.parseInt(result[1], 16) / 255;
-  const g = Number.parseInt(result[2], 16) / 255;
-  const b = Number.parseInt(result[3], 16) / 255;
-
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-
-  if (max !== min) {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-
-    switch (max) {
-      case r:
-        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-        break;
-      case g:
-        h = ((b - r) / d + 2) / 6;
-        break;
-      case b:
-        h = ((r - g) / d + 4) / 6;
-        break;
-    }
-  }
-
-  return { h: h * 360, s: s * 100, l: l * 100 };
-}
-
-function hslToHex(h: number, s: number, l: number): string {
-  const hNorm = h / 360;
-  const sNorm = s / 100;
-  const lNorm = l / 100;
-
-  let r: number;
-  let g: number;
-  let b: number;
-
-  if (sNorm === 0) {
-    r = g = b = lNorm;
-  } else {
-    const hue2rgb = (p: number, q: number, t: number) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    };
-
-    const q = lNorm < 0.5 ? lNorm * (1 + sNorm) : lNorm + sNorm - lNorm * sNorm;
-    const p = 2 * lNorm - q;
-
-    r = hue2rgb(p, q, hNorm + 1 / 3);
-    g = hue2rgb(p, q, hNorm);
-    b = hue2rgb(p, q, hNorm - 1 / 3);
-  }
-
-  const toHex = (n: number) => {
-    const hex = Math.round(n * 255).toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  };
-
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-
-export type BrandPalette = {
-  '50': string;
-  '200': string;
-  '300': string;
-  '400': string;
-  '500': string;
-  '600': string;
-  '900': string;
-};
-
-export function generateBrandPalette(mainColor: string): BrandPalette {
-  const hsl = hexToHsl(mainColor);
-  if (!hsl) {
-    throw new Error(`Invalid color format: ${mainColor}`);
-  }
-
-  return {
-    '50': hslToHex(hsl.h, hsl.s, 95),
-    '200': hslToHex(hsl.h, hsl.s, 80),
-    '300': hslToHex(hsl.h, hsl.s, 65),
-    '400': hslToHex(hsl.h, hsl.s, Math.min(100, hsl.l + 10)),
-    '500': mainColor,
-    '600': hslToHex(hsl.h, hsl.s, Math.max(0, hsl.l - 10)),
-    '900': hslToHex(hsl.h, hsl.s, 20),
-  };
-}

package/src/styles/reset.css

@@ -1,65 +0,0 @@
-.IncodeComponent,
-.IncodeComponent * {
-  box-sizing: border-box;
-}
-
-.IncodeComponent {
-  font-family: var(--primitive-typography-family-dm-sans), sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  color: var(--text-body-primary);
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.IncodeComponent {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    border: 0 solid;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-    margin: 0;
-    padding: 0;
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: none;
-  }
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block;
-    vertical-align: middle;
-  }
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-}

package/src/styles/resolveCssVariableToHex.ts

@@ -1,28 +0,0 @@
-export const resolveCssVariableToHex = (cssVar: string): string | null => {
-  if (typeof document === 'undefined') return null;
-
-  const tempEl = document.createElement('div');
-  tempEl.style.color = cssVar;
-  tempEl.style.position = 'absolute';
-  tempEl.style.visibility = 'hidden';
-  document.body.appendChild(tempEl);
-
-  const computedColor = getComputedStyle(tempEl).color;
-  document.body.removeChild(tempEl);
-
-  if (!computedColor || computedColor === 'transparent') return null;
-
-  const rgbMatch = computedColor.match(/\d+/g);
-  if (rgbMatch && rgbMatch.length >= 3) {
-    const r = Number.parseInt(rgbMatch[0], 10);
-    const g = Number.parseInt(rgbMatch[1], 10);
-    const b = Number.parseInt(rgbMatch[2], 10);
-    const toHex = (n: number) => {
-      const hex = n.toString(16);
-      return hex.length === 1 ? `0${hex}` : hex;
-    };
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-  }
-
-  return null;
-};