saafe-redirection-flow 2.0.0

package/src/components/ui/stepper.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { LoaderCircle } from "lucide-react";
+import * as React from "react";
+import { createContext, useContext } from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+
+// Types
+type StepperContextValue = {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+  orientation: "horizontal" | "vertical";
+};
+
+type StepItemContextValue = {
+  step: number;
+  state: StepState;
+  isDisabled: boolean;
+  isLoading: boolean;
+};
+
+type StepState = "active" | "completed" | "inactive" | "loading";
+
+// Contexts
+const StepperContext = createContext<StepperContextValue | undefined>(undefined);
+const StepItemContext = createContext<StepItemContextValue | undefined>(undefined);
+
+const useStepper = () => {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a Stepper");
+  }
+  return context;
+};
+
+const useStepItem = () => {
+  const context = useContext(StepItemContext);
+  if (!context) {
+    throw new Error("useStepItem must be used within a StepperItem");
+  }
+  return context;
+};
+
+// Components
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: "horizontal" | "vertical";
+}
+
+const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
+  (
+    { defaultValue = 0, value, onValueChange, orientation = "horizontal", className, ...props },
+    ref,
+  ) => {
+    const [activeStep, setInternalStep] = React.useState(defaultValue);
+
+    const setActiveStep = React.useCallback(
+      (step: number) => {
+        if (value === undefined) {
+          setInternalStep(step);
+        }
+        onValueChange?.(step);
+      },
+      [value, onValueChange],
+    );
+
+    const currentStep = value ?? activeStep;
+
+    return (
+      <StepperContext.Provider
+        value={{
+          activeStep: currentStep,
+          setActiveStep,
+          orientation,
+        }}
+      >
+        <div
+          ref={ref}
+          className={cn(
+            "group/stepper inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+            className,
+          )}
+          data-orientation={orientation}
+          {...props}
+        />
+      </StepperContext.Provider>
+    );
+  },
+);
+Stepper.displayName = "Stepper";
+
+// StepperItem
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number;
+  completed?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+const StepperItem = React.forwardRef<HTMLDivElement, StepperItemProps>(
+  (
+    { step, completed = false, disabled = false, loading = false, className, children, ...props },
+    ref,
+  ) => {
+    const { activeStep } = useStepper();
+
+    const state: StepState =
+      completed || step < activeStep ? "completed" : activeStep === step ? "active" : "inactive";
+
+    const isLoading = loading && step === activeStep;
+
+    return (
+      <StepItemContext.Provider value={{ step, state, isDisabled: disabled, isLoading }}>
+        <div
+          ref={ref}
+          className={cn(
+            "group/step flex items-center group-data-[orientation=horizontal]/stepper:flex-row group-data-[orientation=vertical]/stepper:flex-col",
+            className,
+          )}
+          data-state={state}
+          {...(isLoading ? { "data-loading": true } : {})}
+          {...props}
+        >
+          {children}
+        </div>
+      </StepItemContext.Provider>
+    );
+  },
+);
+StepperItem.displayName = "StepperItem";
+
+// StepperTrigger
+interface StepperTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+}
+
+const StepperTrigger = React.forwardRef<HTMLButtonElement, StepperTriggerProps>(
+  ({ asChild = false, className, children, ...props }, ref) => {
+    const { setActiveStep } = useStepper();
+    const { step, isDisabled } = useStepItem();
+
+    if (asChild) {
+      return <div className={className}>{children}</div>;
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          "inline-flex items-center gap-3 disabled:pointer-events-none disabled:opacity-50",
+          className,
+        )}
+        onClick={() => setActiveStep(step)}
+        disabled={isDisabled}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+StepperTrigger.displayName = "StepperTrigger";
+
+// StepperIndicator
+interface StepperIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+const StepperIndicator = React.forwardRef<HTMLDivElement, StepperIndicatorProps>(
+  ({ asChild = false, className, children, ...props }, ref) => {
+    const { state, step, isLoading } = useStepItem();
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground data-[state=active]:bg-primary data-[state=completed]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:text-primary-foreground",
+          className,
+        )}
+        data-state={state}
+        {...props}
+      >
+        {asChild ? (
+          children
+        ) : (
+          <>
+            <span className="transition-all group-data-[loading=true]/step:scale-0 group-data-[state=completed]/step:scale-0 group-data-[loading=true]/step:opacity-0 group-data-[state=completed]/step:opacity-0 group-data-[loading=true]/step:transition-none">
+              {step}
+            </span>
+            <CheckIcon
+              className="absolute scale-0 opacity-0 transition-all group-data-[state=completed]/step:scale-100 group-data-[state=completed]/step:opacity-100"
+              width={16}
+              height={16}
+              aria-hidden="true"
+            />
+            {isLoading && (
+              <span className="absolute transition-all">
+                <LoaderCircle
+                  className="animate-spin"
+                  size={14}
+                  strokeWidth={2}
+                  aria-hidden="true"
+                />
+              </span>
+            )}
+          </>
+        )}
+      </div>
+    );
+  },
+);
+StepperIndicator.displayName = "StepperIndicator";
+
+// StepperTitle
+const StepperTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-sm font-medium", className)} {...props} />
+  ),
+);
+StepperTitle.displayName = "StepperTitle";
+
+// StepperDescription
+const StepperDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+StepperDescription.displayName = "StepperDescription";
+
+// StepperSeparator
+const StepperSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "m-0.5 bg-muted group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=vertical]/stepper:h-12 group-data-[orientation=horizontal]/stepper:w-full group-data-[orientation=vertical]/stepper:w-0.5 group-data-[orientation=horizontal]/stepper:flex-1 group-data-[state=completed]/step:bg-primary",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+StepperSeparator.displayName = "StepperSeparator";
+
+export {
+  Stepper,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+}; 

package/src/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent } 

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-gray-700 text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-gray-700 fill-gray-700 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/ui/url-decode-loader.tsx

@@ -0,0 +1,36 @@
+import logo from "@/assets/brand/saafe-icon.svg";
+
+interface UrlLoaderProps {
+  message?: string;
+  isError?: boolean;
+  isWarning?: boolean;
+}
+
+export function UrlDecodeLoader({ message = "Loading...", isError = false, isWarning = false }: UrlLoaderProps) {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen w-full">
+      <div className="flex flex-col items-center gap-6">
+        <img src={logo} alt="Saafe Logo" className="h-16 w-16" />
+
+        {isError ? (
+          <div className="flex flex-col items-center gap-4">
+            <p className="text-red-500 font-medium text-lg">Error</p>
+            <p className="text-gray-700 dark:text-gray-300">{message}</p>
+          </div>
+        ) : isWarning ? (
+          <div className="flex flex-col items-center gap-4">
+            <p className="text-yellow-500 font-medium text-lg">No Consent handler found</p>
+            <p className="text-gray-700 dark:text-gray-300">{message}</p>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex items-center justify-center">
+              <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <p className="text-gray-700 dark:text-gray-300">{message}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+} 

package/src/components/ui/version-display.tsx

@@ -0,0 +1,104 @@
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Info } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { getCurrentEnvironment, getEnvironmentConfig } from "@/config/environments";
+
+interface VersionDisplayProps {
+  className?: string;
+  variant?: "default" | "footer" | "badge" | "minimal";
+  showIcon?: boolean;
+  showLabel?: boolean;
+}
+
+export function VersionDisplay({ 
+  className, 
+  variant = "default",
+  showIcon = true,
+  showLabel = true
+}: VersionDisplayProps) {
+  // Get version from package.json
+  const version = import.meta.env.VITE_APP_VERSION || "1.1.0";
+  const buildDate = import.meta.env.VITE_BUILD_DATE || new Date().toISOString().split('T')[0];
+  const environment = getCurrentEnvironment();
+  const config = getEnvironmentConfig();
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
+
+  const VersionContent = () => {
+    switch (variant) {
+      case "footer":
+        return (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            {showIcon && <Info className="h-3 w-3" />}
+            <span>v{version}</span>
+          </div>
+        );
+      
+      case "badge":
+        return (
+          <Badge variant="outline" className="text-xs">
+            {showIcon && <Info className="h-3 w-3 mr-1" />}
+            v{version}
+          </Badge>
+        );
+      
+      case "minimal":
+        return (
+          <span className={cn("text-xs text-muted-foreground", isMobile ? "text-muted-secondary font-light" : "text-white")}>
+            v{version} {environment.toLowerCase() !== 'production' && environment !== "" ? `| ${environment.toUpperCase()}` : null}
+          </span>
+        );
+      
+      default:
+        return (
+          <div className="flex items-center gap-2 text-sm">
+            {showIcon && <Info className="h-4 w-4 text-muted-foreground" />}
+            <div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
+              {showLabel && <span className="text-muted-foreground">Version:</span>}
+              <span className="font-medium">v{version}</span>
+              <span className="text-xs text-muted-foreground hidden sm:inline">
+                ({buildDate})
+              </span>
+            </div>
+          </div>
+        );
+    }
+  };
+
+      const tooltipContent = (
+      <div className="min-w-48">
+        <div className="text-center mb-2">
+          <div className="text-sm font-medium">Version {version}</div>
+        </div>
+        <div className="flex flex-col gap-1">
+          <div className="text-xs text-white">Released on {buildDate}</div>
+          {
+            environment !== "production" && (
+              <>
+                <div className="text-xs text-white">Environment: {config.name}</div>
+                <div className="text-xs text-white">API: {config.apiBaseUrl}</div>
+                {config.debug && <div className="text-xs text-yellow-500">Debug Mode Enabled</div>}
+              </>
+            )
+          }
+        </div>
+      </div>
+    );
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className={cn("cursor-help", className)}>
+            <VersionContent />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          {tooltipContent}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+} 

package/src/components/ui/web-footer.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { useRTL } from '@/contexts/RTLContext';
+const WebFooter = ({
+  show,
+  children
+}: {
+  show: boolean;
+  children: React.ReactNode;
+}) => {
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const { isRTL } = useRTL();
+  return (
+    <div className='w-full'>
+      <AnimatePresence>
+        {(show && !isMobile) ? (
+          <motion.div
+            key={"desktop"}
+            initial={{ y: 100, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 100, opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className={`${isRTL ? 'w-[70%] right-[30%]' : 'w-[70%] left-[30%]'} fixed bottom-0`}
+          >
+            <div className='drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] flex justify-end w-full px-14 gap-4 py-4 items-end bg-white dark:bg-card'>
+              {children}
+            </div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export default WebFooter

package/src/config/environments.ts

@@ -0,0 +1,99 @@
+export interface EnvironmentConfig {
+  name: string;
+  apiBaseUrl: string;
+  debug: boolean;
+  analyticsEnabled: boolean;
+  features: {
+    [key: string]: boolean;
+  };
+}
+
+export const environments: Record<string, EnvironmentConfig> = {
+  production: {
+    name: 'Production',
+    apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
+    debug: false,
+    analyticsEnabled: true,
+    features: {
+      debugPanel: false,
+      testMode: false,
+      mockData: false,
+    },
+  },
+  stage: {
+    name: 'Stage',
+    apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
+    debug: true,
+    analyticsEnabled: true,
+    features: {
+      debugPanel: true,
+      testMode: true,
+      mockData: false,
+    },
+  },
+  sandbox: {
+    name: 'Sandbox',
+    apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
+    debug: true,
+    analyticsEnabled: false,
+    features: {
+      debugPanel: true,
+      testMode: true,
+      mockData: true,
+    },
+  },
+  development: {
+    name: 'Development',
+    apiBaseUrl: 'http://localhost:3000',
+    debug: true,
+    analyticsEnabled: false,
+    features: {
+      debugPanel: true,
+      testMode: true,
+      mockData: true,
+    },
+  },
+};
+
+// Get current environment based on various indicators
+export function getCurrentEnvironment(): string {
+  // Check for explicit environment variable
+  if (import.meta.env.VITE_ENVIRONMENT) {
+    return import.meta.env.VITE_ENVIRONMENT;
+  }
+
+  // Check build mode
+  if (import.meta.env.MODE) {
+    return import.meta.env.MODE;
+  }
+
+  // Check hostname in browser
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    
+    if (hostname.includes('localhost') || hostname.includes('127.0.0.1')) {
+      return 'development';
+    } else if (hostname.includes('sandbox')) {
+      return 'sandbox';
+    } else if (hostname.includes('stage') || hostname.includes('staging')) {
+      return 'stage';
+    } else {
+      return 'production';
+    }
+  }
+
+  // Default to production
+  return 'production';
+}
+
+// Get configuration for current environment
+export function getEnvironmentConfig(): EnvironmentConfig {
+  const currentEnv = getCurrentEnvironment();
+  return environments[currentEnv] || environments.production;
+}
+
+// Helper to check if feature is enabled
+export function isFeatureEnabled(feature: string): boolean {
+  const config = getEnvironmentConfig();
+  return config.features[feature] || false;
+}