@wazobiatech/wazui 0.0.4 → 0.0.6

package/src/decorators/ActionModalDecorator.tsx

@@ -1,10 +0,0 @@
-import { WazuiActionModalProvider } from '@/components/wazui/WazuiActionModal/provider';
-import { Decorator } from '@storybook/react';
-
-export const withActionModalProvider: Decorator = Story => {
-  return (
-    <WazuiActionModalProvider>
-      <Story />
-    </WazuiActionModalProvider>
-  );
-};

package/src/decorators/ApolloDecorator.tsx

@@ -1,19 +0,0 @@
-import { createApolloClient } from '@/utils/apolloClient';
-import { ApolloProvider } from '@apollo/client/react';
-import { env } from '@/env';
-import { Decorator } from '@storybook/react';
-
-export const withApollo: Decorator = (Story, context) => {
-  const apolloConfig = context.parameters.apollo;
-
-  return (
-    // use muse endpoint as default
-
-    <ApolloProvider client={createApolloClient(apolloConfig?.uri || env.VITE_MUSE_ENDPOINT)}>
-      <Story />
-      <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'></script>
-      <script src='https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js'></script>
-      <script src='https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js'></script>
-    </ApolloProvider>
-  );
-};

package/src/decorators/DolosApolloDecorator.tsx

@@ -1,31 +0,0 @@
-import { ApolloClient, InMemoryCache } from '@apollo/client';
-import { ApolloProvider } from '@apollo/client/react';
-import { Decorator } from '@storybook/react';
-import { QueryClientProvider } from '@tanstack/react-query';
-// import createUploadLink from 'apollo-upload-client/createUploadLink.mjs';
-import UploadHttpLink from 'apollo-upload-client/UploadHttpLink.mjs';
-import { createTestQueryClient } from './JestDecorators';
-import { env } from '@/env';
-
-export const dolosApolloClient = new ApolloClient({
-  cache: new InMemoryCache(),
-  link: new UploadHttpLink({ uri: env.VITE_DOLOS_URL }),
-});
-
-export const withDolosApollo: Decorator = Story => {
-  return (
-    <ApolloProvider client={dolosApolloClient}>
-      <Story />
-    </ApolloProvider>
-  );
-};
-
-export const dolosTestProviders = ({ children }: { children: React.ReactNode }) => {
-  const queryClient = createTestQueryClient();
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ApolloProvider client={dolosApolloClient}>{children}</ApolloProvider>
-    </QueryClientProvider>
-  );
-};

package/src/decorators/JestDecorators.tsx

@@ -1,34 +0,0 @@
-import { ApolloClient } from '@apollo/client';
-import { ApolloProvider } from '@apollo/client/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createApolloClient } from '@/utils/apolloClient';
-import { WazuiActionModalProvider } from '@/components/wazui/WazuiActionModal/provider';
-
-// Create test clients with mocked responses
-export const createTestQueryClient = () =>
-  new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-    },
-  });
-
-// Create a wrapper for both providers
-export const AllTestProviders = ({
-  children,
-}: {
-  children: React.ReactNode;
-  apolloClient?: ApolloClient;
-}) => {
-  const queryClient = createTestQueryClient();
-  const client = createApolloClient('https://muse.hogfort.com/graphql');
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <WazuiActionModalProvider>
-        <ApolloProvider client={client}>{children}</ApolloProvider>
-      </WazuiActionModalProvider>
-    </QueryClientProvider>
-  );
-};

package/src/decorators/ReactQueryDecorator.tsx

@@ -1,13 +0,0 @@
-import { Decorator } from '@storybook/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
-const queryClient = new QueryClient();
-export const withReactQuery: Decorator = Story => {
-  return (
-    <QueryClientProvider client={queryClient}>
-      {/* <ReactQueryDevtools initialIsOpen /> */}
-      <Story />
-    </QueryClientProvider>
-  );
-};

package/src/decorators/RouterDecorator.tsx

@@ -1,5 +0,0 @@
-import { Decorator } from '@storybook/react';
-
-export const withRouter: Decorator = Story => {
-  return <Story />;
-};

package/src/env.ts

@@ -1,99 +0,0 @@
-import { z } from 'zod';
-
-const envSchema = z.object({
-  VITE_PORTAL_GRAPHQL_ENDPOINT: z.string(),
-  VITE_DOLOS_URL: z.string(),
-  VITE_DOLOS_TRANSFORMATION_ENDPOINT: z.string(),
-  VITE_MUSE_TOKEN: z.string(),
-  VITE_MUSE_ENDPOINT: z.string(),
-  VITE_RECIPES_ENDPOINT: z.string(),
-  VITE_PHOENIX_ENDPOINT: z.string(),
-  VITE_MERCURY_TOKEN_ENDPOINT: z.string(),
-  VITE_ATHENS_APP_ID: z.string(),
-  VITE_ATHENS_APP_SECRET: z.string(),
-  VITE_PROJECT_TOKEN: z.string(),
-  VITE_REVALIDATION_TWISTEDFOOD_TOKEN: z.string(),
-  VITE_REVALIDATION_VT_TOKEN: z.string(),
-  VITE_GRAPH_QL_URL: z.string().optional(),
-  VITE_MUSE_GRAPHQL_URL: z.string().optional(),
-  VITE_RECIPE_GRAPHQL_URL: z.string().optional(),
-});
-
-const getEnvironmentVariables = () => {
-  // In Next.js environment, use process.env; in Vite environment, use import.meta.env
-  const isViteEnvironment = typeof import.meta !== 'undefined' && (import.meta as unknown as { env: Record<string, string | undefined> }).env;
-  const isNextEnvironment = typeof process !== 'undefined' && process.env;
-
-  if (process.env.NODE_ENV === 'test') {
-    return {
-      VITE_PORTAL_GRAPHQL_ENDPOINT: process.env.VITE_DOLOS_URL ?? 'https://fallback.test',
-      VITE_DOLOS_URL: process.env.VITE_DOLOS_URL ?? 'https://fallback.test',
-      VITE_DOLOS_TRANSFORMATION_ENDPOINT: process.env.VITE_DOLOS_URL ?? 'https://fallback.test',
-      VITE_MUSE_TOKEN: process.env.VITE_MUSE_TOKEN ?? 'fallback-token',
-      VITE_MUSE_ENDPOINT: process.env.VITE_MUSE_ENDPOINT ?? 'https://fallback.test',
-      VITE_RECIPES_ENDPOINT: process.env.VITE_RECIPES_ENDPOINT ?? 'https://fallback.test',
-      VITE_PHOENIX_ENDPOINT: process.env.VITE_PHOENIX_ENDPOINT ?? 'https://fallback.test',
-      VITE_MERCURY_TOKEN_ENDPOINT:
-        process.env.VITE_MERCURY_TOKEN_ENDPOINT ?? 'https://fallback.test',
-      VITE_ATHENS_APP_ID: process.env.VITE_ATHENS_APP_ID ?? 'https://fallback.test',
-      VITE_ATHENS_APP_SECRET: process.env.VITE_ATHENS_APP_SECRET ?? 'https://fallback.test',
-      VITE_PROJECT_TOKEN: process.env.VITE_PROJECT_TOKEN ?? '',
-      VITE_REVALIDATION_TWISTEDFOOD_TOKEN: process.env.VITE_REVALIDATION_TWISTEDFOOD_TOKEN ?? 'fallback-token',
-      VITE_REVALIDATION_VT_TOKEN: process.env.VITE_REVALIDATION_VT_TOKEN ?? 'fallback-token',
-      VITE_GRAPH_QL_URL: process.env.VITE_GRAPH_QL_URL ?? '',
-      VITE_MUSE_GRAPHQL_URL: process.env.VITE_MUSE_GRAPHQL_URL ?? '',
-      VITE_RECIPE_GRAPHQL_URL: process.env.VITE_RECIPE_GRAPHQL_URL ?? '',
-    };
-  }
-
-  let envSource: Record<string, string | undefined> = {};
-
-  if (isViteEnvironment) {
-    // Use Vite's import.meta.env
-    envSource = (import.meta as unknown as { env: Record<string, string | undefined> }).env;
-  } else if (isNextEnvironment) {
-    envSource = {
-      VITE_PORTAL_GRAPHQL_ENDPOINT: process.env.NEXT_PUBLIC_GRAPHQL_URL,
-      VITE_DOLOS_URL: process.env.NEXT_PUBLIC_DOLOS_URL,
-      VITE_DOLOS_TRANSFORMATION_ENDPOINT: process.env.NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT,
-      VITE_MUSE_TOKEN: process.env.NEXT_PUBLIC_MUSE_TOKEN,
-      VITE_MUSE_ENDPOINT: process.env.NEXT_PUBLIC_MUSE_GRAPHQL_URL,
-      VITE_RECIPES_ENDPOINT: process.env.NEXT_PUBLIC_RECIPE_GRAPHQL_URL,
-      VITE_PHOENIX_ENDPOINT: process.env.NEXT_PUBLIC_PHOENIX_ENDPOINT,
-      VITE_MERCURY_TOKEN_ENDPOINT: process.env.NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT,
-      VITE_ATHENS_APP_ID: process.env.NEXT_PUBLIC_ATHENS_APP_ID,
-      VITE_ATHENS_APP_SECRET: process.env.NEXT_PUBLIC_ATHENS_APP_SECRET,
-      VITE_PROJECT_TOKEN: process.env.NEXT_PUBLIC_PROJECT_TOKEN,
-      VITE_REVALIDATION_TWISTEDFOOD_TOKEN: process.env.NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN,
-      VITE_REVALIDATION_VT_TOKEN: process.env.NEXT_PUBLIC_REVALIDATION_VT_TOKEN,
-      VITE_GRAPH_QL_URL: process.env.NEXT_PUBLIC_GRAPH_QL_URL,
-      VITE_MUSE_GRAPHQL_URL: process.env.NEXT_PUBLIC_MUSE_GRAPHQL_URL,
-      VITE_RECIPE_GRAPHQL_URL: process.env.NEXT_PUBLIC_RECIPE_GRAPHQL_URL,
-    };
-  }
-
-  return {
-    VITE_PORTAL_GRAPHQL_ENDPOINT: envSource.VITE_PORTAL_GRAPHQL_ENDPOINT,
-    VITE_DOLOS_URL: envSource.VITE_DOLOS_URL,
-    VITE_DOLOS_TRANSFORMATION_ENDPOINT: envSource.VITE_DOLOS_TRANSFORMATION_ENDPOINT,
-    VITE_MUSE_TOKEN: envSource.VITE_MUSE_TOKEN,
-    VITE_MUSE_ENDPOINT: envSource.VITE_MUSE_ENDPOINT,
-    VITE_RECIPES_ENDPOINT: envSource.VITE_RECIPES_ENDPOINT,
-    VITE_PHOENIX_ENDPOINT: envSource.VITE_PHOENIX_ENDPOINT,
-    VITE_MERCURY_TOKEN_ENDPOINT: envSource.VITE_MERCURY_TOKEN_ENDPOINT,
-    VITE_ATHENS_APP_ID: envSource.VITE_ATHENS_APP_ID,
-    VITE_ATHENS_APP_SECRET: envSource.VITE_ATHENS_APP_SECRET,
-    VITE_PROJECT_TOKEN: envSource.VITE_PROJECT_TOKEN,
-    VITE_REVALIDATION_TWISTEDFOOD_TOKEN: envSource.VITE_REVALIDATION_TWISTEDFOOD_TOKEN,
-    VITE_REVALIDATION_VT_TOKEN: envSource.VITE_REVALIDATION_VT_TOKEN,
-    VITE_GRAPH_QL_URL: envSource.VITE_GRAPH_QL_URL,
-    VITE_MUSE_GRAPHQL_URL: envSource.VITE_MUSE_GRAPHQL_URL,
-    VITE_RECIPE_GRAPHQL_URL: envSource.VITE_RECIPE_GRAPHQL_URL,
-  };
-};
-
-const raw = getEnvironmentVariables();
-// ts-expect-error Node fails to recognize env vars
-export const env = envSchema.parse(raw);
-
-export type Env = z.infer<typeof envSchema>;

package/src/hooks/use-autogrow.ts

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export const useAutoGrow = (maxRows = 3) => {
-  const ref = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const { lineHeight } = getComputedStyle(el);
-    const maxHeight = parseFloat(lineHeight) * maxRows;
-
-    const resize = () => {
-      el.style.height = 'auto'; // reset to shrink when deleting
-      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
-    };
-
-    resize(); // initial
-    el.addEventListener('input', resize);
-    el.addEventListener('focusin', resize);
-    return () => {
-      el.removeEventListener('input', resize);
-      el.removeEventListener('focusin', resize);
-    };
-  }, [maxRows]);
-
-  return ref;
-};

package/src/hooks/use-mobile.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener('change', onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener('change', onChange);
-  }, []);
-
-  return !!isMobile;
-}

package/src/hooks/useAuthors.ts

@@ -1,78 +0,0 @@
-import { QueryConfig } from '@/components/wazui/WazUiBlogComponent/types';
-import { useInfiniteQuery } from '@tanstack/react-query';
-import { useDebounce } from './useDebounce';
-import { useCallback, useMemo } from 'react';
-import { createApolloClient } from '@/utils/apolloClient';
-import { GET_ALL_USERS } from '@/components/wazui/WazUiCreateBlogContent/samples/queries';
-
-export function useAuthors({
-  searchValue,
-  apolloUri,
-}: {
-  config?: QueryConfig;
-  searchValue?: string;
-  apolloUri: string;
-}) {
-  const config = useMemo(
-    () => ({
-      query: GET_ALL_USERS,
-      variables: { first: 350 },
-      dataKey: 'users',
-    }),
-    []
-  );
-  const client = createApolloClient(apolloUri);
-
-  // Simple optimization: Debounce search to reduce API calls
-  const debouncedSearchValue = useDebounce(searchValue || '', 300);
-
-  // Simple optimization: Memoize query function
-  const queryFn = useCallback(
-    async ({ pageParam = 1 }) => {
-      if (config?.query) {
-        const query = config?.query;
-        const variables = config?.variables;
-        const response = await client.query({
-          query,
-          variables: {
-            ...(variables || {}),
-            search: debouncedSearchValue,
-            page: pageParam,
-          },
-        });
-        const data = response.data as Record<string, unknown>;
-        const dataKey = data[config.dataKey] as {
-          paginatorInfo?: { currentPage: number; lastPage: number };
-          data: unknown[];
-        };
-        return {
-          paginatorInfo: dataKey.paginatorInfo || {
-            currentPage: 1,
-            lastPage: 1,
-          },
-          data: dataKey?.data,
-        };
-      } else {
-        console.error('Invalid Query Configuration');
-        throw Error('Invalid Query Configuration');
-      }
-    },
-    [client, config, debouncedSearchValue]
-  );
-
-  return useInfiniteQuery({
-    queryKey: [config?.dataKey, debouncedSearchValue],
-    queryFn,
-    getNextPageParam: lastPage => {
-      if (lastPage?.paginatorInfo?.currentPage < lastPage?.paginatorInfo?.lastPage) {
-        return lastPage.paginatorInfo.currentPage + 1;
-      }
-      return undefined;
-    },
-    initialPageParam: 1,
-    staleTime: 5 * 60 * 1000,
-    gcTime: 10 * 60 * 1000,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-  });
-}

package/src/hooks/useDebounce.ts

@@ -1,18 +0,0 @@
-'use client'
-import { useEffect, useState } from 'react';
-
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}

package/src/hooks/useMercuryProjectToken.ts

@@ -1,112 +0,0 @@
-import { env } from '@/env';
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
-
-interface MercuryTokenResponse {
-  success: boolean;
-  token: string;
-}
-
-interface TokenCache {
-  token: string;
-  expiresAt: number;
-}
-
-class TokenManager {
-  private tokenCache: TokenCache | null = null;
-  private refreshPromise: Promise<string> | null = null;
-
-  constructor(
-    private readonly mercuryUrl: string,
-    private readonly appId: string,
-    private readonly appSecret: string
-  ) {}
-
-  async getToken(): Promise<string> {
-    if (this.tokenCache && this.isTokenValid()) {
-      return this.tokenCache.token;
-    }
-
-    if (this.refreshPromise) {
-      return this.refreshPromise;
-    }
-
-    this.refreshPromise = this.fetchNewToken();
-
-    try {
-      const token = await this.refreshPromise;
-      return token;
-    } finally {
-      this.refreshPromise = null;
-    }
-  }
-
-  private isTokenValid(): boolean {
-    if (!this.tokenCache) return false;
-    return Date.now() < this.tokenCache.expiresAt;
-  }
-
-  private async fetchNewToken(): Promise<string> {
-    try {
-      const response = await axios.post(this.mercuryUrl, {
-        app_id: this.appId,
-        app_secret: this.appSecret,
-      });
-
-      const data: MercuryTokenResponse = response.data;
-
-      if (!data.token) {
-        throw new Error('No token received from Mercury');
-      }
-
-      this.tokenCache = {
-        token: data.token,
-        expiresAt: Date.now() + 60 * 60 * 1000,
-      };
-
-      return data.token;
-    } catch (error) {
-      console.error('Failed to fetch token from Mercury:', error);
-      throw error;
-    }
-  }
-
-  clearCache(): void {
-    this.tokenCache = null;
-    this.refreshPromise = null;
-  }
-}
-
-let tokenManagerInstance: TokenManager | null = null;
-
-function getTokenManager(): TokenManager {
-  if (!tokenManagerInstance) {
-    tokenManagerInstance = new TokenManager(
-      env.VITE_MERCURY_TOKEN_ENDPOINT,
-      env.VITE_ATHENS_APP_ID,
-      env.VITE_ATHENS_APP_SECRET
-    );
-  }
-  return tokenManagerInstance;
-}
-
-export const fetchMercuryToken = async (): Promise<MercuryTokenResponse> => {
-  const tokenManager = getTokenManager();
-  const token = await tokenManager.getToken();
-
-  return {
-    success: true,
-    token,
-  };
-};
-
-export function useMercuryProjectToken() {
-  return useQuery<MercuryTokenResponse>({
-    queryKey: ['mercury-project-token'],
-    staleTime: Infinity,
-    gcTime: Infinity,
-    queryFn: fetchMercuryToken,
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
-  });
-}

package/src/hooks/useProjectToken.ts

@@ -1,21 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-/**
- * Hook for fetching project token with React Query caching
- * This is the only hook that should use React Query for the dashboard
- */
-export function useProjectToken() {
-  return useQuery({
-    queryKey: ['project-token'],
-    staleTime: 50 * 60000, // Data stays fresh for 50 minutes
-    gcTime: 50 * 60000, // Data stays fresh for 50 minutes
-    queryFn: async () => {
-      // This would be replaced with actual project token fetching logic
-      const projectToken = import.meta.env.VITE_PROJECT_TOKEN;
-      if (!projectToken) {
-        throw new Error('Project token not configured');
-      }
-      return projectToken;
-    },
-  });
-}

package/src/hooks/useTheme.ts

@@ -1,12 +0,0 @@
-import ThemeContext from '@/contexts/ThemeContext';
-import { useContext } from 'react';
-
-const useTheme = () => {
-  const context = useContext(ThemeContext);
-
-  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
-
-  return context;
-};
-
-export default useTheme;