@code-coaching/vuetiful 0.26.0 → 0.27.0

package/src/utils/theme/theme.service.test.ts

@@ -1,269 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-
-const localStorageMock = {
-  getItem: vi.fn(),
-  setItem: vi.fn(),
-};
-
-describe('useTheme', () => {
-  afterEach(() => {
-    vi.resetModules();
-  });
-  describe('initializetheme', () => {
-    describe('given not in browser', () => {
-      test('should set the theme to the default theme if no theme is stored', async () => {
-        const platform = await import('../platform/platform.service');
-        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-          isBrowser: false,
-        });
-
-        const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-
-        const { useTheme } = await import('./theme.service');
-        const { initializeTheme } = useTheme();
-
-        initializeTheme();
-
-        expect(localStorageSpy).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('given in browser', () => {
-      beforeEach(() => {
-        window.localStorage = localStorageMock as any;
-      });
-
-      describe('given no theme is stored', () => {
-        test('should set the theme to the default theme', async () => {
-          const platform = await import('../platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-
-          const { useTheme } = await import('./theme.service');
-          const { initializeTheme, themes, chosenTheme } = useTheme();
-
-          initializeTheme();
-
-          expect(localStorageSpy).not.toHaveBeenCalled();
-          expect(chosenTheme.value.name).toBe(themes[0].name);
-        });
-      });
-
-      describe('given a theme is stored', () => {
-        test('should set the theme to the stored theme', async () => {
-          const platform = await import('../platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const { useTheme } = await import('./theme.service');
-          const { initializeTheme, themes, chosenTheme } = useTheme();
-
-          const customTheme = JSON.parse(JSON.stringify(themes[1]));
-          customTheme.name = 'rocket';
-
-          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-
-          document.cookie = 'vuetiful-theme=rocket';
-          initializeTheme();
-
-          expect(localStorageSpy).not.toHaveBeenCalled();
-          expect(chosenTheme.value).toEqual(customTheme);
-        });
-      });
-
-      describe('given the theme cookie is not a known theme', () => {
-        test('should set the theme to the default theme', async () => {
-          const platform = await import('../platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const { useTheme } = await import('./theme.service');
-          const { initializeTheme, themes, chosenTheme } = useTheme();
-
-          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-
-          document.cookie = 'vuetiful-theme=not-a-theme';
-          initializeTheme();
-
-          expect(localStorageSpy).not.toHaveBeenCalled();
-          expect(chosenTheme.value).toEqual(themes[0]);
-        });
-      });
-
-      describe('given the theme is set to custom', () => {
-        test('should set the custom theme from local storage', async () => {
-          const platform = await import('../platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const { useTheme } = await import('./theme.service');
-          const { initializeTheme, themes, chosenTheme } = useTheme();
-
-          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-          const customTheme = JSON.parse(JSON.stringify(themes[0]));
-          customTheme.name = 'custom';
-          localStorageSpy.mockReturnValueOnce(JSON.stringify(customTheme));
-
-          document.cookie = 'vuetiful-theme=custom';
-          initializeTheme();
-
-          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-custom-theme');
-          expect(chosenTheme.value).toEqual(customTheme);
-        });
-
-        test('should set the default theme if an invalid theme is stored', async () => {
-          const platform = await import('../platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const { useTheme } = await import('./theme.service');
-          const { initializeTheme, themes, chosenTheme } = useTheme();
-
-          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-          localStorageSpy.mockReturnValueOnce('not-a-theme');
-
-          document.cookie = 'vuetiful-theme=custom';
-          initializeTheme();
-
-          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-custom-theme');
-          expect(chosenTheme.value).toEqual(themes[0]);
-        })
-
-        test('should set the default theme if no theme is stored', async () => {
-          const platform = await import('../platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const { useTheme } = await import('./theme.service');
-          const { initializeTheme, themes, chosenTheme } = useTheme();
-
-          const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-          localStorageSpy.mockReturnValueOnce(null);
-
-          document.cookie = 'vuetiful-theme=custom';
-          initializeTheme();
-
-          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-custom-theme');
-          expect(chosenTheme.value).toEqual(themes[0]);
-        })
-      });
-
-    });
-  });
-
-  describe('registerTheme', () => {
-    test('should register a theme', async () => {
-      const { useTheme } = await import('./theme.service');
-      const { registerTheme, themes } = useTheme();
-
-      const newTheme = JSON.parse(JSON.stringify(themes[0]));
-      newTheme.name = 'new-theme';
-
-      registerTheme(newTheme);
-      expect(themes).toContain(newTheme);
-    });
-
-    describe('given the theme is already registered', () => {
-      test('should update the theme', async () => {
-        const { useTheme } = await import('./theme.service');
-        const { registerTheme, themes } = useTheme();
-
-        const newTheme = JSON.parse(JSON.stringify(themes[0]));
-        newTheme.customCss = 'new-custom-css';
-
-        registerTheme(newTheme);
-
-        expect(themes.find((theme) => theme.name === newTheme.name)).toEqual(newTheme);
-      });
-    });
-  });
-
-  describe('getThemeFromCookie', () => {
-    describe('given there is no cookie', () => {
-      test('should return default theme', async () => {
-        const { useTheme } = await import('./theme.service');
-        const { getThemeFromCookie, themes } = useTheme();
-
-        const cookie = '';
-        const theme = getThemeFromCookie(cookie);
-
-        expect(theme).toEqual(themes[0]);
-      });
-    });
-
-    describe('given there is a cookie', () => {
-      test('should return the theme', async () => {
-        const { useTheme } = await import('./theme.service');
-        const { getThemeFromCookie, themes } = useTheme();
-
-        const cookie = 'vuetiful-theme=rocket';
-
-        const theme = getThemeFromCookie(cookie);
-
-        const rocketTheme = themes.find((theme) => theme.name === 'rocket');
-        expect(theme).toEqual(rocketTheme);
-      });
-    });
-  });
-
-  describe('applyThemeSSR', () => {
-    test('should apply the theme', async () => {
-      const { useTheme } = await import('./theme.service');
-      const { applyThemeSSR, themes } = useTheme();
-
-      const theme = themes[0];
-
-      const preHtml = '<html><head></head><body></body></html>';
-      const html = applyThemeSSR(preHtml, theme);
-
-      const style = html.includes('id="vuetiful-theme"');
-      expect(style).toBe(true);
-      const body = html.includes('data-theme="vuetiful"');
-      expect(body).toBe(true);
-    });
-
-    test('no customBase, no customHeadings, no gradients, no custom css', async () => {
-      const { useTheme } = await import('./theme.service');
-      const { applyThemeSSR, themes } = useTheme();
-
-      const theme = JSON.parse(JSON.stringify(themes[0]));
-      theme.fonts.customBase = '';
-      theme.fonts.customHeadings = '';
-      theme.gradients.light = '';
-      theme.gradients.dark = '';
-      theme.customCss = '';
-
-      const preHtml = '<html><head></head><body></body></html>';
-      const html = applyThemeSSR(preHtml, theme);
-
-      const style = html.includes('id="vuetiful-theme"');
-      expect(style).toBe(true);
-      const body = html.includes('data-theme="vuetiful"');
-      expect(body).toBe(true);
-    });
-
-    test('invalid hex colors', async () => {
-      const { useTheme } = await import('./theme.service');
-      const { applyThemeSSR, themes } = useTheme();
-
-      const theme = JSON.parse(JSON.stringify(themes[0]));
-      theme.colors.primary = 'invalid';
-
-      const preHtml = '<html><head></head><body></body></html>';
-      const html = applyThemeSSR(preHtml, theme);
-
-      const style = html.includes('id="vuetiful-theme"');
-      expect(style).toBe(true);
-      const body = html.includes('data-theme="vuetiful"');
-      expect(body).toBe(true);
-    });
-  });
-});

package/src/utils/theme/theme.service.ts

@@ -1,173 +0,0 @@
-import { Ref, ref } from 'vue';
-import { usePlatform } from '../platform/platform.service';
-import { ColorSettings, Palette, useColors } from '../colors/colors.service';
-import { Theme, themes, THEME } from './themes';
-
-const { isBrowser } = usePlatform();
-const chosenTheme: Ref<Theme> = ref(themes[0]);
-const { generatePalette, hexValuesAreValid } = useColors();
-
-const generateColorCSS = (theme: Theme): string => {
-  let newCSS = '';
-  const newPalette: Record<string, Palette> = {};
-  Object.values(theme.colors).forEach((color: ColorSettings) => {
-    const colorKey = color.key;
-    newPalette[color.key] = generatePalette(color.hex);
-    newCSS += '\n\t';
-    newCSS += `/* ${colorKey} | ${newPalette[colorKey][500].hex} */\n\t`;
-    for (let [k, v] of Object.entries(newPalette[colorKey])) {
-      newCSS += `--color-${colorKey}-${k}: ${v.rgb}; /* ⬅ ${v.hex} */\n\t`;
-    }
-  });
-  return newCSS;
-};
-
-const useTheme = () => {
-  const changeDataTheme = (name: string) => document.body.setAttribute('data-theme', name);
-
-  const getThemeFromCookie = (cookies: string): Theme => {
-    const themeName = getThemeNameFromCookie(cookies);
-    const theme = themes.find((t) => t.name === themeName);
-    if (theme) return theme;
-    return themes[0];
-  };
-
-  const getThemeNameFromCookie = (cookies: string): string => {
-    const cookie = cookies.split(';').find((c) => c.trim().startsWith(`vuetiful-theme=`));
-    const value = cookie?.split('=')[1];
-    return value || '';
-  };
-
-  const applyThemeSSR = (html: string, theme: Theme): string => {
-    chosenTheme.value = theme;
-    const css = generateCss(theme);
-    html = html.replace('</head>', `<style type="text/css" id="vuetiful-theme">${css}</style></head>`);
-    html = html.replace('<body', `<body data-theme="${theme.name}"`);
-    return html;
-  };
-
-  const generateCss = (theme: Theme): string => {
-    if (hexValuesAreValid(Object.values(theme.colors))) {
-      return `${theme.fonts.baseImports}
-  ${theme.fonts.headingImports}
-  :root {
-      /* =~= Theme Properties =~= */
-      --theme-font-family-base: ${theme.fonts.customBase ? `"${theme.fonts.customBase}", ` : ''}${theme.fonts.base};
-      --theme-font-family-heading: ${theme.fonts.customHeadings ? `"${theme.fonts.customHeadings}", ` : ''}${
-        theme.fonts.headings
-      };
-      --theme-font-color-base: ${theme.textColorLight};
-      --theme-font-color-dark: ${theme.textColorDark};
-      --theme-rounded-base: ${theme.roundedBase};
-      --theme-rounded-container: ${theme.roundedContainer};
-      --theme-border-base: ${theme.borderBase};
-  
-      /* =~= Theme On-X Colors  =~= */
-      --on-primary: ${theme.colors.primary.on};
-      --on-secondary: ${theme.colors.secondary.on};
-      --on-tertiary: ${theme.colors.tertiary.on};
-      --on-success: ${theme.colors.success.on};
-      --on-warning: ${theme.colors.warning.on};
-      --on-error: ${theme.colors.error.on};
-      --on-surface: ${theme.colors.surface.on};
-  
-      /* =~= Theme Colors  =~= */
-${generateColorCSS(theme)}
-  }
-  
-  ${
-    theme.gradients.light.length
-      ? `[data-theme="${theme.name}"] {
-      background-image:
-          ${theme.gradients.light};
-  }`
-      : ''
-  }
-  ${
-    theme.gradients.dark.length
-      ? `.dark [data-theme="${theme.name}"] {
-      background-image:
-          ${theme.gradients.dark};
-  }`
-      : ''
-  }
-  ${theme.customCss}
-  `;
-    }
-    return '';
-  };
-
-  const applyTheme = (theme: Theme, callback?: Function) => {
-    const existingStyle = document.getElementById('vuetiful-theme');
-    const themeCss = generateCss(theme);
-
-    const style = document.createElement('style');
-    style.innerHTML = themeCss;
-    style.id = 'vuetiful-theme';
-    style.onload = () => {
-      if (existingStyle) existingStyle.remove();
-      if (callback) callback();
-    };
-
-    const head = document.querySelector('head');
-    if (head) head.appendChild(style);
-
-    chosenTheme.value = theme;
-    if (isBrowser) {
-      document.cookie = `vuetiful-theme=${theme.name};path=/;max-age=31536000;SameSite=Lax`;
-      changeDataTheme(theme.name);
-    }
-  };
-
-  const initializeTheme = (callback?: Function): void => {
-    if (isBrowser) {
-      const themeName = getThemeNameFromCookie(document.cookie);
-
-      if (themeName === 'custom') {
-        const storedThemeJson = localStorage.getItem('vuetiful-custom-theme');
-        let storedTheme: Theme | null = null;
-
-        try {
-          storedTheme = storedThemeJson ? JSON.parse(storedThemeJson) : null;
-          if (storedTheme) {
-            applyTheme(storedTheme, callback);
-            registerTheme(storedTheme);
-          }
-        } catch (e) {
-          applyTheme(themes[0], callback);
-        }
-      } else {
-        const theme = themes.find((t) => t.name === themeName);
-        if (theme) {
-          applyTheme(theme, callback);
-        } else {
-          applyTheme(themes[0], callback);
-        }
-      }
-    }
-  };
-
-  const registerTheme = (theme: Theme): void => {
-    const existingTheme = themes.find((t) => t.name === theme.name);
-    if (existingTheme) {
-      const index = themes.indexOf(existingTheme);
-      themes[index] = theme;
-    } else {
-      themes.push(theme);
-    }
-  };
-
-  return {
-    chosenTheme,
-    themes,
-    THEME,
-    applyThemeSSR,
-    applyTheme,
-    getThemeFromCookie,
-    initializeTheme,
-    changeDataTheme,
-    registerTheme,
-  };
-};
-
-export { useTheme };