saafe-redirection-flow 2.0.0

package/src/components/ui/form.tsx

@@ -0,0 +1,165 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/src/components/ui/frosted-panel.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FrostedPanel } from "./frosted-panel";
+
+const meta: Meta<typeof FrostedPanel> = {
+  title: "UI/FrostedPanel",
+  component: FrostedPanel,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof FrostedPanel>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <FrostedPanel.Aside>
+          <div className="p-4 text-white">Aside Content</div>
+        </FrostedPanel.Aside>
+        <FrostedPanel.Main>
+          <div className="p-4">Main Content</div>
+        </FrostedPanel.Main>
+      </>
+    ),
+  },
+};
+
+export const CustomGradient: Story = {
+  args: {
+    gradientColors: {
+      top: "#1a237e",
+      bottom: "#0d47a1",
+    },
+    children: (
+      <>
+        <FrostedPanel.Aside>
+          <div className="p-4 text-white">Aside Content</div>
+        </FrostedPanel.Aside>
+        <FrostedPanel.Main>
+          <div className="p-4">Main Content</div>
+        </FrostedPanel.Main>
+      </>
+    ),
+  },
+};
+
+export const CustomBlobConfig: Story = {
+  args: {
+    blobConfig: {
+      count: 6,
+      color: "rgba(255, 255, 255, 0.6)",
+      minSize: 150,
+      maxSize: 300,
+      speed: 5,
+    },
+    children: (
+      <>
+        <FrostedPanel.Aside>
+          <div className="p-4 text-white">Aside Content</div>
+        </FrostedPanel.Aside>
+        <FrostedPanel.Main>
+          <div className="p-4">Main Content</div>
+        </FrostedPanel.Main>
+      </>
+    ),
+  },
+};
+
+export const CustomAsideWidth: Story = {
+  args: {
+    asideWidth: "40%",
+    children: (
+      <>
+        <FrostedPanel.Aside>
+          <div className="p-4 text-white">Wider Aside Content</div>
+        </FrostedPanel.Aside>
+        <FrostedPanel.Main>
+          <div className="p-4">Main Content</div>
+        </FrostedPanel.Main>
+      </>
+    ),
+  },
+}; 

package/src/components/ui/frosted-panel.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import React, { useEffect, useRef, createContext, useContext, useState } from "react";
+import { cn } from "@/lib/utils";
+import logo from "../../assets/brand/saafe-color-white-logo.svg";
+import { LanguageSwitcher } from "../language/LanguageSwitcher";
+import { SessionTimer } from "../session/SessionTimer";
+import { SessionTimeoutScreen } from "../session/SessionTimeoutScreen";
+import { useRedirectStore } from "@/store/redirect.store";
+import { useAuthStore } from "@/store/auth.store";
+import { useTrustedCount } from "@/hooks/use-trusted-count";
+import { VersionDisplay } from "./version-display";
+
+// Create context for FrostedPanel configuration
+type FrostedPanelContextType = {
+  asideWidth?: string | number;
+  asideRatio?: string;
+  gradientColors?: {
+    top: string;
+    bottom: string;
+  };
+  blobConfig?: {
+    count: number;
+    color: string;
+    minSize: number;
+    maxSize: number;
+    speed: number;
+  };
+};
+
+const FrostedPanelContext = createContext<FrostedPanelContextType>({
+  asideWidth: "30%",
+  asideRatio: "auto",
+  gradientColors: {
+    top: "#004d4d",
+    bottom: "#00b2c1",
+  },
+  blobConfig: {
+    count: 3,
+    color: "rgba(255, 255, 255, 0.4)",
+    minSize: 100,
+    maxSize: 250,
+    speed: 0.8,
+  },
+});
+
+interface FrostedPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  asideWidth?: string | number;
+  asideRatio?: string;
+  gradientColors?: {
+    top: string;
+    bottom: string;
+  };
+  blobConfig?: {
+    count: number;
+    color: string;
+    minSize: number;
+    maxSize: number;
+    speed: number;
+  };
+}
+
+function FrostedPanel({
+  children,
+  className,
+  asideWidth = "30%",
+  asideRatio = "auto",
+  gradientColors = {
+    top: "#004d4d",
+    bottom: "#00b2c1",
+  },
+  blobConfig = {
+    count: 4,
+    color: "rgba(255, 255, 255, 0.4)",
+    minSize: 100,
+    maxSize: 250,
+    speed: 10,
+  },
+  ...props
+}: FrostedPanelProps) {
+  const contextValue = {
+    asideWidth,
+    asideRatio,
+    gradientColors,
+    blobConfig,
+  };
+
+  return (
+    <FrostedPanelContext.Provider value={contextValue}>
+      <div className={cn("flex w-full h-screen overflow-hidden", className)} {...props}>
+        {children}
+      </div>
+    </FrostedPanelContext.Provider>
+  );
+}
+
+interface AsideProps extends React.HTMLAttributes<HTMLDivElement> {
+  width?: string | number;
+  ratio?: string;
+}
+
+function Aside({ children, className, width, ratio, ...props }: AsideProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationRef = useRef<number | undefined>(undefined);
+  const currentPath = location.pathname;
+  const isLoginPage = currentPath?.split('/')?.includes('login');
+  const blobsRef = useRef<Array<{
+    x: number;
+    y: number;
+    radius: number;
+    xSpeed: number;
+    ySpeed: number;
+    opacity: number;
+  }>>([]);
+  const [isSessionExpired, setIsSessionExpired] = useState(false);
+  const { getCustomStyle } = useRedirectStore();
+  const customStyles = getCustomStyle();
+  const context = useContext(FrostedPanelContext);
+  const { isAuthenticated } = useAuthStore();
+  const { data: trustedCount, isLoading } = useTrustedCount();
+  console.log(trustedCount);
+  
+
+  // Handle session timeout - only called when timer actually reaches zero
+  const handleTimeout = () => {
+    setIsSessionExpired(true);
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Initialize blobs only once
+    if (blobsRef.current.length === 0) {
+      const blobConfig = context.blobConfig;
+      for (let i = 0; i < (blobConfig?.count || 3); i++) {
+        blobsRef.current.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          radius: blobConfig?.minSize || 100 + Math.random() * ((blobConfig?.maxSize || 250) - (blobConfig?.minSize || 100)),
+          xSpeed: (Math.random() - 0.5) * (blobConfig?.speed || 0.8),
+          ySpeed: (Math.random() - 0.5) * (blobConfig?.speed || 0.8),
+          opacity: 0.4 + Math.random() * 0.4,
+        });
+      }
+    }
+
+    const resizeCanvas = () => {
+      const parent = canvas.parentElement;
+      if (!parent) return;
+      canvas.width = parent.offsetWidth;
+      canvas.height = parent.offsetHeight;
+    };
+
+    resizeCanvas();
+    window.addEventListener("resize", resizeCanvas);
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      blobsRef.current.forEach((blob) => {
+        blob.x += blob.xSpeed;
+        blob.y += blob.ySpeed;
+
+        if (blob.x < -blob.radius || blob.x > canvas.width + blob.radius) {
+          blob.xSpeed = -blob.xSpeed;
+        }
+        if (blob.y < -blob.radius || blob.y > canvas.height + blob.radius) {
+          blob.ySpeed = -blob.ySpeed;
+        }
+
+        ctx.beginPath();
+        ctx.arc(blob.x, blob.y, blob.radius, 0, Math.PI * 2);
+        ctx.fillStyle = context.blobConfig?.color
+          .replace(")", `, ${blob.opacity})`)
+          .replace("rgba", "rgba")
+          .replace("rgb", "rgba") || "";
+        ctx.fill();
+      });
+
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      window.removeEventListener("resize", resizeCanvas);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []); // Empty dependency array to run only once
+
+  if (isSessionExpired) {
+    return <SessionTimeoutScreen />;
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col justify-center overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+        className
+      )}
+      style={{
+        width: width || context.asideWidth,
+        aspectRatio: ratio || context.asideRatio,
+        background: context.gradientColors
+          ? `linear-gradient(to bottom, ${customStyles?.primaryButtonColor || context.gradientColors.top}, ${customStyles?.primaryButtonColor ? `${customStyles?.primaryButtonColor}95` : context.gradientColors.bottom})`
+          : undefined,
+      }}
+      {...props}
+    >
+      <canvas ref={canvasRef} className="absolute inset-0 z-10 w-full h-full" />
+      <div className="absolute inset-0 backdrop-blur-[140px] bg-white/10 z-20" />
+      <div className="z-50 mx-6 mt-4">
+        {isLoginPage ? (
+          <LanguageSwitcher />
+        ) : (
+          <SessionTimer onTimeout={handleTimeout} />
+        )}
+      </div>
+      <div className="relative z-30 p-6 flex-1 flex flex-col overflow-y-auto max-h-screen [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+        <div className="pb-8">
+          {children}
+        </div>
+      </div>
+      <div className="z-50 ml-4 mt-4">
+        <div className="flex justify-start mb-4">
+          <VersionDisplay variant="minimal"showIcon={true} />
+        </div>
+        <div className="w-80 h-30 bg-black/15 rounded-tr-full rounded-br-4xl absolute left-0 bottom-0 blur-2xl -z-10" />
+        {isAuthenticated ?
+          <>
+            <div className="text-white text-lg flex items-center gap-2 z-auto">
+              <p>Powered by</p>
+              <div className="flex flex-row gap-1 items-end">
+                <img src={logo} alt="Saafe Logo" className="w-20 h-auto mb-1" />
+              </div>
+            </div>
+            {!isLoading && trustedCount?.displayText && (
+              <p className="text-surface font-light text-md mt-0.5">{trustedCount.displayText}</p>
+            )}
+          </>
+          :
+          <>
+            <div className="text-surface text-sm flex items-center gap-2 z-50">
+              <p>Powered by RBI regulated AA</p>
+            </div>
+            <div className="flex flex-row gap-1 items-end">
+              <img src={logo} alt="Saafe Logo" className="w-22 h-auto mt-0.5" />
+            </div>
+          </>
+        }
+      </div>
+    </div>
+  );
+}
+
+function Main({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex-1 flex flex-col overflow-y-auto", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Assign components to FrostedPanel
+FrostedPanel.Aside = Aside;
+FrostedPanel.Main = Main;
+
+export { FrostedPanel };

package/src/components/ui/input.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface InputProps extends React.ComponentProps<"input"> {
+  leftSection?: React.ReactNode;
+  rightSection?: React.ReactNode;
+}
+
+function Input({ className, type, leftSection, rightSection, ...props }: InputProps) {
+  return (
+    <div className="relative w-full">
+      {leftSection && (
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 z-10">
+          {leftSection}
+        </div>
+      )}
+      {rightSection && (
+        <div className="absolute right-3 top-1/2 -translate-y-1/2 z-10">
+          {rightSection}
+        </div>
+      )}
+      <input
+        type={type}
+        data-slot="input"
+        className={cn(
+          "dark:text-white file:text-consent-primary placeholder:text-consent-secondary selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-md",
+          "focus-visible:border-primary focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          leftSection && "pl-10",
+          rightSection && "pr-10",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export { Input }

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./label";
+
+const meta: Meta<typeof Label> = {
+  title: "UI/Label",
+  component: Label,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  args: {
+    children: "Default Label",
+  },
+};
+
+export const WithHtmlFor: Story = {
+  args: {
+    htmlFor: "input-id",
+    children: "Label with htmlFor",
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    className: "text-lg text-primary",
+    children: "Custom Styled Label",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    className: "group-data-[disabled=true]:opacity-50",
+    children: "Disabled Label",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    className: "flex items-center gap-2",
+    children: (
+      <>
+        <span>Label with Icon</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="8" x2="12" y2="12" />
+          <line x1="12" y1="16" x2="12.01" y2="16" />
+        </svg>
+      </>
+    ),
+  },
+}; 

package/src/components/ui/label.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { useRTL } from "@/contexts/RTLContext"
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { isRTL } = useRTL();
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        `flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 ${isRTL ? 'flex-row-reverse' : ''}`,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }