chore: move ui components to modules (#4342)

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

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

@@ -127,10 +127,10 @@ Locate that file. We are using the [Tailwind Template “Syntax”](https://tail
 <CodeGroup title="Entire Widget">
 
 ```tsx
+import { Button } from "@/modules/ui/components/Button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/popover";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { Button } from "@formbricks/ui/components/Button";
-import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/components/Popover";
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
 
 export const DocsFeedback = () => {

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

@@ -1,83 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@formbricks/ui/components/Accordion";
-import { FaqJsonLdComponent } from "./FAQPageJsonLd";
-
-const FAQ_DATA = [
-  {
-    question: "What is an environment ID?",
-    answer: () => (
-      <>
-        The environment ID is a unique identifier associated with each Environment in Formbricks,
-        distinguishing between different setups like production, development, etc.
-      </>
-    ),
-  },
-  {
-    question: "How can I implement authentication for the Formbricks API?",
-    answer: () => (
-      <>
-        Formbricks provides 2 types of API keys for each environment ie development and production. You can
-        generate, view, and manage these keys in the Settings section on the Admin dashboard. Include the API
-        key in your requests to authenticate and gain access to Formbricks functionalities.
-      </>
-    ),
-  },
-  {
-    question: "Can I run the deployment shell script on any server?",
-    answer: () => (
-      <>
-        You can run it on any machine you own as long as its running a <b> Linux Ubuntu </b> distribution. And
-        to forward the requests, make sure you have an <b>A record</b> setup for your domain pointing to the
-        server.
-      </>
-    ),
-  },
-  {
-    question: "Can I self-host Formbricks?",
-    answer: () => (
-      <>
-        Absolutely! We provide an option for users to host Formbricks on their own server, ensuring even more
-        control over data and compliance. And the best part? Self-hosting is available for free, always. For
-        documentation on self hosting, click{" "}
-        <a href="/self-hosting/deployment" className="text-brand-dark dark:text-brand-light">
-          here
-        </a>
-        .
-      </>
-    ),
-  },
-  {
-    question: "How can I change Button texts in my survey?",
-    answer: () => (
-      <>
-        For the question that you want to change the button text, click on the <b>Show Advanced Settings</b>{" "}
-        toggle and change the button label in the <b>Button Text</b> field.
-      </>
-    ),
-  },
-];
-
-export const faqJsonLdData = FAQ_DATA.map((faq) => ({
-  questionName: faq.question,
-  acceptedAnswerText: faq.answer(),
-}));
-
-export const FAQ = () => {
-  return (
-    <>
-      <FaqJsonLdComponent data={faqJsonLdData} />
-      <Accordion type="single" collapsible>
-        {FAQ_DATA.map((faq, index) => (
-          <AccordionItem key={`item-${index}`} value={`item-${index + 1}`} className="not-prose mb-0 mt-0">
-            <AccordionTrigger>{faq.question}</AccordionTrigger>
-            <AccordionContent>{faq.answer()}</AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </>
-  );
-};

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

@@ -1,12 +0,0 @@
-"use client";
-
-import { FAQPageJsonLd } from "next-seo";
-
-export const FaqJsonLdComponent = ({ data }) => {
-  const faqEntities = data.map(({ question, answer }) => ({
-    questionName: question,
-    acceptedAnswerText: answer,
-  }));
-
-  return <FAQPageJsonLd mainEntity={faqEntities} />;
-};

apps/docs/next.config.mjs

@@ -16,7 +16,7 @@ const withMDX = nextMDX({
 const nextConfig = {
   basePath: "/docs",
   pageExtensions: ["js", "jsx", "ts", "tsx", "mdx"],
-  transpilePackages: ["@formbricks/ui", "@formbricks/lib"],
+  transpilePackages: ["@formbricks/lib"],
   images: {
     remotePatterns: [
       {

apps/docs/package.json

@@ -18,7 +18,6 @@
     "@docsearch/react": "3.6.2",
     "@formbricks/lib": "workspace:*",
     "@formbricks/types": "workspace:*",
-    "@formbricks/ui": "workspace:*",
     "@headlessui/react": "2.1.9",
     "@headlessui/tailwindcss": "0.2.1",
     "@mapbox/rehype-prism": "0.9.0",

apps/docs/tailwind.config.ts

@@ -1,5 +1,4 @@
 import headlessuiPlugin from "@headlessui/tailwindcss";
-import forms from "@tailwindcss/forms";
 import typographyPlugin from "@tailwindcss/typography";
 import { type Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme";
@@ -82,5 +81,5 @@ export default {
       },
     },
   },
-  plugins: [typographyPlugin, headlessuiPlugin, forms],
+  plugins: [typographyPlugin, headlessuiPlugin],
 } satisfies Config;