beem-component 1.6.3 → 1.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc +1 -1
- package/dist/components/Buttons/buttons.js +6 -3
- package/package.json +7 -13
- package/src/App copy.js +117 -0
- package/src/App.js +2 -111
- package/src/lib/components/Buttons/buttons.js +3 -0
package/.eslintrc
CHANGED
|
@@ -19,7 +19,7 @@ var _iconStyles = require("../iconStyles");
|
|
|
19
19
|
|
|
20
20
|
var _text = require("../text");
|
|
21
21
|
|
|
22
|
-
var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color"];
|
|
22
|
+
var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "type"];
|
|
23
23
|
|
|
24
24
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
25
25
|
|
|
@@ -192,13 +192,15 @@ var BmButton = function BmButton(props) {
|
|
|
192
192
|
leadingIcon = props.leadingIcon,
|
|
193
193
|
trailingIcon = props.trailingIcon,
|
|
194
194
|
color = props.color,
|
|
195
|
+
type = props.type,
|
|
195
196
|
rest = _objectWithoutProperties(props, _excluded);
|
|
196
197
|
|
|
197
198
|
return /*#__PURE__*/_react.default.createElement(BeemButton, _extends({
|
|
198
199
|
size: size,
|
|
199
200
|
variant: variant,
|
|
200
201
|
disabled: disabled,
|
|
201
|
-
color: color
|
|
202
|
+
color: color,
|
|
203
|
+
type: type
|
|
202
204
|
}, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(BmLeftIcon, {
|
|
203
205
|
disabled: disabled,
|
|
204
206
|
icon: leadingIcon,
|
|
@@ -209,7 +211,8 @@ var BmButton = function BmButton(props) {
|
|
|
209
211
|
disabled: disabled,
|
|
210
212
|
variant: variant,
|
|
211
213
|
size: size,
|
|
212
|
-
color: color
|
|
214
|
+
color: color,
|
|
215
|
+
type: type // {...rest}
|
|
213
216
|
|
|
214
217
|
}, children), trailingIcon && /*#__PURE__*/_react.default.createElement(BmRightIcon, {
|
|
215
218
|
icon: trailingIcon,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "beem-component",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/components/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react": "^17.0.2",
|
|
46
46
|
"react-dom": "^17.0.2",
|
|
47
47
|
"react-router-dom": "^5.3.0",
|
|
48
|
-
"react-scripts": "
|
|
48
|
+
"react-scripts": "^5.0.1",
|
|
49
49
|
"save": "^2.4.0",
|
|
50
50
|
"styled-components": "^5.3.0",
|
|
51
51
|
"web-vitals": "^1.1.2"
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
"@storybook/react": "^6.3.2",
|
|
71
71
|
"@storybook/theming": "^6.4.9",
|
|
72
72
|
"babel-eslint": "^10.1.0",
|
|
73
|
+
"babel-loader": "^8.2.3",
|
|
73
74
|
"babel-plugin-react-intl": "^5.1.18",
|
|
74
75
|
"babel-plugin-styled-components": "^1.13.3",
|
|
75
76
|
"babel-preset-react-app": "^10.0.0",
|
|
@@ -79,22 +80,15 @@
|
|
|
79
80
|
"eslint-config-airbnb": "^18.2.1",
|
|
80
81
|
"eslint-config-prettier": "^8.3.0",
|
|
81
82
|
"eslint-plugin-import": "^2.25.2",
|
|
82
|
-
"eslint-plugin-jest": "^25.2.
|
|
83
|
+
"eslint-plugin-jest": "^25.2.4",
|
|
83
84
|
"eslint-plugin-jsdoc": "^32.2.0",
|
|
84
85
|
"eslint-plugin-jsx-a11y": "^6.4.1",
|
|
85
|
-
"eslint-plugin-prettier": "^4.
|
|
86
|
-
"eslint-plugin-react": "^7.
|
|
86
|
+
"eslint-plugin-prettier": "^4.2.1",
|
|
87
|
+
"eslint-plugin-react": "^7.29.4",
|
|
87
88
|
"generate-changelog": "^1.8.0",
|
|
88
89
|
"husky": "^7.0.4",
|
|
89
90
|
"lint-staged": "^11.2.6",
|
|
90
|
-
"prettier": "^2.
|
|
91
|
+
"prettier": "^2.7.1",
|
|
91
92
|
"storybook-addon-jsx": "^7.3.14"
|
|
92
|
-
},
|
|
93
|
-
"peerDependencies": {
|
|
94
|
-
"babel-loader": "8.1.0",
|
|
95
|
-
"react": "^17.0.2",
|
|
96
|
-
"react-dom": "^17.0.2",
|
|
97
|
-
"react-scripts": "4.0.3",
|
|
98
|
-
"web-vitals": "^1.1.2"
|
|
99
93
|
}
|
|
100
94
|
}
|
package/src/App copy.js
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { GlobalStyle, BmChat } from './lib/components';
|
|
3
|
+
// import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
|
|
4
|
+
// import BmChat from './lib/components';
|
|
5
|
+
|
|
6
|
+
const Chat = () => {
|
|
7
|
+
// const [checked, setChecked] = useState(false);
|
|
8
|
+
// const [showModal, setShowModal] = useState(false);
|
|
9
|
+
const image =
|
|
10
|
+
'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/3ba5560f-5446-4623-940e-c92b0f50a9b1?AWSAccessKeyId=AKIAVCAYXA54IQYB6C7A&Expires=1733652431&Signature=WEt9my0kkm3SRkiJjvth2vQKcHc%3D';
|
|
11
|
+
const file =
|
|
12
|
+
'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/270e8552-064f-42aa-970c-0593b5cf3a20?AWSAccessKeyId=AKIAVCAYXA54IQYB6C7A&Expires=1733652558&Signature=0sTEvpH0UoKHeb8mrFSXlf65h24%3D';
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<GlobalStyle />
|
|
16
|
+
<BmChat>
|
|
17
|
+
<BmChat.Body>
|
|
18
|
+
<BmChat.Details
|
|
19
|
+
state="inbound"
|
|
20
|
+
session="sms"
|
|
21
|
+
displayTime={<p>12:00pm</p>}
|
|
22
|
+
status="sent"
|
|
23
|
+
sessionDetails={{
|
|
24
|
+
message: <h3>Session Message</h3>,
|
|
25
|
+
time: <p>12:00pm</p>,
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
<p>Inbound Text Message</p>
|
|
29
|
+
</BmChat.Details>
|
|
30
|
+
<BmChat.Details
|
|
31
|
+
state="inbound"
|
|
32
|
+
session="live"
|
|
33
|
+
displayTime={<p>12:00pm</p>}
|
|
34
|
+
status="sent"
|
|
35
|
+
fileName={<p>chahhhhhhhht.png</p>}
|
|
36
|
+
src={image}
|
|
37
|
+
link={image}
|
|
38
|
+
sessionDetails={{
|
|
39
|
+
message: <h3>Session Message</h3>,
|
|
40
|
+
time: <p>12:00pm</p>,
|
|
41
|
+
}}
|
|
42
|
+
/>
|
|
43
|
+
<BmChat.Details
|
|
44
|
+
state="inbound"
|
|
45
|
+
session="live"
|
|
46
|
+
displayTime={<p>10:00am</p>}
|
|
47
|
+
status="failed"
|
|
48
|
+
fileName={<p>fifdsfdsfsdfsfle.csv</p>}
|
|
49
|
+
file={file}
|
|
50
|
+
link={file}
|
|
51
|
+
/>
|
|
52
|
+
<BmChat.Details
|
|
53
|
+
state="outbound"
|
|
54
|
+
session="bot"
|
|
55
|
+
displayTime={<p>12:00pm</p>}
|
|
56
|
+
status="sent"
|
|
57
|
+
>
|
|
58
|
+
<p>Outbound Text Message</p>
|
|
59
|
+
</BmChat.Details>
|
|
60
|
+
<BmChat.Details
|
|
61
|
+
state="outbound"
|
|
62
|
+
session="live"
|
|
63
|
+
displayTime={<p>12:00pm</p>}
|
|
64
|
+
status="sent"
|
|
65
|
+
fileName={<p>chat.png</p>}
|
|
66
|
+
src={image}
|
|
67
|
+
/>
|
|
68
|
+
<BmChat.Details
|
|
69
|
+
state="outbound"
|
|
70
|
+
session="live"
|
|
71
|
+
displayTime={<p>10:00am</p>}
|
|
72
|
+
status="failed"
|
|
73
|
+
fileName={<p>file.csv</p>}
|
|
74
|
+
file={image}
|
|
75
|
+
// onDownload={() => {
|
|
76
|
+
// alert('hello');
|
|
77
|
+
// }}
|
|
78
|
+
/>
|
|
79
|
+
</BmChat.Body>
|
|
80
|
+
{/* <BmChat.Footer>
|
|
81
|
+
<div className="chat-footer">
|
|
82
|
+
<BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
|
|
83
|
+
<BmIcons icon={<AttachFileIcon />} size="xlarge" />
|
|
84
|
+
<BmIcons icon={<QuickreplyIcon />} size="xlarge" />
|
|
85
|
+
<BmInput placeholder="Enter Message" style={{ flex: '1' }} />
|
|
86
|
+
<BmIcons icon={<SendIcon />} size="xlarge" />
|
|
87
|
+
</div>
|
|
88
|
+
</BmChat.Footer> */}
|
|
89
|
+
</BmChat>
|
|
90
|
+
{/* <div>
|
|
91
|
+
<BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
|
|
92
|
+
</div>
|
|
93
|
+
<BmModal show={showModal} onHide={() => setShowModal(false)}>
|
|
94
|
+
<BmModal.Header closeButton>
|
|
95
|
+
<h2>Header</h2>
|
|
96
|
+
</BmModal.Header>
|
|
97
|
+
<BmModal.SubHeader>
|
|
98
|
+
<h5>This modal has a sub heading</h5>
|
|
99
|
+
</BmModal.SubHeader>
|
|
100
|
+
<BmModal.Body>
|
|
101
|
+
<BmCheckboxToggle
|
|
102
|
+
checked={checked}
|
|
103
|
+
onChange={() => setChecked(!checked)}
|
|
104
|
+
disabled
|
|
105
|
+
label={<h3>Field Label</h3>}
|
|
106
|
+
/>
|
|
107
|
+
<p>This is a body</p>
|
|
108
|
+
</BmModal.Body>
|
|
109
|
+
<BmModal.Footer>
|
|
110
|
+
<p>This is a footer</p>
|
|
111
|
+
</BmModal.Footer> */}
|
|
112
|
+
{/* </BmModal> */}
|
|
113
|
+
</>
|
|
114
|
+
);
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
export default Chat;
|
package/src/App.js
CHANGED
|
@@ -1,117 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
// import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
|
|
4
|
-
// import BmChat from './lib/components';
|
|
2
|
+
import { BmButton } from './lib/components';
|
|
5
3
|
|
|
6
4
|
const Chat = () => {
|
|
7
|
-
|
|
8
|
-
// const [showModal, setShowModal] = useState(false);
|
|
9
|
-
const image =
|
|
10
|
-
'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/3ba5560f-5446-4623-940e-c92b0f50a9b1?AWSAccessKeyId=AKIAVCAYXA54IQYB6C7A&Expires=1733652431&Signature=WEt9my0kkm3SRkiJjvth2vQKcHc%3D';
|
|
11
|
-
const file =
|
|
12
|
-
'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/270e8552-064f-42aa-970c-0593b5cf3a20?AWSAccessKeyId=AKIAVCAYXA54IQYB6C7A&Expires=1733652558&Signature=0sTEvpH0UoKHeb8mrFSXlf65h24%3D';
|
|
13
|
-
return (
|
|
14
|
-
<>
|
|
15
|
-
<GlobalStyle />
|
|
16
|
-
<BmChat>
|
|
17
|
-
<BmChat.Body>
|
|
18
|
-
<BmChat.Details
|
|
19
|
-
state="inbound"
|
|
20
|
-
session="sms"
|
|
21
|
-
displayTime={<p>12:00pm</p>}
|
|
22
|
-
status="sent"
|
|
23
|
-
sessionDetails={{
|
|
24
|
-
message: <h3>Session Message</h3>,
|
|
25
|
-
time: <p>12:00pm</p>,
|
|
26
|
-
}}
|
|
27
|
-
>
|
|
28
|
-
<p>Inbound Text Message</p>
|
|
29
|
-
</BmChat.Details>
|
|
30
|
-
<BmChat.Details
|
|
31
|
-
state="inbound"
|
|
32
|
-
session="live"
|
|
33
|
-
displayTime={<p>12:00pm</p>}
|
|
34
|
-
status="sent"
|
|
35
|
-
fileName={<p>chahhhhhhhht.png</p>}
|
|
36
|
-
src={image}
|
|
37
|
-
link={image}
|
|
38
|
-
sessionDetails={{
|
|
39
|
-
message: <h3>Session Message</h3>,
|
|
40
|
-
time: <p>12:00pm</p>,
|
|
41
|
-
}}
|
|
42
|
-
/>
|
|
43
|
-
<BmChat.Details
|
|
44
|
-
state="inbound"
|
|
45
|
-
session="live"
|
|
46
|
-
displayTime={<p>10:00am</p>}
|
|
47
|
-
status="failed"
|
|
48
|
-
fileName={<p>fifdsfdsfsdfsfle.csv</p>}
|
|
49
|
-
file={file}
|
|
50
|
-
link={file}
|
|
51
|
-
/>
|
|
52
|
-
<BmChat.Details
|
|
53
|
-
state="outbound"
|
|
54
|
-
session="bot"
|
|
55
|
-
displayTime={<p>12:00pm</p>}
|
|
56
|
-
status="sent"
|
|
57
|
-
>
|
|
58
|
-
<p>Outbound Text Message</p>
|
|
59
|
-
</BmChat.Details>
|
|
60
|
-
<BmChat.Details
|
|
61
|
-
state="outbound"
|
|
62
|
-
session="live"
|
|
63
|
-
displayTime={<p>12:00pm</p>}
|
|
64
|
-
status="sent"
|
|
65
|
-
fileName={<p>chat.png</p>}
|
|
66
|
-
src={image}
|
|
67
|
-
/>
|
|
68
|
-
<BmChat.Details
|
|
69
|
-
state="outbound"
|
|
70
|
-
session="live"
|
|
71
|
-
displayTime={<p>10:00am</p>}
|
|
72
|
-
status="failed"
|
|
73
|
-
fileName={<p>file.csv</p>}
|
|
74
|
-
file={image}
|
|
75
|
-
// onDownload={() => {
|
|
76
|
-
// alert('hello');
|
|
77
|
-
// }}
|
|
78
|
-
/>
|
|
79
|
-
</BmChat.Body>
|
|
80
|
-
{/* <BmChat.Footer>
|
|
81
|
-
<div className="chat-footer">
|
|
82
|
-
<BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
|
|
83
|
-
<BmIcons icon={<AttachFileIcon />} size="xlarge" />
|
|
84
|
-
<BmIcons icon={<QuickreplyIcon />} size="xlarge" />
|
|
85
|
-
<BmInput placeholder="Enter Message" style={{ flex: '1' }} />
|
|
86
|
-
<BmIcons icon={<SendIcon />} size="xlarge" />
|
|
87
|
-
</div>
|
|
88
|
-
</BmChat.Footer> */}
|
|
89
|
-
</BmChat>
|
|
90
|
-
{/* <div>
|
|
91
|
-
<BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
|
|
92
|
-
</div>
|
|
93
|
-
<BmModal show={showModal} onHide={() => setShowModal(false)}>
|
|
94
|
-
<BmModal.Header closeButton>
|
|
95
|
-
<h2>Header</h2>
|
|
96
|
-
</BmModal.Header>
|
|
97
|
-
<BmModal.SubHeader>
|
|
98
|
-
<h5>This modal has a sub heading</h5>
|
|
99
|
-
</BmModal.SubHeader>
|
|
100
|
-
<BmModal.Body>
|
|
101
|
-
<BmCheckboxToggle
|
|
102
|
-
checked={checked}
|
|
103
|
-
onChange={() => setChecked(!checked)}
|
|
104
|
-
disabled
|
|
105
|
-
label={<h3>Field Label</h3>}
|
|
106
|
-
/>
|
|
107
|
-
<p>This is a body</p>
|
|
108
|
-
</BmModal.Body>
|
|
109
|
-
<BmModal.Footer>
|
|
110
|
-
<p>This is a footer</p>
|
|
111
|
-
</BmModal.Footer> */}
|
|
112
|
-
{/* </BmModal> */}
|
|
113
|
-
</>
|
|
114
|
-
);
|
|
5
|
+
return <BmButton type="submit">Hello</BmButton>;
|
|
115
6
|
};
|
|
116
7
|
|
|
117
8
|
export default Chat;
|
|
@@ -177,6 +177,7 @@ export const BmButton = (props) => {
|
|
|
177
177
|
leadingIcon,
|
|
178
178
|
trailingIcon,
|
|
179
179
|
color,
|
|
180
|
+
type,
|
|
180
181
|
...rest
|
|
181
182
|
} = props;
|
|
182
183
|
return (
|
|
@@ -185,6 +186,7 @@ export const BmButton = (props) => {
|
|
|
185
186
|
variant={variant}
|
|
186
187
|
disabled={disabled}
|
|
187
188
|
color={color}
|
|
189
|
+
type={type}
|
|
188
190
|
{...rest}
|
|
189
191
|
>
|
|
190
192
|
{leadingIcon && (
|
|
@@ -201,6 +203,7 @@ export const BmButton = (props) => {
|
|
|
201
203
|
variant={variant}
|
|
202
204
|
size={size}
|
|
203
205
|
color={color}
|
|
206
|
+
type={type}
|
|
204
207
|
// {...rest}
|
|
205
208
|
>
|
|
206
209
|
{children}
|