saafe-redirection-flow 2.0.0

package/src/components/ui/skeleton.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "./skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "UI/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  args: {
+    className: "h-4 w-[250px]",
+  },
+};
+
+export const Circle: Story = {
+  args: {
+    className: "h-12 w-12 rounded-full",
+  },
+};
+
+export const Card: Story = {
+  args: {
+    className: "h-[200px] w-[300px] rounded-lg",
+  },
+};
+
+export const Text: Story = {
+  args: {
+    className: "h-4 w-[200px]",
+  },
+};
+
+export const Avatar: Story = {
+  args: {
+    className: "h-10 w-10 rounded-full",
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    className: "h-4 w-[250px] bg-gray-300",
+  },
+}; 

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/ui/step.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Step, StepGroup, StepConnector } from "./step";
+import { Link, Shield, FileText } from "lucide-react";
+import { useState, useEffect } from "react";
+
+const meta: Meta<typeof Step> = {
+  title: "UI/Step",
+  component: Step,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Step>;
+
+// Example of a step with dynamic child steps
+const StepWithDynamicChildren = () => {
+  const [childSteps, setChildSteps] = useState<Array<{
+    id: string;
+    title: string;
+    description: string;
+    isActive: boolean;
+    isCompleted: boolean;
+  }>>([]);
+
+  useEffect(() => {
+    // Simulate API fetch
+    const fetchedSteps = [
+      {
+        id: "bank-1",
+        title: "Bank Accounts",
+        description: "Link your bank accounts",
+        isActive: true,
+        isCompleted: false,
+      },
+      {
+        id: "insurance-1",
+        title: "Insurance",
+        description: "Link your insurance policies",
+        isActive: false,
+        isCompleted: false,
+      },
+      {
+        id: "investment-1",
+        title: "Investments",
+        description: "Link your investment accounts",
+        isActive: false,
+        isCompleted: false,
+      },
+    ];
+
+    // Simulate delayed loading of child steps
+    setTimeout(() => {
+      setChildSteps(fetchedSteps);
+    }, 1000);
+  }, []);
+
+  return (
+    <div className="w-[600px] p-8 bg-gray-100 rounded-lg">
+      <StepGroup activeStep={2} completedSteps={[1]} baseColor="#004d4d" spacing={32}>
+        <div className="relative">
+          <Step
+            step={1}
+            title="First Step"
+            description="This is the first step"
+            icon={<Shield className="w-4 h-4" />}
+            isActive={false}
+            isCompleted={true}
+          />
+          <StepConnector isActive={false} isCompleted={true} />
+        </div>
+        <div className="relative">
+          <Step
+            step={2}
+            title="Link Accounts"
+            description="Select & Link the accounts you'd like to share"
+            icon={<Link className="w-4 h-4" />}
+            isActive={true}
+            isCompleted={false}
+            childSteps={childSteps}
+          />
+          <StepConnector isActive={true} isCompleted={false} />
+        </div>
+        <div className="relative">
+          <Step
+            step={3}
+            title="Review Consent"
+            description="Review and approve the consent"
+            icon={<FileText className="w-4 h-4" />}
+            isActive={false}
+            isCompleted={false}
+            isLast={true}
+          />
+        </div>
+      </StepGroup>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    step: 1,
+    title: "Default Step",
+    description: "This is a default step with no special state",
+  },
+};
+
+export const Active: Story = {
+  args: {
+    step: 2,
+    title: "Active Step",
+    description: "This step is currently active",
+    isActive: true,
+    icon: <Shield className="w-4 h-4" />,
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    step: 3,
+    title: "Completed Step",
+    description: "This step has been completed",
+    isCompleted: true,
+    icon: <Link className="w-4 h-4" />,
+  },
+};
+
+export const WithChildSteps: Story = {
+  render: () => <StepWithDynamicChildren />,
+}; 

package/src/components/ui/step.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Check, Circle } from "lucide-react";
+import { motion } from "framer-motion";
+import { useRTL } from '@/contexts/RTLContext';
+
+export interface ChildStepProps {
+  id: string;
+  title: string;
+  description?: string;
+  isActive?: boolean;
+  isCompleted?: boolean;
+}
+
+export interface StepProps {
+  step: number;
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+  isCompleted?: boolean;
+  isLast?: boolean;
+  baseColor?: string;
+  onStepClick?: () => void;
+  height?: number;
+  isChildStep?: boolean;
+  isParentPending?: boolean;
+  notAuthenticated?: boolean;
+  isRTL?: boolean;
+}
+
+export interface StepContextType {
+  activeStep: number;
+  completedSteps: number[];
+  baseColor: string;
+  onStepComplete: (step: number) => void;
+  spacing?: number;
+}
+
+export const StepContext = React.createContext<StepContextType>({
+  activeStep: 1,
+  completedSteps: [],
+  baseColor: "#004d4d",
+  onStepComplete: () => { },
+  spacing: 24,
+});
+
+export const Step = React.forwardRef<HTMLDivElement, StepProps>(
+  (
+    {
+      title,
+      description,
+      icon,
+      isActive = false,
+      isCompleted = false,
+      isParentPending = false,
+      isLast = false,
+      baseColor = "#004d4d",
+      onStepClick,
+      height = 96,
+      isChildStep = false,
+      notAuthenticated = false,
+      isRTL = false,
+    },
+    ref
+  ) => {
+
+    const getStepIndicator = () => {
+      const sizeClasses = isChildStep ? "w-5 h-5" : "w-8 h-8";
+
+      if (isCompleted) {
+        return (
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            className={cn(sizeClasses, `rounded-full bg-white flex items-center justify-center`, isChildStep ? "bg-transparent border-none" : '')}
+          >
+            {isChildStep ? <Circle className={cn("w-3 h-3", `fill-white mt-1`, isRTL && "mr-[12px]")} /> : <Check className={cn("w-4 h-4", `text-[${baseColor}]`)} />}
+          </motion.div >
+        );
+      }
+
+      if (isActive) {
+        return (
+          <motion.div
+            initial={{ scale: 0.8 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            className={cn(sizeClasses, "rounded-full bg-white flex items-center justify-center", isChildStep ? "bg-transparent border-none" : '')}
+          >
+            {icon && !isChildStep ? (
+              <div className={cn("w-4 h-4", `text-[${baseColor}]`)}>{icon}</div>
+            ) : (
+              <Circle color="white" className={cn(isChildStep ? "w-3 h-3 border-none" : "w-4 h-4", `fill-white mt-1`)} />
+            )}
+          </motion.div>
+        );
+      }
+
+      return (
+        <div className={cn(sizeClasses, "rounded-full border-1 border-white/50 flex items-center justify-center", isChildStep && "border-none", isParentPending && "bg-white")}>
+          {icon && !isChildStep ? (
+            <div className={cn(isChildStep ? "w-3 h-3" : "w-4 h-4", "text-white/50", isParentPending && `text-[${baseColor}]`)}>{icon}</div>
+          ) : (
+            <Circle className={cn(isChildStep ? "w-3 h-3" : "w-4 h-4", "text-white/50")} />
+          )}
+        </div>
+      );
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative flex flex-col gap-2 cursor-default transition-all duration-200",
+          isLast && "mb-0",
+          isChildStep && "ml-1.5"
+        )}
+        style={{ minHeight: `${height}px` }}
+        onClick={onStepClick}
+      >
+        <div className="flex items-start gap-4">
+          <div className="flex-shrink-0">{notAuthenticated ? <motion.div
+            initial={{ scale: 0.8 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            className={cn('w-8 h-8', "rounded-full bg-white flex items-center justify-center", isChildStep && "bg-transparent border-none")}
+          >
+            {icon && !isChildStep ? (
+              <div className={cn("w-4 h-4", `text-[${baseColor}]`)}>{icon}</div>
+            ) : (
+              <Circle className={cn(isChildStep ? "w-3 h-3 border-none" : "w-4 h-4", `fill-white mt-1`)} />
+            )}
+          </motion.div> : getStepIndicator()}</div>
+          <div className="flex-1">
+            <h3
+              className={cn(
+                "text-white/80 transition-all duration-200",
+                isActive && !isParentPending ? "text-lg" : "text-sm",
+                "font-light",
+                (isActive || isCompleted || isParentPending) && "font-medium text-white",
+                isActive ? "mt-0" : '',
+                isChildStep ? 'mb-2' : ' mt-1'
+              )}
+            >
+              {title}
+            </h3>
+            {description && (
+              <p className={cn(
+                "text-white/60 mt-1",
+                isChildStep ? "text-xs" : "text-sm"
+              )}>
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+Step.displayName = "Step";
+
+export interface StepConnectorProps {
+  isActive: boolean;
+  isCompleted: boolean;
+  baseColor?: string;
+}
+
+export const StepConnector = ({ isActive, isCompleted, baseColor = "#FFF" }: StepConnectorProps) => {
+  const { isRTL } = useRTL();
+
+  return (
+    <div className={`absolute ${isRTL ? 'right-4' : 'left-4'} top-6 bottom-0 w-[1px]`}>
+      <motion.div
+        initial={{ height: 0, opacity: 0 }}
+        animate={{
+          height: "100%",
+          opacity: 1,
+          background: isCompleted
+            ? baseColor
+            : isActive
+              ? "linear-gradient(to bottom, #fff 50%, transparent 50%)"
+              : "transparent",
+          backgroundSize: "4px 4px",
+        }}
+        transition={{
+          duration: 0.8,
+          ease: "easeInOut",
+          opacity: { duration: 0.3 }
+        }}
+        className="w-full"
+      />
+    </div>
+  );
+};
+
+export interface StepGroupProps {
+  children: React.ReactNode;
+  activeStep: number;
+  completedSteps: number[];
+  baseColor?: string;
+  onStepComplete?: (step: number) => void;
+  className?: string;
+  spacing?: number;
+}
+
+export const StepGroup = ({
+  children,
+  activeStep,
+  completedSteps,
+  baseColor = "#FFF",
+  onStepComplete = () => { },
+  className,
+  spacing = 24,
+}: StepGroupProps) => {
+  const contextValue = {
+    activeStep,
+    completedSteps,
+    baseColor,
+    onStepComplete,
+    spacing,
+  };
+
+  return (
+    <StepContext.Provider value={contextValue}>
+      <div className={cn("relative", className)}>{children}</div>
+    </StepContext.Provider>
+  );
+}; 

package/src/components/ui/stepper-progress.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Stepper,
+  StepperIndicator,
+  StepperItem,
+  StepperTrigger,
+} from "@/components/ui/stepper";
+import { motion } from "framer-motion";
+import { useMediaQuery } from "@/hooks/use-media-query";
+
+interface StepperProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: number;
+  currentStep: number;
+  onStepChange?: (step: number) => void;
+  showControls?: boolean;
+  className?: string;
+  childProgress?: Record<number, number>; // Tracks progress for steps with children
+  maxChildProgress?: Record<number, number>; // Max progress for each parent
+}
+
+export function StepperProgress({
+  steps,
+  currentStep,
+  onStepChange,
+  showControls = false,
+  className,
+  childProgress = {},
+  maxChildProgress = {},
+  ...props
+}: StepperProgressProps) {
+  const stepsArray = Array.from({ length: steps }, (_, i) => i + 1);
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  
+  // Initialize correctly on mobile screens for the login page
+  React.useEffect(() => {
+    if (isMobile && window.location.pathname === '/login') {
+      // Reset child progress so progress bar doesn't show as completed
+      if (Object.keys(childProgress).length === 0 && currentStep === 1) {
+        // Skip this setup if the childProgress is already set
+        onStepChange?.(1);
+      }
+    }
+  }, [isMobile, currentStep, onStepChange, childProgress]);
+  
+  const handlePrev = () => {
+    if (currentStep > 1 && onStepChange) {
+      onStepChange(currentStep - 1);
+    }
+  };
+  
+  const handleNext = () => {
+    if (currentStep < steps && onStepChange) {
+      onStepChange(currentStep + 1);
+    }
+  };
+
+  return (
+    <div 
+      className={cn("flex items-center gap-2 w-full", className)} 
+      {...props}
+    >
+      {showControls && (
+        <Button
+          className="shrink-0"
+          variant="ghost"
+          size="icon"
+          onClick={handlePrev}
+          disabled={currentStep === 1}
+          aria-label="Previous step"
+        >
+          <ChevronLeftIcon size={16} strokeWidth={2} aria-hidden="true" />
+        </Button>
+      )}
+      
+      <Stepper value={currentStep} onValueChange={onStepChange} className="gap-1 w-full">
+        {stepsArray.map((step) => {
+          const isCompleted = step < currentStep;
+          const hasPartialProgress = childProgress[step] !== undefined;
+          const progressPercentage = hasPartialProgress ? 
+            (childProgress[step] / (maxChildProgress[step] || 1)) * 100 : 0;
+          
+          return (
+            <StepperItem 
+              key={step} 
+              step={step} 
+              className="flex-1 relative"
+              completed={isCompleted}
+            >
+              <StepperTrigger className="w-full flex-col items-start gap-2" asChild>
+                <div className="relative w-full h-1 bg-gray-200 rounded-full overflow-hidden">
+                  {/* Partial progress indicator */}
+                  {hasPartialProgress && !isCompleted && (
+                    <motion.div
+                      className="absolute left-0 top-0 h-full bg-primary"
+                      initial={{ width: 0 }}
+                      animate={{ width: `${progressPercentage}%` }}
+                      transition={{ duration: 0.5, ease: "easeInOut" }}
+                    />
+                  )}
+                  
+                  {/* Full progress indicator - visible when step is completed */}
+                  {isCompleted && (
+                    <div className="absolute left-0 top-0 h-full w-full bg-primary" />
+                  )}
+                  
+                  {/* Hidden indicator for screen readers */}
+                  <StepperIndicator asChild className="opacity-0 pointer-events-none">
+                    <span className="sr-only">{step}</span>
+                  </StepperIndicator>
+                </div>
+              </StepperTrigger>
+            </StepperItem>
+          );
+        })}
+      </Stepper>
+      
+      {showControls && (
+        <Button
+          className="shrink-0"
+          variant="ghost"
+          size="icon"
+          onClick={handleNext}
+          disabled={currentStep === steps}
+          aria-label="Next step"
+        >
+          <ChevronRightIcon size={16} strokeWidth={2} aria-hidden="true" />
+        </Button>
+      )}
+    </div>
+  );
+}