@wazobiatech/wazui 0.0.10 → 0.0.12

package/src/types/post.types.ts

@@ -0,0 +1,121 @@
+export interface Category {
+  id?: string;
+  name: string;
+  description?: string | null;
+  created_at?: string;
+  updated_at?: string;
+  uuid: string;
+  slug?: string;
+  subCategories?: Category[];
+  parent?: Category;
+}
+export interface Tag {
+  id?: string;
+  name: string;
+  description?: string | null;
+  created_at?: string;
+  updated_at?: string;
+  uuid: string;
+  slug?: string;
+  subCategories?: Category[];
+  parent?: Category;
+}
+
+interface ImageCoordinates {
+  left: number | null;
+  top: number | null;
+  right: number | null;
+  bottom: number | null;
+}
+
+interface ScreenCoordinates {
+  desktop: ImageCoordinates;
+  tablet: ImageCoordinates;
+  mobile: ImageCoordinates;
+}
+
+interface FeaturedImage {
+  __typename: string;
+  title: string;
+  uuid: string;
+  url: string;
+  caption: string;
+  alternative_text: string;
+  metadata: string;
+  created_at: string;
+  updated_at: string;
+  src: string;
+  coordinates: ScreenCoordinates;
+  screenType: string;
+  width: number;
+  height: number;
+  original: string;
+}
+
+interface PostConfig {
+  has_related_posts: boolean | null;
+  is_comments_enabled: boolean;
+  is_feature_article: boolean;
+  is_in_sitemap: boolean;
+  permalink: string;
+  related_posts_config: string;
+  schema: string;
+  social_preview_config: {
+    open_graph: object;
+    twitter_cards: object;
+    seo_cards: {
+      'seo:image': FeaturedImage;
+    };
+  };
+}
+
+export type Post = {
+  id?: string;
+  uuid: string;
+  category_name?: string;
+  created_at?: string;
+  updated_at?: string;
+  excerpt: string;
+  author_uuid: string;
+  featured_image: string;
+  content: string;
+  categories: Category[];
+  tags: Tag[];
+  language_attr: string;
+  slug: string;
+  title: string;
+  metadata: string;
+  postConfig?: PostConfig;
+  status: number;
+  statistics: {
+    isLoading: boolean; shares: number; totalPageViews: number 
+};
+  author?: { uuid: string; name: string };
+};
+
+// Article metadata type definitions
+export interface OpenGraphData {
+  'og:title'?: string;
+  'og:image'?: string;
+  'og:description'?: string;
+}
+
+export interface TwitterCardsData {
+  'twitter:title'?: string;
+  'twitter:description'?: string;
+  'twitter:image'?: string;
+}
+export interface SEOCardsData {
+  'seo:title'?: string;
+  'seo:description'?: string;
+  'seo:image'?: string;
+  'seo:url'?: string;
+}
+
+export interface ArticleMetadata {
+  title?: string;
+  description?: string;
+  open_graph?: OpenGraphData;
+  seo_cards?: SEOCardsData;
+  twitter_cards?: TwitterCardsData;
+}

package/src/types/theme.types.ts

@@ -0,0 +1,10 @@
+export type Theme = 'dark' | 'light' | 'system' | 'brand';
+export type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+export type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};

package/src/types/users.types.ts

@@ -0,0 +1,5 @@
+export type UserConfig = {
+  uuid: string;
+  name: string;
+  email: string;
+};

package/src/utils/apolloClient.ts

@@ -0,0 +1,160 @@
+import { env } from '../env';
+import { ApolloClient, InMemoryCache, FetchPolicy, createHttpLink } from '@apollo/client';
+import { setContext } from '@apollo/client/link/context';
+import UploadHttpLink from 'apollo-upload-client/UploadHttpLink.mjs';
+import { fetchMercuryToken } from '../hooks/useMercuryProjectToken';
+
+const createMuseAuthLink = (uri: string, isMuseClient: boolean = false) => {
+  return setContext(async (_operation, { headers: contextHeaders }) => {
+    const isMuseEndpoint = isMuseClient || uri.includes('muse');
+
+    if (isMuseEndpoint) {
+      try {
+        const response = await fetchMercuryToken();
+        const mercuryToken = response.token;
+
+        const newHeaders = {
+          ...contextHeaders,
+          'X-Project-Token': `${mercuryToken}`,
+        };
+
+        return {
+          headers: newHeaders,
+        };
+      } catch (error) {
+        console.log('Error fetching Mercury token:', error);
+        return { headers: contextHeaders };
+      }
+    }
+
+    return { headers: contextHeaders };
+  });
+};
+
+export const createApolloClient = (
+  uri: string,
+  options?: {
+    headers?: Record<string, string>;
+    fetchPolicy?:
+      | 'cache-first'
+      | 'cache-and-network'
+      | 'network-only'
+      | 'cache-only'
+      | 'no-cache'
+      | 'standby';
+    errorPolicy?: 'none' | 'ignore' | 'all';
+    isMuseClient?: boolean;
+  }
+) => {
+  const isMuseClient = options?.isMuseClient;
+
+  const defaultHeaders = {
+    // 'X-Internal-Auth': env.VITE_MUSE_TOKEN as string,
+  };
+
+  const headers = options?.headers ? { ...defaultHeaders, ...options.headers } : defaultHeaders;
+  const fetchPolicy = options?.fetchPolicy || 'no-cache';
+  const errorPolicy = options?.errorPolicy || 'all';
+
+  const httpLink = createHttpLink({
+    uri,
+  });
+
+  const authLink = setContext((_, { headers: contextHeaders }) => {
+    return {
+      headers: {
+        ...contextHeaders,
+        ...headers,
+      },
+    };
+  });
+
+  const museAuthLink = createMuseAuthLink(uri, isMuseClient);
+
+  const client = new ApolloClient({
+    link: museAuthLink.concat(authLink).concat(httpLink),
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: fetchPolicy as FetchPolicy,
+        errorPolicy,
+      },
+      query: {
+        fetchPolicy: fetchPolicy as FetchPolicy,
+        errorPolicy,
+      },
+    },
+  });
+
+  return client;
+};
+
+export const createApolloUploadClient = (
+  uri: string,
+  options?: {
+    headers?: Record<string, string>;
+    fetchPolicy?:
+      | 'cache-first'
+      | 'cache-and-network'
+      | 'network-only'
+      | 'cache-only'
+      | 'no-cache'
+      | 'standby';
+    errorPolicy?: 'none' | 'ignore' | 'all';
+    isMuseClient?: boolean;
+  }
+) => {
+  const defaultHeaders = {
+    'X-Internal-Auth': env.VITE_MUSE_TOKEN as string,
+  };
+
+  const headers = options?.headers ? { ...defaultHeaders, ...options.headers } : defaultHeaders;
+  const fetchPolicy = options?.fetchPolicy || 'no-cache';
+  const errorPolicy = options?.errorPolicy || 'all';
+
+  const uploadLink = new UploadHttpLink({
+    uri,
+  });
+
+  const authLink = setContext((_, { headers: contextHeaders }) => {
+    return {
+      headers: {
+        ...contextHeaders,
+        ...headers,
+      },
+    };
+  });
+
+  const museAuthLink = createMuseAuthLink(uri, options?.isMuseClient);
+
+  const client = new ApolloClient({
+    link: museAuthLink.concat(authLink).concat(uploadLink),
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: fetchPolicy as FetchPolicy,
+        errorPolicy,
+      },
+      query: {
+        fetchPolicy: fetchPolicy as FetchPolicy,
+        errorPolicy,
+      },
+    },
+  });
+
+  return client;
+};
+
+export const blogClient = createApolloClient(env.VITE_GRAPH_QL_URL as string, {
+  isMuseClient: true,
+});
+
+export const blogClientNew = createApolloClient(env.VITE_MUSE_GRAPHQL_URL as string, {
+  isMuseClient: true,
+});
+
+export const museClient = createApolloClient(env.VITE_MUSE_GRAPHQL_URL as string, {
+  isMuseClient: true,
+});
+
+export const recipeClient = createApolloClient(env.VITE_RECIPE_GRAPHQL_URL as string);

package/src/utils/articleMetadata.ts

@@ -0,0 +1,97 @@
+import {
+  ArticleMetadata,
+  OpenGraphData,
+  SEOCardsData,
+  TwitterCardsData,
+} from '../types/post.types';
+
+export class ArticleMetadataConverter {
+  /**
+   * Converts a partial record to a properly typed ArticleMetadata object
+   * Validates and sanitizes data while preserving type safety
+   */
+  static fromRecord(record: Record<string, string | Record<string, string>>): ArticleMetadata {
+    const metadata: ArticleMetadata = {};
+
+    // Extract basic fields
+    if (record.title && typeof record.title === 'string') {
+      metadata.title = record.title.trim();
+    }
+
+    if (record.description && typeof record.description === 'string') {
+      metadata.description = record.description.trim();
+    }
+
+    // Extract Open Graph data
+    if (record.open_graph && typeof record.open_graph === 'object') {
+      metadata.open_graph = this.extractOpenGraphData(record.open_graph);
+    }
+
+    // Extract Twitter Cards data
+    if (record.twitter_cards && typeof record.twitter_cards === 'object') {
+      metadata.twitter_cards = this.extractTwitterCardsData(record.twitter_cards);
+    }
+    // Extract SEO Cards data
+    if (record.seo_cards && typeof record.seo_cards === 'object') {
+      metadata.seo_cards = this.extractSEOCardsData(record.seo_cards);
+    }
+
+    return metadata;
+  }
+
+  /**
+   * Extracts and validates Open Graph data
+   */
+  private static extractOpenGraphData(ogData: Record<string, string>): OpenGraphData {
+    const openGraph: OpenGraphData = {};
+
+    // String fields
+    const stringFields = ['og:title', 'og:image', 'og:description'] as const;
+
+    for (const field of stringFields) {
+      if (ogData[field] && typeof ogData[field] === 'string') {
+        openGraph[field] = ogData[field].trim();
+      }
+    }
+    return openGraph;
+  }
+
+  /**
+   * Extracts and validates Twitter Cards data
+   */
+  private static extractTwitterCardsData(twitterData: Record<string, string>): TwitterCardsData {
+    const twitterCards: TwitterCardsData = {};
+
+    const stringFields = ['twitter:title', 'twitter:description', 'twitter:image'] as const;
+
+    for (const field of stringFields) {
+      if (twitterData[field] && typeof twitterData[field] === 'string') {
+        twitterCards[field] = twitterData[field].trim();
+      }
+    }
+
+    return twitterCards;
+  }
+  /**
+   * Extracts and validates Twitter Cards data
+   */
+  private static extractSEOCardsData(seoData: Record<string, string>): SEOCardsData {
+    const seoCards: SEOCardsData = {};
+
+    const stringFields = ['seo:title', 'seo:description', 'seo:image', 'seo:url'] as const;
+
+    for (const field of stringFields) {
+      if (seoData[field] && typeof seoData[field] === 'string') {
+        seoCards[field] = seoData[field].trim();
+      }
+    }
+
+    return seoCards;
+  }
+  /**
+   * Converts ArticleMetadata back to a plain object
+   */
+  static toRecord(metadata: ArticleMetadata): Record<string, string | object> {
+    return JSON.parse(JSON.stringify(metadata));
+  }
+}

package/src/utils/audio.ts

@@ -0,0 +1,10 @@
+export const playAudio = (file: string) => {
+  try {
+    new Audio(file).play().catch(error => {
+      console.log(error);
+    });
+  } catch (error) {
+    console.log(error);
+    /* ignore autoplay restrictions in tests */
+  }
+};