@bigbinary/neeto-molecules 1.0.54 → 1.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -56,6 +56,7 @@
     "@bigbinary/neetoui": "^5.0.9",
     "@faker-js/faker": "7.6.0",
     "@honeybadger-io/react": "2.0.1",
+    "@rails/activestorage": "^7.0.5",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.0",
@@ -103,6 +104,7 @@
     "eslint-plugin-react-hooks": "4.5.0",
     "eslint-plugin-unused-imports": "2.0.0",
     "formik": "^2.2.9",
+    "framer-motion": "^4.1.17",
     "husky": "^7.0.4",
     "i18next": "^22.5.1",
     "ip-num": "^1.5.0",
@@ -129,6 +131,7 @@
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "17.0.2",
+    "react-dropzone": "^11.2.4",
     "react-helmet": "^6.1.0",
     "react-hotkeys-hook": "3.3.2",
     "react-i18next": "^12.3.1",

package/src/translations/en.json

@@ -8,6 +8,7 @@
         "save": "Save",
         "edit": "Edit",
         "delete": "Delete",
+        "apply": "Apply",
         "add": "Add {{entity}}",
         "editTitle": "Edit {{entity}}",
         "addNew": "Add new {{entity}}",
@@ -29,12 +30,11 @@
       },
       "status": "status",
       "deleteAlert": {
-        "title": "Delete {{entity}}?",
-        "yes": "Yes, delete",
-        "no": "No, cancel"
+        "title": "Delete {{entity}}?"
       },
       "download": "Download",
-      "filter": "Filter"
+      "filter": "Filter",
+      "somethingWentWrong": "Something went wrong. Please try again."
     },
     "columns": {
       "columns": "Columns",
@@ -191,7 +191,7 @@
         "dnsStatus": "<p>Typically, it will take 2 hours to 24 hours for the new custom domain to start working.</p><br><p> An email will be sent when the custom domain starts working.</p><br>If, after 24 hours, your custom domain is still not working, then please send an email to ",
         "cnameAddedTime": " You added CNAME records {{time}}"
       },
-      "alertMessage": "You're about to delete the custom domain <strong>{{hostname}}</strong>. This action will permanently delete the domain and <strong>{{hostname}}</strong> will no longer point to your default domain.",
+      "alertMessage": "You are permanently deleting the custom domain <strong>{{hostname}}</strong> and will no longer point to your default domain.  This can't be undone.",
       "formikValidation": {
         "required": "Custom domain is required",
         "valid": "Please add valid custom domain"
@@ -272,7 +272,8 @@
       "ipStart": "IP start",
       "ipEnd": "IP end",
       "actions": "Actions",
-      "allowedIpRangeConfirmation": "Confirm deletion of IP range {{ipStart}} to {{ipEnd}}. This can't be undone.",
+      "allowedIpRangeConfirmationTitle": "allowed IP range",
+      "allowedIpRangeConfirmation": "You are permanently deleting IP range <strong>{{ipStart}}</strong> to <strong>{{ipEnd}}</strong>. This can't be undone.",
       "validations": {
         "invalidIp": "Invalid IP address format",
         "ipEndGreaterThanIpStart": "IP end should be greater than or equal to IP start",
@@ -396,6 +397,66 @@
         "noResults": "No results",
         "removeButton": "Remove"
       }
+    },
+    "themeSidebar": {
+      "theme_one": "theme",
+      "theme_other": "themes",
+      "active": "Active",
+      "defaultThemeName": "My theme",
+      "addNewTheme": "Add new theme",
+      "deleteTheme": "Are you sure you want to delete this theme?",
+      "searchThemes": "Search themes",
+      "systemThemes": "System themes",
+      "customThemes": "Custom themes",
+      "customThemesList": {},
+      "systemThemesList": {},
+      "backToThemes": "Back to themes",
+      "name": "Name",
+      "thankYouTextAlignment": "Thank you text alignment",
+      "welcomeTextAlignment": "Welcome text alignment",
+      "questionsTextAlignment": "Questions text alignment",
+      "backgroundOverlay": "Background overlay",
+      "enableDominantBackgroundColor": "Enable dominant background color",
+      "backgroundPosition": "Background position",
+      "backgroundColor": "Background color",
+      "enableContentBackground": "Enable content background",
+      "formBackgroundColor": "Form background color",
+      "backgroundImage": "Background image",
+      "buttonBorderRadius": "Button border radius",
+      "buttonText": "Button text",
+      "buttons": "Buttons",
+      "answerColor": "Answer color",
+      "questions": "Questions",
+      "font": "Font",
+      "left": "Left",
+      "style": "Style",
+      "fileRequirements": "Only .jpeg, .jpg, .png, .svg and .gif files are supported. Maximum allowed file size {{maxSize}}MB.",
+      "logoPosition": "Logo position",
+      "logo": "Logo",
+      "themeOptions": {
+        "clone": "Clone",
+        "delete": "Delete"
+      },
+      "themeCard": {
+        "question": "Question",
+        "answer": "Answer"
+      },
+      "editTheme": {
+        "title": "Edit theme",
+        "imageUpload": "Drag and drop or <span>Browse</span> a file"
+      },
+      "createTheme": {
+        "title": "New theme"
+      },
+      "alignmentOptions": {
+        "left": "Left align",
+        "center": "Center align"
+      },
+      "error": {
+        "somethingWentWrong": "Something went wrong. Please try again.",
+        "fileSizeLimitExceeded": "Your file is larger than {{maxSizeInReadableUnits}}. Please try again with a smaller file.",
+        "fileTypeError": "Please upload a file with one of the following file types: {{acceptedTypes}}."
+      }
     }
   }
 }

package/types/BrowserSupport.d.ts

@@ -5,9 +5,17 @@ type VersionLimits = {
 };
 /**
  *
- * A wrapper that displays a callout message for partially supported browsers (below a soft limit) along with the site content. If the browser is an unsupported version (below a hard limit), it shows a full-page message to update the browser and does not display the site content. If the browser is in the list of unsupported browsers, it displays
+ * A wrapper that displays a callout message for partially supported browsers
  *
- * a full-page message that the browser is unsupported and does not display the site content.
+ * (below a soft limit) along with the site content. If the browser is an
+ *
+ * unsupported version (below a hard limit), it shows a full-page message to update
+ *
+ * the browser and does not display the site content. If the browser is in the list
+ *
+ * of unsupported browsers, it displays a full-page message that the browser is
+ *
+ * unsupported and does not display the site content.
  *
  * @example 
  *
@@ -52,9 +60,9 @@ type VersionLimits = {
  *
  * The default unsupported browsers are given below:
  *
- * Any other browser which is not in the above lists will be considered as
+ * Any other browser which is not in the above lists will be considered as unknown
  *
- * unknown and a corresponding callout will be shown.
+ * and a corresponding callout will be shown.
  *
 */
 const BrowserSupport: React.FC<{

package/types/CustomDomain.d.ts

@@ -1,16 +1,15 @@
 import React from "react";
 /**
  *
- * A common component for managing custom domain. This component can be used when you have a single custom domain.
+ * A common component for managing custom domain. This component can be used when
+ *
+ * you have a single custom domain.
  *
  * @example 
  *
  * import CustomDomain from "@bigbinary/neeto-molecules/CustomDomain";
  * 
- * <CustomDomain
- *   url="api/v1/admin/custom_domain"
- *   iconOnly
- * />;
+ * <CustomDomain url="api/v1/admin/custom_domain" iconOnly />;
  * @endexample
 */
 const CustomDomain: React.FC<{

package/types/CustomDomainDashboard.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 /**
  *
- * A full page common component for managing custom domains. This component can be used when you have multiple associated custom domains.
+ * A full page common component for managing custom domains. This component can be
+ *
+ * used when you have multiple associated custom domains.
  *
  * @example 
  *

package/types/IconPicker.d.ts

@@ -1,11 +1,17 @@
 import React from "react";
 /**
  *
- * A dropdown component that allows you to select an icon from a list of Google icons.
+ * A dropdown component that allows you to select an icon from a list of
+ *
+ * Google icons.
  *
  * ![image](https://user-images.githubusercontent.com/35304653/243669467-148585f0-5499-4914-ba84-4284bda8e2d8.png|height=200|width=300)
  *
- * We make use of a feature called ligatures that convert the snake cased name of an icon to an actual icon. It is achieved like so. Note that the classname "material-symbols-rounded" is necessary for this conversion to work.
+ * We make use of a feature called ligatures that convert the snake cased name of
+ *
+ * an icon to an actual icon. It is achieved like so. Note that the classname
+ *
+ * "material-symbols-rounded" is necessary for this conversion to work.
  *
  * @example 
  *

package/types/IntegrationDisconnectAlert.d.ts

@@ -17,8 +17,8 @@ import React from "react";
  *     <IntegrationDisconnectAlert
  *       isOpen={isOpen}
  *       isDisconnecting={isDisconnecting}
- *       title="Disconnect Slack integration"
- *       message="This will disconnect the slack integration"
+ *       title="Disconnect Slack"
+ *       message="You will be disconnected from Slack."
  *       onClose={() => setIsOpen(false)}
  *       onDisconnect={() => console.log("Disconnect the integration")}
  *     />

package/types/themeSidebar.d.ts

@@ -0,0 +1,76 @@
+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;
+}
+/**
+ *
+ *  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) => void;
+  deleteTheme: (value: Theme) => void;
+  editTheme: (value: Theme) => void;
+  applyTheme: (value: Theme) => void;
+  isLoadingThemes: boolean;
+}>;
+export default ThemeSidebar;