@wazobiatech/wazui 0.0.12 → 0.0.13

package/src/config/next.ts

@@ -0,0 +1,79 @@
+import { z } from 'zod';
+
+// Define the environment schema for Next.js apps
+export const nextEnvSchema = z.object({
+  NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT: z.string().default('https://localhost:3000/graphql'),
+  NEXT_PUBLIC_DOLOS_URL: z.string().default('https://localhost:3001'),
+  NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT: z.string().default('https://localhost:3001/transform'),
+  NEXT_PUBLIC_MUSE_TOKEN: z.string().default('dev-token'),
+  NEXT_PUBLIC_MUSE_ENDPOINT: z.string().default('https://localhost:3003'),
+  NEXT_PUBLIC_RECIPES_ENDPOINT: z.string().default('https://localhost:3002'),
+  NEXT_PUBLIC_PHOENIX_ENDPOINT: z.string().default('https://localhost:3004'),
+  NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT: z.string().default('https://localhost:3005/token'),
+  NEXT_PUBLIC_ATHENS_APP_ID: z.string().default('dev-athens-id'),
+  NEXT_PUBLIC_ATHENS_APP_SECRET: z.string().default('dev-athens-secret'),
+  NEXT_PUBLIC_PROJECT_TOKEN: z.string().default('dev-project-token'),
+  NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN: z.string().default('dev-revalidation-token'),
+  NEXT_PUBLIC_REVALIDATION_VT_TOKEN: z.string().default('dev-vt-token'),
+  NEXT_PUBLIC_GRAPH_QL_URL: z.string().optional(),
+  NEXT_PUBLIC_MUSE_GRAPHQL_URL: z.string().optional(),
+  NEXT_PUBLIC_RECIPE_GRAPHQL_URL: z.string().optional(),
+});
+
+export type NextEnv = z.infer<typeof nextEnvSchema>;
+
+/**
+ * Next.js-specific environment configuration
+ * This function automatically reads from Next.js environment variables
+ */
+export function createNextConfig(): NextEnv {
+  const env = {
+    NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT: process.env.NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT,
+    NEXT_PUBLIC_DOLOS_URL: process.env.NEXT_PUBLIC_DOLOS_URL,
+    NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT: process.env.NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT,
+    NEXT_PUBLIC_MUSE_TOKEN: process.env.NEXT_PUBLIC_MUSE_TOKEN,
+    NEXT_PUBLIC_MUSE_ENDPOINT: process.env.NEXT_PUBLIC_MUSE_ENDPOINT,
+    NEXT_PUBLIC_RECIPES_ENDPOINT: process.env.NEXT_PUBLIC_RECIPES_ENDPOINT,
+    NEXT_PUBLIC_PHOENIX_ENDPOINT: process.env.NEXT_PUBLIC_PHOENIX_ENDPOINT,
+    NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT: process.env.NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT,
+    NEXT_PUBLIC_ATHENS_APP_ID: process.env.NEXT_PUBLIC_ATHENS_APP_ID,
+    NEXT_PUBLIC_ATHENS_APP_SECRET: process.env.NEXT_PUBLIC_ATHENS_APP_SECRET,
+    NEXT_PUBLIC_PROJECT_TOKEN: process.env.NEXT_PUBLIC_PROJECT_TOKEN,
+    NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN: process.env.NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN,
+    NEXT_PUBLIC_REVALIDATION_VT_TOKEN: process.env.NEXT_PUBLIC_REVALIDATION_VT_TOKEN,
+    NEXT_PUBLIC_GRAPH_QL_URL: process.env.NEXT_PUBLIC_GRAPH_QL_URL,
+    NEXT_PUBLIC_MUSE_GRAPHQL_URL: process.env.NEXT_PUBLIC_MUSE_GRAPHQL_URL,
+    NEXT_PUBLIC_RECIPE_GRAPHQL_URL: process.env.NEXT_PUBLIC_RECIPE_GRAPHQL_URL,
+  };
+
+  return nextEnvSchema.parse(env);
+}
+
+/**
+ * Debug helper to check Next.js environment variables
+ */
+export function debugNextConfig() {
+  if (process.env.NODE_ENV !== 'development') return;
+  
+  console.group('🔧 Next.js WazUI Configuration Debug');
+  
+  const requiredVars = [
+    'NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT',
+    'NEXT_PUBLIC_DOLOS_URL',
+    'NEXT_PUBLIC_MUSE_TOKEN',
+    'NEXT_PUBLIC_MUSE_ENDPOINT',
+    'NEXT_PUBLIC_RECIPES_ENDPOINT',
+    'NEXT_PUBLIC_PHOENIX_ENDPOINT',
+  ];
+  
+  requiredVars.forEach(varName => {
+    const value = process.env[varName];
+    if (value) {
+      console.log(`✅ ${varName}:`, value.substring(0, 50) + (value.length > 50 ? '...' : ''));
+    } else {
+      console.warn(`❌ ${varName}: undefined (will use default)`);
+    }
+  });
+  
+  console.groupEnd();
+}

package/src/decorators/ApolloDecorator.tsx

@@ -9,7 +9,7 @@ export const withApollo: Decorator = (Story, context) => {
   return (
     // use muse endpoint as default
 
-    <ApolloProvider client={createApolloClient(apolloConfig?.uri || env.VITE_MUSE_ENDPOINT)}>
+    <ApolloProvider client={createApolloClient(apolloConfig?.uri || env.NEXT_PUBLIC_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>

package/src/decorators/DolosApolloDecorator.tsx

@@ -9,7 +9,7 @@ import { env } from '../env';
 
 export const dolosApolloClient = new ApolloClient({
   cache: new InMemoryCache(),
-  link: new UploadHttpLink({ uri: env.VITE_DOLOS_URL }),
+  link: new UploadHttpLink({ uri: env.NEXT_PUBLIC_DOLOS_URL }),
 });
 
 export const withDolosApollo: Decorator = Story => {

package/src/env.ts

@@ -1,99 +1,54 @@
-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') {
+import { createNextConfig, debugNextConfig, NextEnv } from './config/next';
+
+// Re-export types for convenience
+export type { NextEnv } from './config/next';
+
+/**
+ * Get environment variables for WazUI components in Next.js
+ * This function automatically reads from your Next.js environment variables
+ */
+export const getEnv = (): NextEnv => {
+  try {
+    const config = createNextConfig();
+    
+    // Debug in development
+    if (process.env.NODE_ENV === 'development') {
+      debugNextConfig();
+    }
+    
+    return config;
+  } catch (error) {
+    console.error('WazUI: Failed to load environment configuration:', error);
+    
+    // Return defaults if parsing fails
     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 ?? '',
+      NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT: 'https://localhost:3000/graphql',
+      NEXT_PUBLIC_DOLOS_URL: 'https://localhost:3001',
+      NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT: 'https://localhost:3001/transform',
+      NEXT_PUBLIC_MUSE_TOKEN: 'dev-token',
+      NEXT_PUBLIC_MUSE_ENDPOINT: 'https://localhost:3003',
+      NEXT_PUBLIC_RECIPES_ENDPOINT: 'https://localhost:3002',
+      NEXT_PUBLIC_PHOENIX_ENDPOINT: 'https://localhost:3004',
+      NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT: 'https://localhost:3005/token',
+      NEXT_PUBLIC_ATHENS_APP_ID: 'dev-athens-id',
+      NEXT_PUBLIC_ATHENS_APP_SECRET: 'dev-athens-secret',
+      NEXT_PUBLIC_PROJECT_TOKEN: 'dev-project-token',
+      NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN: 'dev-revalidation-token',
+      NEXT_PUBLIC_REVALIDATION_VT_TOKEN: 'dev-vt-token',
     };
   }
-
-  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);
+// For ease of use, also export a static env object
+let _env: NextEnv | null = null;
+
+export const env = new Proxy({} as NextEnv, {
+  get(target, prop) {
+    if (!_env) {
+      _env = getEnv();
+    }
+    return _env[prop as keyof typeof _env];
+  },
+});
 
-export type Env = z.infer<typeof envSchema>;
+export type Env = NextEnv;

package/src/hooks/useMercuryProjectToken.ts

@@ -82,9 +82,9 @@ 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
+      env.NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT,
+      env.NEXT_PUBLIC_ATHENS_APP_ID,
+      env.NEXT_PUBLIC_ATHENS_APP_SECRET
     );
   }
   return tokenManagerInstance;

package/src/hooks/useProjectToken.ts

@@ -11,11 +11,11 @@ export function useProjectToken() {
     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;
+      const projectToken = import.meta.env.NEXT_PUBLIC_PROJECT_TOKEN;
       if (!projectToken) {
         throw new Error('Project token not configured');
       }
       return projectToken;
     },
   });
-}
+}

package/src/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 // Import styles
 import './index.css';
 
@@ -100,5 +102,19 @@ export type {
 } from './components/wazui/WazUIBlogDashboard/types';
 export { useAuthors } from './hooks/useAuthors';
 export * from '@tanstack/react-table';
-export * from 'zod';
+// Note: Zod is not re-exported to avoid 'enum' keyword conflicts in strict mode
+// Import Zod directly in your application if needed: import { z } from 'zod'
 export { fetchMercuryToken } from './hooks/useMercuryProjectToken';
+
+// Next.js environment configuration
+export { env, getEnv } from './env';
+export { createNextConfig, debugNextConfig } from './config/next';
+export type { NextEnv, Env } from './env';
+
+// Environment provider system for advanced use cases
+export {
+  WazUIEnvironmentProvider,
+  useWazUIEnvironment,
+  getAutoDetectedEnvironment,
+} from './providers/EnvironmentProvider';
+export type { WazUIEnvironmentProviderProps, WazUIEnv } from './providers/EnvironmentProvider';

package/src/mocks/env.ts

@@ -1,12 +1,12 @@
 // Mock for env.ts to avoid import.meta issues in Jest
 export const env = {
-  VITE_PORTAL_GRAPHQL_ENDPOINT: 'https://test.example.com',
-  VITE_DOLOS_URL: 'https://test.example.com',
-  VITE_DOLOS_TRANSFORMATION_ENDPOINT: 'https://test.example.com',
-  VITE_MUSE_TOKEN: 'test-token',
-  VITE_MUSE_ENDPOINT: 'https://test.example.com',
-  VITE_REVALIDATION_WAZOBIA_TOKEN: 'test-token',
-  VITE_REVALIDATION_DRIPLONDON_TOKEN: 'test-token',
-  VITE_REVALIDATION_TWISTEDFOOD_TOKEN: 'test-token',
-  VITE_REVALIDATION_VT_TOKEN: 'test-token',
+  NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT: 'https://test.example.com',
+  NEXT_PUBLIC_DOLOS_URL: 'https://test.example.com',
+  NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT: 'https://test.example.com',
+  NEXT_PUBLIC_MUSE_TOKEN: 'test-token',
+  NEXT_PUBLIC_MUSE_ENDPOINT: 'https://test.example.com',
+  NEXT_PUBLIC_REVALIDATION_WAZOBIA_TOKEN: 'test-token',
+  NEXT_PUBLIC_REVALIDATION_DRIPLONDON_TOKEN: 'test-token',
+  NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN: 'test-token',
+  NEXT_PUBLIC_REVALIDATION_VT_TOKEN: 'test-token',
 };

package/src/providers/EnvironmentProvider/WazUIEnvironmentProvider.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { WazUIEnv, envSchema, getAutoDetectedEnvironment } from './utils';
+import { WazUIEnvironmentContext } from './context';
+
+export interface WazUIEnvironmentProviderProps {
+  children: ReactNode;
+  env?: Partial<WazUIEnv>;
+}
+
+/**
+ * WazUIEnvironmentProvider allows Next.js apps to inject environment variables
+ * directly into WazUI components. This ensures that environment variables from
+ * your Next.js app are properly propagated to the component library.
+ *
+ * @example
+ * ```tsx
+ * // In your Next.js app root (pages/_app.tsx or app/layout.tsx)
+ * import { WazUIEnvironmentProvider } from '@wazobiatech/wazui';
+ *
+ * const env = {
+ *   NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT: process.env.NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT,
+ *   NEXT_PUBLIC_DOLOS_URL: process.env.NEXT_PUBLIC_DOLOS_URL,
+ *   // ... other environment variables
+ * };
+ *
+ * function MyApp({ Component, pageProps }) {
+ *   return (
+ *     <WazUIEnvironmentProvider env={env}>
+ *       <Component {...pageProps} />
+ *     </WazUIEnvironmentProvider>
+ *   );
+ * }
+ * ```
+ */
+export function WazUIEnvironmentProvider({
+  children,
+  env: providedEnv,
+}: WazUIEnvironmentProviderProps) {
+  // Auto-detect environment variables if not provided
+  const detectedEnv = providedEnv || getAutoDetectedEnvironment();
+
+  // Parse and validate environment variables
+  const validatedEnv = envSchema.parse(detectedEnv);
+
+  return (
+    <WazUIEnvironmentContext.Provider value={validatedEnv}>
+      {children}
+    </WazUIEnvironmentContext.Provider>
+  );
+}

package/src/providers/EnvironmentProvider/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import { WazUIEnv } from './utils';
+
+// Create context for environment variables
+export const WazUIEnvironmentContext = createContext<WazUIEnv | null>(null);

package/src/providers/EnvironmentProvider/index.ts

@@ -0,0 +1,5 @@
+export { WazUIEnvironmentProvider } from './WazUIEnvironmentProvider';
+export type { WazUIEnvironmentProviderProps } from './WazUIEnvironmentProvider';
+export { useWazUIEnvironment } from './useWazUIEnvironment';
+export type { WazUIEnv } from './utils';
+export { getAutoDetectedEnvironment } from './utils';

package/src/providers/EnvironmentProvider/useWazUIEnvironment.ts

@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import { WazUIEnvironmentContext } from './context';
+import { WazUIEnv, envSchema, getAutoDetectedEnvironment } from './utils';
+
+/**
+ * Hook to access WazUI environment variables from within components.
+ * This hook will first try to get environment variables from the context
+ * (if WazUIEnvironmentProvider is used), then fall back to auto-detection.
+ */
+export function useWazUIEnvironment(): WazUIEnv {
+  const contextEnv = useContext(WazUIEnvironmentContext);
+
+  if (contextEnv) {
+    return contextEnv;
+  }
+
+  // Fallback to auto-detection if no provider is used
+  const autoDetectedEnv = getAutoDetectedEnvironment();
+  return envSchema.parse(autoDetectedEnv);
+}

package/src/providers/EnvironmentProvider/utils.ts

@@ -0,0 +1,122 @@
+import { z } from 'zod';
+
+export const envSchema = z.object({
+  NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT: z.string().default('https://localhost:3000/graphql'),
+  NEXT_PUBLIC_DOLOS_URL: z.string().default('https://localhost:3001'),
+  NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT: z.string().default('https://localhost:3001/transform'),
+  NEXT_PUBLIC_MUSE_TOKEN: z.string().default('dev-token'),
+  NEXT_PUBLIC_MUSE_ENDPOINT: z.string().default('https://localhost:3003'),
+  NEXT_PUBLIC_RECIPES_ENDPOINT: z.string().default('https://localhost:3002'),
+  NEXT_PUBLIC_PHOENIX_ENDPOINT: z.string().default('https://localhost:3004'),
+  NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT: z.string().default('https://localhost:3005/token'),
+  NEXT_PUBLIC_ATHENS_APP_ID: z.string().default('dev-athens-id'),
+  NEXT_PUBLIC_ATHENS_APP_SECRET: z.string().default('dev-athens-secret'),
+  NEXT_PUBLIC_PROJECT_TOKEN: z.string().default('dev-project-token'),
+  NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN: z.string().default('dev-revalidation-token'),
+  NEXT_PUBLIC_REVALIDATION_VT_TOKEN: z.string().default('dev-vt-token'),
+  NEXT_PUBLIC_GRAPH_QL_URL: z.string().optional(),
+  NEXT_PUBLIC_MUSE_GRAPHQL_URL: z.string().optional(),
+  NEXT_PUBLIC_RECIPE_GRAPHQL_URL: z.string().optional(),
+});
+
+export type WazUIEnv = z.infer<typeof envSchema>;
+
+// Type definitions for browser globals
+interface WindowWithNextData extends Window {
+  __NEXT_DATA__?: {
+    env?: Record<string, string | undefined>;
+    runtimeConfig?: Record<string, string | undefined>;
+  };
+  process?: {
+    env?: Record<string, string | undefined>;
+  };
+}
+
+/**
+ * Auto-detect environment variables from various sources
+ */
+export function getAutoDetectedEnvironment(): Partial<WazUIEnv> {
+  // Check for browser environment (client-side Next.js)
+  const isBrowser = typeof window !== 'undefined';
+
+  // In test environment, use fallback values
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
+    return {
+      NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT:
+        process.env.NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT || 'https://fallback.test',
+      NEXT_PUBLIC_DOLOS_URL: process.env.NEXT_PUBLIC_DOLOS_URL || 'https://fallback.test',
+      NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT:
+        process.env.NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT || 'https://fallback.test',
+      NEXT_PUBLIC_MUSE_TOKEN: process.env.NEXT_PUBLIC_MUSE_TOKEN || 'fallback-token',
+      NEXT_PUBLIC_MUSE_ENDPOINT: process.env.NEXT_PUBLIC_MUSE_ENDPOINT || 'https://fallback.test',
+      NEXT_PUBLIC_RECIPES_ENDPOINT:
+        process.env.NEXT_PUBLIC_RECIPES_ENDPOINT || 'https://fallback.test',
+      NEXT_PUBLIC_PHOENIX_ENDPOINT:
+        process.env.NEXT_PUBLIC_PHOENIX_ENDPOINT || 'https://fallback.test',
+      NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT:
+        process.env.NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT || 'https://fallback.test',
+      NEXT_PUBLIC_ATHENS_APP_ID: process.env.NEXT_PUBLIC_ATHENS_APP_ID || 'fallback-id',
+      NEXT_PUBLIC_ATHENS_APP_SECRET: process.env.NEXT_PUBLIC_ATHENS_APP_SECRET || 'fallback-secret',
+      NEXT_PUBLIC_PROJECT_TOKEN: process.env.NEXT_PUBLIC_PROJECT_TOKEN || 'fallback-token',
+      NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN:
+        process.env.NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN || 'fallback-token',
+      NEXT_PUBLIC_REVALIDATION_VT_TOKEN:
+        process.env.NEXT_PUBLIC_REVALIDATION_VT_TOKEN || 'fallback-token',
+      NEXT_PUBLIC_GRAPH_QL_URL: process.env.NEXT_PUBLIC_GRAPH_QL_URL || '',
+      NEXT_PUBLIC_MUSE_GRAPHQL_URL: process.env.NEXT_PUBLIC_MUSE_GRAPHQL_URL || '',
+      NEXT_PUBLIC_RECIPE_GRAPHQL_URL: process.env.NEXT_PUBLIC_RECIPE_GRAPHQL_URL || '',
+    };
+  }
+
+  // Try to get environment variables from different sources
+  let envSource: Record<string, string | undefined> = {};
+
+  // Check if we're in a Vite environment (for Storybook or standalone usage)
+  if (
+    typeof import.meta !== 'undefined' &&
+    (import.meta as unknown as { env?: Record<string, string | undefined> }).env
+  ) {
+    envSource = (import.meta as unknown as { env: Record<string, string | undefined> }).env;
+  }
+  // Check if we're in a Node.js/Next.js environment
+  else if (typeof process !== 'undefined' && process.env) {
+    // In browser with Next.js, environment variables are available via process.env
+    // In server-side Next.js, they're also available via process.env
+    envSource = process.env;
+  }
+  // Fallback for browser environment where process might not be available
+  else if (isBrowser && typeof window !== 'undefined') {
+    const windowWithNext = window as WindowWithNextData;
+
+    // Try to access Next.js injected environment variables via __NEXT_DATA__
+    if (windowWithNext.__NEXT_DATA__?.env) {
+      envSource = windowWithNext.__NEXT_DATA__.env;
+    } else if (windowWithNext.__NEXT_DATA__?.runtimeConfig) {
+      // Try to access Next.js runtime config
+      envSource = windowWithNext.__NEXT_DATA__.runtimeConfig;
+    } else if (windowWithNext.process?.env) {
+      // Final fallback - try to access global process.env (if injected by Next.js)
+      envSource = windowWithNext.process.env;
+    }
+  }
+
+  return {
+    NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT: envSource.NEXT_PUBLIC_PORTAL_GRAPHQL_ENDPOINT,
+    NEXT_PUBLIC_DOLOS_URL: envSource.NEXT_PUBLIC_DOLOS_URL,
+    NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT: envSource.NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT,
+    NEXT_PUBLIC_MUSE_TOKEN: envSource.NEXT_PUBLIC_MUSE_TOKEN,
+    NEXT_PUBLIC_MUSE_ENDPOINT: envSource.NEXT_PUBLIC_MUSE_ENDPOINT,
+    NEXT_PUBLIC_RECIPES_ENDPOINT: envSource.NEXT_PUBLIC_RECIPES_ENDPOINT,
+    NEXT_PUBLIC_PHOENIX_ENDPOINT: envSource.NEXT_PUBLIC_PHOENIX_ENDPOINT,
+    NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT: envSource.NEXT_PUBLIC_MERCURY_TOKEN_ENDPOINT,
+    NEXT_PUBLIC_ATHENS_APP_ID: envSource.NEXT_PUBLIC_ATHENS_APP_ID,
+    NEXT_PUBLIC_ATHENS_APP_SECRET: envSource.NEXT_PUBLIC_ATHENS_APP_SECRET,
+    NEXT_PUBLIC_PROJECT_TOKEN: envSource.NEXT_PUBLIC_PROJECT_TOKEN,
+    NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN:
+      envSource.NEXT_PUBLIC_REVALIDATION_TWISTEDFOOD_TOKEN,
+    NEXT_PUBLIC_REVALIDATION_VT_TOKEN: envSource.NEXT_PUBLIC_REVALIDATION_VT_TOKEN,
+    NEXT_PUBLIC_GRAPH_QL_URL: envSource.NEXT_PUBLIC_GRAPH_QL_URL,
+    NEXT_PUBLIC_MUSE_GRAPHQL_URL: envSource.NEXT_PUBLIC_MUSE_GRAPHQL_URL,
+    NEXT_PUBLIC_RECIPE_GRAPHQL_URL: envSource.NEXT_PUBLIC_RECIPE_GRAPHQL_URL,
+  };
+}

package/src/utils/apolloClient.ts

@@ -49,7 +49,7 @@ export const createApolloClient = (
   const isMuseClient = options?.isMuseClient;
 
   const defaultHeaders = {
-    // 'X-Internal-Auth': env.VITE_MUSE_TOKEN as string,
+    // 'X-Internal-Auth': env.NEXT_PUBLIC_MUSE_TOKEN as string,
   };
 
   const headers = options?.headers ? { ...defaultHeaders, ...options.headers } : defaultHeaders;
@@ -105,7 +105,7 @@ export const createApolloUploadClient = (
   }
 ) => {
   const defaultHeaders = {
-    'X-Internal-Auth': env.VITE_MUSE_TOKEN as string,
+    'X-Internal-Auth': env.NEXT_PUBLIC_MUSE_TOKEN as string,
   };
 
   const headers = options?.headers ? { ...defaultHeaders, ...options.headers } : defaultHeaders;
@@ -145,16 +145,16 @@ export const createApolloUploadClient = (
   return client;
 };
 
-export const blogClient = createApolloClient(env.VITE_GRAPH_QL_URL as string, {
+export const blogClient = createApolloClient(env.NEXT_PUBLIC_GRAPH_QL_URL as string, {
   isMuseClient: true,
 });
 
-export const blogClientNew = createApolloClient(env.VITE_MUSE_GRAPHQL_URL as string, {
+export const blogClientNew = createApolloClient(env.NEXT_PUBLIC_MUSE_GRAPHQL_URL as string, {
   isMuseClient: true,
 });
 
-export const museClient = createApolloClient(env.VITE_MUSE_GRAPHQL_URL as string, {
+export const museClient = createApolloClient(env.NEXT_PUBLIC_MUSE_GRAPHQL_URL as string, {
   isMuseClient: true,
 });
 
-export const recipeClient = createApolloClient(env.VITE_RECIPE_GRAPHQL_URL as string);
+export const recipeClient = createApolloClient(env.NEXT_PUBLIC_RECIPE_GRAPHQL_URL as string);

package/src/utils/images.ts

@@ -163,22 +163,29 @@ export const getImageTransformationsUrl = ({
   }
 
   const trimmedUrl = url.trim();
-  if (!trimmedUrl.startsWith('http://') && !trimmedUrl.startsWith('https://') && !trimmedUrl.startsWith('/')) {
-    console.warn('getImageTransformationsUrl: URL must be absolute (http/https) or relative path:', url);
+  if (
+    !trimmedUrl.startsWith('http://') &&
+    !trimmedUrl.startsWith('https://') &&
+    !trimmedUrl.startsWith('/')
+  ) {
+    console.warn(
+      'getImageTransformationsUrl: URL must be absolute (http/https) or relative path:',
+      url
+    );
     return { url: '', srcset: '', desktop: '', tablet: '', mobile: '' };
   }
 
   try {
-    const parsedUrl = trimmedUrl.startsWith('/') 
-      ? new URL(trimmedUrl, 'https://placeholder.com') 
+    const parsedUrl = trimmedUrl.startsWith('/')
+      ? new URL(trimmedUrl, 'https://placeholder.com')
       : new URL(trimmedUrl);
     const config = parsedUrl.searchParams.get('config') || '';
 
     // Build base transformation URL
     const imageTransformUrl =
-      transformationsUrl || (env.VITE_DOLOS_TRANSFORMATION_ENDPOINT as string) || 'images';
-        const shouldSkipHostname = parsedUrl.hostname === 'img.wazobia.tech';
-    const baseImageUrl = shouldSkipHostname 
+      transformationsUrl || (env.NEXT_PUBLIC_DOLOS_TRANSFORMATION_ENDPOINT as string) || 'images';
+    const shouldSkipHostname = parsedUrl.hostname === 'img.wazobia.tech';
+    const baseImageUrl = shouldSkipHostname
       ? `${imageTransformUrl}${parsedUrl.pathname}`
       : `${imageTransformUrl}${imageTransformUrl.endsWith('/') ? '' : '/'}${parsedUrl.hostname}${parsedUrl.pathname}`;
 

package/storybook-static/assets/ApolloDecorator-DdFdPk9I.js

@@ -0,0 +1 @@
+import{j as s}from"./jsx-runtime-D_zvdyIk.js";import{A as e,c as o}from"./provider-Bst_TvlW.js";import{e as l}from"./env-B_s3Ell7.js";const p=(i,r)=>{const t=r.parameters.apollo;return s.jsxs(e,{client:o((t==null?void 0:t.uri)||l.VITE_MUSE_ENDPOINT),children:[s.jsx(i,{}),s.jsx("script",{src:"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"}),s.jsx("script",{src:"https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"}),s.jsx("script",{src:"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"})]})};p.__docgenInfo={description:"",methods:[],displayName:"withApollo"};export{p as w};