chore: adds vercel style guide linting in demo app (#4557)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
2026-01-07 00:40:10 -06:00 · 2025-01-08 10:59:35 +05:30
parent 6aa473c316
commit ced7b2aa2c
8 changed files with 87 additions and 63 deletions
--- a/apps/demo/.eslintrc.js
+++ b/apps/demo/.eslintrc.js
@@ -1,3 +1,7 @@
 module.exports = {
-  extends: ["@formbricks/eslint-config/legacy-next.js"],
+  extends: ["@formbricks/eslint-config/next.js"],
+  parserOptions: {
+    project: "tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
 };
--- a/apps/demo/components/layout-app.tsx
+++ b/apps/demo/components/layout-app.tsx
@@ -1,6 +1,6 @@
-import { Sidebar } from "./Sidebar";
+import { Sidebar } from "./sidebar";

-export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
+export function LayoutApp({ children }: { children: React.ReactNode }): React.JSX.Element {
  return (
    <div className="min-h-full">
      {/* Static sidebar for desktop */}
@@ -10,4 +10,4 @@ export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
      <div className="flex flex-1 flex-col lg:pl-64">{children}</div>
    </div>
  );
-};
+}
--- a/apps/demo/components/sidebar.tsx
+++ b/apps/demo/components/sidebar.tsx
@@ -25,7 +25,7 @@ const secondaryNavigation = [
  { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];

-export const Sidebar = () => {
+export function Sidebar(): React.JSX.Element {
  return (
    <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
      <nav
@@ -62,4 +62,4 @@ export const Sidebar = () => {
      </nav>
    </div>
  );
-};
+}
--- a/apps/demo/lib/utils.ts
+++ b/apps/demo/lib/utils.ts
@@ -1,3 +1,3 @@
-export const classNames = (...classes: any) => {
+export function classNames(...classes: string[]): string {
  return classes.filter(Boolean).join(" ");
-};
+}
--- a/apps/demo/pages/_app.tsx
+++ b/apps/demo/pages/_app.tsx
@@ -2,7 +2,7 @@ import type { AppProps } from "next/app";
 import Head from "next/head";
 import "../globals.css";

-const App = ({ Component, pageProps }: AppProps) => {
+export default function App({ Component, pageProps }: AppProps): React.JSX.Element {
  return (
    <>
      <Head>
@@ -17,6 +17,4 @@ const App = ({ Component, pageProps }: AppProps) => {
      <Component {...pageProps} />
    </>
  );
-};
-
-export default App;
+}
--- a/apps/demo/pages/_document.tsx
+++ b/apps/demo/pages/_document.tsx
@@ -1,6 +1,6 @@
 import { Head, Html, Main, NextScript } from "next/document";

-const Document = () => {
+export default function Document(): React.JSX.Element {
  return (
    <Html lang="en" className="h-full bg-slate-50">
      <Head />
@@ -10,6 +10,4 @@ const Document = () => {
      </body>
    </Html>
  );
-};
-
-export default Document;
+}
--- a/apps/demo/pages/index.tsx
+++ b/apps/demo/pages/index.tsx
@@ -4,9 +4,9 @@ import { useEffect, useState } from "react";
 import formbricks from "@formbricks/js";
 import fbsetup from "../public/fb-setup.png";

-declare const window: any;
+declare const window: Window;

-const AppPage = ({}) => {
+export default function AppPage(): React.JSX.Element {
  const [darkMode, setDarkMode] = useState(false);
  const router = useRouter();

@@ -19,43 +19,52 @@ const AppPage = ({}) => {
  }, [darkMode]);

  useEffect(() => {
-    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
-    const addFormbricksDebugParam = () => {
-      const urlParams = new URLSearchParams(window.location.search);
-      if (!urlParams.has("formbricksDebug")) {
-        urlParams.set("formbricksDebug", "true");
-        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-        window.history.replaceState({}, "", newUrl);
+    const initFormbricks = () => {
+      // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
+      const addFormbricksDebugParam = (): void => {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (!urlParams.has("formbricksDebug")) {
+          urlParams.set("formbricksDebug", "true");
+          const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+          window.history.replaceState({}, "", newUrl);
+        }
+      };
+
+      addFormbricksDebugParam();
+
+      if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+        const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
+        const userInitAttributes = {
+          language: "de",
+          "Init Attribute 1": "eight",
+          "Init Attribute 2": "two",
+        };
+
+        void formbricks.init({
+          environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
+          apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
+          userId,
+          attributes: userInitAttributes,
+        });
+      }
+
+      // Connect next.js router to Formbricks
+      if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+        const handleRouteChange = formbricks.registerRouteChange;
+
+        router.events.on("routeChangeComplete", () => {
+          void handleRouteChange();
+        });
+
+        return () => {
+          router.events.off("routeChangeComplete", () => {
+            void handleRouteChange();
+          });
+        };
      }
    };

-    addFormbricksDebugParam();
-
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
-      const userInitAttributes = {
-        language: "de",
-        "Init Attribute 1": "eight",
-        "Init Attribute 2": "two",
-      };
-
-      formbricks.init({
-        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
-        userId,
-        attributes: userInitAttributes,
-      });
-    }
-
-    // Connect next.js router to Formbricks
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const handleRouteChange = formbricks?.registerRouteChange;
-      router.events.on("routeChangeComplete", handleRouteChange);
-
-      return () => {
-        router.events.off("routeChangeComplete", handleRouteChange);
-      };
-    }
+    initFormbricks();
  }, [router.events]);

  return (
@@ -74,8 +83,11 @@ const AppPage = ({}) => {
        </div>

        <button
+          type="button"
          className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
-          onClick={() => setDarkMode(!darkMode)}>
+          onClick={() => {
+            setDarkMode(!darkMode);
+          }}>
          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
        </button>
      </div>
@@ -96,8 +108,8 @@ const AppPage = ({}) => {
                  {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}
                </strong>
                <span className="relative ml-2 flex h-3 w-3">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
-                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500" />
                </span>
              </div>
            </div>
@@ -122,8 +134,9 @@ const AppPage = ({}) => {
            </p>
            <button
              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+              type="button"
              onClick={() => {
-                formbricks.reset();
+                void formbricks.reset();
              }}>
              Reset
            </button>
@@ -135,7 +148,9 @@ const AppPage = ({}) => {

          <div className="p-6">
            <div>
-              <button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
+              <button
+                type="button"
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                No-Code Action
              </button>
            </div>
@@ -144,6 +159,7 @@ const AppPage = ({}) => {
                This button sends a{" "}
                <a
                  href="https://formbricks.com/docs/actions/no-code"
+                  rel="noopener noreferrer"
                  className="underline dark:text-blue-500"
                  target="_blank">
                  No Code Action
@@ -151,6 +167,7 @@ const AppPage = ({}) => {
                as long as you created it beforehand in the Formbricks App.{" "}
                <a
                  href="https://formbricks.com/docs/actions/no-code"
+                  rel="noopener noreferrer"
                  target="_blank"
                  className="underline dark:text-blue-500">
                  Here are instructions on how to do it.
@@ -161,8 +178,9 @@ const AppPage = ({}) => {
          <div className="p-6">
            <div>
              <button
+                type="button"
                onClick={() => {
-                  formbricks.setAttribute("Plan", "Free");
+                  void formbricks.setAttribute("Plan", "Free");
                }}
                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                Set Plan to &apos;Free&apos;
@@ -174,6 +192,7 @@ const AppPage = ({}) => {
                <a
                  href="https://formbricks.com/docs/attributes/custom-attributes"
                  target="_blank"
+                  rel="noopener noreferrer"
                  className="underline dark:text-blue-500">
                  attribute
                </a>{" "}
@@ -184,8 +203,9 @@ const AppPage = ({}) => {
          <div className="p-6">
            <div>
              <button
+                type="button"
                onClick={() => {
-                  formbricks.setAttribute("Plan", "Paid");
+                  void formbricks.setAttribute("Plan", "Paid");
                }}
                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                Set Plan to &apos;Paid&apos;
@@ -197,6 +217,7 @@ const AppPage = ({}) => {
                <a
                  href="https://formbricks.com/docs/attributes/custom-attributes"
                  target="_blank"
+                  rel="noopener noreferrer"
                  className="underline dark:text-blue-500">
                  attribute
                </a>{" "}
@@ -207,8 +228,9 @@ const AppPage = ({}) => {
          <div className="p-6">
            <div>
              <button
+                type="button"
                onClick={() => {
-                  formbricks.setEmail("test@web.com");
+                  void formbricks.setEmail("test@web.com");
                }}
                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                Set Email
@@ -220,6 +242,7 @@ const AppPage = ({}) => {
                <a
                  href="https://formbricks.com/docs/attributes/identify-users"
                  target="_blank"
+                  rel="noopener noreferrer"
                  className="underline dark:text-blue-500">
                  user email
                </a>{" "}
@@ -231,6 +254,4 @@ const AppPage = ({}) => {
      </div>
    </div>
  );
-};
-
-export default AppPage;
+}
--- a/turbo.json
+++ b/turbo.json
@@ -15,6 +15,9 @@
      "dependsOn": ["@formbricks/js#build"],
      "persistent": true
    },
+    "@formbricks/demo#lint": {
+      "dependsOn": ["@formbricks/js#build"]
+    },
    "@formbricks/js#build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]