@wazobiatech/wazui 0.0.3 → 0.0.4

package/src/utils/utils.ts

@@ -0,0 +1,638 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import he from 'he';
+import { Column } from '@tanstack/react-table';
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+export function generateAutoGridColsClass<TData>(columns: Column<TData, unknown>[]) {
+  const colDefs = columns.map(col => {
+    const widthMeta = col.columnDef.meta?.width;
+    return widthMeta === 'grow' ? '1fr' : 'auto';
+  });
+
+  const tailwindClass = `grid-cols-[${colDefs.join('_')}]`;
+  const cssValue = colDefs.join(' '); // e.g., "auto 1fr auto"
+
+  return {
+    tailwindClass,
+    cssValue,
+  };
+}
+
+export function cleanHTML(input: string = ''): string {
+  if (!input) return '';
+  const noTags = input?.replace?.(/<[^>]*>/g, '');
+  return he.decode(noTags);
+}
+
+export const getNameInitials = (name: string): string => {
+  if (!name) return '';
+
+  return name
+    .split(' ')
+    .map(word => word[0]?.toUpperCase())
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('');
+};
+
+export function htmlToExcerpt(
+  html: string = '',
+  options: {
+    maxLength?: number; // Maximum excerpt length
+    minLength?: number; // Minimum length before truncating
+    stripImages?: boolean; // Remove image tags
+    stripLinks?: boolean; // Keep link text but remove href
+    preserveFormatting?: boolean; // Keep basic formatting like <strong>, <em>
+    ellipsis?: string; // What to add at the end when truncated
+    sentenceAware?: boolean; // Try to end at sentence boundaries
+    removeEmptyParagraphs?: boolean; // Remove empty <p> tags
+  } = {}
+) {
+  const {
+    maxLength = 160,
+    minLength = 50,
+    stripImages = true,
+    stripLinks = false,
+    preserveFormatting = false,
+    ellipsis = '...',
+    sentenceAware = true,
+    removeEmptyParagraphs = true,
+  } = options;
+
+  if (!html || typeof html !== 'string') {
+    return '';
+  }
+
+  let cleanText = html;
+
+  // Remove script and style tags completely
+  cleanText = cleanText.replace(/<(script|style)[^>]*>[\s\S]*?<\/(script|style)>/gi, '');
+
+  // Remove comments
+  cleanText = cleanText.replace(/<!--[\s\S]*?-->/g, '');
+
+  // Remove images if specified
+  if (stripImages) {
+    cleanText = cleanText.replace(/<img[^>]*>/gi, '');
+  }
+
+  // Handle links
+  if (stripLinks) {
+    // Remove links but keep the text content
+    cleanText = cleanText.replace(/<a[^>]*>(.*?)<\/a>/gi, '$1');
+  } else {
+    // Keep links as text (remove href but keep content)
+    cleanText = cleanText.replace(/<a[^>]*>(.*?)<\/a>/gi, '$1');
+  }
+
+  // Remove empty paragraphs
+  if (removeEmptyParagraphs) {
+    cleanText = cleanText.replace(/<p[^>]*>\s*<\/p>/gi, '');
+  }
+
+  // Preserve basic formatting if specified
+  if (preserveFormatting) {
+    // Convert basic formatting to plain text equivalents
+    cleanText = cleanText.replace(/<(strong|b)[^>]*>(.*?)<\/(strong|b)>/gi, '**$2**');
+    cleanText = cleanText.replace(/<(em|i)[^>]*>(.*?)<\/(em|i)>/gi, '_$2_');
+  }
+
+  // Convert block elements to spaces before removing tags
+  cleanText = cleanText.replace(
+    /<\/(p|div|h[1-6]|li|td|th|blockquote|section|article)[^>]*>/gi,
+    '</$1> '
+  );
+  cleanText = cleanText.replace(/<(br|hr)[^>]*\/?>/gi, ' ');
+  cleanText = cleanText.replace(/<\/(ul|ol|dl)[^>]*>/gi, '</$1> ');
+
+  // Remove all remaining HTML tags
+  cleanText = cleanText.replace(/<[^>]*>/g, '');
+
+  // Decode HTML entities
+  cleanText = cleanText
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    // eslint-disable-next-line quotes
+    .replace(/&#39;/g, "'")
+    // eslint-disable-next-line quotes
+    .replace(/&apos;/g, "'");
+
+  // Clean up whitespace but preserve sentence spacing
+  cleanText = cleanText
+    .replace(/\s+/g, ' ') // Multiple spaces to single space
+    .replace(/\.\s+/g, '. ') // Ensure space after periods
+    .replace(/!\s+/g, '! ') // Ensure space after exclamation marks
+    .replace(/\?\s+/g, '? ') // Ensure space after question marks
+    .trim(); // Remove leading/trailing spaces
+
+  // If text is shorter than minLength, return as is
+  if (cleanText.length <= minLength) {
+    return cleanText;
+  }
+
+  // If text is within maxLength, return as is
+  if (cleanText.length <= maxLength) {
+    return cleanText;
+  }
+
+  // Truncate text
+  let truncated = cleanText.substring(0, maxLength);
+
+  // If sentence-aware truncation is enabled
+  if (sentenceAware) {
+    // Try to end at sentence boundary
+    const lastSentence = truncated.lastIndexOf('.');
+    const lastExclamation = truncated.lastIndexOf('!');
+    const lastQuestion = truncated.lastIndexOf('?');
+
+    const lastPunctuation = Math.max(lastSentence, lastExclamation, lastQuestion);
+
+    // If we found sentence-ending punctuation and it's not too early
+    if (lastPunctuation > minLength) {
+      truncated = truncated.substring(0, lastPunctuation + 1);
+      return truncated;
+    }
+
+    // Otherwise, try to end at word boundary
+    const lastSpace = truncated.lastIndexOf(' ');
+    if (lastSpace > minLength) {
+      truncated = truncated.substring(0, lastSpace);
+    }
+  } else {
+    // Simple word boundary truncation
+    const lastSpace = truncated.lastIndexOf(' ');
+    if (lastSpace > minLength) {
+      truncated = truncated.substring(0, lastSpace);
+    }
+  }
+
+  return truncated + ellipsis;
+}
+
+export const shortenLargeNumber = (num: number): string => {
+  if (num >= 100000000) {
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'B';
+  }
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+  }
+  return num.toString();
+};
+
+// =============================================================================
+// DATE UTILITIES
+// =============================================================================
+
+interface DateRange {
+  startDate: string; // Format: "YYYY-MM-DD HH:mm:ss"
+  endDate: string;
+}
+
+interface FilterOptions {
+  search?: string;
+  categories?: string[];
+  dateRange?: DateRange;
+}
+
+/**
+ * Get default date range (last month) in Muse datetime format
+ */
+export function getLastMonthDateRange(): DateRange {
+  const now = new Date();
+  const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+  const lastMonthEnd = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59);
+
+  return {
+    startDate: formatDateForMuse(lastMonth),
+    endDate: formatDateForMuse(lastMonthEnd),
+  };
+}
+
+/**
+ * Format date for Muse API (YYYY-MM-DD HH:mm:ss)
+ */
+export function formatDateForMuse(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+/**
+ * Convert FilterOptions dateRange to Muse format
+ */
+export function getEffectiveDateRange(filters?: FilterOptions): DateRange {
+  if (filters?.dateRange) {
+    // Ensure datetime format
+    return {
+      startDate: filters.dateRange.startDate.includes(' ')
+        ? filters.dateRange.startDate
+        : `${filters.dateRange.startDate} 00:00:00`,
+      endDate: filters.dateRange.endDate.includes(' ')
+        ? filters.dateRange.endDate
+        : `${filters.dateRange.endDate} 23:59:59`,
+    };
+  }
+  return getLastMonthDateRange();
+}
+
+/**
+ * Convert date range with start/end Date objects to DateRange format
+ */
+export function toFilterDateRange(dateRange: { start: Date; end: Date }): DateRange {
+  return {
+    startDate: formatDateForMuse(dateRange.start),
+    endDate: formatDateForMuse(dateRange.end),
+  };
+}
+
+/**
+ * Convert DateRange format back to Date objects
+ */
+export function fromFilterDateRange(dateRange: DateRange): { start: Date; end: Date } {
+  return {
+    start: new Date(dateRange.startDate),
+    end: new Date(dateRange.endDate),
+  };
+}
+
+/**
+ * Format duration from seconds to readable format (e.g., "12.5 min" or "2.3 hrs")
+ */
+export function formatDuration(seconds: number): string {
+  if (seconds < 60) {
+    return `${Math.round(seconds)}s`;
+  } else if (seconds < 3600) {
+    return `${(seconds / 60).toFixed(1)} min`;
+  } else {
+    return `${(seconds / 3600).toFixed(1)} hrs`;
+  }
+}
+
+/**
+ * Calculate time ago from date string
+ */
+export function calculateTimeAgo(dateString: string): string {
+  try {
+    const diffInDays = Math.floor(
+      (Date.now() - new Date(dateString).getTime()) / (1000 * 60 * 60 * 24)
+    );
+    if (diffInDays === 0) return 'Today';
+    if (diffInDays === 1) return '1 day ago';
+    if (diffInDays < 7) return `${diffInDays} days ago`;
+    if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} weeks ago`;
+    if (diffInDays < 365) return `${Math.floor(diffInDays / 30)} months ago`;
+    return `${Math.floor(diffInDays / 365)} years ago`;
+  } catch {
+    return 'Recently';
+  }
+}
+
+// =============================================================================
+// PARSING UTILITIES
+// =============================================================================
+
+/**
+ * Parse author ID from metadata JSON
+ */
+export function parseAuthorId(metadata: string | undefined): string | undefined {
+  if (!metadata) return undefined;
+  try {
+    const parsed = JSON.parse(metadata);
+    return parsed.author_uuid || parsed.author_id;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Parse featured image from various formats
+ */
+export function parseFeaturedImage(img: string | { src?: string } | undefined): string {
+  const fallback =
+    'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=400&h=300&fit=crop';
+  if (!img) return fallback;
+  try {
+    if (typeof img === 'string') {
+      const parsed = JSON.parse(img);
+      return parsed.src || fallback;
+    }
+    return img.src || fallback;
+  } catch {
+    return typeof img === 'string' ? img : fallback;
+  }
+}
+
+/**
+ * Parse user avatar from users.json format
+ * Avatar is stored as double-escaped JSON: "{\"src\":\"https://...\"}"
+ */
+export function parseUserAvatar(avatar: string | null | undefined): string | undefined {
+  if (!avatar) return undefined;
+  try {
+    // First parse removes outer quotes, second parse gets the object
+    let parsed = avatar;
+    if (typeof parsed === 'string') {
+      // Try to parse as JSON (might be double-encoded)
+      try {
+        parsed = JSON.parse(parsed);
+      } catch {
+        // Not JSON, might be plain URL
+      }
+    }
+    if (typeof parsed === 'string') {
+      // Try second parse for double-encoded JSON
+      try {
+        parsed = JSON.parse(parsed);
+      } catch {
+        // Still not JSON, return as-is if it looks like URL
+        return parsed.startsWith('http') ? parsed : undefined;
+      }
+    }
+    // Now parsed should be an object with src
+    if (typeof parsed === 'object' && parsed !== null && 'src' in parsed) {
+      return (parsed as { src: string }).src;
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Parse analytics from post metadata (if synced from Phoenix)
+ */
+export function parseAnalyticsFromMetadata(metadata: string | undefined): {
+  totalPageViews: number;
+  uniqueUsers: number;
+  averageSessionDuration: number | null;
+} | null {
+  if (!metadata) return null;
+  try {
+    const parsed = JSON.parse(metadata);
+    if (parsed.analytics) {
+      return {
+        totalPageViews: parsed.analytics.totalPageViews || 0,
+        uniqueUsers: parsed.analytics.uniqueUsers || 0,
+        averageSessionDuration: parsed.analytics.averageSessionDuration,
+      };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+// =============================================================================
+// FILTER BUILDERS
+// =============================================================================
+
+/**
+ * Build Muse filter for published posts in date range (org-wide)
+ * Note: We only filter by published_at - if a post has published_at, it's published
+ */
+export function buildPublishedPostsFilter(dateRange: DateRange) {
+  return {
+    published_at: {
+      gte: dateRange.startDate,
+      lte: dateRange.endDate,
+    },
+  };
+}
+
+/**
+ * Build Muse filter for draft posts in date range (org-wide)
+ * Note: Drafts have created_at but no published_at
+ */
+export function buildDraftPostsFilter(dateRange: DateRange) {
+  return {
+    status: { eq: 1 }, // Draft - may need adjustment based on actual Muse status values
+    created_at: {
+      gte: dateRange.startDate,
+      lte: dateRange.endDate,
+    },
+  };
+}
+
+// =============================================================================
+// ANALYTICS UTILITIES
+// =============================================================================
+
+interface PhoenixPageStats {
+  pageId: string;
+  pageUrl: string;
+  totalPageViews: number;
+  uniqueUsers: number;
+  averageSessionDuration?: number | null;
+  totalEvents: number;
+  lastActivity?: string;
+}
+
+/**
+ * Get engagement value from Phoenix stats (in seconds)
+ */
+export function getEngagementValue(stat: PhoenixPageStats): number {
+  return stat.averageSessionDuration || 0;
+}
+
+/**
+ * Strips invalid characters from a URL string
+ * @param url - The URL string to sanitize
+ * @param options - Configuration options for sanitization
+ * @returns Sanitized URL string
+ */
+export function stripInvalidArticleSlugChars(
+  url: string,
+  options: {
+    allowFragments?: boolean;
+    allowQueryParams?: boolean;
+    strictMode?: boolean;
+  } = {}
+): string {
+  const { allowFragments = true, allowQueryParams = true, strictMode = false } = options;
+
+  if (!url || typeof url !== 'string') {
+    return '';
+  }
+
+  let sanitizedUrl = url.trim();
+
+  // Handle different sanitization levels
+  if (strictMode) {
+    // Strict mode: only allow basic URL characters
+    sanitizedUrl = sanitizedUrl.replace(/\s+/g, '-'); // Replace whitespace with hyphens
+    sanitizedUrl = sanitizedUrl.replace(/'s\b/g, ''); // Replace 's at word boundaries with just 's'
+    sanitizedUrl = sanitizedUrl.replace(/[^a-zA-Z0-9\-_~/#[\]()]/g, '');
+  } else {
+    // Standard mode: remove common problematic characters
+    sanitizedUrl = sanitizedUrl
+      .replace(/[\s]+/g, '-') // Replace spaces with hyphens
+      .replace(/[<>"{}|\\^`]/g, '') // Remove clearly invalid characters
+      .replace(/[^\x20-\x7E]/g, '') // Remove non-printable ASCII characters
+      .replace(/\s/g, ''); // Remove any remaining whitespace
+  }
+
+  // Handle fragments and query parameters based on options
+  if (!allowFragments) {
+    sanitizedUrl = sanitizedUrl.split('#')[0] as string;
+  }
+
+  if (!allowQueryParams) {
+    sanitizedUrl = sanitizedUrl.split('?')[0] as string;
+  }
+
+  // Clean up multiple consecutive special characters
+  sanitizedUrl = sanitizedUrl
+    .replace(/[-]{2,}/g, '-') // Multiple hyphens to single hyphen
+    .replace(/[.]{2,}/g, '.') // Multiple dots to single dot
+    .replace(/[/]{2,}/g, '//') // Keep double slashes for protocol, but remove more
+    .replace(/^[-.]|[-.]$/g, ''); // Remove leading/trailing hyphens or dots
+
+  return sanitizedUrl;
+}
+
+export function extractArticleSlugComponents(input: string) {
+  if (!input) {
+    return { categorySlug: '', articleSlug: '' };
+  }
+
+  const lastSlashIndex = input.lastIndexOf('/');
+
+  if (lastSlashIndex === -1) {
+    return {
+      categorySlug: '',
+      articleSlug: input.replace('/', ''),
+    };
+  }
+
+  const categorySlug = input.substring(0, lastSlashIndex);
+  const articleSlug = input.substring(lastSlashIndex + 1);
+
+  return {
+    categorySlug,
+    articleSlug,
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function parseRecursiveHelper(data: string): any {
+  if (typeof data !== 'string' || data === '') return data;
+
+  try {
+    const parsedData = JSON.parse(data);
+    if (typeof parsedData === 'string') {
+      return parseRecursiveHelper(parsedData);
+    }
+    return parsedData;
+  } catch {
+    return { src: data };
+  }
+}
+
+export const parseRecursive = (data: string) => {
+  const parsedData = parseRecursiveHelper(data);
+  try {
+    const temp = JSON.parse(parsedData?.src);
+    return temp;
+  } catch {
+    return parsedData;
+  }
+};
+
+interface DateRange {
+  startDate: string; // Format: "YYYY-MM-DD HH:mm:ss"
+  endDate: string;
+}
+
+interface MetricChangeResult {
+  change: string;
+  changeType: 'positive' | 'negative';
+}
+
+/**
+ * Calculate the previous period date range based on current period
+ *
+ * Example:
+ * - Current: Nov 1-30 → Previous: Oct 1-30
+ * - Current: Nov 15-30 (15 days) → Previous: Oct 31 - Nov 14 (15 days before)
+ */
+export function getPreviousPeriodDateRange(currentDateRange: DateRange): DateRange {
+  const start = new Date(currentDateRange.startDate);
+  const end = new Date(currentDateRange.endDate);
+
+  // Calculate the duration in milliseconds
+  const durationMs = end.getTime() - start.getTime();
+
+  // Shift back by the same duration
+  // Previous period ends 1ms before current period starts
+  const prevEnd = new Date(start.getTime() - 1);
+  const prevStart = new Date(prevEnd.getTime() - durationMs);
+
+  // Use your existing formatDateForMuse function or format manually
+  const formatDate = (date: Date): string => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  };
+
+  return {
+    startDate: formatDate(prevStart),
+    endDate: formatDate(prevEnd),
+  };
+}
+
+/**
+ * Format the change text for dashboard metrics
+ *
+ * Examples:
+ * - (45, 33) → { change: "+12 from last month", changeType: "positive" }
+ * - (20, 32) → { change: "-12 from last month", changeType: "negative" }
+ * - (0, 0)   → { change: "No change from last month", changeType: "positive" }
+ * - (50, 0)  → { change: "+50 from last month", changeType: "positive" }
+ */
+export function formatMetricChangeText(
+  current: number,
+  previous: number,
+  suffix: string = ''
+): MetricChangeResult {
+  const diff = current - previous;
+
+  // Both zero - no change
+  if (previous === 0 && current === 0) {
+    return {
+      change: 'No change from last month',
+      changeType: 'positive',
+    };
+  }
+
+  // Previous was zero but now has value - all positive
+  if (previous === 0) {
+    return {
+      change: `+${current}${suffix} from last month`,
+      changeType: 'positive',
+    };
+  }
+
+  // Normal case - calculate difference
+  const sign = diff >= 0 ? '+' : '';
+  return {
+    change: `${sign}${diff}${suffix} from last month`,
+    changeType: diff >= 0 ? 'positive' : 'negative',
+  };
+}

package/src/utils/videos.ts

@@ -0,0 +1,29 @@
+export const getYoutubeMatch = (url: string) => {
+  const match =
+    url.match(/^(?:(https?):\/\/)?(?:(?:www|m)\.)?youtube\.com\/watch.*v=([a-zA-Z0-9_-]+)/) ||
+    url.match(/^(?:(https?):\/\/)?(?:(?:www|m)\.)?youtu\.be\/([a-zA-Z0-9_-]+)/) ||
+    url.match(/^.*(youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#&?]*).*/);
+  return match;
+};
+export const getVimeoMatch = (url: string) => {
+  const match = url.match(/^(?:(https?):\/\/)?(?:www\.)?vimeo\.com\/(\d+)/);
+  return match;
+};
+export const getVideoUrl = (url: string) => {
+  const youtubeMatch = getYoutubeMatch(url);
+
+  if (youtubeMatch && youtubeMatch[2]?.length === 11) {
+    return {
+      embed: true,
+      url: 'https' + '://www.youtube.com/embed/' + youtubeMatch[2] + '?showinfo=0',
+    };
+  }
+  const vimeoMatch = getVimeoMatch(url);
+  if (vimeoMatch) {
+    return {
+      embed: true,
+      url: (vimeoMatch[1] || 'https') + '://player.vimeo.com/video/' + vimeoMatch[2] + '/',
+    };
+  }
+  return { url: url, embed: false };
+};

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />