beem-component 1.8.1 → 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {
@@ -9,27 +9,37 @@
     "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",
+    "lint": "eslint --fix --ext .jsx,.js src/",
     "start": "PORT=3002 react-scripts start",
     "storybook": "start-storybook -p 6006",
     "test": "react-scripts test"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix"
     ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+    "*.{md,html}": [
+      "prettier --write"
     ]
   },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": "react-app"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
@@ -45,13 +55,17 @@
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-avatar": "^5.0.3",
+    "react-bootstrap-counter": "^1.0.1",
+    "react-datepicker": "^4.10.0",
     "react-dom": "^17.0.2",
     "react-icons": "^4.6.0",
     "react-pdf": "^5.7.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.7.0",
+    "react-time-picker": "^5.2.0",
     "save": "^2.4.0",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"
   },
   "devDependencies": {
@@ -62,7 +76,7 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^14.1.0",
     "@commitlint/config-conventional": "^14.1.0",
-    "@commitlint/travis-cli": "^14.1.0",
+    "@commitlint/travis-cli": "^13.2.1",
     "@storybook/addon-actions": "^6.3.2",
     "@storybook/addon-controls": "^6.3.12",
     "@storybook/addon-docs": "^6.3.12",
@@ -93,6 +107,7 @@
     "generate-changelog": "^1.8.0",
     "husky": "^7.0.4",
     "lint-staged": "^11.2.6",
+    "nock": "^13.2.0",
     "prettier": "^2.7.1",
     "storybook-addon-jsx": "^7.3.14"
   }

package/src/App.js

@@ -1,261 +1,43 @@
-import React from 'react';
+import React, { useState } from 'react';
+import DatePicker from 'react-datepicker';
+import CounterInput from 'react-bootstrap-counter';
+import TimePicker from 'react-time-picker';
+import { GlobalStyle } from './lib/components';
+import BmButtonGroup from './lib/components/ButtonGroup/buttonGroup';
+import InputDatePicker from './lib/components/InputDatePicker';
+
+import 'react-datepicker/dist/react-datepicker.css';
+
+const App = () => {
+  const [item, setItem] = useState();
+  const Occurance = ['Now', 'Later', 'Recurring'];
+  const [value, onChange] = useState('10:00');
+  const [counter, setCounter] = useState('1');
 
-import {
-  BmInput,
-  GlobalStyle,
-
-  // BmCheckboxToggle,
-} from './lib/components';
-
-// const Chat = () => {
-//   // const [test, setTest] = useState(false);
-//   // const [test1, setTest1] = useState(false);
-
-//   const image =
-//     'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
-//   return (
-//     <>
-//       <GlobalStyle />
-//       <BmProfileIcon channel="google_business_messaging" />
-//       <BmChat>
-//         <BmChat.Body>
-//           <BmChat.Details
-//             state="inbound"
-//             session="sms"
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             // sessionDetails={{
-//             //   message: <h3>Session Message</h3>,
-//             //   time: <p>12:00pm</p>,
-//             // }}
-//             feedPostComments={{
-//               header: <p>Comment Reply</p>,
-//               body: {
-//                 link: <p>This is an outbound link</p>,
-//                 image,
-//               },
-//               footer: <p>This is a Footer</p>,
-//               state: 'inbound',
-//               status: 'comment',
-//             }}
-//           />
-//           <BmChat.Details
-//             state="inbound"
-//             session="live"
-//             displayTime={<p>10:00am</p>}
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             status="failed"
-//             fileName={<p>file.csv</p>}
-//             file={image}
-//           />
-//           {/* <BmChat.Details
-//             state="inbound"
-//             session="sms"
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             sessionDetails={{
-//               message: <h3>Session Message</h3>,
-//               time: <p>12:00pm</p>,
-//             }}
-//             feedPostComments={{
-//               header: <p>Comment Reply</p>,
-//               body: {
-//                 link: <p>This is an inbound link</p>,
-//                 image,
-//               },
-//               footer: <p>This is a Footer</p>,
-//               state: 'inbound',
-//               status: 'comment',
-//             }}
-//           />
-//           <BmChat.Details
-//             state="outbound"
-//             session="sms"
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             sessionDetails={{
-//               message: <h3>Session Message</h3>,
-//               time: <p>12:00pm</p>,
-//             }}
-//             feedPostComments={{
-//               header: <p>Story Reply</p>,
-//               body: {
-//                 link: <p>This is an outbound link</p>,
-//                 image,
-//               },
-//               footer: <p>This is a Footer</p>,
-//               state: 'outbound',
-//               status: 'story',
-//             }}
-//           />
-//           <BmChat.Details
-//             agentName="Agent Name"
-//             state="outbound"
-//             session="live"
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//             sessionDetails={{
-//               message: <h3>Session Message</h3>,
-//               time: <p>12:00pm</p>,
-//             }}
-//           >
-//             <p>Outbound Text Message2</p>
-//           </BmChat.Details>
-
-//           <BmChat.Details
-//             agentName="Test Agent"
-//             state="outbound"
-//             session="live"
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//             sessionDetails={{
-//               message: <h3>Session Message</h3>,
-//               time: <p>12:00pm</p>,
-//             }}
-//           >
-//             <p>Outbound Text Message2</p>
-//           </BmChat.Details>
-
-//           <BmChat.Details
-//             state="inbound"
-//             session="sms"
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             sessionDetails={{
-//               message: <h3>Session Message</h3>,
-//               time: <p>12:00pm</p>,
-//             }}
-//             feedPostComments={{
-//               header: <p>Story Reply</p>,
-//               body: {
-//                 link: <p>This is an inbound link</p>,
-//                 image,
-//               },
-//               footer: <p>This is a Footer</p>,
-//               state: 'inbound',
-//               status: 'story',
-//             }}
-//           />
-//           <BmChat.Details
-//             state="inbound"
-//             session="live"
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             fileName={<p>chat.png</p>}
-//             src={image}
-//             sessionDetails={{
-//               message: <h3>Session Message</h3>,
-//               time: <p>12:00pm</p>,
-//             }}
-//           />
-//           <BmChat.Details
-//             state="inbound"
-//             session="live"
-//             displayTime={<p>10:00am</p>}
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             status="failed"
-//             fileName={<p>file.csv</p>}
-//             file={image}
-//           />
-//           <BmChat.Details
-//             state="outbound"
-//             session="bot"
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//           >
-//             <p>Outbound Text Message</p>
-//           </BmChat.Details>
-//           <BmChat.Details
-//             state="outbound"
-//             session="live"
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             displayTime={<p>12:00pm</p>}
-//             status="sent"
-//             fileName={<p>chat.png</p>}
-//             src={image}
-//           />
-//           <BmChat.Details
-//             state="outbound"
-//             session="live"
-//             displayTime={<p>10:00am</p>}
-//             status="failed"
-//             fileName={<p>file.csv</p>}
-//             sessionTimeline={{ message: <p>12:00pm</p> }}
-//             file={image}
-//             link={image}
-//             onDownload={() => {
-//               alert('hello');
-//             }}
-//           /> */}
-//         </BmChat.Body>
-//         <BmChat.Footer>
-//           <div className="chat-footer">
-//             <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-//             <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-//             <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-//             <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
-//             <BmIcons icon={<SendIcon />} size="xlarge" />
-//           </div>
-//         </BmChat.Footer>
-//       </BmChat>
-
-//       {/* <BmCheckboxToggle
-//         key="test"
-//         checked={test}
-//         onChange={(check) => {
-//           console.log(check);
-//           setTest(check);
-//         }}
-//       />
-
-//       <BmCheckboxToggle
-//         key="test1"
-//         checked={test1}
-//         onChange={(check) => {
-//           console.log(check);
-//           setTest(check);
-//         }}
-
-//       /> */}
-
-//       <BmContactCard>
-//         <BmContactCard.Profile>
-//           <BmAvatar user="chatbot" size="medium" />
-//         </BmContactCard.Profile>
-//         <BmContactCard.Details>
-//           <BmContactCard.SubDetails>
-//             <h3>Contact Names</h3>
-//           </BmContactCard.SubDetails>
-//           <BmContactCard.SubDetails>
-//             <p>
-//               Message ijofdsg fogijfdogi odfigj ofdigj fdoigj odfigj ofdigj
-//               odfigj ofdigj ofdijg dofigj dfoig jodfigj text
-//             </p>
-//             <BmCounter>10</BmCounter>
-//           </BmContactCard.SubDetails>
-//           <BmContactCard.SubDetails>
-//             <BmTag variant="success">label</BmTag>
-//             <p>10:00 am</p>
-//           </BmContactCard.SubDetails>
-//         </BmContactCard.Details>
-//       </BmContactCard>
-//     </>
-//   );
-// };
-
-const Chat = () => {
   return (
     <>
       <GlobalStyle />
-      <BmInput placeholder="tejal" state="positive" action="incomplete" />
+      <BmButtonGroup>
+        {Occurance &&
+          Occurance.map((e) => (
+            <BmButtonGroup.Item onClick={() => setItem(e)} active={e === item}>
+              <p>{e}</p>
+            </BmButtonGroup.Item>
+          ))}
+      </BmButtonGroup>
+      <DatePicker
+        isClearable
+        // dateFormat={DATE_FORMAT}
+        // selected={values.end_date}
+        // onChange={(date) => setFieldValue('end_date', date)}
+        // minDate={values.start_date}
+        placeholderText="Pick a date"
+        customInput={<InputDatePicker />}
+      />
+      <TimePicker onChange={onChange} value={value} />
+      <CounterInput onChange={setCounter} value={counter} />
     </>
   );
 };
 
-export default Chat;
+export default App;

package/src/examples/AlertIcons.js

@@ -1,7 +1,8 @@
-import React, { Component } from "react";
-import { BmAlertIcon } from "../lib/components/buttonAlertIcons";
-import { AssignmentLateOutlined } from "@material-ui/icons";
-import NotificationsNoneIcon from "@material-ui/icons/NotificationsNone";
+import React, { Component } from 'react';
+import { AssignmentLateOutlined } from '@material-ui/icons';
+import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone';
+import { BmAlertIcon } from '../lib/components/buttonAlertIcons';
+
 export class AlertIcons extends Component {
   render() {
     return (
@@ -11,7 +12,11 @@ export class AlertIcons extends Component {
           <div className="column">
             <div className="row">
               <p>Assignment</p>
-              <BmAlertIcon icon={<AssignmentLateOutlined />} badgeContent={4} badgeColor="blue" />
+              <BmAlertIcon
+                icon={<AssignmentLateOutlined />}
+                badgeContent={4}
+                badgeColor="blue"
+              />
             </div>
           </div>
           <div className="column">

package/src/examples/Avatars.js

@@ -1,5 +1,6 @@
-import React, { Component } from "react";
-import { BmAvatar } from "../lib/components/avatars";
+import React, { Component } from 'react';
+import { BmAvatar } from '../lib/components/avatars';
+
 export class Avatars extends Component {
   render() {
     return (

package/src/examples/Buttons.js

@@ -1,6 +1,7 @@
-import React, { Component } from "react";
-import { BmButton } from "../lib/components/buttons";
-import { Favorite } from "@material-ui/icons";
+import React, { Component } from 'react';
+import { Favorite } from '@material-ui/icons';
+import { BmButton } from '../lib/components/buttons';
+
 export class Buttons extends Component {
   render() {
     return (
@@ -16,14 +17,14 @@ export class Buttons extends Component {
                 <BmButton
                   variant="primary"
                   size="large"
-                  onClick={() => alert("aaa")}
+                  onClick={() => alert('aaa')}
                 >
                   Large
                 </BmButton>
               </div>
               <div className="column">
                 <BmButton
-                  onClick={() => alert("hello")}
+                  onClick={() => alert('hello')}
                   variant="primary"
                   size="medium"
                 >
@@ -99,11 +100,7 @@ export class Buttons extends Component {
             <div className="row">
               <p>Disabled</p>
               <div className="column">
-                <BmButton
-                  variant="primary"
-                  size="large"
-                  disabled
-                >
+                <BmButton variant="primary" size="large" disabled>
                   Large
                 </BmButton>
               </div>

package/src/examples/Chat.js

@@ -1,28 +1,28 @@
+import { AttachFile } from '@material-ui/icons';
+import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
 import {
   BmChat,
   BmChatMenu,
   MessageIn,
   MessageOut,
-} from "../lib/components/Chats/chatwrapper";
+} from '../lib/components/Chats/chatwrapper';
 import {
   BmFileChat,
   BmImage,
   BmImageChat,
   BmUserChat,
   BmImageFileName,
-} from "../lib/components/Chats/chat";
+} from '../lib/components/Chats/chat';
 import {
   BmMessageTab,
   BmAttachment,
   BmMessageTabInput,
   BmMessage,
   BmSend,
-} from "../lib/components/Chats/chatInput";
-import { BmEmojiIcon } from "../lib/components/iconStyles";
-import { AttachFile } from "@material-ui/icons";
-import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
-import { BmLoader, Loader } from "../lib/components/loaders";
-import Image from "../lib/assets/chart-img.png";
+} from '../lib/components/Chats/chatInput';
+import { BmEmojiIcon } from '../lib/components/iconStyles';
+import { BmLoader, Loader } from '../lib/components/loaders';
+import Image from '../lib/assets/chart-img.png';
 
 export const Chat = () => {
   return (
@@ -48,7 +48,7 @@ export const Chat = () => {
           <MessageOut>
             {/* Text Messages */}
             <BmImageChat displayTime="3:54pm" type="outbound">
-              <BmImage src={Image} alt="src"/>
+              <BmImage src={Image} alt="src" />
               <BmImageFileName type="outbound">attactment.jpg</BmImageFileName>
             </BmImageChat>
             <BmFileChat displayTime="3:54pm" type="inbound">