@bigbinary/neeto-molecules 0.0.1

package/types/themeSidebar.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+interface ColorScheme {
+  backgroundColor: string;
+  questionColor: string;
+  buttonBackgroundColor: string;
+  buttonTextColor: string;
+  answerColor: string;
+  answerTextColor: string;
+}
+;
+interface BackgroundImage {
+  url: string;
+  dominantColor: string;
+  backgroundColor: string;
+  backgroundOverlayOpacity: number;
+  backgroundPosition: string;
+  isDominantBackgroundColorEnabled: boolean;
+}
+interface FontOptions {
+  fontFamily: string;
+}
+interface ButtonOptions {
+  buttonBorderRadius: number;
+}
+interface Layout {
+  isContentBackgroundEnabled: boolean;
+  contentBackgroundColor: string;
+  welcomeTextAlignment: string;
+  thankYouTextAlignment: string;
+  questionsTextAlignment: string;
+  logo: {
+    url: string;
+    size: number;
+  };
+}
+interface Theme {
+  name: string;
+  colorScheme: ColorScheme;
+  backgroundImage: BackgroundImage;
+  fontOptions: FontOptions;
+  buttonOptions: ButtonOptions;
+  layout: Layout;
+}
+type CreateThemeCallback = (createdTheme: Theme) => void;
+/**
+ *
+ * ThemeSidebar allows us to configure the themes of entities like forms, quizzes
+ *
+ * and knowledge bases.
+ *
+ * @example 
+ *
+ * import ThemeSidebar from "@bigbinary/neeto-molecules/ThemeSidebar";
+ * 
+ * const ThemesSidebarDemo = () => (
+ *   <ThemeSidebar
+ *     defaultThemes={defaultThemes}
+ *     customThemes={customThemes}
+ *     currentTheme={currentTheme}
+ *     createTheme={createTheme}
+ *     deleteTheme={deleteTheme}
+ *     editTheme={editTheme}
+ *     applyTheme={applyTheme}
+ *     isLoadingThemes={isLoadingThemes}
+ *   />
+ * );
+ * @endexample
+*/
+const ThemeSidebar: React.FC<{
+  defaultThemes: Theme[];
+  customThemes: Theme[];
+  currentTheme: Theme;
+  createTheme: (value: Theme, createThemeCallback: CreateThemeCallback) => void;
+  deleteTheme: (value: Theme) => void;
+  editTheme: (value: Theme) => void;
+  applyTheme: (value: Theme) => void;
+  isLoadingThemes: boolean;
+  applyingThemeId?: string;
+}>;
+export default ThemeSidebar;