@vue-skuilder/common-ui 0.1.1

package/src/stores/useAuthStore.ts

@@ -0,0 +1,92 @@
+// stores/useAuthStore.ts
+import { defineStore, setActivePinia } from 'pinia';
+import { getDataLayer, UserDBInterface } from '@vue-skuilder/db';
+import { getPinia } from '../plugins/pinia';
+
+export interface AuthState {
+  _user: UserDBInterface | undefined;
+  loginAndRegistration: {
+    init: boolean;
+    loggedIn: boolean;
+    regDialogOpen: boolean;
+    loginDialogOpen: boolean;
+  };
+  onLoadComplete: boolean;
+}
+
+export async function getCurrentUser(): Promise<UserDBInterface> {
+  const store = useAuthStore();
+
+  if (!store.onLoadComplete) {
+    // Wait for initialization
+    let retries = 200;
+    const timeout = 50;
+    while (!store.onLoadComplete && retries > 0) {
+      await new Promise((resolve) => setTimeout(resolve, timeout));
+      retries--;
+    }
+    if (!store.onLoadComplete) {
+      throw new Error('User initialization timed out');
+    }
+  }
+
+  return getDataLayer().getUserDB();
+}
+
+export const useAuthStore = () => {
+  // Get the Pinia instance from the plugin
+  const pinia = getPinia();
+  if (pinia) {
+    setActivePinia(pinia);
+  }
+
+  // Return the store
+  return defineStore('auth', {
+    state: (): AuthState => ({
+      _user: undefined as UserDBInterface | undefined,
+      loginAndRegistration: {
+        init: false,
+        loggedIn: false,
+        regDialogOpen: false,
+        loginDialogOpen: false,
+      },
+      onLoadComplete: false,
+    }),
+
+    actions: {
+      async init() {
+        try {
+          this._user = getDataLayer().getUserDB();
+
+          this.loginAndRegistration.loggedIn = this._user.isLoggedIn();
+
+          this.onLoadComplete = true;
+          this.loginAndRegistration.init = true;
+        } catch (e) {
+          console.error('Failed to initialize auth store:', e);
+        }
+      },
+
+      setLoginDialog(open: boolean) {
+        this.loginAndRegistration.loginDialogOpen = open;
+      },
+
+      setRegDialog(open: boolean) {
+        this.loginAndRegistration.regDialogOpen = open;
+      },
+    },
+
+    getters: {
+      currentUser: async () => getCurrentUser(),
+      isLoggedIn: (state) => state.loginAndRegistration.loggedIn,
+      isInitialized: (state) => state.loginAndRegistration.init,
+      status: (state) => {
+        return {
+          loggedIn: state.loginAndRegistration.loggedIn,
+          init: state.loginAndRegistration.init,
+          user: state._user,
+        };
+      },
+    },
+  })();
+};

package/src/stores/useCardPreviewModeStore.ts

@@ -0,0 +1,32 @@
+// common-ui/src/stores/useCardPreviewModeStore.ts
+import { defineStore, setActivePinia } from 'pinia';
+import { getPinia } from '../plugins/pinia';
+
+export interface PreviewModeState {
+  previewMode: boolean;
+}
+
+export const useCardPreviewModeStore = () => {
+  // Get the Pinia instance from the plugin
+  const pinia = getPinia();
+  if (pinia) {
+    setActivePinia(pinia);
+  }
+
+  // Return the store
+  return defineStore('previewMode', {
+    state: (): PreviewModeState => ({
+      previewMode: false,
+    }),
+    actions: {
+      setPreviewMode(mode: boolean) {
+        this.previewMode = mode;
+      },
+    },
+    getters: {
+      isPreviewMode(): boolean {
+        return this.previewMode;
+      },
+    },
+  })();
+};

package/src/stores/useConfigStore.ts

@@ -0,0 +1,60 @@
+// stores/useConfigStore.ts
+import { defineStore, setActivePinia } from 'pinia';
+import { getCurrentUser } from './useAuthStore';
+import { UserConfig } from '@vue-skuilder/db';
+import { getPinia } from '../plugins/pinia';
+
+export const useConfigStore = () => {
+  // Get the Pinia instance from the plugin
+  const pinia = getPinia();
+  if (pinia) {
+    setActivePinia(pinia);
+  }
+
+  // Return the store
+  return defineStore('config', {
+    state: () => ({
+      config: {
+        darkMode: false,
+        likesConfetti: false,
+      } as UserConfig,
+    }),
+
+    actions: {
+      updateConfig(newConfig: UserConfig) {
+        this.config = newConfig;
+      },
+      async updateDarkMode(darkMode: boolean) {
+        this.config.darkMode = darkMode;
+        const user = await getCurrentUser();
+        await user.setConfig({
+          darkMode,
+        });
+      },
+
+      async updateLikesConfetti(likesConfetti: boolean) {
+        this.config.likesConfetti = likesConfetti;
+        const user = await getCurrentUser();
+        await user.setConfig({
+          likesConfetti,
+        });
+      },
+
+      async hydrate() {
+        const user = await getCurrentUser();
+        const cfg = await user.getConfig();
+        console.log(`user config: ${JSON.stringify(cfg)}`);
+        this.updateConfig(cfg);
+      },
+      async init() {
+        await this.hydrate();
+      },
+      resetDefaults() {
+        this.config = {
+          darkMode: false,
+          likesConfetti: false,
+        };
+      },
+    },
+  })();
+};

package/src/utils/SkldrMouseTrap.ts

@@ -0,0 +1,141 @@
+import Mousetrap from 'mousetrap';
+import 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';
+import { ExtendedKeyboardEvent, MousetrapInstance } from 'mousetrap';
+
+export interface HotKey extends HotKeyMetaData {
+  callback: (e: ExtendedKeyboardEvent, combo: string) => any;
+}
+
+export interface HotKeyMetaData {
+  command: string;
+  hotkey: string | string[];
+}
+
+/**
+ * Checks if focus is currently on an input element where hotkeys should be ignored
+ * @returns true if hotkeys should be ignored, false otherwise
+ */
+function inputElementIsFocused(): boolean {
+  const activeElement = document.activeElement;
+
+  // Special handling for checkbox and radio inputs
+  if (
+    activeElement instanceof HTMLInputElement &&
+    (activeElement.type === 'checkbox' || activeElement.type === 'radio')
+  ) {
+    return false;
+  }
+
+  return (
+    activeElement instanceof HTMLElement &&
+    (activeElement.tagName === 'INPUT' ||
+      activeElement.tagName === 'TEXTAREA' ||
+      activeElement.tagName === 'SELECT' ||
+      activeElement.isContentEditable)
+  );
+}
+
+export class SkldrMouseTrap {
+  private static _instance: SkldrMouseTrap;
+
+  private mouseTrap: MousetrapInstance;
+  private hotkeys: HotKey[];
+
+  private constructor() {
+    this.mouseTrap = new Mousetrap();
+    this.hotkeys = [];
+  }
+
+  public static get commands(): HotKeyMetaData[] {
+    return SkldrMouseTrap.instance().hotkeys.map((hk) => {
+      return {
+        command: hk.command,
+        hotkey: hk.hotkey,
+      };
+    });
+  }
+
+  /**
+   * Add keyboard bindings without resetting existing ones
+   * @param hk Single hotkey or array of hotkeys to bind
+   */
+  public static addBinding(hk: HotKey | HotKey[]) {
+    const hotkeys = Array.isArray(hk) ? hk : [hk];
+    const instance = SkldrMouseTrap.instance();
+
+    // Add to internal registry
+    instance.hotkeys = [...instance.hotkeys, ...hotkeys];
+
+    // Bind each hotkey
+    hotkeys.forEach((k) => {
+      Mousetrap.bindGlobal(k.hotkey, (a, b) => {
+        // Skip execution if focus is on input elements
+        if (inputElementIsFocused()) {
+          console.log(`Ignoring hotkey ${k.hotkey} while input element is focused`);
+          return;
+        }
+
+        // console.log(`Running ${k.hotkey}`);
+        k.callback(a, b);
+      });
+    });
+  }
+
+  /**
+   * Remove specific keyboard binding(s) without affecting others
+   * @param hotkey Single hotkey or array of hotkeys to remove
+   */
+  public static removeBinding(hotkey: string | string[]) {
+    const instance = SkldrMouseTrap.instance();
+    const currentHotkeys = [...instance.hotkeys];
+
+    if (
+      Array.isArray(hotkey) &&
+      !hotkey.every((k) => typeof k === 'string' || typeof k === 'number')
+    ) {
+      // If it's an array of hotkey specifiers
+      hotkey.forEach((key) => {
+        // Remove from internal registry
+        instance.hotkeys = instance.hotkeys.filter((k) => {
+          return JSON.stringify(k.hotkey) !== JSON.stringify(key);
+        });
+
+        // Unbind from Mousetrap
+        Mousetrap.unbind(key);
+      });
+    } else {
+      // Single hotkey removal (original implementation)
+      // Remove from internal registry
+      instance.hotkeys = currentHotkeys.filter((k) => {
+        // Convert both to JSON for comparison to handle arrays correctly
+        return JSON.stringify(k.hotkey) !== JSON.stringify(hotkey);
+      });
+
+      // Unbind from Mousetrap
+      Mousetrap.unbind(hotkey);
+    }
+  }
+
+  /**
+   * Reset all keyboard bindings
+   * @warning Consider using removeBinding() for targeted cleanup instead to avoid affecting other components
+   */
+  public static reset() {
+    console.warn(
+      'SkldrMouseTrap.reset() may affect hotkeys registered by other components. ' +
+        'Consider using removeBinding() with specific hotkeys for better component isolation.'
+    );
+    Mousetrap.reset();
+    SkldrMouseTrap.instance().mouseTrap.reset();
+    SkldrMouseTrap.instance().hotkeys = [];
+  }
+
+  private static instance(): SkldrMouseTrap {
+    if (SkldrMouseTrap._instance) {
+      return SkldrMouseTrap._instance;
+    } else {
+      SkldrMouseTrap._instance = new SkldrMouseTrap();
+      return SkldrMouseTrap._instance;
+    }
+  }
+}

package/src/vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}