beem-component 1.0.1 → 1.0.5

package/dist/components/input.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmInput = exports.BmInputField = void 0;
+exports.BmInputField = exports.BmInput = void 0;
+
+var _icons = require("@material-ui/icons");
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _ = require(".");
+
 var _colors = require("./colors");
 
 var _iconStyles = require("./iconStyles");
@@ -102,9 +106,11 @@ var BmInput = function BmInput(_ref6) {
   }, rest, {
     state: state,
     disabled: state === "disabled" ? true : false
-  })), state && state === "complete" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmSuccessIcon, {
+  })), state && state === "complete" && /*#__PURE__*/_react.default.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.ErrorOutline, null),
     size: "small"
-  }), state && state === "incomplete" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmErrorIcon, {
+  }), state && state === "incomplete" && /*#__PURE__*/_react.default.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
     size: "small"
   })), label && /*#__PURE__*/_react.default.createElement(BmInputLabel, _extends({
     htmlFor: id,

package/dist/components/logo.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmLogo = exports.Logo = void 0;
+exports.Logo = exports.BmLogo = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/components/navbar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmNavbarLogo = exports.BmNavbarSearch = exports.BmNavBarProfile = exports.OldBmNavbar = exports.GlobalNavbarWrapper = exports.BmNavbarItems = exports.BmNavbar = void 0;
+exports.OldBmNavbar = exports.GlobalNavbarWrapper = exports.BmNavbarSearch = exports.BmNavbarLogo = exports.BmNavbarItems = exports.BmNavbar = exports.BmNavBarProfile = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 

package/dist/components/sidebar.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmSideBarTab = exports.BmSideBarBtnIcon = exports.BmSideBarSearch = exports.BmSideBar = void 0;
+exports.BmSideBarTab = exports.BmSideBarSearch = exports.BmSideBarBtnIcon = exports.BmSideBar = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _buttonIconsOnly = require("./buttonIconsOnly");
+var _buttonIconsOnly = require("../components/Buttons/buttonIconsOnly");
 
 var _colors = require("./colors");
 

package/dist/components/tabs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmTab = exports.BmRightTabIcon = exports.BmLeftTabIcon = exports.BmTabText = exports.BmTabWrapper = exports.BmTabItem = void 0;
+exports.BmTabWrapper = exports.BmTabText = exports.BmTabItem = exports.BmTab = exports.BmRightTabIcon = exports.BmLeftTabIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/components/text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.a = exports.input = exports.p = exports.h4 = exports.h3 = exports.h2 = exports.h1 = void 0;
+exports.p = exports.input = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
 
 var _typography = require("./typography");
 

package/dist/components/typography.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OpenSans = exports.Poppins = exports.PoppinsMedium = exports.Hero = exports.Captions = exports.PullQuote = exports.QuoteMark = exports.P = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
+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";
 exports.H1 = H1;
 var H2 = "1.714rem";

package/nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 8085;
+    root   /usr/share/nginx/html;
+
+    index  index.html index.htm;
+    
+    include /etc/nginx/mime.types;
+    
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; 
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

package/package.json

@@ -1,8 +1,18 @@
 {
     "name": "beem-component",
-    "version": "1.0.1",
+    "version": "1.0.5",
     "private": false,
     "main": "dist/components/index.js",
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "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__",
+        "storybook": "start-storybook -p 6006",
+        "build-storybook": "build-storybook"
+    },
     "peerDependencies": {
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -10,25 +20,22 @@
         "web-vitals": "^1.1.2"
     },
     "dependencies": {
+        "@emotion/react": "^11.7.1",
+        "@emotion/styled": "^11.6.0",
         "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.11.2",
-        "@mui/icons-material": "^5.0.3",
+        "@mui/icons-material": "^5.2.1",
+        "@mui/material": "^5.2.3",
         "node-sass": "^6.0.1",
+        "polished": "^4.1.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.0",
         "react-scripts": "4.0.3",
+        "save": "^2.4.0",
         "styled-components": "^5.3.0",
         "web-vitals": "^1.1.2"
     },
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
-        "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__"
-    },
     "eslintConfig": {
         "extends": [
             "react-app",
@@ -51,6 +58,18 @@
         "@babel/cli": "^7.14.8",
         "@babel/preset-env": "^7.14.8",
         "@babel/preset-react": "^7.14.5",
-        "cross-env": "^7.0.3"
+        "cross-env": "^7.0.3",
+        "@storybook/addon-actions": "^6.3.2",
+        "@storybook/addon-controls": "^6.3.12",
+        "@storybook/addon-docs": "^6.3.12",
+        "@storybook/addon-essentials": "^6.3.12",
+        "@storybook/addon-knobs": "^6.3.1",
+        "@storybook/addon-links": "^6.3.2",
+        "@storybook/addons": "^6.4.9",
+        "@storybook/node-logger": "^6.3.2",
+        "@storybook/preset-create-react-app": "^3.2.0",
+        "@storybook/react": "^6.3.2",
+        "@storybook/theming": "^6.4.9",
+        "storybook-addon-jsx": "^7.3.14"
     }
 }

package/public/index.html

@@ -25,7 +25,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Beem Components</title>
 </head>
 
 <body>

package/src/App.js

@@ -1,39 +1,22 @@
 import React from "react";
-import { HashRouter } from "react-router-dom";
+import { Switch, BrowserRouter } from "react-router-dom";
 import "../src/main.scss";
-import { MainWrapper } from "./lib/components/Chats/chatwrapper";
+import { BmRouteLink, MainWrapper } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
-import { UploadFile } from "./FileUploadSFL";
-import { Complete } from "./Complete";
-import { CreateSegment } from "./CreateSegments";
-// import Buttons from "../src/examples/Buttons";
-import Chat from "./CHAT";
-import { BmAccordicon } from "./lib/components/Accordicon";
-import BmAccordion from "./lib/components/Accordion";
-import { BmRouteLink } from "./lib/components/Link";
+
 export const App = () => {
   return (
     <>
       <GlobalStyle />
-      <BmAccordicon dropdown trailingIcon>
-        <h4>jclkdj</h4>
-        <HashRouter>
-          <BmRouteLink to="#">Hello</BmRouteLink>
-        </HashRouter>
-        <h2>kghgfih</h2>
-      </BmAccordicon>
-      <Chat />
-      <BmAccordion>
-        <BmAccordion.Title>SMS</BmAccordion.Title>
-        <BmAccordion.Body>Reports</BmAccordion.Body>
-      </BmAccordion>
-      {/* <Buttons /> */}
-      {/* <h1>hello</h1> */}
-      {/* <MainWrapper>
-        <UploadFile />
-        <Complete />
-        <CreateSegment />
-      </MainWrapper> */}
+      <MainWrapper>
+        <BrowserRouter>
+          <Switch>
+            <BmRouteLink to="#" color="red">
+              BkhkdxA
+            </BmRouteLink>
+          </Switch>
+        </BrowserRouter>
+      </MainWrapper>
     </>
   );
 };

package/src/examples/Navbar.js

@@ -8,7 +8,7 @@ import {
 } from "../lib/components/navbar";
 import { BmLogo } from "../lib/components/logo";
 import Azam from "../lib/images/azam.png";
-import { BmAlertIcon } from "../lib/components/buttonAlertIcons";
+import { BmAlertIcon } from "../lib/components/Buttons/buttonAlertIcons";
 import { BmCheckboxToggler } from "../lib/components/checkboxToggler";
 import { AssignmentLateOutlined } from "@material-ui/icons";
 import NotificationsNoneIcon from "@material-ui/icons/NotificationsNone";

package/src/lib/components/{Accordion.js → Accordion/Accordion.js}

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import { BmPrimaryWhite } from "./colors";
-import { BmDropdownIcon, BmDropupIcon, BmIcons } from "./iconStyles";
+import { BmPrimaryWhite } from "../colors";
+import { BmIcons } from "../iconStyles";
+import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
 
 const { Provider, Consumer } = React.createContext({});
 
@@ -12,9 +13,9 @@ const Dropdown = (value, rest) => {
   }
   if (!value.expandIcon) {
     return value.toggle ? (
-      <BmDropupIcon {...rest} />
+      <BmIcons icon={<KeyboardArrowDown />} {...rest} />
     ) : (
-      <BmDropdownIcon {...rest} />
+      <BmIcons icon={<KeyboardArrowUp />} {...rest} />
     );
   }
   if (value.expandIcon && value.expandIcon !== "none") {

package/src/lib/components/Accordion/Accordion.stories.js

@@ -0,0 +1,63 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmAccordion from "./Accordion";
+import { text, boolean, select } from "@storybook/addon-knobs";
+import { Favorite, Home } from "@material-ui/icons";
+
+export default {
+  component: BmAccordion,
+  subcomponents: BmAccordion.Title,
+  title: "components/Accordion",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the icons",
+      defaultValue: { summary: "large" },
+    },
+    disabled: {
+      description: "Optional",
+      defaultValue: { summary: false },
+      control: { type: "boolean" },
+    },
+    children: {
+      description: "Accordion Title Text",
+      defaultValue: { summary: undefined },
+    },
+    expandIcon: {
+      description: "'none' or Material-UI icon (optional)",
+      defaultValue: { summary: undefined },
+    },
+    leadingIcon: {
+      description: "Material-UI icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+    trailingIcon: {
+      description: "Material-UI icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const optionSize = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+export const Accordion = () => {
+  return (
+    <div>
+      <BmAccordion disabled={boolean("disabled", false)}>
+        <BmAccordion.Title
+          leadingIcon={<Home />}
+          trailingIcon={<Favorite />}
+          size={select("size", optionSize, "large")}
+        >
+          <h3>{text("children", "Accordion")}</h3>
+        </BmAccordion.Title>
+        <BmAccordion.Body>Accordion Body</BmAccordion.Body>
+      </BmAccordion>
+    </div>
+  );
+};

package/src/lib/components/{avatars.js → Avatars/avatars.js}

@@ -1,8 +1,10 @@
 import { Person } from "@material-ui/icons";
 import React from "react";
+import PropTypes from "prop-types";
 import styled from "styled-components";
-import { BmGrey100, BmPrimaryBlue, BmGrey400 } from "./colors";
-import { BmAvatarIcon, BmChatbotIcon } from "./iconStyles";
+import { BmGrey100, BmPrimaryBlue, BmGrey400 } from "../colors";
+import { BmAvatarIcon } from "../iconStyles";
+import SmartToyIcon from '@mui/icons-material/SmartToy';
 
 export const BmAvatarWrapper = styled.div`
   display: flex;
@@ -13,14 +15,16 @@ export const BmAvatarWrapper = styled.div`
     if (size === "medium") return "2.286rem";
     if (size === "small") return "1.714rem";
     if (size === "xsmall") return "1.429rem";
-    return "3.429rem";
+    if (!size) return "3.429rem";
+    return size;
   }};
   width: ${({ size }) => {
     if (size === "large") return "3.429rem";
     if (size === "medium") return "2.286rem";
     if (size === "small") return "1.714rem";
     if (size === "xsmall") return "1.429rem";
-    return "3.429rem";
+    if (!size) return "3.429rem";
+    return size;
   }};
   background: ${({ user }) => {
     if (user === "chatbot") return `${BmPrimaryBlue}`;
@@ -43,13 +47,25 @@ export const BmAvatarWrapper = styled.div`
 `;
 
 export const BmAvatar = (props) => {
-  const { user, size, ...rest } = props;
+  const { user, size, color, ...rest } = props;
   return (
     <BmAvatarWrapper user={user} size={size} {...rest}>
-      {user === "default" && (
-        <BmAvatarIcon icon={<Person />} size={size} {...rest} />
+      {user === "employee" && (
+        <BmAvatarIcon icon={<Person />} size={size} color={color} {...rest} />
+      )}
+      {user === "chatbot" && (
+        <BmAvatarIcon icon={<SmartToyIcon />} size={size} color={color} {...rest} />
+      )}
+      {user !== "chatbot" && user !== "employee" && user !== "default" && (
+        <BmAvatarIcon icon={user} size={size} color={color} {...rest} />
       )}
-      {user === "chatbot" && <BmChatbotIcon size={size} {...rest} />}
     </BmAvatarWrapper>
   );
 };
+
+BmAvatar.propTypes = {
+  size: PropTypes.string,
+  type: PropTypes.string,
+  color: PropTypes.string,
+  user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+};

package/src/lib/components/Avatars/avatars.stories.js

@@ -0,0 +1,45 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmAvatar } from "./avatars";
+import { Home } from "@material-ui/icons";
+
+export default {
+  component: BmAvatar,
+  title: "components/Avatars",
+  argTypes: {
+    size: {
+      options: ["xsmall", "small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the Avatar",
+      defaultValue: { summary: "large" },
+    },
+    type: {
+      options: ["circle", "square"],
+      control: { type: "select" },
+      description: "Shape of the Avatar",
+      defaultValue: { summary: "circle" },
+    },
+    user: {
+      description:
+        "Type of the Avatar ('chatbot', 'employee' or Material-UI icon)",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const MainAvatar = (args) => <BmAvatar {...args} />;
+
+export const Avatar = MainAvatar.bind({});
+Avatar.args = {
+  user: "chatbot",
+  size: "large",
+  type: "circle",
+};
+
+export const CustomAvatar = MainAvatar.bind({});
+CustomAvatar.args = {
+  user: <Home />,
+  size: "large",
+  type: "square",
+  color: "#000000",
+};

package/src/lib/components/Buttons/Stories/basicbutton.stories.js

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmButton } from "../buttons";
+import { Favorite, Home } from "@material-ui/icons";
+
+export default {
+  component: BmButton,
+  title: "components/Buttons/Basic",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size",
+      defaultValue: { summary: "large" },
+    },
+    variant: {
+      options: [
+        "primary",
+        "secondary",
+        "tertiary",
+        "success",
+        "neutral",
+        "destructive",
+      ],
+      control: { type: "select" },
+      description: "Variant",
+      defaultValue: { summary: "primary" },
+    },
+    leadingIcon: {
+      description: "Material UI Icons",
+    },
+    trailingIcon: {
+      description: "Material UI Icons",
+    },
+    children: {
+      description: "Text of the button",
+      default: "Button",
+    },
+  },
+};
+
+const MainButton = (args) => <BmButton {...args} />;
+
+export const BasicButton = MainButton.bind({});
+BasicButton.args = {
+  variant: "primary",
+  size: "large",
+  children: "Button",
+  leadingIcon: <Home />,
+  trailingIcon: <Favorite />,
+};

package/src/lib/components/Buttons/Stories/buttonAlertIcons.stories.js

@@ -0,0 +1,42 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmAlertIcon } from "../buttonAlertIcons";
+import { AssignmentLateOutlined } from "@material-ui/icons";
+
+export default {
+  component: BmAlertIcon,
+  title: "components/Buttons/AlertIcons",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size",
+      defaultValue: { summary: "large" },
+    },
+    icon: {
+      description: "Material UI Icons",
+    },
+    color: {
+      description: "Color of the icon",
+      defaultValue: { summary: "#575757" },
+    },
+    badgeContent: {
+      description: "Badge Content",
+    },
+    badgeColor: {
+      description: "Color of the badge content",
+      defaultValue: { summary: "#F62E48" },
+    },
+  },
+};
+
+const MainButtonAlertIcon = (args) => <BmAlertIcon {...args} />;
+
+export const ButtonAlertIcon = MainButtonAlertIcon.bind({});
+ButtonAlertIcon.args = {
+  icon: <AssignmentLateOutlined />,
+  badgeContent: 4,
+  badgeColor: "red",
+  size: "large",
+  color: "black",
+};

package/src/lib/components/Buttons/Stories/buttonIconsOnly.stories.js

@@ -0,0 +1,49 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmBtnIcon } from "../buttonIconsOnly";
+import { Favorite } from "@material-ui/icons";
+
+export default {
+  component: BmBtnIcon,
+  title: "components/Buttons/IconsOnly",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size",
+      defaultValue: { summary: "large" },
+    },
+    variant: {
+      options: [
+        "primary",
+        "secondary",
+        "tertiary",
+        "success",
+        "neutral",
+        "destructive",
+        "active",
+        "enabled",
+      ],
+      control: { type: "select" },
+      description: "Variant",
+      defaultValue: { summary: "primary" },
+    },
+    icon: {
+      description: "Material UI Icons",
+    },
+    color: {
+      description: "Color of the button",
+      defaultValue: { summary: "primary color" },
+    },
+  },
+};
+
+const MainButtonIcon = (args) => <BmBtnIcon {...args} />;
+
+export const ButtonIcon = MainButtonIcon.bind({});
+ButtonIcon.args = {
+  icon: <Favorite />,
+  size: "large",
+  variant: "primary",
+  color: undefined,
+};