beem-component 2.1.8 → 2.1.9

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.
Files changed (13) hide show
  1. package/dist/components/DepartmentCard/DepartmentCard.js +99 -0
  2. package/dist/components/DepartmentCard/DepartmentCard.stories.js +53 -0
  3. package/dist/components/ResourceCard/ResourceCard.js +132 -0
  4. package/dist/components/ResourceCard/ResourceCard.stories.js +94 -0
  5. package/dist/components/index.js +14 -0
  6. package/package.json +1 -1
  7. package/src/App.js +54 -1
  8. package/src/fonts.scss +1 -4
  9. package/src/lib/components/DepartmentCard/DepartmentCard.js +131 -0
  10. package/src/lib/components/DepartmentCard/DepartmentCard.stories.jsx +38 -0
  11. package/src/lib/components/ResourceCard/ResourceCard.js +209 -0
  12. package/src/lib/components/ResourceCard/ResourceCard.stories.jsx +68 -0
  13. package/src/lib/components/index.js +4 -0
package/dist/components/DepartmentCard/DepartmentCard.js ADDED
@@ -0,0 +1,99 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const CardWrapper = _styledComponents.default.div.withConfig({
11
+ displayName: "DepartmentCard__CardWrapper"
12
+ })(["overflow:hidden;border-radius:0.5rem;border:1px solid #e5e7eb;border-top:4px solid ", ";background-color:#ffffff;opacity:", ";transition:opacity 0.3s;"], _ref => {
13
+ let {
14
+ borderTopColor
15
+ } = _ref;
16
+ return borderTopColor || '#cccccc';
17
+ }, _ref2 => {
18
+ let {
19
+ isActive
20
+ } = _ref2;
21
+ return isActive ? 1 : 0.5;
22
+ });
23
+ const Header = _styledComponents.default.div.withConfig({
24
+ displayName: "DepartmentCard__Header"
25
+ })(["padding:1rem 1rem 0.5rem 1rem;"]);
26
+ const TitleRow = _styledComponents.default.div.withConfig({
27
+ displayName: "DepartmentCard__TitleRow"
28
+ })(["display:flex;justify-content:space-between;align-items:flex-start;"]);
29
+ const CardTitle = _styledComponents.default.h3.withConfig({
30
+ displayName: "DepartmentCard__CardTitle"
31
+ })(["font-size:1.125rem;margin:0;"]);
32
+ const CardDescription = _styledComponents.default.p.withConfig({
33
+ displayName: "DepartmentCard__CardDescription"
34
+ })(["font-size:0.875rem;color:#6b7280;margin-top:0.25rem;"]);
35
+ const Content = _styledComponents.default.div.withConfig({
36
+ displayName: "DepartmentCard__Content"
37
+ })(["margin-top:1rem;padding:0 1rem 0.5rem 1rem;display:flex;justify-content:space-between;align-items:center;"]);
38
+ const ResourceText = _styledComponents.default.span.withConfig({
39
+ displayName: "DepartmentCard__ResourceText"
40
+ })(["font-size:0.875rem;color:#6b7280;"]);
41
+ const StatusRow = _styledComponents.default.div.withConfig({
42
+ displayName: "DepartmentCard__StatusRow"
43
+ })(["display:flex;align-items:center;"]);
44
+ const StatusDot = _styledComponents.default.span.withConfig({
45
+ displayName: "DepartmentCard__StatusDot"
46
+ })(["flex-shrink:0;width:0.5rem;height:0.5rem;margin-right:0.5rem;border-radius:9999px;background-color:", ";"], _ref3 => {
47
+ let {
48
+ isActive
49
+ } = _ref3;
50
+ return isActive ? '#22c55e' : '#9ca3af';
51
+ });
52
+ const StatusText = _styledComponents.default.span.withConfig({
53
+ displayName: "DepartmentCard__StatusText"
54
+ })(["font-size:0.75rem;color:#6b7280;"]);
55
+ const IconButtonsContainer = _styledComponents.default.div.withConfig({
56
+ displayName: "DepartmentCard__IconButtonsContainer"
57
+ })(["display:flex;gap:0.25rem;"]);
58
+ const IconButton = _styledComponents.default.button.withConfig({
59
+ displayName: "DepartmentCard__IconButton"
60
+ })(["background:none;border:none;padding:0;height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:", ";&:hover{color:", ";}"], _ref4 => {
61
+ let {
62
+ destructive
63
+ } = _ref4;
64
+ return destructive ? '#ef4444' : 'inherit';
65
+ }, _ref5 => {
66
+ let {
67
+ destructive
68
+ } = _ref5;
69
+ return destructive ? '#ef4444' : '#374151';
70
+ });
71
+ const BmDepartmentCard = _ref6 => {
72
+ let {
73
+ borderTopColor = '#cccccc',
74
+ isActive = true,
75
+ name,
76
+ description,
77
+ resourcesCount,
78
+ onEdit,
79
+ onDelete,
80
+ EditIcon,
81
+ DeleteIcon
82
+ } = _ref6;
83
+ return /*#__PURE__*/_react.default.createElement(CardWrapper, {
84
+ borderTopColor: borderTopColor,
85
+ isActive: isActive
86
+ }, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(TitleRow, null, /*#__PURE__*/_react.default.createElement(CardTitle, null, name), /*#__PURE__*/_react.default.createElement(IconButtonsContainer, null, /*#__PURE__*/_react.default.createElement(IconButton, {
87
+ onClick: onEdit
88
+ }, EditIcon && /*#__PURE__*/_react.default.createElement(EditIcon, {
89
+ fontSize: "small"
90
+ })), /*#__PURE__*/_react.default.createElement(IconButton, {
91
+ destructive: true,
92
+ onClick: onDelete
93
+ }, DeleteIcon && /*#__PURE__*/_react.default.createElement(DeleteIcon, {
94
+ fontSize: "small"
95
+ })))), /*#__PURE__*/_react.default.createElement(CardDescription, null, description)), /*#__PURE__*/_react.default.createElement(Content, null, resourcesCount && /*#__PURE__*/_react.default.createElement(ResourceText, null, resourcesCount, " Resources"), /*#__PURE__*/_react.default.createElement(StatusRow, null, /*#__PURE__*/_react.default.createElement(StatusDot, {
96
+ isActive: isActive
97
+ }), /*#__PURE__*/_react.default.createElement(StatusText, null, isActive ? 'Active' : 'Inactive'))));
98
+ };
99
+ var _default = exports.default = BmDepartmentCard;
package/dist/components/DepartmentCard/DepartmentCard.stories.js ADDED
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.Inactive = exports.Active = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
9
+ var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
10
+ var _DepartmentCard = _interopRequireDefault(require("./DepartmentCard"));
11
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
13
+ var _default = exports.default = {
14
+ title: 'Components/BmDepartmentCard',
15
+ component: _DepartmentCard.default,
16
+ argTypes: {
17
+ borderTopColor: {
18
+ control: 'color'
19
+ },
20
+ isActive: {
21
+ control: 'boolean'
22
+ },
23
+ name: {
24
+ control: 'text'
25
+ },
26
+ description: {
27
+ control: 'text'
28
+ },
29
+ resourcesCount: {
30
+ control: 'number'
31
+ }
32
+ }
33
+ };
34
+ const Template = args => /*#__PURE__*/_react.default.createElement(_DepartmentCard.default, _extends({}, args, {
35
+ EditIcon: _Edit.default,
36
+ DeleteIcon: _Delete.default
37
+ }));
38
+ const Active = exports.Active = Template.bind({});
39
+ Active.args = {
40
+ borderTopColor: '#3b82f6',
41
+ isActive: true,
42
+ name: 'Radiology',
43
+ description: 'Handles imaging and scans for diagnosis',
44
+ resourcesCount: 5
45
+ };
46
+ const Inactive = exports.Inactive = Template.bind({});
47
+ Inactive.args = {
48
+ borderTopColor: '#ef4444',
49
+ isActive: false,
50
+ name: 'Cardiology',
51
+ description: 'Provides heart-related care and surgeries',
52
+ resourcesCount: 3
53
+ };
package/dist/components/ResourceCard/ResourceCard.js ADDED
@@ -0,0 +1,132 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ /* eslint-disable react/no-array-index-key */
11
+
12
+ const CardWrapper = _styledComponents.default.div.withConfig({
13
+ displayName: "ResourceCard__CardWrapper"
14
+ })(["overflow:hidden;border:1px solid #e5e7eb;border-radius:0.5rem;border-top:4px solid ", ";background-color:#ffffff;opacity:", ";transition:opacity 0.3s;"], _ref => {
15
+ let {
16
+ borderTopColor
17
+ } = _ref;
18
+ return borderTopColor || '#cccccc';
19
+ }, _ref2 => {
20
+ let {
21
+ isActive
22
+ } = _ref2;
23
+ return isActive ? 1 : 0.5;
24
+ });
25
+ const Header = _styledComponents.default.div.withConfig({
26
+ displayName: "ResourceCard__Header"
27
+ })(["padding:1rem 1rem 0.5rem 1rem;"]);
28
+ const TitleRow = _styledComponents.default.div.withConfig({
29
+ displayName: "ResourceCard__TitleRow"
30
+ })(["display:flex;justify-content:space-between;align-items:flex-start;"]);
31
+ const TitleContainer = _styledComponents.default.div.withConfig({
32
+ displayName: "ResourceCard__TitleContainer"
33
+ })(["display:flex;flex-direction:column;"]);
34
+ const CardTitle = _styledComponents.default.h3.withConfig({
35
+ displayName: "ResourceCard__CardTitle"
36
+ })(["font-size:1.125rem;margin:0;"]);
37
+ const BadgeRow = _styledComponents.default.div.withConfig({
38
+ displayName: "ResourceCard__BadgeRow"
39
+ })(["display:flex;gap:0.5rem;margin-top:0.25rem;flex-wrap:wrap;"]);
40
+ const Badge = _styledComponents.default.span.withConfig({
41
+ displayName: "ResourceCard__Badge"
42
+ })(["display:inline-flex;align-items:center;border:1px solid #e5e7eb;border-radius:0.375rem;padding:0.125rem 0.5rem;font-size:0.75rem;background-color:#f9fafb;color:", ";"], _ref3 => {
43
+ let {
44
+ color
45
+ } = _ref3;
46
+ return color || 'inherit';
47
+ });
48
+ const IconsContainer = _styledComponents.default.div.withConfig({
49
+ displayName: "ResourceCard__IconsContainer"
50
+ })(["display:flex;gap:0.25rem;"]);
51
+ const IconButton = _styledComponents.default.button.withConfig({
52
+ displayName: "ResourceCard__IconButton"
53
+ })(["background:none;border:none;padding:0;height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:", ";&:hover{color:", ";}"], _ref4 => {
54
+ let {
55
+ destructive
56
+ } = _ref4;
57
+ return destructive ? '#ef4444' : 'inherit';
58
+ }, _ref5 => {
59
+ let {
60
+ destructive
61
+ } = _ref5;
62
+ return destructive ? '#ef4444' : '#374151';
63
+ });
64
+ const Content = _styledComponents.default.div.withConfig({
65
+ displayName: "ResourceCard__Content"
66
+ })(["padding:0 1rem 0.5rem 1rem;display:flex;flex-direction:column;gap:0.5rem;font-size:0.875rem;"]);
67
+ const InfoRow = _styledComponents.default.div.withConfig({
68
+ displayName: "ResourceCard__InfoRow"
69
+ })(["display:flex;flex-wrap:wrap;gap:0.25rem;"]);
70
+ const Label = _styledComponents.default.span.withConfig({
71
+ displayName: "ResourceCard__Label"
72
+ })(["color:#6b7280;"]);
73
+ const Value = _styledComponents.default.span.withConfig({
74
+ displayName: "ResourceCard__Value"
75
+ })(["color:#374151;"]);
76
+ const Footer = _styledComponents.default.div.withConfig({
77
+ displayName: "ResourceCard__Footer"
78
+ })(["display:flex;justify-content:flex-end;align-items:center;padding:0 1rem 0.75rem 1rem;"]);
79
+ const StatusDot = _styledComponents.default.span.withConfig({
80
+ displayName: "ResourceCard__StatusDot"
81
+ })(["flex-shrink:0;width:0.5rem;height:0.5rem;margin-right:0.5rem;border-radius:9999px;background-color:", ";"], _ref6 => {
82
+ let {
83
+ isActive
84
+ } = _ref6;
85
+ return isActive ? '#22c55e' : '#9ca3af';
86
+ });
87
+ const StatusText = _styledComponents.default.span.withConfig({
88
+ displayName: "ResourceCard__StatusText"
89
+ })(["font-size:0.75rem;color:#6b7280;"]);
90
+ const BmResourceCard = _ref7 => {
91
+ let {
92
+ borderTopColor = '#cccccc',
93
+ isActive = true,
94
+ name,
95
+ type,
96
+ resourceBadges = [],
97
+ departmentName,
98
+ email,
99
+ phone,
100
+ capacity,
101
+ features,
102
+ availability,
103
+ onEdit,
104
+ onDelete,
105
+ EditIcon,
106
+ DeleteIcon
107
+ } = _ref7;
108
+ return /*#__PURE__*/_react.default.createElement(CardWrapper, {
109
+ borderTopColor: borderTopColor,
110
+ isActive: isActive
111
+ }, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(TitleRow, null, /*#__PURE__*/_react.default.createElement(TitleContainer, null, /*#__PURE__*/_react.default.createElement(CardTitle, null, name), /*#__PURE__*/_react.default.createElement(BadgeRow, null, /*#__PURE__*/_react.default.createElement(Badge, null, type), resourceBadges.map((badge, index) => /*#__PURE__*/_react.default.createElement(Badge, {
112
+ key: index,
113
+ color: badge.color
114
+ }, badge.icon && /*#__PURE__*/_react.default.createElement(badge.icon, {
115
+ style: {
116
+ fontSize: 14,
117
+ marginRight: 4
118
+ }
119
+ }), badge.label)))), /*#__PURE__*/_react.default.createElement(IconsContainer, null, /*#__PURE__*/_react.default.createElement(IconButton, {
120
+ onClick: onEdit
121
+ }, EditIcon && /*#__PURE__*/_react.default.createElement(EditIcon, {
122
+ fontSize: "small"
123
+ })), /*#__PURE__*/_react.default.createElement(IconButton, {
124
+ destructive: true,
125
+ onClick: onDelete
126
+ }, DeleteIcon && /*#__PURE__*/_react.default.createElement(DeleteIcon, {
127
+ fontSize: "small"
128
+ }))))), /*#__PURE__*/_react.default.createElement(Content, null, departmentName && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Department:"), /*#__PURE__*/_react.default.createElement(Value, null, departmentName)), type === 'staff' && email && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Email:"), /*#__PURE__*/_react.default.createElement(Value, null, email)), type === 'staff' && phone && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Phone:"), /*#__PURE__*/_react.default.createElement(Value, null, phone)), type === 'room' && capacity && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Capacity:"), /*#__PURE__*/_react.default.createElement(Value, null, capacity)), type === 'room' && features && features.length > 0 && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Features:"), /*#__PURE__*/_react.default.createElement(Value, null, features.join(', '))), availability && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Availability:"), /*#__PURE__*/_react.default.createElement(Value, null, availability))), /*#__PURE__*/_react.default.createElement(Footer, null, /*#__PURE__*/_react.default.createElement(StatusDot, {
129
+ isActive: isActive
130
+ }), /*#__PURE__*/_react.default.createElement(StatusText, null, isActive ? 'Active' : 'Inactive')));
131
+ };
132
+ var _default = exports.default = BmResourceCard;
package/dist/components/ResourceCard/ResourceCard.stories.js ADDED
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.StaffExample = exports.RoomExample = exports.Default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
9
+ var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
10
+ var _CalendarToday = _interopRequireDefault(require("@mui/icons-material/CalendarToday"));
11
+ var _ResourceCard = _interopRequireDefault(require("./ResourceCard"));
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
14
+ var _default = exports.default = {
15
+ title: 'Components/BmResourceCard',
16
+ component: _ResourceCard.default,
17
+ argTypes: {
18
+ borderTopColor: {
19
+ control: 'color'
20
+ },
21
+ isActive: {
22
+ control: 'boolean'
23
+ },
24
+ name: {
25
+ control: 'text'
26
+ },
27
+ type: {
28
+ control: 'text'
29
+ },
30
+ departmentName: {
31
+ control: 'text'
32
+ },
33
+ email: {
34
+ control: 'text'
35
+ },
36
+ phone: {
37
+ control: 'text'
38
+ },
39
+ capacity: {
40
+ control: 'number'
41
+ },
42
+ availability: {
43
+ control: 'text'
44
+ }
45
+ }
46
+ };
47
+ const Template = args => /*#__PURE__*/_react.default.createElement(_ResourceCard.default, _extends({}, args, {
48
+ EditIcon: _Edit.default,
49
+ DeleteIcon: _Delete.default
50
+ }));
51
+ const Default = exports.Default = Template.bind({});
52
+ Default.args = {
53
+ borderTopColor: '#3b82f6',
54
+ isActive: true,
55
+ name: 'Room 101',
56
+ type: 'room',
57
+ resourceBadges: [{
58
+ label: 'Synced',
59
+ icon: _CalendarToday.default,
60
+ color: '#10b981'
61
+ }],
62
+ departmentName: 'Radiology',
63
+ capacity: 12,
64
+ features: ['Projector', 'Whiteboard'],
65
+ availability: 'Weekdays 9am - 5pm'
66
+ };
67
+ const StaffExample = exports.StaffExample = Template.bind({});
68
+ StaffExample.args = {
69
+ borderTopColor: '#10b981',
70
+ isActive: true,
71
+ name: 'Dr. Sarah Johnson',
72
+ type: 'staff',
73
+ resourceBadges: [{
74
+ label: 'Google Synced',
75
+ icon: _CalendarToday.default,
76
+ color: '#3b82f6'
77
+ }],
78
+ departmentName: 'Cardiology',
79
+ email: 'sarah.johnson@hospital.com',
80
+ phone: '+1 555 123 4567',
81
+ availability: 'Mon - Fri, 9am - 3pm'
82
+ };
83
+ const RoomExample = exports.RoomExample = Template.bind({});
84
+ RoomExample.args = {
85
+ borderTopColor: '#f59e0b',
86
+ isActive: false,
87
+ name: 'Conference Room B',
88
+ type: 'room',
89
+ resourceBadges: [],
90
+ departmentName: 'Oncology',
91
+ capacity: 20,
92
+ features: ['Video Conferencing', 'AC', 'Whiteboard'],
93
+ availability: 'Available on demand'
94
+ };
package/dist/components/index.js CHANGED
@@ -178,6 +178,12 @@ Object.defineProperty(exports, "BmCustomCardTitle", {
178
178
  return _CustomCardTitle.default;
179
179
  }
180
180
  });
181
+ Object.defineProperty(exports, "BmDepartmentCard", {
182
+ enumerable: true,
183
+ get: function () {
184
+ return _DepartmentCard.default;
185
+ }
186
+ });
181
187
  Object.defineProperty(exports, "BmEmojiIcon", {
182
188
  enumerable: true,
183
189
  get: function () {
@@ -310,6 +316,12 @@ Object.defineProperty(exports, "BmQuickReplyIcon", {
310
316
  return _iconStyles.BmQuickReplyIcon;
311
317
  }
312
318
  });
319
+ Object.defineProperty(exports, "BmResourceCard", {
320
+ enumerable: true,
321
+ get: function () {
322
+ return _ResourceCard.default;
323
+ }
324
+ });
313
325
  Object.defineProperty(exports, "BmRouteLink", {
314
326
  enumerable: true,
315
327
  get: function () {
@@ -479,5 +491,7 @@ var _InfoPanel = _interopRequireDefault(require("./InfoPanel/InfoPanel"));
479
491
  var _BmSelector = _interopRequireDefault(require("./BmSelector/BmSelector"));
480
492
  var _CustomCardTitle = _interopRequireDefault(require("./BmCustomCardTitle/CustomCardTitle"));
481
493
  var _Alert = _interopRequireDefault(require("./Alert/Alert"));
494
+ var _DepartmentCard = _interopRequireDefault(require("./DepartmentCard/DepartmentCard"));
495
+ var _ResourceCard = _interopRequireDefault(require("./ResourceCard/ResourceCard"));
482
496
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
483
497
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "2.1.8",
3
+ "version": "2.1.9",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/App.js CHANGED
@@ -4,11 +4,14 @@
4
4
  import React, { useState } from 'react';
5
5
  // import AbcIcon from '@mui/icons-material/Abc';
6
6
  // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
7
- // import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
7
+ import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
8
8
  import AccessTimeIcon from '@mui/icons-material/AccessTime';
9
9
  import PersonIcon from '@mui/icons-material/Person';
10
10
  import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
11
11
  import CheckIcon from '@mui/icons-material/Check';
12
+ import EditIcon from '@mui/icons-material/Edit';
13
+ import DeleteIcon from '@mui/icons-material/Delete';
14
+ // import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
12
15
  // import { Tooltip } from '@mui/material';
13
16
  import PeopleIcon from '@mui/icons-material/People';
14
17
  // import BusinessIcon from '@mui/icons-material/Business';
@@ -36,6 +39,8 @@ import {
36
39
  BmSelectionNotice,
37
40
  BmSelector,
38
41
  BmCustomCardTitle,
42
+ BmDepartmentCard,
43
+ BmResourceCard,
39
44
  } from './lib/components';
40
45
  import AlertBox from './lib/components/Alert/Alert';
41
46
  // import ProgressIndicator from './lib/components/newProgress';
@@ -1011,6 +1016,54 @@ const Chat = () => {
1011
1016
  <>
1012
1017
  <GlobalStyle />
1013
1018
  <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
1019
+ <div style={{ width: '100%', maxWidth: '900px', margin: '2rem auto' }}>
1020
+ <div style={{ maxWidth: 400, margin: '2rem auto' }}>
1021
+ <BmDepartmentCard
1022
+ borderTopColor="#3b82f6" // blue
1023
+ isActive="true"
1024
+ name="Radiology Department"
1025
+ description="Handles imaging and diagnostic scans"
1026
+ // resourcesCount={8}
1027
+ onEdit={() => alert('Edit department')}
1028
+ onDelete={() => alert('Delete department')}
1029
+ EditIcon={EditIcon}
1030
+ DeleteIcon={DeleteIcon}
1031
+ />
1032
+
1033
+ <BmDepartmentCard
1034
+ borderTopColor="#f97316" // orange
1035
+ isActive={false}
1036
+ name="Cardiology Department"
1037
+ description="Heart and blood vessel treatments"
1038
+ resourcesCount={5}
1039
+ onEdit={() => alert('Edit department')}
1040
+ onDelete={() => alert('Delete department')}
1041
+ EditIcon={EditIcon}
1042
+ DeleteIcon={DeleteIcon}
1043
+ />
1044
+ <BmResourceCard
1045
+ borderTopColor="#10b981"
1046
+ isActive="true"
1047
+ name="Dr. Jane Smith"
1048
+ type="staff"
1049
+ resourceBadges={[
1050
+ {
1051
+ label: 'Google Synced',
1052
+ color: '#10b981',
1053
+ icon: CalendarTodayIcon,
1054
+ },
1055
+ ]}
1056
+ departmentName="Radiology"
1057
+ email="jane.smith@example.com"
1058
+ phone="+123456789"
1059
+ availability="Mon-Fri 9am-5pm"
1060
+ onEdit={() => alert('Edit resource')}
1061
+ onDelete={() => alert('Delete resource')}
1062
+ EditIcon={EditIcon}
1063
+ DeleteIcon={DeleteIcon}
1064
+ />
1065
+ </div>
1066
+ </div>
1014
1067
  <div>
1015
1068
  <BmInfoPanel.SectionSummary
1016
1069
  iconColor="#33B1BA"
package/src/fonts.scss CHANGED
@@ -28,7 +28,4 @@
28
28
  }
29
29
 
30
30
 
31
- @font-face {
32
- font-family: 'Inter';
33
- src: url('../src/fonts/Inter-regular.woff2')format('woff2'),url('../src/fonts/Inter-Bold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraBold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraLight.woff2')format('woff2'),url('../src/fonts/Inter-medium.woff2')format('woff2'),url('../src/fonts/Inter-SemiBold.woff2')format('woff2');
34
- }
31
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
package/src/lib/components/DepartmentCard/DepartmentCard.js ADDED
@@ -0,0 +1,131 @@
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+
4
+ const CardWrapper = styled.div`
5
+ overflow: hidden;
6
+
7
+ border-radius: 0.5rem;
8
+ border: 1px solid #e5e7eb;
9
+ border-top: 4px solid ${({ borderTopColor }) => borderTopColor || '#cccccc'};
10
+
11
+ background-color: #ffffff;
12
+ opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
13
+ transition: opacity 0.3s;
14
+ `;
15
+
16
+ const Header = styled.div`
17
+ padding: 1rem 1rem 0.5rem 1rem;
18
+ `;
19
+
20
+ const TitleRow = styled.div`
21
+ display: flex;
22
+ justify-content: space-between;
23
+ align-items: flex-start;
24
+ `;
25
+
26
+ const CardTitle = styled.h3`
27
+ font-size: 1.125rem;
28
+ margin: 0;
29
+ `;
30
+
31
+ const CardDescription = styled.p`
32
+ font-size: 0.875rem;
33
+ color: #6b7280;
34
+ margin-top: 0.25rem;
35
+ `;
36
+
37
+ const Content = styled.div`
38
+ margin-top: 1rem;
39
+ padding: 0 1rem 0.5rem 1rem;
40
+ display: flex;
41
+ justify-content: space-between;
42
+ align-items: center;
43
+ `;
44
+
45
+ const ResourceText = styled.span`
46
+ font-size: 0.875rem;
47
+ color: #6b7280;
48
+ `;
49
+
50
+ const StatusRow = styled.div`
51
+ display: flex;
52
+ align-items: center;
53
+ `;
54
+
55
+ const StatusDot = styled.span`
56
+ flex-shrink: 0;
57
+ width: 0.5rem;
58
+ height: 0.5rem;
59
+ margin-right: 0.5rem;
60
+ border-radius: 9999px;
61
+ background-color: ${({ isActive }) => (isActive ? '#22c55e' : '#9ca3af')};
62
+ `;
63
+
64
+ const StatusText = styled.span`
65
+ font-size: 0.75rem;
66
+ color: #6b7280;
67
+ `;
68
+
69
+ const IconButtonsContainer = styled.div`
70
+ display: flex;
71
+ gap: 0.25rem;
72
+ `;
73
+
74
+ const IconButton = styled.button`
75
+ background: none;
76
+ border: none;
77
+ padding: 0;
78
+ height: 2rem;
79
+ width: 2rem;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ cursor: pointer;
84
+ color: ${({ destructive }) => (destructive ? '#ef4444' : 'inherit')};
85
+
86
+ &:hover {
87
+ color: ${({ destructive }) => (destructive ? '#ef4444' : '#374151')};
88
+ }
89
+ `;
90
+
91
+ const BmDepartmentCard = ({
92
+ borderTopColor = '#cccccc',
93
+ isActive = true,
94
+ name,
95
+ description,
96
+ resourcesCount,
97
+ onEdit,
98
+ onDelete,
99
+ EditIcon,
100
+ DeleteIcon,
101
+ }) => {
102
+ return (
103
+ <CardWrapper borderTopColor={borderTopColor} isActive={isActive}>
104
+ <Header>
105
+ <TitleRow>
106
+ <CardTitle>{name}</CardTitle>
107
+ <IconButtonsContainer>
108
+ <IconButton onClick={onEdit}>
109
+ {EditIcon && <EditIcon fontSize="small" />}
110
+ </IconButton>
111
+ <IconButton destructive onClick={onDelete}>
112
+ {DeleteIcon && <DeleteIcon fontSize="small" />}
113
+ </IconButton>
114
+ </IconButtonsContainer>
115
+ </TitleRow>
116
+ <CardDescription>{description}</CardDescription>
117
+ </Header>
118
+ <Content>
119
+ {resourcesCount && (
120
+ <ResourceText>{resourcesCount} Resources</ResourceText>
121
+ )}
122
+ <StatusRow>
123
+ <StatusDot isActive={isActive} />
124
+ <StatusText>{isActive ? 'Active' : 'Inactive'}</StatusText>
125
+ </StatusRow>
126
+ </Content>
127
+ </CardWrapper>
128
+ );
129
+ };
130
+
131
+ export default BmDepartmentCard;
package/src/lib/components/DepartmentCard/DepartmentCard.stories.jsx ADDED
@@ -0,0 +1,38 @@
1
+ import React from 'react';
2
+ import EditIcon from '@mui/icons-material/Edit';
3
+ import DeleteIcon from '@mui/icons-material/Delete';
4
+ import BmDepartmentCard from './DepartmentCard';
5
+
6
+ export default {
7
+ title: 'Components/BmDepartmentCard',
8
+ component: BmDepartmentCard,
9
+ argTypes: {
10
+ borderTopColor: { control: 'color' },
11
+ isActive: { control: 'boolean' },
12
+ name: { control: 'text' },
13
+ description: { control: 'text' },
14
+ resourcesCount: { control: 'number' },
15
+ },
16
+ };
17
+
18
+ const Template = (args) => (
19
+ <BmDepartmentCard {...args} EditIcon={EditIcon} DeleteIcon={DeleteIcon} />
20
+ );
21
+
22
+ export const Active = Template.bind({});
23
+ Active.args = {
24
+ borderTopColor: '#3b82f6',
25
+ isActive: true,
26
+ name: 'Radiology',
27
+ description: 'Handles imaging and scans for diagnosis',
28
+ resourcesCount: 5,
29
+ };
30
+
31
+ export const Inactive = Template.bind({});
32
+ Inactive.args = {
33
+ borderTopColor: '#ef4444',
34
+ isActive: false,
35
+ name: 'Cardiology',
36
+ description: 'Provides heart-related care and surgeries',
37
+ resourcesCount: 3,
38
+ };
package/src/lib/components/ResourceCard/ResourceCard.js ADDED
@@ -0,0 +1,209 @@
1
+ /* eslint-disable react/no-array-index-key */
2
+ import React from 'react';
3
+ import styled from 'styled-components';
4
+
5
+ const CardWrapper = styled.div`
6
+ overflow: hidden;
7
+ border: 1px solid #e5e7eb;
8
+ border-radius: 0.5rem;
9
+ border-top: 4px solid ${({ borderTopColor }) => borderTopColor || '#cccccc'};
10
+ background-color: #ffffff;
11
+ opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
12
+ transition: opacity 0.3s;
13
+ `;
14
+
15
+ const Header = styled.div`
16
+ padding: 1rem 1rem 0.5rem 1rem;
17
+ `;
18
+
19
+ const TitleRow = styled.div`
20
+ display: flex;
21
+ justify-content: space-between;
22
+ align-items: flex-start;
23
+ `;
24
+
25
+ const TitleContainer = styled.div`
26
+ display: flex;
27
+ flex-direction: column;
28
+ `;
29
+
30
+ const CardTitle = styled.h3`
31
+ font-size: 1.125rem;
32
+ margin: 0;
33
+ `;
34
+
35
+ const BadgeRow = styled.div`
36
+ display: flex;
37
+ gap: 0.5rem;
38
+ margin-top: 0.25rem;
39
+ flex-wrap: wrap;
40
+ `;
41
+
42
+ const Badge = styled.span`
43
+ display: inline-flex;
44
+ align-items: center;
45
+ border: 1px solid #e5e7eb;
46
+ border-radius: 0.375rem;
47
+ padding: 0.125rem 0.5rem;
48
+ font-size: 0.75rem;
49
+ background-color: #f9fafb;
50
+ color: ${({ color }) => color || 'inherit'};
51
+ `;
52
+
53
+ const IconsContainer = styled.div`
54
+ display: flex;
55
+ gap: 0.25rem;
56
+ `;
57
+
58
+ const IconButton = styled.button`
59
+ background: none;
60
+ border: none;
61
+ padding: 0;
62
+ height: 2rem;
63
+ width: 2rem;
64
+ display: flex;
65
+ align-items: center;
66
+ justify-content: center;
67
+ cursor: pointer;
68
+ color: ${({ destructive }) => (destructive ? '#ef4444' : 'inherit')};
69
+
70
+ &:hover {
71
+ color: ${({ destructive }) => (destructive ? '#ef4444' : '#374151')};
72
+ }
73
+ `;
74
+
75
+ const Content = styled.div`
76
+ padding: 0 1rem 0.5rem 1rem;
77
+ display: flex;
78
+ flex-direction: column;
79
+ gap: 0.5rem;
80
+ font-size: 0.875rem;
81
+ `;
82
+
83
+ const InfoRow = styled.div`
84
+ display: flex;
85
+ flex-wrap: wrap;
86
+ gap: 0.25rem;
87
+ `;
88
+
89
+ const Label = styled.span`
90
+ color: #6b7280;
91
+ `;
92
+
93
+ const Value = styled.span`
94
+ color: #374151;
95
+ `;
96
+
97
+ const Footer = styled.div`
98
+ display: flex;
99
+ justify-content: flex-end;
100
+ align-items: center;
101
+ padding: 0 1rem 0.75rem 1rem;
102
+ `;
103
+
104
+ const StatusDot = styled.span`
105
+ flex-shrink: 0;
106
+ width: 0.5rem;
107
+ height: 0.5rem;
108
+ margin-right: 0.5rem;
109
+ border-radius: 9999px;
110
+ background-color: ${({ isActive }) => (isActive ? '#22c55e' : '#9ca3af')};
111
+ `;
112
+
113
+ const StatusText = styled.span`
114
+ font-size: 0.75rem;
115
+ color: #6b7280;
116
+ `;
117
+
118
+ const BmResourceCard = ({
119
+ borderTopColor = '#cccccc',
120
+ isActive = true,
121
+ name,
122
+ type,
123
+ resourceBadges = [],
124
+ departmentName,
125
+ email,
126
+ phone,
127
+ capacity,
128
+ features,
129
+ availability,
130
+ onEdit,
131
+ onDelete,
132
+ EditIcon,
133
+ DeleteIcon,
134
+ }) => {
135
+ return (
136
+ <CardWrapper borderTopColor={borderTopColor} isActive={isActive}>
137
+ <Header>
138
+ <TitleRow>
139
+ <TitleContainer>
140
+ <CardTitle>{name}</CardTitle>
141
+ <BadgeRow>
142
+ <Badge>{type}</Badge>
143
+ {resourceBadges.map((badge, index) => (
144
+ <Badge key={index} color={badge.color}>
145
+ {badge.icon && (
146
+ <badge.icon style={{ fontSize: 14, marginRight: 4 }} />
147
+ )}
148
+ {badge.label}
149
+ </Badge>
150
+ ))}
151
+ </BadgeRow>
152
+ </TitleContainer>
153
+ <IconsContainer>
154
+ <IconButton onClick={onEdit}>
155
+ {EditIcon && <EditIcon fontSize="small" />}
156
+ </IconButton>
157
+ <IconButton destructive onClick={onDelete}>
158
+ {DeleteIcon && <DeleteIcon fontSize="small" />}
159
+ </IconButton>
160
+ </IconsContainer>
161
+ </TitleRow>
162
+ </Header>
163
+ <Content>
164
+ {departmentName && (
165
+ <InfoRow>
166
+ <Label>Department:</Label>
167
+ <Value>{departmentName}</Value>
168
+ </InfoRow>
169
+ )}
170
+ {type === 'staff' && email && (
171
+ <InfoRow>
172
+ <Label>Email:</Label>
173
+ <Value>{email}</Value>
174
+ </InfoRow>
175
+ )}
176
+ {type === 'staff' && phone && (
177
+ <InfoRow>
178
+ <Label>Phone:</Label>
179
+ <Value>{phone}</Value>
180
+ </InfoRow>
181
+ )}
182
+ {type === 'room' && capacity && (
183
+ <InfoRow>
184
+ <Label>Capacity:</Label>
185
+ <Value>{capacity}</Value>
186
+ </InfoRow>
187
+ )}
188
+ {type === 'room' && features && features.length > 0 && (
189
+ <InfoRow>
190
+ <Label>Features:</Label>
191
+ <Value>{features.join(', ')}</Value>
192
+ </InfoRow>
193
+ )}
194
+ {availability && (
195
+ <InfoRow>
196
+ <Label>Availability:</Label>
197
+ <Value>{availability}</Value>
198
+ </InfoRow>
199
+ )}
200
+ </Content>
201
+ <Footer>
202
+ <StatusDot isActive={isActive} />
203
+ <StatusText>{isActive ? 'Active' : 'Inactive'}</StatusText>
204
+ </Footer>
205
+ </CardWrapper>
206
+ );
207
+ };
208
+
209
+ export default BmResourceCard;
package/src/lib/components/ResourceCard/ResourceCard.stories.jsx ADDED
@@ -0,0 +1,68 @@
1
+ import React from 'react';
2
+ import EditIcon from '@mui/icons-material/Edit';
3
+ import DeleteIcon from '@mui/icons-material/Delete';
4
+ import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
5
+ import BmResourceCard from './ResourceCard';
6
+
7
+ export default {
8
+ title: 'Components/BmResourceCard',
9
+ component: BmResourceCard,
10
+ argTypes: {
11
+ borderTopColor: { control: 'color' },
12
+ isActive: { control: 'boolean' },
13
+ name: { control: 'text' },
14
+ type: { control: 'text' },
15
+ departmentName: { control: 'text' },
16
+ email: { control: 'text' },
17
+ phone: { control: 'text' },
18
+ capacity: { control: 'number' },
19
+ availability: { control: 'text' },
20
+ },
21
+ };
22
+
23
+ const Template = (args) => (
24
+ <BmResourceCard {...args} EditIcon={EditIcon} DeleteIcon={DeleteIcon} />
25
+ );
26
+
27
+ export const Default = Template.bind({});
28
+ Default.args = {
29
+ borderTopColor: '#3b82f6',
30
+ isActive: true,
31
+ name: 'Room 101',
32
+ type: 'room',
33
+ resourceBadges: [
34
+ { label: 'Synced', icon: CalendarTodayIcon, color: '#10b981' },
35
+ ],
36
+ departmentName: 'Radiology',
37
+ capacity: 12,
38
+ features: ['Projector', 'Whiteboard'],
39
+ availability: 'Weekdays 9am - 5pm',
40
+ };
41
+
42
+ export const StaffExample = Template.bind({});
43
+ StaffExample.args = {
44
+ borderTopColor: '#10b981',
45
+ isActive: true,
46
+ name: 'Dr. Sarah Johnson',
47
+ type: 'staff',
48
+ resourceBadges: [
49
+ { label: 'Google Synced', icon: CalendarTodayIcon, color: '#3b82f6' },
50
+ ],
51
+ departmentName: 'Cardiology',
52
+ email: 'sarah.johnson@hospital.com',
53
+ phone: '+1 555 123 4567',
54
+ availability: 'Mon - Fri, 9am - 3pm',
55
+ };
56
+
57
+ export const RoomExample = Template.bind({});
58
+ RoomExample.args = {
59
+ borderTopColor: '#f59e0b',
60
+ isActive: false,
61
+ name: 'Conference Room B',
62
+ type: 'room',
63
+ resourceBadges: [],
64
+ departmentName: 'Oncology',
65
+ capacity: 20,
66
+ features: ['Video Conferencing', 'AC', 'Whiteboard'],
67
+ availability: 'Available on demand',
68
+ };
package/src/lib/components/index.js CHANGED
@@ -83,6 +83,8 @@ import BmInfoPanel from './InfoPanel/InfoPanel';
83
83
  import BmSelector from './BmSelector/BmSelector';
84
84
  import BmCustomCardTitle from './BmCustomCardTitle/CustomCardTitle';
85
85
  import BmAlertBox from './Alert/Alert';
86
+ import BmDepartmentCard from './DepartmentCard/DepartmentCard';
87
+ import BmResourceCard from './ResourceCard/ResourceCard';
86
88
 
87
89
  export {
88
90
  BmAccordion,
@@ -163,4 +165,6 @@ export {
163
165
  BmSelector,
164
166
  BmCustomCardTitle,
165
167
  BmAlertBox,
168
+ BmDepartmentCard,
169
+ BmResourceCard,
166
170
  };