@code-coaching/vuetiful 0.23.2 → 0.24.1

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

@@ -1,5 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { Theme } from './theme.service';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
 const localStorageMock = {
   getItem: vi.fn(),
@@ -12,7 +11,7 @@ describe('useTheme', () => {
   });
   describe('initializetheme', () => {
     describe('given not in browser', () => {
-      it('should set the theme to the default theme if no theme is stored', async () => {
+      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,
@@ -33,8 +32,9 @@ describe('useTheme', () => {
       beforeEach(() => {
         window.localStorage = localStorageMock as any;
       });
+
       describe('given no theme is stored', () => {
-        it('should set the theme to the default theme', async () => {
+        test('should set the theme to the default theme', async () => {
           const platform = await import('../platform/platform.service');
           vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
             isBrowser: true,
@@ -43,125 +43,227 @@ describe('useTheme', () => {
           const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
 
           const { useTheme } = await import('./theme.service');
-          const { initializeTheme, THEMES, chosenTheme } = useTheme();
+          const { initializeTheme, themes, chosenTheme } = useTheme();
 
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-theme');
-          expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+          expect(localStorageSpy).not.toHaveBeenCalled();
+          expect(chosenTheme.value.name).toBe(themes[0].name);
         });
       });
+
       describe('given a theme is stored', () => {
-        it('should set the theme to the stored theme', async () => {
+        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 { initializeTheme, themes, chosenTheme } = useTheme();
+
+          const customTheme = JSON.parse(JSON.stringify(themes[1]));
+          customTheme.name = 'rocket';
 
           const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-          localStorageSpy.mockReturnValueOnce(THEMES.ROCKET);
 
+          document.cookie = 'vuetiful-theme=rocket';
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-theme');
-          expect(chosenTheme.value).toBe(THEMES.ROCKET);
+          expect(localStorageSpy).not.toHaveBeenCalled();
+          expect(chosenTheme.value).toEqual(customTheme);
         });
       });
 
-      describe('given the theme is not valid', () => {
-        it('should set the theme to the default theme', async () => {
+      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 { initializeTheme, themes, chosenTheme } = useTheme();
 
           const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
-          localStorageSpy.mockReturnValueOnce('invalid-theme');
 
+          document.cookie = 'vuetiful-theme=not-a-theme';
           initializeTheme();
 
-          expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-theme');
-          expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+          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('loadTheme', () => {
-    describe('given theme name exists in themes', () => {
-      it('should set the theme to the given theme', async () => {
+  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 { loadTheme, THEMES, chosenTheme } = useTheme();
+        const { registerTheme, themes } = useTheme();
 
-        loadTheme(THEMES.ROCKET);
+        const newTheme = JSON.parse(JSON.stringify(themes[0]));
+        newTheme.customCss = 'new-custom-css';
 
-        expect(chosenTheme.value).toBe(THEMES.ROCKET);
+        registerTheme(newTheme);
+
+        expect(themes.find((theme) => theme.name === newTheme.name)).toEqual(newTheme);
       });
     });
-    describe('given theme name does not exist in themes', () => {
-      it('should set the theme to the default theme', async () => {
+  });
+
+  describe('getThemeFromCookie', () => {
+    describe('given there is no cookie', () => {
+      test('should return default theme', async () => {
         const { useTheme } = await import('./theme.service');
-        const { loadTheme, THEMES, chosenTheme } = useTheme();
+        const { getThemeFromCookie, themes } = useTheme();
 
-        loadTheme('invalid-theme');
+        const cookie = '';
+        const theme = getThemeFromCookie(cookie);
 
-        expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
+        expect(theme).toEqual(themes[0]);
       });
     });
-    describe('given default theme is not in themes', () => {
-      it('should set the theme to the first theme in the themes object', async () => {
+
+    describe('given there is a cookie', () => {
+      test('should return the theme', async () => {
         const { useTheme } = await import('./theme.service');
-        const { loadTheme, THEMES, chosenTheme, overwriteThemes, themes } = useTheme();
+        const { getThemeFromCookie, themes } = useTheme();
 
-        const theme: Theme = { name: 'fake theme', url: '' };
-        overwriteThemes([themes.value[1], theme]);
+        const cookie = 'vuetiful-theme=rocket';
 
-        loadTheme('invalid-theme');
+        const theme = getThemeFromCookie(cookie);
 
-        expect(chosenTheme.value).toBe(themes.value[0].name);
+        const rocketTheme = themes.find((theme) => theme.name === 'rocket');
+        expect(theme).toEqual(rocketTheme);
       });
     });
   });
 
-  describe('registerAllBuiltInThemes', () => {
-    it('should register all built in themes', async () => {
+  describe('applyThemeSSR', () => {
+    test('should apply the theme', async () => {
       const { useTheme } = await import('./theme.service');
-      const { registerAllBuiltInThemes, THEMES, themes } = useTheme();
+      const { applyThemeSSR, themes } = useTheme();
 
-      registerAllBuiltInThemes();
+      const theme = themes[0];
 
-      expect(themes.value).toHaveLength(Object.keys(THEMES).length);
+      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);
     });
-  });
 
-  describe('registerTheme', () => {
-    it('should register a theme', async () => {
+    test('no customBase, no customHeadings, no gradients, no custom css', async () => {
       const { useTheme } = await import('./theme.service');
-      const { registerTheme } = useTheme();
-
-      const theme: Theme = { name: 'fake theme', url: '' };
-      expect(registerTheme(theme.name, '')).toEqual(theme);
+      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);
     });
-  });
 
-  describe('saveThemeToStorage', () => {
-    describe('given the theme does not exist', () => {
-      it('should not save the theme to storage', async () => {
-        const { useTheme } = await import('./theme.service');
-        const { saveThemeToStorage } = useTheme();
+    test('invalid hex colors', async () => {
+      const { useTheme } = await import('./theme.service');
+      const { applyThemeSSR, themes } = useTheme();
 
-        const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
+      const theme = JSON.parse(JSON.stringify(themes[0]));
+      theme.colors.primary = 'invalid';
 
-        saveThemeToStorage('invalid-theme');
+      const preHtml = '<html><head></head><body></body></html>';
+      const html = applyThemeSSR(preHtml, theme);
 
-        expect(localStorageSpy).not.toHaveBeenCalled();
-      });
+      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,109 +1,171 @@
-import { readonly, Ref, ref } from 'vue';
+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();
-
-export interface Theme {
-  name: string;
-  url: string;
-}
-
-const THEMES = {
-  VUETIFUL: 'vuetiful',
-  ROCKET: 'rocket',
-  SAHARA: 'sahara',
-  SEAFOAM: 'seafoam',
-  SEASONAL: 'seasonal',
-  SKELETON: 'skeleton',
-  VINTAGE: 'vintage',
-};
-
-const builtInUrl = (name: string): string => {
-  return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
+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 builtInThemes: Array<Theme> = [
-  { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
-  { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
-  { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
-  { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
-  { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
-  { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
-  { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) },
-];
-
-const themes: Ref<Array<Theme>> = ref([...builtInThemes]);
-
-const defaultTheme = THEMES.VUETIFUL;
-const chosenTheme = ref(defaultTheme);
-
 const useTheme = () => {
-  const saveThemeToStorage = (name: string): void => {
-    const theme = themes.value.find((t) => t.name === name);
-    if (!theme) return;
+  const changeDataTheme = (name: string) => document.body.setAttribute('data-theme', name);
 
-    if (isBrowser) {
-      localStorage.setItem('vuetiful-theme', theme.name);
-      document.body.setAttribute('data-theme', 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 initializeTheme = (callback?: Function): void => {
-    if (isBrowser) {
-      const storedTheme = localStorage.getItem('vuetiful-theme');
-      if (storedTheme) loadTheme(storedTheme, callback);
-      else loadTheme(defaultTheme, callback);
-    }
+  const getThemeNameFromCookie = (cookies: string): string => {
+    const cookie = cookies.split(';').find((c) => c.trim().startsWith(`vuetiful-theme=`));
+    const value = cookie?.split('=')[1];
+    return value || '';
   };
 
-  const loadTheme = (themeName: string, callback?: Function) => {
-    let themeToLoad = themes.value.find((t) => t.name === themeName);
-    if (!themeToLoad) themeToLoad = themes.value.find((t) => t.name === defaultTheme) || themes.value[0];
+  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 theme: Theme = themeToLoad;
-    chosenTheme.value = theme.name;
+  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 existingStyle = document.getElementById('theme');
-    let themeUrl = theme.url;
+  const applyTheme = (theme: Theme, callback?: Function) => {
+    const existingStyle = document.getElementById('vuetiful-theme');
+    const themeCss = generateCss(theme);
 
-    const link = document.createElement('link');
-    link.id = 'theme';
-    link.href = themeUrl;
-    link.type = 'text/css';
-    link.rel = 'stylesheet';
-    link.onload = () => {
+    const style = document.createElement('style');
+    style.innerHTML = themeCss;
+    style.id = 'vuetiful-theme';
+    style.onload = () => {
       if (existingStyle) existingStyle.remove();
-      saveThemeToStorage(theme.name);
       if (callback) callback();
     };
 
     const head = document.querySelector('head');
-    if (head) head.appendChild(link);
-  };
+    if (head) head.appendChild(style);
 
-  const registerAllBuiltInThemes = (): Array<Theme> => {
-    return [...builtInThemes];
+    chosenTheme.value = theme;
+    if (isBrowser) {
+      document.cookie = `vuetiful-theme=${theme.name};path=/;max-age=31536000;SameSite=Lax`;
+      changeDataTheme(theme.name);
+    }
   };
 
-  const registerTheme = (name: string, url: string): Theme => {
-    return { url, 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 overwriteThemes = (newThemes: Array<Theme>): void => {
-    themes.value = [...newThemes];
+  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 {
-    themes: readonly(themes),
-    chosenTheme: readonly(chosenTheme),
-
+    chosenTheme,
+    themes,
+    THEME,
+    applyThemeSSR,
+    applyTheme,
+    getThemeFromCookie,
     initializeTheme,
-    loadTheme,
-    saveThemeToStorage,
-
-    THEMES,
-    overwriteThemes,
-    registerAllBuiltInThemes,
+    changeDataTheme,
     registerTheme,
   };
 };