add saas demo

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>

README.md

@@ -224,7 +224,7 @@ Additional to the AGPL licensed Formbricks core, this repository contains code l
 
 ### White-Labeling Formbricks and Other Licensing Needs
 
-If you have other licensing requirements such as White-Labeling please [send us an email](mailto:hola@formbricks.com).
+We currently do not offer Formbricks white-labeled. Any other needs? [Send us an email](mailto:hola@formbricks.com).
 
 ### Why charge for Enterprise Features?
 

apps/demo/components/LayoutApp.tsx

@@ -1,6 +1,6 @@
-import Sidebar from "./Sidebar";
+import { Sidebar } from "./Sidebar";
 
-export default function LayoutApp({ children }: { children: React.ReactNode }) {
+export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="min-h-full">
       {/* Static sidebar for desktop */}
@@ -10,4 +10,4 @@ export default function LayoutApp({ children }: { children: React.ReactNode }) {
       <div className="flex flex-1 flex-col lg:pl-64">{children}</div>
     </div>
   );
-}
+};

apps/demo/components/Sidebar.tsx

@@ -26,7 +26,7 @@ const secondaryNavigation = [
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 
-export default function Sidebar({}) {
+export const Sidebar = () => {
   return (
     <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
@@ -63,4 +63,4 @@ export default function Sidebar({}) {
       </nav>
     </div>
   );
-}
+};

apps/demo/components/ui/badge.tsx

@@ -0,0 +1,31 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={classNames(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

apps/demo/components/ui/breadcrumb.tsx

@@ -0,0 +1,91 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={classNames(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={classNames("inline-flex items-center gap-1.5", className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp ref={ref} className={classNames("hover:text-foreground transition-colors", className)} {...props} />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={classNames("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={classNames("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={classNames("flex h-9 w-9 items-center justify-center", className)}
+    {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

apps/demo/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={classNames(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

apps/demo/components/ui/card.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={classNames("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={classNames("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={classNames("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={classNames("text-muted-foreground text-sm", className)} {...props} />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={classNames("p-6 pt-0", className)} {...props} />
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={classNames("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

apps/demo/components/ui/dropdown-menu.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={classNames(
+      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={classNames(
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={classNames(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={classNames(
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={classNames(
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={classNames(
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={classNames("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={classNames("bg-muted -mx-1 my-1 h-px", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={classNames("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

apps/demo/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={classNames(
+        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

apps/demo/components/ui/pagination.tsx

@@ -0,0 +1,89 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+import { ButtonProps, buttonVariants } from "./button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={classNames("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={classNames("flex flex-row items-center gap-1", className)} {...props} />
+  )
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => <li ref={ref} className={classNames("", className)} {...props} />
+);
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={classNames(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={classNames("gap-1 pl-2.5", className)}
+    {...props}>
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={classNames("gap-1 pr-2.5", className)}
+    {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span aria-hidden className={classNames("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

apps/demo/components/ui/progress.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={classNames("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
+    {...props}>
+    <ProgressPrimitive.Indicator
+      className="bg-primary h-full w-full flex-1 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

apps/demo/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={classNames(
+      "bg-border shrink-0",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

apps/demo/components/ui/sheet.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps, cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={classNames(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+  ({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content ref={ref} className={classNames(sheetVariants({ side }), className)} {...props}>
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={classNames("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={classNames("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={classNames("text-foreground text-lg font-semibold", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={classNames("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

apps/demo/components/ui/table.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={classNames("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={classNames("[&_tr]:border-b", className)} {...props} />
+  )
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={classNames("[&_tr:last-child]:border-0", className)} {...props} />
+  )
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot
+      ref={ref}
+      className={classNames("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={classNames(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={classNames(
+        "text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={classNames("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={classNames("text-muted-foreground mt-4 text-sm", className)} {...props} />
+  )
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

apps/demo/components/ui/tabs.tsx

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

apps/demo/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { classNames } from "../../lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={classNames(
+      "bg-popover text-popover-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

apps/demo/lib/utils.ts

@@ -1,3 +1,3 @@
-export function classNames(...classes: any) {
+export const classNames = (...classes: any) => {
   return classes.filter(Boolean).join(" ");
-}
+};

apps/demo/package.json

@@ -13,13 +13,21 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/ui": "workspace:*",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "classnames": "^2.5.1",
     "lucide-react": "^0.378.0",
     "next": "14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "eslint-config-formbricks": "workspace:*",
-    "@formbricks/tsconfig": "workspace:*"
+    "@formbricks/tsconfig": "workspace:*",
+    "eslint-config-formbricks": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 
 import "../styles/globals.css";
 
-export default function App({ Component, pageProps }: AppProps) {
+const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <Head>
@@ -18,4 +18,6 @@ export default function App({ Component, pageProps }: AppProps) {
       <Component {...pageProps} />
     </>
   );
-}
+};
+
+export default App;

apps/demo/pages/_document.tsx

@@ -1,6 +1,6 @@
 import { Head, Html, Main, NextScript } from "next/document";
 
-export default function Document() {
+const Document = () => {
   return (
     <Html lang="en" className="h-full bg-slate-50">
       <Head />
@@ -10,4 +10,6 @@ export default function Document() {
       </body>
     </Html>
   );
-}
+};
+
+export default Document;

apps/demo/pages/app/index.tsx

@@ -9,7 +9,7 @@ import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-export default function AppPage({}) {
+const AppPage = ({}) => {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -36,7 +36,11 @@ export default function AppPage({}) {
 
     if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
       const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
-      const userInitAttributes = { language: "de", "Init Attribute 1": "eight", "Init Attribute 2": "two" };
+      const userInitAttributes = {
+        language: "de",
+        "Init Attribute 1": "eight",
+        "Init Attribute 2": "two",
+      };
 
       formbricks.init({
         environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
@@ -234,4 +238,6 @@ export default function AppPage({}) {
       </div>
     </div>
   );
-}
+};
+
+export default AppPage;

apps/demo/pages/saas/index.tsx

@@ -0,0 +1,663 @@
+import {
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  CreditCard,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreVertical,
+  Package,
+  Package2,
+  PanelLeft,
+  Search,
+  Settings,
+  ShoppingCart,
+  Truck,
+  Users2,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+import formbricks from "@formbricks/js/app";
+
+import { Badge } from "../../components/ui/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../../components/ui/breadcrumb";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+import { Input } from "../../components/ui/input";
+import { Pagination, PaginationContent, PaginationItem } from "../../components/ui/pagination";
+import { Progress } from "../../components/ui/progress";
+import { Separator } from "../../components/ui/separator";
+import { Sheet, SheetContent, SheetTrigger } from "../../components/ui/sheet";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../components/ui/tooltip";
+
+declare const window: any;
+
+const SaaSPage = ({}) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
+    const addFormbricksDebugParam = () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      if (!urlParams.has("formbricksDebug")) {
+        urlParams.set("formbricksDebug", "true");
+        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+        window.history.replaceState({}, "", newUrl);
+      }
+    };
+
+    addFormbricksDebugParam();
+
+    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+      const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
+      const userInitAttributes = {
+        language: "de",
+        "Init Attribute 1": "eight",
+        "Init Attribute 2": "two",
+      };
+
+      formbricks.init({
+        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
+        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
+        userId,
+        attributes: userInitAttributes,
+      });
+    }
+
+    // Connect next.js router to Formbricks
+    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+      const handleRouteChange = formbricks?.registerRouteChange;
+      router.events.on("routeChangeComplete", handleRouteChange);
+
+      return () => {
+        router.events.off("routeChangeComplete", handleRouteChange);
+      };
+    }
+  });
+
+  return (
+    <div className="bg-muted/40 flex min-h-screen w-full flex-col">
+      <TooltipProvider delayDuration={10}>
+        <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
+          <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
+            <Link
+              href="#"
+              className="bg-primary text-primary-foreground group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:h-8 md:w-8 md:text-base">
+              <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
+              <span className="sr-only">Acme Inc</span>
+            </Link>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href="#"
+                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
+                  <Home className="h-5 w-5" />
+                  <span className="sr-only">Dashboard</span>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">Dashboard</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href="#"
+                  className="bg-accent text-accent-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
+                  <ShoppingCart className="h-5 w-5" />
+                  <span className="sr-only">Orders</span>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">Orders</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href="#"
+                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
+                  <Package className="h-5 w-5" />
+                  <span className="sr-only">Products</span>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">Products</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href="#"
+                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
+                  <Users2 className="h-5 w-5" />
+                  <span className="sr-only">Customers</span>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">Customers</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href="#"
+                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
+                  <LineChart className="h-5 w-5" />
+                  <span className="sr-only">Analytics</span>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">Analytics</TooltipContent>
+            </Tooltip>
+          </nav>
+          <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href="#"
+                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
+                  <Settings className="h-5 w-5" />
+                  <span className="sr-only">Settings</span>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">Settings</TooltipContent>
+            </Tooltip>
+          </nav>
+        </aside>
+        <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+          <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button size="icon" variant="outline" className="sm:hidden">
+                  <PanelLeft className="h-5 w-5" />
+                  <span className="sr-only">Toggle Menu</span>
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="sm:max-w-xs">
+                <nav className="grid gap-6 text-lg font-medium">
+                  <Link
+                    href="#"
+                    className="bg-primary text-primary-foreground group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base">
+                    <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
+                    <span className="sr-only">Acme Inc</span>
+                  </Link>
+                  <Link
+                    href="#"
+                    className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5">
+                    <Home className="h-5 w-5" />
+                    Dashboard
+                  </Link>
+                  <Link href="#" className="text-foreground flex items-center gap-4 px-2.5">
+                    <ShoppingCart className="h-5 w-5" />
+                    Orders
+                  </Link>
+                  <Link
+                    href="#"
+                    className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5">
+                    <Package className="h-5 w-5" />
+                    Products
+                  </Link>
+                  <Link
+                    href="#"
+                    className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5">
+                    <Users2 className="h-5 w-5" />
+                    Customers
+                  </Link>
+                  <Link
+                    href="#"
+                    className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5">
+                    <LineChart className="h-5 w-5" />
+                    Settings
+                  </Link>
+                </nav>
+              </SheetContent>
+            </Sheet>
+            <Breadcrumb className="hidden md:flex">
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink asChild>
+                    <Link href="#">Dashboard</Link>
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink asChild>
+                    <Link href="#">Orders</Link>
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Recent Orders</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <div className="relative ml-auto flex-1 md:grow-0">
+              <Search className="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
+              <Input
+                type="search"
+                placeholder="Search..."
+                className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
+              />
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
+                  <Image
+                    src="/user-avatar.png"
+                    width={36}
+                    height={36}
+                    alt="Avatar"
+                    className="overflow-hidden rounded-full"
+                  />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Settings</DropdownMenuItem>
+                <DropdownMenuItem>Support</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Logout</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </header>
+          <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
+            <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
+              <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
+                <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
+                  <CardHeader className="pb-3">
+                    <CardTitle>Your Orders</CardTitle>
+                    <CardDescription className="max-w-lg text-balance leading-relaxed">
+                      Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful
+                      Analysis.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardFooter>
+                    <Button>Create New Order</Button>
+                  </CardFooter>
+                </Card>
+                <Card x-chunk="dashboard-05-chunk-1">
+                  <CardHeader className="pb-2">
+                    <CardDescription>This Week</CardDescription>
+                    <CardTitle className="text-4xl">$1,329</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-muted-foreground text-xs">+25% from last week</div>
+                  </CardContent>
+                  <CardFooter>
+                    <Progress value={25} aria-label="25% increase" />
+                  </CardFooter>
+                </Card>
+                <Card x-chunk="dashboard-05-chunk-2">
+                  <CardHeader className="pb-2">
+                    <CardDescription>This Month</CardDescription>
+                    <CardTitle className="text-4xl">$5,329</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-muted-foreground text-xs">+10% from last month</div>
+                  </CardContent>
+                  <CardFooter>
+                    <Progress value={12} aria-label="12% increase" />
+                  </CardFooter>
+                </Card>
+              </div>
+              <Tabs defaultValue="week">
+                <div className="flex items-center">
+                  <TabsList>
+                    <TabsTrigger value="week">Week</TabsTrigger>
+                    <TabsTrigger value="month">Month</TabsTrigger>
+                    <TabsTrigger value="year">Year</TabsTrigger>
+                  </TabsList>
+                  <div className="ml-auto flex items-center gap-2">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="outline" size="sm" className="h-7 gap-1 text-sm">
+                          <ListFilter className="h-3.5 w-3.5" />
+                          <span className="sr-only sm:not-sr-only">Filter</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuCheckboxItem checked>Fulfilled</DropdownMenuCheckboxItem>
+                        <DropdownMenuCheckboxItem>Declined</DropdownMenuCheckboxItem>
+                        <DropdownMenuCheckboxItem>Refunded</DropdownMenuCheckboxItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                    <Button size="sm" variant="outline" className="h-7 gap-1 text-sm">
+                      <File className="h-3.5 w-3.5" />
+                      <span className="sr-only sm:not-sr-only">Export</span>
+                    </Button>
+                  </div>
+                </div>
+                <TabsContent value="week">
+                  <Card x-chunk="dashboard-05-chunk-3">
+                    <CardHeader className="px-7">
+                      <CardTitle>Orders</CardTitle>
+                      <CardDescription>Recent orders from your store.</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>Customer</TableHead>
+                            <TableHead className="hidden sm:table-cell">Type</TableHead>
+                            <TableHead className="hidden sm:table-cell">Status</TableHead>
+                            <TableHead className="hidden md:table-cell">Date</TableHead>
+                            <TableHead className="text-right">Amount</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          <TableRow className="bg-accent">
+                            <TableCell>
+                              <div className="font-medium">Liam Johnson</div>
+                              <div className="text-muted-foreground hidden text-sm md:inline">
+                                liam@example.com
+                              </div>
+                            </TableCell>
+                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge className="text-xs" variant="secondary">
+                                Fulfilled
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
+                            <TableCell className="text-right">$250.00</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <div className="font-medium">Olivia Smith</div>
+                              <div className="text-muted-foreground hidden text-sm md:inline">
+                                olivia@example.com
+                              </div>
+                            </TableCell>
+                            <TableCell className="hidden sm:table-cell">Refund</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge className="text-xs" variant="outline">
+                                Declined
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
+                            <TableCell className="text-right">$150.00</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <div className="font-medium">Noah Williams</div>
+                              <div className="text-muted-foreground hidden text-sm md:inline">
+                                noah@example.com
+                              </div>
+                            </TableCell>
+                            <TableCell className="hidden sm:table-cell">Subscription</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge className="text-xs" variant="secondary">
+                                Fulfilled
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="hidden md:table-cell">2023-06-25</TableCell>
+                            <TableCell className="text-right">$350.00</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <div className="font-medium">Emma Brown</div>
+                              <div className="text-muted-foreground hidden text-sm md:inline">
+                                emma@example.com
+                              </div>
+                            </TableCell>
+                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge className="text-xs" variant="secondary">
+                                Fulfilled
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
+                            <TableCell className="text-right">$450.00</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <div className="font-medium">Liam Johnson</div>
+                              <div className="text-muted-foreground hidden text-sm md:inline">
+                                liam@example.com
+                              </div>
+                            </TableCell>
+                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge className="text-xs" variant="secondary">
+                                Fulfilled
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
+                            <TableCell className="text-right">$250.00</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <div className="font-medium">Liam Johnson</div>
+                              <div className="text-muted-foreground hidden text-sm md:inline">
+                                liam@example.com
+                              </div>
+                            </TableCell>
+                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge className="text-xs" variant="secondary">
+                                Fulfilled
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
+                            <TableCell className="text-right">$250.00</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <div className="font-medium">Olivia Smith</div>
+                              <div className="text-muted-foreground hidden text-sm md:inline">
+                                olivia@example.com
+                              </div>
+                            </TableCell>
+                            <TableCell className="hidden sm:table-cell">Refund</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge className="text-xs" variant="outline">
+                                Declined
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
+                            <TableCell className="text-right">$150.00</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <div className="font-medium">Emma Brown</div>
+                              <div className="text-muted-foreground hidden text-sm md:inline">
+                                emma@example.com
+                              </div>
+                            </TableCell>
+                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
+                            <TableCell className="hidden sm:table-cell">
+                              <Badge className="text-xs" variant="secondary">
+                                Fulfilled
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
+                            <TableCell className="text-right">$450.00</TableCell>
+                          </TableRow>
+                        </TableBody>
+                      </Table>
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+              </Tabs>
+            </div>
+            <div>
+              <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
+                <CardHeader className="bg-muted/50 flex flex-row items-start">
+                  <div className="grid gap-0.5">
+                    <CardTitle className="group flex items-center gap-2 text-lg">
+                      Order Oe31b70H
+                      <Button
+                        size="icon"
+                        variant="outline"
+                        className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100">
+                        <Copy className="h-3 w-3" />
+                        <span className="sr-only">Copy Order ID</span>
+                      </Button>
+                    </CardTitle>
+                    <CardDescription>Date: November 23, 2023</CardDescription>
+                  </div>
+                  <div className="ml-auto flex items-center gap-1">
+                    <Button size="sm" variant="outline" className="h-8 gap-1">
+                      <Truck className="h-3.5 w-3.5" />
+                      <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">Track Order</span>
+                    </Button>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button size="icon" variant="outline" className="h-8 w-8">
+                          <MoreVertical className="h-3.5 w-3.5" />
+                          <span className="sr-only">More</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>Edit</DropdownMenuItem>
+                        <DropdownMenuItem>Export</DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>Trash</DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </CardHeader>
+                <CardContent className="p-6 text-sm">
+                  <div className="grid gap-3">
+                    <div className="font-semibold">Order Details</div>
+                    <ul className="grid gap-3">
+                      <li className="flex items-center justify-between">
+                        <span className="text-muted-foreground">
+                          Glimmer Lamps x <span>2</span>
+                        </span>
+                        <span>$250.00</span>
+                      </li>
+                      <li className="flex items-center justify-between">
+                        <span className="text-muted-foreground">
+                          Aqua Filters x <span>1</span>
+                        </span>
+                        <span>$49.00</span>
+                      </li>
+                    </ul>
+                    <Separator className="my-2" />
+                    <ul className="grid gap-3">
+                      <li className="flex items-center justify-between">
+                        <span className="text-muted-foreground">Subtotal</span>
+                        <span>$299.00</span>
+                      </li>
+                      <li className="flex items-center justify-between">
+                        <span className="text-muted-foreground">Shipping</span>
+                        <span>$5.00</span>
+                      </li>
+                      <li className="flex items-center justify-between">
+                        <span className="text-muted-foreground">Tax</span>
+                        <span>$25.00</span>
+                      </li>
+                      <li className="flex items-center justify-between font-semibold">
+                        <span className="text-muted-foreground">Total</span>
+                        <span>$329.00</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <Separator className="my-4" />
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="grid gap-3">
+                      <div className="font-semibold">Shipping Information</div>
+                      <address className="text-muted-foreground grid gap-0.5 not-italic">
+                        <span>Liam Johnson</span>
+                        <span>1234 Main St.</span>
+                        <span>Anytown, CA 12345</span>
+                      </address>
+                    </div>
+                    <div className="grid auto-rows-max gap-3">
+                      <div className="font-semibold">Billing Information</div>
+                      <div className="text-muted-foreground">Same as shipping address</div>
+                    </div>
+                  </div>
+                  <Separator className="my-4" />
+                  <div className="grid gap-3">
+                    <div className="font-semibold">Customer Information</div>
+                    <dl className="grid gap-3">
+                      <div className="flex items-center justify-between">
+                        <dt className="text-muted-foreground">Customer</dt>
+                        <dd>Liam Johnson</dd>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <dt className="text-muted-foreground">Email</dt>
+                        <dd>
+                          <a href="mailto:">liam@acme.com</a>
+                        </dd>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <dt className="text-muted-foreground">Phone</dt>
+                        <dd>
+                          <a href="tel:">+1 234 567 890</a>
+                        </dd>
+                      </div>
+                    </dl>
+                  </div>
+                  <Separator className="my-4" />
+                  <div className="grid gap-3">
+                    <div className="font-semibold">Payment Information</div>
+                    <dl className="grid gap-3">
+                      <div className="flex items-center justify-between">
+                        <dt className="text-muted-foreground flex items-center gap-1">
+                          <CreditCard className="h-4 w-4" />
+                          Visa
+                        </dt>
+                        <dd>**** **** **** 4532</dd>
+                      </div>
+                    </dl>
+                  </div>
+                </CardContent>
+                <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
+                  <div className="text-muted-foreground text-xs">
+                    Updated <time dateTime="2023-11-23">November 23, 2023</time>
+                  </div>
+                  <Pagination className="ml-auto mr-0 w-auto">
+                    <PaginationContent>
+                      <PaginationItem>
+                        <Button size="icon" variant="outline" className="h-6 w-6">
+                          <ChevronLeft className="h-3.5 w-3.5" />
+                          <span className="sr-only">Previous Order</span>
+                        </Button>
+                      </PaginationItem>
+                      <PaginationItem>
+                        <Button size="icon" variant="outline" className="h-6 w-6">
+                          <ChevronRight className="h-3.5 w-3.5" />
+                          <span className="sr-only">Next Order</span>
+                        </Button>
+                      </PaginationItem>
+                    </PaginationContent>
+                  </Pagination>
+                </CardFooter>
+              </Card>
+            </div>
+          </main>
+        </div>
+      </TooltipProvider>
+    </div>
+  );
+};
+
+export default SaaSPage;

apps/demo/pages/website/index.tsx

@@ -9,7 +9,7 @@ import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-export default function AppPage({}) {
+const AppPage = ({}) => {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -139,4 +139,6 @@ export default function AppPage({}) {
       </div>
     </div>
   );
-}
+};
+
+export default AppPage;

apps/docs/app/app-surveys/actions/page.mdx

@@ -1,7 +1,7 @@
 import { MdxImage } from "@/components/MdxImage";
 
-import I1 from "./images/I1.png";
-import I2 from "./images/I2.png";
+import I1 from "./images/I1.webp";
+import I2 from "./images/I2.webp";
 
 export const metadata = {
   title: "Using Actions in Formbricks | Fine-tuning User Moments",
@@ -22,7 +22,7 @@ Understanding user thoughts and feelings at critical moments in their journey is
 
 ## **How Do Actions Work?**
 
-Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions either programmatically in your code or through a user-friendly No-Code interface within the Formbricks dashboard.
+Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions through a user-friendly No-Code interface within the Formbricks dashboard.
 
 ## **Why Are Actions Useful?**
 
@@ -33,13 +33,6 @@ Actions are invaluable for enhancing survey relevance and effectiveness:
 - **User Segments**: Analyze action data to create detailed user segments, targeting specific groups with surveys that are pertinent to their behaviors or interactions within the app.
 - **User Targeting**: Precise targeting based on user actions and attributes ensures that surveys are shown only to users who meet certain criteria, enhancing the relevance and effectiveness of each survey.
 
-<Note>
-  You now have the option to create survey-specific action classes directly within the survey editor. These
-  actions are exclusive to the individual survey and won't appear in the global action list, helping to keep
-  it uncluttered. For actions that are needed across multiple surveys, we recommend creating them from the
-  Actions tab.
-</Note>
-
 ## **Setting Up No-Code Actions**
 
 Formbricks offers an intuitive No-Code interface that allows you to configure actions without needing to write any code.

apps/docs/app/app-surveys/framework-guides/components/Libraries.tsx

@@ -33,7 +33,7 @@ const libraries = [
   },
 ];
 
-export function Libraries() {
+export const Libraries = () => {
   return (
     <div className="my-16 xl:max-w-none">
       <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-slate-900/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3 dark:border-white/5">
@@ -57,4 +57,4 @@ export function Libraries() {
       </div>
     </div>
   );
-}
+};

apps/docs/app/app-surveys/quickstart/page.mdx

@@ -1,14 +1,13 @@
 import { MdxImage } from "@/components/MdxImage";
 
-import I1 from "./images/I1.png";
-import I2 from "./images/I2.png";
-import I3 from "./images/I3.png";
-import I4 from "./images/I4.png";
-import I5 from "./images/I5.png";
-import I6 from "./images/I6.png";
-import I7 from "./images/I7.png";
-import I8 from "./images/I8.png";
-
+import I1 from "./images/I1.webp";
+import I2 from "./images/I2.webp";
+import I3 from "./images/I3.webp";
+import I4 from "./images/I4.webp";
+import I5 from "./images/I5.webp";
+import I6 from "./images/I6.webp";
+import I7 from "./images/I7.webp";
+import I8 from "./images/I8.webp";
 
 export const metadata = {
   title: "Formbricks Quickstart Guide: App Surveys Made Easier & Faster",
@@ -17,18 +16,21 @@ export const metadata = {
 };
 
 #### App Surveys
+
 # Quickstart
 
 App surveys have 6-10x better conversion rates than emailed out surveys. This tutorial explains how to run an app survey in your web app in 10 to 15 minutes. Let’s go!
 
 <Note>
-App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run surveys on your public facing website, head over to the [Website Surveys Quickstart Guide](/website-surveys/quickstart).
+  App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run
+  surveys on your public facing website, head over to the [Website Surveys Quickstart
+  Guide](/website-surveys/quickstart).
 </Note>
 
 1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below:
 
 <Note>
-Website & App Surveys have the same integration process. The difference will come when we setup our survey.
+  Website & App Surveys have the same integration process. The difference will come when we setup our survey.
 </Note>
 
 <MdxImage
@@ -70,41 +72,41 @@ Onboarding is complete! Now let’s create our first survey as you should see te
 Pick the Survey Type as **App Survey**.
 
 <MdxImage
-    src={I5}
-    alt="Survey settings for app survey"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
+  src={I5}
+  alt="Survey settings for app survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and inside **When**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
+4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
 
 <MdxImage
-    src={I6}
-    alt="Survey trigger settings for app survey"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
+  src={I6}
+  alt="Survey trigger settings for app survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 5. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:
 
 <Note>
-Please change this setting later on after testing your survey to prevent survey fatigue for your users.
+  Please change this setting later on after testing your survey to prevent survey fatigue for your users.
 </Note>
 
 <MdxImage
-    src={I7}
-    alt="Recontact options for app survey"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
+  src={I7}
+  alt="Recontact options for app survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
 
 <MdxImage
-    src={I8}
-    alt="Survey published successfully"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
+  src={I8}
+  alt="Survey published successfully"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 ---

apps/docs/app/app-surveys/user-identification/page.mdx

@@ -80,6 +80,11 @@ formbricks.init({
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
 
+<Note>
+  Please note that the number of different attribute classes (e.g., "Plan," "First Name," etc.) is currently
+  limited to 150 attributes per environment.
+</Note>
+
 <Col>
 <CodeGroup title="Setting Custom Attributes">
 
@@ -115,4 +120,4 @@ formbricks.logout();
 ```
 
 </CodeGroup>
-</Col>
+</Col>

apps/docs/app/best-practices/cancel-subscription/page.mdx

@@ -152,8 +152,7 @@ These settings make sure the survey is always displayed, when a user wants to Ca
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Churn Survey
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/docs-feedback/page.mdx

@@ -5,9 +5,9 @@ import ChangeId from "./change-id.webp";
 import CopyIds from "./copy-ids.webp";
 import DocsNavi from "./docs-navi.webp";
 import DocsTemplate from "./docs-template.webp";
-import SelectNonevent from "./select-nonevent.webp";
+import SelectAction from "./select-action.webp";
+import SurveyTrigger from "./survey-trigger.webp";
 import SwitchToDev from "./switch-to-dev.webp";
-import WhenToAsk from "./when-to-ask.webp";
 
 export const metadata = {
   title:
@@ -73,10 +73,10 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   choices accordingly. They have to be identical to the frontend we're building in the next step.
 </Note>
 
-6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “When to ask” and create a new Action:
+6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “Survey Trigger” and create a new Action:
 
 <MdxImage
-  src={WhenToAsk}
+  src={SurveyTrigger}
   alt="set up when to ask card"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
@@ -89,7 +89,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 8. Select the Non-Event in the dropdown. Now you see that the “Publish survey” button is active. Publish your survey 🤝
 
 <MdxImage
-  src={SelectNonevent}
+  src={SelectAction}
   alt="select nonevent"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
@@ -135,7 +135,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover"
 
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
 
-export default function DocsFeedback() {
+export const DocsFeedback = () => {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const [sharedFeedback, setSharedFeedback] = useState(false);
@@ -199,7 +199,7 @@ export default function DocsFeedback() {
       )}
     </div>
   );
-}
+};
 ```
 
 </CodeGroup>

apps/docs/app/best-practices/feature-chaser/page.mdx

@@ -1,7 +1,7 @@
 import { MdxImage } from "@/components/MdxImage";
 
 import ActionCSS from "./action-css.webp";
-import ActionText from "./action-text.webp";
+import ActionText from "./action-innertext.webp";
 import ChangeText from "./change-text.webp";
 import CreateSurvey from "./create-survey.webp";
 import Publish from "./publish.webp";
@@ -123,8 +123,7 @@ Lastly, scroll down to “Recontact Options”. Here you have full freedom to de
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feature Chaser
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/feedback-box/page.mdx

@@ -1,13 +1,13 @@
 import { MdxImage } from "@/components/MdxImage";
 import Link from "next/link";
 
+import ActionCSS from "./action-css.webp";
+import ActionText from "./action-innertext.webp";
 import AddAction from "./add-action.webp";
-import AddCSSAction from "./add-css-action.webp";
-import AddHTMLAction from "./add-html-action.webp";
 import ChangeTextContent from "./change-text-content.webp";
 import CreateFeedbackBox from "./create-feedback-box-by-template.webp";
 import PublishSurvey from "./publish-survey.webp";
-import SelectAction from "./select-feedback-button-action.webp";
+import SelectAction from "./select-action.webp";
 import RecontactOptions from "./set-recontact-options.webp";
 
 export const metadata = {
@@ -69,20 +69,14 @@ Go to the “Audience” tab, find the “When to send” card and choose “Add
 
 <MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
-<Note>
-  ## You can also add actions in your code You can also create [Code Actions](/actions/code) using
-  `formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
-  is embedded.
-</Note>
-
 We have two options to track the Feedback Button in your application: innerText and CSS-Selector:
 
 1. **innerText:** This means that whenever a user clicks any HTML item in your app which has an `innerText` of `Feedback` the Feedback Box will be displayed.
 2. **CSS-Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.
 
 <div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl">
-  <MdxImage src={AddHTMLAction} alt="Add HTML action" quality="100" className="rounded-lg" />
-  <MdxImage src={AddCSSAction} alt="Add CSS action" quality="100" className="rounded-lg" />
+  <MdxImage src={ActionText} alt="Add HTML action" quality="100" className="rounded-lg" />
+  <MdxImage src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
 </div>
 
 ### 4. Select action in the “When to ask” card
@@ -118,8 +112,7 @@ Scroll down to “Recontact Options”. Here you have to choose the right settin
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ### &nbsp;

apps/docs/app/best-practices/improve-trial-cr/page.mdx

@@ -132,8 +132,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/interview-prompt/page.mdx

@@ -103,12 +103,6 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
 
 <MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
-<Note>
-  ## You can also add actions in your code You can also create [Code Actions](/actions/code) using
-  `formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
-  is embedded.
-</Note>
-
 Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display it on a page visit since you already filter who sees the prompt by attributes.
 
 1. **pageURL:** Whenever a user visits a page the survey will be displayed, as long as the other conditions match. Other conditions are pre-segmentation, if this user has seen a survey in the past 2 weeks, etc.
@@ -122,19 +116,9 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi
 
 2. **innerText & CSS-Selector:** When a user clicks an element (like a button) with a specific text content or CSS selector, the prompt will be displayed as long as the other conditions also match.
 
-<div className="flex max-w-full flex-col sm:max-w-3xl lg:gap-1">
-  <MdxImage
-    src={ActionCSS}
-    alt="Add CSS action"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
-  />
-  <MdxImage
-    src={ActionInner}
-    alt="Add inner text action"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
-  />
+<div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl">
+  <MdxImage src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
+  <MdxImage src={ActionInner} alt="Add inner text action" quality="100" className="rounded-lg" />
 </div>
 
 ### 5. Select action in the “When to ask” card
@@ -162,10 +146,8 @@ Scroll down to “Recontact Options”. Here you have to choose the correct sett
 <MdxImage src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running?
-     You need to have the Formbricks Widget installed to display the Feedback Box
-     in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-     to install the widget.
+  ## Formbricks Widget running? 
+  You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/pmf-survey/page.mdx

@@ -94,18 +94,19 @@ This way you make sure that you separate potentially misleading opinions from va
 You need a trigger to display the survey but in this case, the filtering does all the work. It’s up to you to decide to display the survey after the user viewed a specific subpage (pageURL) or after clicking an element. Have a look at the [Actions manual](/actions/why) if you are not sure how to set them up:
 
 <Col>
-  <div>
+
+  <div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl items-end">
     <MdxImage
       src={ActionCSS}
       alt="Add CSS action"
       quality="100"
-      className="max-w-full rounded-lg sm:max-w-3xl"
+      className="rounded-lg"
     />
     <MdxImage
       src={ActionPageurl}
       alt="Add inner text action"
       quality="100"
-      className="max-w-full rounded-lg sm:max-w-3xl"
+      className="rounded-lg"
     />
   </div>
 </Col>
@@ -135,8 +136,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/developer-docs/contributing/components/FAQ.tsx

@@ -1,6 +1,6 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
 
-import FaqJsonLdComponent from "./FAQPageJsonLd";
+import { FaqJsonLdComponent } from "./FAQPageJsonLd";
 
 const FAQ_DATA = [
   {
@@ -62,7 +62,7 @@ export const faqJsonLdData = FAQ_DATA.map((faq) => ({
   acceptedAnswerText: faq.answer(),
 }));
 
-export default function FAQ() {
+export const FAQ = () => {
   return (
     <>
       <FaqJsonLdComponent data={faqJsonLdData} />
@@ -76,4 +76,4 @@ export default function FAQ() {
       </Accordion>
     </>
   );
-}
+};

apps/docs/app/developer-docs/contributing/components/FAQPageJsonLd.tsx

@@ -2,11 +2,11 @@
 
 import { FAQPageJsonLd } from "next-seo";
 
-export default function FaqJsonLdComponent({ data }) {
+export const FaqJsonLdComponent = ({ data }) => {
   const faqEntities = data.map(({ question, answer }) => ({
     questionName: question,
     acceptedAnswerText: answer,
   }));
 
   return <FAQPageJsonLd mainEntity={faqEntities} />;
-}
+};