From ced7b2aa2cdc238090c82e9708701ee7b129cc18 Mon Sep 17 00:00:00 2001 From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com> Date: Wed, 8 Jan 2025 10:59:35 +0530 Subject: [PATCH] chore: adds vercel style guide linting in demo app (#4557) Co-authored-by: pandeymangg --- apps/demo/.eslintrc.js | 6 +- .../{LayoutApp.tsx => layout-app.tsx} | 6 +- .../components/{Sidebar.tsx => sidebar.tsx} | 4 +- apps/demo/lib/utils.ts | 4 +- apps/demo/pages/_app.tsx | 6 +- apps/demo/pages/_document.tsx | 6 +- apps/demo/pages/index.tsx | 115 +++++++++++------- turbo.json | 3 + 8 files changed, 87 insertions(+), 63 deletions(-) rename apps/demo/components/{LayoutApp.tsx => layout-app.tsx} (68%) rename apps/demo/components/{Sidebar.tsx => sidebar.tsx} (97%) diff --git a/apps/demo/.eslintrc.js b/apps/demo/.eslintrc.js index 64a6e29852..63c8f7518e 100644 --- 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, + }, }; diff --git a/apps/demo/components/LayoutApp.tsx b/apps/demo/components/layout-app.tsx similarity index 68% rename from apps/demo/components/LayoutApp.tsx rename to apps/demo/components/layout-app.tsx index d32aed289e..57703154a4 100644 --- a/apps/demo/components/LayoutApp.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 (
{/* Static sidebar for desktop */} @@ -10,4 +10,4 @@ export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
{children}
); -}; +} diff --git a/apps/demo/components/Sidebar.tsx b/apps/demo/components/sidebar.tsx similarity index 97% rename from apps/demo/components/Sidebar.tsx rename to apps/demo/components/sidebar.tsx index 153c9ec4a3..be9f3cd8ed 100644 --- 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 (
); -}; +} diff --git a/apps/demo/lib/utils.ts b/apps/demo/lib/utils.ts index e514240df6..24e25d3d0e 100644 --- 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(" "); -}; +} diff --git a/apps/demo/pages/_app.tsx b/apps/demo/pages/_app.tsx index e21509444b..e2ba74a494 100644 --- 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 ( <> @@ -17,6 +17,4 @@ const App = ({ Component, pageProps }: AppProps) => { ); -}; - -export default App; +} diff --git a/apps/demo/pages/_document.tsx b/apps/demo/pages/_document.tsx index a25dcfc607..3a10b97bee 100644 --- 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 ( @@ -10,6 +10,4 @@ const Document = () => { ); -}; - -export default Document; +} diff --git a/apps/demo/pages/index.tsx b/apps/demo/pages/index.tsx index 72d41886d9..a984ee45ef 100644 --- 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 = ({}) => { @@ -96,8 +108,8 @@ const AppPage = ({}) => { {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID} - - + + @@ -122,8 +134,9 @@ const AppPage = ({}) => {

@@ -135,7 +148,9 @@ const AppPage = ({}) => {
-
@@ -144,6 +159,7 @@ const AppPage = ({}) => { This button sends a{" "} No Code Action @@ -151,6 +167,7 @@ const AppPage = ({}) => { as long as you created it beforehand in the Formbricks App.{" "} Here are instructions on how to do it. @@ -161,8 +178,9 @@ const AppPage = ({}) => {
); -}; - -export default AppPage; +} diff --git a/turbo.json b/turbo.json index b67dba2b27..1b943fea2f 100644 --- 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/**"]