sbx-crm-menu-ui 1.0.0

package/README.md

@@ -0,0 +1,30 @@
+# sbx-crm-menu-ui
+
+> Menu Create by SBX Company for CRM.
+
+[![NPM](https://img.shields.io/npm/v/sbx-crm-menu-ui.svg)](https://www.npmjs.com/package/sbx-crm-menu-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save sbx-crm-menu-ui
+```
+
+## Usage
+
+```tsx
+import React, { Component } from 'react'
+
+import MyComponent from 'sbx-crm-menu-ui'
+import 'sbx-crm-menu-ui/dist/index.css'
+
+class Example extends Component {
+  render() {
+    return <MyComponent />
+  }
+}
+```
+
+## License
+
+ISC © [Frank Carpio](https://github.com/Frank Carpio)

package/dist/components/contentMenuComponent/LanguageDropdown.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function LanguageDropdown(): React.JSX.Element;

package/dist/components/contentMenuComponent/UserInfo.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    email: string;
+    name: string;
+}
+export default function UserInfo({ name, email }: Props): React.JSX.Element;
+export {};

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function Dropdown(): React.JSX.Element;

package/dist/components/menu/TopNavBarComponent/TopNavBarComponent.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function TopNavBarComponent(): React.JSX.Element;

package/dist/components/menu/sidebar/Sidebar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SidebarComponent: () => React.JSX.Element;
+export default SidebarComponent;

package/dist/components/menu/sidebar/SidebarItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SidebarItemProps } from '../../../types/Common';
+declare const SidebarItem: ({ route }: SidebarItemProps) => React.JSX.Element;
+export default SidebarItem;

package/dist/components/menu/sidebar/subMenuComponent/SubMenuComponent.d.ts

@@ -0,0 +1,13 @@
+import { Route } from "../../../../types/Common";
+export declare const generateSubMenuData: (labels: string[]) => Route[];
+declare const subMenuDataHome: Route[];
+declare const subMenuDataAnalytics: Route[];
+declare const subMenuDataProcess: Route[];
+declare const subMenuDataForm: Route[];
+declare const subMenuDataComunications: Route[];
+declare const subMenuDataDataProviders: Route[];
+declare const subMenuData: Route[];
+declare const subMenuDataReports: Route[];
+declare const subMenuDataConfig: Route[];
+declare const subMenuDataMarketing: Route[];
+export { subMenuDataHome, subMenuData, subMenuDataComunications, subMenuDataConfig, subMenuDataDataProviders, subMenuDataForm, subMenuDataReports, subMenuDataMarketing, subMenuDataAnalytics, subMenuDataProcess, };

package/dist/index.css

@@ -0,0 +1,307 @@
+.crm-class-sidebar {
+  width: 250px;
+  height: 100%;
+  color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow-x: hidden;
+  padding-top: 20px;
+  transition: 0.5s;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+
+.crm-class-sidebar {
+  width: 320px;
+  height: 100%;
+  color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow-x: hidden;
+  padding-top: 20px;
+  transition: 0.5s;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.crm-class-sidebar-list {
+  list-style-type: none;
+  padding: 10px 20px;
+  margin: 0;
+  color: #555;
+  position: relative;
+}
+.crm-class-sidebar-list .cmr-class-tittle {
+  font-weight: bold;
+  margin-bottom: 10px;
+  display: block;
+  color: #3f6ad8;
+}
+.crm-class-sidebar-list .crm-class-sidebar-li {
+  padding: 10px 15px;
+  font-size: 16px;
+  transition: 0.3s;
+  cursor: pointer;
+  display: flex;
+}
+.crm-class-sidebar-list .crm-class-sidebar-li:hover {
+  background-color: #e0f3ff;
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+}
+
+.cmr-class-content-sub-menu-items {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.6rem;
+  padding-right: 0.4rem;
+  cursor: pointer;
+}
+.cmr-class-content-sub-menu-items:hover {
+  background-color: #e0f3ff;
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  color: #3f6ad8;
+}
+
+.crm-class-sidebar-sub-menu-list {
+  list-style-type: none;
+  padding: 10px 20px;
+  margin: 0;
+  color: #555;
+  position: relative;
+}
+.crm-class-sidebar-sub-menu-list::before {
+  content: "";
+  height: 100%;
+  opacity: 1;
+  width: 3px;
+  background: #e0f3ff;
+  position: absolute;
+  left: 20px;
+  top: 0;
+  border-radius: 15px;
+}
+
+.cmr-class-top-nav-bar {
+  background-color: white;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  flex: 1 1;
+  padding: 0 1.5rem;
+  height: 80px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 20;
+}
+
+.cmr-class-flex-container {
+  display: flex;
+  align-items: center;
+}
+
+.cmr-class-icon-container {
+  width: 60px;
+  height: 60px;
+  border: none;
+  padding: 0;
+  outline: none;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cmr-class-top-nav-bar-avatar {
+  width: 40px;
+  height: 40px;
+  border: none;
+  padding: 0;
+  outline: none;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  background: #9b6443;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.cmr-class-top-nav-bar-options {
+  display: flex;
+  margin-left: auto;
+}
+
+.cmr-class-dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.cmr-class-top-nav-bar-info-user {
+  display: flex;
+  flex-direction: column;
+}
+
+.cmr-class-dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 12px 16px;
+  z-index: 1;
+}
+
+.cmr-class-cursor-pointer {
+  cursor: pointer;
+}
+
+.cmr-class-font-10 {
+  font-size: 10px;
+}
+
+.cmr-class-slate-gray {
+  color: #495057;
+}
+
+.cmr-class-ml-20 {
+  margin-left: 20px;
+}
+
+.cmr-class-mr-10 {
+  margin-right: 10px;
+}
+
+.cmr-class-color-icon {
+  color: #495057;
+}
+
+.cmr-class-ml-auto {
+  margin-left: auto;
+}
+
+.cmr-class-list-none {
+  list-style-type: none;
+}
+
+.cmr-class-font-bold {
+  font-weight: 900;
+}
+
+.cmr-class-mt-70 {
+  margin-top: 70px;
+}
+
+.cmr-class-mr-20 {
+  margin-right: 20px;
+}
+
+/*/*/
+.cmr-class-content-flag {
+  width: 55px;
+  height: 55px;
+  border: none;
+  padding: 0;
+  outline: none;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cmr-class-flag {
+  display: inline-block;
+  width: 20px;
+  height: 15px;
+  background-size: cover;
+}
+
+.cmr-class-flag.large {
+  width: 30px;
+  height: 20px;
+}
+
+.cmr-class-flag.US {
+  background-image: url("https://flagcdn.com/w20/us.png");
+}
+
+.cmr-class-flag.ES {
+  background-image: url("https://flagcdn.com/w20/es.png");
+}
+
+.cmr-class-flag.NL {
+  background-image: url("https://flagcdn.com/w20/nl.png");
+}
+
+.cmr-class-dropdown-flag {
+  position: relative;
+}
+
+.cmr-class-dropdown-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 10px;
+}
+
+.cmr-class-dropdown-menu {
+  display: none;
+  position: absolute;
+  background-color: white;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  padding: 12px 16px;
+  z-index: 1;
+  min-width: 200px;
+}
+
+.cmr-class-dropdown-menu .cmr-class-dropdown-header {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.cmr-class-dropdown-flag:hover .cmr-class-dropdown-menu {
+  display: block;
+}
+
+.cmr-class-dropdown-item {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  width: 100%;
+  text-align: left;
+}
+
+.cmr-class-selected-language {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  justify-content: center;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import TopNavBarComponent from './components/menu/TopNavBarComponent/TopNavBarComponent';
+import SidebarComponent from './components/menu/sidebar/Sidebar';
+import './styles.module.scss';
+export { TopNavBarComponent, SidebarComponent };

package/dist/index.js

@@ -0,0 +1,264 @@
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var React = require('react');
+var React__default = _interopDefault(React);
+var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
+
+function Dropdown() {
+  var _useState = React.useState(false),
+    isDropdownOpen = _useState[0],
+    setIsDropdownOpen = _useState[1];
+  var toggleDropdown = function toggleDropdown() {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+  return React__default.createElement("div", {
+    className: "cmr-class-dropdown cmr-class-mr-20",
+    onClick: toggleDropdown
+  }, React__default.createElement("span", {
+    className: "cmr-class-top-nav-bar-avatar"
+  }, "A"), React__default.createElement("span", {
+    className: "cmr-class-ml-20"
+  }, React__default.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: isDropdownOpen ? freeSolidSvgIcons.faChevronUp : freeSolidSvgIcons.faChevronDown,
+    className: "cmr-class-color-icon cmr-class-slate-gray"
+  })), isDropdownOpen && React__default.createElement("div", {
+    className: "cmr-class-dropdown-content"
+  }, React__default.createElement("p", null, "Dropdown content here")));
+}
+
+function UserInfo(_ref) {
+  var name = _ref.name,
+    email = _ref.email;
+  return React__default.createElement("div", {
+    className: "cmr-class-top-nav-bar-info-user"
+  }, React__default.createElement("span", {
+    className: "cmr-class-font-bold"
+  }, name, " "), React__default.createElement("span", null, email));
+}
+
+var languages = [{
+  code: "EN",
+  label: "English",
+  flag: "US"
+}, {
+  code: "ES",
+  label: "Español",
+  flag: "ES"
+}, {
+  code: 'NL',
+  label: 'Nederlands',
+  flag: 'NL'
+}];
+function LanguageDropdown() {
+  var _useState = React.useState(languages[0]),
+    selectedLanguage = _useState[0],
+    setSelectedLanguage = _useState[1];
+  var handleLanguageChange = function handleLanguageChange(language) {
+    setSelectedLanguage(language);
+  };
+  return React__default.createElement("div", {
+    className: "cmr-class-dropdown-flag cmr-class-mr-20"
+  }, React__default.createElement("span", {
+    className: "cmr-class-content-flag"
+  }, React__default.createElement("span", {
+    className: "cmr-class-flag large " + selectedLanguage.flag
+  })), React__default.createElement("div", {
+    className: "cmr-class-dropdown-menu"
+  }, React__default.createElement("button", {
+    className: "cmr-class-dropdown-toggle",
+    type: "button"
+  }, "Choose Language"), React__default.createElement("h6", {
+    className: "cmr-class-dropdown-header"
+  }, "Popular Languages"), languages.map(function (language) {
+    return React__default.createElement("button", {
+      key: language.code,
+      type: "button",
+      className: "cmr-class-dropdown-item ",
+      onClick: function onClick() {
+        return handleLanguageChange(language);
+      }
+    }, React__default.createElement("span", {
+      className: " opacity-8 cmr-class-flag large  cmr-class-mr-20 " + language.flag
+    }), language.code);
+  })));
+}
+
+function TopNavBarComponent() {
+  return React__default.createElement("div", {
+    className: "cmr-class-top-nav-bar"
+  }, React__default.createElement("div", {
+    className: "cmr-class-flex-container"
+  }, React__default.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faBars,
+    color: "#3f6ad8",
+    size: "2x",
+    className: "cmr-class-mr-20 cmr-class-cursor-pointer"
+  }), React__default.createElement("div", {
+    className: "cmr-class-flex-container"
+  }, React__default.createElement("div", {
+    className: "cmr-class-icon-container cmr-class-mr-20"
+  }, React__default.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faSearch,
+    color: "#3f6ad8",
+    className: "",
+    size: "2x"
+  })), React__default.createElement("img", {
+    src: "https://sbxcloud.com/www/ibuyflowers/prod/test/images/logo-ibuyflowers.svg",
+    style: {
+      height: '40px'
+    },
+    alt: ""
+  }))), React__default.createElement("div", {
+    className: "cmr-class-top-nav-bar-options"
+  }, React__default.createElement(LanguageDropdown, null), React__default.createElement(Dropdown, null), React__default.createElement(UserInfo, {
+    name: "Admin Chilco",
+    email: "box+admin.chilco@socobox.co"
+  })));
+}
+
+function uuidV4() {
+  return ("" + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
+    return (((c ^ crypto.getRandomValues(new Uint8Array(1))[0]) & 15) >> c / 4).toString(16);
+  });
+}
+
+var SidebarItem = function SidebarItem(_ref) {
+  var route = _ref.route;
+  var icon = route.icon,
+    label = route.label,
+    subRoutes = route.subRoutes,
+    className = route.className;
+  var _useState = React.useState(false),
+    isSubMenuOpen = _useState[0],
+    setIsSubMenuOpen = _useState[1];
+  var toggleSubMenu = function toggleSubMenu() {
+    setIsSubMenuOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("li", {
+    className: "crm-class-sidebar-li " + (className != null ? className : ''),
+    onClick: toggleSubMenu
+  }, icon && icon, React__default.createElement("span", {
+    className: (isSubMenuOpen ? 'cmr-class-font-bold' : '') + "  "
+  }, label), (subRoutes === null || subRoutes === void 0 ? void 0 : subRoutes.length) > 0 && React__default.createElement("span", {
+    className: "cmr-class-ml-auto"
+  }, React__default.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: isSubMenuOpen ? freeSolidSvgIcons.faChevronUp : freeSolidSvgIcons.faChevronDown,
+    className: "cmr-class-color-icon cmr-class-font-10 cmr-class-slate-gray"
+  }))), isSubMenuOpen && (subRoutes === null || subRoutes === void 0 ? void 0 : subRoutes.length) > 0 && React__default.createElement("ul", {
+    className: "crm-class-sidebar-sub-menu-list"
+  }, subRoutes === null || subRoutes === void 0 ? void 0 : subRoutes.map(function (item) {
+    return React__default.createElement(SidebarItem, {
+      key: uuidV4(),
+      route: item
+    });
+  })));
+};
+
+var generateSubMenuData = function generateSubMenuData(labels) {
+  return labels.map(function (label) {
+    return {
+      label: label,
+      className: "cmr-class-ml-20"
+    };
+  });
+};
+var subMenuDataHome = generateSubMenuData(["Dashboard", "Accounts", "My Tasks", "Web designer"]);
+var subMenuDataAnalytics = generateSubMenuData(["Customer Cohorts", "Product group", "Marketing UTM", "Customer growth", "Customer events", "Claims", "Products sold", "Available Inventory", "Purchase by re order", "Most sold Varieties", "Search terms"]);
+var subMenuDataProcess = generateSubMenuData(["Project manager", "Project list", "Launch process"]);
+var subMenuDataForm = generateSubMenuData(["Form list"]);
+var subMenuDataComunications = generateSubMenuData(["Email Blast", "Template Generator"]);
+var subMenuDataDataProviders = generateSubMenuData(["Data providers"]);
+var subMenuData = generateSubMenuData(["Search Engine", "CMS"]);
+var subMenuDataReports = generateSubMenuData(["Crm reports", "Report generator"]);
+var subMenuDataConfig = generateSubMenuData(["App", "Manage users", "Permissions assignment", "Groups manager", "Crm executions"]);
+var subMenuDataMarketing = generateSubMenuData(["Conversion Rate by Page"]);
+
+var generateRoute = function generateRoute(label, icon, subRoutes) {
+  if (subRoutes === void 0) {
+    subRoutes = [];
+  }
+  return {
+    label: label,
+    visible: true,
+    enable: true,
+    icon: React__default.createElement("span", {
+      className: "cmr-class-color-icon cmr-class-mr-10"
+    }, icon && React__default.createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: icon,
+      className: "cmr-class-color-icon"
+    })),
+    action: function action() {},
+    subRoutes: subRoutes.map(function (subRoute) {
+      return generateRoute(subRoute.label, subRoute.icon, subRoute.subRoutes || []);
+    })
+  };
+};
+var generateRoutes = function generateRoutes(routesData) {
+  return routesData.map(function (routeData) {
+    return generateRoute(routeData.label, routeData === null || routeData === void 0 ? void 0 : routeData.icon, routeData.subRoutes);
+  });
+};
+var SidebarComponent = function SidebarComponent() {
+  var routesData = [{
+    label: 'Home',
+    icon: freeRegularSvgIcons.faGem,
+    subRoutes: subMenuDataHome
+  }, {
+    label: 'Analytics',
+    icon: freeSolidSvgIcons.faShip,
+    subRoutes: subMenuDataAnalytics
+  }, {
+    label: 'Process',
+    icon: freeRegularSvgIcons.faHourglass,
+    subRoutes: subMenuDataProcess
+  }, {
+    label: 'Forms',
+    icon: freeSolidSvgIcons.faWallet,
+    subRoutes: subMenuDataForm
+  }, {
+    label: 'Communications',
+    icon: freeSolidSvgIcons.faHeadphones,
+    subRoutes: subMenuDataComunications
+  }, {
+    label: 'Data providers',
+    icon: freeSolidSvgIcons.faDatabase,
+    subRoutes: subMenuDataDataProviders
+  }, {
+    label: 'Data',
+    icon: freeSolidSvgIcons.faCloudDownloadAlt,
+    subRoutes: subMenuData
+  }, {
+    label: 'Reports',
+    icon: freeSolidSvgIcons.faCog,
+    subRoutes: subMenuDataReports
+  }, {
+    label: 'Config',
+    icon: freeRegularSvgIcons.faGem,
+    subRoutes: subMenuDataConfig
+  }, {
+    label: 'Marketing',
+    icon: freeSolidSvgIcons.faBullhorn,
+    subRoutes: subMenuDataMarketing
+  }];
+  var routes = generateRoutes(routesData);
+  return React__default.createElement("div", {
+    className: "crm-class-sidebar"
+  }, React__default.createElement("ul", {
+    className: "crm-class-sidebar-list cmr-class-mt-70"
+  }, React__default.createElement("span", {
+    className: "cmr-class-tittle"
+  }, "MENU"), routes.map(function (route, index) {
+    return React__default.createElement(SidebarItem, {
+      key: "route_" + index,
+      route: route
+    });
+  })));
+};
+
+exports.SidebarComponent = SidebarComponent;
+exports.TopNavBarComponent = TopNavBarComponent;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/dropdown/Dropdown.tsx","../src/components/contentMenuComponent/UserInfo.tsx","../src/components/contentMenuComponent/LanguageDropdown.tsx","../src/components/menu/TopNavBarComponent/TopNavBarComponent.tsx","../src/utils/utils.ts","../src/components/menu/sidebar/SidebarItem.tsx","../src/components/menu/sidebar/subMenuComponent/SubMenuComponent.tsx","../src/components/menu/sidebar/Sidebar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';\n\nexport default function Dropdown() {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const toggleDropdown = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  return (\n    <div className=\"cmr-class-dropdown cmr-class-mr-20\" onClick={toggleDropdown}>\n      <span className=\"cmr-class-top-nav-bar-avatar\">A</span>\n      <span className=\"cmr-class-ml-20\">\n        <FontAwesomeIcon\n          icon={isDropdownOpen ? faChevronUp : faChevronDown}\n          className=\"cmr-class-color-icon cmr-class-slate-gray\"\n        />\n      </span>\n      {isDropdownOpen && (\n        <div className=\"cmr-class-dropdown-content\">\n          <p>Dropdown content here</p>\n        </div>\n      )}\n    </div>\n  );\n}\n","import React from 'react';\n\n\ninterface Props{\n    email:string;\n    name:string;\n}\nexport default function UserInfo({ name, email }:Props) {\n  return (\n    <div className=\"cmr-class-top-nav-bar-info-user\">\n      <span className=\"cmr-class-font-bold\">{name} </span>\n      <span>{email}</span>\n    </div>\n  );\n}","import React, { useState } from \"react\";\n\ninterface Language {\n  code: string;\n  label: string;\n  flag: string;\n}\n\nconst languages: Language[] = [\n  { code: \"EN\", label: \"English\", flag: \"US\" },\n  { code: \"ES\", label: \"Español\", flag: \"ES\" },\n  { code: 'NL', label: 'Nederlands', flag: 'NL' }\n];\n\nexport default function LanguageDropdown() {\n  const [selectedLanguage, setSelectedLanguage] = useState<Language>(\n    languages[0]\n  );\n\n  const handleLanguageChange = (language: Language) => {\n    setSelectedLanguage(language);\n  };\n\n  return (\n    <div className=\"cmr-class-dropdown-flag cmr-class-mr-20\">\n      <span className=\"cmr-class-content-flag\">\n        <span className={`cmr-class-flag large ${selectedLanguage.flag}`}></span>\n      </span>\n\n      <div className=\"cmr-class-dropdown-menu\">\n        <button className=\"cmr-class-dropdown-toggle\" type=\"button\">\n          Choose Language\n        </button>\n        <h6 className=\"cmr-class-dropdown-header\">Popular Languages</h6>\n        {languages.map((language) => (\n          <button\n            key={language.code}\n            type=\"button\"\n            className=\"cmr-class-dropdown-item \"\n            onClick={() => handleLanguageChange(language)}\n          >\n            <span\n              className={` opacity-8 cmr-class-flag large  cmr-class-mr-20 ${language.flag}`}\n            ></span>\n            {language.code}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n","import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React from 'react'\nimport Dropdown from '../../dropdown/Dropdown'\nimport UserInfo from '../../contentMenuComponent/UserInfo'\nimport LanguageDropdown from '../../contentMenuComponent/LanguageDropdown'\n\nexport default function TopNavBarComponent() {\n\n\n  return (\n    <div className=\"cmr-class-top-nav-bar\">\n      <div className=\"cmr-class-flex-container\">\n        <FontAwesomeIcon\n          icon={faBars}\n          color=\"#3f6ad8\"\n          size=\"2x\"\n          className=\"cmr-class-mr-20 cmr-class-cursor-pointer\"\n        />\n        <div className=\"cmr-class-flex-container\">\n          <div className=\"cmr-class-icon-container cmr-class-mr-20\">\n            <FontAwesomeIcon\n              icon={faSearch}\n              color=\"#3f6ad8\"\n              className=\"\"\n              size=\"2x\"\n            />\n          </div>\n\n          <img\n            src=\"https://sbxcloud.com/www/ibuyflowers/prod/test/images/logo-ibuyflowers.svg\"\n            style={{ height: '40px' }}\n            alt=\"\"\n          />\n        </div>\n      </div>\n      <div className=\"cmr-class-top-nav-bar-options\">\n        {/*  */}\n\n        <LanguageDropdown />\n\n\n        <Dropdown />\n        <UserInfo name=\"Admin Chilco\" email=\"box+admin.chilco@socobox.co\" />\n      </div>\n    </div>\n  )\n}\n","export function uuidV4() {\n    return (\"\" + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: any) =>\n      (\n        ((c ^ crypto.getRandomValues(new Uint8Array(1))[0]) & 15) >>\n        (c / 4)\n      ).toString(16)\n    );\n  }\n\n\n\n","import React, { useState } from 'react'\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { SidebarItemProps } from '../../../types/Common'\nimport { uuidV4 } from '../../../utils/utils'\n\nconst SidebarItem = ({ route }: SidebarItemProps) => {\n  const { icon, label, subRoutes, className } = route\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false)\n\n  const toggleSubMenu = () => {\n    setIsSubMenuOpen((prevState) => !prevState)\n  }\n  return (\n    <React.Fragment>\n      <li\n        className={`crm-class-sidebar-li ${className ?? ''}`}\n        onClick={toggleSubMenu}\n      >\n        {icon && icon}\n        <span className={`${isSubMenuOpen ? 'cmr-class-font-bold' : ''}  `}>{label}</span>\n\n        {subRoutes?.length! > 0 && (\n          <span className=\"cmr-class-ml-auto\">\n            <FontAwesomeIcon\n              icon={isSubMenuOpen ? faChevronUp : faChevronDown}\n              className=\"cmr-class-color-icon cmr-class-font-10 cmr-class-slate-gray\"\n            />\n          </span>\n        )}\n      </li>\n      {isSubMenuOpen && subRoutes?.length! > 0 && (\n        <ul className=\"crm-class-sidebar-sub-menu-list\">\n          {subRoutes?.map((item) => (\n            <SidebarItem key={uuidV4()} route={item} />\n          ))}\n        </ul>\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default SidebarItem\n","\nimport { Route } from \"../../../../types/Common\";\n\nexport const generateSubMenuData = (labels: string[]): Route[] => {\n  return labels.map((label) => ({\n    label,\n    className: \"cmr-class-ml-20\",\n  }));\n};\n\nconst subMenuDataHome: Route[] = generateSubMenuData([\n  \"Dashboard\",\n  \"Accounts\",\n  \"My Tasks\",\n  \"Web designer\",\n]);\n\nconst subMenuDataAnalytics: Route[] = generateSubMenuData([\n  \"Customer Cohorts\",\n  \"Product group\",\n  \"Marketing UTM\",\n  \"Customer growth\",\n  \"Customer events\",\n  \"Claims\",\n  \"Products sold\",\n  \"Available Inventory\",\n  \"Purchase by re order\",\n  \"Most sold Varieties\",\n  \"Search terms\",\n]);\n\nconst subMenuDataProcess: Route[] = generateSubMenuData([\n  \"Project manager\",\n  \"Project list\",\n  \"Launch process\",\n]);\n\nconst subMenuDataForm: Route[] = generateSubMenuData([\"Form list\"]);\n\nconst subMenuDataComunications: Route[] = generateSubMenuData([\n  \"Email Blast\",\n  \"Template Generator\",\n]);\n\nconst subMenuDataDataProviders: Route[] = generateSubMenuData([\n  \"Data providers\",\n]);\n\nconst subMenuData: Route[] = generateSubMenuData([\"Search Engine\", \"CMS\"]);\n\nconst subMenuDataReports: Route[] = generateSubMenuData([\n  \"Crm reports\",\n  \"Report generator\",\n]);\n\nconst subMenuDataConfig: Route[] = generateSubMenuData([\n  \"App\",\n  \"Manage users\",\n  \"Permissions assignment\",\n  \"Groups manager\",\n  \"Crm executions\",\n]);\n\nconst subMenuDataMarketing: Route[] = generateSubMenuData([\n  \"Conversion Rate by Page\",\n]);\n\nexport {\n  subMenuDataHome,\n  subMenuData,\n  subMenuDataComunications,\n  subMenuDataConfig,\n  subMenuDataDataProviders,\n  subMenuDataForm,\n  subMenuDataReports,\n  subMenuDataMarketing,\n  subMenuDataAnalytics,\n  subMenuDataProcess,\n};\n","import {\n  faBullhorn,\n  faCloudDownloadAlt,\n  faCog,\n  faDatabase,\n  faHeadphones,\n  faShip,\n  faWallet,\n  IconDefinition\n} from '@fortawesome/free-solid-svg-icons'\n\nimport { faGem, faHourglass } from '@fortawesome/free-regular-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nimport { Route } from '../../../types/Common'\nimport SidebarItem from './SidebarItem'\nimport {\n  subMenuData,\n  subMenuDataAnalytics,\n  subMenuDataComunications,\n  subMenuDataConfig,\n  subMenuDataDataProviders,\n  subMenuDataForm,\n  subMenuDataHome,\n  subMenuDataMarketing,\n  subMenuDataProcess,\n  subMenuDataReports\n} from './subMenuComponent/SubMenuComponent'\nimport React from 'react'\n\nconst generateRoute = (\n  label: string,\n  icon: React.ReactNode | IconDefinition,\n  subRoutes: Route[] = []\n): Route => ({\n  label,\n  visible: true,\n  enable: true,\n  icon: (\n    <span className=\"cmr-class-color-icon cmr-class-mr-10\">\n      {icon && (\n        <FontAwesomeIcon\n          icon={icon as IconDefinition}\n          className=\"cmr-class-color-icon\"\n        />\n      )}\n    </span>\n  ),\n  action: () => {\n  },\n  subRoutes: subRoutes.map((subRoute) =>\n    generateRoute(subRoute.label, subRoute.icon, subRoute.subRoutes || [])\n  )\n})\n\nconst generateRoutes = (\n  routesData: {\n    label: string;\n    icon: IconDefinition | undefined;\n    subRoutes: Route[];\n  }[]\n): Route[] => {\n  return routesData.map((routeData) =>\n    generateRoute(routeData.label, routeData?.icon!, routeData.subRoutes)\n  )\n}\n\nconst SidebarComponent = () => {\n  const routesData = [\n    {\n      label: 'Home',\n      icon: faGem,\n      subRoutes: subMenuDataHome\n    },\n\n    { label: 'Analytics', icon: faShip, subRoutes: subMenuDataAnalytics },\n    { label: 'Process', icon: faHourglass, subRoutes: subMenuDataProcess },\n    { label: 'Forms', icon: faWallet, subRoutes: subMenuDataForm },\n    {\n      label: 'Communications',\n      icon: faHeadphones,\n      subRoutes: subMenuDataComunications\n    },\n    {\n      label: 'Data providers',\n      icon: faDatabase,\n      subRoutes: subMenuDataDataProviders\n    },\n    { label: 'Data', icon: faCloudDownloadAlt, subRoutes: subMenuData },\n    { label: 'Reports', icon: faCog, subRoutes: subMenuDataReports },\n    { label: 'Config', icon: faGem, subRoutes: subMenuDataConfig },\n    { label: 'Marketing', icon: faBullhorn, subRoutes: subMenuDataMarketing }\n  ]\n\n  const routes: Route[] = generateRoutes(routesData)\n\n  return (\n    <div className=\"crm-class-sidebar\">\n      <ul className=\"crm-class-sidebar-list cmr-class-mt-70\">\n        <span className=\"cmr-class-tittle\">MENU</span>\n        \n        {routes.map((route, index) => (\n          <SidebarItem key={`route_${index}`} route={route} />\n        ))}\n\n      </ul>\n    </div>\n  )\n}\nexport default SidebarComponent\n"],"names":["Dropdown","_useState","useState","isDropdownOpen","setIsDropdownOpen","toggleDropdown","React","className","onClick","FontAwesomeIcon","icon","faChevronUp","faChevronDown","UserInfo","_ref","name","email","languages","code","label","flag","LanguageDropdown","selectedLanguage","setSelectedLanguage","handleLanguageChange","language","type","map","key","TopNavBarComponent","faBars","color","size","faSearch","src","style","height","alt","uuidV4","replace","c","crypto","getRandomValues","Uint8Array","toString","SidebarItem","route","subRoutes","isSubMenuOpen","setIsSubMenuOpen","toggleSubMenu","prevState","Fragment","length","item","generateSubMenuData","labels","subMenuDataHome","subMenuDataAnalytics","subMenuDataProcess","subMenuDataForm","subMenuDataComunications","subMenuDataDataProviders","subMenuData","subMenuDataReports","subMenuDataConfig","subMenuDataMarketing","generateRoute","visible","enable","action","subRoute","generateRoutes","routesData","routeData","SidebarComponent","faGem","faShip","faHourglass","faWallet","faHeadphones","faDatabase","faCloudDownloadAlt","faCog","faBullhorn","routes","index"],"mappings":"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"}

package/dist/index.modern.js

@@ -0,0 +1,260 @@
+import { faChevronUp, faChevronDown, faBars, faSearch, faShip, faWallet, faHeadphones, faDatabase, faCloudDownloadAlt, faCog, faBullhorn } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useState } from 'react';
+import { faGem, faHourglass } from '@fortawesome/free-regular-svg-icons';
+
+function Dropdown() {
+  var _useState = useState(false),
+    isDropdownOpen = _useState[0],
+    setIsDropdownOpen = _useState[1];
+  var toggleDropdown = function toggleDropdown() {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+  return React.createElement("div", {
+    className: "cmr-class-dropdown cmr-class-mr-20",
+    onClick: toggleDropdown
+  }, React.createElement("span", {
+    className: "cmr-class-top-nav-bar-avatar"
+  }, "A"), React.createElement("span", {
+    className: "cmr-class-ml-20"
+  }, React.createElement(FontAwesomeIcon, {
+    icon: isDropdownOpen ? faChevronUp : faChevronDown,
+    className: "cmr-class-color-icon cmr-class-slate-gray"
+  })), isDropdownOpen && React.createElement("div", {
+    className: "cmr-class-dropdown-content"
+  }, React.createElement("p", null, "Dropdown content here")));
+}
+
+function UserInfo(_ref) {
+  var name = _ref.name,
+    email = _ref.email;
+  return React.createElement("div", {
+    className: "cmr-class-top-nav-bar-info-user"
+  }, React.createElement("span", {
+    className: "cmr-class-font-bold"
+  }, name, " "), React.createElement("span", null, email));
+}
+
+var languages = [{
+  code: "EN",
+  label: "English",
+  flag: "US"
+}, {
+  code: "ES",
+  label: "Español",
+  flag: "ES"
+}, {
+  code: 'NL',
+  label: 'Nederlands',
+  flag: 'NL'
+}];
+function LanguageDropdown() {
+  var _useState = useState(languages[0]),
+    selectedLanguage = _useState[0],
+    setSelectedLanguage = _useState[1];
+  var handleLanguageChange = function handleLanguageChange(language) {
+    setSelectedLanguage(language);
+  };
+  return React.createElement("div", {
+    className: "cmr-class-dropdown-flag cmr-class-mr-20"
+  }, React.createElement("span", {
+    className: "cmr-class-content-flag"
+  }, React.createElement("span", {
+    className: "cmr-class-flag large " + selectedLanguage.flag
+  })), React.createElement("div", {
+    className: "cmr-class-dropdown-menu"
+  }, React.createElement("button", {
+    className: "cmr-class-dropdown-toggle",
+    type: "button"
+  }, "Choose Language"), React.createElement("h6", {
+    className: "cmr-class-dropdown-header"
+  }, "Popular Languages"), languages.map(function (language) {
+    return React.createElement("button", {
+      key: language.code,
+      type: "button",
+      className: "cmr-class-dropdown-item ",
+      onClick: function onClick() {
+        return handleLanguageChange(language);
+      }
+    }, React.createElement("span", {
+      className: " opacity-8 cmr-class-flag large  cmr-class-mr-20 " + language.flag
+    }), language.code);
+  })));
+}
+
+function TopNavBarComponent() {
+  return React.createElement("div", {
+    className: "cmr-class-top-nav-bar"
+  }, React.createElement("div", {
+    className: "cmr-class-flex-container"
+  }, React.createElement(FontAwesomeIcon, {
+    icon: faBars,
+    color: "#3f6ad8",
+    size: "2x",
+    className: "cmr-class-mr-20 cmr-class-cursor-pointer"
+  }), React.createElement("div", {
+    className: "cmr-class-flex-container"
+  }, React.createElement("div", {
+    className: "cmr-class-icon-container cmr-class-mr-20"
+  }, React.createElement(FontAwesomeIcon, {
+    icon: faSearch,
+    color: "#3f6ad8",
+    className: "",
+    size: "2x"
+  })), React.createElement("img", {
+    src: "https://sbxcloud.com/www/ibuyflowers/prod/test/images/logo-ibuyflowers.svg",
+    style: {
+      height: '40px'
+    },
+    alt: ""
+  }))), React.createElement("div", {
+    className: "cmr-class-top-nav-bar-options"
+  }, React.createElement(LanguageDropdown, null), React.createElement(Dropdown, null), React.createElement(UserInfo, {
+    name: "Admin Chilco",
+    email: "box+admin.chilco@socobox.co"
+  })));
+}
+
+function uuidV4() {
+  return ("" + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
+    return (((c ^ crypto.getRandomValues(new Uint8Array(1))[0]) & 15) >> c / 4).toString(16);
+  });
+}
+
+var SidebarItem = function SidebarItem(_ref) {
+  var route = _ref.route;
+  var icon = route.icon,
+    label = route.label,
+    subRoutes = route.subRoutes,
+    className = route.className;
+  var _useState = useState(false),
+    isSubMenuOpen = _useState[0],
+    setIsSubMenuOpen = _useState[1];
+  var toggleSubMenu = function toggleSubMenu() {
+    setIsSubMenuOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  return React.createElement(React.Fragment, null, React.createElement("li", {
+    className: "crm-class-sidebar-li " + (className != null ? className : ''),
+    onClick: toggleSubMenu
+  }, icon && icon, React.createElement("span", {
+    className: (isSubMenuOpen ? 'cmr-class-font-bold' : '') + "  "
+  }, label), (subRoutes === null || subRoutes === void 0 ? void 0 : subRoutes.length) > 0 && React.createElement("span", {
+    className: "cmr-class-ml-auto"
+  }, React.createElement(FontAwesomeIcon, {
+    icon: isSubMenuOpen ? faChevronUp : faChevronDown,
+    className: "cmr-class-color-icon cmr-class-font-10 cmr-class-slate-gray"
+  }))), isSubMenuOpen && (subRoutes === null || subRoutes === void 0 ? void 0 : subRoutes.length) > 0 && React.createElement("ul", {
+    className: "crm-class-sidebar-sub-menu-list"
+  }, subRoutes === null || subRoutes === void 0 ? void 0 : subRoutes.map(function (item) {
+    return React.createElement(SidebarItem, {
+      key: uuidV4(),
+      route: item
+    });
+  })));
+};
+
+var generateSubMenuData = function generateSubMenuData(labels) {
+  return labels.map(function (label) {
+    return {
+      label: label,
+      className: "cmr-class-ml-20"
+    };
+  });
+};
+var subMenuDataHome = generateSubMenuData(["Dashboard", "Accounts", "My Tasks", "Web designer"]);
+var subMenuDataAnalytics = generateSubMenuData(["Customer Cohorts", "Product group", "Marketing UTM", "Customer growth", "Customer events", "Claims", "Products sold", "Available Inventory", "Purchase by re order", "Most sold Varieties", "Search terms"]);
+var subMenuDataProcess = generateSubMenuData(["Project manager", "Project list", "Launch process"]);
+var subMenuDataForm = generateSubMenuData(["Form list"]);
+var subMenuDataComunications = generateSubMenuData(["Email Blast", "Template Generator"]);
+var subMenuDataDataProviders = generateSubMenuData(["Data providers"]);
+var subMenuData = generateSubMenuData(["Search Engine", "CMS"]);
+var subMenuDataReports = generateSubMenuData(["Crm reports", "Report generator"]);
+var subMenuDataConfig = generateSubMenuData(["App", "Manage users", "Permissions assignment", "Groups manager", "Crm executions"]);
+var subMenuDataMarketing = generateSubMenuData(["Conversion Rate by Page"]);
+
+var generateRoute = function generateRoute(label, icon, subRoutes) {
+  if (subRoutes === void 0) {
+    subRoutes = [];
+  }
+  return {
+    label: label,
+    visible: true,
+    enable: true,
+    icon: React.createElement("span", {
+      className: "cmr-class-color-icon cmr-class-mr-10"
+    }, icon && React.createElement(FontAwesomeIcon, {
+      icon: icon,
+      className: "cmr-class-color-icon"
+    })),
+    action: function action() {},
+    subRoutes: subRoutes.map(function (subRoute) {
+      return generateRoute(subRoute.label, subRoute.icon, subRoute.subRoutes || []);
+    })
+  };
+};
+var generateRoutes = function generateRoutes(routesData) {
+  return routesData.map(function (routeData) {
+    return generateRoute(routeData.label, routeData === null || routeData === void 0 ? void 0 : routeData.icon, routeData.subRoutes);
+  });
+};
+var SidebarComponent = function SidebarComponent() {
+  var routesData = [{
+    label: 'Home',
+    icon: faGem,
+    subRoutes: subMenuDataHome
+  }, {
+    label: 'Analytics',
+    icon: faShip,
+    subRoutes: subMenuDataAnalytics
+  }, {
+    label: 'Process',
+    icon: faHourglass,
+    subRoutes: subMenuDataProcess
+  }, {
+    label: 'Forms',
+    icon: faWallet,
+    subRoutes: subMenuDataForm
+  }, {
+    label: 'Communications',
+    icon: faHeadphones,
+    subRoutes: subMenuDataComunications
+  }, {
+    label: 'Data providers',
+    icon: faDatabase,
+    subRoutes: subMenuDataDataProviders
+  }, {
+    label: 'Data',
+    icon: faCloudDownloadAlt,
+    subRoutes: subMenuData
+  }, {
+    label: 'Reports',
+    icon: faCog,
+    subRoutes: subMenuDataReports
+  }, {
+    label: 'Config',
+    icon: faGem,
+    subRoutes: subMenuDataConfig
+  }, {
+    label: 'Marketing',
+    icon: faBullhorn,
+    subRoutes: subMenuDataMarketing
+  }];
+  var routes = generateRoutes(routesData);
+  return React.createElement("div", {
+    className: "crm-class-sidebar"
+  }, React.createElement("ul", {
+    className: "crm-class-sidebar-list cmr-class-mt-70"
+  }, React.createElement("span", {
+    className: "cmr-class-tittle"
+  }, "MENU"), routes.map(function (route, index) {
+    return React.createElement(SidebarItem, {
+      key: "route_" + index,
+      route: route
+    });
+  })));
+};
+
+export { SidebarComponent, TopNavBarComponent };
+//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.js","sources":["../src/components/dropdown/Dropdown.tsx","../src/components/contentMenuComponent/UserInfo.tsx","../src/components/contentMenuComponent/LanguageDropdown.tsx","../src/components/menu/TopNavBarComponent/TopNavBarComponent.tsx","../src/utils/utils.ts","../src/components/menu/sidebar/SidebarItem.tsx","../src/components/menu/sidebar/subMenuComponent/SubMenuComponent.tsx","../src/components/menu/sidebar/Sidebar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';\n\nexport default function Dropdown() {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const toggleDropdown = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  return (\n    <div className=\"cmr-class-dropdown cmr-class-mr-20\" onClick={toggleDropdown}>\n      <span className=\"cmr-class-top-nav-bar-avatar\">A</span>\n      <span className=\"cmr-class-ml-20\">\n        <FontAwesomeIcon\n          icon={isDropdownOpen ? faChevronUp : faChevronDown}\n          className=\"cmr-class-color-icon cmr-class-slate-gray\"\n        />\n      </span>\n      {isDropdownOpen && (\n        <div className=\"cmr-class-dropdown-content\">\n          <p>Dropdown content here</p>\n        </div>\n      )}\n    </div>\n  );\n}\n","import React from 'react';\n\n\ninterface Props{\n    email:string;\n    name:string;\n}\nexport default function UserInfo({ name, email }:Props) {\n  return (\n    <div className=\"cmr-class-top-nav-bar-info-user\">\n      <span className=\"cmr-class-font-bold\">{name} </span>\n      <span>{email}</span>\n    </div>\n  );\n}","import React, { useState } from \"react\";\n\ninterface Language {\n  code: string;\n  label: string;\n  flag: string;\n}\n\nconst languages: Language[] = [\n  { code: \"EN\", label: \"English\", flag: \"US\" },\n  { code: \"ES\", label: \"Español\", flag: \"ES\" },\n  { code: 'NL', label: 'Nederlands', flag: 'NL' }\n];\n\nexport default function LanguageDropdown() {\n  const [selectedLanguage, setSelectedLanguage] = useState<Language>(\n    languages[0]\n  );\n\n  const handleLanguageChange = (language: Language) => {\n    setSelectedLanguage(language);\n  };\n\n  return (\n    <div className=\"cmr-class-dropdown-flag cmr-class-mr-20\">\n      <span className=\"cmr-class-content-flag\">\n        <span className={`cmr-class-flag large ${selectedLanguage.flag}`}></span>\n      </span>\n\n      <div className=\"cmr-class-dropdown-menu\">\n        <button className=\"cmr-class-dropdown-toggle\" type=\"button\">\n          Choose Language\n        </button>\n        <h6 className=\"cmr-class-dropdown-header\">Popular Languages</h6>\n        {languages.map((language) => (\n          <button\n            key={language.code}\n            type=\"button\"\n            className=\"cmr-class-dropdown-item \"\n            onClick={() => handleLanguageChange(language)}\n          >\n            <span\n              className={` opacity-8 cmr-class-flag large  cmr-class-mr-20 ${language.flag}`}\n            ></span>\n            {language.code}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n","import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React from 'react'\nimport Dropdown from '../../dropdown/Dropdown'\nimport UserInfo from '../../contentMenuComponent/UserInfo'\nimport LanguageDropdown from '../../contentMenuComponent/LanguageDropdown'\n\nexport default function TopNavBarComponent() {\n\n\n  return (\n    <div className=\"cmr-class-top-nav-bar\">\n      <div className=\"cmr-class-flex-container\">\n        <FontAwesomeIcon\n          icon={faBars}\n          color=\"#3f6ad8\"\n          size=\"2x\"\n          className=\"cmr-class-mr-20 cmr-class-cursor-pointer\"\n        />\n        <div className=\"cmr-class-flex-container\">\n          <div className=\"cmr-class-icon-container cmr-class-mr-20\">\n            <FontAwesomeIcon\n              icon={faSearch}\n              color=\"#3f6ad8\"\n              className=\"\"\n              size=\"2x\"\n            />\n          </div>\n\n          <img\n            src=\"https://sbxcloud.com/www/ibuyflowers/prod/test/images/logo-ibuyflowers.svg\"\n            style={{ height: '40px' }}\n            alt=\"\"\n          />\n        </div>\n      </div>\n      <div className=\"cmr-class-top-nav-bar-options\">\n        {/*  */}\n\n        <LanguageDropdown />\n\n\n        <Dropdown />\n        <UserInfo name=\"Admin Chilco\" email=\"box+admin.chilco@socobox.co\" />\n      </div>\n    </div>\n  )\n}\n","export function uuidV4() {\n    return (\"\" + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: any) =>\n      (\n        ((c ^ crypto.getRandomValues(new Uint8Array(1))[0]) & 15) >>\n        (c / 4)\n      ).toString(16)\n    );\n  }\n\n\n\n","import React, { useState } from 'react'\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { SidebarItemProps } from '../../../types/Common'\nimport { uuidV4 } from '../../../utils/utils'\n\nconst SidebarItem = ({ route }: SidebarItemProps) => {\n  const { icon, label, subRoutes, className } = route\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false)\n\n  const toggleSubMenu = () => {\n    setIsSubMenuOpen((prevState) => !prevState)\n  }\n  return (\n    <React.Fragment>\n      <li\n        className={`crm-class-sidebar-li ${className ?? ''}`}\n        onClick={toggleSubMenu}\n      >\n        {icon && icon}\n        <span className={`${isSubMenuOpen ? 'cmr-class-font-bold' : ''}  `}>{label}</span>\n\n        {subRoutes?.length! > 0 && (\n          <span className=\"cmr-class-ml-auto\">\n            <FontAwesomeIcon\n              icon={isSubMenuOpen ? faChevronUp : faChevronDown}\n              className=\"cmr-class-color-icon cmr-class-font-10 cmr-class-slate-gray\"\n            />\n          </span>\n        )}\n      </li>\n      {isSubMenuOpen && subRoutes?.length! > 0 && (\n        <ul className=\"crm-class-sidebar-sub-menu-list\">\n          {subRoutes?.map((item) => (\n            <SidebarItem key={uuidV4()} route={item} />\n          ))}\n        </ul>\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default SidebarItem\n","\nimport { Route } from \"../../../../types/Common\";\n\nexport const generateSubMenuData = (labels: string[]): Route[] => {\n  return labels.map((label) => ({\n    label,\n    className: \"cmr-class-ml-20\",\n  }));\n};\n\nconst subMenuDataHome: Route[] = generateSubMenuData([\n  \"Dashboard\",\n  \"Accounts\",\n  \"My Tasks\",\n  \"Web designer\",\n]);\n\nconst subMenuDataAnalytics: Route[] = generateSubMenuData([\n  \"Customer Cohorts\",\n  \"Product group\",\n  \"Marketing UTM\",\n  \"Customer growth\",\n  \"Customer events\",\n  \"Claims\",\n  \"Products sold\",\n  \"Available Inventory\",\n  \"Purchase by re order\",\n  \"Most sold Varieties\",\n  \"Search terms\",\n]);\n\nconst subMenuDataProcess: Route[] = generateSubMenuData([\n  \"Project manager\",\n  \"Project list\",\n  \"Launch process\",\n]);\n\nconst subMenuDataForm: Route[] = generateSubMenuData([\"Form list\"]);\n\nconst subMenuDataComunications: Route[] = generateSubMenuData([\n  \"Email Blast\",\n  \"Template Generator\",\n]);\n\nconst subMenuDataDataProviders: Route[] = generateSubMenuData([\n  \"Data providers\",\n]);\n\nconst subMenuData: Route[] = generateSubMenuData([\"Search Engine\", \"CMS\"]);\n\nconst subMenuDataReports: Route[] = generateSubMenuData([\n  \"Crm reports\",\n  \"Report generator\",\n]);\n\nconst subMenuDataConfig: Route[] = generateSubMenuData([\n  \"App\",\n  \"Manage users\",\n  \"Permissions assignment\",\n  \"Groups manager\",\n  \"Crm executions\",\n]);\n\nconst subMenuDataMarketing: Route[] = generateSubMenuData([\n  \"Conversion Rate by Page\",\n]);\n\nexport {\n  subMenuDataHome,\n  subMenuData,\n  subMenuDataComunications,\n  subMenuDataConfig,\n  subMenuDataDataProviders,\n  subMenuDataForm,\n  subMenuDataReports,\n  subMenuDataMarketing,\n  subMenuDataAnalytics,\n  subMenuDataProcess,\n};\n","import {\n  faBullhorn,\n  faCloudDownloadAlt,\n  faCog,\n  faDatabase,\n  faHeadphones,\n  faShip,\n  faWallet,\n  IconDefinition\n} from '@fortawesome/free-solid-svg-icons'\n\nimport { faGem, faHourglass } from '@fortawesome/free-regular-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nimport { Route } from '../../../types/Common'\nimport SidebarItem from './SidebarItem'\nimport {\n  subMenuData,\n  subMenuDataAnalytics,\n  subMenuDataComunications,\n  subMenuDataConfig,\n  subMenuDataDataProviders,\n  subMenuDataForm,\n  subMenuDataHome,\n  subMenuDataMarketing,\n  subMenuDataProcess,\n  subMenuDataReports\n} from './subMenuComponent/SubMenuComponent'\nimport React from 'react'\n\nconst generateRoute = (\n  label: string,\n  icon: React.ReactNode | IconDefinition,\n  subRoutes: Route[] = []\n): Route => ({\n  label,\n  visible: true,\n  enable: true,\n  icon: (\n    <span className=\"cmr-class-color-icon cmr-class-mr-10\">\n      {icon && (\n        <FontAwesomeIcon\n          icon={icon as IconDefinition}\n          className=\"cmr-class-color-icon\"\n        />\n      )}\n    </span>\n  ),\n  action: () => {\n  },\n  subRoutes: subRoutes.map((subRoute) =>\n    generateRoute(subRoute.label, subRoute.icon, subRoute.subRoutes || [])\n  )\n})\n\nconst generateRoutes = (\n  routesData: {\n    label: string;\n    icon: IconDefinition | undefined;\n    subRoutes: Route[];\n  }[]\n): Route[] => {\n  return routesData.map((routeData) =>\n    generateRoute(routeData.label, routeData?.icon!, routeData.subRoutes)\n  )\n}\n\nconst SidebarComponent = () => {\n  const routesData = [\n    {\n      label: 'Home',\n      icon: faGem,\n      subRoutes: subMenuDataHome\n    },\n\n    { label: 'Analytics', icon: faShip, subRoutes: subMenuDataAnalytics },\n    { label: 'Process', icon: faHourglass, subRoutes: subMenuDataProcess },\n    { label: 'Forms', icon: faWallet, subRoutes: subMenuDataForm },\n    {\n      label: 'Communications',\n      icon: faHeadphones,\n      subRoutes: subMenuDataComunications\n    },\n    {\n      label: 'Data providers',\n      icon: faDatabase,\n      subRoutes: subMenuDataDataProviders\n    },\n    { label: 'Data', icon: faCloudDownloadAlt, subRoutes: subMenuData },\n    { label: 'Reports', icon: faCog, subRoutes: subMenuDataReports },\n    { label: 'Config', icon: faGem, subRoutes: subMenuDataConfig },\n    { label: 'Marketing', icon: faBullhorn, subRoutes: subMenuDataMarketing }\n  ]\n\n  const routes: Route[] = generateRoutes(routesData)\n\n  return (\n    <div className=\"crm-class-sidebar\">\n      <ul className=\"crm-class-sidebar-list cmr-class-mt-70\">\n        <span className=\"cmr-class-tittle\">MENU</span>\n        \n        {routes.map((route, index) => (\n          <SidebarItem key={`route_${index}`} route={route} />\n        ))}\n\n      </ul>\n    </div>\n  )\n}\nexport default SidebarComponent\n"],"names":["Dropdown","_useState","useState","isDropdownOpen","setIsDropdownOpen","toggleDropdown","React","className","onClick","FontAwesomeIcon","icon","faChevronUp","faChevronDown","UserInfo","_ref","name","email","languages","code","label","flag","LanguageDropdown","selectedLanguage","setSelectedLanguage","handleLanguageChange","language","type","map","key","TopNavBarComponent","faBars","color","size","faSearch","src","style","height","alt","uuidV4","replace","c","crypto","getRandomValues","Uint8Array","toString","SidebarItem","route","subRoutes","isSubMenuOpen","setIsSubMenuOpen","toggleSubMenu","prevState","Fragment","length","item","generateSubMenuData","labels","subMenuDataHome","subMenuDataAnalytics","subMenuDataProcess","subMenuDataForm","subMenuDataComunications","subMenuDataDataProviders","subMenuData","subMenuDataReports","subMenuDataConfig","subMenuDataMarketing","generateRoute","visible","enable","action","subRoute","generateRoutes","routesData","routeData","SidebarComponent","faGem","faShip","faHourglass","faWallet","faHeadphones","faDatabase","faCloudDownloadAlt","faCog","faBullhorn","routes","index"],"mappings":"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"}

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/Common.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface Route {
+    label: string;
+    visible?: boolean;
+    enable?: boolean;
+    icon?: React.ReactNode;
+    action?: Function;
+    subRoutes?: Route[];
+    className?: string;
+}
+export interface SidebarItemProps {
+    route: Route;
+}

package/dist/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare function uuidV4(): string;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "sbx-crm-menu-ui",
+  "version": "1.0.0",
+  "description": "Menu Create by SBX Company for CRM.",
+  "author": "Frank Carpio",
+  "license": "ISC",
+  "repository": "https://github.com/socobox/sbx-crm-menu-ui",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.tsx",
+  "engines": {
+    "node": "18"
+  },
+  "scripts": {
+    "build": "microbundle-crl --no-compress --no-css-modules --format modern,cjs",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepare": "run-s build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "predeploy": "cd example && yarn install && yarn run build",
+    "test-lib": "yarn run build && cp -r dist /Users/frankcarpio/Desktop/Personal/lib/sbx-crm-menu-ui"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^18.17.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "babel-eslint": "^10.1.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.5.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-config-standard-react": "^13.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-standard": "^5.0.0",
+    "gh-pages": "^6.1.1",
+    "microbundle-crl": "^0.13.11",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.4.5"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "sass": "^1.77.6"
+  }
+}