fix: have same non-module workflow for packages (#1230)

Co-authored-by: Digvijay Gupta <digvijaygupta@Digvijays-MacBook-Pro.local>

.npmrc

@@ -3,4 +3,6 @@ link-workspace-packages = true
 shamefully-hoist = true
 shared-workspace-shrinkwrap = true
 access = public
-enable-pre-post-scripts = true
+enable-pre-post-scripts = true
+legacy-peer-deps=true
+node-linker=hoisted

apps/formbricks-com/app/docs/contributing/how-we-code/page.mdx

@@ -113,9 +113,21 @@ Add a short video or screenshots of what your PR achieves. Loom is a great way o
 
 ### Code Quality & Styling
 
-All submitted code must match our **[code styling](https://www.notion.so/Code-Styling-65ddc5dd2deb4b28a9876f1f7cc89ca9?pvs=21)** standards. We will reject pull requests that differ significantly from our standardised code styles.
+It's really important to keep our code styles consistent so that the repository is easy to read and work with.
 
-All code is automatically checked by Github actions, and will notify you if there are any issues with the code that you submit. We require that code passes these quality checks before merging.
+We rely on various style guides from other amazing companies because they are widely used and we genuinely enjoy working with them.
+
+While we don't expect you to memorize every rule in these style guides, they serve as valuable references for how your code should be styled. However, if your code style significantly deviates from these guides, we may have to reject your pull request.
+
+#### ESLint & Prettier
+
+Formbricks uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
+
+#### HTML & CSS
+
+We use the **[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)** for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.
+
+**Note:** We will reject pull requests that differ significantly from our standardised code styles. All code is automatically checked by Github actions, and will notify you if there are any issues with the code that you submit. We require that code passes these quality checks before merging.
 
 ### PR review process
 

apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx

@@ -45,7 +45,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
 ```html {{ title: 'index.html' }}
 <!-- START Formbricks Surveys -->
 <script type="text/javascript">
-    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.1.0/dist/index.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
+    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.1.2/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
     </script>
 <!-- END Formbricks Surveys -->
 ```

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

@@ -36,15 +36,16 @@ type ButtonProps = {
 
 export function Button({ variant = "primary", className, children, arrow, ...props }: ButtonProps) {
   className = clsx(
-    "inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition",
+    "inline-flex gap-0.5 justify-center items-center overflow-hidden font-medium transition text-center",
     variantStyles[variant],
-    className
+    className,
+    "px-5 py-2.5 text-xs"
   );
 
   let arrowIcon = (
     <ArrowIcon
       className={clsx(
-        "mt-0.5 h-5 w-5",
+        "mt-0.5 h-4 w-4",
         variant === "text" && "relative top-px",
         arrow === "left" && "-ml-1 rotate-180",
         arrow === "right" && "-mr-1"

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

@@ -69,8 +69,8 @@ function PageNavigation() {
 
 function TwitterIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path d="M16.712 6.652c.01.146.01.29.01.436 0 4.449-3.267 9.579-9.242 9.579v-.003a8.963 8.963 0 0 1-4.98-1.509 6.379 6.379 0 0 0 4.807-1.396c-1.39-.027-2.608-.966-3.035-2.337.487.097.99.077 1.467-.059-1.514-.316-2.606-1.696-2.606-3.3v-.041c.45.26.956.404 1.475.42C3.18 7.454 2.74 5.486 3.602 3.947c1.65 2.104 4.083 3.382 6.695 3.517a3.446 3.446 0 0 1 .94-3.217 3.172 3.172 0 0 1 4.596.148 6.38 6.38 0 0 0 2.063-.817 3.357 3.357 0 0 1-1.428 1.861 6.283 6.283 0 0 0 1.865-.53 6.735 6.735 0 0 1-1.62 1.744Z" />
+    <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
     </svg>
   );
 }
@@ -113,10 +113,12 @@ function SocialLink({
 }
 
 function SmallPrint() {
+  const currentYear = new Date().getFullYear();
+
   return (
     <div className="flex flex-col items-center justify-between gap-5 border-t border-slate-900/5 pt-8 dark:border-white/5 sm:flex-row">
       <p className="text-xs text-slate-600 dark:text-slate-400">
-        Formbricks GmbH &copy; 2023. All rights reserved.
+        Formbricks GmbH &copy; {currentYear}. All rights reserved.
       </p>
       <div className="flex gap-4">
         <SocialLink href="https://twitter.com/formbricks" icon={TwitterIcon}>

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

@@ -1,15 +1,15 @@
 "use client";
 
-import { forwardRef } from "react";
-import Link from "next/link";
 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";
 import { ThemeToggle } from "./ThemeToggle";
-import { FooterLogo } from "@/components/shared/Logo";
-import { useMobileNavigationStore, useIsInsideMobileNavigation, MobileNavigation } from "./MobileNavigation";
 
 function TopLevelNavItem({ href, children }: { href: string; children: React.ReactNode }) {
   return (
@@ -39,7 +39,7 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
       ref={ref}
       className={clsx(
         className,
-        "fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
+        "fixed inset-x-0 top-0 z-50 flex h-20 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
         !isInsideMobileNavigation && "backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80",
         isInsideMobileNavigation
           ? "bg-white dark:bg-slate-900"
@@ -64,10 +64,10 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
           <FooterLogo className="h-8" />
         </Link>
       </div>
-      <div className="flex items-center gap-5">
-        <nav className="hidden md:block">
+      <div className="flex items-center gap-6">
+        <nav className="hidden lg:block">
           <ul role="list" className="flex items-center gap-8">
-            <TopLevelNavItem href="/docs/introduction/what-is-formbricks">Documentation</TopLevelNavItem>
+          
             <TopLevelNavItem href="https://github.com/formbricks/formbricks">
               Star us on GitHub
             </TopLevelNavItem>

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

@@ -27,7 +27,6 @@ export const GitHubSponsorship: React.FC = () => {
           src={HackIconGold}
           alt="Hacktober Icon Gold"
           width={100}
-          height={100}
           className="mr-12 md:mr-4"
         />
       </div>

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

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from "react";
 import type { LottiePlayer } from "lottie-web";
 import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
 
 export const HeroAnimation: React.FC<any> = ({ fallbackImage, ...props }) => {
   const [loaded, setLoaded] = useState(false);
@@ -18,7 +18,6 @@ export const HeroAnimation: React.FC<any> = ({ fallbackImage, ...props }) => {
         renderer: "svg",
         loop: true,
         autoplay: true,
-        // path to your animation file, place it inside public folder
         path: "/animations/opensource-xm-platform-formbricks.json",
       });
 
@@ -36,11 +35,9 @@ export const HeroAnimation: React.FC<any> = ({ fallbackImage, ...props }) => {
       {!loaded && (
         <div className="absolute inset-0">
           <Image
+          priority
             src={fallbackImage}
             alt="Fallback Image"
-            layout="fill"
-            objectFit="cover"
-            objectPosition="center"
             className="transition-opacity duration-300"
             style={{ opacity: loaded ? 0 : 1 }}
           />

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

@@ -0,0 +1,44 @@
+import { Button } from "@formbricks/ui/Button";
+import { ArrowUpIcon } from "@heroicons/react/24/solid";
+import throttle from "lodash/throttle";
+import { useCallback, useEffect, useState } from "react";
+
+const ScrollToTopButton = () => {
+  const [visible, setVisible] = useState(false);
+
+  const scrollToTop = useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, []);
+
+  useEffect(() => {
+    const toggleVisible = () => {
+      const scrolled = document.documentElement.scrollTop;
+      if (scrolled > 500) {
+        setVisible(true);
+      } else if (scrolled <= 500) {
+        setVisible(false);
+      }
+    };
+
+    const throttledToggleVisible = throttle(toggleVisible, 200);
+
+    window.addEventListener("scroll", throttledToggleVisible);
+
+    return () => window.removeEventListener("scroll", throttledToggleVisible);
+  }, []);
+
+  return (
+    <div className="fixed bottom-20 right-10 z-50" style={{ display: visible ? "inline" : "none" }}>
+      <Button
+        className="flex w-12 items-center justify-center bg-slate-900/10 px-1 py-2 hover:bg-slate-900/20 hover:opacity-100 dark:bg-slate-50/5 dark:hover:bg-slate-50/30"
+        onClick={scrollToTop}>
+        <ArrowUpIcon className="h-6 w-6 text-slate-900 dark:text-slate-50" />
+      </Button>
+    </div>
+  );
+};
+
+export default ScrollToTopButton;

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

@@ -60,7 +60,7 @@ if (typeof window !== "undefined") {
           </>
         ) : activeTab === "html" ? (
           <CodeBlock>{`<script type="text/javascript">
-!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.1.0/dist/index.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init("claDadXk29dak92dK9","https://app.formbricks.com")},500)}();
+!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.1.2/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init("claDadXk29dak92dK9","https://app.formbricks.com")},500)}();
 </script>`}</CodeBlock>
         ) : null}
       </div>

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

@@ -18,7 +18,7 @@ export default function BestPracticeNavigation() {
       href: "/interview-prompt",
       status: true,
       icon: InterviewPromptIcon,
-      description: "Ask only power users users to book a time in your calendar. Get those juicy details.",
+      description: "Ask only power users to book a time in your calendar. Get those juicy details.",
       category: "Understand Users",
     },
     {

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

@@ -31,11 +31,25 @@ const navigation = {
           />
         </svg>
       ),
+    },    
+    {
+      name: "Discord",
+      href: "https://formbricks.com/discord",
+      icon: (props: any) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M16.238 4.515a14.842 14.842 0 0 0-3.664-1.136.055.055 0 0 0-.059.027 10.35 10.35 0 0 0-.456.938 13.702 13.702 0 0 0-4.115 0 9.479 9.479 0 0 0-.464-.938.058.058 0 0 0-.058-.027c-1.266.218-2.497.6-3.664 1.136a.052.052 0 0 0-.024.02C1.4 8.023.76 11.424 1.074 14.782a.062.062 0 0 0 .024.042 14.923 14.923 0 0 0 4.494 2.272.058.058 0 0 0 .064-.02c.346-.473.654-.972.92-1.496a.057.057 0 0 0-.032-.08 9.83 9.83 0 0 1-1.404-.669.058.058 0 0 1-.029-.046.058.058 0 0 1 .023-.05c.094-.07.189-.144.279-.218a.056.056 0 0 1 .058-.008c2.946 1.345 6.135 1.345 9.046 0a.056.056 0 0 1 .059.007c.09.074.184.149.28.22a.058.058 0 0 1 .023.049.059.059 0 0 1-.028.046 9.224 9.224 0 0 1-1.405.669.058.058 0 0 0-.033.033.056.056 0 0 0 .002.047c.27.523.58 1.022.92 1.495a.056.056 0 0 0 .062.021 14.878 14.878 0 0 0 4.502-2.272.055.055 0 0 0 .016-.018.056.056 0 0 0 .008-.023c.375-3.883-.63-7.256-2.662-10.246a.046.046 0 0 0-.023-.021Zm-9.223 8.221c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.717 1.814-1.618 1.814Zm5.981 0c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.71 1.814-1.618 1.814Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
     },
   ],
 };
-
 export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
   return (
     <footer
       className="mt-32 bg-gradient-to-b from-slate-50 to-slate-200 dark:from-slate-900 dark:to-slate-800"
@@ -51,7 +65,7 @@ export default function Footer() {
         <p className="text-base text-slate-500 dark:text-slate-400">Privacy-first Experience Management</p>
         <div className="border-slate-500">
           <p className="text-sm text-slate-400 dark:text-slate-500">
-            Formbricks GmbH &copy; 2022. All rights reserved.
+            Formbricks GmbH &copy; {currentYear}. All rights reserved.
             <br />
             <Link href="/imprint">Imprint</Link> | <Link href="/privacy">Privacy Policy</Link> |{" "}
             <Link href="/terms">Terms</Link> | <Link href="/oss-friends">OSS Friends</Link>

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

@@ -126,9 +126,9 @@ export default function Header() {
                 <Popover.Button
                   className={clsx(
                     open
-                      ? "text-slate-600 dark:text-slate-400 "
-                      : "text-slate-400  hover:text-slate-900  dark:hover:text-slate-100",
-                    "group inline-flex items-center rounded-md text-base font-medium hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:hover:text-slate-50"
+                      ? "text-slate-600 focus:px-2 dark:text-slate-400"
+                      : "px-2  text-slate-400  hover:text-slate-900 dark:hover:text-slate-100",
+                    "group inline-flex items-center rounded-md px-2 text-base font-medium hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:hover:text-slate-50"
                   )}>
                   <span className="text-sm lg:text-base">Best Practices</span>
                   <ChevronDownIcon
@@ -374,7 +374,7 @@ export default function Header() {
                   </div>
                 )}
                 <Link href="/concierge">Concierge</Link>
-                <Link href="#pricing">Pricing</Link>
+                <Link href="/pricing">Pricing</Link>
                 <Link href="/docs">Docs</Link>
                 <Link href="/blog">Blog</Link>
                 {/*   <Link href="/careers">Careers</Link> */}

apps/formbricks-com/components/shared/ThemeSelector.jsx

@@ -45,7 +45,7 @@ function SystemIcon(props) {
 }
 
 export function ThemeSelector(props) {
-  let [selectedTheme, setSelectedTheme] = useState();
+  const [selectedTheme, setSelectedTheme] = useState(null);
 
   useEffect(() => {
     if (selectedTheme) {

apps/formbricks-com/next.config.mjs

@@ -135,6 +135,11 @@ const nextConfig = {
         destination: "https://www.producthunt.com/products/formbricks",
         permanent: true,
       },
+      {
+        source: "/join-oss-friends",
+        destination: "https://formbricks.com/clhys1p9r001cpr0hu65rwh17",
+        permanent: true,
+      },
     ];
   },
   async rewrites() {

apps/formbricks-com/package.json

@@ -28,7 +28,6 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@sindresorhus/slugify": "^2.2.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "20.6.0",
     "@types/react-highlight-words": "^0.16.5",
     "acorn": "^8.10.0",
     "autoprefixer": "^10.4.15",

apps/formbricks-com/pages/api/oss-friends/index.ts

@@ -127,6 +127,12 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
           description: "Open-source solution to deploy, scale, and operate your multiplayer game.",
           href: "https://rivet.gg",
         },
+        {
+          name: "Shelf.nu",
+          description:
+            "Open Source Asset and Equipment tracking software that lets you create QR asset labels, manage and overview your assets across locations.",
+          href: "https://www.shelf.nu/",
+        },
         {
           name: "Sniffnet",
           description:

apps/formbricks-com/pages/concierge.tsx

@@ -83,8 +83,8 @@ const ConciergePage = () => {
           </div> */}
           <div className="px-6">
             <Button
-              variant="darkCTA"
-              className="w-full justify-center"
+              // variant="darkCTA"
+              className="w-full justify-center bg-gray-800 text-gray-300 hover:text-white"
               href="https://cal.com/johannes/kick-off"
               target="_blank">
               Schedule free Kick-Off call

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

@@ -16,7 +16,7 @@ export default function FeedbackBoxPage() {
             Why is it useful?
           </h3>
           <p className="text-slate-600 dark:text-slate-400">
-            Offering a direct channel for feedback helps you build a better product. Users feel heared and
+            Offering a direct channel for feedback helps you build a better product. Users feel heard and
             with Formbricks automations, you&apos;ll be able to react to feedback rapidly. Lastly, critical
             feedback can be acted upon quickly so that it doesn&apos;t end up on social media.
           </p>

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

@@ -48,7 +48,7 @@ export default function HeaderLight() {
       </div>
 
       {/* Mobile Menu */}
-      <div className="flex items-center md:hidden">
+      <div className="flex items-center pr-4 md:hidden">
         <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
           <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
             <span>

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

@@ -439,10 +439,6 @@ const Leaderboard = [
     points: "150",
     link: "https://github.com/ratishjain12",
   },
-  {
-    name: "yatharth",
-    points: "600",
-  },
   {
     name: "Subham Raj",
     points: "500",
@@ -499,10 +495,6 @@ const Leaderboard = [
     name: "bitnagar",
     points: "100",
   },
-  {
-    name: "bitnagar",
-    points: "400",
-  },
   {
     name: "United1l",
     points: "250",
@@ -568,7 +560,7 @@ export default function FormTribeHackathon() {
         {/* Right Column: Headline + Ordered List */}
         <div className="flex items-center justify-center sm:pl-12 md:w-1/2">
           <div className="space-y-5">
-            <h1 className="font-kablammo text-3xl font-bold text-slate-800">In a nutshell</h1>
+            <h1 className="font-kablammo text-3xl text-slate-800">In a nutshell</h1>
             <ol className="list-inside list-decimal space-y-3 text-slate-700">
               <li>
                 <strong>As a community,</strong> we will ship all link survey features for a Typeform like
@@ -787,7 +779,7 @@ export default function FormTribeHackathon() {
 
       {/* Side Quests */}
       <div className="mt-16" id="side-quests">
-        <h3 className="font-kablammo my-4 text-4xl font-bold text-slate-800">
+        <h3 className="font-kablammo my-4 text-4xl text-slate-800">
           🏰 Side Quests: Increase your chances
         </h3>
         <p className="w-3/4 text-slate-600">
@@ -924,7 +916,7 @@ export default function FormTribeHackathon() {
 
       {/* FAQ */}
       <div className="mt-32" id="faq">
-        <h3 className="font-kablammo my-4 text-4xl font-bold text-slate-800">FAQ</h3>
+        <h3 className="font-kablammo my-4 text-4xl text-slate-800">FAQ</h3>
         <p className="w-3/4 text-slate-600">Anything unclear?</p>
         <div className="mt-8">
           {FAQ.map((question) => (
@@ -949,11 +941,12 @@ export default function FormTribeHackathon() {
 const SectionHeading = ({ title, subTitle, description, id }) => {
   return (
     <div id={id} className="lg:pt-18 mt-32 px-4 pb-12 text-center sm:px-6 lg:px-8 ">
-      <p className=" text-[3rem] text-slate-500">{subTitle}</p>
-      <h1 className="font-kablammo mb-8 mt-4 bg-gradient-to-br from-[#032E1E] via-[#032E1E] to-[#013C27] bg-clip-text text-6xl text-transparent">
+      <p className="text-xl lg:text-[3rem] pb-4 text-slate-500">{subTitle}</p>
+      <h1 className="font-kablammo mb-8 mt-4 bg-gradient-to-br from-[#032E1E] via-[#032E1E] to-[#013C27] bg-clip-text text-4xl lg:text-6xl text-transparent">
         {title}
       </h1>
-      <p className="mx-auto mt-4 text-slate-700 sm:w-3/4">{description}</p>
+      <p className="mx-auto mt-4 text-base text-slate-700 sm:w-3/4">{description}</p>{" "}
+      {/* Reduced text size for description */}
     </div>
   );
 };

apps/formbricks-com/pages/index.tsx

@@ -3,6 +3,7 @@ import Features from "@/components/home/Features";
 import GitHubSponsorship from "@/components/home/GitHubSponsorship";
 import Hero from "@/components/home/Hero";
 import Highlights from "@/components/home/Highlights";
+import ScrollToTopButton from "@/components/home/ScrollToTop";
 import Steps from "@/components/home/Steps";
 import BestPractices from "@/components/shared/BestPractices";
 import BreakerCTA from "@/components/shared/BreakerCTA";
@@ -19,6 +20,7 @@ const IndexPage = () => (
     <BestPractices />
     <Features />
     <Highlights />
+    <ScrollToTopButton />
     <div className="block lg:hidden">
       <GitHubSponsorship />
     </div>

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

@@ -8,7 +8,7 @@ export default function InterviewPromptPage() {
   return (
     <Layout
       title="Interview Prompt with Formbricks"
-      description="Ask only power users users to book a time in your calendar. Get those juicy details.">
+      description="Ask only power users to book a time in your calendar. Get those juicy details.">
       <div className="grid grid-cols-1 items-center md:grid-cols-2 md:gap-12 md:py-20">
         <div className="p-6 md:p-0">
           <UseCaseHeader title="Interview Prompt" difficulty="Easy" setupMinutes="15" />

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

@@ -1,5 +1,5 @@
-import Layout from "@/components/shared/Layout";
 import HeroTitle from "@/components/shared/HeroTitle";
+import Layout from "@/components/shared/Layout";
 import { Button } from "@formbricks/ui/Button";
 
 type OSSFriend = {
@@ -18,19 +18,21 @@ export default function OSSFriendsPage({ OSSFriends }: Props) {
       <HeroTitle headingPt1="Our" headingTeal="Open-source" headingPt2="Friends" />
       <div className="m-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {OSSFriends.map((friend, index) => (
-          <div key={index} className="overflow-hidden rounded bg-slate-100 p-6 shadow-md">
-            <a href={friend.href} className="mb-2 text-xl font-bold">
+          <div key={index} className="overflow-hidden rounded bg-slate-100 dark:bg-slate-800 p-6 shadow-md">
+            <a href={friend.href} className="mb-2 text-xl font-bold text-slate-900 dark:text-slate-100">
               {friend.name}
             </a>
-            <p className="mt-4 text-sm text-gray-700">{friend.description}</p>
+            <p className="mt-4 text-sm text-slate-700 dark:text-slate-300">{friend.description}</p>
             <div className="mt-4">
-              <Button target="_blank" variant="primary" href={friend.href}>
+              <Button target="_blank" variant="secondary" href={friend.href}>
                 Learn more
               </Button>
             </div>
           </div>
         ))}
       </div>
+      <div className="text-center mt-4">
+      <Button variant="minimal" className="dark:text-slate-400" href="https://formbricks.com/clhys1p9r001cpr0hu65rwh17" target="_blank">Wanna join OSS Friends?</Button></div>
     </Layout>
   );
 }

apps/storybook/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

apps/storybook/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/storybook/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../../../packages/ui/**/stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

apps/storybook/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../src/index.css";
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

apps/storybook/README.md

@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

apps/storybook/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/storybook/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "storybook",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "clean": "rimraf .turbo node_modules dist"
+  },
+  "dependencies": {
+    "@formbricks/ui": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.4.6"
+  },
+  "devDependencies": {
+    "@formbricks/tsconfig": "workspace:*",
+    "@storybook/addon-essentials": "^7.5.0-alpha.5",
+    "@storybook/addon-interactions": "^7.5.0-alpha.5",
+    "@storybook/addon-links": "^7.5.0-alpha.5",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.0-alpha.5",
+    "@storybook/react": "^7.5.0-alpha.5",
+    "@storybook/react-vite": "^7.5.0-alpha.5",
+    "@storybook/testing-library": "^0.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "@vitejs/plugin-react": "^4.1.0",
+    "esbuild": "^0.19.4",
+    "tsup": "^7.2.0",
+    "vite": "^4.4.11"
+  }
+}

apps/storybook/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/storybook/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

apps/storybook/src/App.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+
+import "./App.css";
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank"></a>
+      </div>
+      <h1 className="bg-orange-200 p-4 font-bold">Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+    </>
+  );
+}
+
+export default App;

apps/storybook/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/storybook/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

apps/storybook/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/storybook/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+
+import base from "../../packages/tailwind-config/tailwind.config";
+
+export default {
+  ...base,
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
+    "!../../packages/ui/node_modules/**/*.{js,ts,jsx,tsx}",
+  ],
+};

apps/storybook/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

apps/storybook/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

apps/storybook/tsup.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   dts: true,
   splitting: true,
   format: ["cjs", "esm"],
-  entry: ["src/index.ts"],
+  entry: ["src/main.tsx"],
   minify: isProduction,
   sourcemap: true,
 });

apps/storybook/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    "process.env": {},
+  },
+});

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

@@ -1,6 +1,6 @@
 "use client";
 
-import ContentWrapper from "@/components/shared/ContentWrapper";
+import ContentWrapper from "@/app/components/shared/ContentWrapper";
 import { Button } from "@formbricks/ui/Button";
 import { Confetti } from "@formbricks/ui/Confetti";
 import { useEffect, useState } from "react";

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

@@ -1,4 +1,4 @@
-import ConfirmationPage from "./ConfirmationPage";
+import ConfirmationPage from "./components/ConfirmationPage";
 
 export default function BillingConfirmation({}) {
   return <ConfirmationPage />;

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { env } from "@/env.mjs";
-import { formbricksEnabled } from "@/lib/formbricks";
+import { formbricksEnabled } from "@/app/lib/formbricks";
 import formbricks from "@formbricks/js";
 import { useEffect } from "react";
 

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

@@ -1,10 +1,10 @@
 "use client";
 
-import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { Label } from "@formbricks/ui/Label";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
-import { capitalizeFirstLetter } from "@/lib/utils";
+import { capitalizeFirstLetter } from "@/app/lib/utils";
 import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
 import { TActionClass } from "@formbricks/types/v1/actionClasses";
 import { useEffect, useState } from "react";
@@ -13,7 +13,7 @@ import {
   getActionCountInLast24HoursAction,
   getActionCountInLast7DaysAction,
   GetActiveInactiveSurveysAction,
-} from "./actions";
+} from "../actions";
 interface ActivityTabProps {
   actionClass: TActionClass;
 }

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

@@ -1,4 +1,4 @@
-import ModalWithTabs from "@/components/shared/ModalWithTabs";
+import ModalWithTabs from "@/app/components/shared/ModalWithTabs";
 import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
 import EventActivityTab from "./ActionActivityTab";
 import ActionSettingsTab from "./ActionSettingsTab";

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

@@ -10,11 +10,11 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
-import { testURLmatch } from "./testURLmatch";
+import { testURLmatch } from "../lib/testURLmatch";
 import { TActionClassInput, TActionClassNoCodeConfig } from "@formbricks/types/v1/actionClasses";
-import { CssSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/(selectors)/CssSelector";
-import { PageUrlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/(selectors)/PageUrlSelector";
-import { InnerHtmlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/(selectors)/InnerHtmlSelector";
+import { CssSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/CssSelector";
+import { PageUrlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/PageUrlSelector";
+import { InnerHtmlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/InnerHtmlSelector";
 import {
   deleteActionClassAction,
   updateActionClassAction,

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

@@ -8,15 +8,15 @@ import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
-import { testURLmatch } from "./testURLmatch";
+import { testURLmatch } from "../lib/testURLmatch";
 import {
   TActionClassInput,
   TActionClassNoCodeConfig,
   TActionClass,
 } from "@formbricks/types/v1/actionClasses";
-import { CssSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/(selectors)/CssSelector";
-import { PageUrlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/(selectors)/PageUrlSelector";
-import { InnerHtmlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/(selectors)/InnerHtmlSelector";
+import { CssSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/CssSelector";
+import { PageUrlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/PageUrlSelector";
+import { InnerHtmlSelector } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/InnerHtmlSelector";
 import { createActionClassAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
 
 interface AddNoCodeActionModalProps {

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

@@ -1,5 +1,5 @@
-import ActionsAttributesTabs from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/ActionsAttributesTabs";
-import ContentWrapper from "@/components/shared/ContentWrapper";
+import ActionsAttributesTabs from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/ActionsAttributesTabs";
+import ContentWrapper from "@/app/components/shared/ContentWrapper";
 
 export default function ActionsAndAttributesLayout({ params, children }) {
   return (

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

@@ -1,8 +1,8 @@
 export const revalidate = REVALIDATION_INTERVAL;
 
-import ActionClassesTable from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/ActionClassesTable";
-import ActionClassDataRow from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/ActionRowData";
-import ActionTableHeading from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/ActionTableHeading";
+import ActionClassesTable from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionClassesTable";
+import ActionClassDataRow from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionRowData";
+import ActionTableHeading from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionTableHeading";
 import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
 import { getActionClasses } from "@formbricks/lib/actionClass/service";
 import { Metadata } from "next";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/ActionsAttributesTabs.tsx

@@ -1,4 +1,4 @@
-import SecondNavbar from "@/components/environments/SecondNavBar";
+import SecondNavbar from "@/app/components/environments/SecondNavBar";
 import { CursorArrowRaysIcon, TagIcon } from "@heroicons/react/24/solid";
 
 interface ActionsAttributesTabsProps {

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeActivityTab.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { GetActiveInactiveSurveysAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/actions";
-import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { capitalizeFirstLetter } from "@/lib/utils";
+import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import { capitalizeFirstLetter } from "@/app/lib/utils";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
 import { TAttributeClass } from "@formbricks/types/v1/attributeClasses";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeDetailModal.tsx

@@ -1,4 +1,4 @@
-import ModalWithTabs from "@/components/shared/ModalWithTabs";
+import ModalWithTabs from "@/app/components/shared/ModalWithTabs";
 import { TagIcon } from "@heroicons/react/24/solid";
 import AttributeActivityTab from "./AttributeActivityTab";
 import AttributeSettingsTab from "./AttributeSettingsTab";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeSettingsTab.tsx

@@ -76,7 +76,7 @@ export default function AttributeSettingsTab({ attributeClass, setOpen }: Attrib
           <div className="flex items-center">
             <Button
               variant="secondary"
-              href="https://formbricks.com/docs/getting-started/identify-users"
+              href="https://formbricks.com/docs/attributes/identify-users"
               target="_blank">
               Read Docs
             </Button>

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/layout.tsx

@@ -1,5 +1,5 @@
-import ActionsAttributesTabs from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/ActionsAttributesTabs";
-import ContentWrapper from "@/components/shared/ContentWrapper";
+import ActionsAttributesTabs from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/ActionsAttributesTabs";
+import ContentWrapper from "@/app/components/shared/ContentWrapper";
 
 export default function ActionsAndAttributesLayout({ params, children }) {
   return (

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/page.tsx

@@ -1,9 +1,9 @@
 export const revalidate = REVALIDATION_INTERVAL;
 
-import AttributeClassesTable from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/AttributeClassesTable";
-import AttributeClassDataRow from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/AttributeRowData";
-import AttributeTableHeading from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/AttributeTableHeading";
-import HowToAddAttributesButton from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/HowToAddAttributesButton";
+import AttributeClassesTable from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeClassesTable";
+import AttributeClassDataRow from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeRowData";
+import AttributeTableHeading from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeTableHeading";
+import HowToAddAttributesButton from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/HowToAddAttributesButton";
 import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
 import { getAttributeClasses } from "@formbricks/lib/attributeClass/service";
 import { Metadata } from "next";

apps/web/app/(app)/environments/[environmentId]/components/Navigation.tsx

@@ -15,11 +15,11 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/shared/DropdownMenu";
-import CreateTeamModal from "@/components/team/CreateTeamModal";
+} from "@/app/components/shared/DropdownMenu";
+import CreateTeamModal from "@/app/components/team/CreateTeamModal";
 import UrlShortenerModal from "./UrlShortenerModal";
-import { formbricksLogout } from "@/lib/formbricks";
-import { capitalizeFirstLetter, truncate } from "@/lib/utils";
+import { formbricksLogout } from "@/app/lib/formbricks";
+import { capitalizeFirstLetter, truncate } from "@/app/lib/utils";
 import formbricks from "@formbricks/js";
 import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/v1/environment";

apps/web/app/(app)/environments/[environmentId]/components/ResponseFilterContext.tsx

@@ -3,9 +3,9 @@
 import {
   QuestionOption,
   QuestionOptions,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/QuestionsComboBox";
-import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/ResponseFilter";
-import { getTodayDate } from "@/lib/surveys/surveys";
+} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
+import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
+import { getTodayDate } from "@/app/lib/surveys/surveys";
 import { createContext, useContext, useState } from "react";
 
 interface FilterValue {

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/Connect.tsx

@@ -2,7 +2,7 @@
 
 import GoogleSheetLogo from "@/images/google-sheets-small.png";
 import FormbricksLogo from "@/images/logo.svg";
-import { authorize } from "@formbricks/lib/client/google";
+import { authorize } from "../lib/google";
 import { Button } from "@formbricks/ui/Button";
 import Image from "next/image";
 import Link from "next/link";

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/GoogleSheetWrapper.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import Home from "./Home";
-import Connect from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/Connect";
-import AddIntegrationModal from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/AddIntegrationModal";
+import Connect from "./Connect";
+import AddIntegrationModal from "./AddIntegrationModal";
 import {
   TGoogleSheetIntegration,
   TGoogleSheetsConfigData,

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/Home.tsx

@@ -2,7 +2,7 @@
 
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/actions";
 import { DeleteDialog } from "@formbricks/ui/DeleteDialog";
-import EmptySpaceFiller from "@/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
 import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 import { TGoogleSheetIntegration, TGoogleSheetsConfigData } from "@formbricks/types/v1/integrations";

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/loading.tsx

@@ -1,4 +1,4 @@
-import GoBackButton from "@/components/shared/GoBackButton";
+import GoBackButton from "@/app/components/shared/GoBackButton";
 import { Button } from "@formbricks/ui/Button";
 
 export default function Loading() {

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/page.tsx

@@ -1,5 +1,5 @@
-import GoogleSheetWrapper from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/GoogleSheetWrapper";
-import GoBackButton from "@/components/shared/GoBackButton";
+import GoogleSheetWrapper from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/components/GoogleSheetWrapper";
+import GoBackButton from "@/app/components/shared/GoBackButton";
 import { getSpreadSheets } from "@formbricks/lib/googleSheet/service";
 import { getIntegrations } from "@formbricks/lib/integration/service";
 import { getSurveys } from "@formbricks/lib/survey/service";

apps/web/app/(app)/environments/[environmentId]/integrations/layout.tsx

@@ -1,4 +1,4 @@
-import ContentWrapper from "@/components/shared/ContentWrapper";
+import ContentWrapper from "@/app/components/shared/ContentWrapper";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/AddWebhookModal.tsx

@@ -1,9 +1,9 @@
-import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/SurveyCheckboxGroup";
-import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/TriggerCheckboxGroup";
-import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/HardcodedTriggers";
-import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/testEndpoint";
+import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/SurveyCheckboxGroup";
+import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/TriggerCheckboxGroup";
+import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/HardcodedTriggers";
+import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/testEndpoint";
 import { Modal } from "@formbricks/ui/Modal";
-import { createWebhookAction } from "./actions";
+import { createWebhookAction } from "../actions";
 import { TPipelineTrigger } from "@formbricks/types/v1/pipelines";
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import { TWebhookInput } from "@formbricks/types/v1/webhooks";

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookDetailModal.tsx

@@ -1,7 +1,7 @@
-import ModalWithTabs from "@/components/shared/ModalWithTabs";
+import ModalWithTabs from "@/app/components/shared/ModalWithTabs";
 import { TWebhook } from "@formbricks/types/v1/webhooks";
-import WebhookOverviewTab from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookOverviewTab";
-import WebhookSettingsTab from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookSettingsTab";
+import WebhookOverviewTab from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookOverviewTab";
+import WebhookSettingsTab from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookSettingsTab";
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import { Webhook } from "lucide-react";
 

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookOverviewTab.tsx

@@ -2,7 +2,7 @@ import { Label } from "@formbricks/ui/Label";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
 import { TWebhook } from "@formbricks/types/v1/webhooks";
 import { TSurvey } from "@formbricks/types/v1/surveys";
-import { capitalizeFirstLetter } from "@/lib/utils";
+import { capitalizeFirstLetter } from "@/app/lib/utils";
 
 interface ActivityTabProps {
   webhook: TWebhook;

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookRowData.tsx

@@ -1,4 +1,4 @@
-import { capitalizeFirstLetter } from "@/lib/utils";
+import { capitalizeFirstLetter } from "@/app/lib/utils";
 import { timeSinceConditionally } from "@formbricks/lib/time";
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import { TWebhook } from "@formbricks/types/v1/webhooks";

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookSettingsTab.tsx

@@ -11,13 +11,13 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { TWebhook, TWebhookInput } from "@formbricks/types/v1/webhooks";
-import { deleteWebhookAction, updateWebhookAction } from "./actions";
+import { deleteWebhookAction, updateWebhookAction } from "../actions";
 import { TPipelineTrigger } from "@formbricks/types/v1/pipelines";
 import { TSurvey } from "@formbricks/types/v1/surveys";
-import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/testEndpoint";
-import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/HardcodedTriggers";
-import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/TriggerCheckboxGroup";
-import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/SurveyCheckboxGroup";
+import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/testEndpoint";
+import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/HardcodedTriggers";
+import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/TriggerCheckboxGroup";
+import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/SurveyCheckboxGroup";
 
 interface ActionSettingsTabProps {
   environmentId: string;

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookTable.tsx

@@ -3,11 +3,11 @@
 import { Button } from "@formbricks/ui/Button";
 import { useState } from "react";
 import { TWebhook } from "@formbricks/types/v1/webhooks";
-import AddWebhookModal from "@/app/(app)/environments/[environmentId]/integrations/webhooks/AddWebhookModal";
+import AddWebhookModal from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/AddWebhookModal";
 import { TSurvey } from "@formbricks/types/v1/surveys";
-import WebhookModal from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookDetailModal";
+import WebhookModal from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookDetailModal";
 import { Webhook } from "lucide-react";
-import EmptySpaceFiller from "@/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 
 export default function WebhookTable({

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/page.tsx

@@ -1,9 +1,9 @@
 export const revalidate = REVALIDATION_INTERVAL;
 
-import WebhookRowData from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookRowData";
-import WebhookTable from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookTable";
-import WebhookTableHeading from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookTableHeading";
-import GoBackButton from "@/components/shared/GoBackButton";
+import WebhookRowData from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookRowData";
+import WebhookTable from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookTable";
+import WebhookTableHeading from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookTableHeading";
+import GoBackButton from "@/app/components/shared/GoBackButton";
 import { getSurveys } from "@formbricks/lib/survey/service";
 import { getWebhooks } from "@formbricks/lib/webhook/service";
 import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";

apps/web/app/(app)/environments/[environmentId]/layout.tsx

@@ -1,9 +1,9 @@
 import EnvironmentsNavbar from "@/app/(app)/environments/[environmentId]/components/EnvironmentsNavbar";
-import ToasterClient from "@/components/ToasterClient";
+import ToasterClient from "@/app/components/ToasterClient";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { authOptions } from "@formbricks/lib/authOptions";
-import FormbricksClient from "../../FormbricksClient";
+import FormbricksClient from "../../components/FormbricksClient";
 import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";

apps/web/app/(app)/environments/[environmentId]/people/[personId]/components/ActivityFeed.tsx

@@ -1,4 +1,4 @@
-import EmptySpaceFiller from "@/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
 import { ActivityItemContent, ActivityItemIcon, ActivityItemPopover } from "./ActivityItemComponents";
 import { TActivityFeedItem } from "@formbricks/types/v1/activity";
 import { TEnvironment } from "@formbricks/types/v1/environment";

apps/web/app/(app)/environments/[environmentId]/people/[personId]/components/ActivityItemComponents.tsx

@@ -1,4 +1,4 @@
-import { capitalizeFirstLetter } from "@/lib/utils";
+import { capitalizeFirstLetter } from "@/app/lib/utils";
 import { TActivityFeedItem } from "@formbricks/types/v1/activity";
 import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
 import { Label } from "@formbricks/ui/Label";

apps/web/app/(app)/environments/[environmentId]/people/[personId]/components/ActivitySection.tsx

@@ -1,4 +1,4 @@
-import ActivityTimeline from "@/app/(app)/environments/[environmentId]/people/[personId]/(activitySection)/ActivityTimeline";
+import ActivityTimeline from "@/app/(app)/environments/[environmentId]/people/[personId]/components/ActivityTimeline";
 import { getActivityTimeline } from "@formbricks/lib/activity/service";
 import { getEnvironment } from "@formbricks/lib/environment/service";
 

apps/web/app/(app)/environments/[environmentId]/people/[personId]/components/ActivityTimeline.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ActivityFeed from "@/app/(app)/environments/[environmentId]/people/[personId]/(activitySection)/ActivityFeed";
+import ActivityFeed from "@/app/(app)/environments/[environmentId]/people/[personId]/components/ActivityFeed";
 import { TActivityFeedItem } from "@formbricks/types/v1/activity";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 import { ArrowsUpDownIcon } from "@heroicons/react/24/outline";

apps/web/app/(app)/environments/[environmentId]/people/[personId]/components/AttributesSection.tsx

@@ -2,7 +2,7 @@ export const revalidate = REVALIDATION_INTERVAL;
 
 import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
 
-import { capitalizeFirstLetter } from "@/lib/utils";
+import { capitalizeFirstLetter } from "@/app/lib/utils";
 import { getPerson } from "@formbricks/lib/person/service";
 import { getResponsesByPersonId } from "@formbricks/lib/response/service";
 import { getSessionCount } from "@formbricks/lib/session/service";