bugfix widget init error, fix widget dark mode colors

packages/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formbricks/js",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",

packages/js/src/components/MultipleChoiceSingleQuestion.tsx

@@ -42,7 +42,7 @@ export default function MultipleChoiceSingleQuestion({
                   key={choice.id}
                   className={cn(
                     selectedChoice === choice.label
-                      ? "fb-z-10 border-slate-400 bg-slate-50"
+                      ? "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"
                   )}>
@@ -52,7 +52,7 @@ export default function MultipleChoiceSingleQuestion({
                       id={choice.id}
                       name={question.id}
                       value={choice.label}
-                      className="fb-h-4 fb-w-4 fb-border fb-border-gray-300 focus:fb-ring-0 focus:fb-ring-offset-0"
+                      className="fb-h-4 fb-w-4 fb-border fb-border-slate-300 fb-accent-slate-800 fb-bg-white focus:fb-ring-0 focus:fb-ring-offset-0"
                       aria-labelledby={`${choice.id}-label`}
                       onChange={(e) => {
                         setSelectedChoice(e.currentTarget.value);

packages/js/src/components/OpenTextQuestion.tsx

@@ -36,13 +36,13 @@ export default function OpenTextQuestion({
           id={question.id}
           placeholder={question.placeholder}
           required={question.required}
-          className="fb-block fb-w-full fb-rounded-md fb-border fb-p-2 fb-shadow-sm focus:fb-ring-0 sm:fb-text-sm border-slate-100 bg-slate-50 focus:border-slate-500"></textarea>
+          className="fb-block fb-w-full fb-rounded-md fb-border fb-p-2 fb-shadow-sm focus:fb-ring-0 sm:fb-text-sm fb-bg-slate-50 fb-border-slate-100 focus:fb-border-slate-500"></textarea>
       </div>
       <div className="fb-mt-4 fb-flex fb-w-full fb-justify-between">
         <div></div>
         <button
           type="submit"
-          className="fb-flex fb-items-center fb-rounded-md fb-border fb-border-transparent fb-px-3 fb-py-3 fb-text-base fb-font-medium fb-leading-4 fb-text-white fb-shadow-sm hover:fb-opacity-90 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 focus:ring-slate-500"
+          className="fb-flex fb-items-center fb-rounded-md fb-border fb-border-transparent fb-px-3 fb-py-3 fb-text-base fb-font-medium fb-leading-4 fb-text-white fb-shadow-sm hover:fb-opacity-90 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 focus:fb-ring-slate-500"
           style={{ backgroundColor: brandColor }}>
           {question.buttonLabel || (lastQuestion ? "Finish" : "Next")}
         </button>

packages/js/src/lib/config.ts

@@ -1,52 +1,5 @@
 import { JsConfig } from "@formbricks/types/js";
 
-/* class Config {
-  private static instance: Config;
-  private config: JsConfig;
-
-  private constructor() {
-    this.config = this.loadFromLocalStorage();
-  }
-
-  public static getInstance(): Config {
-    if (!Config.instance) {
-      Config.instance = new Config();
-    }
-    return Config.instance;
-  }
-
-  public get(): JsConfig {
-    return this.config;
-  }
-
-  public update(newConfig: Partial<JsConfig>): void {
-    this.config = {
-      ...this.config,
-      ...newConfig,
-    };
-    this.saveToLocalStorage();
-  }
-
-  private loadFromLocalStorage(): JsConfig {
-    if (typeof window !== "undefined") {
-      const savedConfig = localStorage.getItem("config");
-      if (savedConfig) {
-        return JSON.parse(savedConfig);
-      }
-    }
-    return {
-      apiHost: null,
-      environmentId: null,
-    };
-  }
-
-  private saveToLocalStorage(): void {
-    localStorage.setItem("config", JSON.stringify(this.config));
-  }
-}
-
-export default Config.getInstance(); */
-
 export class Config {
   private static instance: Config | undefined;
   private config: JsConfig = this.loadFromLocalStorage();

packages/js/src/lib/init.ts

@@ -43,12 +43,14 @@ export const initialize = async (c: InitConfig): Promise<void> => {
     const { person, session, settings } = await createPerson();
     config.update({ person, session: extendSession(session), settings });
     trackEvent("New Session");
-  }
-  if (isExpired(config.get().session)) {
+  } else if (config.get().session && isExpired(config.get().session)) {
     // we need new session
     const { session, settings } = await createSession();
     config.update({ session: extendSession(session), settings });
     trackEvent("New Session");
+  } else if (!config.get().session) {
+    logger.error("Formbricks: Unable to initialize. No session found");
+    return;
   }
   addSessionEventListeners();
   addPageUrlEventListeners();

packages/js/src/lib/storage.ts

@@ -1,26 +0,0 @@
-import { JsConfig } from "@formbricks/types/js";
-import { Logger } from "./logger";
-
-const logger = Logger.getInstance();
-
-// retrieve config from local storage
-export const retrieve = (): JsConfig => {
-  logger.debug("Retrieving config from local storage");
-  const configData = localStorage.getItem("formbricks__config");
-  if (!configData) {
-    logger.debug("No config found in local storage");
-    return null;
-  }
-  logger.debug("Config found in local storage");
-  return JSON.parse(configData) as JsConfig;
-};
-
-// save config to local storage
-export const persistConfig = (config: JsConfig): void => {
-  localStorage.setItem("formbricks__config", JSON.stringify(config));
-};
-
-// remove config from local storage
-export const removeConfig = (): void => {
-  localStorage.removeItem("formbricks__config");
-};

packages/js/tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   important: "#fbjs",
+  darkMode: "class",
   corePlugins: {
     preflight: false,
   },