beem-component 2.1.8 → 2.1.28

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

@@ -1,111 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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 BmCustomCardTitle = ({
-  icon: Icon,
-  themeColor = '#33B1BA',
-  title,
-  description,
-  variant = 'booking',
-  withStripe = false,
-}) => {
-  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>
-      )}
-    </CardContainer>
-  );
-
-  return withStripe ? (
-    <BackgroundStripe themeColor={themeColor} variant={variant}>
-      {content}
-    </BackgroundStripe>
-  ) : (
-    content
-  );
-};
-
-export default BmCustomCardTitle;

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

@@ -1,83 +0,0 @@
-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 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,
-};
-
-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',
-    },
-  },
-};
-
-export default {
-  title: 'Components/BmCustomCardTitle',
-  component: BmCustomCardTitle,
-  argTypes: Default.argTypes,
-};
-
-export const Example = () => {
-  <BmCustomCardTitle
-    icon={CalendarTodayOutlinedIcon}
-    themeColor="#33B1BA"
-    title="Book Your Medical Appointment"
-    description="Schedule a 30-minute consultation with our healthcare specialists"
-    variant="booking"
-    withStripe
-  />;
-};