chore: added shadcn button (formbricks#4392)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Dhruwang · Dec 4, 2024 · 4d7cc26 · 4d7cc26
1 parent c72ce9b
commit 4d7cc26
Show file tree

Hide file tree

Showing 136 changed files with 13,363 additions and 16,915 deletions.
diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import "@formbricks/web/modules/ui/globals.css";
+import "../../web/modules/ui/globals.css";
 
 const preview: Preview = {
   parameters: {

diff --git a/...p)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks.tsx b/...p)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks.tsx
@@ -85,12 +85,12 @@ export const ConnectWithFormbricks = ({
       </div>
       <Button
         id="finishOnboarding"
-        variant={widgetSetupCompleted ? "primary" : "minimal"}
-        onClick={handleFinishOnboarding}
-        EndIcon={ArrowRight}>
+        variant={widgetSetupCompleted ? "default" : "ghost"}
+        onClick={handleFinishOnboarding}>
         {widgetSetupCompleted
           ? t("environments.connect.finish_onboarding")
           : t("environments.connect.i_dont_know_how_to_do_it")}
+        <ArrowRight />
       </Button>
     </div>
   );

diff --git a/...(onboarding)/environments/[environmentId]/connect/components/InviteOrganizationMember.tsx b/...(onboarding)/environments/[environmentId]/connect/components/InviteOrganizationMember.tsx
@@ -108,7 +108,7 @@ export const InviteOrganizationMember = ({ organization, environmentId }: Invite
               <Button
                 id="onboarding-inapp-invite-have-a-look-first"
                 className="text-slate-400"
-                variant="minimal"
+                variant="ghost"
                 onClick={(e) => {
                   e.preventDefault();
                   finishOnboarding();

diff --git a/...boarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx b/...boarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx
@@ -5,6 +5,7 @@ import { CodeBlock } from "@/modules/ui/components/code-block";
 import { Html5Icon, NpmIcon } from "@/modules/ui/components/icons";
 import { TabBar } from "@/modules/ui/components/tab-bar";
 import { useTranslations } from "next-intl";
+import Link from "next/link";
 import "prismjs/themes/prism.css";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -115,13 +116,10 @@ export const OnboardingSetupInstructions = ({
             <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
               {channel === "app" ? npmSnippetForAppSurveys : npmSnippetForWebsiteSurveys}
             </CodeBlock>
-            <Button
-              id="onboarding-inapp-connect-read-npm-docs"
-              className="mt-3"
-              variant="secondary"
-              href={`https://formbricks.com/docs/${channel}-surveys/framework-guides`}
-              target="_blank">
-              {t("common.read_docs")}
+            <Button id="onboarding-inapp-connect-read-npm-docs" className="mt-3" variant="secondary" asChild>
+              <Link href={`https://formbricks.com/docs/${channel}-surveys/framework-guides`} target="_blank">
+                {t("common.read_docs")}
+              </Link>
             </Button>
           </div>
         ) : activeTab === "html" ? (
@@ -138,7 +136,7 @@ export const OnboardingSetupInstructions = ({
             <div className="mt-4 flex justify-between space-x-2">
               <Button
                 id="onboarding-inapp-connect-copy-code"
-                variant={widgetSetupCompleted ? "secondary" : "primary"}
+                variant={widgetSetupCompleted ? "secondary" : "default"}
                 onClick={() => {
                   navigator.clipboard.writeText(
                     channel === "app" ? htmlSnippetForAppSurveys : htmlSnippetForWebsiteSurveys
@@ -147,12 +145,13 @@ export const OnboardingSetupInstructions = ({
                 }}>
                 {t("common.copy_code")}
               </Button>
-              <Button
-                id="onboarding-inapp-connect-step-by-step-manual"
-                variant="secondary"
-                href={`https://formbricks.com/docs/${channel}-surveys/framework-guides#html`}
-                target="_blank">
-                {t("common.step_by_step_manual")}
+
+              <Button id="onboarding-inapp-connect-step-by-step-manual" variant="secondary" asChild>
+                <Link
+                  href={`https://formbricks.com/docs/${channel}-surveys/framework-guides#html`}
+                  target="_blank">
+                  {t("common.step_by_step_manual")}
+                </Link>
               </Button>
             </div>
           </div>

diff --git a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/invite/page.tsx b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/invite/page.tsx
@@ -5,6 +5,7 @@ import { Header } from "@/modules/ui/components/header";
 import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import { getTranslations } from "next-intl/server";
+import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
 import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
 import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
@@ -45,9 +46,11 @@ const Page = async (props: InvitePageProps) => {
       <InviteOrganizationMember organization={organization} environmentId={params.environmentId} />
       <Button
         className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
-        variant="minimal"
-        href={`/environments/${params.environmentId}/`}>
-        <XIcon className="h-7 w-7" strokeWidth={1.5} />
+        variant="ghost"
+        asChild>
+        <Link href={`/environments/${params.environmentId}`}>
+          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+        </Link>
       </Button>
     </div>
   );

diff --git a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx
@@ -3,6 +3,7 @@ import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 import { XIcon } from "lucide-react";
 import { getTranslations } from "next-intl/server";
+import Link from "next/link";
 import { WEBAPP_URL } from "@formbricks/lib/constants";
 import { getEnvironment } from "@formbricks/lib/environment/service";
 import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
@@ -44,9 +45,11 @@ const Page = async (props: ConnectPageProps) => {
       />
       <Button
         className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
-        variant="minimal"
-        href={`/environments/${environment.id}/`}>
-        <XIcon className="h-7 w-7" strokeWidth={1.5} />
+        variant="ghost"
+        asChild>
+        <Link href={`/environments/${environment.id}`}>
+          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+        </Link>
       </Button>
     </div>
   );

diff --git a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx
@@ -6,6 +6,7 @@ import { Header } from "@/modules/ui/components/header";
 import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import { getTranslations } from "next-intl/server";
+import Link from "next/link";
 import { getEnvironment } from "@formbricks/lib/environment/service";
 import { getProjectByEnvironmentId, getUserProjects } from "@formbricks/lib/project/service";
 import { getUser } from "@formbricks/lib/user/service";
@@ -49,9 +50,11 @@ const Page = async (props: XMTemplatePageProps) => {
       {projects.length >= 2 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
-          variant="minimal"
-          href={`/environments/${environment.id}/surveys`}>
-          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          variant="ghost"
+          asChild>
+          <Link href={`/environments/${environment.id}/surveys`}>
+            <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          </Link>
         </Button>
       )}
     </div>

diff --git a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx
@@ -5,6 +5,7 @@ import { Header } from "@/modules/ui/components/header";
 import { GlobeIcon, GlobeLockIcon, LinkIcon, XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import { getTranslations } from "next-intl/server";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getUserProjects } from "@formbricks/lib/project/service";
 
@@ -59,9 +60,11 @@ const Page = async (props: ChannelPageProps) => {
       {projects.length >= 1 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
-          variant="minimal"
-          href={"/"}>
-          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          variant="ghost"
+          asChild>
+          <Link href={"/"}>
+            <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          </Link>
         </Button>
       )}
     </div>

diff --git a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/mode/page.tsx b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/mode/page.tsx
@@ -5,6 +5,7 @@ import { Header } from "@/modules/ui/components/header";
 import { HeartIcon, ListTodoIcon, XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import { getTranslations } from "next-intl/server";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getUserProjects } from "@formbricks/lib/project/service";
 
@@ -46,9 +47,11 @@ const Page = async (props: ModePageProps) => {
       {projects.length >= 1 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
-          variant="minimal"
-          href={"/"}>
-          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          variant="ghost"
+          asChild>
+          <Link href={"/"}>
+            <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          </Link>
         </Button>
       )}
     </div>

diff --git a/.../web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/page.tsx b/.../web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/page.tsx
@@ -8,6 +8,7 @@ import { Header } from "@/modules/ui/components/header";
 import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import { getTranslations } from "next-intl/server";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { DEFAULT_BRAND_COLOR, DEFAULT_LOCALE } from "@formbricks/lib/constants";
 import { getOrganization } from "@formbricks/lib/organization/service";
@@ -83,9 +84,11 @@ const Page = async (props: ProjectSettingsPageProps) => {
       {projects.length >= 1 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
-          variant="minimal"
-          href={"/"}>
-          <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          variant="ghost"
+          asChild>
+          <Link href={"/"}>
+            <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          </Link>
         </Button>
       )}
     </div>

diff --git a/...tor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx b/...tor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
@@ -190,9 +190,9 @@ export function ConditionalLogic({
           name="logicJumps"
           size="sm"
           variant="secondary"
-          EndIcon={PlusIcon}
           onClick={addLogic}>
           {t("environments.surveys.edit.add_logic")}
+          <PlusIcon />
         </Button>
       </div>
     </div>

diff --git a/...r)/environments/[environmentId]/surveys/[surveyId]/edit/components/CreateNewActionTab.tsx b/...r)/environments/[environmentId]/surveys/[surveyId]/edit/components/CreateNewActionTab.tsx
@@ -254,7 +254,7 @@ export const CreateNewActionTab = ({
           </div>
           <div className="flex justify-end pt-6">
             <div className="flex space-x-2">
-              <Button type="button" variant="minimal" onClick={resetAllStates}>
+              <Button type="button" variant="ghost" onClick={resetAllStates}>
                 {t("common.cancel")}
               </Button>
               <Button type="submit" loading={isSubmitting}>

diff --git a/...ditor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx b/...ditor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx
@@ -11,6 +11,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { TooltipRenderer } from "@/modules/ui/components/tooltip";
 import { createId } from "@paralleldrive/cuid2";
 import { ArrowDownIcon, ArrowUpIcon, CopyIcon, EllipsisIcon, TrashIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -142,58 +143,62 @@ export const EditorCardMenu = ({
 
   return (
     <div className="flex">
-      <Button
-        variant="minimal"
-        size="icon"
-        StartIcon={ArrowUpIcon}
-        tooltip={t("common.move_up")}
-        disabled={cardIdx === 0}
-        onClick={(e) => {
-          if (cardIdx !== 0) {
+      <TooltipRenderer tooltipContent={t("common.move_up")}>
+        <Button
+          variant="ghost"
+          size="icon"
+          disabled={cardIdx === 0}
+          onClick={(e) => {
+            if (cardIdx !== 0) {
+              e.stopPropagation();
+              moveCard(cardIdx, true);
+            }
+          }}
+          className="disabled:border-none">
+          <ArrowUpIcon />
+        </Button>
+      </TooltipRenderer>
+      <TooltipRenderer tooltipContent={t("common.move_down")} triggerClass="disabled:border-none">
+        <Button
+          variant="ghost"
+          size="icon"
+          disabled={lastCard}
+          onClick={(e) => {
+            if (!lastCard) {
+              e.stopPropagation();
+              moveCard(cardIdx, false);
+            }
+          }}
+          className="disabled:border-none">
+          <ArrowDownIcon />
+        </Button>
+      </TooltipRenderer>
+      <TooltipRenderer tooltipContent={t("common.duplicate")} triggerClass="disabled:border-none">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={(e) => {
             e.stopPropagation();
-            moveCard(cardIdx, true);
-          }
-        }}
-        className="disabled:border-none"
-      />
-      <Button
-        variant="minimal"
-        size="icon"
-        StartIcon={ArrowDownIcon}
-        tooltip={t("common.move_down")}
-        disabled={lastCard}
-        onClick={(e) => {
-          if (!lastCard) {
+            duplicateCard(cardIdx);
+          }}
+          className="disabled:border-none">
+          <CopyIcon />
+        </Button>
+      </TooltipRenderer>
+      <TooltipRenderer tooltipContent={t("common.delete")} triggerClass="disabled:border-none">
+        <Button
+          variant="ghost"
+          size="icon"
+          disabled={isDeleteDisabled}
+          onClick={(e) => {
             e.stopPropagation();
-            moveCard(cardIdx, false);
-          }
-        }}
-        className="disabled:border-none"
-      />
-      <Button
-        variant="minimal"
-        size="icon"
-        StartIcon={CopyIcon}
-        tooltip={t("common.duplicate")}
-        onClick={(e) => {
-          e.stopPropagation();
-          duplicateCard(cardIdx);
-        }}
-        className="disabled:border-none"
-      />
-      <Button
-        variant="minimal"
-        size="icon"
-        StartIcon={TrashIcon}
-        tooltip={t("common.delete")}
-        disabled={isDeleteDisabled}
-        onClick={(e) => {
-          e.stopPropagation();
-          if (isDeleteDisabled) return;
-          deleteCard(cardIdx);
-        }}
-        className="disabled:border-none"
-      />
+            if (isDeleteDisabled) return;
+            deleteCard(cardIdx);
+          }}
+          className="disabled:border-none">
+          <TrashIcon />
+        </Button>
+      </TooltipRenderer>
       <DropdownMenu>
         <DropdownMenuTrigger className="h-10 w-10 rounded-lg border border-transparent p-2 hover:border-slate-200">
           <EllipsisIcon className="mx-auto h-4 w-4 text-slate-700 hover:text-slate-600" />

diff --git a/...nvironments/[environmentId]/surveys/[surveyId]/edit/components/FileUploadQuestionForm.tsx b/...nvironments/[environmentId]/surveys/[surveyId]/edit/components/FileUploadQuestionForm.tsx
@@ -257,7 +257,7 @@ export const FileUploadQuestionForm = ({
                     <p className="text-sm text-slate-800">{item}</p>
                     <Button
                       className="inline-flex px-0"
-                      variant="minimal"
+                      variant="ghost"
                       onClick={(e) => removeExtension(e, index)}>
                       <XCircleIcon className="h-4 w-4" />
                     </Button>

diff --git a/...)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx b/...)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
@@ -140,10 +140,10 @@ export const FormStylingSettings = ({
               type="button"
               variant="secondary"
               size="sm"
-              EndIcon={SparklesIcon}
               className="w-fit"
               onClick={() => suggestColors()}>
               {t("environments.surveys.edit.suggest_colors")}
+              <SparklesIcon />
             </Button>
           </div>