mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-04 10:30:00 -06:00
Code Issues Packages Projects Releases 123 Wiki Activity

Fix formbricks-js labels not showing correctly with custom label styles, add dark mode to demo app

Browse Source 
Fix formbricks-js labels not showing correctly with custom label styles, add dark mode to demo app
This commit is contained in:
Johannes
2023-08-09 17:51:20 +02:00
committed by GitHub
parent a3aae4ab95 9f944249fc
commit 10e149bb02
7 changed files with 77 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
apps/demo/pages/app/index.tsx
View File

@@ -1,53 +1,76 @@
import fbsetup from "../../public/fb-setup.png";
import formbricks from "@formbricks/js";
import Image from "next/image";
import { useEffect, useState } from "react";
import fbsetup from "../../public/fb-setup.png";
export default function AppPage({}) {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
if (darkMode) {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
}, [darkMode]);
return (
<div className="px-12 py-6">
<div>
<h1 className="text-2xl font-bold">Formbricks In-product Survey Demo App</h1>
<p className="text-slate-700">
This app helps you test your in-app surveys. You can create an test user actions, create and update
user attributes, etc.
</p>
<div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
<div className="flex justify-between">
<div>
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
Formbricks In-product Survey Demo App
</h1>
<p className="text-slate-700 dark:text-slate-300">
This app helps you test your in-app surveys. You can create and test user actions, create and
update user attributes, etc.
</p>
</div>
<button
className="rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
onClick={() => setDarkMode(!darkMode)}>
Toggle Dark Mode
</button>
</div>
<div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<div className="rounded-lg border border-slate-300 bg-slate-100 p-6">
<h3 className="text-lg font-semibold">Setup .env</h3>
<p className="text-slate-700">
<div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">Setup .env</h3>
<p className="text-slate-700 dark:text-slate-300">
Copy the environment ID of your Formbricks app to the env variable in demo/.env
</p>
<Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
</div>
<div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6">
<h3 className="text-lg font-semibold">Widget Logs</h3>
<p className="text-slate-700">
Look at the logs to understand how the widget works. <strong>Open your browser console</strong>{" "}
to see the logs.
<div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">Widget Logs</h3>
<p className="text-slate-700 dark:text-slate-300">
Look at the logs to understand how the widget works.{" "}
<strong className="dark:text-white">Open your browser console</strong> to see the logs.
</p>
{/* <div className="max-h-[40vh] overflow-y-auto py-4">
{/* <div className="max-h-[40vh] overflow-y-auto py-4">
<LogsContainer />
</div> */}
</div>
</div>
<div className="md:grid md:grid-cols-3">
<div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6">
<h3 className="text-lg font-semibold">Reset person / pull data from Formbricks app</h3>
<p className="text-slate-700">
<div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-gray-600 dark:bg-gray-800">
<h3 className="text-lg font-semibold dark:text-white">
Reset person / pull data from Formbricks app
</h3>
<p className="text-slate-700 dark:text-gray-300">
On formbricks.logout() a few things happen: <strong>New person is created</strong> and{" "}
<strong>surveys & no-code actions are pulled from Formbricks:</strong>.
</p>
<button
className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700"
className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
onClick={() => {
formbricks.logout();
}}>
Logout
</button>
<p className="text-xs text-slate-700">
<p className="text-xs text-slate-700 dark:text-gray-300">
If you made a change in Formbricks app and it does not seem to work, hit &apos;Logout&apos; and
try again.
</p>
@@ -56,7 +79,7 @@ export default function 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"
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
onClick={() => {
formbricks.track("Code Action");
}}>
@@ -64,7 +87,7 @@ export default function AppPage({}) {
</button>
</div>
<div>
<p className="text-xs text-slate-700">
<p className="text-xs text-slate-700 dark:text-gray-300">
This button sends a{" "}
<a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
Code Action
@@ -75,18 +98,24 @@ export default function AppPage({}) {
</div>
<div className="p-6">
<div>
<button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
<button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600">
No-Code Action
</button>
</div>
<div>
<p className="text-xs text-slate-700">
<p className="text-xs text-slate-700 dark:text-gray-300">
This button sends a{" "}
<a href="https://formbricks.com/docs/actions/no-code" className="underline" target="_blank">
<a
href="https://formbricks.com/docs/actions/no-code"
className="underline dark:text-blue-500"
target="_blank">
No Code Action
</a>{" "}
as long as you created it beforehand in the Formbricks App.{" "}
<a href="https://formbricks.com/docs/actions/no-code" target="_blank" className="underline">
<a
href="https://formbricks.com/docs/actions/no-code"
target="_blank"
className="underline dark:text-blue-500">
Here are instructions on how to do it.
</a>
</p>
@@ -98,17 +127,17 @@ export default function AppPage({}) {
onClick={() => {
formbricks.setAttribute("Plan", "Free");
}}
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600">
Set Plan to &apos;Free&apos;
</button>
</div>
<div>
<p className="text-xs text-slate-700">
<p className="text-xs text-slate-700 dark:text-gray-300">
This button sets the{" "}
<a
href="https://formbricks.com/docs/attributes/custom-attributes"
target="_blank"
className="underline">
className="underline dark:text-blue-500">
attribute
</a>{" "}
&apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
@@ -121,17 +150,17 @@ export default function AppPage({}) {
onClick={() => {
formbricks.setAttribute("Plan", "Paid");
}}
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600">
Set Plan to &apos;Paid&apos;
</button>
</div>
<div>
<p className="text-xs text-slate-700">
<p className="text-xs text-slate-700 dark:text-gray-300">
This button sets the{" "}
<a
href="https://formbricks.com/docs/attributes/custom-attributes"
target="_blank"
className="underline">
className="underline dark:text-blue-500">
attribute
</a>{" "}
&apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
@@ -144,17 +173,17 @@ export default function AppPage({}) {
onClick={() => {
formbricks.setEmail("test@web.com");
}}
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600">
Set Email
</button>
</div>
<div>
<p className="text-xs text-slate-700">
<p className="text-xs text-slate-700 dark:text-gray-300">
This button sets the{" "}
<a
href="https://formbricks.com/docs/attributes/identify-users"
target="_blank"
className="underline">
className="underline dark:text-blue-500">
user email
</a>{" "}
&apos;test@web.com&apos;
@@ -167,17 +196,17 @@ export default function AppPage({}) {
onClick={() => {
formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
}}
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600">
Set User ID
</button>
</div>
<div>
<p className="text-xs text-slate-700">
<p className="text-xs text-slate-700 dark:text-gray-300">
This button sets an external{" "}
<a
href="https://formbricks.com/docs/attributes/identify-users"
target="_blank"
className="underline">
className="underline dark:text-blue-500">
user ID
</a>{" "}
to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;

1
apps/demo/tailwind.config.js
View File

@@ -5,6 +5,7 @@ module.exports = {
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {},
},

2
packages/js/src/components/ConsentQuestion.tsx
View File

@@ -59,7 +59,7 @@ export default function ConsentQuestion({
e.preventDefault();
handleSumbit(answer);
}}>
<label className="fb-relative fb-z-10 fb-mt-4 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-rounded-md fb-border fb-border-gray-200 fb-bg-slate-50 fb-p-4 fb-text-sm focus:fb-outline-none">
<label className="fb-relative fb-z-10 fb-mt-4 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-rounded-md fb-border fb-border-gray-200 fb-bg-slate-50 fb-p-4 fb-text-sm focus:fb-outline-none fb-text-slate-800">
<input
type="checkbox"
id={question.id}

2
packages/js/src/components/MultipleChoiceMultiQuestion.tsx
View File

@@ -126,7 +126,7 @@ export default function MultipleChoiceMultiQuestion({
selectedChoices.includes(choice.label)
? "fb-z-10 fb-border-slate-400 fb-bg-slate-50"
: "fb-border-gray-200",
"fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-space-y-3 fb-rounded-md fb-border fb-p-4 hover:fb-bg-slate-50 focus:fb-outline-none"
"fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-space-y-3 fb-rounded-md fb-border fb-p-4 hover:fb-bg-slate-50 focus:fb-outline-none fb-text-slate-800"
)}>
<span className="fb-flex fb-items-center fb-text-sm">
<input

2
packages/js/src/components/MultipleChoiceSingleQuestion.tsx
View File

@@ -109,7 +109,7 @@ export default function MultipleChoiceSingleQuestion({
selectedChoice === choice.label
? "fb-z-10 fb-bg-slate-50 fb-border-slate-400"
: "fb-border-gray-200",
"fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50"
"fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50 fb-text-slate-800"
)}>
<span className="fb-flex fb-items-center fb-text-sm">
<input

2
packages/js/src/components/NPSQuestion.tsx
View File

@@ -72,7 +72,7 @@ export default function NPSQuestion({
key={number}
className={cn(
selectedChoice === number ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50" : "",
"fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-border fb-bg-white fb-text-center fb-text-sm fb-leading-10 first:fb-rounded-l-md last:fb-rounded-r-md hover:fb-bg-gray-100 focus:fb-outline-none"
"fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-border fb-bg-white fb-text-center fb-text-sm fb-leading-10 first:fb-rounded-l-md last:fb-rounded-r-md hover:fb-bg-gray-100 focus:fb-outline-none fb-text-slate-800"
)}>
<input
type="radio"

6
packages/js/src/components/RatingQuestion.tsx
View File

@@ -105,7 +105,7 @@ export default function RatingQuestion({
selectedChoice === number ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50" : "",
a.length === number ? "fb-rounded-r-md" : "",
number === 1 ? "fb-rounded-l-md" : "",
"fb-block fb-h-full fb-w-full fb-border hover:fb-bg-gray-100 focus:fb-outline-none"
"fb-block fb-h-full fb-w-full fb-border hover:fb-bg-gray-100 focus:fb-outline-none fb-text-slate-800"
)}>
<HiddenRadioInput number={number} />
{number}
@@ -148,7 +148,7 @@ export default function RatingQuestion({
)}
</label>
) : (
<label className="fb-flex fb-h-full fb-w-full fb-justify-center">
<label className="fb-flex fb-h-full fb-w-full fb-justify-center fb-text-slate-800">
<HiddenRadioInput number={number} />
<RatingSmiley
active={selectedChoice == number || hoveredNumber == number}
@@ -160,7 +160,7 @@ export default function RatingQuestion({
</span>
))}
</div>
<div className="fb-flex fb-justify-between fb-text-slate-500 fb-leading-6 fb-px-1.5 fb-text-xs">
<div className="fb-flex fb-justify-between fb-text-slate-500 fb-leading-6 fb-px-1.5 fb-text-xs">
<p>{question.lowerLabel}</p>
<p>{question.upperLabel}</p>
</div>