beem-component 1.5.6 → 1.5.9

package/dist/components/navbar.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,36 +13,45 @@ var _colors = require("./colors");
 
 var _search = require("./search");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+// import React from 'react';
 // Old with NavbarContent Main wrapper for navbar
-var BmNavbar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n    box-shadow:  0rem 0.286rem 0.214rem rgba(0, 0, 0, 0.25);\n    padding: 0rem 2.5rem !important;\n    flex-wrap: wrap;\n    ", "\n  }\n"])), _colors.BmPrimaryWhite, ""
+var BmNavbar = _styledComponents.default.div.withConfig({
+  displayName: "navbar__BmNavbar"
+})(["background:", ";box-shadow:0rem 0.286rem 0.214rem rgba(0,0,0,0.25);padding:0rem 2.5rem !important;flex-wrap:wrap;", "}"], _colors.BmPrimaryWhite, ""
 /* width: 100vw; */
 ); //  Spacing between the contents of navbar
 
 
 exports.BmNavbar = BmNavbar;
 
-var BmNavbarItems = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.429rem 0rem !important;\n  flex-wrap: wrap;\n"])));
+var BmNavbarItems = _styledComponents.default.div.withConfig({
+  displayName: "navbar__BmNavbarItems"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:1.429rem 0rem !important;flex-wrap:wrap;"]);
 
 exports.BmNavbarItems = BmNavbarItems;
 
-var GlobalNavbarWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n"]))); // Main wrapper for navbar
+var GlobalNavbarWrapper = _styledComponents.default.div.withConfig({
+  displayName: "navbar__GlobalNavbarWrapper"
+})(["display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;"]); // Main wrapper for navbar
 
 
 exports.GlobalNavbarWrapper = GlobalNavbarWrapper;
-var OldBmNavbar = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex-direction: row;\n    padding: 1.429rem 2.5rem !important;\n    background: ", ";\n    box-shadow:  0rem 0.286rem 0.214rem rgba(0, 0, 0, 0.25);\n  }\n"])), _colors.BmPrimaryWhite); // Navbar Profile Icon Wrapper
+var OldBmNavbar = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__OldBmNavbar"
+})(["flex-direction:row;padding:1.429rem 2.5rem !important;background:", ";box-shadow:0rem 0.286rem 0.214rem rgba(0,0,0,0.25);}"], _colors.BmPrimaryWhite); // Navbar Profile Icon Wrapper
 
 exports.OldBmNavbar = OldBmNavbar;
-var BmNavBarProfile = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  @media (max-width: 768px) {\n   display: none !important;\n  }\n"]))); // Navbar Search Icon Wrapper
+var BmNavBarProfile = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__BmNavBarProfile"
+})(["@media (max-width:768px){display:none !important;}"]); // Navbar Search Icon Wrapper
 
 exports.BmNavBarProfile = BmNavBarProfile;
-var BmNavbarSearch = (0, _styledComponents.default)(_search.BmSearch)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 30vw;\n  @media (max-width: 768px) {\n    display: none !important;\n  }\n"]))); // Navbar Logo Icon Wrapper
+var BmNavbarSearch = (0, _styledComponents.default)(_search.BmSearch).withConfig({
+  displayName: "navbar__BmNavbarSearch"
+})(["width:30vw;@media (max-width:768px){display:none !important;}"]); // Navbar Logo Icon Wrapper
 
 exports.BmNavbarSearch = BmNavbarSearch;
-var BmNavbarLogo = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+var BmNavbarLogo = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__BmNavbarLogo"
+})([""]);
 exports.BmNavbarLogo = BmNavbarLogo;

package/dist/components/search.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmSearch = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,23 +21,15 @@ var _iconStyles = require("./iconStyles");
 
 var _excluded = ["dropdown"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var BmSearchField = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  padding: 0rem;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none;\n    color: ", ";\n  }\n  ", "\n"])), _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
+var BmSearchField = _styledComponents.default.input.withConfig({
+  displayName: "search__BmSearchField"
+})(["color:", ";border:none;padding:0rem;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none;color:", ";}", ""], _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
   return props.dropdown === "yes" && "margin-right: 1.714rem;";
 });
 
-var BmSearchWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-sizing: border-box;\n  border-radius: 0.25rem;\n  ", "\n  padding: ", ";\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400, ""
+var BmSearchWrapper = _styledComponents.default.div.withConfig({
+  displayName: "search__BmSearchWrapper"
+})(["display:flex;flex-direction:row;align-items:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;", " padding:", ";"], _colors.BmPrimaryWhite, _colors.BmGrey400, ""
 /* height: 2.929rem; */
 , function (_ref) {
   var dropdown = _ref.dropdown;
@@ -45,19 +41,22 @@ var BmSearchWrapper = _styledComponents.default.div(_templateObject2 || (_templa
   }
 });
 
-var BmStretch = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
+var BmStretch = _styledComponents.default.div.withConfig({
+  displayName: "search__BmStretch"
+})(["display:flex;flex-direction:row;"]);
 
-var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-right: 0.714rem;\n  display: flex;\n"])));
+var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon).withConfig({
+  displayName: "search__SearchIcon"
+})(["margin-right:0.714rem;display:flex;"]);
 
 var BmSearch = function BmSearch(_ref2) {
   var dropdown = _ref2.dropdown,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmStretch, rest, /*#__PURE__*/_react.default.createElement(BmSearchWrapper, _extends({
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmStretch, rest, /*#__PURE__*/_react.default.createElement(BmSearchWrapper, Object.assign({
     dropdown: dropdown
-  }, rest), /*#__PURE__*/_react.default.createElement(SearchIcon, _extends({
+  }, rest), /*#__PURE__*/_react.default.createElement(SearchIcon, Object.assign({
     size: "small"
-  }, rest)), /*#__PURE__*/_react.default.createElement(BmSearchField, _extends({}, rest, {
+  }, rest)), /*#__PURE__*/_react.default.createElement(BmSearchField, Object.assign({}, rest, {
     dropdown: dropdown
   }))), dropdown === "yes" && /*#__PURE__*/_react.default.createElement(_dropdown.BmDropdown, null)));
 };

package/dist/components/text.js

@@ -3,20 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.p = exports.input = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
+exports.p = exports.input = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
 
 var _typography = require("./typography");
 
-var h1 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.571rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+// 32px
+var h1 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 24px
+
 exports.h1 = h1;
-var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
+var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;"); // 18px
+
 exports.h2 = h2;
-var h3 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h3 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 16px
+
 exports.h3 = h3;
-var h4 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h4 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 14px
+
 exports.h4 = h4;
-var h5 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h5 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 12px
+
 exports.h5 = h5;
+var h6 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 0.857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 14px
+
+exports.h6 = h6;
 var p = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 exports.p = p;
 var input = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");

package/dist/components/typography.js

@@ -4,31 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.QuoteMark = exports.PullQuote = exports.PoppinsMedium = exports.Poppins = exports.P = exports.OpenSans = exports.Hero = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Captions = void 0;
-var H1 = "2.286rem";
+var H1 = '2.286rem';
 exports.H1 = H1;
-var H2 = "1.714rem";
+var H2 = '1.714rem';
 exports.H2 = H2;
-var H3 = "1.286rem";
+var H3 = '1.286rem';
 exports.H3 = H3;
-var H4 = "1.143rem";
+var H4 = '1.143rem';
 exports.H4 = H4;
-var H5 = "0.857rem";
+var H5 = '0.857rem';
 exports.H5 = H5;
-var H6 = "0.714rem";
+var H6 = '0.714rem';
 exports.H6 = H6;
-var P = "0.929rem";
+var P = '0.929rem';
 exports.P = P;
-var QuoteMark = "3.429rem";
+var QuoteMark = '3.429rem';
 exports.QuoteMark = QuoteMark;
-var PullQuote = "1.286rem";
+var PullQuote = '1.286rem';
 exports.PullQuote = PullQuote;
-var Captions = "0.714rem";
+var Captions = '0.714rem';
 exports.Captions = Captions;
-var Hero = "1rem";
+var Hero = '1rem';
 exports.Hero = Hero;
-var PoppinsMedium = "PoppinsMedium";
+var PoppinsMedium = 'PoppinsMedium';
 exports.PoppinsMedium = PoppinsMedium;
-var Poppins = "Poppins";
+var Poppins = 'Poppins';
 exports.Poppins = Poppins;
-var OpenSans = "OpenSans";
+var OpenSans = 'OpenSans';
 exports.OpenSans = OpenSans;

package/dist/components/wrapper.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,19 +9,17 @@ exports.BmChatMenuWrapper = exports.BmChatInfoWrapper = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject, _templateObject2;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var BmChatInfoWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  height: 100%;\n  flex-grow: 1;\n  max-width: 75%;\n  width: 75%;\n  ", "\n  max-height: 100%;\n  height: 100%;\n"])), ''
+var BmChatInfoWrapper = _styledComponents.default.div.withConfig({
+  displayName: "wrapper__BmChatInfoWrapper"
+})(["display:flex;flex-direction:column;max-height:100%;height:100%;flex-grow:1;max-width:75%;width:75%;", " max-height:100%;height:100%;"], ''
 /* border: 0.714rem solid orange; */
 );
 
 exports.BmChatInfoWrapper = BmChatInfoWrapper;
 
-var BmChatMenuWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  max-height: 100%;\n  height: 100%;\n  max-width: 100%;\n  width: 100%;\n  ", "\n  max-height: 85%;\n  height: 85%;\n"])), ''
+var BmChatMenuWrapper = _styledComponents.default.div.withConfig({
+  displayName: "wrapper__BmChatMenuWrapper"
+})(["display:flex;flex-direction:row;justify-content:space-between;max-height:100%;height:100%;max-width:100%;width:100%;", " max-height:85%;height:85%;"], ''
 /* border: 0.714rem solid orange; */
 );
 

package/package.json

@@ -1,23 +1,35 @@
 {
     "name": "beem-component",
-    "version": "1.5.6",
+    "version": "1.5.9",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
-        "start": "PORT=3002 react-scripts start",
         "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
+        "build-storybook": "build-storybook",
         "clean": "rimraf dist",
         "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
+        "eject": "react-scripts eject",
+        "start": "PORT=3002 react-scripts start",
         "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook"
+        "test": "react-scripts test"
     },
-    "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3",
-        "web-vitals": "^1.1.2"
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
     },
     "dependencies": {
         "@emotion/react": "^11.7.1",
@@ -29,6 +41,7 @@
         "js-file-download": "^0.4.12",
         "node-sass": "^6.0.1",
         "polished": "^4.1.3",
+        "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.0",
@@ -37,29 +50,14 @@
         "styled-components": "^5.3.0",
         "web-vitals": "^1.1.2"
     },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
     "devDependencies": {
-        "@babel/cli": "^7.14.8",
+        "@babel/cli": "^7.16.0",
+        "@babel/core": "^7.16.0",
         "@babel/preset-env": "^7.14.8",
         "@babel/preset-react": "^7.14.5",
-        "cross-env": "^7.0.3",
+        "@commitlint/cli": "^14.1.0",
+        "@commitlint/config-conventional": "^14.1.0",
+        "@commitlint/travis-cli": "^14.1.0",
         "@storybook/addon-actions": "^6.3.2",
         "@storybook/addon-controls": "^6.3.12",
         "@storybook/addon-docs": "^6.3.12",
@@ -71,6 +69,32 @@
         "@storybook/preset-create-react-app": "^3.2.0",
         "@storybook/react": "^6.3.2",
         "@storybook/theming": "^6.4.9",
+        "babel-eslint": "^10.1.0",
+        "babel-plugin-react-intl": "^5.1.18",
+        "babel-plugin-styled-components": "^1.13.3",
+        "babel-preset-react-app": "^10.0.0",
+        "commitizen": "^4.2.4",
+        "cross-env": "^7.0.3",
+        "cz-conventional-changelog": "^3.3.0",
+        "eslint-config-airbnb": "^18.2.1",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-jest": "^25.2.2",
+        "eslint-plugin-jsdoc": "^32.2.0",
+        "eslint-plugin-jsx-a11y": "^6.4.1",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.26.1",
+        "generate-changelog": "^1.8.0",
+        "husky": "^7.0.4",
+        "lint-staged": "^11.2.6",
+        "prettier": "^2.4.1",
         "storybook-addon-jsx": "^7.3.14"
+    },
+    "peerDependencies": {
+        "babel-loader": "8.1.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-scripts": "4.0.3",
+        "web-vitals": "^1.1.2"
     }
 }

package/src/App.js

@@ -1,181 +1,37 @@
-import React from "react";
-import { AttachFile } from "@material-ui/icons";
-import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
-import QuickreplyIcon from "@mui/icons-material/Quickreply";
-import SendIcon from "@mui/icons-material/Send";
-import { BmChat, BmIcons, BmInput } from "./lib/components";
-import "../src/lib/assets/css/sidebar.scss";
-import image from "../src/lib/assets/chart-img.png";
-import azam from "../src/lib/images/azam1.png";
+import React, { useState } from 'react';
+import { GlobalStyle, BmModal, BmButton } from './lib/components';
+import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
 
 const Chat = () => {
+  const [checked, setChecked] = useState(false);
+  const [showModal, setShowModal] = useState(false);
   return (
-    <BmChat>
-      <BmChat.Body>
-        <BmChat.Details
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          src={image}
-          fileName={<p>attachment.jpg</p>}
-        />
-         <BmChat.Details
-          state="outbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          // src={image}
-          // fileName={<p>attachment.jpg</p>}
-        >
-          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
-Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
-Angalia asilimia ya QUALITY pale chini.
-Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
-Au kama una aina nyingine ya kisimbuzi;
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
-Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Au
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
-Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Angalia asilimia ya QUALITY pale chini.
-QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
-Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          // src={image}
-          // fileName={<p>attachment.jpg</p>}
-        >
-          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
-Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
-Angalia asilimia ya QUALITY pale chini.
-Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
-Au kama una aina nyingine ya kisimbuzi;
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
-Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Au
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
-Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Angalia asilimia ya QUALITY pale chini.
-QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
-Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-          src={azam}
-          file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
-        >
-          <p>Hekkoi</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>
-            Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa
-            nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya
-            nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada
-            zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe
-            Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma
-            kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali
-            lingine?
-          </p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-      </BmChat.Body>
-      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
-        <div class="chat-footer">
-          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-        </div>
-        <div class="chat-footer">
-          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-          <BmIcons icon={<AttachFile />} size="xlarge" />
-          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
-          <BmIcons icon={<SendIcon />} size="xlarge" />
-        </div>
-      </BmChat.Footer>
-    </BmChat>
+    <>
+      <GlobalStyle />
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.SubHeader>
+          <h5>This modal has a sub heading</h5>
+        </BmModal.SubHeader>
+        <BmModal.Body>
+          <BmCheckboxToggle
+            checked={checked}
+            onChange={() => setChecked(!checked)}
+            disabled
+            label={<h3>Field Label</h3>}
+          />
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer>
+      </BmModal>
+    </>
   );
 };
 

package/src/index.js

@@ -1,15 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root"),
+  document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();