Fix build errors in formbricks-com (#710)

* Fix build errors in formbricks-com'

* run pnpm format

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

@@ -1,14 +1,9 @@
-import { Fragment } from 'react'
-import Highlight, { defaultProps } from 'prism-react-renderer'
+import { Fragment } from "react";
+import { Highlight } from "prism-react-renderer";
 
 export function Fence({ children, language }) {
   return (
-    <Highlight
-      {...defaultProps}
-      code={children.trimEnd()}
-      language={language}
-      theme={undefined}
-    >
+    <Highlight code={children.trimEnd()} language={language} theme={undefined}>
       {({ className, style, tokens, getTokenProps }) => (
         <pre className={className} style={style}>
           <code>
@@ -19,12 +14,12 @@ export function Fence({ children, language }) {
                   .map((token, tokenIndex) => (
                     <span key={tokenIndex} {...getTokenProps({ token })} />
                   ))}
-                {'\n'}
+                {"\n"}
               </Fragment>
             ))}
           </code>
         </pre>
       )}
     </Highlight>
-  )
+  );
 }

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

@@ -5,7 +5,7 @@ import { TagIcon } from "@heroicons/react/24/solid";
 export default function AttributeClassDataRow({ attributeClass }) {
   return (
     <div className="m-2 grid h-16  grid-cols-5 content-center rounded-lg hover:bg-slate-100">
-      <div className="sm:col-span-3 col-span-5 flex items-center pl-6 text-sm">
+      <div className="col-span-5 flex items-center pl-6 text-sm sm:col-span-3">
         <div className="flex items-center">
           <div className="h-10 w-10 flex-shrink-0">
             <TagIcon className="h-8 w-8 flex-shrink-0 text-slate-500" />
@@ -22,10 +22,10 @@ export default function AttributeClassDataRow({ attributeClass }) {
         </div>
       </div>
 
-      <div className="my-auto whitespace-nowrap text-center text-sm text-slate-500 hidden md:block">
+      <div className="my-auto hidden whitespace-nowrap text-center text-sm text-slate-500 md:block">
         <div className="text-slate-900">{timeSinceConditionally(attributeClass.createdAt.toString())}</div>
       </div>
-      <div className="my-auto whitespace-nowrap text-center text-sm text-slate-500 hidden md:block">
+      <div className="my-auto hidden whitespace-nowrap text-center text-sm text-slate-500 md:block">
         <div className="text-slate-900">{timeSinceConditionally(attributeClass.updatedAt.toString())}</div>
       </div>
     </div>

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

@@ -3,8 +3,8 @@ export default function AttributeTableHeading() {
     <>
       <div className="grid h-12 grid-cols-5 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
         <div className="col-span-3 pl-6 ">Name</div>
-        <div className="text-center hidden sm:block">Created</div>
-        <div className="text-center hidden sm:block">Last Updated</div>
+        <div className="hidden text-center sm:block">Created</div>
+        <div className="hidden text-center sm:block">Last Updated</div>
       </div>
     </>
   );

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

@@ -36,12 +36,16 @@ import {
   DashboardIcon,
   ErrorComponent,
   FilterIcon,
-  FormIcon, Popover, PopoverContent, PopoverTrigger, ProfileAvatar,
+  FormIcon,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ProfileAvatar,
   SettingsIcon,
   Tooltip,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger
+  TooltipTrigger,
 } from "@formbricks/ui";
 import {
   AdjustmentsVerticalIcon,

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

@@ -9,7 +9,7 @@ export default function IntegrationsPage({ params }) {
     <div>
       <h1 className="my-2 text-3xl font-bold text-slate-800">Integrations</h1>
       <p className="mb-6 text-slate-500">Connect Formbricks with your favorite tools.</p>
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         <Card
           docsHref="https://formbricks.com/docs/getting-started/nextjs-app"
           docsText="Docs"

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

@@ -26,8 +26,8 @@ export default async function PeoplePage({ params }) {
         <div className="rounded-lg border border-slate-200">
           <div className="grid h-12 grid-cols-7 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
             <div className="col-span-3 pl-6 ">User</div>
-            <div className="col-span-2 text-center hidden sm:block">User ID</div>
-            <div className="col-span-2 text-center hidden sm:block">Email</div>
+            <div className="col-span-2 hidden text-center sm:block">User ID</div>
+            <div className="col-span-2 hidden text-center sm:block">Email</div>
           </div>
           {people.map((person) => (
             <Link
@@ -51,12 +51,12 @@ export default async function PeoplePage({ params }) {
                     </div>
                   </div>
                 </div>
-                <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500 hidden sm:block">
+                <div className="col-span-2 my-auto hidden whitespace-nowrap text-center text-sm text-slate-500 sm:block">
                   <div className="ph-no-capture text-slate-900">
                     {truncateMiddle(getAttributeValue(person, "userId"), 24)}
                   </div>
                 </div>
-                <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500 hidden sm:block">
+                <div className="col-span-2 my-auto hidden whitespace-nowrap text-center text-sm text-slate-500 sm:block">
                   <div className="ph-no-capture text-slate-900">{getAttributeValue(person, "email")}</div>
                 </div>
               </div>

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

@@ -451,7 +451,7 @@ export default function PreviewSurvey({
               </Modal>
             ) : (
               <div className="flex flex-grow flex-col overflow-y-auto" ref={ContentRef}>
-                <div className="flex w-full flex-grow p-4 flex-col items-center justify-center bg-white py-6">
+                <div className="flex w-full flex-grow flex-col items-center justify-center bg-white p-4 py-6">
                   <div className="w-full max-w-md">
                     <QuestionRenderer
                       activeQuestionId={activeQuestionId}
@@ -498,7 +498,7 @@ function ResetProgressButton({ resetQuestionProgress }) {
   return (
     <Button
       variant="minimal"
-      className="py-0.2 bg-white mr-2 px-2 text-sm text-slate-500 font-sans"
+      className="py-0.2 mr-2 bg-white px-2 font-sans text-sm text-slate-500"
       onClick={resetQuestionProgress}>
       Restart
       <ArrowPathRoundedSquareIcon className="ml-2 h-4 w-4" />

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/CTASummary.tsx

@@ -28,7 +28,7 @@ export default function CTASummary({ questionSummary }: CTASummaryProps) {
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="text-lg pb-1 font-semibold text-slate-900 md:text-xl">
+          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
             {questionSummary.question.headline}
           </h3>
         </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/NPSSummary.tsx

@@ -76,7 +76,7 @@ export default function NPSSummary({ questionSummary }: NPSSummaryProps) {
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="text-lg pb-1 font-semibold text-slate-900 md:text-xl">
+          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
             {questionSummary.question.headline}
           </h3>
         </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/OpenTextSummary.tsx

@@ -20,7 +20,7 @@ export default function OpenTextSummary({ questionSummary, environmentId }: Open
     <div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="text-lg pb-1 font-semibold text-slate-900 md:text-xl">
+          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
             {questionSummary.question.headline}
           </h3>
         </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/RatingSummary.tsx

@@ -77,7 +77,7 @@ export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="text-lg pb-1 font-semibold text-slate-900 md:text-xl">
+          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
             {questionSummary.question.headline}
           </h3>
         </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/HowToSendCard.tsx

@@ -94,9 +94,7 @@ export default function HowToSendCard({ localSurvey, setLocalSurvey, environment
           </div>
           <div>
             <p className="font-semibold text-slate-800">How to ask</p>
-            <p className="mt-1 text-sm text-slate-500">
-              In-app survey, link survey or email survey.
-            </p>
+            <p className="mt-1 text-sm text-slate-500">In-app survey, link survey or email survey.</p>
           </div>
         </div>
       </Collapsible.CollapsibleTrigger>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/QuestionsSettingsTabs.tsx

@@ -27,7 +27,7 @@ interface QuestionsAudienceTabsProps {
 
 export default function QuestionsAudienceTabs({ activeId, setActiveId }: QuestionsAudienceTabsProps) {
   return (
-    <div className="fixed z-10 flex h-14 md:w-1/2 w-full items-center justify-center border bg-white">
+    <div className="fixed z-10 flex h-14 w-full items-center justify-center border bg-white md:w-1/2">
       <nav className="flex h-full items-center space-x-4" aria-label="Tabs">
         {tabs.map((tab) => (
           <button

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/RecontactOptionsCard.tsx

@@ -100,9 +100,7 @@ export default function RecontactOptionsCard({
           </div>
           <div>
             <p className="font-semibold text-slate-800">Recontact Options</p>
-            <p className="mt-1 text-sm text-slate-500">
-              Decide how often people can answer this survey.
-            </p>
+            <p className="mt-1 text-sm text-slate-500">Decide how often people can answer this survey.</p>
           </div>
           {localSurvey.type === "link" && (
             <div className="flex w-full items-center justify-end pr-2">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/ResponseOptionsCard.tsx

@@ -151,9 +151,7 @@ export default function ResponseOptionsCard({ localSurvey, setLocalSurvey }: Res
           </div>
           <div>
             <p className="font-semibold text-slate-800">Response Options</p>
-            <p className="mt-1 text-sm text-slate-500">
-              Decide how and how long people can respond.
-            </p>
+            <p className="mt-1 text-sm text-slate-500">Decide how and how long people can respond.</p>
           </div>
         </div>
       </Collapsible.CollapsibleTrigger>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx

@@ -142,9 +142,7 @@ export default function WhenToSendCard({ environmentId, localSurvey, setLocalSur
 
             <div>
               <p className="font-semibold text-slate-800">Survey Trigger</p>
-              <p className="mt-1 text-sm text-slate-500">
-                Choose the actions which trigger the survey.
-              </p>
+              <p className="mt-1 text-sm text-slate-500">Choose the actions which trigger the survey.</p>
             </div>
             {localSurvey.type === "link" && (
               <div className="flex w-full items-center justify-end pr-2">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/WhoToSendCard.tsx

@@ -106,9 +106,7 @@ export default function WhoToSendCard({ environmentId, localSurvey, setLocalSurv
             </div>
             <div>
               <p className="font-semibold text-slate-800">Target Audience</p>
-              <p className="mt-1 text-sm text-slate-500">
-                Pre-segment your users with attributes filters.
-              </p>
+              <p className="mt-1 text-sm text-slate-500">Pre-segment your users with attributes filters.</p>
             </div>
             {localSurvey.type === "link" && (
               <div className="flex w-full items-center justify-end pr-2">

apps/web/app/s/[surveyId]/page.tsx

@@ -8,8 +8,10 @@ import { getProductByEnvironmentId } from "@formbricks/lib/services/product";
 import SurveyInactive from "@/app/s/[surveyId]/SurveyInactive";
 
 export default async function LinkSurveyPage({ params }) {
-
-  const [survey, product] = await Promise.all([getSurvey(params.surveyId), getProductByEnvironmentId(params.environmentId)]);
+  const [survey, product] = await Promise.all([
+    getSurvey(params.surveyId),
+    getProductByEnvironmentId(params.environmentId),
+  ]);
 
   if (survey && survey.status !== "inProgress") {
     return <SurveyInactive status={survey.status} surveyClosedMessage={survey.surveyClosedMessage} />;

packages/js/src/components/CTAQuestion.tsx

@@ -31,9 +31,7 @@ export default function CTAQuestion({
       <HtmlBody htmlString={question.html} questionId={question.id} />
 
       <div className="fb-mt-4 fb-flex fb-w-full fb-justify-between">
-        <div>
-          {goToPreviousQuestion && <BackButton onClick={() => goToPreviousQuestion()} />}
-        </div>
+        <div>{goToPreviousQuestion && <BackButton onClick={() => goToPreviousQuestion()} />}</div>
         <div className="fb-flex fb-justify-end">
           {(!question.required || storedResponseValue) && (
             <button