beem-component 2.1.29 → 2.1.31

package/src/fonts.scss

@@ -25,4 +25,7 @@
 @font-face {
     font-family: 'OpenSans';
     src: url('../src/fonts/OpenSans-Regular.ttf');
-}
+}
+
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

package/src/lib/assets/voiceCallIcon.svg

@@ -0,0 +1,5 @@
+<svg width="418" height="418" viewBox="0 0 418 418" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="209" cy="209" r="209" fill="#33B1BA"/>
+<path d="M128.728 105.326L100.728 122.826C92.4077 128.026 91.4251 141.826 92.2276 152.826C100.728 269.326 177.228 310.326 194.728 323.326C208.728 333.726 221.561 331.326 226.228 328.826L252.728 312.326C265.528 302.726 263.061 286.993 260.228 280.326L244.728 255.326C231.528 237.326 211.561 245.493 203.228 251.826C193.228 258.326 192.228 255.326 186.728 251.826C168.328 235.026 155.394 206.159 151.228 193.826C147.628 187.026 152.728 181.993 155.728 180.326L169.728 170.826C178.928 163.226 179.228 149.326 176.228 141.826C171.894 134.326 161.387 117.426 154.024 109.826C146.661 102.226 134.092 103.659 128.728 105.326Z" fill="white"/>
+<path d="M220 156C236.5 158.5 259.5 170.5 256.5 206M225 121.5C281 132.5 295.5 180.5 290.5 211M230.5 88C300.5 97 333 164.5 324.5 216.5" stroke="white" stroke-width="16" stroke-linecap="round"/>
+</svg>

package/src/lib/components/Alert/Alert.js

@@ -0,0 +1,111 @@
+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})`;
+  }
+};
+
+const AlertWrapper = styled.div`
+  border: 1px solid ${({ themeColor }) => hexToRgba(themeColor, 0.2)};
+  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.05)};
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+
+  @media (min-width: 640px) {
+    padding: 1rem;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+`;
+
+const IconContainer = styled.div`
+  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin-top: 0.125rem;
+
+  @media (min-width: 640px) {
+    width: 2.1rem;
+    height: 2.1rem;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    color: ${({ themeColor }) => themeColor};
+
+    @media (min-width: 640px) {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+`;
+
+const TextContent = styled.div`
+  flex: 1;
+`;
+
+const Title = styled.h3`
+  font-weight: 500;
+  color: ${({ themeColor }) => themeColor};
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+`;
+
+const Description = styled.p`
+  color: #6b7280;
+  font-size: 0.75rem;
+
+  @media (min-width: 640px) {
+    font-size: 0.875rem;
+  }
+`;
+
+const BmAlertBox = ({
+  icon: Icon,
+  themeColor = '#EF4444',
+  title,
+  description,
+}) => {
+  return (
+    <AlertWrapper themeColor={themeColor}>
+      <Content>
+        {Icon && (
+          <IconContainer themeColor={themeColor}>
+            <Icon />
+          </IconContainer>
+        )}
+        <TextContent>
+          <Title themeColor={themeColor}>{title}</Title>
+          <Description>{description}</Description>
+        </TextContent>
+      </Content>
+    </AlertWrapper>
+  );
+};
+
+export default BmAlertBox;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import PersonIcon from '@mui/icons-material/Person';
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import BmAlertBox from './Alert';
+
+const iconOptions = {
+  AccessTimeIcon,
+  PersonIcon,
+  CalendarTodayOutlinedIcon,
+  None: null,
+};
+
+const Template = (args) => {
+  return (
+    <div style={{ maxWidth: 500, margin: '2rem auto' }}>
+      <BmAlertBox {...args} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: AccessTimeIcon,
+  themeColor: '#EF4444',
+  title: 'Submission Failed',
+  description:
+    'There was an issue processing your request. Please try again later.',
+};
+
+Default.argTypes = {
+  icon: {
+    control: {
+      type: 'select',
+      labels: Object.keys(iconOptions),
+    },
+    options: Object.keys(iconOptions),
+    mapping: iconOptions,
+  },
+  themeColor: {
+    control: 'color',
+  },
+  title: {
+    control: 'text',
+  },
+  description: {
+    control: 'text',
+  },
+};
+
+export default {
+  title: 'Components/BmAlertBox',
+  component: BmAlertBox,
+  argTypes: Default.argTypes,
+};
+
+export const Example = () => {
+  return (
+    <BmAlertBox
+      icon={AccessTimeIcon}
+      themeColor="#DC2626"
+      title="Payment Error"
+      description="We couldn't process your payment. Please try again later or contact support."
+    />
+  );
+};

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.js

@@ -0,0 +1,162 @@
+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})`;
+  }
+};
+
+const BackgroundStripe = styled.div`
+  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
+  padding-top: ${({ variant }) =>
+    variant === 'confirmation' ? '1rem' : '1.5rem'};
+  padding-bottom: ${({ variant }) =>
+    variant === 'confirmation' ? '1rem' : '2rem'};
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  @media (min-width: 640px) {
+    padding-top: ${({ variant }) =>
+      variant === 'confirmation' ? '1.5rem' : '2rem'};
+    padding-bottom: ${({ variant }) =>
+      variant === 'confirmation' ? '1.5rem' : '2.5rem'};
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+`;
+
+const CardContainer = styled.div`
+  background-color: ${hexToRgba('#ffffff', 0.7)};
+  padding: 1rem;
+  border-radius: 0.75rem;
+
+  @media (min-width: 640px) {
+    padding: 1.5rem;
+  }
+`;
+
+const IconWrapper = styled.div`
+  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
+  height: ${({ variant }) => (variant === 'confirmation' ? '3.5rem' : '4rem')};
+  width: ${({ variant }) => (variant === 'confirmation' ? '3.5rem' : '4rem')};
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto
+    ${({ variant }) => (variant === 'confirmation' ? '0.75rem' : '1rem')};
+
+  @media (min-width: 640px) {
+    height: ${({ variant }) => (variant === 'confirmation' ? '4rem' : '5rem')};
+    width: ${({ variant }) => (variant === 'confirmation' ? '4rem' : '5rem')};
+    margin-bottom: ${({ variant }) =>
+      variant === 'confirmation' ? '1rem' : '1.25rem'};
+  }
+
+  svg {
+    height: ${({ variant }) =>
+      variant === 'confirmation' ? '1.75rem' : '2rem'};
+    width: ${({ variant }) =>
+      variant === 'confirmation' ? '1.75rem' : '2rem'};
+    color: ${({ themeColor }) => themeColor};
+
+    @media (min-width: 640px) {
+      height: ${({ variant }) =>
+        variant === 'confirmation' ? '2rem' : '2.5rem'};
+      width: ${({ variant }) =>
+        variant === 'confirmation' ? '2rem' : '2.5rem'};
+    }
+  }
+`;
+
+const Title = styled.h2`
+  text-align: center;
+  font-size: 1.125rem;
+  color: ${({ themeColor }) => themeColor};
+  margin-bottom: ${({ variant }) =>
+    variant === 'confirmation' ? '0.25rem' : '0.5rem'};
+
+  @media (min-width: 640px) {
+    font-size: 1.25rem;
+    margin-bottom: ${({ variant }) =>
+      variant === 'confirmation' ? '0.5rem' : '0.75rem'};
+  }
+`;
+
+const Description = styled.p`
+  text-align: center;
+  font-size: ${({ variant }) =>
+    variant === 'confirmation' ? '0.75rem' : '0.875rem'};
+  color: #6b7280;
+
+  @media (min-width: 640px) {
+    font-size: ${({ variant }) =>
+      variant === 'confirmation' ? '0.875rem' : '1rem'};
+  }
+`;
+
+const ImageWrapper = styled.div`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  margin-top: 1rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;
+const BmCustomCardTitle = ({
+  icon: Icon,
+  themeColor = '#33B1BA',
+  title,
+  description,
+  variant = 'booking',
+  withStripe = false,
+  imageSrc,
+}) => {
+  const content = (
+    <CardContainer variant={variant}>
+      <IconWrapper themeColor={themeColor} variant={variant}>
+        {Icon && <Icon />}
+      </IconWrapper>
+      {title && <Title variant={variant}>{title}</Title>}
+      {description && (
+        <Description variant={variant}>{description}</Description>
+      )}
+      {imageSrc && (
+        <ImageWrapper>
+          <img src={imageSrc} alt={title || 'Card image'} />
+        </ImageWrapper>
+      )}
+    </CardContainer>
+  );
+
+  return withStripe ? (
+    <BackgroundStripe themeColor={themeColor} variant={variant}>
+      {content}
+    </BackgroundStripe>
+  ) : (
+    content
+  );
+};
+
+export default BmCustomCardTitle;

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.stories.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+// MUI icons
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import CheckIcon from '@mui/icons-material/Check';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import BmCustomCardTitle from './CustomCardTitle';
+
+// Icon options mapped by name
+const iconOptions = {
+  Calendar: CalendarTodayOutlinedIcon,
+  Check: CheckIcon,
+  Clock: AccessTimeIcon,
+  Heart: FavoriteIcon,
+};
+
+const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
+const Template = (args) => {
+  return (
+    <div style={{ maxWidth: 500, margin: '2rem auto' }}>
+      <BmCustomCardTitle {...args} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: CalendarTodayOutlinedIcon,
+  themeColor: '#33B1BA',
+  title: 'Book Your Medical Appointment',
+  description:
+    'Schedule a 30-minute consultation with our healthcare specialists',
+  variant: 'booking',
+  withStripe: true,
+  imageSrc: imgs,
+};
+
+Default.argTypes = {
+  icon: {
+    control: {
+      type: 'select',
+      labels: Object.keys(iconOptions),
+    },
+    options: Object.keys(iconOptions),
+    mapping: iconOptions,
+  },
+  themeColor: {
+    control: 'color',
+  },
+  title: {
+    control: 'text',
+  },
+  description: {
+    control: 'text',
+  },
+  variant: {
+    control: {
+      type: 'radio',
+    },
+    options: ['booking', 'confirmation'],
+  },
+  withStripe: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  imageSrc: {
+    control: 'text',
+    description: 'URL of the image to display in the card',
+  },
+};
+
+export default {
+  title: 'Components/BmCustomCardTitle',
+  component: BmCustomCardTitle,
+  argTypes: Default.argTypes,
+};
+
+export const Example = () => {
+  return (
+    <BmCustomCardTitle
+      icon={CalendarTodayOutlinedIcon}
+      themeColor="#33B1BA"
+      title="Book Your Medical Appointment"
+      description="Schedule a 30-minute consultation with our healthcare specialists"
+      variant="booking"
+      withStripe
+      imageSrc={imgs}
+    />
+  );
+};

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

@@ -120,11 +120,24 @@ 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}>
@@ -133,7 +146,7 @@ const BmSelector = ({
               name={name}
               value={item.id}
               checked={isSelected}
-              onChange={() => onChange(item.id)}
+              onChange={handleChange}
             />
             <TimeSlotCard selected={isSelected} themeColor={themeColor}>
               <CustomRadio selected={isSelected} themeColor={themeColor} />

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

@@ -44,6 +44,10 @@ export default {
         },
       ],
     },
+    useFormik: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
   },
 };
 
@@ -89,6 +93,7 @@ Default.args = {
       value: { startDate: '09:00 AM', endDate: '09:30 AM' },
     },
   ],
+  useFormik: false,
 
   themeColor: '#33B1BA',
   textColor: '#33B1BA',
@@ -110,9 +115,13 @@ 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}
@@ -120,6 +129,7 @@ export const Example = () => {
       themeColor="#33B1BA"
       textColor="#33B1BA"
       fontWeight="600"
+      useFormik="false"
     />
   );
 };

package/src/lib/components/BmTabv2/BmTabv2.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const TabsContainer = styled.div`
+  width: 100%;
+`;
+
+const TabsHeader = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 0 14px;
+  border-radius: var(--radius-lg, 12px);
+  flex-wrap: wrap;
+`;
+
+const TabsList = styled.div`
+  width: 100%;
+  display: inline-flex;
+  background-color: var(--color-muted, #f2f2f2);
+  color: var(--color-muted-foreground, #666);
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg, 12px);
+  padding: 4px 4px;
+`;
+
+const TabsTriggerButton = styled.button`
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-lg, 12px);
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 0.2s, box-shadow 0.2s, background-color 0.2s;
+  cursor: pointer;
+
+  ${({ active }) =>
+    active
+      ? css`
+          background-color: var(--color-card, #fff);
+          color: var(--color-foreground, #000);
+          border-color: var(--color-border, #ddd);
+        `
+      : css`
+          background-color: transparent;
+          color: var(--color-muted-foreground, #666);
+        `}
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--color-ring, #2684ff);
+    box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.3);
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  svg {
+    flex-shrink: 0;
+    pointer-events: none;
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const BmCustomTab = ({ value, onValueChange, tabs = [], className }) => {
+  return (
+    <TabsContainer className={className}>
+      <TabsHeader>
+        <TabsList>
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <TabsTriggerButton
+                key={tab.value}
+                active={value === tab.value}
+                onClick={() => onValueChange(tab.value)}
+              >
+                {Icon && (
+                  <IconWrapper>
+                    <Icon fontSize="small" />
+                  </IconWrapper>
+                )}
+                <span>{tab.label}</span>
+              </TabsTriggerButton>
+            );
+          })}
+        </TabsList>
+      </TabsHeader>
+    </TabsContainer>
+  );
+};
+
+export default BmCustomTab;