@zohoim/chat-components 0.0.11 → 0.0.14

package/es/Theme/themeVariables/light/greenTheme.js

@@ -0,0 +1,63 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white } from './commonColorVariable';
+import { imIntegrationIcon } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#f2faf5',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#f2faf5',
+      border_color: '#bee5c6'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#26a942',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubble: {
+      bg_color: white,
+      border_color: '#ebf0f5'
+    },
+    replyBubbleContent: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: white
+    },
+    locationBubble: {
+      bg_color: white,
+      color: primaryGreen,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
+    },
+    imTicketLink: {
+      color: primaryGreen
+    },
+    textBubble: {
+      see_more_color: primaryGreen,
+      url_color: primaryGreen
+    },
+    imMessageMeta: {
+      timeColor: '#5a616f'
+    }
+  }
+};

package/es/Theme/themeVariables/light/orangeTheme.js

@@ -0,0 +1,61 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white } from './commonColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#fdf5ef',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#fdf5ef',
+      border_color: '#f7d6b9'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e57717',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubble: {
+      bg_color: white,
+      border_color: '#ebf0f5'
+    },
+    replyBubbleContent: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: white
+    },
+    locationBubble: {
+      bg_color: white,
+      color: primaryOrange,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
+    },
+    imTicketLink: {
+      color: primaryOrange
+    },
+    textBubble: {
+      see_more_color: primaryOrange,
+      url_color: primaryOrange
+    },
+    imMessageMeta: {
+      timeColor: '#5a616f'
+    }
+  }
+};

package/es/Theme/themeVariables/light/redTheme.js

@@ -0,0 +1,61 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white } from './commonColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#fdf3f3',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#fdf3f3',
+      border_color: '#f8d7d7'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#de3535',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubble: {
+      bg_color: white,
+      border_color: '#ebf0f5'
+    },
+    replyBubbleContent: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: white
+    },
+    locationBubble: {
+      bg_color: white,
+      color: primaryRed,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
+    },
+    imTicketLink: {
+      color: primaryRed
+    },
+    textBubble: {
+      see_more_color: primaryRed,
+      url_color: primaryRed
+    },
+    imMessageMeta: {
+      timeColor: '#5a616f'
+    }
+  }
+};

package/es/Theme/themeVariables/light/yellowTheme.js

@@ -0,0 +1,63 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white } from './commonColorVariable';
+import { imIntegrationIcon } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#fdf8e9',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#fdf8e9',
+      border_color: '#f6e3a7'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#b68c07',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubble: {
+      bg_color: white,
+      border_color: '#ebf0f5'
+    },
+    replyBubbleContent: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: white
+    },
+    locationBubble: {
+      bg_color: white,
+      color: primaryYellow,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
+    },
+    imTicketLink: {
+      color: primaryYellow
+    },
+    textBubble: {
+      see_more_color: primaryYellow,
+      url_color: primaryYellow
+    },
+    imMessageMeta: {
+      timeColor: '#5a616f'
+    }
+  }
+};

package/es/Theme/themeVariables/pureDark/blueTheme.js

@@ -0,0 +1,68 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#252d37',
+      border_color: '#2c4664'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      border_color: '#161515'
+    },
+    imTicketLink: {
+      color: '#479dff'
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryBlue,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    imMessageMeta: {
+      timeColor: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryBlue,
+      url_color: primaryBlue
+    }
+  }
+};

package/es/Theme/themeVariables/pureDark/commonColorVariable.js

@@ -0,0 +1,12 @@
+export const incomingBubbleBgColor = '#2e2e2e';
+export const outgoingBubbleBgColor = '#2e2e2e';
+export const bubbleActiveBgColor = '#202821';
+export const actionIconWrapperColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const messagetextColor = '#e2e4e6';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';

package/es/Theme/themeVariables/pureDark/greenTheme.js

@@ -0,0 +1,67 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#252e27',
+      border_color: '#2c4732'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#45a159',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      border_color: '#161515'
+    },
+    imTicketLink: {
+      color: '#45a159'
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryGreen,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    imMessageMeta: {
+      timeColor: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryGreen,
+      url_color: primaryGreen
+    }
+  }
+};

package/es/Theme/themeVariables/pureDark/orangeTheme.js

@@ -0,0 +1,67 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#312821',
+      border_color: '#4d3421'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      border_color: '#161515'
+    },
+    imTicketLink: {
+      color: '#ff801f'
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryOrange,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    imMessageMeta: {
+      timeColor: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryOrange,
+      url_color: primaryOrange
+    }
+  }
+};

package/es/Theme/themeVariables/pureDark/redTheme.js

@@ -0,0 +1,67 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2f2424',
+      border_color: '#492A29'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      border_color: '#161515'
+    },
+    imTicketLink: {
+      color: '#e94f4f'
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryRed,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    imMessageMeta: {
+      timeColor: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryRed,
+      url_color: primaryRed
+    }
+  }
+};

package/es/Theme/themeVariables/pureDark/yellowTheme.js

@@ -0,0 +1,67 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2e2922',
+      border_color: '#453925'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#d79835',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      border_color: '#161515'
+    },
+    imTicketLink: {
+      color: '#d79835'
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryYellow,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    imMessageMeta: {
+      timeColor: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryYellow,
+      url_color: primaryYellow
+    }
+  }
+};

package/es/Theme/utils/combineConfigurations.js

@@ -0,0 +1,17 @@
+import flatVariables from './flatVariables';
+export default function combineConfigurations(configurations) {
+  const configs = configurations.map(configuration => ({
+    library: configuration.library,
+    variables: flatVariables(configuration.variables)
+  }));
+  const mergeObject = configs.reduce((res, next) => {
+    if (!res[next.library]) {
+      res[next.library] = next;
+      return res;
+    }
+
+    Object.assign(res[next.library].variables, next.variables);
+    return res;
+  }, {});
+  return Object.keys(mergeObject).map(key => mergeObject[key]);
+}

package/es/Theme/utils/flatVariables.js

@@ -0,0 +1,12 @@
+export default function flatVariables(obj) {
+  let jointStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_';
+  return Object.keys(obj).reduce((res, component) => Object.assign(res, Object.keys(obj[component]).reduce((res, variable) => {
+    if (component === '') {
+      res[`${variable}`] = obj[component][variable];
+    } else {
+      res[`${component}${jointStr}${variable}`] = obj[component][variable];
+    }
+
+    return res;
+  }, {})), {});
+}

package/es/Theme/utils/getCustomizedCssVariables.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-param-reassign */
+
+/** ** Methods *** */
+import combineConfigurations from './combineConfigurations';
+export default function getCustomizedCssVariables(cssVariableConfigs) {
+  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '--lib_';
+  const newConfiguration = combineConfigurations(cssVariableConfigs);
+  return newConfiguration.reduce((result, config) => {
+    Object.keys(config.variables).forEach(variable => {
+      // eslint-disable-next-line no-param-reassign
+      if (config.library === '') {
+        result += `${prefix}${variable}:${config.variables[variable]}; \n`;
+      } else {
+        result += `${prefix}${config.library}_${variable}:${config.variables[variable]}; \n`;
+      }
+    });
+    return result;
+  }, '\n');
+}