beem-component 2.1.7 → 2.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.1.7",
+  "version": "2.1.28",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -4,14 +4,12 @@
 import React, { useState } from 'react';
 // import AbcIcon from '@mui/icons-material/Abc';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
-// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import PersonIcon from '@mui/icons-material/Person';
-import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
-import CheckIcon from '@mui/icons-material/Check';
+// import PersonIcon from '@mui/icons-material/Person';
 // import { Tooltip } from '@mui/material';
 import PeopleIcon from '@mui/icons-material/People';
-// import BusinessIcon from '@mui/icons-material/Business';
+import BusinessIcon from '@mui/icons-material/Business';
 
 import {
   BmChat,
@@ -35,9 +33,7 @@ import {
   BmButton,
   BmSelectionNotice,
   BmSelector,
-  BmCustomCardTitle,
 } from './lib/components';
-import AlertBox from './lib/components/Alert/Alert';
 // import ProgressIndicator from './lib/components/newProgress';
 
 // const datsa = JSON.stringify({
@@ -944,7 +940,7 @@ const Chat = () => {
   };
   const slots = [
     {
-      id: 'slot-1', // ⚠️ id is required
+      id: 'slot-1',
       label: '10:00 AM - 10:30 AM',
       value: { startDate: '10:00 AM', endDate: '10:30 AM' },
     },
@@ -953,56 +949,6 @@ const Chat = () => {
       label: '10:30 AM - 11:10 AM',
       value: { startDate: '10:30 AM', endDate: '11:10 AM' },
     },
-    {
-      id: 'slot-3',
-      label: '11:10 AM - 11:50 AM',
-      value: { startDate: '11:10 AM', endDate: '11:50 AM' },
-    },
-    {
-      id: 'slot-4',
-      label: '11:50 AM - 12:30 PM',
-      value: { startDate: '11:50 AM', endDate: '12:30 PM' },
-    },
-    {
-      id: 'slot-5',
-      label: '12:30 PM - 1:10 PM',
-      value: { startDate: '12:30 PM', endDate: '1:10 PM' },
-    },
-    {
-      id: 'slot-6',
-      label: '1:10 PM - 1:50 PM',
-      value: { startDate: '1:10 PM', endDate: '1:50 PM' },
-    },
-    {
-      id: 'slot-7',
-      label: '1:50 PM - 2:30 PM',
-      value: { startDate: '1:50 PM', endDate: '2:30 PM' },
-    },
-    {
-      id: 'slot-8',
-      label: '2:30 PM - 3:10 PM',
-      value: { startDate: '2:30 PM', endDate: '3:10 PM' },
-    },
-    {
-      id: 'slot-9',
-      label: '3:10 PM - 3:50 PM',
-      value: { startDate: '3:10 PM', endDate: '3:50 PM' },
-    },
-    {
-      id: 'slot-10',
-      label: '3:50 PM - 4:30 PM',
-      value: { startDate: '3:50 PM', endDate: '4:30 PM' },
-    },
-    {
-      id: 'slot-11',
-      label: '4:30 PM - 5:10 PM',
-      value: { startDate: '4:30 PM', endDate: '5:10 PM' },
-    },
-    {
-      id: 'slot-12',
-      label: '5:10 PM - 5:50 PM',
-      value: { startDate: '5:10 PM', endDate: '5:50 PM' },
-    },
   ];
 
   const [selectedSlotId, setSelectedSlotId] = useState(null);
@@ -1010,42 +956,14 @@ const Chat = () => {
   return (
     <>
       <GlobalStyle />
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-        <div>
-          <BmInfoPanel.SectionSummary
-            iconColor="#33B1BA"
-            textColor="#fcba03"
-            icon={CalendarTodayOutlinedIcon}
-            title={formData.departmentName}
-            subtitle="Department"
-            // iconBackgroundColor
-          />
-          <AlertBox
-            icon={AccessTimeIcon}
-            themeColor="#DC2626"
-            title="Payment Error"
-            description="We couldn't process your payment. Please try again later or contact support."
-          />
-          <BmCustomCardTitle
-            icon={CalendarTodayOutlinedIcon}
-            themeColor="#33B1BA"
-            title="Book Your Medical Appointment"
-            description="Schedule a 30-minute consultation with our healthcare specialists"
-            variant="booking"
-            withStripe
-          />
-        </div>
-        <div>
-          <BmCustomCardTitle
-            icon={CheckIcon}
-            themeColor="#33B1BA"
-            title="Appointment Confirmed!"
-            description="Your booking has been successfully scheduled"
-            variant="confirmation"
-            withStripe
-          />
-        </div>
-      </div>
+      <BmSelector
+        data={slots}
+        selectedDataId={selectedSlotId}
+        onChange={setSelectedSlotId}
+        icon={AccessTimeIcon}
+        themeColor="#33B1BA"
+      />
+
       <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <div style={{ padding: '2rem' }}>
           <h1>Progress Indicator Demo</h1>
@@ -1082,14 +1000,7 @@ const Chat = () => {
             </BmCardv2.Description>
           </BmCardv2.Header>
           <BmCardv2.Content>
-            <BmSelector
-              data={slots}
-              selectedDataId={selectedSlotId}
-              onChange={setSelectedSlotId}
-              icon={AccessTimeIcon}
-              themeColor="#33B1BA"
-            />
-            {/* <BmInfoPanel>
+            <BmInfoPanel>
               <BmInfoPanel.Section
                 title="Appointment Details"
                 icon={CalendarTodayIcon}
@@ -1110,20 +1021,52 @@ const Chat = () => {
                   subtitle="Department"
                 />
               </BmInfoPanel.Section>
-            </BmInfoPanel> */}
-            <BmInfoPanel.Section
-              title="Personal Information"
-              icon={PersonIcon}
-              showDivider
-              dividerColor="#33b1ba"
-              dividerWitdh="2px"
-              dividerType="solid"
-              dividerOpacity="0.5"
-            >
-              <BmInfoPanel.Row label="Name" value={formData.name} />
-              <BmInfoPanel.Row label="Phone" value={formData.phone} />
-              <BmInfoPanel.Row label="Email" value={formData.email} />
-            </BmInfoPanel.Section>
+            </BmInfoPanel>
+            <BmInfoPanel>
+              {/* <BmInfoPanel.Section
+                title="Appointment Details"
+                icon={CalendarTodayIcon}
+                background_color="rgba(51, 177, 186, 0.05)"
+              >
+                <BmInfoPanel.Row label="Type" value={appointmentDetails.title} />
+                <BmInfoPanel.Row
+                  label="Department"
+                  value={formData.departmentName}
+                />
+                <BmInfoPanel.Row label="Resource" value={formData.resourceName} />
+                <BmInfoPanel.Row
+                  label="Duration"
+                  value={appointmentDetails.duration}
+                />
+                <BmInfoPanel.Row
+                  label="Date"
+                  value={formData.date.toDateString()}
+                />
+                <BmInfoPanel.Row
+                  label="Time"
+                  value={formData.timeSlot.split(' - ')[1]}
+                />
+              </BmInfoPanel.Section> */}
+
+              {/* <BmInfoPanel.Section
+                title="Personal Information"
+                icon={PersonIcon}
+                showDivider
+              >
+                <BmInfoPanel.Row label="Name" value={formData.name} />
+                <BmInfoPanel.Row label="Phone" value={formData.phone} />
+                <BmInfoPanel.Row label="Email" value={formData.email} />
+              </BmInfoPanel.Section>
+              <BmInfoPanel.Section
+                title="Personal Information"
+                icon={PersonIcon}
+                showDivider
+              >
+                <BmInfoPanel.Row label="Name" value={formData.name} />
+                <BmInfoPanel.Row label="Phone" value={formData.phone} />
+                <BmInfoPanel.Row label="Email" value={formData.email} />
+              </BmInfoPanel.Section> */}
+            </BmInfoPanel>
           </BmCardv2.Content>
           <BmCardv2.Footer>
             <BmButton

package/src/lib/components/BmSelector/BmSelector.js

@@ -1,25 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const CustomRadio = styled.span`
   display: inline-block;
@@ -120,24 +101,11 @@ const BmSelector = ({
   textColor,
   fontWeight,
   name = 'selection',
-  useFormik = false,
 }) => {
   return (
     <RadioGroupWrapper>
       {data.map((item) => {
         const isSelected = selectedDataId === item.id;
-        const handleChange = () => {
-          if (useFormik) {
-            onChange({
-              target: {
-                name,
-                value: item.id,
-              },
-            });
-          } else {
-            onChange(item.id);
-          }
-        };
 
         return (
           <label key={item.id} htmlFor={item.id}>
@@ -146,7 +114,7 @@ const BmSelector = ({
               name={name}
               value={item.id}
               checked={isSelected}
-              onChange={handleChange}
+              onChange={() => onChange(item.id)}
             />
             <TimeSlotCard selected={isSelected} themeColor={themeColor}>
               <CustomRadio selected={isSelected} themeColor={themeColor} />

package/src/lib/components/BmSelector/BmSelector.stories.jsx

@@ -44,10 +44,6 @@ export default {
         },
       ],
     },
-    useFormik: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
   },
 };
 
@@ -93,7 +89,6 @@ Default.args = {
       value: { startDate: '09:00 AM', endDate: '09:30 AM' },
     },
   ],
-  useFormik: false,
 
   themeColor: '#33B1BA',
   textColor: '#33B1BA',
@@ -115,13 +110,9 @@ export const Example = () => {
     },
   ];
 
-  // When you use useFormik as true then you need to pass handleChange func and the name [name="time"].
-  // so that is works accordingly
-
   const [selectedDataId, setSelectedDataId] = useState(null);
   return (
     <BmSelector
-      name="time"
       data={slots}
       selectedDataId={selectedDataId}
       onChange={setSelectedDataId}
@@ -129,7 +120,6 @@ export const Example = () => {
       themeColor="#33B1BA"
       textColor="#33B1BA"
       fontWeight="600"
-      useFormik="false"
     />
   );
 };

package/src/lib/components/Card_v2/Card.js

@@ -2,25 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const StyledCard = styled.div`
   background-color: var(--card, #fff);
@@ -54,31 +36,11 @@ const Description = styled.p`
 `;
 
 const Content = styled.div`
-  min-height: 180px;
   padding: 0 1.5rem;
-  max-height: calc(100vh - 28.5714rem);
-  overflow-y: auto;
-
-  scrollbar-width: thin;
-  scrollbar-color: ${() => hexToRgba('#33b1ba', 0.2)} transparent;
-
-  &::-webkit-scrollbar-thumb {
-    background: ${() => hexToRgba('#33b1ba', 0.3)};
-    border-radius: 0.6429rem;
-    transition: background 0.2s ease;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${() => hexToRgba('#33b1ba', 0.3)};
-  }
 
   &:last-child {
     padding-bottom: 1.5rem;
   }
-
-  @media (max-width: 54.8571rem) {
-    max-height: calc(100vh - 17.8572rem);
-  }
 `;
 
 const Footer = styled.div`

package/src/lib/components/InfoPanel/InfoPanel.js

@@ -1,25 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const Panel = styled.div`
   border: 0.0714rem solid rgba(51, 177, 186, 0.1);
@@ -53,8 +34,8 @@ const IconBox = styled.div`
     color: ${({ iconColor }) => iconColor || '#00000'};
 
     @media (min-width: 45.7143rem) {
-      height: 1.4rem;
-      width: 1.4rem;
+      height: 1.5rem;
+      width: 1.5rem;
     }
   }
 `;
@@ -134,7 +115,8 @@ const RowContainer = styled.div`
 `;
 
 const Label = styled.span`
-  color: ${({ labelTextColor }) => hexToRgba(labelTextColor || '#000000', 0.6)};
+  color: rgba(0, 0, 0, 0.6);
+
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -142,7 +124,7 @@ const Label = styled.span`
 
 const Value = styled.span`
   font-weight: 500;
-  color: ${({ valueTextColor }) => hexToRgba(valueTextColor || '#000000', 1)};
+
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -150,20 +132,7 @@ const Value = styled.span`
 
 const Divider = styled.hr`
   border: none;
-  border-top: ${({
-    showDivider,
-    dividerColor = '#33b1ba',
-    dividerType = 'dashed',
-    dividerWitdh = '1px',
-    dividerOpacity = '0.2',
-  }) => {
-    if (showDivider) {
-      return `${dividerWitdh} ${dividerType} ${hexToRgba(
-        dividerColor,
-        dividerOpacity
-      )}`;
-    }
-  }};
+  border-top: 0.0714rem dashed rgba(51, 177, 186, 0.2);
   margin: 1rem auto;
   max-width: 97%;
   @media (max-width: 42.8571rem) {
@@ -201,21 +170,9 @@ const Section = ({
   backgroundColor,
   iconColor,
   iconBackgroundColor,
-  dividerColor,
-  dividerWitdh,
-  dividerType,
-  dividerOpacity,
 }) => (
   <>
-    {showDivider && (
-      <Divider
-        dividerColor={dividerColor}
-        showDivider={showDivider}
-        dividerWitdh={dividerWitdh}
-        dividerType={dividerType}
-        dividerOpacity={dividerOpacity}
-      />
-    )}
+    {showDivider && <Divider />}
     <SectionContainer backgroundColor={backgroundColor}>
       {Icon && (
         <IconBox
@@ -231,10 +188,10 @@ const Section = ({
   </>
 );
 
-const Row = ({ label, value, labelTextColor, valueTextColor }) => (
+const Row = ({ label, value }) => (
   <RowContainer>
-    <Label labelTextColor={labelTextColor}>{label}:</Label>
-    <Value valueTextColor={valueTextColor}>{value}</Value>
+    <Label>{label}:</Label>
+    <Value>{value}</Value>
   </RowContainer>
 );
 

package/src/lib/components/InfoPanel/InfoPanel.stories.jsx

@@ -31,16 +31,6 @@ export default {
     iconColor: { control: 'color' },
     textColor: { control: 'color' },
     iconBackgroundColor: { control: 'boolean' },
-    dividerColor: { control: 'color' },
-    dividerWidth: { control: { type: 'text' }, defaultValue: '3px' },
-    dividerOpacity: { control: { type: 'text' }, defaultValue: '0.2' },
-    dividerType: {
-      control: { type: 'select' },
-      options: ['dashed', 'solid'],
-      defaultValue: 'dashed',
-    },
-    labelTextColor: { control: 'color' },
-    valueTextColor: { control: 'color' },
   },
 };
 
@@ -51,12 +41,6 @@ const Template = ({
   iconColor,
   textColor,
   iconBackgroundColor,
-  dividerColor,
-  dividerOpacity,
-  dividerType,
-  dividerWidth,
-  labelTextColor,
-  valueTextColor,
 }) => {
   if (variant === 'summary') {
     return (
@@ -94,12 +78,7 @@ const Template = ({
         <BmInfoPanel.Row label="Resource" value="Dr. Smith" />
         <BmInfoPanel.Row label="Duration" value="30 minutes" />
         <BmInfoPanel.Row label="Date" value="Monday, June 24, 2025" />
-        <BmInfoPanel.Row
-          labelTextColor={labelTextColor}
-          valueTextColor={valueTextColor}
-          label="Time"
-          value="09:00 AM"
-        />
+        <BmInfoPanel.Row label="Time" value="09:00 AM" />
       </BmInfoPanel.Section>
 
       <BmInfoPanel.Section
@@ -107,10 +86,6 @@ const Template = ({
         icon={PersonIcon}
         showDivider={showDivider}
         iconColor={iconColor}
-        dividerColor={dividerColor}
-        dividerType={dividerType}
-        dividerOpacity={dividerOpacity}
-        dividerWitdh={dividerWidth}
       >
         <BmInfoPanel.Row label="Name" value="John Doe" />
         <BmInfoPanel.Row label="Email" value="john@example.com" />
@@ -128,12 +103,6 @@ Default.args = {
   iconColor: '#33B1BA',
   textColor: '#000000',
   iconBackgroundColor: false,
-  dividerColor: '#33b1ba',
-  dividerType: 'dashed',
-  dividerWidth: '1px',
-  dividerOpacity: '0.2',
-  labelTextColor: '#e46a8e',
-  valueTextColor: '#235e92',
 };
 
 export const ExampleSummary = () => {
@@ -173,12 +142,7 @@ export const ExampleDetails = () => {
         <BmInfoPanel.Row label="Type" value={appointmentDetails.title} />
         <BmInfoPanel.Row label="Department" value={formData.departmentName} />
         <BmInfoPanel.Row label="Resource" value={formData.resourceName} />
-        <BmInfoPanel.Row
-          labelTextColor="#e46a8e"
-          valueTextColor="#235e92"
-          label="Duration"
-          value={appointmentDetails.duration}
-        />
+        <BmInfoPanel.Row label="Duration" value={appointmentDetails.duration} />
         <BmInfoPanel.Row label="Date" value={formData.date.toDateString()} />
         <BmInfoPanel.Row
           label="Time"
@@ -190,10 +154,6 @@ export const ExampleDetails = () => {
         title="Personal Information"
         icon={PersonIcon}
         showDivider
-        dividerColor="#33b1ba"
-        dividerType="dashed"
-        dividerWitdh="1px"
-        dividerOpacity="0.2"
       >
         <BmInfoPanel.Row label="Name" value={formData.name} />
         <BmInfoPanel.Row label="Phone" value={formData.phone} />

package/src/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -1,25 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const Container = styled.div`
   margin-bottom: 1rem;

package/src/lib/components/SelectionNotice/SelectionNotice.js

@@ -1,25 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const Container = styled.div`
   background-color: ${({ color }) => hexToRgba(color || '#33B1BA', 0.05)};

package/src/lib/components/index.js

@@ -81,8 +81,6 @@ import BmLabelWithIcon from './LabelWithIcon/LabelWithIcon';
 import { BmCardv2 } from './Card_v2/Card';
 import BmInfoPanel from './InfoPanel/InfoPanel';
 import BmSelector from './BmSelector/BmSelector';
-import BmCustomCardTitle from './BmCustomCardTitle/CustomCardTitle';
-import BmAlertBox from './Alert/Alert';
 
 export {
   BmAccordion,
@@ -161,6 +159,4 @@ export {
   BmInfoPanel,
   BmProgressIndicator,
   BmSelector,
-  BmCustomCardTitle,
-  BmAlertBox,
 };