beem-component 2.0.27 → 2.1.0

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

@@ -0,0 +1,221 @@
+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 Panel = styled.div`
+  border: 0.0714rem solid rgba(51, 177, 186, 0.1);
+  border-radius: 0.5rem;
+  overflow: hidden;
+`;
+const SectionSummaryContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+
+  @media (min-width: 45.7143rem) {
+    margin-bottom: 1.25rem;
+  }
+`;
+
+const IconBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin-right: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 714.2143rem;
+  background-color: ${({ iconBackgroundColor, iconColor }) =>
+    iconBackgroundColor && hexToRgba(iconColor, 0.1)};
+
+  svg {
+    height: 1.2rem;
+    width: 1.2rem;
+    color: ${({ iconColor }) => iconColor || '#00000'};
+
+    @media (min-width: 45.7143rem) {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+  }
+`;
+
+const TextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const SummaryTitle = styled.p`
+  font-weight: 500;
+  margin: 0;
+  color: ${({ textColor }) => textColor || '#00000'};
+`;
+
+const SummarySubtitle = styled.p`
+  font-size: 0.75rem;
+  color: ${({ textColor }) => hexToRgba(textColor || '#000000', 0.6)};
+  margin: 0;
+
+  @media (min-width: 45.7143rem) {
+    font-size: 0.875rem;
+  }
+`;
+
+const SectionContainer = styled.div`
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  ${({ backgroundColor }) =>
+    backgroundColor &&
+    `
+    background-color: ${hexToRgba(backgroundColor, 0.05)};
+  `}
+
+  @media (max-width: 42.8571rem) {
+    padding: 0.5rem 0.75rem;
+    gap: 0.25rem;
+  }
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 1.1rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  margin: 0;
+
+  @media (max-width: 42.8571rem) {
+    font-size: 0.9rem;
+  }
+`;
+
+const SectionBody = styled.div`
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  @media (max-width: 42.8571rem) {
+    padding: 0.75rem;
+    gap: 0.4rem;
+  }
+`;
+
+const RowContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  align-items: center;
+
+  @media (max-width: 42.8571rem) {
+    font-size: 0.8rem;
+  }
+`;
+
+const Label = styled.span`
+  color: rgba(0, 0, 0, 0.6);
+
+  @media (max-width: 42.8571rem) {
+    font-size: 0.75rem;
+  }
+`;
+
+const Value = styled.span`
+  font-weight: 500;
+
+  @media (max-width: 42.8571rem) {
+    font-size: 0.75rem;
+  }
+`;
+
+const Divider = styled.hr`
+  border: none;
+  border-top: 0.0714rem dashed rgba(51, 177, 186, 0.2);
+  margin: 1rem auto;
+  max-width: 97%;
+  @media (max-width: 42.8571rem) {
+    margin: 0.75rem auto;
+    max-width: 97%;
+  }
+`;
+const SectionSummary = ({
+  icon: Icon,
+  title,
+  iconColor,
+  textColor,
+  subtitle,
+  iconBackgroundColor,
+}) => (
+  <SectionSummaryContainer>
+    {Icon && (
+      <IconBox iconColor={iconColor} iconBackgroundColor={iconBackgroundColor}>
+        <Icon />
+      </IconBox>
+    )}
+    <TextBox>
+      <SummaryTitle textColor={textColor}>{title}</SummaryTitle>
+      <SummarySubtitle textColor={textColor}>{subtitle}</SummarySubtitle>
+    </TextBox>
+  </SectionSummaryContainer>
+);
+const BmInfoPanel = ({ children }) => <Panel>{children}</Panel>;
+
+const Section = ({
+  title,
+  icon: Icon,
+  children,
+  showDivider,
+  backgroundColor,
+  iconColor,
+  iconBackgroundColor,
+}) => (
+  <>
+    {showDivider && <Divider />}
+    <SectionContainer backgroundColor={backgroundColor}>
+      {Icon && (
+        <IconBox
+          iconColor={iconColor}
+          iconBackgroundColor={iconBackgroundColor}
+        >
+          <Icon />
+        </IconBox>
+      )}
+      <SectionTitle>{title}</SectionTitle>
+    </SectionContainer>
+    <SectionBody>{children}</SectionBody>
+  </>
+);
+
+const Row = ({ label, value }) => (
+  <RowContainer>
+    <Label>{label}:</Label>
+    <Value>{value}</Value>
+  </RowContainer>
+);
+
+BmInfoPanel.Section = Section;
+BmInfoPanel.Row = Row;
+BmInfoPanel.SectionSummary = SectionSummary;
+
+export default BmInfoPanel;

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

@@ -0,0 +1,169 @@
+import React from 'react';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import PersonIcon from '@mui/icons-material/Person';
+import BusinessIcon from '@mui/icons-material/Business';
+import BmInfoPanel from './InfoPanel';
+
+const formData = {
+  departmentName: 'Marketing',
+  resourceName: 'John Doe',
+  date: new Date(),
+  timeSlot: '09:00 - 09:30',
+  name: 'Jane Smith',
+  phone: '+1234567890',
+  email: 'jane.smith@example.com',
+};
+const appointmentDetails = {
+  title: 'Consultation',
+  duration: '30 mins',
+};
+export default {
+  title: 'Components/BmInfoPanel',
+  component: BmInfoPanel,
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['detailed', 'summary'],
+      defaultValue: 'detailed',
+    },
+    showDivider: { control: 'boolean' },
+    backgroundColor: { control: 'color' },
+    iconColor: { control: 'color' },
+    textColor: { control: 'color' },
+    iconBackgroundColor: { control: 'boolean' },
+  },
+};
+
+const Template = ({
+  variant,
+  showDivider,
+  backgroundColor,
+  iconColor,
+  textColor,
+  iconBackgroundColor,
+}) => {
+  if (variant === 'summary') {
+    return (
+      <BmInfoPanel className="p3">
+        <BmInfoPanel.SectionSummary
+          icon={BusinessIcon}
+          title="Operations Department"
+          subtitle="Department"
+          iconColor={iconColor}
+          textColor={textColor}
+        />
+        <BmInfoPanel.SectionSummary
+          icon={BusinessIcon}
+          title="Customer Service"
+          subtitle="Department"
+          iconColor={iconColor}
+          textColor={textColor}
+          iconBackgroundColor={iconBackgroundColor}
+        />
+      </BmInfoPanel>
+    );
+  }
+
+  return (
+    <BmInfoPanel>
+      <BmInfoPanel.Section
+        title="Appointment Details"
+        icon={CalendarTodayIcon}
+        backgroundColor={backgroundColor}
+        iconColor={iconColor}
+        iconBackgroundColor={iconBackgroundColor}
+      >
+        <BmInfoPanel.Row label="Type" value="Consultation" />
+        <BmInfoPanel.Row label="Department" value="General Medicine" />
+        <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 label="Time" value="09:00 AM" />
+      </BmInfoPanel.Section>
+
+      <BmInfoPanel.Section
+        title="Personal Information"
+        icon={PersonIcon}
+        showDivider={showDivider}
+        iconColor={iconColor}
+      >
+        <BmInfoPanel.Row label="Name" value="John Doe" />
+        <BmInfoPanel.Row label="Email" value="john@example.com" />
+        <BmInfoPanel.Row label="Phone" value="+255 712 345 678" />
+      </BmInfoPanel.Section>
+    </BmInfoPanel>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: 'detailed',
+  showDivider: true,
+  backgroundColor: '#33B1BA',
+  iconColor: '#33B1BA',
+  textColor: '#000000',
+  iconBackgroundColor: false,
+};
+
+export const ExampleSummary = () => {
+  return (
+    <BmInfoPanel>
+      <BmInfoPanel.Section
+        title="Appointment Details"
+        icon={CalendarTodayIcon}
+        backgroundColor="#fcba03"
+        iconColor="#fcba03"
+        iconBackgroundColor
+      >
+        <BmInfoPanel.SectionSummary
+          iconColor="#fcba03"
+          textColor="#fcba03"
+          icon={BusinessIcon}
+          title="sales"
+          subtitle="Department"
+        />
+        <BmInfoPanel.SectionSummary
+          icon={BusinessIcon}
+          title="Pharma"
+          subtitle="Department"
+        />
+      </BmInfoPanel.Section>
+    </BmInfoPanel>
+  );
+};
+export const ExampleDetails = () => {
+  return (
+    <BmInfoPanel>
+      <BmInfoPanel.Section
+        title="Appointment Details"
+        icon={CalendarTodayIcon}
+        backgroundColor="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}>
+        <BmInfoPanel.Row label="Name" value={formData.name} />
+        <BmInfoPanel.Row label="Phone" value={formData.phone} />
+        <BmInfoPanel.Row label="Email" value={formData.email} />
+      </BmInfoPanel.Section>
+    </BmInfoPanel>
+  );
+};

package/src/lib/components/LabelWithIcon/LabelWithIcon.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+
+  @media (min-width: 45.7143rem) {
+    font-size: 1rem;
+  }
+
+  @media (min-width: 73.1429rem) {
+    font-size: 1.125rem;
+  }
+`;
+
+const IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  margin-right: 0.575rem;
+
+  svg {
+    color: ${({ color }) => color || 'inherit'};
+    font-size: ${({ size }) => size || '0.875rem'};
+
+    @media (min-width: 45.7143rem) {
+      font-size: calc(${({ size }) => size || '0.875rem'} * 1.15);
+    }
+
+    @media (min-width: 73.1429rem) {
+      font-size: calc(${({ size }) => size || '0.875rem'} * 1.3);
+    }
+  }
+`;
+
+const TextWrapper = styled.span`
+  color: ${({ color, theme }) => color || theme.labelColor || '#333'};
+  display: flex;
+  flex-direction: row;
+`;
+
+const BmLabelWithIcon = ({
+  icon: Icon,
+  iconColor,
+  iconSize = '0.875rem',
+  textColor,
+  children,
+  className,
+}) => (
+  <Wrapper className={className}>
+    {Icon && (
+      <IconWrapper color={iconColor} size={iconSize}>
+        <Icon />
+      </IconWrapper>
+    )}
+    <TextWrapper color={textColor}>{children}</TextWrapper>
+  </Wrapper>
+);
+
+export default BmLabelWithIcon;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import PeopleIcon from '@mui/icons-material/People';
+import EmailIcon from '@mui/icons-material/Email';
+import SettingsIcon from '@mui/icons-material/Settings';
+import BmLabelWithIcon from './LabelWithIcon';
+
+export default {
+  title: 'Components/BmLabelWithIcon',
+  component: BmLabelWithIcon,
+  argTypes: {
+    iconColor: { control: 'color' },
+    iconSize: { control: 'text' },
+    icon: {
+      options: ['People', 'Email', 'Settings'],
+      mapping: {
+        People: PeopleIcon,
+        Email: EmailIcon,
+        Settings: SettingsIcon,
+      },
+      control: { type: 'select' },
+    },
+  },
+};
+
+const Template = (args) => (
+  <BmLabelWithIcon {...args}>{args.children}</BmLabelWithIcon>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: PeopleIcon,
+  iconColor: '#6b7280',
+  iconSize: '0.875rem',
+  children: 'Team Members',
+};
+export const Example = () => {
+  return (
+    <BmLabelWithIcon
+      textColor="#fcba03"
+      icon={PeopleIcon}
+      iconColor="#fffff"
+      iconSize="16px"
+    >
+      <p>yooo</p>&nbsp;<h5>Team: Engineering</h5>
+    </BmLabelWithIcon>
+  );
+};
+export const StrongText = Template.bind({});
+StrongText.args = {
+  icon: EmailIcon,
+  iconColor: '#d97706',
+  iconSize: '1.1rem',
+  children: (
+    <>
+      Department: <strong>Marketing</strong>
+    </>
+  ),
+};

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

@@ -0,0 +1,208 @@
+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 Container = styled.div`
+  margin-bottom: 1rem;
+
+  --primary-color: ${({ primaryColor }) => primaryColor};
+  --primary-light: ${({ primaryColor }) => hexToRgba(primaryColor, 0.2)};
+  --primary-lighter: ${({ primaryColor }) => hexToRgba(primaryColor, 0.4)};
+  --muted-color: ${({ mutedColor }) => mutedColor};
+  --muted-foreground-color: ${({ mutedForegroundColor }) =>
+    mutedForegroundColor};
+
+  @media (min-width: 45.7143rem) {
+    margin-bottom: 1.5rem;
+  }
+`;
+
+const ProgressMobile = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  @media (min-width: 45.7143rem) {
+    display: none;
+  }
+`;
+
+const ProgressDot = styled.div`
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background-color: var(--muted-color);
+  transition: background-color 0.3s ease;
+
+  &.active {
+    background-color: var(--primary-color);
+  }
+
+  &.completed {
+    background-color: var(--primary-lighter);
+  }
+`;
+
+const ProgressDesktop = styled.div`
+  display: none;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+
+  @media (min-width: 45.7143rem) {
+    display: flex;
+  }
+`;
+
+const Step = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+`;
+
+const Circle = styled.div`
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  background-color: var(--muted-color);
+  color: var(--muted-foreground-color);
+  margin-bottom: 0.25rem;
+  transition: all 0.3s ease;
+
+  &.active {
+    background-color: var(--primary-color);
+    color: white;
+  }
+
+  &.completed {
+    background-color: var(--primary-light);
+    color: var(--primary-color);
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+
+const Label = styled.span`
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  color: var(--muted-foreground-color);
+  text-align: center;
+  font-weight: 400;
+  transition: color 0.3s ease;
+
+  &.active {
+    color: var(--primary-color);
+    font-weight: 500;
+  }
+`;
+
+const ProgressBar = styled.div`
+  width: 100%;
+  background-color: var(--muted-color);
+  height: 0.25rem;
+  border-radius: 714.2143rem;
+  overflow: hidden;
+`;
+
+const Fill = styled.div`
+  height: 100%;
+  background-color: var(--primary-color);
+  transition: width 0.3s ease-out;
+  width: ${({ percentage }) => percentage}%;
+  border-radius: 714.2143rem;
+`;
+
+const BmProgressIndicator = ({
+  steps = [],
+  currentStep = 0,
+  primaryColor = '#33B1BA',
+  mutedColor = '#ececf0',
+  mutedForegroundColor = '#717182',
+}) => {
+  if (!steps || steps.length <= 1) return null;
+
+  const progressPercentage = (currentStep / (steps.length - 1)) * 100;
+
+  return (
+    <Container
+      primaryColor={primaryColor}
+      mutedColor={mutedColor}
+      mutedForegroundColor={mutedForegroundColor}
+    >
+      <ProgressMobile>
+        {steps.map((step, index) => (
+          <ProgressDot
+            key={step.key || index}
+            className={`${index === currentStep ? 'active' : ''} ${
+              index < currentStep ? 'completed' : ''
+            }`}
+          />
+        ))}
+      </ProgressMobile>
+
+      <ProgressDesktop>
+        {steps.map((step, index) => {
+          const isActive = index === currentStep;
+          const isCompleted = index < currentStep;
+
+          return (
+            <Step key={step.key || index}>
+              <Circle
+                className={`${isActive ? 'active' : ''} ${
+                  isCompleted ? 'completed' : ''
+                }`}
+              >
+                {isCompleted ? (
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                ) : (
+                  <span>{index + 1}</span>
+                )}
+              </Circle>
+              <Label className={isActive ? 'active' : ''}>{step.label}</Label>
+            </Step>
+          );
+        })}
+      </ProgressDesktop>
+
+      <ProgressBar>
+        <Fill percentage={progressPercentage} />
+      </ProgressBar>
+    </Container>
+  );
+};
+
+export default BmProgressIndicator;