chore: add prettier config for import sorting, update packages, migrate to prettier 3 (#1777)

.prettierrc.js

@@ -1 +1,6 @@
-module.exports = require("./packages/prettier-config/prettier-preset");
+const baseConfig = require("./packages/prettier-config/prettier-preset");
+
+module.exports = {
+  ...baseConfig,
+  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+};

README.md

@@ -56,7 +56,6 @@ Harvest user-insights, build irresistible experiences.
 </p>
 <div>
 
-
 <p  align="center">
 
 <a  href="https://trendshift.io/repositories/2570"  target="_blank"><img  src="https://trendshift.io/api/badge/repositories/2570"  alt="Trendshift Badge for formbricks/formbricks"  style="width: 250px; height: 55px;"  width="250"  height="55"/></a>

apps/demo/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@heroicons/react": "^2.0.18",
-    "next": "14.0.3",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/demo/pages/_app.tsx

@@ -1,5 +1,6 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
+
 import "../styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {

apps/demo/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (

apps/demo/pages/app/index.tsx

@@ -1,8 +1,10 @@
-import formbricks from "@formbricks/js";
 import Image from "next/image";
-import { useEffect, useState } from "react";
-import fbsetup from "../../public/fb-setup.png";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import formbricks from "@formbricks/js";
+
+import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 

apps/formbricks-com/app/docs/layout.tsx

@@ -1,9 +1,7 @@
-import glob from "fast-glob";
-
 import { Providers } from "@/app/providers";
 import { Layout } from "@/components/docs/Layout";
-
 import { type Section } from "@/components/docs/SectionProvider";
+import glob from "fast-glob";
 import { type Metadata } from "next";
 
 export const metadata: Metadata = {

apps/formbricks-com/app/providers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
+import { useEffect } from "react";
 
 function ThemeWatcher() {
   let { resolvedTheme, setTheme } = useTheme();

apps/formbricks-com/components/docs/BestPractices.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import Link from "next/link";
-import { type MotionValue, motion, useMotionTemplate, useMotionValue } from "framer-motion";
-
-import { GridPattern } from "./GridPattern";
-import { Heading } from "./Heading";
 import { ChatBubbleIcon } from "@/components/docs/icons/ChatBubbleIcon";
 import { EnvelopeIcon } from "@/components/docs/icons/EnvelopeIcon";
 import { UserIcon } from "@/components/docs/icons/UserIcon";
 import { UsersIcon } from "@/components/docs/icons/UsersIcon";
+import { type MotionValue, motion, useMotionTemplate, useMotionValue } from "framer-motion";
+import Link from "next/link";
+
+import { GridPattern } from "./GridPattern";
+import { Heading } from "./Heading";
 
 interface BestPractice {
   href: string;

apps/formbricks-com/components/docs/Button.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
 import clsx from "clsx";
+import Link from "next/link";
 
 function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (

apps/formbricks-com/components/docs/Code.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
+import { Tag } from "@/components/docs/Tag";
 import { Tab } from "@headlessui/react";
 import clsx from "clsx";
+import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
 import { create } from "zustand";
 
-import { Tag } from "@/components/docs/Tag";
-
 const languageNames: Record<string, string> = {
   js: "JavaScript",
   ts: "TypeScript",

apps/formbricks-com/components/docs/DocsFeedback.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { useState } from "react";
+
 import { Button } from "@formbricks/ui/Button";
 import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
-import { useState } from "react";
 
 export const DocsFeedback: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);

apps/formbricks-com/components/docs/Feedback.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { forwardRef, Fragment, useState } from "react";
-import { usePathname } from "next/navigation";
 import { Transition } from "@headlessui/react";
+import { usePathname } from "next/navigation";
+import { Fragment, forwardRef, useState } from "react";
+
 import { handleFeedbackSubmit } from "../../lib/handleFeedbackSubmit";
 
 function CheckIcon(props: React.ComponentPropsWithoutRef<"svg">) {

apps/formbricks-com/components/docs/Footer.tsx

@@ -2,7 +2,8 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { FaGithub, FaXTwitter, FaDiscord } from "react-icons/fa6";
+import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
+
 import { Button } from "./Button";
 import { navigation } from "./Navigation";
 

apps/formbricks-com/components/docs/Header.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { FooterLogo } from "@/components/shared/Logo";
 import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
 import Link from "next/link";
 import { forwardRef } from "react";
 
-import { FooterLogo } from "@/components/shared/Logo";
 import { Button } from "./Button";
 import { MobileNavigation, useIsInsideMobileNavigation, useMobileNavigationStore } from "./MobileNavigation";
 import { MobileSearch, Search } from "./Search";

apps/formbricks-com/components/docs/Heading.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import { remToPx } from "@/lib/remToPx";
 import { useInView } from "framer-motion";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useEffect, useRef } from "react";
 
-import { remToPx } from "@/lib/remToPx";
 import { useSectionStore } from "./SectionProvider";
 import { Tag } from "./Tag";
-import { usePathname } from "next/navigation";
 
 function AnchorIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (

apps/formbricks-com/components/docs/Layout.tsx

@@ -1,14 +1,14 @@
 "use client";
 
+import { Navigation } from "@/components/docs/Navigation";
+import { FooterLogo } from "@/components/shared/Logo";
+import { motion } from "framer-motion";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { motion } from "framer-motion";
 
 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { type Section, SectionProvider } from "./SectionProvider";
-import { FooterLogo } from "@/components/shared/Logo";
-import { Navigation } from "@/components/docs/Navigation";
 
 export function Layout({
   children,

apps/formbricks-com/components/docs/Libraries.tsx

@@ -1,9 +1,9 @@
-import Image from "next/image";
-
 import logoHtml from "@/images/logos/html5.svg";
 import logoNextjs from "@/images/logos/nextjs.svg";
 import logoReactJs from "@/images/logos/reactjs.svg";
 import logoVueJs from "@/images/logos/vuejs.svg";
+import Image from "next/image";
+
 import { Button } from "./Button";
 
 const libraries = [

apps/formbricks-com/components/docs/MobileNavigation.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { createContext, Fragment, Suspense, useContext, useEffect, useRef } from "react";
-import { usePathname, useSearchParams } from "next/navigation";
+import { Header } from "@/components/docs/Header";
 import { Dialog, Transition } from "@headlessui/react";
 import { motion } from "framer-motion";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Fragment, Suspense, createContext, useContext, useEffect, useRef } from "react";
 import { create } from "zustand";
 
-import { Header } from "@/components/docs/Header";
 import { Navigation } from "./Navigation";
 
 function MenuIcon(props: React.ComponentPropsWithoutRef<"svg">) {

apps/formbricks-com/components/docs/Navigation.tsx

@@ -1,12 +1,12 @@
 "use client";
 
+import { remToPx } from "@/lib/remToPx";
 import clsx from "clsx";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useRef } from "react";
 
-import { remToPx } from "@/lib/remToPx";
 import { Button } from "./Button";
 import { useIsInsideMobileNavigation } from "./MobileNavigation";
 import { useSectionStore } from "./SectionProvider";

apps/formbricks-com/components/docs/Search.tsx

@@ -1,19 +1,18 @@
 "use client";
 
-import { forwardRef, Fragment, Suspense, useCallback, useEffect, useId, useRef, useState } from "react";
-import Highlighter from "react-highlight-words";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { navigation } from "@/components/docs/Navigation";
+import { type Result } from "@/mdx/search.mjs";
 import {
   type AutocompleteApi,
-  createAutocomplete,
-  type AutocompleteState,
   type AutocompleteCollection,
+  type AutocompleteState,
+  createAutocomplete,
 } from "@algolia/autocomplete-core";
 import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
-
-import { type Result } from "@/mdx/search.mjs";
-import { navigation } from "@/components/docs/Navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Fragment, Suspense, forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import Highlighter from "react-highlight-words";
 
 type EmptyObject = Record<string, never>;
 

apps/formbricks-com/components/docs/SectionProvider.tsx

@@ -1,10 +1,9 @@
 "use client";
 
+import { remToPx } from "@/lib/remToPx";
 import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
 import { type StoreApi, createStore, useStore } from "zustand";
 
-import { remToPx } from "@/lib/remToPx";
-
 export interface Section {
   id: string;
   title: string;

apps/formbricks-com/components/docs/ThemeToggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 function SunIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (

apps/formbricks-com/components/docs/docsFaq.tsx

@@ -1,4 +1,5 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
+
 import FaqJsonLdComponent from "./faQJsonLD";
 
 const FAQ_DATA = [

apps/formbricks-com/components/docs/mdx.tsx

@@ -1,7 +1,7 @@
-import Link from "next/link";
-import clsx from "clsx";
-
 import { Feedback } from "@/components/docs/Feedback";
+import clsx from "clsx";
+import Link from "next/link";
+
 import { Heading } from "./Heading";
 import { Prose } from "./Prose";
 

apps/formbricks-com/components/dummyUI/AddEventDummy.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 
+import { Button } from "@formbricks/ui/Button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
+
 const DummyUI: React.FC = () => {
   const actionClasses = [
     { id: "1", name: "View Dashboard" },

apps/formbricks-com/components/dummyUI/AddNoCodeEventModalDummy.tsx

@@ -1,10 +1,11 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
-import { Button } from "@formbricks/ui/Button";
-import { Label } from "@formbricks/ui/Label";
-import { Input } from "@formbricks/ui/Input";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { Modal } from "@formbricks/ui/Modal";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 
 interface EventDetailModalProps {
   open: boolean;

apps/formbricks-com/components/dummyUI/CTAQuestion.tsx

@@ -1,4 +1,5 @@
 import { TSurveyCTAQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import HtmlBody from "./HtmlBody";
 

apps/formbricks-com/components/dummyUI/DemoPreview.tsx

@@ -1,8 +1,11 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+
+import { TTemplate } from "@formbricks/types/templates";
+
 import PreviewSurvey from "./PreviewSurvey";
 import { findTemplateByName } from "./templates";
-import { TTemplate } from "@formbricks/types/templates";
 
 interface DemoPreviewProps {
   template: string;

apps/formbricks-com/components/dummyUI/DemoView.tsx

@@ -1,5 +1,7 @@
-import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
+
+import { TTemplate } from "@formbricks/types/templates";
+
 import PreviewSurvey from "./PreviewSurvey";
 import TemplateList from "./TemplateList";
 import { templates } from "./templates";

apps/formbricks-com/components/dummyUI/Modal.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 
 export default function Modal({

apps/formbricks-com/components/dummyUI/MultipleChoiceMultiQuestion.tsx

@@ -1,6 +1,8 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyMultipleChoiceMultiQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/MultipleChoiceSingleQuestion.tsx

@@ -1,6 +1,8 @@
+import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyMultipleChoiceSingleQuestion } from "@formbricks/types/surveys";
-import { useState } from "react";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/NPSQuestion.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyNPSQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/OpenTextQuestion.tsx

@@ -1,5 +1,7 @@
-import { TSurveyOpenTextQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
+
+import { TSurveyOpenTextQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/PreviewSurvey.tsx

@@ -1,7 +1,9 @@
 import { useState } from "react";
+
+import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys";
+
 import Modal from "./Modal";
 import QuestionConditional from "./QuestionConditional";
-import { TSurveyQuestion, TSurvey } from "@formbricks/types/surveys";
 import ThankYouCard from "./ThankYouCard";
 
 interface PreviewSurveyProps {

apps/formbricks-com/components/dummyUI/QuestionConditional.tsx

@@ -1,9 +1,10 @@
 import { TSurveyQuestion, TSurveyQuestionType } from "@formbricks/types/surveys";
-import OpenTextQuestion from "./OpenTextQuestion";
-import MultipleChoiceSingleQuestion from "./MultipleChoiceSingleQuestion";
-import MultipleChoiceMultiQuestion from "./MultipleChoiceMultiQuestion";
-import NPSQuestion from "./NPSQuestion";
+
 import CTAQuestion from "./CTAQuestion";
+import MultipleChoiceMultiQuestion from "./MultipleChoiceMultiQuestion";
+import MultipleChoiceSingleQuestion from "./MultipleChoiceSingleQuestion";
+import NPSQuestion from "./NPSQuestion";
+import OpenTextQuestion from "./OpenTextQuestion";
 import RatingQuestion from "./RatingQuestion";
 
 interface QuestionConditionalProps {

apps/formbricks-com/components/dummyUI/RatingQuestion.tsx

@@ -1,6 +1,8 @@
-import { TSurveyRatingQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
+import { TSurveyRatingQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/TemplateList.tsx

@@ -1,6 +1,8 @@
-import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
+import { TTemplate } from "@formbricks/types/templates";
+
 import { templates } from "./templates";
 
 type TemplateList = {

apps/formbricks-com/components/dummyUI/templates.ts

@@ -1,3 +1,7 @@
+import { createId } from "@paralleldrive/cuid2";
+
+import { TSurveyQuestionType } from "@formbricks/types/surveys";
+import { TTemplate } from "@formbricks/types/templates";
 import {
   AppPieChartIcon,
   ArrowRightCircleIcon,
@@ -22,10 +26,6 @@ import {
   VideoTabletAdjustIcon,
 } from "@formbricks/ui/icons";
 
-import { TSurveyQuestionType } from "@formbricks/types/surveys";
-import { TTemplate } from "@formbricks/types/templates";
-import { createId } from "@paralleldrive/cuid2";
-
 const thankYouCardDefault = {
   enabled: true,
   headline: "Thank you!",

apps/formbricks-com/components/home/Faq.tsx

@@ -1,6 +1,6 @@
+import HeadingCentered from "@/components/shared/HeadingCentered";
 import { FAQPageJsonLd } from "next-seo";
 
-import HeadingCentered from "@/components/shared/HeadingCentered";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
 
 const FAQ_DATA = [

apps/formbricks-com/components/home/Features.tsx

@@ -1,4 +1,5 @@
 import { CodeFileIcon, EyeIcon, HandPuzzleIcon } from "@formbricks/ui/icons";
+
 import HeadingCentered from "../shared/HeadingCentered";
 
 const features = [

apps/formbricks-com/components/home/Hero.tsx

@@ -6,11 +6,13 @@ import FlixbusLogo from "@/images/clients/flixbus-white.svg";
 import NILogoDark from "@/images/clients/niLogoDark.svg";
 import NILogoLight from "@/images/clients/niLogoWhite.svg";
 import AnimationFallback from "@/public/animations/opensource-xm-platform-formbricks-fallback.png";
-import { Button } from "@formbricks/ui/Button";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
+
 import HeroAnimation from "./HeroAnimation";
 
 export const Hero: React.FC = ({}) => {

apps/formbricks-com/components/home/ScrollToTop.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
 import { ArrowUpIcon } from "@heroicons/react/24/solid";
 import throttle from "lodash/throttle";
 import { useCallback, useEffect, useState } from "react";
 
+import { Button } from "@formbricks/ui/Button";
+
 const ScrollToTopButton = () => {
   const [visible, setVisible] = useState(false);
 

apps/formbricks-com/components/home/SetupTabs.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { useState } from "react";
 import { IoLogoHtml5, IoLogoNpm } from "react-icons/io5";
+
 import CodeBlock from "../shared/CodeBlock";
 
 interface SecondNavbarProps {

apps/formbricks-com/components/home/Steps.tsx

@@ -1,10 +1,12 @@
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import DashboardMockupDark from "@/images/dashboard-mockup-dark.png";
 import DashboardMockup from "@/images/dashboard-mockup.png";
-import { Button } from "@formbricks/ui/Button";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useState } from "react";
+
+import { Button } from "@formbricks/ui/Button";
+
 import AddEventDummy from "../dummyUI/AddEventDummy";
 import AddNoCodeEventModalDummy from "../dummyUI/AddNoCodeEventModalDummy";
 import HeadingCentered from "../shared/HeadingCentered";

apps/formbricks-com/components/home/VideoWalkThrough.tsx

@@ -1,5 +1,5 @@
-import { ResponsiveVideo } from "@formbricks/ui/ResponsiveVideo";
 import { Modal } from "@formbricks/ui/Modal";
+import { ResponsiveVideo } from "@formbricks/ui/ResponsiveVideo";
 
 interface VideoWalkThroughProps {
   open: boolean;

apps/formbricks-com/components/shared/BestPracticeNavigation.tsx

@@ -1,3 +1,6 @@
+import clsx from "clsx";
+import Link from "next/link";
+
 import {
   BaseballIcon,
   CancelSubscriptionIcon,
@@ -8,8 +11,6 @@ import {
   OnboardingIcon,
   PMFIcon,
 } from "@formbricks/ui/icons";
-import clsx from "clsx";
-import Link from "next/link";
 
 export default function BestPracticeNavigation() {
   const BestPractices = [

apps/formbricks-com/components/shared/BreakerCTA.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
 import clsx from "clsx";
 import { usePlausible } from "next-plausible";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 interface Props {
   teaser: string;
   headline: string;

apps/formbricks-com/components/shared/CTA.tsx

@@ -1,5 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
+
 import HeadingCentered from "./HeadingCentered";
 
 export default function CTA() {

apps/formbricks-com/components/shared/Callout.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { Icon } from "@/components/shared/Icon";
+import clsx from "clsx";
 
 const styles = {
   note: {

apps/formbricks-com/components/shared/EarlyBirdDeal.tsx

@@ -1,8 +1,9 @@
 import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
-import { Button } from "@formbricks/ui/Button";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function EarlyBirdDeal() {
   const plausible = usePlausible();
   return (

apps/formbricks-com/components/shared/FeatureHighlight.tsx

@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
-import { useRouter } from "next/router";
 import clsx from "clsx";
+import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
 
 interface Props {
   featureTitle: string;

apps/formbricks-com/components/shared/Footer.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
+
 import { FooterLogo } from "./Logo";
 
 const navigation = {

apps/formbricks-com/components/shared/Header.tsx

@@ -1,5 +1,14 @@
 import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
+import { Popover, Transition } from "@headlessui/react";
+import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { usePlausible } from "next-plausible";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Fragment, useEffect, useState } from "react";
+
 import { Button } from "@formbricks/ui/Button";
 import {
   BaseballIcon,
@@ -11,14 +20,7 @@ import {
   OnboardingIcon,
   PMFIcon,
 } from "@formbricks/ui/icons";
-import { Popover, Transition } from "@headlessui/react";
-import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import clsx from "clsx";
-import { usePlausible } from "next-plausible";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { Fragment, useEffect, useState } from "react";
+
 import { FooterLogo } from "./Logo";
 
 function GitHubIcon(props: any) {

apps/formbricks-com/components/shared/HeroAnimation.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import type { LottiePlayer } from "lottie-web";
+import { useEffect, useRef, useState } from "react";
 
 export default function HeroAnimation(props: any) {
   const ref = useRef<HTMLDivElement>(null);

apps/formbricks-com/components/shared/LayoutMdx.tsx

@@ -1,5 +1,6 @@
 import SlideInBanner from "@/components/shared/SlideInBanner";
 import { useEffect } from "react";
+
 import Footer from "./Footer";
 import Header from "./Header";
 import MetaInformation from "./MetaInformation";

apps/formbricks-com/components/shared/Logo.tsx

@@ -1,9 +1,9 @@
-import Image from "next/image";
-import logomark from "@/images/logo/logomark.svg";
+import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
+import footerLogo from "@/images/logo/footerlogo.svg";
 import logo from "@/images/logo/logo.svg";
 import logoDark from "@/images/logo/logo_dark.svg";
-import footerLogo from "@/images/logo/footerlogo.svg";
-import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
+import logomark from "@/images/logo/logomark.svg";
+import Image from "next/image";
 
 export function Logomark(props: any) {
   return <Image src={logomark} {...props} alt="Formbricks Open source Forms & Surveys Logomark" />;

apps/formbricks-com/components/shared/MdxCTA.tsx

@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function CTA() {
   const router = useRouter();
   return (

apps/formbricks-com/components/shared/MdxTryItCTA.tsx

@@ -1,7 +1,8 @@
-import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function HeadingCentered() {
   const router = useRouter();
   return (

apps/formbricks-com/components/shared/Navigation.tsx

@@ -1,6 +1,6 @@
+import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import clsx from "clsx";
 
 interface NavigationProps {
   navigation: {

apps/formbricks-com/components/shared/NewsletterSignup.tsx

@@ -1,7 +1,8 @@
 import Friends from "@/images/newsletter-signup-gif.gif";
-import { Button } from "@formbricks/ui/Button";
 import Image from "next/image";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function WaitlistForm() {
   return (
     <div className="not-prose text-md mx-auto mt-12 max-w-7xl rounded-lg bg-slate-200 p-10 text-slate-500 shadow-lg dark:bg-slate-800 dark:text-slate-400">

apps/formbricks-com/components/shared/PricingTable.tsx

@@ -1,6 +1,7 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
+
 export const PricingTable = ({ leadRow, pricing, endRow }) => {
   return (
     <div className="grid grid-cols-1 px-4 md:gap-4 md:px-16 ">

apps/formbricks-com/components/shared/Search.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
 import Link from "next/link";
 import Router from "next/router";
-import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
 const docSearchConfig = {
   appId: process.env.NEXT_PUBLIC_DOCSEARCH_APP_ID || "",

apps/formbricks-com/components/shared/SlideInBanner.tsx

@@ -1,9 +1,10 @@
 import LFGLuigi from "@/images/blog/lfg-luigi-200px.webp";
-import { Button } from "@formbricks/ui/Button";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 
+import { Button } from "@formbricks/ui/Button";
+
 interface Props {
   delay?: number;
   scrollPercentage?: number;
@@ -46,8 +47,8 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
         showBanner && !isExiting
           ? "visible translate-y-0 opacity-100"
           : isExiting
-          ? "visible translate-y-full opacity-0"
-          : "invisible translate-y-full opacity-0"
+            ? "visible translate-y-full opacity-0"
+            : "invisible translate-y-full opacity-0"
       }`}>
       <div className="relative col-span-1 hidden lg:block">
         <Image src={LFGLuigi} height={150} className="absolute -bottom-16 left-8" alt="LFG Luigi" />

apps/formbricks-com/components/shared/Slider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
 
 import { cn } from "@formbricks/lib/cn";
 

apps/formbricks-com/components/shared/TryItCTA.tsx

@@ -1,7 +1,8 @@
-import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function HeadingCentered() {
   const router = useRouter();
   return (

apps/formbricks-com/components/shared/UseCaseCTA.tsx

@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 interface UseCaseCTAProps {
   href: string;
 }

apps/formbricks-com/components/shared/WhyFormbricks.tsx

@@ -1,10 +1,10 @@
 import {
-  UsersIcon,
-  CubeTransparentIcon,
-  UserGroupIcon,
   CommandLineIcon,
-  SwatchIcon,
+  CubeTransparentIcon,
   SquaresPlusIcon,
+  SwatchIcon,
+  UserGroupIcon,
+  UsersIcon,
 } from "@heroicons/react/24/outline";
 
 const features = [

apps/formbricks-com/pages/_app.tsx

@@ -1,9 +1,9 @@
 import PlausibleProvider from "next-plausible";
 import type { AppProps } from "next/app";
-import "../styles/globals.css";
-
 import { Jost } from "next/font/google";
 
+import "../styles/globals.css";
+
 const jost = Jost({
   weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
   style: ["normal", "italic"],

apps/formbricks-com/pages/community/HeaderTribe.tsx

@@ -1,11 +1,12 @@
 import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
-import { Button } from "@formbricks/ui/Button";
-import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
 import { Bars3Icon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 
+import { Button } from "@formbricks/ui/Button";
+import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
+
 const navigation = [
   { name: "Roadmap", href: "#roadmap" },
   { name: "Levels", href: "#levels" },

apps/formbricks-com/pages/community/LevelCard.tsx

@@ -1,7 +1,6 @@
 import Image from "next/image";
-import React from "react";
-
 import { StaticImageData } from "next/image";
+import React from "react";
 
 type Task = {
   title: string;

apps/formbricks-com/pages/community/Roadmap.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { FaGithub } from "react-icons/fa6";
 
+import { Button } from "@formbricks/ui/Button";
+
 interface Event {
   name: string;
   link?: string;

apps/formbricks-com/pages/community/index.tsx

@@ -7,11 +7,13 @@ import PrimeBadge from "@/images/formtribe/prime-batch.png";
 import RookieBadge from "@/images/formtribe/rookie-batch.png";
 import HallOfFame from "@/pages/community/HallOfFame";
 import Roadmap from "@/pages/community/Roadmap";
-import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect } from "react";
+
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
+
 import ContributorGrid from "./ContributorGrid";
 import LayoutTribe from "./LayoutTribe";
 import LevelCard from "./LevelCard";

apps/formbricks-com/pages/concierge.tsx

@@ -1,9 +1,10 @@
 import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
 import Cal, { getCalApi } from "@calcom/embed-react";
-import { Button } from "@formbricks/ui/Button";
 import { useEffect } from "react";
 
+import { Button } from "@formbricks/ui/Button";
+
 const XMOffer = [
   {
     step: "1",

apps/formbricks-com/pages/demo/HeaderLight.tsx

@@ -1,8 +1,10 @@
-import { Button } from "@formbricks/ui/Button";
 import { Popover } from "@headlessui/react";
 import { usePlausible } from "next-plausible";
 import Link from "next/link";
 import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
+
 import { FooterLogo } from "../../components/shared/Logo";
 
 export default function HeaderLight() {

apps/formbricks-com/pages/docs-feedback/index.tsx

@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DocsFeedback from "@/components/docs/DocsFeedback";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";
 
 export default function DocsFeedbackPage() {
   return (

apps/formbricks-com/pages/feature-chaser/index.tsx

@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";
 
 export default function FeatureChaserPage() {
   return (

apps/formbricks-com/pages/feedback-box/index.tsx

@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";
 
 export default function FeedbackBoxPage() {
   return (

apps/formbricks-com/pages/improve-trial-conversion/index.tsx

@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";
 
 export default function MissedTrialPagePage() {
   return (

apps/formbricks-com/pages/interview-prompt/index.tsx

@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";
 
 export default function InterviewPromptPage() {
   return (

apps/formbricks-com/pages/learn-from-churn/index.tsx

@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";
 
 export default function LearnFromChurnPage() {
   return (

apps/formbricks-com/pages/oss-friends.tsx

@@ -1,5 +1,6 @@
 import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
+
 import { Button } from "@formbricks/ui/Button";
 
 type OSSFriend = {

apps/formbricks-com/pages/pricing.tsx

@@ -2,6 +2,7 @@ import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
 import { OpenSourceInfo } from "@/components/shared/OpenSourceInfo";
 import { GetStartedWithPricing } from "@/components/shared/PricingGetStarted";
+
 import { PricingTable } from "../components/shared/PricingTable";
 
 const inProductSurveys = {

apps/formbricks-com/tailwind.config.ts

@@ -3,6 +3,7 @@ import forms from "@tailwindcss/forms";
 import typographyPlugin from "@tailwindcss/typography";
 import { type Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme";
+
 import typographyStyles from "./typography";
 
 export default {

apps/storybook/.storybook/main.ts

@@ -1,6 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-
-import { join, dirname } from "path";
+import { dirname, join } from "path";
 
 /**
  * This function is used to resolve the absolute path of a package.

apps/storybook/.storybook/preview.ts

@@ -1,5 +1,7 @@
 import type { Preview } from "@storybook/react";
+
 import "../src/index.css";
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },

apps/storybook/package.json

@@ -14,24 +14,23 @@
   "dependencies": {
     "@formbricks/ui": "workspace:*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.6.3"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@formbricks/tsconfig": "workspace:*",
-    "@storybook/addon-essentials": "^7.6.3",
-    "@storybook/addon-interactions": "^7.6.3",
-    "@storybook/addon-links": "^7.6.3",
-    "@storybook/addon-onboarding": "^1.0.9",
-    "@storybook/blocks": "^7.6.3",
-    "@storybook/react": "^7.6.3",
-    "@storybook/react-vite": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-vite": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "esbuild": "^0.19.8",
+    "esbuild": "^0.19.9",
     "tsup": "^8.0.1",
-    "vite": "^5.0.6"
+    "vite": "^5.0.8"
   }
 }

apps/storybook/src/App.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 import "./App.css";
+
 function App() {
   const [count, setCount] = useState(0);
 

apps/storybook/src/main.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+
 import App from "./App.tsx";
 import "./index.css";
 

apps/storybook/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({

apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import ContentWrapper from "@formbricks/ui/ContentWrapper";
+import { useEffect, useState } from "react";
+
 import { Button } from "@formbricks/ui/Button";
 import { Confetti } from "@formbricks/ui/Confetti";
-import { useEffect, useState } from "react";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 
 interface ConfirmationPageProps {
   environmentId: string;

apps/web/app/(app)/billing-confirmation/page.tsx

@@ -1,7 +1,7 @@
-export const dynamic = "force-dynamic";
-
 import ConfirmationPage from "./components/ConfirmationPage";
 
+export const dynamic = "force-dynamic";
+
 export default function BillingConfirmation({ searchParams }) {
   const { environmentId } = searchParams;
 

apps/web/app/(app)/components/FormbricksClient.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { env } from "@formbricks/lib/env.mjs";
 import { formbricksEnabled } from "@/app/lib/formbricks";
-import formbricks from "@formbricks/js";
 import { useEffect } from "react";
 
+import formbricks from "@formbricks/js";
+import { env } from "@formbricks/lib/env.mjs";
+
 type UsageAttributesUpdaterProps = {
   numSurveys: number;
 };

apps/web/app/(app)/components/PosthogIdentify.tsx

@@ -1,9 +1,11 @@
 "use client";
-import { env } from "@formbricks/lib/env.mjs";
+
 import type { Session } from "next-auth";
 import { usePostHog } from "posthog-js/react";
 import { useEffect } from "react";
 
+import { env } from "@formbricks/lib/env.mjs";
+
 const posthogEnabled = env.NEXT_PUBLIC_POSTHOG_API_KEY && env.NEXT_PUBLIC_POSTHOG_API_HOST;
 
 export default function PosthogIdentify({ session }: { session: Session }) {

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions.ts

@@ -1,20 +1,20 @@
 "use server";
 
-import { authOptions } from "@formbricks/lib/authOptions";
-import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
-import { createActionClass, deleteActionClass, updateActionClass } from "@formbricks/lib/actionClass/service";
-import { canUserUpdateActionClass, verifyUserRoleAccess } from "@formbricks/lib/actionClass/auth";
 import { getServerSession } from "next-auth";
-import { TActionClassInput } from "@formbricks/types/actionClasses";
 
 import {
-  getActionCountInLast24Hours,
   getActionCountInLast7Days,
+  getActionCountInLast24Hours,
   getActionCountInLastHour,
 } from "@formbricks/lib/action/service";
+import { canUserUpdateActionClass, verifyUserRoleAccess } from "@formbricks/lib/actionClass/auth";
+import { createActionClass, deleteActionClass, updateActionClass } from "@formbricks/lib/actionClass/service";
+import { authOptions } from "@formbricks/lib/authOptions";
+import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { getSurveysByActionClassId } from "@formbricks/lib/survey/service";
-import { AuthorizationError } from "@formbricks/types/errors";
 import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
+import { TActionClassInput } from "@formbricks/types/actionClasses";
+import { AuthorizationError } from "@formbricks/types/errors";
 
 export async function deleteActionClassAction(environmentId, actionClassId: string) {
   const session = await getServerSession(authOptions);

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionActivityTab.tsx

@@ -1,19 +1,22 @@
 "use client";
 
-import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
+import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
+import { useEffect, useState } from "react";
+
+import { capitalizeFirstLetter } from "@formbricks/lib/strings";
+import { convertDateTimeStringShort } from "@formbricks/lib/time";
+import { TActionClass } from "@formbricks/types/actionClasses";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { Label } from "@formbricks/ui/Label";
-import { convertDateTimeStringShort } from "@formbricks/lib/time";
-import { capitalizeFirstLetter } from "@formbricks/lib/strings";
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
-import { TActionClass } from "@formbricks/types/actionClasses";
-import { useEffect, useState } from "react";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
+
 import {
-  getActionCountInLastHourAction,
-  getActionCountInLast24HoursAction,
-  getActionCountInLast7DaysAction,
   GetActiveInactiveSurveysAction,
+  getActionCountInLast7DaysAction,
+  getActionCountInLast24HoursAction,
+  getActionCountInLastHourAction,
 } from "../actions";
+
 interface ActivityTabProps {
   actionClass: TActionClass;
   environmentId: string;

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionClassesTable.tsx

@@ -1,15 +1,17 @@
 "use client";
 
-import { Button } from "@formbricks/ui/Button";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
-import AddNoCodeActionModal from "./AddActionModal";
-import ActionDetailModal from "./ActionDetailModal";
-import { TActionClass } from "@formbricks/types/actionClasses";
+
 import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
+import { TActionClass } from "@formbricks/types/actionClasses";
+import { Button } from "@formbricks/ui/Button";
 import { LoadingWrapper } from "@formbricks/ui/LoadingWrapper";
 
+import ActionDetailModal from "./ActionDetailModal";
+import AddNoCodeActionModal from "./AddActionModal";
+
 export default function ActionClassesTable({
   environmentId,
   actionClasses,

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionDetailModal.tsx

@@ -1,9 +1,11 @@
-import ModalWithTabs from "@formbricks/ui/ModalWithTabs";
 import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
-import EventActivityTab from "./ActionActivityTab";
-import ActionSettingsTab from "./ActionSettingsTab";
+
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TMembershipRole } from "@formbricks/types/memberships";
+import ModalWithTabs from "@formbricks/ui/ModalWithTabs";
+
+import EventActivityTab from "./ActionActivityTab";
+import ActionSettingsTab from "./ActionSettingsTab";
 
 interface ActionDetailModalProps {
   environmentId: string;

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionRowData.tsx

@@ -1,6 +1,7 @@
+import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
+
 import { timeSinceConditionally } from "@formbricks/lib/time";
 import { TActionClass } from "@formbricks/types/actionClasses";
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
 
 export default function ActionClassDataRow({ actionClass }: { actionClass: TActionClass }) {
   return (