beem-component 1.8.2 → 1.8.3

package/src/App.js

@@ -1,273 +1,43 @@
-import React from 'react';
-import Image from './lib/assets/beem.jpeg';
-import {
-  BmInput,
-  GlobalStyle,
+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');
 
-  // BmCheckboxToggle,
-} from './lib/components';
-import BmJumbotron from './lib/components/Jumbotron/Jumbotron';
-
-// 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" />
-      <BmJumbotron>
-        <BmJumbotron.Title>
-          <h3>Title</h3>
-        </BmJumbotron.Title>
-        <BmJumbotron.Body>
-          <BmJumbotron.Body.Text>Body Text</BmJumbotron.Body.Text>
-          <BmJumbotron.Body.Image>
-            <img src={Image} alt="sampleImage" />
-          </BmJumbotron.Body.Image>
-        </BmJumbotron.Body>
-      </BmJumbotron>
+      <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">

package/src/examples/Input.js

@@ -1,79 +1,88 @@
-import React, { Component } from "react";
-import { BmInput } from "../lib/components/input";
+import React, { Component } from 'react';
+import { BmInput } from '../lib/components/input';
+
 export class Input extends Component {
   render() {
     return (
       <div>
         <h3>Inputs</h3>
-          <div className="row">
-            <div className="column">
-              <BmInput
-                type="text"
-                placeholder="Placeholder"
-                id="name"
-                label="Enabled State"
-                state="enabled"
-              /><br/>
-              <BmInput
-                type="text"
-                placeholder="Placeholder"
-                value="Text"
-                id="name"
-                label="Disabled state"
-                state="disabled"
-              /><br/>
-            </div>
-            <div className="column">
-              <BmInput
-                type="text"
-                placeholder="Placeholder"
-                value="Text"
-                id="name"
-                label="Completed state"
-                state="complete"
-              /><br/>
-              <BmInput
-                type="text"
-                placeholder="Placeholder"
-                value="Text"
-                id="name"
-                label="Incomplete State"
-                state="incomplete"
-              /><br/>
-            </div>
-            <div className="column">
-              <BmInput
-                type="text"
-                value="Text"
-                id="name"
-                label="Positive state"
-                state="positive"
-              /><br/>
-              <BmInput
-                type="text"
-                value="Text"
-                id="name"
-                label="Negative state"
-                state="negative"
-              /><br/>
-            </div>
-            <div className="column">
-              <BmInput
-                type="text"
-                placeholder="Placeholder"
-                id="name"
-                label="Pressed state"
-                state="pressed"
-              /><br/>
-              <BmInput
-                type="text"
-                value="Text"
-                id="name"
-                label="Focused state"
-                state="focus"
-              /><br/>
-            </div>
+        <div className="row">
+          <div className="column">
+            <BmInput
+              type="text"
+              placeholder="Placeholder"
+              id="name"
+              label="Enabled State"
+              state="enabled"
+            />
+            <br />
+            <BmInput
+              type="text"
+              placeholder="Placeholder"
+              value="Text"
+              id="name"
+              label="Disabled state"
+              state="disabled"
+            />
+            <br />
+          </div>
+          <div className="column">
+            <BmInput
+              type="text"
+              placeholder="Placeholder"
+              value="Text"
+              id="name"
+              label="Completed state"
+              state="complete"
+            />
+            <br />
+            <BmInput
+              type="text"
+              placeholder="Placeholder"
+              value="Text"
+              id="name"
+              label="Incomplete State"
+              state="incomplete"
+            />
+            <br />
+          </div>
+          <div className="column">
+            <BmInput
+              type="text"
+              value="Text"
+              id="name"
+              label="Positive state"
+              state="positive"
+            />
+            <br />
+            <BmInput
+              type="text"
+              value="Text"
+              id="name"
+              label="Negative state"
+              state="negative"
+            />
+            <br />
+          </div>
+          <div className="column">
+            <BmInput
+              type="text"
+              placeholder="Placeholder"
+              id="name"
+              label="Pressed state"
+              state="pressed"
+            />
+            <br />
+            <BmInput
+              type="text"
+              value="Text"
+              id="name"
+              label="Focused state"
+              state="focus"
+            />
+            <br />
           </div>
+        </div>
       </div>
     );
   }

package/src/examples/Logo.js

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { Logo } from "../lib/components/logo";
+import React, { Component } from 'react';
+import { Logo } from '../lib/components/logo';
 
 export class Logos extends Component {
   render() {

package/src/examples/Navbar.js

@@ -1,20 +1,20 @@
 /* eslint-disable no-unused-vars */
-import React, { Component } from "react";
+import React, { Component } from 'react';
+import { AssignmentLateOutlined } from '@material-ui/icons';
+import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone';
+import MenuIcon from '@material-ui/icons/Menu';
+import styled from 'styled-components';
 import {
   BmNavbar,
   BmNavBarProfile,
   BmNavbarSearch,
   BmNavbarItems,
-} from "../lib/components/navbar";
-import { BmLogo } from "../lib/components/logo";
-import Azam from "../lib/images/azam.png";
-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";
-import MenuIcon from "@material-ui/icons/Menu";
+} from '../lib/components/navbar';
+import { BmLogo } from '../lib/components/logo';
+import Azam from '../lib/images/azam.png';
+import { BmAlertIcon } from '../lib/components/Buttons/buttonAlertIcons';
+import { BmCheckboxToggler } from '../lib/components/checkboxToggler';
 
-import styled from "styled-components";
 // import { BmSearch } from "./lib/components/search";
 
 const Menu = styled.div`
@@ -60,8 +60,8 @@ export class Navbars extends Component {
               <BmCheckboxToggler />
             </BmNavBarProfile>
             <Hamburger>
-                <MenuIcon />
-              </Hamburger>
+              <MenuIcon />
+            </Hamburger>
             {/* <Menu>
             </Menu> */}
           </BmNavbarItems>

package/src/examples/Search.js

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