@vue-skuilder/common-ui 0.1.1

package/src/components/HeatMap.types.ts

@@ -0,0 +1,15 @@
+export interface DayData {
+  date: string;
+  count: number;
+}
+
+export interface Color {
+  h: number;
+  s: number;
+  l: number;
+}
+
+export interface ActivityRecord {
+  timeStamp: number | string;
+  [key: string]: any;
+}

package/src/components/HeatMap.vue

@@ -0,0 +1,354 @@
+<template>
+  <div>
+    <svg :width="width" :height="height">
+      <g
+        v-for="(week, weekIndex) in weeks"
+        :key="weekIndex"
+        :transform="`translate(${weekIndex * (cellSize + cellMargin)}, 0)`"
+      >
+        <rect
+          v-for="(day, dayIndex) in week"
+          :key="day.date"
+          :x="0"
+          :y="dayIndex * (cellSize + cellMargin)"
+          :width="cellSize"
+          :height="cellSize"
+          :fill="getColor(day.count)"
+          @mouseover="showTooltip(day, $event)"
+          @mouseout="hideTooltip"
+        />
+      </g>
+    </svg>
+    <div v-if="tooltipData" class="tooltip" :style="tooltipStyle">
+      {{ tooltipData.count }} review{{ tooltipData.count !== 1 ? 's' : '' }} on {{ toDateString(tooltipData.date) }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import moment from 'moment';
+import { DayData, Color, ActivityRecord } from './HeatMap.types';
+
+export default defineComponent({
+  name: 'HeatMap',
+
+  props: {
+    // Accept activity records directly as a prop
+    activityRecords: {
+      type: Array as PropType<ActivityRecord[]>,
+      default: () => [],
+    },
+    // Accept a function that can retrieve activity records
+    activityRecordsGetter: {
+      type: Function as PropType<() => Promise<ActivityRecord[]>>,
+      default: null,
+    },
+    // Customize colors
+    inactiveColor: {
+      type: Object as PropType<Color>,
+      default: () => ({ h: 0, s: 0, l: 0.9 }),
+    },
+    activeColor: {
+      type: Object as PropType<Color>,
+      default: () => ({ h: 155, s: 1, l: 0.5 }),
+    },
+    // Customize size
+    cellSize: {
+      type: Number,
+      default: 12,
+    },
+    cellMargin: {
+      type: Number,
+      default: 3,
+    },
+    // Enable/disable seasonal colors
+    enableSeasonalColors: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+      localActivityRecords: [] as ActivityRecord[],
+      heatmapData: {} as { [key: string]: number },
+      weeks: [] as DayData[][],
+      tooltipData: null as DayData | null,
+      tooltipStyle: {} as { [key: string]: string },
+      maxInRange: 0,
+    };
+  },
+
+  computed: {
+    width(): number {
+      return 53 * (this.cellSize + this.cellMargin);
+    },
+    height(): number {
+      return 7 * (this.cellSize + this.cellMargin);
+    },
+    effectiveActivityRecords(): ActivityRecord[] {
+      const useLocal = Array.isArray(this.localActivityRecords) && this.localActivityRecords.length > 0;
+      const records = useLocal ? this.localActivityRecords : this.activityRecords || [];
+      console.log('Using effectiveActivityRecords, count:', records.length, 'source:', useLocal ? 'local' : 'prop');
+      return records;
+    },
+  },
+
+  watch: {
+    activityRecords: {
+      handler() {
+        this.processRecords();
+        this.createWeeksData();
+      },
+      immediate: true,
+    },
+  },
+
+  async created() {
+    if (this.activityRecordsGetter) {
+      try {
+        this.isLoading = true;
+        console.log('Fetching activity records using getter...');
+        
+        // Ensure the getter is called safely with proper error handling
+        let result = await this.activityRecordsGetter();
+        
+        // Handle the result - ensure it's an array of activity records
+        if (Array.isArray(result)) {
+          // Filter out records with invalid timestamps before processing
+          this.localActivityRecords = result.filter(record => {
+            if (!record || !record.timeStamp) return false;
+            
+            // Basic validation check for timestamps
+            try {
+              const m = moment(record.timeStamp);
+              return m.isValid() && m.year() > 2000 && m.year() < 2100;
+            } catch (e) {
+              return false;
+            }
+          });
+          
+          console.log(`Received ${result.length} records, ${this.localActivityRecords.length} valid after filtering`);
+          
+          // Process the loaded records
+          this.processRecords();
+          this.createWeeksData();
+        } else {
+          console.error('Activity records getter did not return an array:', result);
+          this.localActivityRecords = [];
+        }
+      } catch (error) {
+        console.error('Error fetching activity records:', error);
+        this.localActivityRecords = [];
+      } finally {
+        this.isLoading = false;
+      }
+    } else {
+      console.log('No activityRecordsGetter provided, using direct activityRecords prop');
+    }
+  },
+
+  methods: {
+    toDateString(d: string): string {
+      const m = moment(d);
+      return moment.months()[m.month()] + ' ' + m.date();
+    },
+
+    processRecords() {
+      const records = this.effectiveActivityRecords || [];
+      console.log(`Processing ${records.length} records`);
+
+      const data: { [key: string]: number } = {};
+
+      if (records.length === 0) {
+        console.log('No records to process');
+        this.heatmapData = data;
+        return;
+      }
+
+      // Sample logging of a few records to understand structure without flooding console
+      const uniqueDates = new Set<string>();
+      const dateDistribution: Record<string, number> = {};
+      let validCount = 0;
+      let invalidCount = 0;
+      
+      for (let i = 0; i < records.length; i++) {
+        const record = records[i];
+        
+        if (!record || typeof record !== 'object' || !record.timeStamp) {
+          invalidCount++;
+          continue;
+        }
+        
+        try {
+          // Attempt to normalize the timestamp
+          let normalizedDate: string;
+          
+          if (typeof record.timeStamp === 'string') {
+            // For ISO strings, parse directly with moment
+            normalizedDate = moment(record.timeStamp).format('YYYY-MM-DD');
+          } else if (typeof record.timeStamp === 'number') {
+            // For numeric timestamps, use Date constructor then moment
+            normalizedDate = moment(new Date(record.timeStamp)).format('YYYY-MM-DD');
+          } else if (typeof record.timeStamp === 'object') {
+            // For objects (like Moment), try toString() or direct parsing
+            if (typeof record.timeStamp.format === 'function') {
+              // It's likely a Moment object
+              normalizedDate = record.timeStamp.format('YYYY-MM-DD');
+            } else if (record.timeStamp instanceof Date) {
+              normalizedDate = moment(record.timeStamp).format('YYYY-MM-DD');
+            } else {
+              // Try to parse it as a string representation
+              normalizedDate = moment(String(record.timeStamp)).format('YYYY-MM-DD');
+            }
+          } else {
+            // Unhandled type
+            invalidCount++;
+            continue;
+          }
+          
+          // Verify the date is valid before using it
+          if (moment(normalizedDate, 'YYYY-MM-DD', true).isValid()) {
+            data[normalizedDate] = (data[normalizedDate] || 0) + 1;
+            uniqueDates.add(normalizedDate);
+            
+            // Track distribution by month for debugging
+            const month = normalizedDate.substring(0, 7); // YYYY-MM
+            dateDistribution[month] = (dateDistribution[month] || 0) + 1;
+            
+            validCount++;
+          } else {
+            invalidCount++;
+          }
+        } catch (e) {
+          invalidCount++;
+        }
+      }
+      
+      // Log summary statistics
+      console.log(`Processed ${validCount} valid dates, ${invalidCount} invalid dates`);
+      console.log(`Found ${uniqueDates.size} unique dates`);
+      console.log('Date distribution by month:', dateDistribution);
+
+      this.heatmapData = data;
+    },
+
+    createWeeksData() {
+      // Reset weeks and max count
+      this.weeks = [];
+      this.maxInRange = 0;
+      
+      const end = moment();
+      const start = end.clone().subtract(52, 'weeks');
+      const day = start.clone().startOf('week');
+      
+      console.log('Creating weeks data from', start.format('YYYY-MM-DD'), 'to', end.format('YYYY-MM-DD'));
+      
+      // Ensure we have data to display
+      if (Object.keys(this.heatmapData).length === 0) {
+        console.log('No heatmap data available to display');
+      }
+
+      // For debugging, log some sample dates from the heatmap data
+      const sampleDates = Object.keys(this.heatmapData).slice(0, 5);
+      console.log('Sample dates in heatmap data:', sampleDates);
+      
+      // Build the week data structure
+      while (day.isSameOrBefore(end)) {
+        const weekData: DayData[] = [];
+        for (let i = 0; i < 7; i++) {
+          const date = day.format('YYYY-MM-DD');
+          const count = this.heatmapData[date] || 0;
+          const dayData: DayData = {
+            date,
+            count,
+          };
+          weekData.push(dayData);
+          if (dayData.count > this.maxInRange) {
+            this.maxInRange = dayData.count;
+          }
+
+          day.add(1, 'day');
+        }
+        this.weeks.push(weekData);
+      }
+      
+      console.log('Weeks data created, maxInRange:', this.maxInRange);
+      
+      // Calculate summary stats for display
+      let totalDaysWithActivity = 0;
+      let totalActivity = 0;
+      
+      Object.values(this.heatmapData).forEach(count => {
+        totalDaysWithActivity++;
+        totalActivity += count;
+      });
+      
+      console.log(`Activity summary: ${totalActivity} activities across ${totalDaysWithActivity} days`);
+    },
+
+    getColor(count: number): string {
+      if (this.maxInRange === 0) return this.hslToString(this.inactiveColor);
+
+      const t = count === 0 ? 0 : Math.min((2 * count) / this.maxInRange, 1);
+
+      let seasonalColor: Color = this.activeColor;
+
+      if (this.enableSeasonalColors) {
+        const now = moment();
+        if (now.month() === 11 && now.date() >= 5) {
+          // Christmas colors
+          seasonalColor = Math.random() > 0.5 ? { h: 350, s: 0.8, l: 0.5 } : { h: 135, s: 0.8, l: 0.4 };
+        } else if (now.month() === 9 && now.date() >= 25) {
+          // Halloween colors
+          seasonalColor =
+            Math.random() > 0.5
+              ? { h: 0, s: 0, l: 0 }
+              : Math.random() > 0.5
+              ? { h: 30, s: 1, l: 0.5 }
+              : { h: 270, s: 1, l: 0.5 };
+        }
+      }
+
+      const h = seasonalColor.h;
+      const s = this.interpolate(this.inactiveColor.s, seasonalColor.s, t);
+      const l = this.interpolate(this.inactiveColor.l, seasonalColor.l, t);
+
+      return this.hslToString({ h, s, l });
+    },
+
+    interpolate(start: number, end: number, t: number): number {
+      return start + (end - start) * t;
+    },
+
+    hslToString(color: Color): string {
+      return `hsl(${color.h}, ${color.s * 100}%, ${color.l * 100}%)`;
+    },
+
+    showTooltip(day: DayData, event: MouseEvent) {
+      this.tooltipData = day;
+      this.tooltipStyle = {
+        position: 'absolute',
+        left: `${event.pageX + 10}px`,
+        top: `${event.pageY + 10}px`,
+      };
+    },
+
+    hideTooltip() {
+      this.tooltipData = null;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.tooltip {
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 5px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+</style>

package/src/components/PaginatingToolbar.types.ts

@@ -0,0 +1,48 @@
+export interface PaginatingToolbarProps {
+  /**
+   * Array of page numbers
+   */
+  pages: number[];
+
+  /**
+   * Current active page
+   */
+  page: number;
+
+  /**
+   * Main title displayed in the toolbar
+   */
+  title?: string;
+
+  /**
+   * Secondary text displayed next to the title
+   */
+  subtitle?: string;
+}
+
+export interface PaginatingToolbarEvents {
+  /**
+   * Navigate to the first page
+   */
+  (e: 'first'): void;
+
+  /**
+   * Navigate to the previous page
+   */
+  (e: 'prev'): void;
+
+  /**
+   * Navigate to the next page
+   */
+  (e: 'next'): void;
+
+  /**
+   * Navigate to the last page
+   */
+  (e: 'last'): void;
+
+  /**
+   * Set the page to a specific number
+   */
+  (e: 'set-page', page: number): void;
+}

package/src/components/PaginatingToolbar.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-toolbar density="compact">
+    <v-toolbar-title>
+      <span>{{ title }}</span>
+      <span v-if="subtitle" class="ms-2 text-subtitle-2">{{ subtitle }}</span>
+    </v-toolbar-title>
+    <v-spacer></v-spacer>
+    <v-btn variant="text" icon color="secondary" :disabled="page == 1" @click="$emit('first')">
+      <v-icon>mdi-page-first</v-icon>
+    </v-btn>
+    <v-btn variant="text" icon color="secondary" :disabled="page == 1" @click="$emit('prev')">
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+
+    <v-select
+      :model-value="page"
+      :items="pages"
+      class="pageSelect"
+      density="compact"
+      hide-details
+      :return-object="false"
+      variant="outlined"
+      @update:model-value="(val: unknown) => $emit('set-page', val)"
+    >
+      <template #selection="{ item }">
+        {{ item.value }}
+      </template>
+    </v-select>
+
+    <v-btn variant="text" icon color="secondary" :disabled="page == pages.length" @click="$emit('next')">
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+    <v-btn variant="text" icon color="secondary" :disabled="page == pages.length" @click="$emit('last')">
+      <v-icon>mdi-page-last</v-icon>
+    </v-btn>
+  </v-toolbar>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import type { PaginatingToolbarProps, PaginatingToolbarEvents } from './PaginatingToolbar.types';
+
+export default defineComponent({
+  name: 'PaginatingToolbar',
+
+  props: {
+    pages: {
+      type: Array as PropType<number[]>,
+      required: true,
+    },
+    page: {
+      type: Number,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  } as const,
+
+  emits: ['first', 'prev', 'next', 'last', 'set-page'],
+});
+</script>
+
+<style scoped>
+.pageSelect {
+  max-width: 60px;
+}
+</style>

package/src/components/SkMouseTrap.types.ts

@@ -0,0 +1,3 @@
+export interface SkMouseTrapProps {
+  refreshInterval?: number;
+}

package/src/components/SkMouseTrap.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-dialog v-if="display" max-width="500px" transition="dialog-transition">
+    <template #activator="{ props }">
+      <v-btn icon color="primary" v-bind="props">
+        <v-icon>mdi-keyboard</v-icon>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-toolbar color="teal" dark dense>
+        <v-toolbar-title class="text-subtitle-1">Shortcut keys:</v-toolbar-title>
+      </v-toolbar>
+      <v-list dense>
+        <v-list-item
+          v-for="hk in commands"
+          :key="Array.isArray(hk.hotkey) ? hk.hotkey.join(',') : hk.hotkey"
+          class="py-1"
+        >
+          <v-btn variant="outlined" color="primary" class="text-white" size="small">
+            {{ Array.isArray(hk.hotkey) ? hk.hotkey[0] : hk.hotkey }}
+          </v-btn>
+          <v-spacer></v-spacer>
+          <span class="text-caption ml-2">{{ hk.command }}</span>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { SkldrMouseTrap, HotKeyMetaData } from '../utils/SkldrMouseTrap';
+import { SkMouseTrapProps } from './SkMouseTrap.types';
+
+export default defineComponent({
+  name: 'SkMouseTrap',
+
+  props: {
+    refreshInterval: {
+      type: Number as PropType<SkMouseTrapProps['refreshInterval']>,
+      default: 500,
+    },
+  },
+
+  data() {
+    return {
+      commands: [] as HotKeyMetaData[],
+      display: false,
+      intervalId: null as number | null,
+    };
+  },
+
+  created() {
+    this.intervalId = window.setInterval(this.refreshState, this.refreshInterval);
+  },
+
+  beforeUnmount() {
+    if (this.intervalId !== null) {
+      clearInterval(this.intervalId);
+    }
+  },
+
+  methods: {
+    refreshState() {
+      this.commands = SkldrMouseTrap.commands;
+      this.display = this.commands.length > 0;
+    },
+  },
+});
+</script>

package/src/components/SkMouseTrapToolTip.types.ts

@@ -0,0 +1,41 @@
+export interface SkMouseTrapToolTipProps {
+  /**
+   * The keyboard shortcut(s) to bind to this tooltip.
+   * Can be a single string like "ctrl+s" or an array of strings.
+   */
+  hotkey: string | string[];
+
+  /**
+   * Descriptive name for the keyboard shortcut.
+   * Will be displayed in the shortcut dialog.
+   */
+  command: string;
+
+  /**
+   * Whether the shortcut is currently disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * The position of the tooltip relative to the wrapped element.
+   * @default 'top'
+   */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+
+  /**
+   * Whether to show the tooltip when the Ctrl key is pressed.
+   * @default true
+   */
+  showTooltip?: boolean;
+
+  /**
+   * The visual effect to apply to the wrapped element when Ctrl is pressed.
+   * @default 'glow'
+   */
+  highlightEffect?: 'glow' | 'scale' | 'border' | 'none';
+}
+
+export interface SkMouseTrapToolTipEmits {
+  (event: 'hotkey-triggered', hotkey: string | string[]): void;
+}